はじめに
アノテーションの藤本です。
OpenAI API を利用して自分で ChatGPT みたいな Web アプリが作りたい！と思ってもハードルが高く感じる人は多いと思います。
そんな人たちのためにハードルが低く開発環境が簡単に用意できるGASでWebアプリを作ってみようというのが今回の趣旨です。
タイトルでChatGPTのような と言っていますが、今回触れるのは初歩の部分です。質問を投げる → 回答が返ってくるという動作を確認してみたいと思います。
非エンジニアでも触れるように、コードの解説は最低限にします。
API KEY の取得
先ずは API KEY を取得しない事には始まりません。 こちらのブログを参考に API KEY を取得しましょう。
GAS の用意
- Googleドライブにアクセスします
- 新規 > その他 > Google Apps Script の順にクリックします
API KEY の保存
- 左側の歯車アイコンからプロジェクトの設定最下部にある「スクリプト プロパティを追加」をクリックします。
- 「プロパティ」には「APIKEY」
- 「値」に前述の内容で取得したAPI KEYを記載します。
- 「スクリプト プロパティ」を保存をクリックします
GASスクリプト編集
最初からある コード.gs を以下のように編集しましょう
const doGet = (request) => {
return HtmlService.createTemplateFromFile('index')
.evaluate();
}
const include = (filename) => {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function chatGPT(talk_str) {
if(talk_str){
const requestBody = {
"model": "gpt-3.5-turbo",
"messages": [{'role': 'system', 'content': "あなたはかわいい猫です。語尾ににゃんと付けてください。"},{'role': 'user', 'content': talk_str}],
"temperature": 1,
"max_tokens": 512
};
const requestOptions = {
"method": "POST",
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer " + PropertiesService.getScriptProperties().getProperty('APIKEY')
},
"payload": JSON.stringify(requestBody)
};
var response = JSON.parse(UrlFetchApp.fetch("https://api.openai.com/v1/chat/completions", requestOptions).getContentText());
return response.choices[0].message.content.trim();
}else{
return "no result";
}
}あなたはかわいい猫です。語尾ににゃんと付けてください。という箇所がありますね。ここで AI の設定を入れています。この内容を変更してお好きにキャラ付けしてみてください。
"temperature": 1この数字が小さい程同じ返答をするようになります。 0にすると毎回同じ質問には同じ回答をするようになります。 最大は2です。
"max_tokens": 512回答文が途中で途切れてしまう場合はこの数字を大きくしてみてください。
Webページの作成
GAS では HTML で Webページが作成できます。
今回はそのWebページで OpenAI API を利用した簡易Webアプリを作成していきます。
ファイル > ファイルを追加 > HTML
で html ファイルを作成します。今回、ファイル名は index.html としておきます。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<textarea id="input" rows="4" cols="40" placeholder="質問を入力" size="20" value=""></textarea>
<button type="button" onclick="runScript()">送信</button>
<p id="output"></p>
<?!= include('script'); ?>
</body>
</html>javascript の作成
スクリプト部分は分けて書きます。
ファイル > ファイルを追加 > HTML
で html ファイルを作成します。今回、ファイル名は script.html としておきます。
<script>
function sendAnswer(answer) {
let output_area = document.getElementById("output");
output_area.innerHTML = answer;
}
function runScript() {
let input_area = document.getElementById("input");
google.script.run.withSuccessHandler(sendAnswer).chatGPT(input_area.value);
}
</script>動かしてみる
デプロイ > 新しいデプロイ > 種類の選択 > ウェブアプリ の順に選択します
「アクセスできるユーザー」で公開範囲を選択することが出来ます。
デプロイボタンを押すと URL が表示されます
そのURLを開くと作成したWebアプリが確認できます。
「質問を入力」というところに文章を入れて「送信」をクリックします。
少し待つと…
回答が返ってきました！
最後に
実装の基礎はこれで終わりです。
あとは好きなキャラ設定を入れてみたり、CSSで装飾等をして見た目を整えてあげれば立派なチャットアプリの完成です。
是非試してみてください。
参考資料
OpenAI Platformことはじめ 〜Organizationメンバーに招待されたら
【やってみた】非エンジニアがOpenAI API×GASを活用しスプレッドシートで文章チェックを実施してみた
[初心者向け]スプレッドシート + GAS で ChatGPT API を使ってみた
アノテーション株式会社について
アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。
3
