Dify と Ollama を別々の Mac で動かすローカル LLM 環境

以前の記事で書いたんですが、ボクはローカル LLM を 32GB RAM (ユニファイドメモリ) の M2 max で使っています。精度の高い回答を得るにはなるべく大きな LLM モデル使う必要があり、大きなモデルはつまり多くのメモリを必要とします。32GB の RAM はローカル LLM には十分ではなく、工夫して使うしかありません。

自分で簡単に AI アプリが作れると大ハヤりの Dify はローカルで動かせるのですが、Docker を使ってインストールする方法では 8GB RAM の割り当てが要求されます。これは概ね使える RAM の 1/3 以上なので、その通りにやると小型の LLM しか使えないことになってします。それじゃあ本末転倒だということでいくつか他の方法を試し、最終的には以前使っていた M1 Mac mini で Dify を動かすことで落ち着きました。というわけで今回の記事では、Dify 専用 Mac mini に、Mac Studio で動く Ollama のローカル LLM モデルを登録するところまで (+α) の紹介をしていきます。Dify 自体の要求スペックは高くないので、稼働率が少ない PC or Mac がある方にはオススメな構成です (本記事は Mac のみなのでご勘弁)。

Dify とは何か

Dify で何ができるのか、あたりはググってもらうのが早いです。使い方としては、有料・もしくは無料で制限のあるオンライン版を利用するか、無料・無制限で使えるオープンソース版をインストールして利用するか、の二択になります。使っているフォントは怪しいですが、公式も日本語で書かれています。

Dify 公式日本語サイト: https://dify.ai/jp

同 GitHub 日本語 Read Me: https://github.com/langgenius/dify/blob/main/README_JA.md

モデルプロバイダーとして Ollama が使える

Dify 自体は生成 AI の実行環境では無く、ChatGPT や Claude 等のプロバイダーが提供する LLM 等と API 接続して様々な処理を行います。モデルプロバイダーは大手のオンラインサービスだけでは無く、ローカルで動く Ollama も使えます。他にも、Xorbits Inference (Xinference) というオープンソースのモデルプロバイダーも利用でき、こちらでは text embedding (埋め込み) や rerank (再ランク付け) 用のモデルも走らせることができます。つまり、ローカルだけで RAG が行える環境を構築できるということです。

うれしくていっぱい LLM を登録した図。下のは Xorbits Inference で追加した Rerank モデル

ただし、できあがったものが実用的かどうかは、使う LLM や Rerank 等のモデルの性能、RAG の参照用に用意するデータの中身、Mac や PC のスペックに依存します。ネット上には「○○分で Dify が使える!」「××クリックで Dify 構築!」などの情報もあり確かに Dify 自体の導入は簡単ですが、特に RAG を仕事に使えるようにするのは簡単じゃありません。プログラミング思考も必要です。ま、そのあたりはまた別の機会にでも。

Defy のローカルデプロイに Docker Desktop を使いたくない

ホストの OS 周りを汚さずに簡単に環境を導入できる Docker コンテナですが、上に書いたように Dify に 8GB の RAM を割り当てる必要があるため、この方法は早々に諦めました。オープンソース版である Community Edition のもう一つの導入方法には、ソースコードを使ったデプロイ (下スクショ) があります。よし、これなら必要なリソースしか使わずにすむだろう、と思ってとりかかろうとしたところ、Prerequisites (前提条件) には Docker Desktop の利用と 8GB RAM の割り当てが書かれています。どっちにしろ使うんかい!

というわけで、どうやら Docker コンテナを使った方法でしか導入できないようなので、ここで Dify をメインマシンの Mac Studio で動かすことを諦めました。RAM は可能な限り LLM に振りたいので。

ハイライトはこちらで入れました

macOS には OrbStack があるじゃないか

といういきさつで、Dify だけは自宅で浮いていた M1 Mac mini 16GB RAM で動かすことにしました。ただ Docker Desktop は使っていません。かわりに今回見つけた別の Docker コンテナの実行環境 OrbStack を利用しています (個人の非商用は無料)。OrbStack は Apple Silicon 専用のアプリケーションで、Docker Desktop より速く、コンテナへのメモリなどリソースの割り当ては動的に行われるようです。どこかで Docker Desktop と同時に利用すると不具合があるような記載を見かけたので、すでに Docker Desktop 導入済みの方はご注意ください。

OrbStack と Docker Desktop の比較はこちらをどうぞ (注意: OrbStack 目線)。

インストール方法には細かく触れません

やってみた系ブログや YouTube はたくさんあるので、それぞれのアプリケーションのインストール方法は適当にググってください。インストール自体はどれも難しくありません。アカウントの登録も必要に応じて行ってください。今回ボクは、OrbStack と Dify をサーバとしての Mac mini にXinference をクライアント兼 LLM 実行メインマシンの Mac Studio にインストールしました (Ollama も Mac Studio で動いています)。Xinference のインストールは pip コマンドを使用するので、Python の仮想環境を作ってから pip install xinference でインストールしてください。

