Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
Avatar for ymn ymn
September 23, 2025
95

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

Avatar for ymn

ymn

September 23, 2025
Tweet

Transcript

  1. 自己紹介 • YMN (45) • フリーランスです • Elixir歴 5年ぐらい •

    2年前にくも膜下出血で脳を手術してます (前世は2023/9/27まで) ◦ 後遺症で失語症があります ▪ その為発音が変です • 主に関わったElixirのPJ ◦ Bright (スキルを可視化) https://app.bright-fun.org ▪ グラフ描画全般 ◦ CodeLingo (AIを使った教材作成)https://app.codelingo.tech ▪ インフラ(Azure)とAI連携のライブラリー作成  
  2. 今回使ったAIモデル • AIモデルとは AIモデルは、コンピューターがたくさんのデータからルールやパターンを学び、それを使って新しい問題に答えたり、何かを予測したりする • gemma3:1b-it-qat ◦ Googleが作ったモデルです ◦ 1.1億パラメータ 

    ▪ この数値が大きいと賢いです ◦ 量子化  ▪ 軽量で動作が軽いです、結果の精度は犠牲にしてます ▪ モデルによってはCPUでも動きます https://ollama.com/library/gemma3
  3. 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
  4. three.jsとは • JSでブラウザーを使って3Dを描画できます ◦ シーン(Scene)  ▪ 撮影セットになります、その中には • 3Dモデルを設置 ◦

    今回はアバターを表示されてます ◦ アバターはVroidStudio ◦ VRM形式を使用する • カメラを設置 • 照明を設置 https://threejs.org/manual/#ja/fundamentals https://vroid.com/studio
  5. 実際にソースを見ましょう ソース • 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 終わり