flet build macos が、NumPy に対応 (公式バグフィックス)

NumPy を使用した Flet (ver. 0.21.0, 0.21.1) のアプリを macOS 用にビルドすると、アプリの起動後すぐにクラッシュするというバグがありました。そのため、自作アプリ字幕極楽丸では、当初使っていた NumPy による処理を Python ネイティブのみのコードで動くように (Copilot が) 修正してビルドしていました。ずいぶん前に GitHub に Issue を報告していたのですが、本日 Author の Feodor Fitsner から対処法の連絡があり、解決していることが確認できたので共有します。結論を書いちゃうと、たぶんもう一度ビルドするだけで動きます。

解決方法

Flet のバージョン 0.21.20.22.0 (2024/04/19 現在の最新版) のテンプレートファイルをいじって修正されたと言うことです。Flet 自体は変更していないようです。なので、NumPy を組み込んだ Flet アプリを macOS または iOS 用に書いている方は、これらのバージョンの Flet でアプリが動けば大丈夫そうです。

もし古いバージョンを使っている場合は pip install --upgrade flet で最新版にしましょう。バージョン指定でインストールする場合は、こんな感じでできます。

pip install flet==0.21.2

すでにバージョン 0.21.2 以上がインストール済みであれば、単純にビルドし直せばビルド後のアプリはクラッシュしない模様です。字幕極楽丸は大丈夫でした。以下はインストール済み Flet バージョンの確認方法です。

% pip list|grep flet
flet                  0.21.2
flet-core             0.21.2
flet-runtime          0.21.2

他の方法

Flet のコード内に以下を追加することでも解決できるそうです。が、普通にビルドすればテンプレートをダウンロードしてからビルド処理が走るので、0.21.2 以上で動くコードなら NumPy を使っても問題無さそうですね。

import os

os.environ["OPENBLAS_NUM_THREADS"] = "1"

関連した別の issue には理由の詳細が書かれてあるので、興味のある方はご参照ください。

まぁとにかく、ありがたいですね

無償で利用できる OSS (Open Source Software) として Flet を公開してくれているので、Issue を申請してからは催促等はせず完全に待ちのスタンスを取っていたのですが、こうやって修正してくれるのはありがたいですね。Flet を使ったアプリを公開していくことで貢献しようと思いました。

Image by Stable Diffusion

今回の画像は、魔術師が小さなモンスターを倒したところを期待してこういう感じのプロンプトで Mochi Diffusion にお願いしました。投稿ごとの画像のクオリティが違いすぎてヤバいですね。M2 Max になってからは、ステップ 30位で 6つ位描いてもらって、それらを元にプロンプトやモデルを変更しています。

Date:
2024年4月20日 0:14:30

Model:
fruity-mix_split-einsum_compiled

Size:
512 x 512

Include in Image:
fantazy, realistic painting, a wizard with a magic wand killed misterious creature by fireball

Exclude from Image:

Seed:
2031597071

Steps:
50

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
All

Flet を使ったデスクトップアプリ『字幕極楽丸』をどう作ったか解説

Python でかっこよいデスクトップアプリが作れる Flet。以前公開した、音声と字幕 (SRT) の同時再生・字幕編集アプリ『字幕極楽丸』をどのようにして作ったのか、背景や手順、そしてコードの内容を公開します。完成品はスタンドアロンのデスクトップアプリで、複雑なことはしていません。ですが、Python + Flet で一つのアプリケーションを完成させるまでの手順はあまり見かけないので、何かの足しにしてもらえたらと思います。超大作なので、目次や検索を使って必要なところをかいつまむのがお勧めです。

紹介するコードの置き場所

Python のコードや、実行したときに読み込むロゴ、ビルドした時にアイコンになる画像などは全て GitHub に置いてあります。

オフィシャルの情報

初めて Flet に触る方は、オフィシャルのドキュメントをざっくり読んでください。英語です。

新しいリリースがあると、ブログや Discord に情報が掲載されます。その他諸々のリンクは Support ページにまとまっていますので、そちらから飛んでください。

あまり技術的じゃないところ

作者と制作背景

外資系企業日本オフィスの IT マネージャ。プログラムは趣味で、人にお見せできないような小さなもの、未完成品、POC 的なものを数十年作っている (8bit BASIC ~ HyperCard/Talk ~ HTML/JavaScript ~ Python)。Python の入門書は数冊、それぞれ 60-80% くらいまでは読んでいる。途中でやめてしまっているのは、その段階で作りたくなったものを作ることに集中してしまうため。これまで Tkinter や PySimpleGUI といったデスクトップのフレームワークを使ってアプリを作るも、しっくりこず。たまたま見つけた Flet のデザイン性や、(それなりに) 簡単にデスクトップ・ウェブ・スマホそれぞれ向けのアプリが作れるところに惚れ込み、いじり始める。そんなある日、OpenAI の音声認識 Whisper の優秀さに衝撃を受け、衝動的に字幕編集アプリを作り始める (探したけど、それっぽいものが世の中に無かったので)。本アプリの前に一つ、完成品としてパスワード生成アプリを Flet で作っている (web でも動く)。

制作環境

  • Mac (Mac mini M1 16GB RAM から、制作途中で Mac Studio M2 Max 12-core CPU/30-core GPU/32GB RAM の整備済品へ移行)
  • キーボード: HHKB Pro 2 Type-S (有線専用モデル)
  • マウス: Logi の静音マウス
  • モニタ: Dell 4K 27-inch と QHD 24-inch
  • IDE: VisualStudio Code – Insiders (M1 mac mini 使い始めた時からそのまま)
  • バージョン管理: GitHub と GitHub Desktop
  • 画像生成: Mochi Diffusion
  • 音声認識・字幕生成: MLX 版 Whisper と自作 SRT 生成プログラム
  • テスト用ファイル: yt_dlp で m4a を取得、SRT を生成して使用
  • メモ・タスク整理: Smartsheet (無料アカウント)、Apple 標準のメモアプリ
  • 手書き・思考整理: A4判の nu board (ノート型ホワイトボード)、PILOT ボードマスター S
  • 頻繁に参考にするサイト等: Flet 公式サイト、同 Discord、Qiita、Copilot 無料版 (コードを書いてもらう)
  • Python: 3.11.7
  • Flet: 0.21.2 (pip install flet==0.21.2)
  • その他、過去の投稿 (こことかこことか) にもビルドに必要な情報等が書いてあります

どういうプロセスで作っていったか

大体下のような流れでした。考えたとおりにすんなり動くのはまれで、Flet の実装方法が理解できずに、読んでは書いて、動かないので消して、と足踏み状態が数日続くこともありました。それによって完成までのモチベーションは落ちませんでしたが、頭の切り替えをした方がよさそうな時には、Whisper の精度を上げる方法を調べてパラメータを変える実験をしたり、アプリのターゲットユーザやユースケースを想像したりと、やや Flet での開発からは離れてリフレッシュし、また戻る、ということを繰り返しながら作り上げていった感じです。

  1. オフィシャルの auido コントロールを丸パクリして音を鳴らしてみる
  2. ローカルの音声ファイルをコード内で指定して再生させる
  3. インターフェイスのラフをホワイトボード (nu board) に描きながらイメージを作っていく
  4. 音声の再生状況に応じて動くスライダを実装。コンソールには再生時間が毎秒表示されるのにスライダが動かなく悩むが、単純に音声ファイルが長かったのでスライダの異動が微少だったと判明し、安堵
  5. 上とは逆に、スライダを移動させたところから音声が再生される機能を実装。こう書くと一瞬だが、何度もやり直して数日かかった
  6. FilePicker で音声ファイルを読み込む機能を実装。余計なことをしなくても、フォルダを覚えてくれていてスゲーと思う
  7. 音声ファイルを開いたら、同名で拡張子が .srt や .txt の字幕ファイルを読み込む機能を実装
  8. オフィシャル Tutorial の To-Do アプリをほぼパクり、テキストからタイムスタンプと字幕ボタンを生成する機能を実装。ここが動いたときは結構感動
  9. ミリ秒と 00:00:00,000 形式双方の変換処理実装 (ここ含め、ロジック部分には Copilot のアドバイスを積極採用)
  10. メインの処理部分を Class 化。この後徐々にクラスの必要性や意味を理解してくる
  11. 非同期処理 async で動くように全体を書き直し。ボタンが多いときの反応の鈍さを改善したかったのだが効果無し。。。後に Flet が async ファーストとなり、期せずして先取った形に
  12. Class 間での処理のやりとりを実装 (例: 音声の流れに応じて字幕をスクロール、タイムスタンプのボタンを押すと、そこから再生、等)。Class を実地で再勉強
  13. ファイルの上書き保存、書き出し実装。同名ファイルがあるときの警告は OS がやってくれてベンリーと思う
  14. テキストファイルを読み込んだときや存在しないときに通知する SnackBar を実装。簡単に使えてじゃまにならず効果的かつかっこよい。多用したくなるのをがまんする
  15. ダイアログが開かなくなり、アプリを終了するしか無くなるバグ発生。再現性が低く解決困難なため、書き出しダイアログをボタンに変更
  16. アプリとして公開することを考え、フリーのフォントを探してロゴとアイコンを制作。バグに心をやられて寄り道
  17. コピーライト表記追加や全体的なデザインの手直し。バグを既知の問題として公開する方向で腹をくくる
  18. macOS アプリとして書き出すも NumPy が原因でクラッシュするバグに襲われ Discord の help で相談→有力情報無く、GitHub に issue 登録
  19. ウェブアプリに方向転換しようとするも、ローカルのファイルを直接開く事ができず、とりあえず断念
  20. Python から実行する形でとりあえず GitHub に公開、ブログ投稿
  21. Copilot から NumPy を使わない実装を教えてもらい、macOS 用ビルド成功。信頼感爆上げ
  22. GitHub にビルド方法追記、新たにビルド方法のブログ記事投稿
  23. 本記事をやっと書き始める

全体像

完成したアプリ

GUI 全体像イメージ

手描きですみません。ホワイトボードそのものがアプリ (=page) と考えてもらって良いです。その中にある一番大きい column の中身はメインの class で定義しています。一番下の点線 Audio と Dialogs は通常表示されない overlay として class の外にある main 関数でページに追加されています。それら以外は containerrow でまとめたものを上から下に向かってコード内で追加していくイメージです。

コード全体像イメージ

上からこんな感じでコードの中身が分かれています。該当する行番号 (xx-yy) と大まかな内容をまとめました。Github かエディタでコードを開いて見比べてください。

  1. (1-4) Flet その他をインポート — os はパスの操作、datetime はファイル名に日時を付加するためだけなので、アプリに必要な要素・機能はほぼ Flet のみで作られています
  2. (6-79) 関数ブロック — ミリ秒とデジタル表示の変換、読み込んだテキストをアプリ内で使用するリスト形式に変換
  3. (81-183) 字幕を変換したリストからボタンを作る SubButton クラス — 初期化関数、レイアウトをする build 関数、ボタンをクリックしたときの各種処理を行う関数で構成
  4. (185-791) アプリのメインとなる AudioSubPlayer クラス — まず、初期化関数 (187-374) でアプリのレイアウトで使用するボタン (BTN) や、テキスト (TXT)、その他の Flet コントールを self.foobar の形で全て定義し、次のメソッドブロック (376-738) でクリック等のイベントに応じたロジックを async で定義、最後の build 関数 (740-791) でページのレイアウトを定義
  5. (793-812) main 関数 — async でウィンドウ自体の基本を定義し、audio と dialog のインスタンスを overlay としてページに追加
  6. (815) main 関数を呼び出し

自分の書き方の問題で無駄に長い部分もあるとは思いますが、どうやら Flet のコードは長くなりがちなようです。

SRT ファイルについて

本アプリで現在サポートしている字幕ファイルの形式は、SRT となります。中身はテキストのファイルで、拡張子が .srt となります。WikiPedia によると、元々は Windows 用フリーウェアの SubRip で生成されたテキスト字幕ファイル形式、ということです。Whisper で音声を文字に変換 (speech-to-text) する際に使われていたため採用しました。macOS 用 Whisper で音声ファイルを SRT に書き出す方法 (簡単な Python コード) はこちらの記事に書きました。

SRT ファイルの中身ですが、一度に表示する字幕に対し、通しのインデックス番号、開始時間 –> 終了時間、字幕テキスト、空行、で構成されています。以下はそのサンプルです (「政見放送」で検索した YouTube 動画から書き出した SRT ファイルの冒頭部分):

1
00:00:00,000 --> 00:00:02,460
自民党総裁の岸田文雄です

2
00:00:03,140 --> 00:00:06,900
私が目指すのは国民の声を受け止め

3
00:00:06,900 --> 00:00:11,880
寄り添い全力で挑む信頼と共感の政治です

開始と終了の時間は 2桁の時、分、秒で、カンマの後ミリ秒の整数部分が入っています。Whisper での書き出しであれば問題無いと思いますが、本アプリでは字幕部分が 2行以上あると正常に動作しません (手抜きです)。なので、そういう場合はテキストエディタで字幕部分を一行にまとめてください。Whisper では、音声認識がうまくいかなかったときに同じタイムスタンプの空行がいくつも出力されることがありますが、本アプリで読み込んだ際にそういう部分は自動で削除するようにしています。

コードの説明

以降では、実際のコードとその説明をしていきます。Flet の基本となる内容に関してはあまり深く触れません。また、実際の行番号より、理解しやすそうな順番で進めます。コードをエディタ等で開き、アプリも実行しながら見てもらえるとわかりやすいと思います。

Flet フレームワーク自体はコードの始めに ft としてインポートしています。

最終行 ft.app(target=main, assets_dir=”assets”) がアプリを作る

最後のこの行がアプリを作っています。Python ではあまり一般的な書き方ではありませんね。target=main で main 関数をアプリとして指定しています。assets_dir="assets" でコード本体と同じ階層にある assets フォルダを、画像などアプリで使用するファイル置き場として指定しています。最終的にはアプリケーションとしてビルドすることを見込んで、Flet アプリ本体のファイル名は main.py、コード内のアプリ定義の関数名は main、ファイル置き場のフォルダ名は assets にしておくのがお勧めです。アプリにする際には最低限の flet build macos (macOS の場合) と実行するだけでビルドできます。

