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

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

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

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

## Dr. DOGくん:dog:
<img width="400" alt="doctor_dog.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/b90c79af-0fa6-a19e-f647-60e04f614c88.jpeg">

## 使ったもの
- ChatGPT API
- [ウェブ音声API](https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API)
- HTML、JavaScript

## システム構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/45ff66f1-66fa-1b48-b316-ef66819f2818.png)
[Chrome icon by icon8](https://icons8.jp/icon/63785/%E3%82%AF%E3%83%AD%E3%83%A0)　[ChatGPT icon by icon8](https://icons8.jp/icon/EzmQwT9W9uy4/chatgpt)

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

## 実装！

<details><summary>HTMLコード</summary>

```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>
```
</details>

<details><summary>JavaScriptコード</summary>

```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();
}
```
</details>

:::note warn
注意
**公開Webサービス**でHTMLとJavaScriptからChatGPT APIを利用することは**危険です**！詳しくは[こちらの記事](https://qiita.com/iwakatakagundan/items/370a92883f8579fc1380)をご参照ください:information_desk_person:
:::

## 診察はどう変わるのか！？
では、**Dr. DOGくん**を使った診察の様子を見てみましょう！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【Dr. DOGくん🐶】<br>お医者さんが塩対応！？<br>大丈夫！Dr. DOGくんがあなたの気持ちに寄り添った診察を提供します🐶<a href="https://twitter.com/hashtag/%E3%82%82%E3%81%84%E3%81%9B%E3%82%93%E3%83%8F%E3%83%83%E3%82%AB%E3%82%BD%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#もいせんハッカソン</a> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/ChatGPT?src=hash&amp;ref_src=twsrc%5Etfw">#ChatGPT</a> <a href="https://twitter.com/hashtag/WebSpeechAPI?src=hash&amp;ref_src=twsrc%5Etfw">#WebSpeechAPI</a> <a href="https://twitter.com/hashtag/JavaScript?src=hash&amp;ref_src=twsrc%5Etfw">#JavaScript</a> <a href="https://t.co/Hbus0F0oGV">pic.twitter.com/Hbus0F0oGV</a></p>&mdash; 新米SEちーろってぃ@新婚💍 (@chiiirotty) <a href="https://twitter.com/chiiirotty/status/1653950572624744448?ref_src=twsrc%5Etfw">May 4, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

お医者:man_tone1:「大したことないです。薬だけ出しておきます。もう来なくていいです。」
イッヌ:dog:「大丈夫ワン！薬があるワン！もう心配しなくていいワン！また元気になったら来てくれるとうれしいワン！」

**素晴らしい**:sparkles::sparkles::sparkles:
お医者さんの塩発言を、ChatGPTが見事に**不安な患者を励ますイヌ語**に変換してくれています！！！

(元気になってから病院に来られても困るというツッコミは受け付けません:upside_down:)

ぜひ皆さんも**Dr. DOGくん**:dog:を診察室に導入してみてはいかがでしょうか！

## 参考にした記事
- 音声を文字化
[ブラウザからの音声入力を認識してテキスト化する (Web Speech API)](https://qiita.com/inouet/items/2c9e218c05f547bb6852)
- AIで言い換え
[HTMLとJavaScriptでChatGPT APIを使いたい人が参考にする記事はこちら](https://qiita.com/iwakatakagundan/items/370a92883f8579fc1380)
- 文字を音声化
[【JS】Web Speech APIの音声読み上げ機能の実装方法（日本語 / 英語読み上げ）](https://web-creates.com/code/js-web-speech-api/)

## 編集後記
この記事でご紹介したプロダクトは、2023年4月29日, 30日に開催された[MEDICAL
HACKATHON Presents by ものづくり医療センター](https://moicen-forest.studio.site/2)にて**もいせん賞**(主催者特別賞)を受賞しました:medal:

[Dr. DOGくん(ProtoPedia)](https://protopedia.net/prototype/3836)

どこかの誰かの課題ではなく、**自分自身で感じた医療の課題を解決するプロダクト**を作ることがテーマでしたので、実際に眼科で体験した悲しい出来事を主題にしたプロダクトにしました。