見出し画像

ChatGPTの回答を萌えキャラ声で返すwebアプリの作り方

神海LAB

さて今回は遊びツールです。
ChatGPTは文章で返してきますが、その文章を萌えキャラ音声で返してくれるというやつ。

遊びではあるけど、ちゃんと作り込めば顧客対応とかに使えたりするので是非チャレンジしてほしい。

使用する言語はPHP

ページのデザインとか、クリックした時の動作などで、html、javascriptも使います。

ファイルは2つある。画面構成のファイルと、AjaxでOpenAIとVOICEVOXのAPIを読み込む用のファイル

# openai.php

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <title>Document</title>
</head>

<body>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-8">
        <input type="text" class="form-control" id="inputText" value="今日の天気を教えて">
        <audio id="myAudio">
          <source src="" type="audio/mpeg">
        </audio>
      </div>
      <div class="col-4">
        <button class="btn btn-success" id="question">質問</button>
      </div>
    </div>
    <div class="row" id="replay"></div>

  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    //キーワード入力のところでEnterをクリックしたら検索ボタン
    $('#inputText').keypress(function (ev) {
      if ((ev.which && ev.which === 13) || (ev.keyCode && ev.keyCode === 13)) {
        $('#question').click();
        $('#inputText').focus().select();
        return false;
      }
    });

    $(document).on('click', '#question', function () {
      $("#question").text('読み込み中...');
      $.post('replay.php', {
        text: $('#inputText').val()
      }, function (rs) {
        $("#question").text('質問');

        var dt = JSON.parse(rs);
        console.log(dt);

        var replay = dt['choices'][0]['text'];

        $('#replay').html(replay.replace(/\n/g, '<br />'));
        $('#myAudio source').attr('src', 'https://api.su-shiki.com/v2/voicevox/audio/?text=' + replay + '&key={voicevoxのAPIキー}')
        var audio = document.getElementById("myAudio");
        audio.load();
        audio.play();
      });

    })

  </script>


</body>

</html>


# replay.php

<?php

$token = "sk-********";

$url = "https://api.openai.com/v1/completions";

$headers = array(
    "Content-Type: application/json",
    "Authorization: Bearer " . $token
);

$post_data = array(
    'model' => "text-davinci-003",
    'prompt' => $_POST['text'],
    "max_tokens" => 4000,
    "temperature" => 0
);


$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLINFO_HEADER_OUT, true); //ヘッダーを表示する
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); ////レスポンスを表示するか
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); //リダイレクト
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //SSL対応

//POST
curl_setopt($ch, CURLOPT_POST, true);
#データの配列を設定する
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($post_data));

//ヘッダー
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
curl_setopt($ch, CURLOPT_TIMEOUT, 20); //timeout in seconds

$html = curl_exec($ch);

$rs = json_decode($html, true);

echo json_encode($rs);


この記事が気に入ったらサポートをしてみませんか？