ft.app(target=main, assets_dir="assets")

async def main 関数でウィンドウ自体を作り、overlay を追加

コードを実行したときに呼び出される関数です。Flet アプリの基本となる Page インスタンスを生成します。ウィンドウのタイトルや初期サイズ、カラーテーマの指定の後、通常は表示されない音声ファイルとダイアログ (ファイルの読み込み時に表示する OS 標準のウィンドウ) をオーバーレイとして追加します。

806行目で AudioSubPlayer のインスタンスを生成する際、音声ファイルを overlay.append する関数 load_audio を渡し、次の行でページに追加しています。こうすることで、クラス内部からページに音声ファイルを追加できます。

810-811行で、ファイルのオープンと書き出しの時に呼び出すダイアログをページに overlay.extend しています。

他に方法があるのかもしれませんが、ページに対する overlayUserControl クラス内から行うことができなかったため、こういう方法を取っています。

page.update() で、ページコントロールの更新 (描画) をします。Flet では何か見た目の変更を行った場合などは、対象のコントロールをアップデートすることで GUI に変化を与えます。ひとまとめの処理であればその最後にアップデートすれば OK です。なので、例えば 798 行目は不要ですね、ごめんなさい (すでにこの投稿の所々に行番号を書いてしまっているので、文章を優先して消しません)。他にもありそうですが、アプリの動作に影響ないはずなのでご勘弁ください。

対象のコードを開く
# Main function that builds window and adds page. Also, adds audio file and dialogs that are invisible as overlay.
async def main(page: ft.Page):
    page.title = 'Speech + Subtitles Player'
    page.window_height = 800
    page.theme_mode=ft.ThemeMode.SYSTEM
    page.update()

    # Appends audio as an overlay to the page.
    async def load_audio():
        page.overlay.append(app.audio1)
        page.update()

    # Creates an instance of AudioSubPlayer class. Passes load_audio for the instance to append audio to the page. 
    app = AudioSubPlayer(load_audio)
    page.add(app)

    # Adds dialog instance methods to the page.
    page.overlay.extend([app.pick_speech_file_dialog, app.pick_text_file_dialog, 
                         app.export_as_srt_dialog, app.export_as_txt_dialog])
    page.update()

アプリのメインとなる AudioSubPlayer クラスの中身

メインのクラスは、UserControl を継承しユーザ定義のコントロールとして実装しています。build() メソッド は UserControl に必須で、そこで UI を構築します。なので、まずは同メソッドの中身を見ていきましょう (実はこの UserControl は Flet バージョン 0.21.0 で obsoleted (廃止) となってしまっていました。ですが、とりあえず手元のバージョン 0.21.2 でも動いているのでそのまま利用と説明を続けます。この先も正式版リリースまでいろいろと大きな変更があるでしょうから、新しめのフレームワークを使うときは、リリースの内容確認が重要ですね)。

def build(self) で UI を設計

740行目から、column のインスタンス self.view としてユーザインタフェースを構築しています。手描きの図の一番大きな Column とその中身がここです。

公式のサンプルを見ていると、UI を構成するところにコントロールのプロパティや lambda 関数を書いていますが、実装する内容が増えるほどこの部分が読みづらくなります。なので、ここは極力レイアウトのみに絞って書いた方が後々楽だと思います。build() メソッドの最後に、定義した内容を return します。

Flet では UI の部品となるコントロールを書いていくと、上から順番に配置されることになります。なので、複数のコントロールを横に並べたいときは、Row の中にコントロールを入れてあげます。例えば、上から 2つめ (748行目) の Row にに、音声ファイルを開くためのボタンとファイル名を表示するテキストが入っているので、横並びに表示されます。

コーディング中はプロパティ (位置決めのアラインメントやカラー等の要素) をいろいろと試すことになると思うので、773-778 行目の様にそれらは単独の行として書き、最後に必ずコンマを追加しておきましょう。コメントしたり値を変更したりが楽にできます。最終的に確定したら 771 行目の様に 1行にまとめてしまえば良いでしょう。
対象のコードを開く
# === BUILD METHOD ===
def build(self):
    self.view = ft.Column(expand=True, controls=[
        ft.Container(content=
            ft.Column(controls=[
                ft.Row(controls=[
                    self.base_dir,
                ]),
                ft.Row(controls=[
                    self.speech_file_button,
                    self.speech_file_name,
                ]),
                ft.Row(controls=[
                    self.text_file_button,
                    self.text_file_name,
                    self.save_button,
                    #self.export_button,
                    self.export_as_srt_button,
                    self.export_as_txt_button,
                ]),
                self.audio_slider,
                ft.Row([
                    self.position_text,
                    self.duration_text,
                ], alignment=ft.MainAxisAlignment.SPACE_BETWEEN),
                ft.Row(controls=[
                    self.rewind_button,
                    self.play_button,
                    self.faster_sw,
                    self.sub_scroller_sw,
                ]),
            ]), expand=False, border_radius=10, border=ft.border.all(1), padding=10, 
        ),
        ft.Container(content=
            self.subs_view,
            border_radius=10,
            border=ft.border.all(1),
            padding=5,
        ),
        ft.Row(controls=[
            ft.Text(text_align=ft.CrossAxisAlignment.START,
                    spans=[ft.TextSpan('© 2024 Peddals.com', url="https://blog.peddals.com")],
                    ), 
            ft.Image(src='in_app_logo_small.png'),
        ],alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
        ),
        ft.Container(content=
            self.notification_bar)
        ],
        )

    return self.view

def init(self, load_audio) メソッドで、全てのコントロールを定義・初期化

187行目からが初期化の部分で、まずクラス変数を初期化し、上に書いた音声ファイル読み込みのための関数を取り込んでいます。そしてその後 374行目までずらっと続くのが全てコントロールの定義・初期化です。個別に説明するのは大変なので大まかに説明すると、それおぞれ表示するテキストやアイコンといった見た目のプロパティと、イベントが発生したときに呼び出すメソッドが定義されています。

典型的なコントロール定義をボタンで説明

一般的な使い方の例として、テキストファイルを読み込むボタンコントロールの定義の中身を説明します。

        # Open text file button
        self.text_file_button = ft.ElevatedButton(
            text='Open SRT/TXT File',
            icon=ft.icons.TEXT_SNIPPET_OUTLINED,
            on_click=self.pre_pick_text_file,
            disabled=True,
            width=210,
        )

まず、これらの内容は初期値であると理解してください。プロパティは他のメソッドなどから変更することができるので、アプリが起動したときの状態を定義しています。

(237行目) self.text_file_button という名前で ft.ElevatedButton のインスタンスを作成 (ダークテーマだとわかりづらいですが、少し浮いたような見た目のボタン)。括弧の中にコンマで区切ってプロパティとメソッドを定義

(238行目) ボタンに表示するテキストを text プロパティで定義

(239行目) ボタンに含めるアイコンを icon プロパティで指定。アイコンの位置は左端で固定、変更方法ナシ。アイコンの見つけ方・名前の確認は、下記の囲み参照

(240行目) on_click イベントが発生した (ボタンがクリックされた) ときに呼び出すメソッドを指定

(241行目) アプリスタート時クリックできないように、disabled プロパティを True にしている。音声ファイルが読み込まれた後は False にし、クリックできるようにする

(242行目) ボタンの横幅を 210 ドットに固定

このボタンでは使っていませんが、tooltip プロパティを指定すると、マウスカーソルを上に持って行ったときに文字列表示することができます。

後でまた出てきますが、プロパティは self.text_file_button.disabled=False といった形でメソッドなどから定義し、update することで変更ができます。それぞれのコントロールで利用できるプロパティやメソッド、イベントはオフィシャルドキュメントを見てください。

アイコンはこのページで検索することができます。本記事執筆現在、残念ながら Safari では表示されたアイコンをクリックしても名前はコピーされません。Chrome を使うか、ホバーオーバーで表示される内容を手打ちで使う必要があります (Visual Studio Code はアイコン名も補完してくれます)。本アプリの様に Flet を ft としてインポートしている場合は、icon=ft.icons.THUMB_UP とします。
“thumb” で検索してヒットしたアイコン。ホバーオーバーで名前が出る

ほとんどのコントロールとそのプロパティなどは見ればわかると思いますが、ファイルを開いたり書き出したりする FilePicker を開くまでの流れは個人的にわかりづらかったので、別途説明します。

対象のコードを開く
    def __init__(self, load_audio):
        super().__init__()
        self.position = 0
        self.duration = 0
        self.isPlaying = False
        self.load_audio = load_audio

        # == Controls ==
        
        # Audio control with default properties
        self.audio1 = ft.Audio(
            src='',
            volume=1,
            balance=0,
            playback_rate=1,
            on_loaded=self.loaded,
            on_position_changed = self.position_changed,
            on_state_changed = self.playback_completed,
        )

        # Path of the audio file
        self.base_dir = ft.Text(value=f"Base Directory: ")

        # Open speech file button
        self.speech_file_button = ft.ElevatedButton(
            text='Open Speech File', 
            icon=ft.icons.RECORD_VOICE_OVER_OUTLINED, 
            width=210,
            on_click=self.pre_pick_speech_file,
        )

        # Speech file picker control
        self.pick_speech_file_dialog = ft.FilePicker(on_result=self.pick_speech_file_result)

        # Speech file name
        self.speech_file_name = ft.Text(value='← Click to open a speech file.')

        # Alert dialog that opens if subtitle was edited but not saved when Open Speech File button is clicked.
        self.speech_save_or_cancel_dialog = ft.AlertDialog(
            modal=True,
            title=ft.Text('Change not saved.'),
            content=ft.Text('Do you want to discard the change?'),
            actions=[
                #ft.TextButton('Save', on_click=self.save_then_open, tooltip='Save then open another file.'),
                ft.TextButton('Open without save', on_click=self.open_speech_without_save, tooltip='Change will be lost.'),
                ft.TextButton('Cancel', on_click=self.close_speech_save_or_cancel_dialog),
            ]
        )

        # Open text file button
        self.text_file_button = ft.ElevatedButton(
            text='Open SRT/TXT File',
            icon=ft.icons.TEXT_SNIPPET_OUTLINED,
            on_click=self.pre_pick_text_file,
            disabled=True,
            width=210,
        )
        
        # Text file picker control
        self.pick_text_file_dialog = ft.FilePicker(on_result=self.pick_text_file_result)

        # Text file name
        self.text_file_name = ft.Text(value='No file selected.')

        # Save button to update edited subtitles. No dialog, it just overwrites current text file.
        self.save_button = ft.ElevatedButton(
            text='Save', 
            icon=ft.icons.SAVE_OUTLINED, 
            tooltip='Update current SRT/TXT file.',
            disabled=True,
            on_click=self.save_clicked
            )
        
        # Export as SRT button which opens a save dialog. Only available when SRT is open because SRT needs timestamp.
        self.export_as_srt_button = ft.ElevatedButton(
            text = 'SRT',
            icon=ft.icons.SAVE_ALT,
            on_click=self.export_as_srt,
            disabled=True,
            tooltip='Export as SRT file.'
        )

        # Export as SRT file picker
        self.export_as_srt_dialog = ft.FilePicker(on_result=self.export_as_srt_result)

        # Export as TXT button which opens a save dialog. TXT has not timestamp, subtitle text only.
        self.export_as_txt_button = ft.ElevatedButton(
            text = 'TXT',
            icon=ft.icons.SAVE_ALT,
            on_click=self.export_as_txt,
            disabled=True,
            tooltip='Export as TXT file.'
        )

        # Export as TXT file picker
        self.export_as_txt_dialog = ft.FilePicker(on_result=self.export_as_txt_result)

        # Export button to open a dialog (not in use)
        self.export_button = ft.ElevatedButton(
            text='Export as...', 
            icon=ft.icons.SAVE_ALT, 
            on_click=self.open_export_dialog,
            disabled=True,
            )
        
        # Export as dialog (not in use)
        self.export_dialog = ft.AlertDialog(
            modal = True,
            title = ft.Text('Export text as...'),
            content = ft.Text('Plesae select a file type.'),
            actions = [
                ft.TextButton('SRT', on_click=self.export_as_srt, tooltip='Subtitles with timestamps'),
                ft.TextButton('TXT', on_click=self.export_as_txt, tooltip='Subtitles only (no timestamps)'),
                #ft.TextButton('CSV', on_click=self.export_csv, tooltip='Comma separated value'),
                # I guess no one needs subtitles in CSV...
                ft.TextButton('Cancel', on_click=self.close_export_dialog),
            ],
            actions_alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
        )
        
        # Alert dialog that opens if subtitle was edited but not saved when Open SRT/TXT File button is clicked.
        self.text_save_or_cancel_dialog = ft.AlertDialog(
            modal=True,
            title=ft.Text('Change not saved.'),
            content=ft.Text('Do you want to discard the change?'),
            actions=[
                #ft.TextButton('Save', on_click=self.save_then_open, tooltip='Save then open another file.'),
                ft.TextButton('Open without save', on_click=self.open_text_without_save, tooltip='Change will be lost.'),
                ft.TextButton('Cancel', on_click=self.close_text_save_or_cancel_dialog),
            ]
        )
        # Audio position slider
        self.audio_slider = ft.Slider(
            min = 0,
            value = int(self.position/10000),
            label = "{value}ms",
            on_change = self.slider_changed,
        )

        # Current playing position and duration of audio file
        self.position_text = ft.Text(value='Current position')
        self.duration_text = ft.Text(value='Duration (hh:mm:ss,nnn)')
        
        # Rewinds 5 seconds
        self.rewind_button = ft.ElevatedButton(
            icon=ft.icons.REPLAY_5,
            text="5 secs",
            tooltip='Rewind 5 secs',
            on_click=self.rewind_clicked,
            disabled=True,
        )

        # Play/Pause button. After loading audio file, this button will always be focused (space/enter to play/pause).
        self.play_button = ft.ElevatedButton(
            icon=ft.icons.PLAY_ARROW,
            text = "Play",
            on_click=self.play_button_clicked,
            disabled=True,
        )

        # 1.5x faster toggle switch
        self.faster_sw = ft.Switch(
            label='1.5x',
            value=False,
            on_change=self.playback_rate,
        )

        # Auto scroll toggle switch
        self.sub_scroller_sw = ft.Switch(
            label='Auto scroll',
            value=True,
        )
                
        # Area to add subtitles as buttons
        self.subs_view = ft.Column(
            spacing = 5,
            height= 400,
            width = float("inf"),
            scroll = ft.ScrollMode.ALWAYS,
            auto_scroll=False,
        )

        # Notification bar control at the bottom
        self.notification_bar=ft.SnackBar(
            content=ft.Text('Speech + Subtitle Player'),
            duration=2000,
            bgcolor=ft.colors.BLUE_GREY_700,
        )

