Google Sheets と OpenAI API を利用した、マルチキャラクターチャットボットアプリケーションを作ってみた

# はじめに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/178e1d6f-c9ee-c6fc-2c31-56a941aa0f3d.png)


## ChatGPTの衝撃
OpenAIが開発したチャットボット**ChatGPT**が注目を浴び始めたのは2022年11月からで、わずか半年の間にG7で生成系AIが主要トピックとして取り上げられるまでに至りました。

https://chat.openai.com/

ChatGPTや生成系AIに関する詳細は他のページで述べられているため、ここでは特に語りませんが、これらが非常に面白い技術であることは間違いありません。人間とチャットしているかのような自然な会話を可能にし、様々なテキスト処理を行えます。さらに、コードを書かなくても多くのことができ、コードを書く際の相談相手にもなれる、驚くべき存在です。

## マルチキャラクターチャットボットアプリケーション
ChatGPTのAPIを利用し、私はマルチキャラクターチャットボットアプリケーションを開発しました。"ChatGPTはすでにチャットボットではないのか？"と疑問に思われるかもしれませんが、以下の機能を追加することで新たな体験を実現しました。

- 複数の設定を持たせ、複数のキャラクターを表現した
- 会話の履歴を管理し、それぞれのキャラクターが継続した会話を行えるようにした
- それぞれのキャラクターが自分自身と他者を認識し、会話するようにした
- 個別のキャラクターの設定を画面から簡単に変更可能にした
- その他の設定も可能な限りシート上に保持し、変更を容易にした

複数のチャットボットに同時に質問したい、あるいはチャットボット同士が会話する様子を見てみたい。これが私の開発の動機でした。そして、この機能をできるだけ手軽に、小さな環境で実現しました。

事前にOpenAIのAPIキーの取得が必要ですが、APIキーがあれば、Google Sheetsを開くことができる環境であれば使用可能です。マルチキャラクターのチャットボットがどのように実現できるか理解できるように、OpenAI APIとやり取りするPayloadをシートにログ出力する機能も搭載しています。使用している言語モデルはGPTの中で最新のgpt-3.5-turboです。現時点では更に高性能なgpt-4も限定公開されていますが（ウェイトリスト登録が必要）、APIとしての利用は現実的にはgpt-3.5-turboが最適です。

APIに興味がある方、仕組みを見てみたいという方、ぜひ使ってみてください。もちろん、自分だけのキャラクターを作り、ひっそりと会話を楽しむことも可能です。このアプリケーションは完全にあなた専用です。

# どんなことができるのか

## チャット画面を表示する
設定が完了したら、ブラウザでウェブアプリのURLを開いてください。すると以下のような画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/178e1d6f-c9ee-c6fc-2c31-56a941aa0f3d.png)

左側にはキャラクターの名前、アイコン、そしてそのキャラクターの設定が表示されます。右側には実際の会話が表示されます。

## チャットしてみる
まず最初に行うべきことは、チャット画面で実際にチャットボットたちに話しかけることです。画面右下には入力ボックスと2つのボタンが配置されています。入力ボックスにメッセージを打ち込み、送信ボタンをクリックします。

一番初めにやることは、チャット画面で実際にチャットボット達に話しかける事です。
画面右下に、入力ボックスとボタンが２個並んでいます。
入力ボックスにメッセージを入力し、送信ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/c45b99bf-a70d-06bf-27cf-414881a1ceeb.png)


少し待つと、チャットボットたちは順に返答します。通常、1つのキャラクターからの応答には約30秒から1分ほどかかります。全てのキャラクターからの返答を待つには、少し時間が必要になるかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/e40b3b13-22fb-0b6b-028b-2cdb5ec5e39c.png)


## チャットボット同士を会話させてみる

次に、自分から話しかけずにチャットボットたちに会話させてみましょう。

右下のボタン群から、「キャラクターたちに自由に話してもらう」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/762d3e60-d15a-a4b2-ebcb-59cf8179c696.png)


すると、会話が続けられます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/8deb7a61-2c34-4f5a-4b76-239651b6cf15.png)


## チャットボットの設定を変えてみる

キャラクターごとの設定は自由に変更可能です。例えば、左上の猫の設定を変更してみましょう。入力ボックスで文章を編集し、保存ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/36116b7e-e46c-1651-f947-f5fcfe06c37b.png)



その後、キャラクターは変更した設定に従って会話を進めます。キャラクターの会話は会話の履歴に影響を受けますので、すぐに変化するわけではありませんが、しばらく話し続けると変わります。もし必要であれば、一度会話の履歴を消去し、再度試すこともできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/9655e26a-23fc-f9d9-ec7b-e7e5f8e50014.png)


履歴を消去した後、再度自己紹介をリクエストしてみました。すると自己紹介の内容が変わっていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/7b908168-8ff3-424b-d3cd-c25d2148e8b1.png)

# マルチキャラクターチャットボットアプリケーションを設置する

## OpenAI API キーを取得する

あらかじめ、OpenAI API キーを取得する必要があります。
OpenAI APIキーについては、ChatGPTに質問したところ、以下のような回答でした。

> OpenAI APIキーとは、OpenAIのAPIにアクセスするために必要な一意の識別子です。OpenAIは人工知能を開発・提供する組織であり、その技術を利用するためのAPI(Application Programming Interface)を提供しています。

> APIキーは、ユーザーが自身のアプリケーションからOpenAIのAPIを安全に呼び出すことを可能にします。このキーを使用することで、ユーザーのリクエストをOpenAIが確認し、認証します。これにより、ユーザーのアプリケーションはOpenAIのAPIが提供する各種機能（例えば、自然言語処理やテキスト生成など）を利用することができます。

