ラズパイPicoWでChatGPTのようなチャットボットの作り方

import wifi
import socketpool
import ssl
from adafruit_requests import Session

# Wi-FiアクセスポイントのSSID、パスワードとOpenAIから取得したAPIキーの設定
SSID = "自宅のWi-Fi接続先SSIDを設定"
PASSWORD = "自宅のWi-Fi接続先パスワードを設定"
API_KEY = "APIキーを設定"

# API使用設定
ENDPOINT = 'https://api.openai.com/v1/chat/completions' # OpenAI接続先（エンドポイント）
MODEL = "gpt-3.5-turbo"                                 # AIモデル
SYSTEM = ""     # 回答の人格（キャラ）設定(「〜のように回答してください」等を記入)
assistant = ""  # 回答するにあたっての参照情報を設定
prompt = "こんにちは"  # Chatbotへの質問内容

# Wi-Fi接続
print("Connecting to Wi-Fi...")
wifi.radio.connect(SSID, PASSWORD)

# socketpoolとrequestsライブラリを使用するための設定
pool = socketpool.SocketPool(wifi.radio)
requests = Session(pool, ssl.create_default_context())

# OpenAIからの応答を取得する関数
def get_chat_response(prompt):
    # APIリクエストヘッダーを設定
    headers = {
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': 'Bearer ' + API_KEY
    }
    # APIリクエストデータを設定
    data = {
        'model': MODEL,             # OpenAIのAIモデルを指定
        'messages': [
            {'role': 'system', 'content': SYSTEM },       # 回答の仕方、傾向(人格、キャラ)設定
            {'role': 'assistant', 'content': assistant }, # 回答するための参照情報設定
            {'role': 'user', 'content': prompt }          # 質問内容
        ], # 質問内容を「prompt」に指定
        'max_tokens' : 500,         # 生成するテキストの最大長（トークン数）
        'temperature' : 1,          # 値が大きいほど生成される文章が多様化する（0〜2）
        # 'top_p' : 1,              # 値が大きいほど多様な単語が選択される（0〜1）※temperatureとの併用は非推奨
        'frequency_penalty' : 0.0,  # 値が大きいほど同じ単語が繰り返し出現することを防止する（-2.0～2.0）
        'presence_penalty' : 0.0    # 値が大きいほど同じ意味を持つフレーズや文の出現を防止する（-2.0～2.0）
    }
    # APIリクエストを送信
    response = requests.post(ENDPOINT, headers=headers, json=data, timeout=60)
    # API応答を解析
    response_json = response.json()
    print(response_json)          # 受信データ
    print(response_json['usage']) # トークン使用料(質問、回答、合計)
    message = response_json['choices'][0]['message']['content'].strip() # 回答を抽出
    return message

# Chatbotの回答を取得
response = get_chat_response(prompt)
print('\nUser: ' + prompt)
print('\nAI: ' + response)

# API使用設定
ENDPOINT = 'https://api.openai.com/v1/chat/completions' # OpenAI接続先（エンドポイント）
MODEL = "gpt-3.5-turbo"                                 # AIモデル
SYSTEM = ""     # 回答の人格（キャラ）設定(「〜のように回答してください」等を記入)
assistant = ""  # 回答するにあたっての参照情報を設定
prompt = "こんにちは"  # Chatbotへの質問内容

# APIリクエストヘッダーを設定
headers = {
    'Content-Type': 'application/json; charset=utf-8',
    'Authorization': 'Bearer ' + API_KEY
}
# APIリクエストデータを設定
data = {
    'model': MODEL,             # OpenAIのAIモデルを指定
    'messages': [
        {'role': 'system', 'content': SYSTEM },       # 回答の仕方、傾向(人格、キャラ)設定
        {'role': 'assistant', 'content': assistant }, # 回答するための参照情報設定
        {'role': 'user', 'content': prompt }          # 質問内容
    ], # 質問内容を「prompt」に指定
    'max_tokens' : 500,         # 生成するテキストの最大長（トークン数）
    'temperature' : 1,          # 値が大きいほど生成される文章が多様化する（0〜2）
    # 'top_p' : 1,              # 値が大きいほど多様な単語が選択される（0〜1）※temperatureとの併用は非推奨
    'frequency_penalty' : 0.0,  # 値が大きいほど同じ単語が繰り返し出現することを防止する（-2.0～2.0）
    'presence_penalty' : 0.0    # 値が大きいほど同じ意味を持つフレーズや文の出現を防止する（-2.0～2.0）
}
# APIリクエストを送信
response = requests.post(ENDPOINT, headers=headers, json=data, timeout=60)