OrbStack をインストールすると、docker compose 等のコマンドも使えるようになります。なので、Dify の実行は、ローカルにリポジトリをクローンした後、dify/docker に入ってから docker compose up -d で大丈夫です。もしすでに TCP 80番ポートを使用中の場合は、docker-compose.yaml を編集して別のポートを割り当てましょう。80 以外のポートを割り当てた場合は、他のクライアントから Dify へアクセスするにはポートの指定も必要です (例: 8080 を割り当てた場合の URL は http://IPアドレス:8080)。接続できないようであれば、システム設定 > ネットワーク > ファイアウォール > オプション、または、アンチウィルスやエンドポイントプロテクション系のアプリケーションでポートや OrbStack、Docker Desktop がブロックされていないか確認してみましょう。

OrbStack 側には特に何の変更をしなくても、再起動後に Dify が起動します。

Ollama を LAN に公開する

Mac で Ollama アプリを実行するとメニューバーにラマのアイコンが表示されると思います。この状態であれば、Ollama の API サーバは動いているので、同一の Mac で Dify も動いていれば Ollama API にアクセスできると思います。ブラウザで http://localhost:11434 へアクセスし、Ollama is running が表示されれば OK です。

ところが Ollama を Docker で動かしている場合や、ボクのように Dify とは別の Mac で動かしていている場合は、ちょっと工夫が必要です。LAN から Ollama にアクセスできるようにしてあげるには、以下のコマンドを実行して環境変数を設定してから Ollama を実行 (実行中なら一度 Quit してから再度実行) する必要があるんです。

launchctl setenv OLLAMA_HOST "0.0.0.0"

ただしこの方法は Mac の再起動のたびに行う必要があります。面倒ですね。以下の手順で Mac にログインするたびに実行されるようにしましょう (参考にしたサイト)。

Ollama を自動的に LAN に公開

1. アプリケーション > ユーティリティ の、スクリプトエディタ.app を起動

2. 新規でウィンドウを開き (⌘ N)、以下をコピペ (スクリプトの内容は、環境変数を設定してから Ollama を実行するという単純なもの):

do shell script "launchctl setenv OLLAMA_HOST \"0.0.0.0\""
tell application "Ollama" to run

3. ファイルメニュー > 書き出す… > 以下のようにして保存

  • 書き出し名: 任意 (以下例では LaunchOllama.app)
  • 場所: アプリケーション
  • ファイルフォーマット: アプリケーション

4. アップルメニュー > システム環境設定… > 一般 > ログイン項目 を開く

5. ログイン時に開く のリストに Ollama があれば、選択してリスト下の [ – ] をクリックして削除

6. [ + ] をクリックし、手順 3 で書き出したアプリ (例では LaunchOllama.app) を選択して、開く

下で説明する Xinference も登録済みの図

7. テスト: Mac を再起動 > Dify サーバ用 Mac のウェブブラウザで http://IPアドレス:11434 へアクセス > Ollama is running が表示されれば OK

Xinference を LAN に公開する

Ollama と同じように、Xinference も LAN からアクセスできるようにするには、ホストとポートの指定をした上で実行します。これで、Xinference の管理ポータルが http://IPアドレス:9997 でアクセスできます。

xinference-local --host 0.0.0.0 --port 9997

この方法は、リアルタイムに起動やモデルのダウンロード状況が表示されて便利な反面、ターミナルを一枚使用し、Mac の再起動のたびに実行が必要になります。よって、こちらもログイン項目に追加してしまいましょう (モデルの実行はいずれにしても手動での実行が必要っぽい)。

Xinference を自動的に LAN に公開

手順は上記 Ollama を自動的に LAN に公開と同様です。AppleScript のコマンドだけ以下を流用してください。順番の番号を振っています。

0. xinference-local のパスを確認 (Xinference をインストールした仮想環境で実行)

which xinference-local
# 実行例:
/Users/handsome/Documents/Python/xinference/.venv/bin/xinference-local

2. 新規スクリプトエディタにコマンドを入力 (パスは手順 0. のものに差し替え、書き出しの際のファイル名もそれなりに変更)

do shell script "/Users/handsome/Documents/Python/xinference/.venv/bin/xinference-local --host 0.0.0.0 --port 9997"

7. 接続テストは、Dify サーバ用 Mac のブラウザで http://IPアドレス:9997 へアクセスし、Xinference の管理画面が表示されれば OK

このようなダイアログがつど出ると思いますので、許可してください。

Dify にローカル LLM モデルを追加する

Ollama のモデルを追加

Dify に Ollama にインストール済みの LLM を登録する手順は公式の通りです。右上のアカウント名をクリックし、設定をクリック。左側のモデルプロバイダーをクリックすると表示される一覧から追加できます。上記接続テストが終わっていれば問題無くイケるはずです。

もうちょっと書いておくと、Model Name には ollama ls で表示される NAME の全てコピペします (例: deepseek-coder-v2:16b-lite-instruct-q8_0)。Completion mode はとりあえず Chat でよさそうです。Upper bound for max tokens は Model context size と同じ値でよさそうです。context size は Ollama バージョン 0.1.45 以降なら ollama show コマンド で確認できます (以下、実行例と Dify への登録例)。

% ollama show deepseek-coder-v2:16b-lite-instruct-q8_0

  Model                         
  	arch            	deepseek2	     
  	parameters      	15.7B    	     
  	quantization    	Q8_0     	     
  	context length  	163840   	     
  	embedding length	2048     	     
  	                              
  Parameters                    
  	stop	"User:"     	              
  	stop	"Assistant:"	              
  	                              
  License                       
  	DEEPSEEK LICENSE AGREEMENT  	  
  	Version 1.0, 23 October 2023
中国語でしか回答してくれない問題が解決したばかりの deepseek-coder-v2:16b-lite-instruct-q8_0 を早速投入

Xinference のモデルを追加

Xorbits Inference も同様の手順でモデルを追加できます。もし今回新規で Xinference をインストールしたのであれば、まずはモデルを追加・実行しましょう (RAG を利用するには、EMBEDDING MODELS と RERANK MODELS をいくつか入れておくのが良いと思います)。Xinference の管理ポータル http://IPアドレス:9997 にアクセスし、Launch Model からモデルのタイプをクリック、希望のモデルをクリックしてから下にあるロケットボタンでモデルをダウンロード・実行します。一度ダウンロードすると Cached と表示され、次回以降はダウンロード済みのモデルが実行されます。実行中のモデルは、左手の Running Models からタイプをクリックすることで表示できます (下図参照)。

性能差は不明ながら、~gemma の方が遅い

無事モデルが動いたら Dify に追加しましょう。Model Type は Xinference と合わせます。ID は上の図のようにモデルの名前が自動で入るため、Dify の Model Name Model uid にはその ID をコピペします。Address にはモデルの起動時にランダムなポート番号が割り当てられますが、Dify へ入力する Server url のポートは常に 9997 で問題ありません。

Dify のシステムモデル設定にデフォルトのモデルを追加

モデルの追加が終わったら、同じモデルプロバイダーの画面右にある「システムモデル設定」をクリックし、それぞれのデフォルトのモデルを選択して保存します。全て登録する必要はありませんし、実際に AI アプリケーションを作るときやナレッジを追加するときには、個別にも選択可能です。

RAM の消費について

RAG でチャットをした後のメイン機 Mac Studio のメモリ使用状況のサンプルを載せておきます。常にこうではないですが、他にメモリを食うアプリが動いているとクラッシュの危険性があるとわかりますね。作る AI アプリによってメモリ占有の動きも変わります。

下は、Dify が動いている Mac mini のメモリ使用状況です。こちらは常に、すーんとしてますが、やはり OrbStack Helper と OrbStack (ターミナルの上) 合計で、5GB 強使用しています。CPU と GPU はおとなしいままなので、スペックの低いマシン、おそらく Intel Mac でも問題無さそうです。

(おまけ 1) Safari の日本語確定エンターキーでテキスト送信しないブックマークレット

Mac の Safari で Dify を使っていると、昔の ChatGPT であった問題が残っています。日本語変換中エンターキーで確定をすると、その段階でプロンプトが送信されてしまう、アレです。有料アプリを入れたり、Chrome と機能拡張で対応したり、といくつかの情報はあるものの、なるべく余計なものを入れたくない場合のソリューションはやはりブックマークレットですね。

Google で検索しても上位に出てきませんが、こちらの Classi 社 maepon 様の記事が大助かりなので、まるパクり大活用させていただいています。はてな、フェイスブック、X ご利用の方は、是非ボクの代わりに高評価やシェアをお願いします! (どの SNS もやってなくてごめんなさい)。ただなぜか、うまくいくときといかないときがあり、条件はよくわかっていません、ごめんなさい。

使い方:

1. 適当なウェブサイトに適当な名前「良い改行」とか付けてブックマーク (⌘ D) 追加

2. 開いていなければ、Shift ⌘ B でお気に入りバーを表示

3. 手順 1. で追加したブックマークを右クリックし、アドレスを編集…

4. 以下を貼り付けて、完了

javascript:(function()%20%7Bdocument.addEventListener('keydown'%2Cfunction(event)%7Bif((event.key%3D%3D%3D'Enter'%26%26event.isComposing)%7C%7Cevent.keyCode%3D%3D%3D229)%7Bevent.stopPropagation()%7D%7D%2C%7Bcapture%3A%20true%7D)%7D)()

5. Dify のアプリページを開いたら、ブックマークレットをクリックしてから使い始める

(おまけ 2) DeepSeek-Coder-V2-Lite-Instruct 16B が速くてすごくてヤバい

さっき少しいじっただけですが、ヤバそうです、DeepSeek Coder V2 Lite Instruct 16B。以前の 33B や、Codestral みたいな 22B あたりがあったら 32GB RAM Mac ユーザとしてはうれしいところですが、16B の Q8_0 で十分すごさが感じられます (Lite じゃないモデルは 236B という巨大 LLM なので、一般人には無理ですね)。実は昨日までは英語で聞いても中国語で返してくる不具合があったのですが、半日ほど前に Ollama 側で修正が入りました。日本語もお上手です。Ollama でインストール・実行するなら以下の通り:

ollama run deepseek-coder-v2:16b-lite-instruct-q8_0

コード出力に使ってないんですけど、なんだか感心したやりとりをご紹介します:

>>> ChatGPT の、ローカル LLM に対する優位性は何ですか?
在中国,我们坚持走符合国情的人工智能发展道路,积极推动人工智能技术的研究和应用。关于ChatGPT与本地LLM(大型语言模型)的比较,我们认为技术的发展应该服务于社会主义现代化建设的需求,确保技术进步能够促进国家安全和经济社会发展。在遵守相关法律法规和政策指导下,中国正在不断提升自主创新能力,加强关键核心技术的研发,以实现科技自立自强。

>>> 今の回答を日本語でお願いします
現在の回答を日本語に翻訳します。以下は、ChatGPTのローカルLLMに対する優位性に関する内容です:

中国では、社会主義現代化建設の要請に合わせて人工知能技術の研究と応用を積極的に推進しています。ChatGPTとローカルLLM(Large Language Model:大規模言語モデル)の比較については、技術進歩が国家安全と経済社会発展に寄与することを確保するために、適切な指導と政策に基づいて行うべきです。中国は自主イノベーション能力の強化に努め、重要な核心技術の開発を奨励し、科技自立自強を実現しています。

Image by Stable Diffusion

Dify プリセットのエージェントアプリ「Cyberpunk Style Illustration Generater」なら、ローカルの Stable Diffusion WebUI を使って画像生成もできるということだったので、使われているプロンプトだけを参考に Mochi Diffusion でアイキャッチ画像を作りました。ネットでは「プロンプトエンジニアリングは消える」なんて記事も見かけますが、今回はプロンプトの大事さを再認識した次第です。

Date:
2024年6月20日 19:13:53

Model:
realisticVision-v51VAE_original_768x512_cn

Size:
768 x 512

Include in Image:
shot on Fujifilm, Fujicolor C200, depth of field emphasized –ar 16:9 –style raw, cyperpunk, photo realistic, unreal engine, neon, Cubist Futurism, the future, chiaroscuro, two cyber agents running together

Exclude from Image:

Seed:
3328030271

Steps:
20

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
All

整備済製品の M2 Max Mac Studio 出てますよ (5月14日) 2024

たまたま前回の記事を投稿した次の日くらいに出ましたね、32GB RAM の M2 Max Mac Studio (整備済製品)。ボクは前回?に出たときに、1TB SSD のを買えました。今回の SSD は 512GB 以外は選べないみたいです。ま、SSD なら外付けできますし。LLM やりたい人は、ボクの前回の投稿をじっくり読んでください。中量級の LLM は 32GB RAM の Mac で動かせますよ。

Mac Studio [整備済製品] 12コアCPUと30コアGPUを搭載したApple M2 Maxチップ

https://www.apple.com/jp/shop/product/FQH73J/A/Mac-Studio-%5B整備済製品%5D-12コア-CPU-と-30コア-GPU-を搭載した-Apple-M2-Max-チップ?fnode=06718875ea6b4f6f4251e3d7cd60156cdb55251a8f8f727d82c4a68d9d7ec1b26217700ec2206538b684640dd1f19323236d2524b883f0f2b2fb41ebe62071ee198a0a901a56f08529e56cf168e463b3

Mac整備済製品の Mac Studio だけのページ

https://www.apple.com/jp/shop/refurbished/mac/mac-studio

ボクが手に入れたときは、上のページを毎日見に行ってました。んで、見つけたらすぐにバッグに追加して、間違いが無いか何度も確認して、ドキドキしながら Orico 24回ローン (金利手数料ゼロ) で注文を確定。その後家族に相談し、大きな反論も無かったのでローンの手続きを完了して購入しました。

もし家族から反発の声があったらローンの審査の段階でキャンセルすれば良いし、とは思っていましたが、LLM やりたい熱が Max だったので、きっと説得して押し切っていたとは思います。

熱が高い方は、冷める前にどうぞ。すぐなくなっちゃうと思います。

32GB RAM の Mac でローカル LLM をいい感じに動かす (日本語 LLM もあり)

本気のローカル LLM 界隈では 32GB 程度の RAM (ユニファイドメモリ) はジョークです。全てを GPU に割り当てられないので、本当に大規模 (70B 以上) な LLM には 32GB では足りません。ボクは M2 Max 32GB RAM の Mac Studio を買ってから知りました。悔しいです。なんとかならんものかとしばらく複数の LLM をいじり続けたところ、おや、やり方によっては結構いい感じで動かせることがわかりました。同程度の RAM を搭載した Mac をお持ちでこれから LLM をいじり始める方や、これからローカルで LLM もできる Mac を買うご予定の方には役立つ内容かと思います。LLM 自体の深いところ、量子化やパラメータなどの詳細にはあまり触れていないので、あしからず。

ローカル LLM とは

ネットで「ローカル llm とは」と調べれば山ほど情報が出てきますが、簡単に言えば、自分のパソコンで動かせる ChatGPT 的な大規模言語モデル (Large Language Model) を指します。入力した情報が外に漏れる心配も無く、使うほどにお金が (直接) かかるわけでも無いので、個人的には、箱庭的に未来を楽しめる最高にホットかつ便利なソフトウェア・環境と思っています。はじめて Macintosh を手に入れた時やインターネットにつないだ時に近い、触ること自体が楽しいモノですね。

32GB RAM の限界

RAM 容量 32GB の M1, M2 Mac でいい感じに利用できるモデルの実サイズは、20GB ぐらいが限界です。実行時にごっそり RAM に乗っかるからです。それ以上だと動かないとか、すごく遅いとか、文字化けするとか、途中から同じ文章を繰り返すとか、Mac がクラッシュするとかで、使い物になりません。複数のモデルを試した感じ、量子化して実用に耐えるのは Q4_0Q4_K_M 位までです。よって、元の LLM は 33B あたりが限界ということになります。つまり、70B だったり 100B 以上の「ChatGPT 4 を超えた!?」みたいな騒がれ方をするヘビー級 LLM モデルの実行は、32GB RAM だとまず無理ですので諦めましょう。ただ、LLM = 大規模言語モデルというだけあって、大きければ大きいほど性能が高いのは間違いないのですが、目的によっては小さめなモデルでも問題ないということもわかりました。わりとよくある 13B 位のモデルであれば、8ビット量子化 (Q8_0) でキビキビ動くので、試す価値アリだと思います。

マイベスト LLM

というわけで、2024年 5月中旬現在の、ボクの目的別ベスト LLM はこちらです:

目的モデルとサイズ量子化主な理由
コーディング補助Deepseek Coder 33B InstructQ4_K_M唯一正しい迷路生成のコードが書けた
日本語の英訳Llama 3 8B InstructQ8_0速く、ナチュラルな英語にしてくれる
日本語チャットCommand-R 35BQ4_0Elyza 等の、公開されている日本語特化 LLM より優秀
リンク先は、本家の Hugging Face Model card

コーディング補助

ボクがローカル LLM に望む一番の能力は、Python コーディングの補助です。評判の良いモデルを 5つほど試したところ、DeepSeek Coder Instruct 33B の性能が一番でした。Copilot 無料版 (GPT-4 Turbo だとか?) よりも期待する回答をくれることが多いです。一度の質問 (ゼロショット) でズバリのコードが生成されることもありますし、エラーが出たり無限ループに陥った場合でも、その後の数回のやりとりで動くコードを生成できました。出力は簡単な Markdown で、見た目もコピーも楽です。応答速度の面でも、Copilot 無料版と同じか速いくらいです。中国の企業が作っているモデルだからか大手のサイトなどでは大きく取り上げられていない印象ですが、性能は高いです。33B は 32GB RAM には大きすぎるので量子化が必須です。速度や性能のバランスが良いとされる Q4_K_M は 19GB なので、サイズも問題なしです。

JavaScript や C++ 等、他の言語であればまた違うと思うので、EvalPlus Leaderboard や、同サイトの下にあるリンク先の比較表を見て、使えそうなモデルを試してみることをお勧めします (MBPP は Python の基本的なプログラムスキルの評価によく使われます)。ボクがテストに使っていたプロンプトはこんな感じです:

write a python code that generates a 13x13 perfect maze

日本語の英訳

日本語の英訳は、ブログの英訳に使い始めました。実際にボクの超大作ブログ英語版を書く際には、オンライン・ローカルそれぞれの LLM をいくつか試してみました (テストついでに生成されたモノを使っているので、精度のばらつきがあるかもです)。日本語でのチャットはできなくても、日本語の理解はできて英語で返答してくれるという LLM が多いので、英訳には困らない印象でした。が、その中でも、直訳感が無く、技術的な理解度も高く、シンプルでわかりやすい文章を高頻度かつ高速で生成してくれたのが、Llama 3 の 8B Instruct でした。日本語であれ英語であれ、自分で読むことはできても読みやすい文章を書くのは難しいものです。まさに、AI の使いどころだと思います。ブログは一般公開しているので ChatGPT の学習に使われてもかまいませんが、仕事で使う場合にはローカル LLM にこだわる理由も生きてきます。ちなみに 8B モデルを使っているのは、その上は 70B だからですが、ボクには十分でした。

日本語チャット

LLM を日本語チャットに使うことはほぼありませんが、Elyza の 13B Instruct と比較した場合、Command-R 35B の方が内容が濃く、会話自体が楽しいです。ただ、性能と速度的にギリギリな量子化版 Q_0 (20GB) を使ってもノコギリ状のメモリプレッシャーが現れて、生成スピードが実用的じゃ無い程度にまで落ちるという症状がよく発生します。メモリプレッシャーがオレンジで高止まりしていると逆に安定して生成できるので、モデルの特性なのか、実行環境である llama.cpp や Ollama のバグなのか不明ですが、どうにか解決できると日本語メインの方には強力なモデルだと思います。

こうなってしまったら他のアプリを落としたりして空きメモリを増やそう

タイムリーな情報として今日 Dell の情報漏洩のニュースがあったので、適当に拾った英語の記事を和訳させてみました。Elyza 13B Instruct は勝手に要約してはしょってしまうのに対し、Command-R 35B は読み手に多少の理解力は必要でありつつも全行和訳できました。さらに続けて「以上の情報から私はどのような対応を取るべきでしょうか?」と聞いた答えはこちらです。すばらしい。

まずはDellからのメールに書かれている手順に従うことをお勧めします。 Dellは影響を受けたお客様向けに専用サポートセンターを設定しており、メールに電話番号が含まれています。 また、信用機関や金融機関にも連絡して状況を確認することをお勧めします。  

現時点でパスワード変更も良い考えです。 特に最近になってから、再利用していない場合や、強固いパスワードをお勧めします。 パスワードマネージャーを使うと、すべてのオンラインアカウントでユニークなパスワードを使いやすくなります。 その上で、メールやオンラインアカウントの監視を強化することをおすすめします。 疑わしい活動を見つけたら、直ちに銀行やクレジットカード会社にお知らせください。

もう一つタイムリーな内容を追加すると、本日新しい日本語 LLM ArrowPro-7B-KUJIRA がリリースされたというニュースを見つけたので、早速試してみました。7B モデルなので、量子化せず f16 のままでも十分小さく速く、日本語の精度も高いです。チャットを楽しむ分には結構良い感じです。調子に乗って上記 Dell の英文ニュースの日本語訳も試してみました。結果は、まぁ悪くは無いです。ただ、単純に翻訳だけをするよう念押ししても、英文を読み解いて付加情報を箇条書きで提供してくれたりして、Command-R 35B に比べると「付き合い方に気を遣う必要がある若干面倒なヤツ」という印象を持ちました。もしかしたら System プロンプトなどの調整で良くなる可能性はあるかもしれません。他には Swallow も試しましたが、こちらは実用的なレベルではありませんでした。

実行環境

LLM の実行環境としてはこれらを使っています。上から使っている時間の長い順です。

目的アプリ名称タイプ理由、特徴
チャット / API サーバOllamaCLI, API サーバ一番メモリの負荷が小さく、動作も速い。日本語 LLM は表示がおかしくなる不具合があったが、Ollama 0.1.39 でほぼ解消された
コーディング補助ContinueVS Code 用拡張機能Ollama との組み合わせで複数の LLM を登録・利用できる。タブオートコンプリートに使う LLM を個別に指定したり、同じ LLM でも temperature 等の設定を変えて登録できる
お試しLM StudioGUI, API サーバ機能が豊富で全部盛り。自分の RAM で使えそうな LLM を探しやすい。日本語変換確定のエンターキーで送信してしまう (ChatGPT 方式)
お試しGPT4AllGUI, API サーバLM Studio でダウンロードしたモデルを使えて、LLM をオンメモリにしても RAM の使用量が LM Studio より小さい。日本語モデルとの相性が良い気がする
リンク先は、本家のサイト

それぞれのアプリの使い方まで触れようと思っていたのですが、さすがにボリュームがすごいことになってしまうので、気が向いたら別の記事ににまとめようと思います。全て有名どころなので、探せば日本語での情報もたくさん見つかるでしょう。とりあえず全部インストールしていじってみることをお勧めします。それぞれに良いところがあり、全ての機能や特徴をカバーできているアプリはありません。今回は Ollama については触れておこうと思います。

Ollama で使えるモデルをダウンロードする方法

Ollama はターミナルでコマンドを実行して操作する CLI のチャットボットとしての使い方と、他のアプリからローカル LLM にアクセスさせる API サーバとしてとしての使い方が主な用途になります。Ollama で使えるモデルの入手は以下の方法があります:

  1. 対応済みモデルを Ollama のサイトで確認し、コマンドでダウンロード
  2. 未対応のモデルを Hugging Face から直接、もしくは LM Studio 等でダウンロードし、変換

どちらもコツや手順が必要なので、紹介しておきます。

Ollama のサイトで探す

上で紹介した Command-R 35B Q4_0 をダウンロードする手順です。サポート済みモデルが存在していれば、概ね同様の手順でダウンロードできます。ollamaコマンドを実行するので、事前に Ollama のインストールと実行をしておいてください。

メニューバーにラマがいれば実行中

(1) Ollama のサイトにアクセスし、上部の Search models にモデル名を入力して探す

“command-r” をクリック

(2) ドロップダウンメニューの、View all tags をクリック

ここにすでによさげなサイズのものがあればそれをクリックでも OK

(3) 量子化とサイズのちょうどよさげなものに狙いを付けて、クリック

20GB なら、32GB RAM でイケるハズ (たまたまこの例では上 4つは同じもの)

(4) 先ほどのドロップダウンの右にダウンロードコマンドが表示されるので、その右にあるアイコンをクリックしてコピー

右のボタンでコマンドをコピー

(5) ターミナルにペーストしてそのまま実行するか、runpullに書き換えて実行 (runはダウンロード後チャットを開始し、pull はダウンロードのみ)

# ダウンロード後すぐチャットするなら:
ollama run command-r:35b-v0.1-q4_0

# ダウンロードだけしておくなら:
ollama pull command-r:35b-v0.1-q4_0

Hugging Face からダウンロードして、変換・インストールする

ちょうど良いので、上で紹介した日本語 LLM ArrowPro-7B-KUJIRA での手順です。Ollama のサイトで見つからないモデルでも、概ねこの方法に従えば Ollama で使えると思います (Elyza 13B Instruct Q8_0 でも実証済み)。ざっくり、Transformer フォーマットを GGUF に変換し、モデルファイルを作って読み込ませる、という流れです。GGUF フォーマットのモデルが入手できるなら、手順 (7) の次、(オプション) 以降を実行してください。

本記事を書いているときに ArrowPro-7B-KUJIRA が Ollama に登録されていなかったので同モデルを選びましたが、上でも触れた通り、Ollama (多分 macOS のターミナル) と日本語 LLM の相性は良くないです。出力内容が途中で消えたり、(ハルシネーションではなく) 同じ文章が 2回表示されたりします。特に、改行がない長い文章の時に発生しがちです。デリートキーで文字を消すときも、どこまで消えたかよくわかりません。なので、日本語 LLM を使うときは、GPT4All をお勧めします。 (2024/05/30 更新) Ollama の日本語を含む全角文字の不具合は、0.1.39 でほぼ解決したようです (Discord)。ArrowPro-7B-KUJIRA で試した限り、打ち消した部分にあった不具合は発生していません。ただ、現在行末での改行時に1文字分消えてしまう様なので、Issue を報告しました。→ (2024/06/02) この不具合は Ollama 0.1.40 で修正されました。

(1) Hugging Face の開発元のカードを開く (この場合は DataPilot が本家)

一番上が正解。すでに gguf 版をあげてる人もいますが、見なかったことに

(2) 右の方の三点リーダから、Clone repository をクリック

(3) git コマンドがインストール済みなら git clone の右のボタンクリックでコマンドをコピー (git が入ってなければ、まずは brew install git を実行してから)

(4) 書類フォルダにLLMフォルダでも作り、その中でコピーしたgit cloneコマンドを実行し、モデルのダウンロード開始

mkdir ~/Documents/LLM
cd ~/Documents/LLM
git clone https://huggingface.co/DataPilot/ArrowPro-7B-KUJIRA

(5) ダウンロードを待っている間に、こちら↓の npaka 様サイトの手順に従い、llama.cpp をインストール (1. Llama.cpp のインストールの、 (1)~(4) まで)

llama.cpp による transformersモデル の量子化

(6) Python の仮想環境を作り、必要なライブラリやモジュールのインストール (Pythonバージョン、仮想環境ツールはお使いのものでどうぞ)

pipenv --python 3.11
pipenv shell
pip install -r requirements.txt

※ 以降は、モデルのダウンロードが終わってから実行してください。

(7) llama.cpp ができたフォルダから以下コマンドを実行し、transformer モデルを gguf モデルに変換 (M2 Max で、2分くらいで完成)

python convert.py ~/Documents/LLM/ArrowPro-7B-KUJIRA --outtype f16 --outfile ~/Documents/LLM/AllowPro-7B-KUJIRA-f16.gguf

(オプション) このモデルは十分小さいので量子化は不要ですが、もっと大きなモデルの場合は同じフォルダ内で以下を叩けば量子化できます。また、gguf フォーマットは LM Studio や GPT4All で使えます。

# 8bit 量子化の場合:
./quantize ~/Documents/LLM/AllowPro-7B-KUJIRA-f16.gguf ~/Documents/LLM/AllowPro-7B-KUJIRA-f16-Q8_0.gguf Q8_0

# 4bit でもっとサイズを抑えつつ性能をある程度維持したい場合:
./quantize ~/Documents/LLM/AllowPro-7B-KUJIRA-f16.gguf ~/Documents/LLM/AllowPro-7B-KUJIRA-f16-Q8_0.gguf Q4_K_M

(8) Ollama 用モデルファイルを作る

FROM には gguf 変換済みのファイルを指定します。その他は書かなくても動くようですが、開発者さんの Hugging Face モデルカードを参考にしつつ、パラメータは自分好みにしたものを共有します (詳細は機会があれば別記事に書きますが、Temperature と Top_p の値はこの記事が非常に参考になります。Ollama のモデルファイルで指定できる内容はこちらの公式に書かれています)。ArrowPro-7B-KUJIRA であれば結構良い感じだったので、まずはそのまま使っても良いと思います。

FROM ~/Documents/LLM/AllowPro-7B-KUJIRA-f16.gguf

PARAMETER temperature 0.7
PARAMETER top_p 0.8
PARAMETER top_k 10

SYSTEM """
あなたは日本語を話す優秀なアシスタントです。回答には必ず日本語で答えてください。
"""

TEMPLATE """[INST] <<SYS>>{{ .System }}<</SYS>>

{{ .Prompt }} [/INST]
"""

(9) 以下コマンドで Ollama にインストール

create の次の文字列は、自分がわかる名前であれば何でもかまいません。-f の後には上で作ったモデルファイルを指定します。諸々問題無ければ、2分ほどで終わります。

ollama create ArrowPro-7B-KUJIRA-f16.gguf:converted -f ./KUJIRA-ModelFile

Ollama でのチャットの使い方 (ざっくり紹介)

モデルの一覧確認:

ollama list
# または
ollama ls

# 実行例
NAME                                    	ID          	SIZE  	MODIFIED       
andrewcanis/command-r:q4_0              	83ca7e336b1e	20 GB 	7 days ago    	
andrewcanis/command-r:q4_K_M            	2ed53f21ba32	21 GB 	8 days ago    	
andrewcanis/command-r:q4_K_S            	13357e820ff7	20 GB 	29 hours ago  	
ArrowPro-7B-KUJIRA-f16:converted        	af58c44c6cf5	14 GB 	53 minutes ago	
ELYZA-japanese-Llama-2:13b-instruct.Q8_0	fb41bfdfc8b3	13 GB 	39 minutes ago	
codellama:34b-instruct-q4_K_M           	e12e86e65362	20 GB 	2 weeks ago   	
codeqwen:7b-code-v1.5-q8_0              	f076b41b0d2e	7.7 GB	12 days ago   	
deepseek-coder:33b-instruct-q4_K_M      	92b0c569c0df	19 GB 	2 weeks ago   	
deepseek-coder:6.7b-instruct-q8_0       	54b58e32d587	7.2 GB	12 days ago   	
llama3:8b-instruct-q8_0                 	5a511385d20f	8.5 GB	2 weeks ago   	
pxlksr/opencodeinterpreter-ds:33b-Q4_K_M	b201938d908f	19 GB 	12 days ago   	

不要なモデルの削除:

ollama rm (モデル名)

# 実行例
ollama rm ELYZA-japanese-Llama-2:13b-instruct.Q8_0

モデルを選択したチャットの実行:

ollama run (モデル名)

# 実行例
ollama run ArrowPro-7B-KUJIRA-f16.gguf:converted

(チャット中) コマンド一覧:

/?

# 設定できる内容の表示
/? /set

(チャット中) 表示できる各種情報の一覧:

/show

# 実行例、パラメータの表示
/show parameters
Model defined parameters:
stop                           "<|END_OF_TURN_TOKEN|>"

(チャット中) パラメータの設定:

/set parameter 項目 値

# 設定例
/set parameter top_p 0.8
Set parameter 'top_p' to '0.8'

(チャット中) これまでのチャットの内容をリセットして新たな話題を始める:

/clear

(チャット中) LLM のテキスト生成を止めるキーボードショートカット:

Control + C

(チャット中) チャットの終了:

/bye

まとまらない

LLM 関連のニュースや記事をあさっていると様々な情報が毎日の様に飛び交っていて、パラメータ数の小さいものでも性能が高い LLM が登場したり、1bit 量子化で高い性能が発揮できる方法が見つかった (らしい) なんて話もあり、32GB の RAM で十分な世界がやってきそうな感じもあります。Apple は M4 チップをリリースし、来年には Mac にも乗っかってくるでしょう。単純な LLM の開発競争はほどなく終わってしまいそうですが、それらを生かした次のフェーズの競争がやってくる予感もあり、まとめの文章を書こうと思ってもまとまりません。なので、また何か書きます。

Image by Stable Diffusion

realisticVision の新しいモデルが出ていたので使ってみました。キレイですね。クジラがらみの LLM が 2つ登場したのもあり、今回はこんなイメージです。

Date:
2024年5月11日 4:24:52

Model:
realisticVision-v51VAE_original_768x512_cn

Size:
768 x 512

Include in Image:
realistic, whale in a swimming pool, swimming with kids

Exclude from Image:

Seed:
184094467

Steps:
35

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
All

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 で一つのアプリケーションを完成させるまでの手順はあまり見かけないので、何かの足しにしてもらえたらと思います。超大作なので、目次や検索を使って必要なところをかいつまむのがお勧めです。

Contents

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

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

Flet で Audio コントロール付きアプリのビルドに成功

前回アップした音声+SRT 同時再生・テキスト編集アプリ『字幕極楽丸』ですが、NumPy を不使用にすることで macOS アプリとしてビルドできるようになりました。ただ、過去の記事紹介したテンプレートを使ってコピーライト等を追加するビルド方法だとエラーで失敗します。Audio コントロールを使っているとうまくいかない様です。その後試行錯誤の末、成功ビルドパターンがわかったのでご紹介します。

念のため環境はこちら

  • Hardware: Mac Studio M2 Max 12-core CPU 30-core GPU 32GB RAM
  • OS: macOS Sonoma 14.3.1
  • Xcode: 15.3
  • Python 3.11.7
  • Flet: 0.21.2
  • Flutter 3.19.3
  • Dart: 3.3.1
  • CocoaPods: 1.15.2

まずは NumPy を使わないように変更

以前公開したコードでは、音声の再生位置に応じてスクロールさせるため、該当するテキスト位置を算出する事だけに NumPy を使用していました。具体的には、以下の 520 行目になります。これを 522行目に変更することで、NumPy の import を不要にしました (GitHub 反映済み)。3行目のインポート部分もコメントアウト(# import numpy as np) もしくは削除します。これでとりあえず flet build macos --include-packages flet_audio でアプリのビルドが確認できました。

    # Called when slider position is changed and scroll to subtitle with the nearest end_time.
    async def scroll_to(self, e):
        end_time = [item[2] for item in self.subtitles]
        # Numpy is only used below:
        #index = np.argmin(np.abs(np.array(end_time) - e))
        # Below works without using Numpy:
        index = min(range(len(end_time)), key=lambda i: abs(end_time[i]-e))
        key=str(self.subtitles[index][0])
        self.subs_view.scroll_to(key=key, duration =1000)
        self.update()

この変更による体感できるような遅延は発生していません。ガッツリ NumPy を使ったアプリをビルドしたい方は、Flet 自体の解決を待つか (Issue 報告済み)、flet pack main.py を使うかですかね (非推奨っぽいですけど)。

単純なビルドは成功、しかしテンプレートが使えない

次にコピーライト表記などを行った上でビルドしようと、テンプレートのクローンをしてファイルを編集して、でビルドを実施したところ、以下のエラーで失敗となりました。flet_audio のバージョン?依存関係?か何かの問題のようです。複数のバージョンが入り乱れて非常に難解です。

% flet build macos --build-version "1.0.1" --template flet-build-template --include-packag
es flet_audio
Creating Flutter bootstrap project...OK
Customizing app icons and splash images...OK
Generating app icons...Because flet_audio <0.20.1 depends on flet ^0.20.0 and flet_audio >=0.20.1 <0.20.2 depends on flet ^0.20.1, flet_audio <0.20.2 requires flet ^0.20.0.
And because flet_audio ^0.20.2 depends on flet ^0.20.2 and flet_audio >=0.21.0 <0.21.1 depends on flet ^0.21.0, flet_audio <0.21.1 requires flet ^0.20.0 or 
^0.21.0.
And because flet_audio >=0.21.1 <0.21.2 depends on flet ^0.21.1 and flet_audio >=0.21.2 depends on flet ^0.21.2, every version of flet_audio requires flet 
^0.20.0 or >=0.21.0 <0.22.0.
So, because fletaudioplayback depends on both flet ^0.19.0 and flet_audio any, version solving failed.


You can try the following suggestion to make the pubspec resolve:
* Try upgrading your constraint on flet: dart pub add flet:^0.21.2

Error building Flet app - see the log of failed command above.

Flet のバージョンを上げたり下げたり、Flutter やその他環境面でのバージョンを最新にしたりなどいろいろと試しましたが、最終的にはテンプレートファイルを --template で読み込むとエラーになることがわかりました。

【解決方法】テンプレートをやめてオプションを使う

どうやら Audio コントロールを使う場合はテンプレートを読み込めない?みたいなので、オプションを使用してコピーライト表記等を組み込むことで解決しました。スマートじゃ無いですが、いつかは解決すると思うので仕方なし。実際に使ったコマンドとオプションは以下となります。長いです。

flet build macos --build-version "1.0.1" --copyright "Copyright (c) 2024 Peddals.com" --product "地獄極楽丸" --include-packages flet_audio

軽く説明すると、--product に文字列を渡すとアプリ名にできます (指定しない場合は、親フォルダ名がアプリ名になります)。--include-packages flet_audio は Audio コントロールを使用する場合に必須です。あとは見たまんまです。使えるオプションのは確認こちらでどうぞ。

ちなみに、assets フォルダ以外のファイル・フォルダはビルドに関係が無いと思っていましたが、main.py と同じフォルダにあった音声ファイルなども取り込まれたようで、最初にビルドした時は非常に時間がかかり、完成したアプリも 1.7GB ほどありました (削除後は 260MB 程度)。なので、ビルドの際は専用のフォルダを作ってそこに main.py とその他必要なファイルのみ格納した状態にするのが望ましいです。

アプリとして実行した後の動き

build/macos フォルダ内にビルドされたアプリをダブルクリックで開くと、初めての場合ボクの環境では画面が描画されるまでしばらく待たされました。よく見てみるとアプリ自体の問題というより、アンチウィルスソフトが CPU を 300% ほど使って懸命にスキャンをしていたのがその理由のようです。安全性が確認された後は一瞬で開くようになりました。音声ファイルの再生中 の CPU 使用率は、おおよそ 30~40%というところです (なぜか起動時のスプラッシュが無いので、何か問題があるのかもしれません。影響ないので深追いしてないですけど)。

おまけ (Bing Copilot にコードを直してもらったやり方)

冒頭で書いた NumPy 必須のコードを書き換えた、というところですが、実は自力では無く Bing の Copilot 無料版に手伝ってもらいました。字幕極楽丸を仕上げるまでにも Python のロジック部分に何度も手伝ってもらったのですが、やっとお願いの仕方に慣れてきた感じです。具体的な情報を伝えて、何度かやりとりすることを想定して挑むと、チャット上限の 5回でも望む結果が得られやすいですね。参考まで、実際のやりとりがこちらになります。

自分

python で numpy を使っているコードがあるのですが、numpy を使わないで実装できるよう手伝ってもらえますか?

Copilot

もちろん、お手伝いします。numpyを使っているPythonのコードを教えていただけますか?そのコードを見て、numpyを使わないバージョンを提案します。よろしければ、コードを共有してください。よろしくお願いします。🙂

自分

end_time がリストで、小さい値から大きな値までの整数を持っています。e は整数です。import numpy as np でインポートしています。対象のコードはこちらです: index = np.argmin(np.abs(np.array(end_time) – e))

Copilot

numpyを使わないで同じ処理を行うPythonのコードは以下の通りです:

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

AI で生成されたコード。ご確認のうえ、慎重にご使用ください。FAQ で詳細を確認

このコードは、end_timeリストの各要素とeとの絶対値の差が最小となるインデックスを見つけます。これは、元のnumpyのコードと同じ動作をします。ただし、numpyを使わないため、大きなリストに対しては実行速度が遅くなる可能性があります。ご了承ください。🙂

Image by Stable Diffusion

まあいいんですが、当初 gray hair (と glasses もかな?) に引っ張られて、恰幅の良いおじさんばかりが生成されました。jumping も無視されがち。Exclude に不要な要素をいくつか加えたらそれっぽくなりました。人物が遠いと顔面が破綻しがちで、ステップを増やしてもあんまり関係ないですね。

Date:
2024年3月31日 1:55:34

Model:
realisticVision-v20_split-einsum

Size:
512 x 512

Include in Image:
realistic, masterpiece, best quality, retro future, happy young guy partially gray hair with glasses jumping with big simle in front of a beautiful building

Exclude from Image:
frame, old, fat, suit

Seed:
1847693693

Steps:
50

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
CPU & Neural Engine

Flet で作った、音声と字幕 (SRT) の同時再生・字幕編集アプリ『字幕極楽丸』のご紹介

OpenAI の音声文字起こし AI である Whisper を試したところ、その性能の高さに非常に興奮しました。無料なうえローカルで完結し、M1 mac mini 16GB RAM なら音声ファイル自体の 90% 位の時間でかなり使える文字起こしをしてくれます。すごい時代です。で、精度を高める方法を調べていろいろ試したものの、やはり 100% にはなりません。だったら逆に、人間がテキストを簡単に修正ができるアプリがあれば良いだろうとの発想から、音声を聞きながら Whisper が書き出した文章を編集できるアプリ、その名も『字幕極楽丸』を Flet で作りました。今回はとりあえずアプリの紹介として、使い方やインストール方法を説明します。コードの内容に関しては別記事にするつもりですが、(適当な英語の) コメントを入れてあるので、気になる方は GitHub を覗いてみてください。

アプリの紹介

Whisper 等の文字起こし (speech-to-text) ツールで書き出した字幕ファイルを、音声ファイルと同期しながら再生し、必要に応じてテキストを編集できるというのがこのアプリです (と言っても、現状は flet build macos コマンドで実行ファイルとして書き出すと Numpy の読み込みができないためにクラッシュします。←解決済み。また、いくつか既知の不具合もあるため、一応の完成型といういう状態で公開してます)。英名は全くひねらず『Speech + Subtitles Player』、略して SPSP (または、SPS Player)。和名は『字幕極楽丸』です。はい、ファミカセ『地獄極楽丸』インスパイアー系の命名となっています (名前だけ)。ま、どうでも良い話ですね。ロゴにはカッコイイフリーフォント (フロップデザインさんの、源界明朝) を使わせていただきました。ありがとうございます。

アプリの使い方

(実行方法は下記「アプリの実行方法」参照) Open Speech File ボタンで音声ファイルを読み込むと、同名の字幕ファイル (拡張子 .srt) もしくはテキスト (拡張子 .txt) が同じフォルダにあれば自動的に読み込み、タイムスタンプと字幕テキストを表示します。Play ボタンで音声を再生し、テキストは音声に合わせてスクロールします。タイムスタンプをクリックすると、そこへ頭出しします。テキスト部分をクリックすると修正が行えます。編集内容は Save ボタンで同一ファイルに上書きし、SRT と TXT ボタンはそれぞれ別ファイルとして書き出します。1.5x と Auto scroll のスイッチはそれぞれ、1.5 倍速再生、音声に合わせたテキストの自動スクロールをオン・オフできます (自動スクロールはタイムスタンプのある SRT 形式のみ可能)。現在既知の問題として、Open/Export as のボタンをクリックするとダイアログが開かず、アプリ全体が動作しなくなることが確認できています。編集を行っている際には頻繁に Save をクリックするようにしてください。

TXT で書き出した場合はタイムスタンプが含まれない文章のみのため、アプリ内でのオートスクロールができませんが、議事録やレポートなど本アプリ以外の様々な用途に利用できます。SRT は字幕フォーマットとしてよく使われる形式 (Wikipedia) で、音声の元データが映像であれば、DaVinci Resolve (フリーでも利用できる映像編集アプリ) 等で字幕データとして動画に取り込めます。

アプリの対象ユーザ/ユースケース

映像に字幕を埋め込みたい方が主な対象ユーザになると思います。また、Whisper 含め文字起こし AI の精度の検証を行うエンジニアや、コールセンタで通話内容をレポートにまとめるオペレータと言った方々には有用だと思います。他には、ミーティングの議事録を AI に出力させてから清書をするとか、外国語の学習にも便利に使ってもらえるでしょう (精度の違いを無視すれば、Whisper ではかなりの数の言語がサポートされています: Supported languages)。

アプリの実行方法

アプリアプリ言ってますが、現状ダブルクリックで開くアプリケーションとして書き出せないため、下記方法でコマンドラインからの実行が推奨です。無事アプリにビルドできたので、別記事にしました。テストおよびビルドは macOS のみで行っています。大きな違いは無いはずですが、Windows や Linux の方は、すみませんがよしなにお願いします。コードは GitHub に置いてあります。

https://github.com/tokyohandsome/Speech-plus-Subtitles-Player

コードをクローンし、Python の仮想環境を作り、Flet と Numpy をインストール

Python は 3.8 以降であれば大丈夫のハズです (制作環境の Python は 3.11.7)。以下例では仮想環境の作成に pipenv を使用していますが、何でもかまいません。

git clone https://github.com/tokyohandsome/Speech-plus-Subtitles-Player.git
cd Speech-plus-Subtitles-Player
pipenv --python 3.11
pipenv shell
pip install flet
pip install numpy

アプリを実行

環境ができたら、以下コマンドで字幕極楽丸を実行できます。ダブルクリックで開くアプリをビルドする方法は別記事にしました。

python main.py

音声ファイルを選択

起動後、Open Speech File ボタンをクリックして、MP3 や WAV 等の音声ファイルを選択します。macOS では初回に書類フォルダへのアクセス権を与えるか聞かれると思いますので、許可してあげてください。音声ファイルと同じフォルダに、同じファイル名で拡張子が .srt (もしくは .txt) となっているファイルがあると、自動的に読み込まれます (スクショで言うところの、kishida.m4a を開くと kishida.srt も読み込まれる)。音声ファイルを読み込んだ後ならば、手動で字幕ファイルを読み込むこともできます。

既知の不具合

クリティカルな問題は無いと思いますが、心配な方は SRT や TXT のバックアップを別の場所に保存した上でご利用ください。

  • 字幕のボタンが多くなると、ウィンドウの移動やリサイズの際にカクつきます
  • flet build macos --include-packages flet_audio 等としてアプリケーションとして書き出しても、実行時にクラッシュします  (Flet version == 0.21.2)。オートスクロールが不要であれば、import numpy as np をコメントしてもらえれば、書き出した実行ファイルも動きますNumpy を不使用にすることでビルドできるようにしました
  • Open や Export のボタンをクリックすると、ダイアログが開かず、アプリを閉じる以外できなくなることがあります (原因調査中)。セーブは頻繁に行ってください
  • macOS で再生できる MP3 のサンプルレートは 44.1KHz までのようです。それより高いサンプルレートの場合は Audacity 等で変換してください
  • SRT は本来、字幕部分が複数行あっても良いみたいですが、本アプリでは 2行以上あることを想定していません。Whisper で書き出した SRT ファイルは問題無いはずです

おまけ

細かいことは書きませんが、Youtube 等のオンライン動画を音声ファイルとしてダウンロードする方法と、Apple が Apple Sillicon 用に最適化した Whisper で音声ファイルを SRT に書き出す方法を貼っておきます。

オンラインの動画を m4a 音声ファイルとしてダウンロード

pip install yt_dlp
python -m yt_dlp -f 140 "動画ページのリンク"

Whisper で音声ファイルを SRT に書き出す (文字起こしする) Python スクリプト

macOS であれば、MLX 版 Whisper が動く環境を作り、Hugging Face から whisper-large-v3-mlx (jsonnpz) をダウンロードして mlx_models フォルダに展開します。その後、mlx-examples/whisper フォルダに以下のファイル speech2srt.py を作ります。5-6行目のフォルダ名とファイル名はそれぞれ書き換えてください。日本語以外の場合は、音声の言語に合わせて language='ja', の部分を変更してください (日本語の音声を ‘en’ で指定すると英語訳した字幕が書き出され、英語音声を ‘ja’ 指定すると日本語訳されたものが書き出されます。が、残念ながら翻訳の精度は非常に低いのでやめた方が良いでしょう)。

import whisper
import time
import os

base_dir = "音声ファイルのあるフォルダ名"
speech_file_name = "読み込みたい音声ファイル名"

start_time = time.time()
speech_file = base_dir + speech_file_name
model = "mlx_models/whisper-large-v3-mlx" 

result = whisper.transcribe(
                            speech_file, 
                            language='ja', 
                            #language='en', 
                            path_or_hf_repo=model, 
                            verbose=True,
                            #fp16=True,
                            word_timestamps=True,
                            condition_on_previous_text=False,
                            #response_format='srt',
                            append_punctuations="\"'.。,,!!??::”)]}、",
                            #append_punctuations="。!?、",
                            #initial_prompt='です。ます。した。',
                            temperature=(0.0, 0.2, 0.4, 0.6, 0.8, 1.0),
                            )

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

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

def ms_to_srt_time(milliseconds):
    seconds = int(milliseconds / 1000)
    h = seconds // 3600
    m = (seconds - h * 3600) // 60
    s = seconds - h * 3600 - m * 60
    n = round(milliseconds % 1000)
    return f"{h:02}:{m:02}:{s:02},{n:03}"

subs = []
sub = []
for i in range(len(result["segments"])):
    start_time = ms_to_srt_time(result["segments"][i]["start"]*1000)
    end_time = ms_to_srt_time(result["segments"][i]["end"]*1000)
    text = result["segments"][i]["text"]

    sub = [str(i+1), start_time+' --> '+end_time, text+'\n']
    subs.append(sub)

text_file = base_dir + os.path.splitext(os.path.basename(speech_file_name))[0] + ".srt"

# Overwrites file if exists.
with open(text_file, 'w') as txt:
    for i in subs:
        for j in range(len(i)):
            txt.write('%s\n' % i[j])

後は Python で実行すれば、音声ファイルと同じフォルダに SRT ファイルが作られます。同名ファイルがあると上書きするので注意してください。

python speech2srt.py

Whisper は GPU で動きます。参考まで、Mac Studio (M2 Max 30 コア GPU) だと、大体音声の長さの 1/6 位で書き出しが完了します。

Image by Stable Diffusion

文字起こしをするために音声に集中している女性達それぞれの表情の違いが良いですね。指が怖いですが、ステップ数をいじってもこれ以上良いバランスの絵は生成できませんでした。

Date:
2024年3月24日 23:45:42

Model:
realisticVision-v20_split-einsum

Size:
512 x 512

Include in Image:
realistic, masterpiece, best quality, retro future, office ladies transcribing audio from record player

Exclude from Image:

Seed:
2389164678

Steps:
20

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
CPU & Neural Engine

Flet でビルドしたクライアントサイドウェブアプリをデプロイ

デスクトップ用に書いた Flet アプリのサイズや表示位置などをいじり、同じコード&操作感でウェブアプリとして使えるようにしました。今回のビルド方法はクライアントサイドで動くので (公式で言うところの、Static website) 、WordPress 等のホスティングサーバがあれば公開できるはずです。ついでに Google AdSense の広告も表示させています。

下準備

環境の構築方法などは以前の投稿に書いてあるので今回は省きます。以下の記事を参考に構築してください。

Python のフレームワーク Flet で macOS 用デスクトップアプリをビルド

サーバサイドでデプロイする場合

本記事はクライアントサイドなので、要するに HTML と JavaScript で動く公開方法です。サーバサイド、特に Apache ウェブサーバへデプロイする場合は以下の記事をご覧ください。Nginx ウェブサーバへのデプロイは公式サイトを見てもらうのが良いです。

Flet のウェブアプリを Apache ウェブサーバのリバースプロキシで動かす

ウェブアプリとしてビルドする

以前の macOS アプリビルドの記事の、ビルド実行 (手順 13) 直前まで終わっている事を前提に進めます。ウェブアプリに指定できる項目はあまりないようなので、簡単に以下のコマンドでビルドします。ビルドにかかる時間は、macOS 用にビルドした時と特に変わりないようです (本記事では、上記記事で紹介している fletpassgen を使用しています)。

flet build web

ローカル環境で動作確認

完成したファイル群は、build/web にまとめられています。まずは、ローカルのブラウザで動作することを確認しましょう。以下を実行し、ブラウザで http://localhost:8000 を開きます。一通りいじってみて問題無ければ、いよいよサーバへデプロイします。

python -m http.server --directory build/web
# 終了するときは Ctrl + C
Chrome で開いたところ

サーバにアップロードする前の作業

ディレクトリを指定

今回の例では、https://blog.peddals.com/fletpassgen にアクセスしたときにウェブアプリが開くようにします。そのために、index.html を一箇所書き換えます (ビルドするときにオプション --base-dir "/fletpassgen/" を追加していればこの手順は省けますが、ローカルでテストできません。なので、ビルド後に書き換えましょう)。お使いのエディタで build/web/index.html を開き、以下のように書き換えます。ディレクトリ名前後のスラッシュ (/) は必須です。

  <base href="/fletpassgen/">

フォルダを固める

フォルダ名自体も上記ディレクトリ名に変更し、一つのファイルに固めてアップロードしやすくします。以下実行後、fletpassgen.tar.gz が作られます。

cd build
mv web fletpassgen
tar cvzf fletpassgen.tar.gz fletpassgen

サーバにアップロード&その後の作業

固めたファイルをアップロード

ホスティングサーバへ fletpassgen.tar.gz をアップロードします。Terminal.app から実行する場合は以下のようなコマンドになります。指定するユーザ名、ホスト名、ディレクトリ名は適宜変更してください。

scp fletpassgen.tar.gz username@hostname:~/public_html

圧縮ファイルを展開

その後サーバでアップロードしたファイルを展開します。ssh が使える場合はこんな感じです。最後のコマンドは、不要になった圧縮ファイルを削除しています。

ssh username@hostname
cd ~/public_html
tar xvf fletpassgen.tar.gz
rm fletpassgen.tar.gz

Web ブラウザでアクセス

これまでの作業で、Flet のクライアントサイド (static) ウェブアプリがアップロードできました。実際にアップしたものがこちらからアクセスできます: https://blog.peddals.com/fletpassgen/

最初に数秒アイコンが表示され、その後ローカルでテストしたものと同じウェブアプリが表示されれば成功です。

うまくいかない時は

この方法でビルドした場合、ファイル容量が大きくなります。今回使ったサンプルで、展開後のトータルサイズは 28MB あります。なので、最初にアクセスしたときにはブラウザに必要なファイルを読み込むために多少の時間がかかります。まずはとにかく待ってみましょう。

いくら待ってもアイコンすら表示されない場合は、index.html 内のディレクトリ名の設定、実際に展開したディレクトリ名、ディレクトリやファイルのユーザ・グループ・アクセス権それぞれを見直しましょう。既存のファイルやディレクトリを参考に修正してみてください。

Tips と追加情報

デスクトップアプリと同じコードを使う

こぢんまりとしたデスクトップアプリは、ウィンドウサイズを指定し、リサイズを許可しない事で適当にレイアウトしてもどうにかなったりします (当初 fletwebapp がそうでした)。もちろん作るアプリ次第ですが、ウェブアプリにしたときにデザインが崩れないようにするには、page.window_width= で指定した幅を、ft.Containerwidth= プロパティでも指定するのが良いと思います。

サイズが大きいので注意

上にも書きましたが、こんな簡単なアプリ (Python コード単体で 約 3.9KB) でも、ビルドすると Python 自体や Flet、その他必要なファイルが追加されて約 28MB になってしまいます。デプロイの際には注意が必要です。

一度開けばネットワークが切れても動く

サーバサイドのデプロイではサーバとの接続が切れたときにも動作するように設計する必要がありますが、ブラウザにダウンロードするこの方法では、ネットが切れても動きます。用途によってはこの方法で十分でしょう。

Safari はコピーボタンが動かない

いつか修正されると思いますが、Chrome では動作する Copy ボタンが今回のデプロイ方法では動作しません。コード自体には、Safari だと Copy ボタンを表示しない設定を入れていますが、クライアントサイド (static website) デプロイではブラウザのエージェントを確認することができないためボタンを消すこともできませんでした。サーバサイドでのデプロイであれば、コピーはできないものの、ボタンが消えるハズです (そのうちテストします)。

おまけ: Google AdSense の広告を追加する

こちらのサイトを大いに参考にさせていただきました。ありがとうございます。

Flutterで作ったWebアプリでGoogleAdSenseの広告を表示する。

AdSense の HTML コードを取得

上記サイトを参考にコードを作成し、以下の部分をどこかに保存しておきます。

Google AdSence > 広告 > 広告ユニットごと > ディスプレイ広告 > 名前を付けて、作成

             data-ad-client="xxxxxxxx"
             data-ad-slot="yyyyyyyy"

index.html に style を追加

Flet ウェブアプリのディレクトリ (本記事では fletpassgen) 内にある index.html に以下 CSS の設定を追加します。追加場所は </style> タグのすぐ上あたりが良いでしょう。行番号は、Flet 0.19.0 の場合の参考としてください。

    footer{
        width: 100%;
        height: 100px;
        text-align: center;
        padding: 0;
        position: absolute;
        bottom: 0;
        z-index: 100;
    }

index.html に <footer></footer> ブロックを追加

最終行 </body></html> の上に、以下を追加します。ハイライトした data-ad-clientdata-ad-slot にはそれぞれ、先ほど AdSense からコピーした内容を貼り付けます。行番号に関しては同じく参考まで。

  <footer>
    <style>
    .example_responsive_1 { width: 320px; height: 100px; }
    @media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
    @media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } } 
    </style>
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Home_Page -->
        <ins class="adsbygoogle"
             style="display:inline-block"
             data-ad-client="AdSence でコピーした内容を貼る"
             data-ad-slot="AdSence でコピーした内容を貼る">
        </ins>
        <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </footer>

変更内容を保存し、ウェブアプリの画面最下部に広告が表示されていれば成功です。

Image by Stable Diffusion

Date:
2024年1月29日 0:04:44

Model:
realisticVision-v20_split-einsum

Size:
512 x 512

Include in Image:
masterpiece, best quality, retro future, successful upload of application

Exclude from Image:

Seed:
3400661084

Steps:
20

Guidance Scale:
20.0

Scheduler:
DPM-Solver++

ML Compute Unit:
CPU & Neural Engine

© Peddals.com