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


## はじめに

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

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

## 作成物

![IMG_9684.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/d95cf319-8697-1e4f-53d6-0030a78f119c.jpeg)




## 参考
[ChatGPT APIを使ったLineBotの作り方を、人格の与え方まで完全解説【プログラミング不要】](https://chatgpt-lab.com/n/n55257c082a9d)

[ChatGPT API Reference](https://platform.openai.com/docs/api-reference/introduction)

## 大まかな流れ
1,LineDeveloperの設定
2,GoogleAppsScriptsにコードの実装・コードをデプロイ
3,LineDeveloperとGoogleAppsScriptsの連携


## LineDeveloperの設定
[LineDeveloper](https://developers.line.biz/ja/)にログイン(新規登録は省略)

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

![スクリーンショット 2024-01-08 22.17.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/66973016-a9d7-c086-d5f8-cfa2d02d3f3a.png)

名前はなんでもOK.

### 2,新規チャンネルを作成
必須項目を入力していく

### 3,チャンネルアクセストークンをメモ
MessagingAPIから一番下の、チャンネルアクセストークンをメモしておく。
![スクリーンショット 2024-01-08 22.21.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/7602f16d-96b6-5b69-68f7-a36772c2035e.png)

## GoogleAppsScriptsにコードの実装
[GoogleAppsScriptsのサイト](https://script.google.com/home)へアクセス。(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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/fb07b842-f13d-61c9-3e40-f8782caf353b.png)

種類 → ウェブアプリ
次のユーザーとして実行 → 自分
アクセスできるユーザー → 全員
![スクリーンショット 2024-01-08 22.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/1df874c3-67fa-ee7a-19cf-11fbc5f048c2.png)


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

![スクリーンショット 2024-01-08 22.34.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/1aa095bb-b793-a6c2-b6c9-64a2b0c6c1e5.png)

デプロイ時に作成されたURLをコピペしておく。
![スクリーンショット 2024-01-08 22.40.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/c6537cf9-8dc6-98fc-2dc7-3cd447811027.png)


## LineDeveloperとGoogleAppsScriptsの連携
### 1,作成したチャネルから"Messaging API設定 > WEbhook設定 > WEbhookUrlに先ほどコピペしたurlを貼り付けて保存する
![スクリーンショット 2024-01-08 22.42.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/6fe267d6-30c4-4548-6cf6-bf6f35e349f2.png)

### 2,応答メッセージをOFF
これをOFFしておかないと、メッセージの返信が全て
```
申し訳ありませんが、このアカウントでは個別のお問い合わせを受け付けていません。。
```
となってしまう。

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

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

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

![IMG_9684.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/d95cf319-8697-1e4f-53d6-0030a78f119c.jpeg)

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


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

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

方法はこちらの3番目から。結構めんどくさかった。
[Google Apps ScriptでdoPost関数のログを出力する方法3選
](https://prtn-life.com/blog/gas-log-gcp)

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

![スクリーンショット 2024-01-08 22.57.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322029/1570efdd-c5de-eda9-460c-e832d16020c3.png)

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