> APIキーは非常に重要な情報であり、他人に知られると不正に使用される可能性があります。したがって、これは秘密に保持し、安全な場所に保存するべきです。また、OpenAIのAPIを使用するときには、常にAPIキーが必要になります。これはAPIリクエストの一部として送信され、リクエストがあなたから来たものであることを証明します。

> OpenAI APIキーは、OpenAIのウェブサイトに登録し、ダッシュボードから生成・取得することができます。このキーは通常、長い英数字の文字列で構成されています。

取得方法については、以下のページの「OpenAIのAPIキーの発行手順」の項目が参考になります。

https://auto-worker.com/blog/?p=6988

APIの利用は基本的に有料ですが、アカウントの新規登録時に18ドルのクレジットが付与されます。有効期間は３か月で、この間は実質無料でAPIを利用することが可能です。

https://auto-worker.com/blog/?p=7005


## ファイルを自分のドライブにコピーする

Googleアカウントにログインし、以下のリンクからファイルを開いてください。

https://docs.google.com/spreadsheets/d/14YFitjj_lAT9pXVjpmjW8dJwhnuoJohC-9UisK3RXGg/edit?usp=drive_link

次に示すようなGoogle Sheetsのワークシートが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/0ac79a59-96c0-faae-5125-3a2ab5616fcc.png)

このファイルは、閲覧のみの設定で共有されています。したがって、ご自身のドライブにこのファイルをコピーしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/56f38d9c-1fb9-1267-d8b6-3c76b797af5b.png)

スクリプトが含まれているため、警告メッセージが表示されますが、コピーボタンを押して、マイドライブか任意のフォルダにコピーしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/c8a0f8cd-4f6f-97af-7b62-fd86ea186103.png)

## ウェブアプリケーションをデプロイする

次に、sheetsをウェブアプリケーションとして公開します。
しかしご注意ください、ウェブアプリケーションとして公開しても、アクセス可能なのはコピーしたファイルの所有者、つまりあなた自身だけです。
他の人がチャット画面を表示することは基本的にはできません。

Sheetsの拡張機能から、App Scriptを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/dad55e7c-6be4-587b-34ef-4e982ffd7737.png)

スクリプトエディタが開きますので、右上の「デプロイ」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/c9d31428-02a1-a8ba-c9f6-14927151d7d1.png)

「新しいデプロイ」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/918d3150-1c41-eec8-7302-9a130774683d.png)

以下の設定を確認し、「デプロイ」ボタンを押します。

- 次のユーザーとして実行：自分
- アクセスできるユーザー：自分のみ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/ff4acc8b-317a-2940-ada4-c76baef03a82.png)

このアプリケーションは、内部でhttpリクエスト（APIの呼び出し）を行うため、実行前にあなたの承認が必要となります。
そのため、「アクセスを承認」ボタンを押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/7f6413e7-3d44-1b30-4927-7218d17a81ea.png)

自分のアカウントを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/a8603202-0deb-c0e9-1590-c3cc64a9f122.png)

「Advanced」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/e9f7230b-712b-ec53-e771-d830593ee513.png)

「Go to ChatBook (unsafe)」を選びます。

※警告画面が表示されますが、これは内部でOpenAIのAPI呼び出しを行う（つまり、外部サイトに情報を送信する）ために必要な確認です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/beb57655-1932-90b3-d65a-47bc41713a4d.png)

「Allow」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/78064a08-4565-1686-75db-caea128354e3.png)

デプロイが成功すると、ウェブアプリのURLが発行されます。表示されたURLをコピーし、「完了」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/62f75ac8-d8ec-f99d-58d5-7b45d5b61a49.png)

## APIキーを設定する

OpenAIのAPIを使用するために、まずAPIキーを設定します。

ChatBookのスプレッドシートを開き、「Setting」タブをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/84d58776-d212-925e-9d93-b4f936785cab.png)

「OPENAI_API_KEY」の右側のフィールドに、事前に取得したAPIキーを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/6f57692a-fbbc-5a83-233a-f76e672dcad4.png)

以下のように入力することになります。入力したデータは自動的に保存されます。

## チャット画面の表示

前述した手順でコピーしたURLをブラウザに貼り付け、アクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728994/178e1d6f-c9ee-c6fc-2c31-56a941aa0f3d.png)

お疲れさまでした。これでチャットアプリケーションの設置は完了です。
マルチキャラクターチャットボットアプリケーションはすでに実行されています。
チャットボット達に話しかけてみたり、設定を変えてみたり、色々と試してみてください。

# マルチキャラクターチャットボットアプリケーションの仕組みについて
## Google Sheetsを利用したチャットアプリケーションの構築

Google Sheetsは、App Script内でHTMLを管理し、デプロイしたURLを通じて該当HTMLをウェブページとして表示する機能を備えています。クライアントアプリケーションの動作には、Vue.jsというオープンソースのJavaScriptフレームワークを採用しています。サーバーサイドはApp Scriptで構築され、Google Sheetsのスプレッドシートがデータベースとして機能しています。

## gpt-3.5-turbo を用いたマルチキャラクターチャットボットによるチャットの仕組み

OpenAI APIには、'completions'というモードがあり、これには会話履歴を解釈する機能が含まれています。このチャット機能は、複数のユーザーを識別する能力を持っています。当該アプリケーションでは、この機能を利用して、複数のキャラクターが互いを識別しながら異なる役割を演じることができます。

今後このアプリケーションが注目を集める場合、その技術的な側面について詳細な記事を公開する予定です。
GitHubにAppScript部分のコードを公開しています。内容にご興味ある方は、併せてご確認ください。

https://github.com/TinklingWay/ChatBook


# 変更履歴
## 2023/05/27
- 履歴が０行だった時に画面が表示できないバグを修正
- キャラクター設定の文字数を変更 
- ボタンの表記を修正