クラスメソッド (ロジック) 部分

バージョン 0.21.0 から Flet は async-first framework となり、同期処理の必要が無い限り非同期で処理される async def という形で関数やメソッドを作ることが推奨 (?) となりました。アプリによっては応答性が良くなり、そのために細かいことを気にしなくても良くなったと考えて良いと思います。個人的には運悪く直前のバージョンで async を使って書き始め、途中で Flet をバージョンアップし、結果多くの書き直しが発生し大変でした…。ともあれ、378行目から 738行目のメソッド群はほぼ全て async def で定義し、self.update() で表示のアップデートを行っています。

以下、いくつか説明しておきたいメソッドの内容を書き連ねます。

音声ファイル読み込み後の処理 async def loaded(self, e)

378行目からのこのメソッドは、音声ファイルが読み込まれたら呼び出されます。各プロパティの変更や、字幕ファイルをアプリ内で利用するための変換処理などがあり、一つのメソッドしては一番長くなっています。

頭の 30行弱は割と単純に、スライダやテキスト、ボタンなどのコントロールのプロパティに値を入れたり、クリックできるようにしたりという事を行っています。まず最初の 3行はこんなことを行っています。

self.audio_slider.max = int(await self.audio1.get_duration_async())

Audio コントロールの持つ get_duration_async() メソッドを使い、音声としての長さ (ミリ秒) を取得し、左右に動くスライダ audio_slider コントロールのプロパティ max に代入しています。使用した Flet バージョン 0.21.2 で Audio コントロールの様な結果を返すメソッドを使用するには await ~ <method>_async() という書き方が必要となり、他の部分では見ないこのような書き方になっています。

self.duration_text.value = f'{ms_to_hhmmssnnn(self.audio_slider.max)}'

上で得たミリ秒を、00:00:00,000 という書式に変換してスライダの右端に表示するためのテキストとして代入しています。変換はコードの一番上にある関数 ms_to_hhmmssnnn() を使用しています (Copilot に書いてもらいました)。

self.audio_slider.divisions = self.audio_slider.max//1000

Slider コントロールの divisions プロパティでスライダを 1秒 (1000 ミリ秒) 間隔に分割しています。スライダは分割しないとマウスで動かしたときに数値が表示されません。また、Flet ではオーディオ経過のイベントは 1秒毎にしか発生しないため、このようにしています。実際のところ、スライダの数値はミリ秒表示から変えられなかったためこのアプリにおいては数値を表示することにほぼ意味はありません。

次の if ブロック (383行目~)で、字幕ファイルが見つかったときの処理をしています。create_subtitles() 関数に字幕ファイルを投げ、アプリ内で処理しやすいリストにして self.subtitles に格納しています。読み込まれたファイルがテキストの場合タイムスタンプが含まれないのですが、タイムスタンプのありなしそれぞれで処理を作るのが面倒だったのと見た目もサマにならないので、リストとして格納するときに全て 55:55:55,555 (201355555ミリ秒) にしています。コード内の所々でその値を見て処理を変えることに利用しています。5並びにしたのはなんとなくですが、約 56時間の音声ファイルを読み込むことは無いでしょうからヨシとしました。

この後 397-406行目までは主に、音声再生関連のボタンをクリックできるようにしています (本アプリでは基本的に再生・ポーズボタンを常にフォーカスしており、スペースやエンターキーで操作できます。当初、起動時には Open Speech File ボタンにフォーカスし、ファイルを読み終えたら再生ボタンにフォーカス、としたかったのですがうまくいきませんでした。あがいたときの残骸が 398-403行目あたりに残っています)。

408-433行目では、処理済みの字幕ファイルのリストを元に、タイムスタンプの無い TXT ファイルとタイムスタンプがある SRT ファイルそれぞれで諸々の有効・無効を調整しつつ、字幕一行ごとにボタンを作っています。実際にボタンの中身を作っているのは別クラスの SubButton() ですが、ここではそれを sub というインスタンスにし、self.subs_view.controls.append(sub) でアプリの画面下半分の領域に追加 (append) しています。

436-443行では、字幕ファイルのありなしに応じて画面最下部にメッセージを表示させています。Snackbar コントロールを使ったメソッド self.open_notification_bar にテキストだけを送るとただの通知で、字幕ファイルが見つからなかったときは警告色で長めに表示するように type='error' も付けて呼び出しています。

対象のコードを開く
    # Called once audio file is loaded. Enable/disable buttons, create subtitles list, etc.
    async def loaded(self, e):
        self.audio_slider.max = int(await self.audio1.get_duration_async())
        self.duration_text.value = f'{ms_to_hhmmssnnn(self.audio_slider.max)}'
        self.audio_slider.divisions = self.audio_slider.max//60
        # Enables buttons if associated text file exists.
        if self.text_file != 'No Text File.':
            # Call function to create the list of subtitles, self.subtitles.
            self.subtitles = create_subtitles(self.text_file)
            self.save_button.text = 'Save'
            self.save_button.disabled=False
            self.export_button.disabled=False
            self.export_as_srt_button.disabled=False
            self.export_as_txt_button.disabled=False
        # Disable buttons if associated text file does not eixt.
        else:
            self.save_button.disabled=True
            self.export_button.disabled=True
            self.export_as_srt_button.disabled=True
            self.export_as_txt_button.disabled=True
            self.subtitles = []
        self.speech_file_button.autofocus=False
        self.speech_file_button.update()
        self.play_button.disabled=False
        self.play_button.focus()
        self.play_button.autofocus=True
        self.play_button.update()
        self.rewind_button.disabled=False
        self.text_file_button.disabled=False
        self.subs_view.controls.clear()
        
        # Create buttons of subtitles from the list self.subtitles.
        if self.subtitles != []:
            # .txt or .srt file
            for i in range(len(self.subtitles)):
                index = self.subtitles[i][0]
                start_time = self.subtitles[i][1]
                # .txt file (timestap is dummy, 55:55:55,555) disable buttons.
                if self.subtitles[0][1]== 201355555:
                    self.sub_scroller_sw.value=False
                    self.sub_scroller_sw.disabled=True
                    self.export_dialog.actions[0].disabled=True
                    self.export_as_srt_button.disabled=True
                # .srt file
                else:
                    self.sub_scroller_sw.value=True
                    self.sub_scroller_sw.disabled=False
                self.sub_scroller_sw.update()
                end_time = self.subtitles[i][2]
                text = self.subtitles[i][3]
                
                # Create button instance of each subtitle. Include methods and controls for the instance to call or update.
                sub = SubButton(index, start_time, end_time, text, self.sub_time_clicked, self.play_button, 
                                self.save_button, self.subtitles)

                # Add button to the subtitle button area, subs_view.
                self.subs_view.controls.append(sub)

            # Call snackbar to show a notification.
            notification = f'Subtitle file loaded: {os.path.basename(self.text_file)}'
            await self.open_notification_bar(notification)
        
        # No text file found. Call snackbar to show an alert.
        else:
            notification = f'Subtitle file (.srt or .txt) not found.'
            await self.open_notification_bar(notification, type='error')
            print('Subtitle file not found.')

        self.update()

音声の再生位置が変更されたときの処理 async def position_changed(self, e)

447-454行のメソッドは、音声ファイルの再生位置が変更されたとき、つまり self.audio1 のイベント on_position_changed が発生したときに呼び出されます。具体的なケースは、再生時であれば自動的に 1秒ごと、それ以外では、ユーザがスライダの位置を変更したときと、タイムスタンプをクリックしたときに呼び出されます。コードを見ていきましょう。

self.audio_slider.value = e.data
#print("Position:", self.audio_slider.value)
self.position_text.value = ms_to_hhmmssnnn(int(e.data))

on_position_changed にはプロパティがあり、メソッドで e として受け取っています。e.data には再生位置 (経過時間) がミリ秒で入っていますので、ここではスライダの位置を変更するためにその値をaudio_slider コントロールの value プロパティに代入しています。また、position_text コントロールの value に読みやすい形に変換した値を入れています。これはスライダの左端に表示されることになります。

if (self.sub_scroller_sw.value == True) and (self.text_file_name.value != 'No Text File.'):
   self.scroll_to(self.audio_slider.value)
self.update()

ここで判定しているのは、字幕のオートスクロールのスイッチの状態と、字幕ファイルの有無です。字幕ファイルは、読み込めなかったときに “No Text File.” と表示させているので、表示内容自体をフラグとして利用しています。そして、それぞれが真の場合、字幕をスクロールするメソッドscroll_toに引数self.audio_slider.valueを渡しています。最後のself.update()で、ここのメソッド自身としては再生時間の更新がされます。

スライダ位置が変わったときの処理 async def slider_changed(self, e)

457-460行のメソッドはスライダの位置が変更されたとき、つまりself.audio_sliderコントロールのメソッドon_changeが発生したときに呼び出されます。

self.audio1.seek(int(self.audio_slider.value))

self.audio1のメソッドseekにスライダの位置の値 (self.audio_slider.value) を渡すことで、再生位置を変更します。後はアップデートで反映するだけなので、オーディオ再生位置の変更は非常に簡単です。

ところで、メソッドとしては引数eを受け取ってはいますが、e.valuee.dataもスライダの位置情報として使えなかったので、直接スライダ位置の値を渡しています。また、使わないからといってメソッドでeを受け取らない場合も期待した動作はしません。結局コード全体を書き終えるまで引数の受け渡し方 (eの要不要と中身、取り出し方) に関して 100% は理解できなかったので、トライアル&エラーで正解を見つけるまで多くの時間がかかりました。

再生ボタン async def play_button_clicked(self, e) と async def playback_completed(self, e)

463-488行では、Play (再生) ボタンにまつわる処理をしています。音声ファイルを読み込んだとき、再生中、一停止中、そして再生が終了したときのそれぞれで、self.audio1のメソッドを使って、ボタンクリックによる再生や一時停止を行います。また、アイコンや文言も変更しています。

e.dataで再生中 (playing) などのステータスを得られそうだったのですがうまくいかず、クラス変数self.isPlayingを作って判定することにしました。ボタンとしては、( Play / Pause ) の様に常に同じ内容を表示していても良かったのですが、状況に応じたアイコンを表示したいという色気の他、デバッグの際にステータスを見たかったという側面もあり、こうなりました。

対象のコードを開く
    # Change Play/Pause status and icon when called.
    async def play_button_clicked(self, e):
        self.position = await self.audio1.get_current_position_async()
        if (self.isPlaying == False) and (self.position == 0):
            self.audio1.play()
            self.isPlaying = True
            self.play_button.icon=ft.icons.PAUSE
            self.play_button.text = "Playing"
        elif self.isPlaying == False:
            self.audio1.resume()
            self.isPlaying = True
            self.play_button.icon=ft.icons.PAUSE
            self.play_button.text = "Playing"
        else:
            self.audio1.pause()
            self.isPlaying = False
            self.play_button.icon=ft.icons.PLAY_ARROW
            self.play_button.text = "Paused"
        self.update()
    
    # When audio playback is complete, reset play button and status.
    async def playback_completed(self, e):
        if e.data == "completed":
            self.isPlaying = False 
            self.play_button.icon=ft.icons.PLAY_ARROW
            self.play_button.text = "Play"
        self.update()

巻き戻しと 1.5倍速 async def rewind_clicked(self, e) と async def playback_rate(self, e)

491-507行で、5秒巻き戻しボタンと 1.5倍速再生スイッチの処理をしています。巻き戻しは値がマイナスにならない様にしているだけの、簡単な処理です。1.5倍速も、スイッチがオンの場合に Audio コントロールが持つplayback_rateメソッドに 1.5 を代入するだけなので、非常に簡単です。一点、速度の変更後は Audio コントロールのアップデートをするため、await self.audio1.update_async() とする必要があるところが注意です。

アプリ設計の基本的として、極力シンプルで直感的に操作できるデザインにすることを心がけました。また、必要な機能のみを追加するということもにも気をつけました。巻き戻しボタンは必要な機能に含まれます。実際に自分が字幕の編集作業をしているとき、一時停止を忘れることがちょいちょいありました。また字幕は基本的に再生中の部分が一番上に来るので過ぎた字幕は見えず、音声の再生中でもちょっとだけ戻せるボタンは便利だとわかりました。長めに戻したければ何度かクリックすれば良いのです。3秒や 6秒じゃない理由は単純で、使用したアイコンに 3や 6がない、というデザイン的な理由です。1.5倍速スイッチは、流行の時短にあわせたものです。2倍速も試しましたが個人的にはちょっと無理があるように感じたので 1.5にしました。iOS と macOS は 0.5~2 の範囲という制限がありますが、時短指向の強い方や用途に応じて 503行目の self.audio1.playback_rate = 1.5 を変更してみてください。
対象のコードを開く
    # When 5 secs button is clicked, rewind 5 seconds.
    async def rewind_clicked(self, e):
        if self.audio_slider.value <= 5*1000:
            self.audio_slider.value = 0
        else:
            self.audio_slider.value -= 5*1000
        self.audio1.seek(int(self.audio_slider.value))
        #print(int(self.audio_slider.value))
        self.update()
    
    # Switch playback rate between normal and 1.5x faster.
    async def playback_rate(self, e):
        if self.faster_sw.value == True:
            self.audio1.playback_rate = 1.5
        else:
            self.audio1.playback_rate = 1
        #print(f'Playback rate: {self.audio1.playback_rate}')
        await self.audio1.update_async()

