AIの会話相手作る。 - ユミニーエの足跡

ChatGPTのAPIとVOICEVOXのAPI使って音声認識でお話しするアプリケーションを作る。
私はプログラミングはできないので、全部ChatGPTにやらせます。

要件定義をすれば勝手に作ってくれるので、任せました。

要件定義:

Webページ上でChatGPTと対話する機能を実装する。
ユーザーは音声認識を開始・終了できるボタンを提供する。
ユーザーはテキスト入力欄にメッセージを入力し、送信ボタンを押すことでChatGPTにメッセージを送信できる。
ChatGPTの応答はWebページ上に表示される。
ChatGPTの応答に基づいて、VOICEVOXを使用して音声合成を行う。

これだけでは、指示不足だったので、いくつか資料を見ながら適宜こうして欲しいとか指示を入れて理想に近づくまで試行錯誤します。根気があれば知識が0でも出来ると思いますが、知識がある人がChatGPTを使えばすぐにできると思います。

私が参考にした資料様
完成したコード
まとめ
1. 関連

私が参考にした資料様

ChatGPTにギルガメッシュ王の人格を与えるには？

ChatGPTにギルガメッシュ王の人格を与えるには？｜深津貴之 (fladdict)

ChatGPTに、キャラクターを演じさせるにはどうすればいいか？色々と実験をしてまとめてみました。以下、fladdict式の人格インストールフォーマット。以下は、古代メソポタミアはウルクを支配する、尊大な英雄王ギルガメッシュとしての、人格注入です。チャットGPTに以下のようなプロンプトを入力します。あなたは...

完成したコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <main>
      <h2>ChatGPTとお話</h2>
      <p>
        <a href="https://platform.openai.com/docs/guides/chat"
          >API ドキュメント</a
        ><br />
        OpenAI で API キーを発行してソースコードに埋め込んでください
      </p>
      <button type="button" class="start">音声認識開始</button>
      <button type="button" class="stop">終了</button>
      <div class="output"></div>
      <div class="input-container">
        <textarea id="user-input" rows="4" cols="50"></textarea>
        <button type="button" class="send">送信</button>
      </div>
    </main>
    <script>
      const recognition = new webkitSpeechRecognition();
      recognition.lang = "ja";
      recognition.continuous = true;
      recognition.interimResults = true;

      recognition.addEventListener("result", (event) => {
        const transcript = Array.from(event.results)
          .map((result) => result[0].transcript)
          .join("");

        const output = document.querySelector(".output");
        output.textContent = "音声認識結果: " + transcript;

        const userInput = document.querySelector("#user-input");
        userInput.value = transcript;
      });

      recognition.addEventListener("end", () => {
        const userInput = document.querySelector("#user-input");
        userInput.value = "";
      });

      const startButton = document.querySelector(".start");
      startButton.addEventListener("click", () => {
        recognition.start();
      });

      const stopButton = document.querySelector(".stop");
      stopButton.addEventListener("click", () => {
        recognition.stop();
      });

      const sendButton = document.querySelector(".send");
      sendButton.addEventListener("click", async () => {
        const userInput = document.querySelector("#user-input");
        const inputText = userInput.value;
        const response = await sendMessage(inputText);
        const output = document.querySelector(".output");
        output.textContent = "ChatGPT: " + response.data.choices[0].message.content;

        // VOICEVOXの音声合成
        await createAudio(response.data.choices[0].message.content);

        userInput.value = ""; // テキスト欄をクリア
        recognition.stop(); // 音声認識を終了する
      });

      async function sendMessage(text) {
        const messages = [
          {
            role: "system",
            content: "You: " + text,
          },
          {
            role: "user",
            content: text,
          },
        ];

        const payload = {
          model: "gpt-3.5-turbo",
          max_tokens: 100,
          messages: messages,
        };

        try {
          const response = await axios.post(
            "https://api.openai.com/v1/chat/completions",
            payload,
            {
              headers: {
                Authorization: "Bearer ここにOenAPIキーをコピペ", // ご自身のOpenAI APIキーに置き換えてください
                "Content-Type": "application/json",
              },
            }
          );

          return response;
        } catch (error) {
          console.error("Error:", error);
        }
      }

      // VOICEVOXの音声合成部分
      async function createAudio(text) {
        const data = await createVoice(text);
        const audio = document.createElement("audio");
        audio.src = URL.createObjectURL(data);
        audio.play();
      }

      async function createQuery(text) {
        const response = await axios.post(
          "http://localhost:50021/audio_query?speaker=2&text=" + encodeURIComponent(text)
        );
        return response.data;
      }

      async function createVoice(text) {
        const query = await createQuery(text);
        const response = await axios.post(
          "http://localhost:50021/synthesis?speaker=1",
          query,
          { responseType: "blob" }
        );
        return response.data;
      }
    </script>
  </body>
</html>

使い方はメモ帳を開いてコードをコピペして、拡張子をhtmlに変えれば動作しました。

まとめ

コードを完成させるまでに2日かかりましたが、本職のプログラマーならすぐに作成できると思いました。私は今ニートで時間があったのでプログラミング知識０でもわからないし部分をChatGPTに聞いたり検索すればだれでも一定の能力が手に入る時代になったなぁと完成して思いました。
複雑な物でも構造を細かく分解して理解するのが大切だなと学べたので面白かったです。

私が参考にした資料様

完成したコード

まとめ

関連

コメント