Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ollama voicevox 3jsでAIアバターを喋らせる
Search
ymn
September 23, 2025
0
49
ollama voicevox 3jsでAIアバターを喋らせる
ymn
September 23, 2025
Tweet
Share
More Decks by ymn
See All by ymn
ElixirでローカルLLM+Difyを動かし、MCPが混ざると ….
ymn
0
55
piyopiyo.ex #1 Phoenix install 〜Hello,world! (Windows)
ymn
0
430
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Context Engineering - Making Every Token Count
addyosmani
7
270
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Pragmatic Product Professional
lauravandoore
36
6.9k
A designer walks into a library…
pauljervisheath
209
24k
For a Future-Friendly Web
brad_frost
180
10k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Gamification - CAS2011
davidbonilla
81
5.5k
Facilitating Awesome Meetings
lara
56
6.6k
Transcript
ollama + voicevox + 3jsでAI アバターを喋らせる
自己紹介 • YMN (45) • フリーランスです • Elixir歴 5年ぐらい •
2年前にくも膜下出血で脳を手術してます (前世は2023/9/27まで) ◦ 後遺症で失語症があります ▪ その為発音が変です • 主に関わったElixirのPJ ◦ Bright (スキルを可視化) https://app.bright-fun.org ▪ グラフ描画全般 ◦ CodeLingo (AIを使った教材作成)https://app.codelingo.tech ▪ インフラ(Azure)とAI連携のライブラリー作成
None
構成(詳し内容は次ページから) 今回の本体 Elixir AI Ollama テキスト読み上げ Voicevox 音声再生コマンド aplay ブラウザ
3D表示(3js) 文字入 力 ① ② ③ ④ これを作った当時はUbuntu 24.04
Ollamaとは • 無料で使えるAIです • ローカルでも動きます • モデルが軽ければ、CPUのみでも動作が可能です • もちろんGPUで動かした方が高速で動作します https://ollama.com/
ElixirからOllamaを使うには • Ollamaというライブラリーを使います • 実際にライブラリーのページで確認します https://hexdocs.pm/ollama/Ollama.html
今回使ったAIモデル • AIモデルとは AIモデルは、コンピューターがたくさんのデータからルールやパターンを学び、それを使って新しい問題に答えたり、何かを予測したりする • gemma3:1b-it-qat ◦ Googleが作ったモデルです ◦ 1.1億パラメータ
▪ この数値が大きいと賢いです ◦ 量子化 ▪ 軽量で動作が軽いです、結果の精度は犠牲にしてます ▪ モデルによってはCPUでも動きます https://ollama.com/library/gemma3
Voicevoxとは • 無料で使える中品質なテキスト読み上げ・歌声合成ソフト ウェア • 実際にVoicevoxページで確認します https://voicevox.hiroshiba.jp/
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
three.jsとは • JSでブラウザーを使って3Dを描画できます ◦ シーン(Scene) ▪ 撮影セットになります、その中には • 3Dモデルを設置 ◦
今回はアバターを表示されてます ◦ アバターはVroidStudio ◦ VRM形式を使用する • カメラを設置 • 照明を設置 https://threejs.org/manual/#ja/fundamentals https://vroid.com/studio
Elixirでthree.jsを使うには • 力技で頑張る ◦ hookを使う ◦ ライブラリーを自作する 以上 今回はAI会なので詳細は省略 時間があったらソースコードを元に説明 DevelopGameXコミニティーの会で触れることがあります
https://dgx.connpass.com/
実際にソースを見ましょう ソース • 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 終わり