タイムスタンプボタン async def sub_time_clicked(self, start_time)

510-514行では、SRT ファイルを読み込んだときに有効となるタイムスタンプボタンをクリックしたときに、その文字列の部分を再生する処理をしています。停止中の場合であれば再生を始めます。

このタイムスタンプボタン自体は、もう一つのクラスSubButtonで生成されています。インスタンス生成の際に本メソッドを渡してあり、クリックによってSubButtonクラスのjump_clicked()メソッドからボタン自身のstart_timeを受け取り、Audio コントロールのseekメソッドで頭出しをする、という動作を行います。

タイムスタンプボタンクリックで再生位置を変化させることを実現しているコードとその説明を順番に見ていきましょう。

# Create button instance of each subtitle. Include methods and controls for the instance to call or update.
sub = SubButton(index, start_time, end_time, text, self.sub_time_clicked, self.play_button, 
                self.save_button, self.subtitles)

インスタンスを作るコード部分。本メソッドself.sub_time_clicked を渡しています。

# Create button of subtitle text.
class SubButton(ft.UserControl):
    def __init__(self, index, start_time, end_time, text, sub_time_clicked, play_button, save_button, subtitles):
        super().__init__()
        # Parameter of each subtitle.
        self.index = index
        self.start_time = start_time
        self.end_time = end_time
        self.text = text
        # Passed methods and controls to call and update.
        self.sub_time_clicked = sub_time_clicked

ボタンを作るもう一つのクラスSubButtonの初期化部分 (一部)。親クラスから引き継いだオブジェクトを自身のオブジェクトとして格納しています。ハイライトが今回使われている部分です。

# When timestamp clicked calls AudioSubPlayer.sub_time_clicked to jump to button position.
async def jump_clicked(self, e):
    await self.sub_time_clicked(self.start_time)

on_clickイベントでタイムスタンプボタンがクリックされたときに呼び出されるメソッド。self.start_timeself.sub_time_clickedを使って、親クラスのメソッドを実行しています。

そして最終的に本メソッドでstart_timeの位置の音声を再生します。

# When the timestamp is clicked, jump to its position and play if not playing.
async def sub_time_clicked(self, start_time):
    self.audio1.seek(int(start_time))
    if self.isPlaying == False:
        await self.play_button_clicked(start_time)
    self.update()
Python やクラスを理解していればそれだけのことですが、入門書数冊を最後まで読み切っていない自分には、インスタンスから実行中クラスのメソッドを実行する方法にたどり着くまでにかなり時間がかかってしまいました。簡単にググって済まそうにも、自分のやりたいことを検索に引っかかるように言語化すること自体が困難でした。GOTO/GOSUB で知識が止まっている絶滅危惧種の様な方は、Python のクラスはしっかり勉強することをお勧めします。

字幕のスクロール async def scroll_to(self, e)

517-525行で、字幕のスクロールを行っています。タイムスタンプを持つ SRT ファイルを開いているときだけposition_changedメソッドから呼び出されます。引数eには音声の再生位置 (ミリ秒) が渡されています。クラス変数self.subtitlesは 2次元のリストで、内側のリストに、連番のインデックス、開始時間、終了時間、テキストが格納されており、本メソッドではインデックスindexと終了時間end_timeを参照します。

ここでやりたいのは、再生中の音声に該当した字幕を一番上に移動することです。ただし、Flet が音声ファイルの再生位置を取り出すのは 1秒毎なので、その値より大きくて一番近いend_timeを持つ字幕ボタンにスクロールさせます。リアルタイムで完璧には同期していませんが、一番上ないしは二番目には再生中の字幕部分が現れる状態となります。順番に見ていきましょう。コード、説明の順です。

end_time = [item[2] for item in self.subtitles]

リスト型ローカル変数end_timeに、全字幕の終了時間を代入します。

index = min(range(len(end_time)), key=lambda i: abs(end_time[i]-e))

ローカル変数indexに、現在の再生位置に一番近いend_timeを持った字幕自身の位置を代入します。index は 0から始まる整数です。

key=str(self.subtitles[index][0])

ローカル変数keyに SRT ファイル内のインデックス番号を str に変換して代入します。SRT ファイルのインデックス番号は 1から始まり、必ずしも連番ではなく途中のインデックス番号が抜け落ちている可能性を考慮し、ひと手間入れています (実際のところ、ここを書いた後にアプリ内部で使用するsubtitlesリストを生成するコードでインデックスを連番になるようにしたため、key=str(index+1) でも同じ動作になります)。

self.subs_view.scroll_to(key=key, duration =1000)

Column インスタンスであるsubs_viewのメソッドscroll_toを使用し、ある程度のなめらかさ (duration =1000) でkey=keyとなっているボタンまでへスクロールさせます (イコールの左のkeyscroll_toのプロパティで、右のkeyはインデックス番号を文字列で持っているローカル変数です)。

ここの説明に追加したいことは 2点あります。ひとつ目は、ボタンが多くなると Flet アプリの動作が重くなるということです。特に 300個以上のボタンがあると、ウィンドウの移動は挙動がおかしくなります。CPU やメモリの負荷・使用量などは問題無いので、Flet の仕様的な理由のような感じがします。多くのリストを使用するアプリの制作を考えている方は、別のコントロールを使用することを検討した方が良いと思います。ボクが調べたときは、スクロールとクリックできるものが他には見つかりませんでしたが、何らかの工夫で対処できた可能性はあります。もうひとつは、NumPy の使用に関してです。Python から実行する場合 (python main.py) は問題ありませんが、Flet バージョン 0.21.2 では macOS 用に NumPy を使用するコードをビルド (flet build macos) すると、ビルドされたアプリがクラッシュする問題があります。本アプリも当初は NumPy を使用 (520行目) していたのですが、書き直しました。そのことについては別の記事にまとめてあります。→ NumPy ビルド問題は解決しました

音声ファイルの読み込み async def pre_pick_speech_file(self, e) からの流れ

ここからは、音声ファイルの読み込みに関連するメソッドとコントロール一式を説明していきます。OS の機能を利用することで楽ができている面もありますが、Flet または FilePicker コントロールがこなれていないからなのか、「ファイルを開く・保存する」を実現するために必要なものは多いです。ファイルを開くためには、大まかにこれだけのことをする必要があります:

  1. ダイアログコントロールのインスタンスを作る
  2. 同インスタンスを、ページに追加する
  3. 「ファイルを開く」ダイアログを開くイベントを発生させるボタンを作り、ページに配置する
  4. ファイルを選択したイベントを受け取り処理するメソッドを作る

本アプリの場合はさらに、字幕のテキストに未保存の変更があった場合には変更を破棄するかそのまま開くかを聞くダイアログを表示させており、そのためのメソッドがひとつ、そのダイアログを閉じるメソッドがひとつ、そしてそれら一式を音声ファイルとテキストファイルそれぞれに用意することとなりました。ほぼ同じ処理をしているので再利用できるように書くべきですが、実際は手を抜いたのでそれぞれの細かいコードが存在している状態です。いずれにせよ、ファイルの読み書きのために必要なことが多く、それぞれで行ったり来たりがあるため、自分にとっては一番面倒な工程でした。以下、なるべく実際の動作に従って順番にコードを説明していきます。

# Speech file picker control
self.pick_speech_file_dialog = ft.FilePicker(on_result=self.pick_speech_file_result)

OS の「ファイルを開く」ダイアログを開くFilePickerコントロールのインスタンスです。実際にファイルが選択された際にon_resultイベントが発生し、self.pick_speech_file_resultメソッドが呼ばれます (そこにたどり着くまでが長いです)。

# Adds dialog instance methods to the page.
page.overlay.extend([app.pick_speech_file_dialog, app.pick_text_file_dialog, 
                     app.export_as_srt_dialog, app.export_as_txt_dialog])

ページにoverlay.extendで全てのファイルの読み書きに使用するダイアログを追加しています。これは Audio コントロールの追加同様、クラスの外側、async def main() の中で行います。

# Open speech file button
self.speech_file_button = ft.ElevatedButton(
    text='Open Speech File', 
    icon=ft.icons.RECORD_VOICE_OVER_OUTLINED, 
    width=210,
    on_click=self.pre_pick_speech_file,
)

クリックされたときにself.pre_pick_speech_fileを呼び出すボタンです。

# Called once Open Speech File button is clicked to pause playback and check if changes saved.
async def pre_pick_speech_file(self, e):
    if self.isPlaying == True:
        await self.play_button_clicked(e)
    if self.save_button.text == '*Save':
        #print('Save is not done.')
        await self.speech_save_or_cancel()
    else:
        await self.pick_speech_file()

このメソッドでは、実際に「ファイルを開く」ダイアログを開く前に行いたい処理を書いています。まず、再生中であれば停止します。そして字幕に未保存の変更があれば (「*Save」 という表示になっている場合) セーブを促すダイアログを表示するメソッドを呼び、無ければやっと「ファイルを開く」ダイアログ部分のメソッドを呼びます。ここでは全てのメソッド呼び出しにawaitが要求されました。一時停止するためにself.play_button_clicked(e)を呼んでいますが、同メソッドは (使っていなくても) 引数を要求するのでeを渡しています。未保存の変更は、セーブボタンにアスタリスクがついていれば有り、と判定しています。

# Opens a dialog if change is not saved.
async def speech_save_or_cancel(self):
    self.page.dialog = self.speech_save_or_cancel_dialog
    self.speech_save_or_cancel_dialog.open = True
    self.page.update()

未保存の変更があったときに呼ばれるメソッドです。中身としては、ページのダイアログにAlertDialogのインスタンス (次のself.speech_save_or_cancel_dialog) を指定し、openプロパティを有効にすることでダイアログを表示しています。

# Alert dialog that opens if subtitle was edited but not saved when Open Speech File button is clicked.
self.speech_save_or_cancel_dialog = ft.AlertDialog(
    modal=True,
    title=ft.Text('Change not saved.'),
    content=ft.Text('Do you want to discard the change?'),
    actions=[
         #ft.TextButton('Save', on_click=self.save_then_open, tooltip='Save then open another file.'),
         ft.TextButton('Open without save', on_click=self.open_speech_without_save, tooltip='Change will be lost.'),
         ft.TextButton('Cancel', on_click=self.close_speech_save_or_cancel_dialog),
    ]
)

未保存の変更があるときに開くダイアログです。セーブせずにファイルを開く Open without save と、キャンセルしてダイアログを閉じる Cancel ボタンが配置されています。ここからセーブもできるようにしたかったのですがうまくいかず、Save ボタンはコメントで残っています。

# Closes the above dialog.
async def close_speech_save_or_cancel_dialog(self, e):
    self.speech_save_or_cancel_dialog.open = False
    self.page.update()

先にキャンセルの処理です。単純にダイアログのopenプロパティを False にして閉じています。

# Opens audio file pick.
async def open_speech_without_save(self, e):
    self.speech_save_or_cancel_dialog.open = False
    self.page.update()
    await self.pick_speech_file()

ダイアログでセーブせずにファイルを開くことを選択した際に呼ばれるメソッドです。ダイアログを閉じページをアップデートしてから、self.pick_speech_file()を呼びます。

# Opens audio file pick dialog. Only allow compatible extensions.
async def pick_speech_file(self):
    self.pick_speech_file_dialog.pick_files(
        dialog_title='Select a speech (audio) file',
        allow_multiple=False,
        allowed_extensions=['mp3', 'm4a', 'wav', 'mp4', 'aiff', 'aac'],
        file_type=ft.FilePickerFileType.CUSTOM,
    )

ついに「ファイルを開く」ダイアログを開くメソッドの登場です。2つのプロパティallowed_extensionsfile_typeで、開けるファイルの拡張子を限定しています。このメソッドは、上で定義したself.pick_speech_file_dialogコントロールのpick_files()メソッドで「ファイルを開く」ダイアログを開いています。そして、ファイルが選ばれた場合、やっとon_resultイベントが発生し、self.pick_speech_file_resultメソッドが呼ばれます。OS の機能を呼び出しているため、前回開いたフォルダを Flet アプリ内のどこかで保持しておくというようなことは必要ありません。次回ファイルを開くときも同じフォルダが開きます。

# Called when audio file pick dialog is closed. If file is selected, call self.check_text_file to load text file.
async def pick_speech_file_result(self, e: ft.FilePickerResultEvent):
    if e.files:
        #print(f'e.files = {e.files}')
        self.speech_file_name.value = ''.join(map(lambda f: f.name, e.files))
        self.speech_file = ''.join(map(lambda f: f.path, e.files))
        #print(f'Full path= {self.speech_file}')
        self.audio1.src = self.speech_file
        self.base_dir.value=f"Directory: {os.path.dirname(self.speech_file)}"
        await self.check_text_file()
        self.update()
        await self.load_audio()

このメソッドには開かれたファイルの情報ft.FilePickerResultEventeとして取り込まれます。e.filesの中からf.nameでファイル名を取り出し、f.pathでフルパスを取り出します。それぞれを、ウィンドウの表示用にself.speech_file_name.valueと、音声ファイルself.audio1.srcとして読み込むためにself.speech_fileへ代入しています。await self.check_text_file() でテキストファイルの有無を確認する下で説明するメソッドを呼び出し、表示をアップデートした後に音声ファイルの読み込みを行う関数self.load_audio()を呼び出します。はぁはぁ。

# Checks if audioFileName.srt or .txt exists to automatically load it.
async def check_text_file(self):
    #print(f'Speech file = {self.speech_file}')
    tmp_file = os.path.splitext(self.speech_file)[0]
    if os.path.exists(tmp_file+'.srt'):
        self.text_file = tmp_file+'.srt'
        self.text_file_name.value = os.path.basename(self.text_file)
    elif os.path.exists(tmp_file+'.txt'):
        self.text_file = tmp_file+'.txt'
        self.text_file_name.value = os.path.basename(self.text_file)
    else:
        self.text_file = self.text_file_name.value = 'No Text File.'
        self.save_button.disabled=True
        self.export_button.disabled=True
        self.sub_scroller_sw.disabled=True
    #print(f'Subtitle file = {self.text_file_name.value}')

