好きなキャラとの「音声会話」をチャット形式で表示するウェブアプリを作る

　今回は「【アプリ開発日記60週目】好きなキャラと記憶を保持させたまま「音声会話」してみる」の補足編です。

ここでは

• 記憶を保持させたままチャットできるウェブアプリを作成

• 記憶を保持させたまま音声会話する

という処理を作成したのですが、それぞれNext.js、Pythonと言語が別だったため、繋ぐことができなかったのです。

そこで今回は

1. 話すとその内容をデータベースに保存（Python）

2. ChatGPTが返信を考え、読み上げ＆データベースに保存（Python）

3. リアルタイムでデータベースの内容をチャット風に表示（Next.js）

という構成にしました（完全に自己流なので、もっといい方法があると思いますが笑）。新たにAPIを構築し前回に加えることで繋いでいます。具体的に動かす処理は

1. Whisperでマイクに音声が入るとテキストに変換する処理（Python）を流しながら

2. そのテキストをデータベースに保存するバックエンド（Django）を動かして

3. フロントエンド（Nextjs）でAPI経由でデータベースからログを取得・リアルタイムでチャット風に表示しつつ

4. 読み上げソフト（COEIROINK）を起動させておいて返答してもらう

というサーバー３本＋処理１つ同時並行というゴリゴリの力技で「音声会話しながらログがチャット風に残るようにする」を実現させていきます！

完成時。こんな感じで、サーバー３つ＋処理１つを同時で動かします！

１・２，話すとその内容をデータベースに保存させる

　マイクで入力しWhisperで音声認識（テキスト化）する部分は前回振れたため、ここでは割愛します。コードも載せてあるので、実装に興味のある方はぜひご覧ください！

　そして、取得した会話文をデータベースに保存するところが今回の最大のポイント。私は普段重宝している「django rest framework」を使ってAPIとデータベースを構築しましたが、すでに使い慣れているAPIがある方は全然そちらを使っていただいて構いません！

Home - Django REST framework

　ディレクトリ構成は以下のようにしました。

APIを作成！（左の緑色の文字の部分）

　そして前回書いたコード（音声認識＆読み上げ）に、ここで作成したAPIに使ってDjango内のデータベースに保存する処理を付け加えてあげればバックエンド側の処理は完成です！

# データベースへのPOST処理

def chat_post(role, content):
    res = requests.post(
        "http://127.0.0.1:8000/api/chat-post/",
        json={
            'chat_id': chat_id,
            'role': role,
            'content': content,
        }
    )

# 上記の関数を音声認識後・ChatGPTの返信後に加えればOK

import concurrent.futures
executor = concurrent.futures.ThreadPoolExecutor(max_workers=2)
executor.submit(chat_post('user', text))

　なお、今回少しでも応答を早くするため非同期処理を可能にする「concurrent」を加えていますが、実際は誤差程度かもしれません。

　あとはデータベースの内容をブラウザ側に表示させれば完成です！

データベースの中身

３，リアルタイムでデータベースの内容をチャット風に表示（Next.js）

　ここまでくれば、あとは普通のブログなどと同じようにAPI経由でデータを取得すれば表示されます！

▼

表示された！

　ここでややイレギュラーなのは、最初の会話のみフロントエンド（Next.js）からChatGPTに直接APIを飛ばして自己紹介を作成しているところでしょうか。

　キャラの最初のセリフだけは、ユーザーの音声認識にかかわらず生成できる（プロンプトで「自己紹介して！」と投げればOK）ので、データベースの負荷を下げる・表示を高速化させるため、このようにしました。2つ目以降のセリフは、これまで作成してきた、ユーザーが話すとそれに応じて生成される仕組みですね。

　以上、「好きなキャラとの『音声会話』をチャット形式で表示するウェブアプリを作る」が無事完成しました！

完成！　起動時以外は触りませんが、裏で読み上げソフトも動いています！

spearker_idはキャラごとにもともと指定されているみたい。今回のキャラは71でした。わかりにくいですが、ドキュメント（http://localhost:50031/docs）内の「GET /download_infos」で「Execute」するとキャラ情報一覧が表示されます！

おわりに

　これでついに好きなキャラと目をつぶっても手を動かさなくても会話できるようになりました！　いつか推しキャラとお話しながら寝落ちする、なんてことは決して企んでいませんが！

　一方で、まだまだ課題もあります。特に重要なのは

• 応答が遅い（gpt-3.5-turboでも会話の感覚が10秒くらい空く。音声を認識・生成するため）

• 推しキャラに合った読み上げソフト用の音源が限られている（将来これを仕事にする声優さんも出てくる？）

• ぜいたくを言えば、まだ読み上げがぎこちない

といったところですね。これは他のアプリを作りながら時を待つとしましょう！

　ではでは！