見出し画像
Photo by kaniemon_photo

Chat GPTもしくはGemini（VertexAI）のAPIを使って作る、AIチャットボット開発のサポート

green_blue_sky

AIチャットボットの開発には、OpenAIのGPTやGoogleのGemini（Vertex AI）を使用するのが効果的です。以下に、Pythonを使ったシンプルな英語学習支援チャットボットの開発手順を説明します。ここでは、OpenAIのGPT-4を使用する例を紹介しますが、Geminiを使う場合でも基本的な手順は類似しています。

必要なもの

  1. APIキー: OpenAI APIキー（もしくはGoogle CloudのAPIキー）

  2. Python環境: Python 3.x

  3. Webフレームワーク: Flaskなどの軽量なフレームワーク

手順

  • 環境設定:

    • Pythonとpipのインストール（もしまだインストールされていない場合）

    • 必要なライブラリのインストール（Flask、OpenAI）

pip install openai flask

  • OpenAI APIの設定:
    OpenAI APIキーを取得し、環境変数に設定します。

import openai

openai.api_key = 'your-api-key'

  • Flaskアプリケーションの作成:

    • 基本的なFlaskアプリケーションを設定します。

from flask import Flask, request, jsonify
import openai

app = Flask(__name__)

openai.api_key = 'your-api-key'

@app.route('/chat', methods=['POST'])
def chat():
    user_input = request.json.get('message')
    response = openai.Completion.create(
        engine="text-davinci-003",
        prompt=f"User: {user_input}\nAI:",
        max_tokens=150,
        n=1,
        stop=None,
        temperature=0.7,
    )
    answer = response.choices[0].text.strip()
    return jsonify({'response': answer})

if __name__ == '__main__':
    app.run(debug=True)

  • APIリクエストの処理:

    • ユーザーからの入力を受け取り、OpenAIのAPIに送信し、応答を返す部分を実装します。

  • ウェブインターフェースの作成:

    • HTMLとJavaScriptを使用して、フロントエンドを作成します。簡単なチャットボックスを作成し、バックエンドのAPIと通信します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>English Learning Chatbot</title>
</head>
<body>
    <div id="chatbox">
        <div id="messages"></div>
        <input type="text" id="userInput" placeholder="Type your message here...">
        <button onclick="sendMessage()">Send</button>
    </div>
    <script>
        async function sendMessage() {
            const userInput = document.getElementById('userInput').value;
            const response = await fetch('/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({message: userInput})
            });
            const data = await response.json();
            document.getElementById('messages').innerHTML += `<p>User: ${userInput}</p><p>AI: ${data.response}</p>`;
            document.getElementById('userInput').value = '';
        }
    </script>
</body>
</html>

注意点

  1. セキュリティ: APIキーを安全に保管し、公開リポジトリに含めないようにします。

  2. 料金: OpenAIのAPIには使用料がかかるため、使用量を管理する必要があります。

  3. エラーハンドリング: ユーザーの入力に対して適切なエラーハンドリングを実装します。

この基本的な例をもとに、より複雑な機能（例えば、ユーザーの進捗を追跡する機能や、特定のトピックに焦点を当てたアドバイスを提供する機能など）を追加していくことができます。

GoogleのGemini（Vertex AI）を使う場合も、基本的なAPIリクエストの構造は似ています。Google CloudのAPIクライアントをインストールし、同様にリクエストを送信して応答を取得します。

この記事が気に入ったらサポートをしてみませんか？