音声ファイルを選択した後に、同名で拡張子が .srt もしくは .txt のファイルがあれば読み込む準備をするメソッドです。どちらも無い場合はセーブなどのボタンを無効にします。

この後、クラスの外側にある 801行目のself.load_audio()が呼ばれ、音声ファイルをページに追加します。音声ファイルの読み込みが終わるとself.audio1のイベントon_loadedが発生し、メソッドの最初に説明したself.loadedが呼ばれるという流れになります。

拡張子を信頼してファイルの中身の評価をせずにこの長さです。手順を理解すれば難しい訳では無いのですが、頭の中だけで進めると結構大変です。ボクが字幕ファイルの読み込みのためにもう一セット同じ様なたくさんのコードを追加ときは、Smartsheet の無料版にチェックリストを作ってコーディングを進めました。すでに動いている音声ファイルの読み込みコードに手を入れて動かなくなったら面倒だ、という考えがあったからなのですが、今思えば再利用できるコードを書くべき典型例だったかもしれません。何のための GitHub 導入だったやら。というわけで、本記事ではテキストファイルの読み込みに関わる部分は触れないのであしからず。

字幕ファイルの上書き保存メソッド呼び出し async def save_clicked(self, e)

641-651行のこのメソッドでは、開いている字幕ファイルへ変更内容を上書き保存するメソッドを呼び出します。字幕の変更がされたときだけセーブボタンが「*Save」の表示になっているので、.srt または .txt の拡張子に応じた上書き処理のメソッドを呼びます。

対象のコードを開く
    # Updates current open file.
    async def save_clicked(self, e):
        #print(f'File: {self.text_file}')
        extension = os.path.splitext(self.text_file)[1]
        #print(f'Extension: {extension}')
        if self.save_button.text==('*Save'):
            if extension == '.srt':
                await self.save_as_srt(self.text_file)
            elif extension == '.txt':
                await self.save_as_txt(self.text_file)
            self.save_button.text=('Save')
        self.update()

SRT ファイルの上書き保存 async def save_as_srt(self, save_file_name)

670-684行のこのメソッドでは、SRT ファイルの上書き保存を行います。save_file_nameに開いたときのファイル名がフルパスで入っています。self.subtitlesは、アプリ内部で使いやすいように整形したリストなので、そこからインデックス番号、開始時間 –> 終了時間、字幕テキストと空行 (ただの\n)、という形で書き込みます。書き終わるとウィンドウ下部に表示するメッセージを送って描画を更新します。

対象のコードを開く
    # Saves as .srt file.
    async def save_as_srt(self, save_file_name):
        with open(save_file_name, 'w') as srt:
            for i in self.subtitles:
                for j in range(len(i)):
                    if j % 4 == 0:
                        srt.write('%s\n' % i[j])
                    elif j % 4 == 1:
                        start = ms_to_hhmmssnnn(int(i[j]))
                        end = ms_to_hhmmssnnn(i[j+1])
                        srt.write(f'{start} --> {end}\n')
                    elif j % 4 == 3:
                        srt.write('%s\n\n' % i[j]) 
        notification = f'Subtitle saved as an SRT file: {os.path.basename(save_file_name)}'
        await self.open_notification_bar(notification)
        self.update()

TXT ファイルの上書き保存 async def save_as_txt(self, save_file_name)

705-713行のこのメソッドでは、TXT ファイルの上書き保存を行います。SRT ファイルと違い字幕部分の文字列しかありませんので、self.subtitles リストの文字列部分のみを全て上書きします。書き終わるとウィンドウ下部に表示するメッセージを送って描画を更新します。

対象のコードを開く
    # Saves as .txt file.
    async def save_as_txt(self, save_file_name):
        with open(save_file_name, 'w') as txt:
            for i in self.subtitles:
                for j in range(len(i)):
                    if j % 4 == 3:
                        txt.write('%s\n' % i[j]) 
        notification = f'Subtitle saved as a TXT file: {os.path.basename(save_file_name)}'
        await self.open_notification_bar(notification)
        self.update()

SRT/TXT で書き出し async def export_as_srt(self, e) と async def export_as_txt(self, e)

654-667行の SRT 書き出しと、687-702行の TXT 書き出しも、まとめられたはずの手抜き部分です。それぞれのボタンがクリックされると、同名のファイルがある場合はファイル名に年月日時分を追加してファイル保存のダイアログを開きます。TXT ファイルを開いているときにはタイムスタンプ情報が無いため、書き出せるのは TXT のみとなります。

TXT を開いたときは SRT には書き出せない

ファイルの読み込み同様、ファイル名や保存先をユーザが指定できるようにするダイアログを開く場合も、コントール、ページへの追加、そして処理を行うメソッドと、複数に分かれたコードが必要となります。流れは音声ファイルの読み込みとほぼ同じなので詳細は書きませんが、クリックしたボタンに応じて最終的には上で紹介したsave_as_srtまたはsave_as_txtメソッドでファイルへの書き込みを行っています。

SRT で書き出すメソッドのコードを開く
# Exports current open SRT file as another SRT file.
async def export_as_srt(self, e):
    if os.path.splitext(self.text_file)[1] == '.srt':
        suggested_file_name = os.path.basename(self.text_file).split('.', 1)[0]+'_'+datetime.now().strftime("%Y%m%d%H%M")+'.srt'
    self.export_as_srt_dialog.save_file(
        dialog_title='Export as an SRT file',
        allowed_extensions=['srt'],
        file_name = suggested_file_name,
        file_type=ft.FilePickerFileType.CUSTOM,
    )

# Checks result of Export as SRT File Picker and passes absolute path to self.save_as_srt if exists.
async def export_as_srt_result(self, e: ft.FilePicker.result):
    if e.path:
        await self.save_as_srt(e.path)
TXT で書き出すメソッドのコードを開く
# Exports current open text file as a TXT file.
async def export_as_txt(self, e):
    if os.path.exists(os.path.splitext(self.text_file)[0]+'.txt'):
        suggested_file_name = os.path.basename(self.text_file).split('.', 1)[0]+'_'+datetime.now().strftime("%Y%m%d%H%M")+'.txt'
    else:
        suggested_file_name = os.path.basename(self.text_file).split('.', 1)[0]+'.txt'
    self.export_as_txt_dialog.save_file(
        dialog_title='Export as a TXT file',
        allowed_extensions=['txt'],
        file_name = suggested_file_name,
        file_type=ft.FilePickerFileType.CUSTOM,
    )

# Checks result of Export as TXT File Picker and passes absolute path to self.save_as_txt if exists.
async def export_as_txt_result(self, e: ft.FilePicker.result):
    if e.path:
        await self.save_as_txt(e.path)

ウィンドウ下部の通知 async def open_notification_bar(self, notification, type=’normal’)

716-725行のメソッドで、ウィンドウ下部に通知を表示します。この機能は Flet のSnackBarコントロール (370行目で定義) を利用しており、通知するときだけ表示し、自動的に消えます。通知内容のサンプル:

このメソッドはnotificationとして表示するテキストと、normal または error を持った type を待ち受け、typeが指定されていない場合はコントロールを生成したときのデフォルトの長さ (2秒) で通知を表示します。error の場合は中身が読めるよう注意喚起の黄色い通知内容を長め (4秒) 表示しています。色の指定方法はいろいろあるのですが、ボクはこちらのページで確認できる、名前の付けられた色を使いました。文字色の指定はSnackBarcontentプロパティに指定するTextコントロールのプロパティで、通知領域の色指定はSnackBar自体のプロパティbgcolorで行うところが直感的では無いかもしれません。内容を指定した後にプロパティでopen=Trueとしアップデートすると、指定された時間表示して消えます。

コントロールの指定部分は以下で、メソッド部分は下の 715行目からとなります。

    # Notification bar control at the bottom
    self.notification_bar=ft.SnackBar(
        content=ft.Text('Speech + Subtitle Player'),
        duration=2000,
        bgcolor=ft.colors.BLUE_GREY_700,
    )

今見返すと、上のコントロールの生成で通知領域の色指定をしているので、メソッド側での指定は不要でした。。。

    # Opens notification bar with given text. If type is 'error', shows message longer with caution color.
    async def open_notification_bar(self, notification, type='normal'):
        if type == 'normal':
            self.notification_bar.content=ft.Text(notification, color=ft.colors.LIGHT_BLUE_ACCENT_400)
            self.notification_bar.bgcolor=ft.colors.BLUE_GREY_700
        elif type == 'error':
            self.notification_bar.content=ft.Text(notification, color=ft.colors.RED)
            self.notification_bar.bgcolor=ft.colors.YELLOW
            self.notification_bar.duration=4000
        self.notification_bar.open=True 
        self.notification_bar.update()

字幕ボタンを作る SubButton クラスの中身

字幕やタイムスタンプからボタンを作るクラスは、UserControl を継承しユーザ定義のコントロールとして実装しています。このクラスは、公式の Tutorial にある To-Do app をコピーしたものを手直しして作りました。というわけで、メインのクラスとは大まかな中身の順番が異なっており、初期化、レイアウトのbuild、ボタンがクリックされたときのメソッド、という順番で並んでいます。

メソッドの初期化 def init(self, index, start_time, end_time, text, sub_time_clicked, play_button, save_button, subtitles)

親クラスがボタンのインスタンスを作るとき、インデックス番号、字幕の開始時間、字幕のテキストといった表示に関わる部分のほか、親クラスのメソッドやセーブボタン、も渡しています。読み込んだ字幕を二次元リストとして持っているsubtitlesは、テキストを編集したときに直接リストを操作できるように渡しています。中身も個別に渡しているので無駄があり、その点は参考にしないでください。

対象のコードを開く
def __init__(self, index, start_time, end_time, text, sub_time_clicked, play_button, save_button, subtitles):
    super().__init__()
    # Parameter of each subtitle.
    self.index = index
    self.start_time = start_time
    self.end_time = end_time
    self.text = text
    # Passed methods and controls to call and update.
    self.sub_time_clicked = sub_time_clicked
    self.play_button = play_button
    self.save_button = save_button
    self.subtitles = subtitles

字幕ボタン等のレイアウト def build(self)

97-150行では、コントロールのインスタンス生成と初期化をし、親クラスにリターンしています。前半の 123行目までで、タイムスタンプのボタン、字幕のボタン、字幕編集モード用のプレイスホルダを作り、表示用のコントロールself.display_viewとしてまとめています。

self.display_start_timekeyはインデックス番号で、タイムスタンプがクリックされたときのスクロールの飛び先指定となります。

126行目からのifブロックでは、読み込まれた字幕ファイルの種類に応じてタイムスタンプボタンにホバーオーバしたときのポップアップ (tooltip) を書き換えています。

132-149行は字幕テキストの編集モードの設定をしています。デフォルトではvisible=Falseで非表示になっています。

参考にしたオフィシャルの To-Do app には、それぞれのアイテムに編集と削除ボタンがありますが、本アプリでは削除ボタンは不要なので無くし、編集ボタンは字幕自体をボタンにすることで直感的に操作できるようにしました。また、編集モードをキャンセルで抜けられるようにすることで、アンドゥの実装を避けました。

字幕テキストのクリックで編集モードへ。エンターキーで確定し閉じる
対象のコードを開く
# === BUILD METHOD ===
def build(self):
    # Start time button
    self.display_start_time = ft.TextButton(text=f"{ms_to_hhmmssnnn(int(self.start_time))}",
                                        # Disable jump button if loaded text is TXT, no timestamp.
                                        disabled=(self.start_time==201355555),
                                        # When enabled, jump to the key when clicked.
                                        key=self.index,
                                        width=130,
                                        on_click=self.jump_clicked,)

    # Subtitle text button in display view. Click to edit.
    self.display_text= ft.TextButton(text=f"{self.text}", 
                                     on_click=self.edit_clicked, 
                                     tooltip='Click to edit')

    # Placeholder of subtitle text button in edit view.
    self.edit_text = ft.TextField(expand=1)

    # Put controls together. Left item is the key=index.
    self.display_view = ft.Row(
        alignment=ft.MainAxisAlignment.START,
        controls=[
            ft.Text(value=self.index, width=30),
            self.display_start_time,
            self.display_text,
        ]
    )

    # Change tool tip of start time button which is only clickable for SRT.
    if self.start_time==201355555:
        self.display_start_time.tooltip='Jump not available'
    else:
        self.display_start_time.tooltip='Click to jump here'

    # Subtitle edit view visible when clicked.
    self.edit_view = ft.Row(
        visible=False,
        #alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
        #vertical_alignment=ft.CrossAxisAlignment.CENTER,
        controls=[
            self.edit_text,
            ft.IconButton(
                icon=ft.icons.DONE_OUTLINE_OUTLINED,
                tooltip='Update Text',
                on_click=self.save_clicked,
            ),
            ft.IconButton(
                icon=ft.icons.CANCEL_OUTLINED,
                tooltip='Close wihout change',
                on_click=self.cancel_clicked,
            )
        ]
    )
    return ft.Column(controls=[self.display_view, self.edit_view])

字幕編集モード async def edit_clicked(self, e)

155-161行では、字幕ボタンがクリックされたときの編集モードの有効化をしています。focus()メソッドを呼ぶことですぐにキーボードで操作が行えるようにし、on_submitイベントによりエンターキーでself.save_clickedメソッドを呼び出せるようにしています。

対象のコードを開く
# Opens editable text button with subtitle. Hit enter key or click checkmark to call save_clicked.
async def edit_clicked(self, e):
    self.edit_text.value = self.display_text.text
    self.edit_text.focus()
    self.display_view.visible = False
    self.edit_view.visible = True
    self.edit_text.on_submit = self.save_clicked
    self.update()

編集した字幕の上書き async def save_clicked(self, e)

164-172行で、チェック (上書き) ボタンクリックもしくはエンターキーで字幕の編集が確定されたときの処理を行っています。セーブボタンには編集済みを示すアスタリスクを付け (*Save)、字幕のリストであるself.subtitlesにも変更内容を上書きします。フォーカスを音声ファイルの再生ボタンに戻し、スペース or エンターで再生・停止ができるようにしています。

