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

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

Avatar for ymn ymn
September 23, 2025
49

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 終わり