😸

【POST通信】StreamlitからFastAPIへデータ送信 ～ChatGPT API 開発基礎 #5～

に公開
Python
FastAPI
Streamlit
ChatGPT
ui設計
tech

「ChatGPT API 開発基礎 ～ChatGPT APIをFastAPIとStreamlitで動かす～」の第5回。

今回は、FastAPIとStreamlitをPOSTリクエストで連携して、行政受付AI応答を画面に表示するまでをまとめます。

👤 1. 背景 – ここまでの流れ

FastAPIサーバー構築とStreamlit初期起動までは完了。
次は、StreamlitフォームからFastAPIエンドポイントにPOSTして、GPT応答を画面表示するフェーズに入りました。

今回も標準GPTにコード例を教えてもらいながら進めたけど、
正直「POST実装で404は出るだろうな」と思っていました。
ローカルURLを書き換え忘れてたし。

❓ 2. 今回の課題（Problem）

API側でPOSTエンドポイントを実装する経験はなかったため、
URL設定やpayload名がズレて404が出るのは想定内。

それでも、ChatGPTに「エラーが出た」と言うたびに
「焦らないでください！！」って言われる。

いや、別に焦ってないし、むしろ「うるせえな」って思いながら作業してました。

🔧 3. 解決アプローチ（Solution & Implementation）

🚀 ステップ1. FastAPIエンドポイント確認

まずはSwagger UI (http://127.0.0.1:8000/docs) にアクセスしてエンドポイントを確認。

@app.post("/gpt")
def call_gpt(user_input: UserInput):
    ...

➡ エンドポイントは /gpt、POSTメソッド。

⚙️ ステップ2. Streamlitコード作成（POST実装）

import streamlit as st
import requests

st.title("行政受付AIデモ")

# ユーザー入力
user_input = st.text_input("質問を入力してください:")

if st.button("送信"):
    if user_input:
        url = "http://127.0.0.1:8000/gpt"  # FastAPIエンドポイント
        payload = {"message": user_input}  # FastAPI側で期待するキー

        response = requests.post(url, json=payload)

        if response.status_code == 200:
            result = response.json()
            st.write("回答:")
            st.write(result["response"])
        else:
            st.write("エラーが発生しました。")
    else:
        st.write("質問を入力してください。")

📝 ステップ3. エラー解決プロセス

最初はURLを /your_endpoint のままにしていて、案の定404。
正しい /gpt に修正後、無事POST成功。

💡 4. 学び・気づき（Learning & Insights）

今回も、ChatGPTにコードを教われば一瞬で形になるけど、
URLやpayloadキー名が合ってるかまでは見てくれない。

ChatGPTは優秀だけど、たまに早とちりする。
ユーザー確認必須です。

📝 5. 設計意図（Design Intention）

今回は、FastAPI側にAPIロジックを分離し、Streamlit側はUIだけ担当する構成にしました。

深く考えたわけじゃなくて、ChatGPTに教わったまま実装しただけだけど、
結果として、後でAPI更新してもUIコードへの影響が少ないので、これはこれで正解だったと思います。

🔭 6. 次への問い（Next Questions）

  • GitHubリポジトリ作成とStreamlit Cloudデプロイはどの順序が最適か？
  • FastAPIとStreamlitを同時ホスティングする場合の構成管理はどうするか？

✨ 7. まとめ

今回は、StreamlitフォームからFastAPIへPOSTリクエストを送り、行政受付AI応答を画面に表示するところまで確認しました。

次回は、#6 公開テストへ進む予定。

📚 ChatGPT API 開発基礎（全8回）

#1 構想と環境構築 ｜ #2 FastAPI導入 ｜ #3 OpenAI統合 ｜ #4 UI試作 ｜ #5 POST通信 ｜ #6 公開テスト ｜ #7 本番環境 ｜ #8 仕上げと考察

Discussion