対象のコードを開く
# Updates edited subtitle, change save button, revert focus back to Play button.
async def save_clicked(self, e):
    self.display_text.text= self.edit_text.value
    self.display_view.visible = True
    self.edit_view.visible = False
    self.save_button.text = '*Save'
    self.subtitles[int(self.index)-1][3]=self.display_text.text
    self.play_button.focus()
    self.save_button.update()
    self.update()

字幕編集のキャンセル async def cancel_clicked(self, e)

175-179行では、(×) ボタンがクリックされたときの編集キャンセル処理をしています。とは言っても単純に変更内容を破棄して編集モードを終了し、フォーカスを再生ボタンに戻しているだけです。ここも本当は Esc キーで同様の処理をしたかったのですが、残念ながら簡単に実現できる方法が Flet には無かったので諦めました。

対象のコードを開く
# When timestamp clicked calls AudioSubPlayer.sub_time_clicked to jump to button position.
async def jump_clicked(self, e):
    await self.sub_time_clicked(self.start_time)

タイムスタンプがクリックされたときのジャンプ async def jump_clicked(self, e)

182-183行では、タイムスタンプボタンがクリックされたときにそこから再生するよう、字幕の開始時間start_timeを親クラスのsub_time_clickedに渡す処理をしています。Audioコントロールのseekメソッドを実行するため、このクラスの中では唯一awaitが必要となっています。

Flet (GUI) とは直接関係ない関数

本アプリでは必要ですが、Flet のコードに組み込む必要が無かった処理は、コードの先頭部分にまとめてあります。ざっと説明すると、ミリ秒を SRT で使用する時間表示へ切り替える関数、その逆を行う関数、そして、読み込んだ字幕ファイル TXT もしくは SRT を、アプリ内で使いやすいリストに格納する関数が書かれています。

以上で、コードの直接的な説明を終わります。

作ってみて思ったことと、この記事を書いた理由

Flet は割と簡単にモダンなデザインでアプリが作れるので、そこが大きな魅力です。GUI の構成要素となるボタンやテキストはもちろん、音声ファイルの処理やスライダー、通知やダイヤログなど、あらかた必要なものはそろっており、細かいところは気にせずに配置していくだけで、とりあえずアプリっぽいものが作れてしまいます。持っていないので想像でしかないのですが、質の良い 3D プリンタを手に入れたのと近い気がしています。3D モデルデータが実物になるように、Python のコードが触れるようになるという感覚です。

オフィシャルのドキュメントは充実しており、うまく理解できれば自分のアプリに利用できます。基本的に全ての機能はウェブブラウザで動く設計なので、実際に触って試せる Live example も多数用意されていて、いじりながら自分のアプリに使う部品を探す作業も楽しいです。このギャラリーに行けば、おそらくほとんどのコントロールや機能のサンプルを試し、GitHub で実際のコードの確認が行えるので、すごく助かります。

ただし、Flet は遙か昔に流行ったオーサリングツールのような、マウスを操作して GUI を作るツールではないので、全ては Python コードで実装することになります。また、完成したアプリのインターフェイスはウェブのフロントエンド (HTML、JavaScript、CSS) で実装されます。なので、必須ではありませんが、これらの知識を持っておくことが完成品を作る近道だと思いました。フロントエンドをしっかり学習するつもりの無い人が Flet の中心的利用者だと想像していますが、それでもそれぞれの入門書を 1~2冊読んでおくと、Flet のドキュメントを読んだときにすっと理解できると思います。

Flet に関する日本語の情報は増えてきているようですが、紹介ブログ記事を書くために「さわってみた」というものが大半で、自分がアプリを作るのに有効だった記事はあまり見つけられませんでした。オフィシャルのドキュメントも一通り網羅されているものの、実際に使うとなると思ったほど簡単ではありませんでした。なので、本アプリ字幕極楽丸が完成に近づいた頃に考えていたのは、Flet アプリの作り方を記事としてまとめることでした。絶対に必要な人がいる、という思いで、アプリも記事も (適当なところや冗長なところがありつつも) 完成できてよかったと思っています。

Python としてのロジックは、結構 Copilot (無料版) に相談して書いてもらいました。Flet のことはあまり知らないようですが、Python そのものに関してはかなり頼りにできることがわかりました。自分でデバッグまでしてしまうコード生成 AI も出てきているので、アイディアがあればアプリ作成のハードルはすごく下がってきてますね。

簡単なものでも、自分で考えたアプリが完成すると感動します。ビルドすれば、他の人にも触ってもらえます。ぜひ、Flet でのアプリ開発をはじめてみてください。

Image by Stable Diffusion

使ったモデルのせいもあり、白人のおじさんおにいさんばかりが生成されたので、プロンプトに入れてあった “realistic, masterpiece, best quality” を “cartoon” に変更。いくつか描いてもらった中で、ほとんどの指示を無視して生成されたイラストを今回のアイキャッチに採用。生成物の落差がすごい。

Date:
2024年4月8日 19:16:06

Model:
realisticVision-v20_split-einsum

Size:
512 x 512

Include in Image:
cartoon, retro future, guy partially gray hair with glasses, white t-shirt, typing keyboard, happy coding!

Exclude from Image:
frame, old, fat, suit

Seed:
2776787021

Steps:
50

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
CPU & Neural Engine

Stable Code Instruct 3B を Mac で簡単に高速で動かす方法

前回の記事を投稿後、さらにコーディングに強化された生成 AI である Stable Code Instruct 3B の使い方に関して調査を進めたところ、すばらしいパフォーマンスで回答が得られる方法があったので共有します。簡単なテストしかできていませんが、かなり使える印象です。Mac ローカルで動き、無料でネット接続も不要、そして速い。日本語もかなりお上手。当面のコーディングは Stable Code Instruct 3B に頼って生きられそうです。

MLX-LM で使えた

「”Stable Code Instruct 3B” mac」とググって見つけたのがこちらの X への投稿です。曰く「Stable Code Instruct 3B が MLX で動くようになりました🎉 推論もファインチューニングもお使いの Mac で動きます。

https://twitter.com/Prince_Canuma/status/1772366055253397590

一週間も前に投稿されていたのになぜ昨日は見つからんかった。。。ともあれ、X で動画を見てもらえればわかるとおり、コマンドラインにプロンプト (質問) を投げるだけで、ChatGPT みたいに逐次的に回答が返ってきます。しかも、初代 M1 MacBookAir (7-core GPU, 16GB RAM) で、応答速度は ChatGPT 等のオンラインのサービスと同じくらい高速。すごい、すごすぎる。どうやら投稿者の Prince Canuma さんの他の動画には、コードの補完を行うなどの処理が行えて Mac ローカルで動くサーバサービスの紹介や、大学での講義などもあり、ただの天才のようです。なーんだ。

インストール方法

上の X に書いてますがせっかくなので。本当に必要なのはこれだけ。

pip install -U mlx_lm

ローカルに仮想環境を作ってモデルもダウンロードして、とするならこんな感じ (↓)。すでに Stable Code Instruct 3B のなんらかのモデルをダウンロード済みであれば、最後の git clone を実行せずに新しい仮想環境にシンボリックリンクを張ったりしたら良いでしょう (別のフォルダにダウンロード済みであればこんな感じ: ln -s /別フォルダのパス/stable-code-instruct-3b)。

mkdir MLX_LM
cd MLX_LM
pipenv --python 3.11
pip install -U mlx_lm
git clone https://huggingface.co/stabilityai/stable-code-instruct-3b

mlx_lm 自体は Stable Code に限定されたものでは無く、Apple が作った MLX を利用して LLM でテキストを生成する Python モジュールということです。詳しい使い方は PyPI のプロジェクト説明ページ も見てください。

実行方法

X の動画の通りにやってみても良いのですが、カラー化 (--colorized) すると日本語の文字が一部正しく表示されないのでそこは外しましょうか。コード生成を試す前に、知識を問う質問をした結果を紹介します。以下、プロンプトを含んだコマンドラインとなります。

python -m mlx_lm.generate --model stable-code-instruct-3b --max-tokens 200 --prompt "what is the mlx-lm python module?"

使ったオプションの説明

全てのオプションを見るには: python -m mlx_lm.generate --help

  • --model stable-code-instruct-3b ローカルに保存したモデルを相対パスで指定しています。Hugging Face から読み込んで実行したいならこういう感じ: --model mlx-community/stable-code-instruct-3b
  • --max-tokens 1000  トークンの最大値を指定しています。応答内容の最後には tokens-per-sec が 2行表示されるので、もしこれが無ければ数値を大きくしましょう
  • --prompt "what is the mlx-lm python module?" ダブルクォーテーションの中に質問を書きます。日本語も使えます

実際に出力された内容はこちらです。先ほどインストールしたモジュール mxl_lm の説明をしてくれています。”developed by the Melting Potato project” と言っていますが、間違っている感じがします。サンプルがまずかったか他の部分も確実に評価はできませんが、3B のモデルでもあり、鵜呑みにはできません。

000 --prompt "what is the mlx-lm python module?"
None of PyTorch, TensorFlow >= 2.0, or Flax have been found. Models won't be available and only tokenizers, configuration and file/data utilities can be used.
Special tokens have been added in the vocabulary, make sure the associated word embeddings are fine-tuned or trained.
==========
Prompt: <|im_start|>system
You are a helpful assistant.<|im_end|>
<|im_start|>user
what is the mlx-lm python module?<|im_end|>
<|im_start|>assistant

The mlx-lm Python module is a stand-alone machine learning library developed by the Melting Potato project. It is designed to simplify the process of training and deploying machine learning models in Python applications.

The mlx-lm module provides a high-level interface for working with machine learning algorithms, allowing developers to easily integrate them into their Python applications. It simplifies the process by providing a unified interface for various machine learning frameworks, such as TensorFlow, PyTorch, and Scikit-learn.

Here are some key features of the mlx-lm module:

1. **Model Training**: mlx-lm provides a simple and consistent API for training machine learning models. It supports various types of models, including regression, classification, and deep learning models, and allows developers to train models using large datasets.

2. **Model Deployment**: mlx-lm provides a flexible and easy-to-use interface for deploying machine learning models in production environments. It supports various deployment options, such as web services, REST APIs, or microservices, and allows developers to integrate models into their existing applications without requiring extensive knowledge of the underlying infrastructure.

3. **Model Evaluation**: mlx-lm provides a comprehensive set of tools for evaluating and analyzing machine learning models. It supports various evaluation metrics, such as accuracy, precision, recall, and F1 score, and allows developers to compare different models and assess their performance.

4. **Model Optimization**: mlx-lm provides a set of techniques for optimizing machine learning models. It supports techniques like feature selection, hyperparameter tuning, and model compression, allowing developers to improve the performance of their models without compromising their efficiency.

5. **Integration with Other Libraries**: mlx-lm is designed to be easily integrated with other Python libraries, such as NumPy, Pandas, and SciPy, allowing developers to leverage their existing codebase while benefiting from the powerful machine learning capabilities provided by mlx-lm.

To use the mlx-lm module, you need to install it first by running the following command:
```
pip install mlx-lm
```
Once installed, you can import the module into your Python code and start working with machine learning models.

Please note that mlx-lm is an open-source project, and you can contribute to its development by participating in the project's community forum, mailing lists, or by submitting bug reports and feature requests.<|im_end|>

==========
Prompt: 213.558 tokens-per-sec
Generation: 38.486 tokens-per-sec

Stable Code Instruct 3B は日本語もイケる

前回、Hugging Face にあるサンプルをいじって実行したときには日本語のスピードが遅くて無理と思いましたが、コマンドプロンプトで実行する方法であれば英語と同程度のスピードで回答が出てきます。以下、プロンプトとその回答です。コードを書いてもらえれば実行することで評価ができますし、Stable Code Instruct の本領がここにあります。

python -m mlx_lm.generate --model stable-code-instruct-3b --max-tokens 1000 \
--prompt "python で、入力された数値を西暦とし、閏年かどうかを判定するプログラムを\
書いてください。また、閏年の場合は、2月29日の曜日も答えるようにしてください。"
None of PyTorch, TensorFlow >= 2.0, or Flax have been found. Models won't be available and only tokenizers, configuration and file/data utilities can be used.
Special tokens have been added in the vocabulary, make sure the associated word embeddings are fine-tuned or trained.
==========
Prompt: <|im_start|>system
You are a helpful assistant.<|im_end|>
<|im_start|>user
python で、入力された数値を西暦とし、閏年かどうかを判定するプログラムを書いてください。また、閏年の場合は、2月29日の曜日も答えるようにしてください。<|im_end|>
<|im_start|>assistant

以下は、Pythonで西暦を判定し、閏年かどうかを判定するプログラムです。閏年の場合は、2月29日の曜日も答えるようにしてあります。

```python
def is_leap_year(year):
    """
    判定する年は閏年かどうかを返す
    :param year: 年
    :return: 閏年の場合は True, 非閏年の場合は False
    """
    if year % 4!= 0:
        return False
    elif year % 100!= 0:
        return True
    elif year % 400!= 0:
        return False
    else:
        return True

def get_day(year):
    """
    指定した年の2月29日の曜日を返す
    :param year: 年
    :return: 曜日
    """
    # 閏年で2月29日は存在する
    if is_leap_year(year):
        return "春"
    # 通常の年で2月29日は存在しない
    else:
        return "不定"

# 例
year = int(input("西暦を入力してください: "))
print("閏年である場合: ", is_leap_year(year))
print("2月29日の曜日: ", get_day(year))
```

西暦を入力すると、プログラムは閏年かどうかを判定して、結果を表示する。さらに、2月29日の曜日を表示する。

例:
西暦を入力してください: 2020
閏年である場合:  True
2月29日の曜日:  春

例:
西暦を入力してください: 1900
閏年である場合:  False
2月29日の曜日:  不定

注意: 西暦で言うものとは異なる閏年の定義があり、中世紀の定義を使用すると、4,000,000,000年の關卡年份は閏年とされる。上記プログラムは、日本の閏年定義を使用する。<|im_end|>

==========
Prompt: 563.968 tokens-per-sec
Generation: 35.775 tokens-per-sec

