ブラウザ上でLive2Dモデルと話したい with Cubism SDK for Web

はじめに

作りたいもの

ブラウザ上でLive2Dモデルとチャットで会話できるサイト

ブラウザ上でLive2Dモデルを動かす

まずはデモを動かしてみる

公式チュートリアル通りに以下を行います

1. 公式サイトのCubism SDK for Webをダウンロードから取得したファイルをVScodeで開く
   
2. VScodeの拡張機能 EditorConfig for VS Code をインストール
3. ctrl+shift+P -> Tasks: Run Taskより、以下３つのタスクを順次実行
   1. npm: install – Samples/TypeScript/Demo
   2. npm: build – Samples/TypeScript/Demo
   3. npm: serve – Samples/TypeScript/Demo
4. http://localhost:5000/をブラウザで開く
   

用意したLive2Dモデルを動かす

ブラウザ上でチャットする

ローカルLLMを動かす

まずは、Ollama をダウンロード

zipを解凍して、appファイルを押下します

インストーラーが起動するので、進めます

その後、以下のようにコマンドが実行できればインストール完了です。

% ollama --version
ollama version is 0.1.33

Llama 3 を実行(初回のみダウンロード処理があります)

% ollama run llama3
pulling manifest 
pulling 00e1317cbf74...  34% ▕█████           ▏ 1.6 GB/4.7 GB   33 MB/s   1m31s

ダウンロードが完了すると

% ollama run llama3
pulling manifest 
pulling 00e1317cbf74... 100% ▕████████████████▏ 4.7 GB                         
pulling 4fa551d4f938... 100% ▕████████████████▏  12 KB                         
pulling 8ab4849b038c... 100% ▕████████████████▏  254 B                         
pulling 577073ffcc6c... 100% ▕████████████████▏  110 B                         
pulling ad1518640c43... 100% ▕████████████████▏  483 B                         
verifying sha256 digest 
writing manifest 
removing any unused layers 
success 
>>> Send a message (/? for help)

このような感じで会話ができるようになります。応答速度は即時~1s待ち という感覚

>>> hello!! ollama~~!
WOOHOOO!!! OLLAMA BACK ATCHA!!! How's it going, friend? Ready to chat and 
have some fun? I'm all ears (or should I say, all text?) for whatever's on
your mind!

日本語での応答も可能です

>>> あなたの趣味はなんですか
私の趣味はデータ分析に興じています。数学と論理を使用し、情報から意味を見つけ出すことが得意ですし、それによって多くの問題を解決する手助けを提供したいと私の趣味はデータ分析に興じています。

ollamaのデフォルトポート127.0.0.1:11434に対してPOSTを送信することで、APIサーバーを叩ける
ドキュメント：https://github.com/ollama/ollama/blob/main/docs/api.md

 % curl -X POST http://localhost:11434/api/generate -d '{
  "model": "llama3",
  "prompt":"Why is the sky blue?"
}'
{"model":"llama3","created_at":"2024-05-07T11:46:20.216318Z","response":"What","done":false}
{"model":"llama3","created_at":"2024-05-07T11:46:20.236319Z","response":" a","done":false}
{"model":"llama3","created_at":"2024-05-07T11:46:20.255694Z","response":" great","done":false}
{"model":"llama3","created_at":"2024-05-07T11:46:20.275539Z","response":" question","done":false}
{"model":"llama3","created_at":"2024-05-07T11:46:20.295118Z","response":"!\n\n","done":false}
{"model":"llama3","created_at":"2024-05-07T11:46:20.314856Z","response":"The","done":false}
...

ブラウザを仲介させる

送信ボタンや以下のようにEnterキー押下時に

  inputText.addEventListener('keydown', async (event: KeyboardEvent) => {
    if (event.key === 'Enter' && !isShiftPressed) {
      event.preventDefault();

以下のように、POSTすると、返答が返ってきます。
レスポンスは単語ごと、複数オブジェクトに入っているので、forなどで合体させましょう。

const response = await fetch('http://localhost:11434/api/generate', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        model: 'llama3',
        prompt: inputTextValue
    }),
});

ログ表示欄を設けていれば、最後に最下層までスクロールさせると見栄えが良いです。

logContainer.scrollTo({
    top: logContainer.scrollHeight,
    behavior: "smooth",
});

完成

参考

以下の記事を参考に進めました