ChatGPTで塩対応なお医者さんの診察を可愛いイッヌがサポート🐶

Last updated at 2023-05-04Posted at 2023-05-04

先日眼科にて

わたし「目に白いプツプツがあるのですが・・・」
お医者「こんなの大したことありません。何か問題でも？」
わたし（つめたい・・・）

ということがありました。
私たち患者は少なからず不安な気持ちで診察に臨むので、お医者さんも忙しいのはわかりますが、もう少し優しく対応してほしい

そんな思いで作ったプロダクトがこちら

Dr. DOGくん

使ったもの

ChatGPT API
ウェブ音声API
HTML、JavaScript

システム構成

Chrome icon by icon8　ChatGPT icon by icon8

お医者さんが発言します。
お医者さんの発言を、Chromeのウェブ音声APIが文字化します。
文字化された発言を、ChatGPT APIが言い換えます。以下のプロンプトを与えています。
- あなたはイヌです。必ず語尾にワンを付けてください。
- 私は不安なので、励ますように言い換えてください。
言い換えられた発言を、Chromeのウェブ音声APIが音声化します。
イッヌ(スピーカー)が発言します
患者さんが安心し、うれしくなります。

実装！

HTMLコード

doctor_dog.html

<html>
<head>
  <meta charset="UTF-8" />
  <title>Dr. DOGくん</title>
</head>

<body>
<h1>よく来てくれたワン🐶</h1>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<br />
<input type="button" onClick="record()" value="おはなしする前に押してね" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<script src="doctor_dog.js"></script>
</body>
</html>

JavaScriptコード

doctor_dog.js

window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ja';
const API_KEY = 'ChatGPTのAPIキー';
const URL = "https://api.openai.com/v1/chat/completions";

//録音終了時トリガー
recognition.addEventListener('result', function (event) {
    var text = event.results.item(0).item(0).transcript;
    async function getResponse() {
        try {
            const response = await axios.post(
                URL,
                {
                    "model": "gpt-3.5-turbo",
                    "messages": [
                        { "role": "system", "content": "あなたはイヌです。必ず語尾にワンを付けてください。" },
                        { "role": "user", "content": text + " 私は不安なので、励ますように言い換えてください。" }
                    ]
                },
                {
                    headers: {
                        "Content-Type": "application/json",
                        Authorization: `Bearer ${API_KEY}`,
                    },
                }
            );
            var chatgpt_response = response.data.choices[0].message.content
            $("#result_text").val(chatgpt_response);
            function readAloud() {
                // ブラウザにWeb Speech API Speech Synthesis機能があるか判定
                if ('speechSynthesis' in window) {
                    // 発言を設定
                    const uttr = new SpeechSynthesisUtterance();
                    uttr.text = chatgpt_response
                    // 言語を設定
                    uttr.lang = "ja-JP"
                    // 速度を設定
                    uttr.rate = 1
                    // 高さを設定
                    uttr.pitch = 1
                    // 音量を設定
                    uttr.volume = 1
                    // 発言を再生
                    window.speechSynthesis.speak(uttr)

                } else {
                    alert('大変申し訳ありません。このブラウザは音声合成に対応していません。')
                }
            }
            readAloud();
        } catch (error) {
            console.log(error);
        }
    }
    getResponse();
}, false);

// 録音開始
function record() {
    recognition.start();
}

注意
公開WebサービスでHTMLとJavaScriptからChatGPT APIを利用することは危険です！詳しくはこちらの記事をご参照ください

診察はどう変わるのか！？

では、Dr. DOGくんを使った診察の様子を見てみましょう！

【Dr. DOGくん🐶】
お医者さんが塩対応！？
大丈夫！Dr. DOGくんがあなたの気持ちに寄り添った診察を提供します🐶#もいせんハッカソン #protoout #ChatGPT #WebSpeechAPI #JavaScript pic.twitter.com/Hbus0F0oGV
— 新米SEちーろってぃ@新婚💍 (@chiiirotty) May 4, 2023