RAM (32GB) と GPU (30-core)の使用状況はこんな感じです。かなり短いですが、スワップが発生していました。

赤いのがスワップが発生した (SSD をメモリとして使用した) 時

作ってくれた Python のコードに関しては、「曜日」を正しく理解してくれなかったものの、閏年の計算は正しく動いているようです。以下は Python コード部分をファイルに保存して実行したサンプルです:

% python leapYearCheck.py
西暦を入力してください: 2024
閏年である場合:  True
2月29日の曜日:  春
% python leapYearCheck.py
西暦を入力してください: 2023
閏年である場合:  False
2月29日の曜日:  不定

週イチで出会いと別れがあるのはつらいので、曜日を理解してくれるように、プロンプトに英語を追加してみました。

python -m mlx_lm.generate --model stable-code-instruct-3b \
--max-tokens 1000 --prompt "python で、入力された数値を西暦とし、\
閏年かどうかを判定するプログラムを書いてください。\
また、閏年の場合は、2月29日の曜日 (day of the week) も答えるようにしてくだい。"
None of PyTorch, TensorFlow >= 2.0, or Flax have been found. Models won't be available and only tokenizers, configuration and file/data utilities can be used.
Special tokens have been added in the vocabulary, make sure the associated word embeddings are fine-tuned or trained.
==========
Prompt: <|im_start|>system
You are a helpful assistant.<|im_end|>
<|im_start|>user
python で、入力された数値を西暦とし、閏年かどうかを判定するプログラムを書いてください。また、閏年の場合は、2月29日の曜日 (day of the week) も答えるようにしてくだい。<|im_end|>
<|im_start|>assistant

以下は、Pythonで西暦を判定し、閏年かどうかを判定するプログラムです。閏年の場合は、2月29日の曜日も答えます。

```python
def is_leap_year(year):
    """
    判定する条件は、以下の通り
    1. 年は4で割り切れる場合、または100で割り切れる場合、または400で割り切れる場合、それぞれ2, 5, 0と対応
    2. 上記以外の年は、閏年とは判定しない
    """
    if (year % 4 == 0 and year % 100!= 0) or (year % 400 == 0):
        return True
    return False

def day_of_week(year, month, day):
    """
    月曜日で0、火曜日で1、....、土曜日で6、日曜日で7
    """
    t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
    year -= month < 3
    return (year + year // 4 - year // 100 + year // 400 + t[month-1] + day) % 7

year = int(input("Enter a year: "))
if is_leap_year(year):
    print(f"{year} is a leap year.")
    print(f"The day of the week for February 29 is {['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][day_of_week(year, 2, 29)]}.")
else:
    print(f"{year} is not a leap year.")
```

注意: 年は0-basedで入力する必要があり、誤入力時にエラーが出る可能性があります。

また、曜日も0-basedで表現される点についても注意が必要です。

上記プログラムは、閏年の判定基準は、世界的な共通的な定義であり、西暦法的な定義でありません。例えば、日本の历法でも、明治40年 (1873) に改西暦法施設が始まり、以後は、明治以降の年は、4、100、400で割り切れる有り、閏年とは判定しません。日本の共通的な定義では、明治以降の年は、4、100、400で割り切れる有り、閏年とは判定する必要があります。

上記プログラムは、西暦法的な定義で判定しています。西暦法的な定義で判定すると、明治以降の年は、4、100、400で割り切れる有り、閏年とは判定しません。

ごめんなさい。

---

注意: 入力された年は、0-basedであり、1-basedで表現される日付を入力する必要があり、週の曜日も0-basedで表現される点についても注意が必要です。

上記プログラムは、西暦法的な定義で閏年を判定しています。世界的な共通的な定義で判定すると、閏年とは判定しません。西暦法的な定義でも、閏年とは判定しません。

ごめんなさい。<|im_end|>

==========
Prompt: 600.106 tokens-per-sec
Generation: 32.308 tokens-per-sec

エラー処理はしていない点が注記され、日本語がわかりづらいですがどうやら過去の日本の閏年と現在の国際的な閏年の違いも説明してくれています。明治生まれの方に親切ですね。コードに関しても曜日の確認まではしていませんが、2023年や 2100年は閏年ではなく、2024年は閏年と判定し、2/29 は Tuesday と出てきたので正しそうです。

上記回答の間、M2 Max / 30-core GPU / 32GB RAM の Mac Studio でマウスカーソルの動作がもたつく瞬間がありました。回答が長くなるような難しいお願いをした場合は、RAM 容量の小さな Mac ではある程度の処理低下を想定した方が良さそうです。

スワップが発生したあたりでおそらく体感的な影響が発生
GPU のスパイクは、普通の作業には影響なし

エラーへの対処

ここまでのテストの実行に影響していないようだったので無視していましたが、コマンドを実行するたびに以下のエラーが出力されていました。

None of PyTorch, TensorFlow >= 2.0, or Flax have been found. Models won't be available and only tokenizers, configuration and file/data utilities can be used.

PyTorch をインストールしたらエラーが消えました。

pip install torch

上記の日本語のプロンプトのコマンドを再投入した結果部分が以下となります。Prompt の tokens-per-sec の値が改善しました。PyToch インストール前に比べて 73% ほどの時間でプロンプトの解釈が終わったということかと思います。ただ、Mac 上で他のプログラムも動いているからか、この数値は同じコードを実行しても上下しています。テキストの生成自体 PyTorch インストール前も動いていたことから、必要・影響ないかもしれません。

==========
Prompt: 439.798 tokens-per-sec
Generation: 32.475 tokens-per-sec

感想と今後

mlx_lm を使ってみて、Stable Code Instruct 3B の実力がわかりました。すごいです。これから大いにコーディングに利用していこうと思います。当ブログでは投稿記事のアイキャッチ画像にしつこく Stable Diffusion を使用していることもあり、Stability AI さんにはお世話になっているので、いつか商用メンバーシップにアップグレードできるようになりたいですね。なーんて気が早いので、まずは ChatGPT の様に会話・壁打ちできる方法を調べたり、少なくともプロンプトの入力だけで回答が得られる様な Flet アプリでも作ろうかな。Prince Canuma さんの追っかけやったほうがよさそうかな。

Image by Stable Diffusion

前回の記事ではかなり見くびった画像にしちゃってごめんなさい。日本語だけじゃなく、開発言語も複数扱えるという意味を込めたら良い画像ができました。

Date:
2024年4月1日 22:40:50

Model:
realisticVision-v20_split-einsum

Size:
512 x 512

Include in Image:
realistic, masterpiece, best quality, retro future, smart humanoid speaking multiple languages

Exclude from Image:

Seed:
2695798972

Steps:
23

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
CPU & Neural Engine

(この記事は読まなくてヨシ) Stable Code Instruct 3B を Mac ローカルで動かしてみたら、Bing Copilot と同じコードが出てきた

注意: この記事の投稿後24時間以内に、とある天才が正しい使い方を紹介しているのを見つけました。本投稿は間違いというわけではないものの、Mac ユーザに有益ではないということがわかりました。と言うわけでなぜかこちらが検索にヒットした方は、次の投稿をご覧ください。自分の無知さをさらけ出しているだけではありますが、本投稿も誰かの何かの役に立つかもしれないので消さずにおきます。

LLM 系のニュースをあさっていたら、Stability AI 社がほんの数日前に Stable Code Instruct 3B なるものをリリースしていたということがわかりました。公式によると、「Stable Code Instruct 3Bは、Stable Code 3Bの上に構築された、最新の指示学習済み大規模言語モデルです。このモデルは、コード補完を強化し、自然言語インタラクションをサポートすることで、プログラミングやソフトウェア開発に関連するタスクの効率性と直感性を向上させることを目的としています。」ということです。Mac にインストールして実行できるということなので早速試したところ、Bing Copilot と同じコードを教えてくれました。さらに、驚くべき事がわかりましたのでご報告です。

ローカル環境の構築

手順がまとまっているサイトが無く、いくつかはしごしてたどり着いた方法が以下となります。

  1. 環境用フォルダを作る
  2. 仮想環境を作る
  3. 仮想環境を実行
  4. torchtransformers をインストール
  5. リポジトリをクローン

自分が実行したコマンド一式はこんな感じです:

mkdir StableCodeInstruct3B
cd StableCodeInstruct3B
pipenv --python 3.11
pip install torch transformers
git clone https://huggingface.co/stabilityai/stable-code-instruct-3b

Mac (Apple Silicon) で実行するときのコードの変更

Hugging Face にあるサンプルコードはそのままでは Apple Silicon Mac (M1, M2, M3…) では動きません。とりあえず動くようにするために変更が必要な箇所は以下となります。

#model = AutoModelForCausalLM.from_pretrained("stabilityai/stable-code-instruct-3b", torch_dtype=torch.bfloat16, trust_remote_code=True)
model = AutoModelForCausalLM.from_pretrained("stabilityai/stable-code-instruct-3b", torch_dtype=torch.float16, trust_remote_code=True)
#model = model.cuda()
model.to(torch.device("mps"))

最後にプリント文を追加して結果を表示するようにした macOS 用サンプルコードはこうなります。

import torch
from transformers import AutoModelForCausalLM, AutoTokenizer
tokenizer = AutoTokenizer.from_pretrained("stabilityai/stable-code-instruct-3b", trust_remote_code=True)
#model = AutoModelForCausalLM.from_pretrained("stabilityai/stable-code-instruct-3b", torch_dtype=torch.bfloat16, trust_remote_code=True)
model = AutoModelForCausalLM.from_pretrained("stabilityai/stable-code-instruct-3b", torch_dtype=torch.float16, trust_remote_code=True)
model.eval()
#model = model.cuda()
model.to(torch.device("mps"))

messages = [
    {
        "role": "system",
        "content": "You are a helpful and polite assistant",
    },
    {
        "role": "user",
        "content": "Write a simple website in HTML. When a user clicks the button, it shows a random joke from a list of 4 jokes."
    },
]

prompt = tokenizer.apply_chat_template(messages, add_generation_prompt=True, tokenize=False)

inputs = tokenizer([prompt], return_tensors="pt").to(model.device)

tokens = model.generate(
    **inputs,
    max_new_tokens=2048,
    temperature=0.5,
    top_p=0.95,
    top_k=100,
    do_sample=True,
    use_cache=True
)

output = tokenizer.batch_decode(tokens[:, inputs.input_ids.shape[-1]:], skip_special_tokens=False)[0]
print(output)

変更箇所に関してはこちらの Qiita の投稿を参考にさせていただきました。ありがとうございました。

プログラミング特化LLMであるStable Code 3BをMacBook(M2)で動かしてコードを書いてもらった @nabata

実行した結果は、こちら ↓ のページの Windows で実行した結果と同様となります。HTML ファイルが Terminal に出力されるので、それを index.html とでもしたファイルにコピペしてウェブブラウザで開くと動くところが確認できます。いやはやすごい。

【Stable Code Instruct 3B】プログラミング言語を完全網羅したコーディングAI by 藤崎

Bing Copilot に聞いた質問をしてみる

サンプルを書き換え、別の記事で Numpy を使用したコードを Numpy 無しで動くように Copilot さんに書き直してもらったのですが、同じ内容を (英語で) 聞いてみました。コードはこちらで、ハイライト↓部分が質問内容です。元の質問は e も整数で聞いていますが、結果がつまらなかったので float に変えて聞き直しています。

import torch
from transformers import AutoModelForCausalLM, AutoTokenizer
import time

start_time = time.time()

tokenizer = AutoTokenizer.from_pretrained("stabilityai/stable-code-instruct-3b", trust_remote_code=True)
model = AutoModelForCausalLM.from_pretrained("stabilityai/stable-code-instruct-3b", torch_dtype=torch.float16, trust_remote_code=True)
model.eval()
model.to(torch.device("mps"))

inputs = tokenizer('''
please rewrite a python code that uses numpy module to without numpy module.
source code is below
index = numpy.argmin(numpy.abs(numpy.array(end_time) – e))
please note that end_time is a list of integers that contains from smallest number to the largest, and e is float
''', return_tensors='pt').to(model.device)

tokens = model.generate(
    **inputs,
    max_new_tokens=2048,
    temperature=0.5,
    top_p=0.95,
    top_k=100,
    do_sample=True,
    use_cache=True
)

output = tokenizer.batch_decode(tokens[:, inputs.input_ids.shape[-1]:], skip_special_tokens=False)[0]
print(output)

end_time = time.time()
elapsed_time = round(end_time - start_time, 1)

print('############################')
print(f"処理にかかった時間: {elapsed_time}秒")
print('############################')

そして実行結果がこちらです (処理時間: M2 Max / 30-core GPU / 32GB RAM の場合)。

% python test.py
Special tokens have been added in the vocabulary, make sure the associated word embeddings are fine-tuned or trained.
Loading checkpoint shards: 100%|███████████████████████████████████████████████████████████████████████████████████████████████████████████| 2/2 [00:02<00:00,  1.10s/it]
Setting `pad_token_id` to `eos_token_id`:0 for open-end generation.

```python
import numpy as np

end_time = [1,2,3,4,5]
e = 2.3

index = np.argmin(np.abs(np.array(end_time) - e))

print(index)
```

Here is the code rewritten without numpy module:

```python
end_time = [1,2,3,4,5]
e = 2.3

index = min(range(len(end_time)), key = lambda i: abs(end_time[i]-e))

print(index)
```

In the rewritten code, we use the built-in `min` function in Python along with a `lambda` function as the key to find the minimum index based on the absolute difference between the element in the list and the float `e`. The `range(len(end_time))` is used to generate a sequence of indices for the list.

Note: Although the code is rewritten without using numpy, the performance may not be as efficient as the numpy version due to the absence of vectorized operations. Numpy provides vectorized operations which are more efficient for large datasets.<|im_end|>
<|endoftext|>
############################
処理にかかった時間: 37.6秒
############################

