素人がChatGPTやDeepL等のアプリ横断翻訳ツールを作ってみた

# はじめに
今回、言語学習ウェブアプリを作成しました。
前回までは、「翻訳アプリを横断するツール」として紹介していましたが、機能を追加し、言語学習者を対象としたアプリケーションにしています。
具体的には、追加機能としてブログ機能とスタディグループの機能を設けました。

# アプリケーションについて
冒頭にもある通り、今回は、翻訳アプリ横断ツール TranSyncを作成しました。

今回作ったサイトがこちら↓

https://transync.jp/

直感的に使えるよう、シンプルを意識しました。
![スクリーンショット 2023-10-20 234846.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581292/26280bac-ac0e-b2c4-790e-b153895b9356.png)

使い方は、翻訳したい文章を打ち込んで、翻訳を押すだけ。
各サイトのAPIと接続し、結果を出力してくれます。

# 機能紹介
## 横断翻訳機能
ChatGPTとDeepL、Google翻訳の翻訳結果を比較するツールです。
以下のように、結構翻訳結果に違いがあります。発見も多く、学びになります。

![スクリーンショット 2023-10-26 222519.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581292/31488e4f-1dd5-ad94-8b87-83cde3ee4f7a.png)

また、どれが正しいのか分からないということで、ChatGPT君が教えてくれる機能も付けました。これで、自分で取捨選択ができる上に、AIの判断も得られるようになりました。

ちなみに100人にアンケートを取ったところ、その結果、8割の人が使いたいと言ってくださりました。（実際は使われていないものの、可能性はありそうか？）ぜひ読者の皆様にも、使っていただければ嬉しいです。

## ブログ機能
こちらはAdsenseに通ればいいなと思い、付け加えたものです。
今のところ、投稿はテストページだけです。

![スクリーンショット 2023-12-05 204320.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581292/7c4270ff-0a06-661c-3a73-3698ed8d4fea.png)

## スタディグループ機能
みんなで学習できれば、モチベーションが維持できるという持論からスタディグループ機能を作成しました。誰でもサインアップをすれば、スタディグループで交流できるようになっております。

![スクリーンショット 2023-12-05 204344.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581292/e9d62a25-df90-5326-37a1-714fc018cceb.png)

![スクリーンショット 2023-12-05 204423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581292/2ccf7be1-5e1e-6028-4177-c4feef2f3dc2.png)

# アプリケーション詳細
## 使った技術
今回使ったのは、
・Django
・Heroku
・API
だけです。

簡単にスクラップアンドビルドできるので、Herokuをチョイスしています。
Djangoは、今後DBなど実装するかもしれないということで、選択しましたが、
慣れ親しんでいるというのが大きな理由です。

# ChatGPT API導入方法
簡単に導入の方法を説明します。
### ①API KEYを取得する。
　ここは、ほかのAPIと同様なので割愛します。
 ```python
 openai.api_key = "YOUR_API_KEY"
 ```

### ②Openaiのインポート
```python
import openai
 ```

### ③プロンプトを入力する
```python
    prompt_language = f"原文: {sentence}\n翻訳結果（Google）: {google_translation}\n翻訳結果（DeepL）: {deepl_translation}
                    　翻訳結果（ChatGPT）: {gpt_translation}\n翻訳結果のうち、最も正確かつ自然な翻訳結果とその理由を文法や語彙を例に挙げながら、日本語で教えてください？"
    message = openai.Completion.create(model="text-davinci-003", prompt=prompt_language, max_tokens=500, n=1, stop=None, temperature=0.5)
    print(message.choices[0].text)
```

いとも簡単に、APIを叩けることが分かると思います。
これをviews.pyに定義すれば、HTMLで出力することが可能です。

## 一番詰まったところ
今回、一番難しかったのは、ChatGPT APIの導入です。

理由は以下二つ
・なにかと調整が大変
・プロンプトが難しい

### なにかと調整が大変
ChatGPTはエラーになりやすく、500エラーをよく返されました。しかも理由が瞬時に分からないことも多く、結構難儀でした。また、定型文を”絶対”的に返してくれるわけではないので、セッションエラー？を起こし、結局500エラーというパターンも多かったです。その問題については、レスポンスがない場合は、空白を返す等の措置を取って、サイト自体が落ちないように工夫しました。

### プロンプトが難しい
ウェブアプリにChatgpt APIを導入プロンプトが難しい理由が２点あります。
これは、ChatGPTがほかのAPIと違い、決まった答えを出してくれないということに起因します。翻訳文以外も返すので、不要な部分をどう削るのかが結構大変でした。
また、純粋に「翻訳してください」というプロンプトでは、返答に間違いが多かったため、GoogleとDeepLの翻訳結果を参照するように変更しました。

翻訳部分のプロンプトは以下のようになっています。

```python
prompt_gpt = 'You are a ' + gpt_lang_code + ' translator. Please translate the "' + sentence + '" into more natural ' + gpt_lang_code + '.' + 'using the result of google translate "' + translation_results_google.text + '" and the result of DeepL "' + translation_results_deepl + '" as a reference.'
```

さらに良いプロンプトを求めて、調整しているところです。

チャット形式でやり取りするのが、一般的な使い方なので、
アプリケーションにChatGPTを組み込むのは、開発者の技量によるのかもしれません。しかし、上手にプロンプトを扱うことができれば、有益な動作をすること間違いなしです。

また、翻訳文判定の際には、レスポンスの遅さが問題でした。
その時のプロンプトがこんな感じでした↓

```python
prompt_language = f"{prompt}の結果になる理由を、文法的に例を挙げて教えてください。
```

プロンプト結果をそのまま代入して、プロンプトを作成するのは、かなり時間を食うようでした。

よって、その部分を解消することで、速度は改善しました。

# おわりに
~~正直、機能としては十分？（というか、疲れ果てた）ので、今後は、これをどうするか考えます。意外とアプリケーションもランニングコストがかかるので、辞め時を考えないといけません。~~
正直やめるべきかどうか

解決すべき問題点としては、
・今後の方針の決定（クローズか収益化か）
の一点です。

今回は、備忘録的に書かしていただきました。
今後も、追記していく予定です。
読んでくださり、ありがとうございました。
コメントもどしどしお待ちしております。

# 追記ログ
2023年10月20日　公開
2023年10月21日　プロンプト説明の加筆
2023年10月26日　導入方法の加筆
2023年12月05日　機能の追加