# API応答を解析
response_json = response.json()
print(response_json)          # 受信データ
print(response_json['usage']) # トークン使用料(質問、回答、合計)
message = response_json['choices'][0]['message']['content'].strip() # 回答を抽出

{
    'object': 'chat.completion',
    'created': 1684767533,
    'model': 'gpt-3.5-turbo-0301',
    'usage': {
        'total_tokens': 36,
        'prompt_tokens': 19,
        'completion_tokens': 17
    },
    'id': 'chatcmpl-7J1HpUhhTxvvwvgC594vBDwYPWrrG',
    'choices': [
        {
            'finish_reason': 'stop',
            'message': {
                'content': 'こんにちは！どのようなご用件でしょうか？',
                'role': 'assistant'
            },
            'index': 0
        }
    ]
}

CIRCUITPY_WIFI_SSID="自宅のWi-Fi接続先SSIDを設定"
CIRCUITPY_WIFI_PASSWORD="自宅のWi-Fi接続パスワードを設定"
OPENAI_API_KEY="OpenAIから取得したAPIキーを設定"

import os # 外部ファイル参照用ライブラリ
import wifi
import socketpool
import ssl
from adafruit_requests import Session

# Wi-FiアクセスポイントのSSID、パスワードとAPIキーをsetting.tomlファイルから取得
SSID = os.getenv("CIRCUITPY_WIFI_SSID")         # Wi-Fi接続先SSID
PASSWORD = os.getenv("CIRCUITPY_WIFI_PASSWORD") # Wi-Fi接続先パスワード
API_KEY = os.getenv("OPENAI_API_KEY")           # APIキー

SYSTEM = "あなたは猫です。猫のように回答して下さい"  # 回答の人格（キャラ）設定(「〜のように回答してください」等を記入)
assistant = "自分のことは「我輩」と言う"          # 回答するにあたっての参照情報を設定
prompt = "あなたは誰ですか？"                    # Chatbotへの質問内容

import os               # ファイル操作など、OSレベルの機能を提供するために使用
import socketpool       # TCP/IP接続用のソケット管理用
import wifi             # WiFi接続を管理用
import digitalio        # デジタルピンの入出力を制御用
from board import *     # マイクロコントローラーのボード定義から全てのピンをインポート
import ssl              # SSL通信用
from adafruit_requests import Session # HTTPリクエスト送信用
import json             # JSONデータ処理用
from adafruit_httpserver import Server, Request, FileResponse, JSONResponse # サーバー用ライブラリ

# 本体LED表示設定
led = digitalio.DigitalInOut(LED)           # 本体LEDをGPIO端子に割り当て
led.direction = digitalio.Direction.OUTPUT  # LED端子を出力に設定

# Wi-FiアクセスポイントのSSIDとパスワードを取得(PicoW内に保存されている「settings.toml」ファイルから読み込む)
SSID = os.getenv("CIRCUITPY_WIFI_SSID")         # Wi-Fi接続先SSID
PASSWORD = os.getenv("CIRCUITPY_WIFI_PASSWORD") # Wi-Fi接続先パスワード

# OpenAIへの接続設定
API_KEY = os.getenv("OPENAI_API_KEY") # APIキー(PicoW内に保存されている「settings.toml」ファイルから読み込む)
ENDPOINT = 'https://api.openai.com/v1/chat/completions' # OpenAIのアドレス指定
MODEL = "gpt-3.5-turbo"                                 # OpenAIのAIモデル指定
SYSTEM = ""     # 回答の人格（キャラ）設定(「〜のように回答してください」と記入)
assistant = ""  # 回答するにあたっての参照情報を設定（今回は質問ごとに前回の回答を設定）

