2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ChatGPTAPIとLineBotで翻訳機を作ってみた

Last updated at Posted at 2024-01-08

はじめに

今更ながらですが、LineBot + ChatGPTAPIで簡単なChatbotを作ってみたので、開発メモ。

海外に住んでるので、翻訳機を作ってみました。

作成物

IMG_9684.jpg

参考

ChatGPT APIを使ったLineBotの作り方を、人格の与え方まで完全解説【プログラミング不要】

ChatGPT API Reference

大まかな流れ

1,LineDeveloperの設定
2,GoogleAppsScriptsにコードの実装・コードをデプロイ
3,LineDeveloperとGoogleAppsScriptsの連携

LineDeveloperの設定

LineDeveloperにログイン(新規登録は省略)

1,新規プロバイダーを作成

スクリーンショット 2024-01-08 22.17.58.png

名前はなんでもOK.

2,新規チャンネルを作成

必須項目を入力していく

3,チャンネルアクセストークンをメモ

MessagingAPIから一番下の、チャンネルアクセストークンをメモしておく。
スクリーンショット 2024-01-08 22.21.32.png

GoogleAppsScriptsにコードの実装

GoogleAppsScriptsのサイトへアクセス。(googleのアカウント作成方法などは省略)

新規プロジェクトを作成し、コードを実装

1,OPENAIのAPI_KEYを取得

いろんなサイトに載ってるので省略

2,コードの実装

今回実装するコードはこちら

function doPost(e) {
  const props = PropertiesService.getScriptProperties()
  const event = JSON.parse(e.postData.contents).events[0];

  const replyToken = event.replyToken;
  let userMessage = event.message.text;
  const url = 'https://api.line.me/v2/bot/message/reply';

  if (userMessage === undefined) {
    userMessage = '文章を送ってください';
  }
  
  const prompt = userMessage;
  const requestOptions = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer "+  props.getProperty('OPENAI_APIKEY')
    },
    "payload": JSON.stringify({
      "model": "gpt-3.5-turbo",
      "messages": [ 
        {"role": "system", "content": "You are a translation assistant. Translate the following Japanese text into the language specified at the end of the user's message."},
         {"role": "user", "content": prompt}]
    })
  }
  const response = UrlFetchApp.fetch("https://api.openai.com/v1/chat/completions", requestOptions);

  const responseText = response.getContentText();
  const json = JSON.parse(responseText);
  const text = json['choices'][0]['message']['content'].trim();

  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + props.getProperty('LINE_ACCESS_TOKEN'),
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [{
        'type': 'text',
        'text': text,
      }]
    })
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

プロンプトとモデル
 "model": "gpt-3.5-turbo",
      "messages": [ 
        {"role": "system", "content": "You are a translation assistant. Translate the following text into Japanese. If the text is already in Japanese, translate it into the language specified at the end of the user's message."},
        {"role": "user", "content": prompt}]

モデルは動作確認用なので、gpt-3.5-turbo。実際に使うならばgpt4の方がいい。

systemプロンプトには"You are a translation assistant. Translate the following text into Japanese. If the text is already in Japanese, translate it into the language specified at the end of the user's message."と記述。
日本語に翻訳、すでに日本語ならば文字の最後に記載した言語に変換するように命令している。

role:systemのプロンプトはchatgptに求める設定(役割)を表している

3,デプロイする。

新しいデプロイを選択
スクリーンショット 2024-01-08 22.31.13.png

種類 → ウェブアプリ
次のユーザーとして実行 → 自分
アクセスできるユーザー → 全員
スクリーンショット 2024-01-08 22.32.21.png

4,環境変数を設定

プロジェクトの設定 > スクリプトプロパティ
から
LINE_ACCESS_TOKEN : {チャンネルアクセストークン}
OPENAI_APIKEY : {APIkey}
を設定

スクリーンショット 2024-01-08 22.34.51.png

デプロイ時に作成されたURLをコピペしておく。
スクリーンショット 2024-01-08 22.40.05.png

LineDeveloperとGoogleAppsScriptsの連携

1,作成したチャネルから"Messaging API設定 > WEbhook設定 > WEbhookUrlに先ほどコピペしたurlを貼り付けて保存する

スクリーンショット 2024-01-08 22.42.14.png

2,応答メッセージをOFF

これをOFFしておかないと、メッセージの返信が全て

申し訳ありませんが、このアカウントでは個別のお問い合わせを受け付けていません。。

となってしまう。

基本情報 > Line Official Acount Manager > 応答設定 > 応答メッセージをOFF
にする

3,chatbotを友達に追加

Messaging API設定 > QRコード
からQRコードをLineで読み込んで友達追加。

メッセージを送ってみて、返信が返ってきたら完成。

IMG_9684.jpg

う〜ん。あまり上手に翻訳できていない気がする。
特に、日本語→タイ語 が弱い。
GPT4だとうまくできるのだろうか? 次回検証。

番外編 ログを見たい

GASのログってどこで見れるんだろう? APP scriptsののログを表示したくても"Cloud ログ"が非アクティヴになってて使えない。。

解決方法 GASのプロジェクトをGCP(Google Cloud Platform)に紐づける必要がある。

方法はこちらの3番目から。結構めんどくさかった。
Google Apps ScriptでdoPost関数のログを出力する方法3選

この設定をすると、
Google APPs Scripts > 実行数 > Cloud Log
からログが見れるようになりました!!

スクリーンショット 2024-01-08 22.57.47.png

終わりに

千里の道も一歩から。今回は初歩の初歩とも言えるChatGPTAPIとLineBotの連携やってみました。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?