ollama voicevox 3jsでAIアバターを喋らせる

Transcript

1. ollama + voicevox + 3jsでAI アバターを喋らせる
2. 自己紹介 • YMN (45) • フリーランスです • Elixir歴 5年ぐらい • 2年前にくも膜下出血で脳を手術してます (前世は2023/9/27まで) ◦ 後遺症で失語症があります ▪ その為発音が変です • 主に関わったElixirのPJ ◦ Bright　（スキルを可視化） https://app.bright-fun.org ▪ グラフ描画全般 ◦ CodeLingo　（AIを使った教材作成）https://app.codelingo.tech ▪ インフラ（Azure）とAI連携のライブラリー作成 　
4. 構成（詳し内容は次ページから） 今回の本体 Elixir AI Ollama テキスト読み上げ Voicevox 　音声再生コマンド aplay ブラウザ 　3D表示（3js） 文字入 力 ① ② ③ ④ これを作った当時はUbuntu 24.04
5. Ollamaとは • 無料で使えるAIです • ローカルでも動きます • モデルが軽ければ、CPUのみでも動作が可能です • もちろんGPUで動かした方が高速で動作します https://ollama.com/
6. ElixirからOllamaを使うには • Ollamaというライブラリーを使います • 実際にライブラリーのページで確認します https://hexdocs.pm/ollama/Ollama.html
7. 今回使ったAIモデル • AIモデルとは AIモデルは、コンピューターがたくさんのデータからルールやパターンを学び、それを使って新しい問題に答えたり、何かを予測したりする • gemma3:1b-it-qat ◦ Googleが作ったモデルです ◦ 1.1億パラメータ　 ▪ この数値が大きいと賢いです ◦ 量子化　 ▪ 軽量で動作が軽いです、結果の精度は犠牲にしてます ▪ モデルによってはCPUでも動きます https://ollama.com/library/gemma3
8. Voicevoxとは • 無料で使える中品質なテキスト読み上げ・歌声合成ソフト ウェア • 実際にVoicevoxページで確認します https://voicevox.hiroshiba.jp/
9. VoicevoxをElixirで使うには • VoicevoxのAPIを叩くだけです ◦ audio_queryで音声合成用のクエリを作成する ◦ synthesis音声合成する ◦ 上記をReqでAPIをhttp postで呼ぶ ◦ 音声をOS付属のコマンドaplayで再生 ▪ 本来はブラウザーで直接再生できます https://voicevox.github.io/voicevox_engine/api/ https://hexdocs.pm/req/readme.html
10. three.jsとは • JSでブラウザーを使って3Dを描画できます ◦ シーン（Scene）　 ▪ 撮影セットになります、その中には • 3Dモデルを設置 ◦ 今回はアバターを表示されてます ◦ アバターはVroidStudio ◦ VRM形式を使用する • カメラを設置 • 照明を設置 https://threejs.org/manual/#ja/fundamentals https://vroid.com/studio
11. Elixirでthree.jsを使うには • 力技で頑張る ◦ hookを使う ◦ ライブラリーを自作する 以上　今回はAI会なので詳細は省略 時間があったらソースコードを元に説明 DevelopGameXコミニティーの会で触れることがあります https://dgx.connpass.com/
12. 実際にソースを見ましょう ソース • Git ◦ https://github.com/ymn-t-yamanashi/eli • メインロジック ◦ https://github.com/ymn-t-yamanashi/eli/blob/main/lib/eli_web/live/eli.ex • Voicevox ◦ https://github.com/ymn-t-yamanashi/eli/blob/main/lib/speak.ex • 3jsオレオレライブラリー ◦ https://github.com/ymn-t-yamanashi/eli/blob/main/lib/eli_web/live/cg_helper.ex ◦ https://github.com/ymn-t-yamanashi/eli/blob/main/assets/js/three.js サンプル動画 https://www.youtube.com/watch?v=A50WzTWCLok 終わり