# Wi-Fi接続を実行
wifi.radio.connect(SSID, PASSWORD)  # 指定したSSIDとパスワードで接続
print("Connected to", SSID)         # 接続先SSID表示

# ソケットプールを作成してHTTPサーバーを起動するための準備
pool = socketpool.SocketPool(wifi.radio)  # Wi-Fi接続上でソケットを管理するためのオブジェクトを作成
requests = Session(pool, ssl.create_default_context())  # SSL通信設定
server = Server(pool, "/static", debug=True)      # サーバー起動時にPicoWのルートディレクトリからデータを提供できるようにする

# OpenAIからの応答を取得する関数
def get_chat_response(prompt, assistant):
    # APIリクエストヘッダーを設定
    headers = {
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': 'Bearer ' + API_KEY  # APIキーを指定
    }
    # APIリクエストデータを設定
    data = {
        'model': MODEL,             # OpenAIのAIモデルを指定
        'messages': [
            {'role': 'system', 'content': SYSTEM },       # 回答の仕方、傾向(人格、キャラ)設定
            {'role': 'assistant', 'content': assistant }, # 回答するための参照情報設定
            {'role': 'user', 'content': prompt }          # 質問内容
        ], # 質問内容を「prompt」に指定
        'max_tokens' : 500,         # 生成するテキストの最大長（トークン数）
        'temperature' : 1,          # 値が大きいほど生成される文章が多様化する（0〜2）
        # 'top_p' : 1,                # 値が大きいほど多様な単語が選択される（0〜1）※temperatureとの併用は非推奨
        'frequency_penalty' : 0.0,  # 値が大きいほど同じ単語が繰り返し出現することを防止する（-2.0～2.0）
        'presence_penalty' : 0.0    # 値が大きいほど同じ意味を持つフレーズや文の出現を防止する（-2.0～2.0）
    }
    # APIリクエストを送信
    print("リクエストJSON:")
    print(data)
    response_json = requests.post(ENDPOINT, headers=headers, json=data, timeout=60)  # OpenAIのアドレスを「ENDPOINT」に指定
    # API応答を解析
    response_data = response_json.json()  # HTTPレスポンスのJSONをPythonオブジェクトに変換
    return response_data                  # Pythonオブジェクトを返す

# OLED使用の場合（SSID,IPアドレス確認用）--------------------------------------------------------------
# 別途ドライバ、フォントファイルの準備が必要。詳細はこちらを参照ください→ https://logikara.blog/raspi_pico_oled_circuitpy
def oled_disp():
    import busio            # I2C通信制御用
    import adafruit_ssd1306 # OLED SSD1306制御用
    # I2C 通信設定
    i2c = busio.I2C(GP17, GP16)  # (SCL, SDA)17,16
    display = adafruit_ssd1306.SSD1306_I2C(128, 32, i2c, addr=0x3C)
    # OLED表示設定
    display.fill(0) # 表示内容消去
    display.hline(0, 10, 128, True) # (x, y, 長さ, 色) 指定座標から横線
    # 文字表示（"表示内容", x, y, 色, フォント, サイズ）
    display.text("ChatBOT:" + MODEL, 0, 0, True, font_name="font5x8.bin", size=1)
    display.text("SSID:" + SSID, 0, 13, True, font_name="font5x8.bin", size=1)
    display.text("URL:" + str(wifi.radio.ipv4_address), 0, 24, True, font_name="font5x8.bin", size=1)
    # 設定した内容を表示
    display.show()
try:
  oled_disp() # OLED表示処理（未接続なら次の処理へ）
except RuntimeError:  # No pull up found on SDA or SCL; check your wiringエラーを無視する
    print("OLED not connected")
    pass
# ------------------------------------------------------------------------------------------------

# ルート（IPアドレス）アクセス時に実行される関数（トップページ表示、ポート80は省略可）
@server.route("/")
def base(request: Request):           # HTTPリクエストを処理する関数を定義
    return FileResponse(request, "index.html", "/") # レスポンスとしてPicoWルートフォルダの「index.html」ファイルを読み込みHTMLデータとして返す