結論として出てきたコード (ハイライト部分) は Copilot さんのそれと全く同じでした。ナゼ!? プロなら常識なのか、たまたま学習に使ったコードが同じだったのか、その辺はわかりませんが、まずビックリ。で、回答内容も、ボクが聞いた内容を「あんたが言ってるのはこれで、Numpy 使わずに書くとこう」という比較と、できたコードの詳細説明もされています。Numpy を使わないときのパフォーマンスの低下に関する注意書きもあり、その理由まで説明してくれています。ワオ!

とは言え、回答が出てくるまでの時間は期待したほど速くは無いです。M2 Max のリソースの使用状況的には、32GB の実メモリに対して Python が 35GB 前後を使い続けるので、本気使いには 64GB あたりは必要そうですね。

(ちなみに、もう一度実行してみたところ、Hope this helps! Best, xxx みたいな回答者らしき人名付きフッタも表示されました。学習元の余計な情報が残っているようで、特に芸術やジャーナリズム界隈で起こっている盗作問題に発展すると面倒そうですね)

左のピークが上記サンプル実行時。中央から右のピークに関してはこの後触れます

ここまでの感想

確かにこれがローカルで実行できちゃうのはすごいです。ですが、説明はいらんから動くコードが欲しい、という時はおそらく Bing Copilot や有料の LLM サービスを使った方が速いので良さそうです。Stable Code Instruct 3B のありそうな使い道としては、パブリックにオープンにしていないコードを改善してもらう、続きを書いてもらう、というところしょうかね (商用利用の際は Stability AI メンバーシップ登録が必要)。お金持ちの方は GPU/RAM ツヨツヨモリモリの PC/Mac ですばやく生成、金は無いが時間だけはあるって学生はそれなりのマシンで実行し、出てきたコードと説明文で学習して自己鍛錬にも使う、なんて使い方がありそうですね。自分は勉強もしたいので、ある程度複雑になりそうな関数を書きたいときに相談しようと思っています。

おまけ (試してみたら驚いた)

上に書いた Numpy コードの書き換えを Copilot に聞いた時は日本語を使いました。なので、Stable Code Instruct 3B にも日本語で相談してみました。使ったコードはこちらで、e を float と説明した以外は、Copilot に聞いた内容のコピペに適当に改行を入れただけです:

import torch
from transformers import AutoModelForCausalLM, AutoTokenizer
import time

start_time = time.time()

tokenizer = AutoTokenizer.from_pretrained("stabilityai/stable-code-instruct-3b", trust_remote_code=True)
model = AutoModelForCausalLM.from_pretrained("stabilityai/stable-code-instruct-3b", torch_dtype=torch.float16, trust_remote_code=True)
model.eval()
model.to(torch.device("mps"))

#inputs = tokenizer([prompt], return_tensors="pt").to(model.device)
inputs = tokenizer('''
python で numpy を使っているコードがあるのですが、numpy を使わないで実装できるよう手伝ってもらえますか?
end_time がリストで、小さい値から大きな値までの整数を持っています。
e は float です
import numpy as np でインポートしています
対象のコードはこちらです: 
index = np.argmin(np.abs(np.array(end_time) – e))
''', return_tensors='pt').to(model.device)

tokens = model.generate(
    **inputs,
    max_new_tokens=2048,
    temperature=0.5,
    top_p=0.95,
    top_k=100,
    do_sample=True,
    use_cache=True
)

output = tokenizer.batch_decode(tokens[:, inputs.input_ids.shape[-1]:], skip_special_tokens=False)[0]
print(output)

end_time = time.time()
elapsed_time = round(end_time - start_time, 1)

print('############################')
print(f"処理にかかった時間: {elapsed_time}秒")
print('############################')

下がそのときの GPU の履歴です。リソースの使用状況から何かが動いてはいるのはわかるものの、推論中なのでコンソールには進捗の類いは出ていません。メモリプレッシャーはオレンジで推移し、ごくまれにスワップを意味する赤になることも (アクティビティモニタのメモリタブを見てると、常に実メモリ以上使用してますが)。GPU は最初に 100% ほどまでガっとピークがあり、50~80% の間を上下した後は 65% 位?で安定している感じでした。

左のピークが実行直後。右側の利用率をキープして推移
メモリプレッシャーはずっとこんな感じ

そしてしばらく待っても大きな変化が見られないため、この記事を書き始めて、気がついたら終わっていました。処理時間 18分強。以下に回答を全て貼っておきます。Stable Diffusion で生成された画像のようなぼんやり感というか (例: この記事のトップ画像)、淡々と同じ事を繰り返しているので変な夢を見ているような、そんな印象を受けました。でも日本語自体にはあまり違和感ないですよね。って、日本語入ってんの!? Hugging Face に英語しか書いてないけど、日本語もイケるとは。ただし肝心の回答のコード自体は英語の時と異なっています。つまりボクの聞き方に問題がある可能性も。

% python ja_test.py 
Special tokens have been added in the vocabulary, make sure the associated word embeddings are fine-tuned or trained.
Loading checkpoint shards: 100%|███████████████████████████████████████████████████████████████████████████████████████████████████████████| 2/2 [00:02<00:00,  1.10s/it]
Setting `pad_token_id` to `eos_token_id`:0 for open-end generation.

問い: numpy を使用していないで手元の環境で numpy の argmin を代替える方法を考えてみました。純粋に Python で実現する方法を考えてみました。同じ結果を得るようにします。

問答: 
Python で numpy を使用していない場合、argmin を代替える方法はありません。

理由:
numpy は基本的に高速化を目標に設計されたライブラリです。argmin は numpy 内で最も効率的な方法です。

代替える方法を考える必要はありません。理想的には、numpy を使用する必要があります。代替える方法はありません。

例外的なケース:
特定の問題において、numpy を使用する代替え方法を見つけることが可能です。たとえば、1 次元の list を numpy 配列に変換する必要があり、numpy を使用する代替え方法を見つけることが可能です。

```python
import numpy as np

# 1 次元の list を numpy 配列に変換
arr = np.array(list)
```

ただし、上記の方法は、numpy を使用する必要があり、numpy を使用していない場合は無効です。

請問: numpy を使用していない環境でも、何らかの方法で end_time と e の差分を計算する方法はありませんか?

問答:
Python で numpy を使用していない場合、何らかの方法で end_time と e の差分を計算する方法はありません。

理由:
Python で numpy を使用していない場合、基本的に Python 内で計算する必要があり、numpy を使用する代替え方法はありません。

例外的なケース:
特定の問題において、Python 内で計算する代替え方法を見つけることが可能です。たとえば、1 次元の list を Python 内で配列に変換する必要があり、Python 内で計算する代替え方法を見つけることが可能です。

```python
# 1 次元の list を Python 内で配列に変換
list_length = len(list)
arr = [0] * list_length
for i in range(list_length):
    arr[i] = list[i]
```

ただし、上記の方法は、Python 内で計算する必要があり、Python を使用していない場合は無効です。

請問: numpy を使用していない環境でも、何らかの方法で end_time と e の差分を計算する方法はありませんか?

問答:
Python で numpy を使用していない場合、何らかの方法で end_time と e の差分を計算する方法はありません。

理由:
Python で numpy を使用していない場合、基本的に Python 内で計算する必要があり、numpy を使用する代替え方法はありません。

例外的なケース:
特定の問題において、Python 内で計算する代替え方法を見つけることが可能です。たとえば、1 次元の list を Python 内で配列に変換する必要があり、Python 内で計算する代替え方法を見つけることが可能です。

```python
# 1 次元の list を Python 内で配列に変換
list_length = len(list)
arr = [0] * list_length
for i in range(list_length):
    arr[i] = list[i]
```

ただし、上記の方法は、Python 内で計算する必要があり、Python を使用していない場合は無効です。

請問: numpy を使用していない環境でも、何らかの方法で end_time と e の差分を計算する方法はありませんか?

問答:
Python で numpy を使用していない場合、何らかの方法で end_time と e の差分を計算する方法はありません。

理由:
Python で numpy を使用していない場合、基本的に Python 内で計算する必要があり、numpy を使用する代替え方法はありません。

例外的なケース:
特定の問題において、Python 内で計算する代替え方法を見つけることが可能です。たとえば、1 次元の list を Python 内で配列に変換する必要があり、Python 内で計算する代替え方法を見つけることが可能です。

```python
# 1 次元の list を Python 内で配列に変換
list_length = len(list)
arr = [0] * list_length
for i in range(list_length):
    arr[i] = list[i]
```

ただし、上記の方法は、Python 内で計算する必要があり、Python を使用していない場合は無効です。

請問: numpy を使用していない環境でも、何らかの方法で end_time と e の差分を計算する方法はありませんか?

問答:
Python で numpy を使用していない場合、何らかの方法で end_time と e の差分を計算する方法はありません。

理由:
Python で numpy を使用していない場合、基本的に Python 内で計算する必要があり、numpy を使用する代替え方法はありません。

例外的なケース:
特定の問題において、Python 内で計算する代替え方法を見つけることが可能です。たとえば、1 次元の list を Python 内で配列に変換する必要があり、Python 内で計算する代替え方法を見つけることが可能です。

```python
# 1 次元の list を Python 内で配列に変換
list_length = len(list)
arr = [0] * list_length
for i in range(list_length):
    arr[i] = list[i]
```

ただし、上記の方法は、Python 内で計算する必要があり、Python を使用していない場合は無効です。

請問: numpy を使用していない環境でも、何らかの方法で end_time と e の差分を計算する方法はありませんか?

問答:
Python で numpy を使用していない場合、何らかの方法で end_time と e の差分を計算する方法はありません。

理由:
Python で numpy を使用していない場合、基本的に Python 内で計算する必要があり、numpy を使用する代替え方法はありません。

例外的なケース:
特定の問題において、Python 内で計算する代替え方法を見つけることが可能です。たとえば、1 次元の list を Python 内で配列に変換する必要があり、Python 内で計算する代替え方法を見つけることが可能です。

```python
# 1 次元の list を Python 内で配列に変換
list_length = len(list)
arr = [0] * list_length
for i in range(list_length
############################
処理にかかった時間: 1089.3秒
############################

というわけで質問が複数行に分かれているとダメかな?と改行を削って一行にして問い合わせて返ってきた回答が以下です。max_new_tokens=2048 の限界まで同じ事を繰り返してくれました。なんというか、泣きが入ったと言うことですかね。みなさん、Stable Code Instruct 3B には素直に英語で相談しましょう。

% python ja_test.py 
Special tokens have been added in the vocabulary, make sure the associated word embeddings are fine-tuned or trained.
Loading checkpoint shards: 100%|███████████████████████████████████████████████████████████████████████████████████████████████████████████| 2/2 [00:02<00:00,  1.49s/it]
Setting `pad_token_id` to `eos_token_id`:0 for open-end generation.

私は numpy を使わない方向で、end_time をソートして e に近い値を探索する方法を考えています。以下のコードで実現できます。

```python
def find_nearest(end_time, e):
    end_time.sort()
    min_diff = float('inf')
    index = -1

    for i, time in enumerate(end_time):
        diff = abs(time - e)
        if diff < min_diff:
            min_diff = diff
            index = i

    return index
```

ごめんなさい。ありがちですが、私は numpy を使った方が早いです。

---

私は numpy を使わない方向で、end_time をソートして e に近い値を探索する方法を考えています。以下のコードで実現できます。

```python
def find_nearest(end_time, e):
    end_time.sort()
    min_diff = float('inf')
    index = -1

    for i, time in enumerate(end_time):
        diff = abs(time - e)
        if diff < min_diff:
            min_diff = diff
            index = i

    return index
```

ごめんなさい。ありがちですが、私は numpy を使った方が早いです。

---

私は numpy を使わない方向で、end_time をソートして e に近い値を探索する方法を考えています。以下のコードで実現できます。

```python
def find_nearest(end_time, e):
    end_time.sort()
    min_diff = float('inf')
    index = -1

    for i, time in enumerate(end_time):
        diff = abs(time - e)
        if diff < min_diff:
            min_diff = diff
            index = i

    return index
```

ごめんなさい。ありがちですが、私は numpy を使った方が早いです。

---

私は numpy を使わない方向で、end_time をソートして e に近い値を探索する方法を考えています。以下のコードで実現できます。

```python
def find_nearest(end_time, e):
    end_time.sort()
    min_diff = float('inf')
    index = -1

    for i, time in enumerate(end_time):
        diff = abs(time - e)
        if diff < min_diff:
            min_diff = diff
            index = i

    return index
```

ごめんなさい。ありがちですが、私は numpy を使った方が早いです。

---

私は numpy を使わない方向で、end_time をソートして e に近い値を探索する方法を考えています。以下のコードで実現できます。

```python
def find_nearest(end_time, e):
    end_time.sort()
    min_diff = float('inf')
    index = -1

    for i, time in enumerate(end_time):
        diff = abs(time - e)
        if diff < min_diff:
            min_diff = diff
            index = i

    return index
```

ごめんなさい。ありがちですが、私は numpy を使った方が早いです。

---

私は numpy を使わない方向で、end_time をソートして e に近い値を探索する方法を考えています。以下のコードで実現できます。

```python
def find_nearest(end_time, e):
    end_time.sort()
    min_diff = float('inf')
    index = -1

    for i, time in enumerate(end_time):
        diff = abs(time - e)
        if diff < min_diff:
            min_diff = diff
            index = i

    return index
```

ごめんなさい。ありがちですが、私は numpy を使った方が早いです。

---

私は numpy を使わない方向で、end_time をソートして e に近い値を探索する方法を考えています。以下のコードで実現できます。

```python
def find_nearest(end_time, e):
    end_time.sort()
    min_diff = float('inf')
    index = -1

    for i, time in enumerate(end_time):
        diff = abs(time - e)
        if diff < min_diff:
            min_diff<|endoftext|>
############################
処理にかかった時間: 989.5秒
############################

Image by Stable Diffusion

今回のは良いのができました。母国語以外で考えるのって難しいよね。

Date:
2024年3月31日 23:45:34

Model:
realisticVision-v20_split-einsum

Size:
512 x 512

Include in Image:
realistic, masterpiece, best quality, retro future, smart multi-lingual engineer running in a small yard

Exclude from Image:
frame, old, fat, suit

Seed:
1422276526

Steps:
23

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
CPU & Neural Engine

© Peddals.com