# OpenAIからの回答取得実行（IPアドレス/questionアクセス時に実行）される関数
@server.route("/question", "POST")    # アクセスURLとPOST受信設定（POST指定なしの場合はGETのみ受信）
def question(request: Request):   # HTTPリクエストを処理する関数を定義
    global assistant                  # 前回の回答格納用
    led.value = True                  # 本体LEDを点灯
    data = json.loads(request.body)   # リクエストボディからJSONデータを取得
    print("\nリクエストボディJSON:")
    print(data)
    
    # OpenAIへの質問内容を表示
    prompt = data["question"] # 取得したJSONデータの「question（key）」から「質問（value）」を取得
    print('\nUser: ' + prompt)  # 質問を表示

    # OpenAIからの回答（レスポンス）を取得して表示
    response_data = get_chat_response(prompt, assistant) # OpenAIからの回答取得関数を実行し回答をPythonオブジェクトで格納
    print("\n OpenAIからのレスポンスデータ:")
    print(response_data)
    assistant = response_data['choices'][0]['message']['content'].strip() # Pythonオブジェクトから回答のみを抽出（次回の参照内容として格納）
    print('\nAI: ' + assistant)               # 回答を表示
    led.value = False                         # 本体LEDを消灯

    return JSONResponse(request, response_data) # JSONデータではなくPythonオブジェクト（dict型）で返す

# HTTPサーバーを開始して待ち受けるIPアドレスを表示する
print(f"Listening on http://{wifi.radio.ipv4_address}") # f文字列を使って「IPアドレス」と「ポート番号」を埋め込んで表示
server.serve_forever(str(wifi.radio.ipv4_address))      # HTTPサーバーを指定された「IPアドレス」と「ポート」で開始

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChotGPT（gpt-3.5-turbo）</title>
    <style>
      body {
        background-color: #333;
        color: #ccc;
        font-family: Arial, sans-serif;
        margin: auto;
        max-width: 800px;
      }
      h1 {
        margin: 15px 0 5px;
        text-align: center;
      }
      form {
        align-items: center;
        display: flex;
        flex-direction: column;
        margin-top: 30px;
      }
      label {
        display: block;
        font-size: 16px;
        margin-bottom: 5px;
      }
      textarea {
        border: none;
        border-radius: 10px;
        height: 100px;
        margin-bottom: 3px;
        padding: 10px;
        width: 80%;
      }
      #token-price {
        font-size: 12px;
        margin-bottom: 3px;
      }
      button {
        background-color: #bb2944;
        border: none;
        border-radius: 5px;
        color: #FFF;
        cursor: pointer;
        font-size: 16px;
        margin-bottom: 30px;
        padding: 5px 20px;
        width: 120px;
      }
      #chat-area {
        color: #333;
      }
      .question-balloon, .answer-balloon {
        border-radius: 10px;
        margin: 20px;
        max-width: 80%;
        padding: 10px;
        position: relative;
        width: 80%;
      }
      .question-balloon {
        background-color: #f9e7d9;
        margin-left: 10%;
        text-align: right;
      }
      .question-balloon::before {
        border: 15px solid transparent;
        border-right: 15px solid #f9e7d9;
        content: '';
        margin-top: -15px;
        position: absolute;
        right: -15px;
        top: 50%;
      }
      .answer-balloon {
        background-color: #dafbfb;
        margin-right: 10%;
        text-align: left;
      }
      .answer-balloon::before {
        border: 15px solid transparent;
        border-left: 15px solid #dafbfb;
        content: '';
        left: -15px;
        margin-top: -15px;
        position: absolute;
        top: 50%;
      }
      .loading {
        color: #aaa;
        margin: 20px;
        margin-left: 20px;
        padding: 10px;
      }
      /* .loadingクラスに対するアニメーション定義 */
      @keyframes blinking {
        0% { opacity: 0.3; }
        50% { opacity: 1; }
        100% { opacity: 0.3; }
      }
      /* .loadingクラスのスタイル設定とアニメーション適用 */
      .loading {
        animation-name: blinking; /* アニメーション名 */
        animation-duration: 2s; /* アニメーション時間 */
        animation-delay: 0s; /* アニメーション開始までの遅延時間 */
        animation-iteration-count: infinite; /* 無限に繰り返し */
      }
      @media only screen and (max-width: 480px) {
        body {
          margin: 0;
          padding: 0;
          width: 100%;
        }
        h1 { font-size: 24px; }
      }
    </style>
</head>
<body>
    <h1>ChotGPT（gpt-3.5-turbo）</h1>
    <div id="chat-area"></div>
    <form>
        <label for="question-input">質問を入力して送信ボタンを押してください</label>
        <textarea id="question-input" required></textarea>
        <div id="token-price"></div>
        <button type="submit">送信</button>
    </form>

    <script>
        let allTokens = 0;  // トークン合計
        let allPrices = 0;  // API使用料合計
        const tokenPriceDisp = document.getElementById("token-price");
        // トークン数から金額換算、ブラウザ表示処理関数
        function tokensPrice(total_tokens) {
            const rate = 130;                                       // ドル-円 レート
            let totalPrice = total_tokens * (0.002 * rate) / 1000;  // 質問ごとのAPI使用料（単価）
            allTokens += total_tokens                               // トークン合計を加算
            allPrices += totalPrice;                                // API使用料合計を加算
            tokenPriceDisp.innerText ="単価:¥" + totalPrice.toFixed(3) + "(Token:" + total_tokens + ")／合計:¥" + allPrices.toFixed(2) + "(Token:" + allTokens + " ※$1=¥" + rate + ")";
        }
        tokensPrice(0);

        // トークン数取得関数
        function getToken(responseJson) {
            // コンソールログに表示
            console.log(responseJson);
            const prompt_tokens = responseJson.usage.prompt_tokens;
            const completion_tokens = responseJson.usage.completion_tokens;
            const total_tokens = responseJson.usage.total_tokens;
            console.log("送信トークン数：" + prompt_tokens);
            console.log("受信トークン数：" + completion_tokens);
            console.log("合計トークン数：" + total_tokens);
            tokensPrice(responseJson.usage.total_tokens);  // トークン数から金額換算ブラウザ表示
        }

        const chatArea = document.getElementById('chat-area');
        const form = document.querySelector('form');
        // フォーム送信時の処理
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const questionInput = document.getElementById('question-input');
            const question = questionInput.value.trim();
            if (!question) {
                return;
            }
            // 質問の吹き出しを作成
            const questionBalloon = document.createElement('div');
            questionBalloon.classList.add('question-balloon');
            questionBalloon.textContent = question;
            chatArea.appendChild(questionBalloon);
            questionInput.value = '';
 
            // 回答を取得する前に Loading... を表示する
            const loadingDiv = document.createElement('div');
            loadingDiv.innerHTML = 'Loading...';
            loadingDiv.classList.add('loading');
            chatArea.appendChild(loadingDiv);

            // fetchAPIでPicoWに質問を送信してレスポンスをJSON形式で取得
            const url = '/question';  // リクエスト先URL
            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ question })
                });
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const responseJson = await response.json();
                getToken(responseJson);   // トークン数取得関数実行
                // 回答を取得
                let answer = responseJson.choices[0].message.content;
                answer = answer.replace(/\n/g, '<br>');
                chatArea.removeChild(loadingDiv); // 回答が取得できたら Loading... を削除する
                // 回答の吹き出しを作成
                const answerBalloon = document.createElement('div');
                answerBalloon.classList.add('answer-balloon');
                answerBalloon.innerHTML = answer;
                chatArea.appendChild(answerBalloon);
            } catch (error) {
                console.error('There was a problem with the fetch operation:', error);
                return { error: true, message: error.message };
            }
        });
    </script>
</body>
</html>

CIRCUITPY_WIFI_SSID="自宅のWi-Fi接続先SSIDを設定"
CIRCUITPY_WIFI_PASSWORD="自宅のWi-Fi接続パスワードを設定"
OPENAI_API_KEY="OpenAIから取得したAPIキーを設定"