Flask×ChatGPT APIでレシピ提案システムを作ってみる

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from "react-router";
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

import "./App.css";
import HomePage from "./pages/Home";
import ListPage from "./pages/List";

import { Routes, Route } from "react-router";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage></HomePage>} />
        <Route path="/list" element={<ListPage></ListPage>} />
      </Routes>
    </>
  );
}

export default App;

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useState } from "react";
import { Link } from "react-router";

const HomePage = () => {
  const [inputValue, setInputValue] = useState({ a: "", i: "", u: "" });

  return (
    <div className="container mx-auto px-4 max-w-screen-sm">
      <h1 className="text-lg font-bold">食べ物を入力してください</h1>
      <Input
        className="my-2"
        value={inputValue.a}
        onChange={(e) => setInputValue({ ...inputValue, a: e.target.value })}
      />
      <Input
        className="my-2"
        value={inputValue.i}
        onChange={(e) => setInputValue({ ...inputValue, i: e.target.value })}
      />
      <Input
        className="my-2"
        value={inputValue.u}
        onChange={(e) => setInputValue({ ...inputValue, u: e.target.value })}
      />

      <Button>
        <Link
          to="/list"
          state={{ test: [inputValue.a, inputValue.i, inputValue.u] }}
        >
          検索
        </Link>
      </Button>
    </div>
  );
};
export default HomePage;

import { Button } from "@/components/ui/button";
import { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { useLocation } from "react-router";

interface State {
  test: string;
}

const ListPage = () => {
  const [receivedData, setReceivedData] = useState<any[]>([]); // 受け取ったデータを格納するための状態

  const location = useLocation();
  const { test } = location.state as State;

  const [isLoading, setIsLoading] = useState(true);

  // 非同期処理を行う関数
  const sendIngredients = async () => {
    setIsLoading(true); // ローディングを開始
    try {
      const response = await fetch("<http://localhost:5000/chatgpt>", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(test),
      });

      if (response.ok) {
        const data = await response.json();
        setReceivedData(data);
      } else {
        console.error("Error sending ingredients");
      }
    } catch (error) {
      console.error("Error:", error);
    } finally {
      setIsLoading(false); // 非同期処理が終わったらローディングを終了
    }
  };

  // 初回レンダリング時に送信する
  useEffect(() => {
    sendIngredients();
  }, []);

  useEffect(() => {
    console.log("Updated receivedData:", receivedData);
  }, [receivedData]);

  const homeButton = () => {
    window.location.href = "/";
  };

  return (
    <div>
      <Button onClick={homeButton}>Home</Button>
      <ul className="space-y-2">
        {isLoading ? ( // ローディング中かどうかを判定
          <p>データを取得中...</p>
        ) : receivedData.recipes && receivedData.recipes.length > 0 ? ( // recipesを明示的に参照
          receivedData.recipes.map((recipe, index) => (
            <li key={recipe.id}>
              <Dialog>
                <DialogTrigger>
                  <div>{recipe.name}</div>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>{recipe.name}</DialogTitle>
                  </DialogHeader>
                  <div>
                    <h2 className="text-base font-bold">材料</h2>
                    <ul>
                      {recipe.ingredient.map((ingredient, idx) => (
                        <li key={idx}>{ingredient}</li>
                      ))}
                    </ul>
                    <h2 className="text-base font-bold pt-1">手順</h2>
                    <ol>
                      {Object.entries(recipe.procedure).map(([step, desc]) => (
                        <li key={step}>
                          <strong>{step}</strong>: {desc}
                        </li>
                      ))}
                    </ol>
                  </div>
                  <DialogFooter>
                    <Button
                      variant={"outline"}
                      onClick={() => setVariable(Number(recipe.id))} // idを数値に変換
                      asChild
                    ></Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </li>
          ))
        ) : (
          <p>レシピが見つかりませんでした。</p>
        )}
      </ul>
    </div>
  );
};

export default ListPage;

SECRET_KEY=b'secretkey'
OPENAI_API_KEY = '事前準備で取得したapiキー'

# flask
Flask
Flask-Cors

# chatGPT
openai

"""
エントリーポイント
appインスタンスを呼び出し、Flaskサーバーを起動
"""

from app.views import app

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

"""
Flaskアプリケーションを作成し、設定や拡張機能を初期化の役割、アプリケーションの構成や設定に関するものが中心
DB接続の初期化、ブループリントの登録、その他のFlask拡張のセットアップなど
"""

import json
import os

from dotenv import load_dotenv
from flask import Flask, Response, jsonify, request

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

app.config["CSRF_ENABLED"] = True

# シークレットキーの読み込み
load_dotenv("key.env")
app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")

import os

from dotenv import load_dotenv
from flask import request, jsonify

from openai import OpenAI

import json

from app import app

@app.route("/chatgpt", methods=["POST"])
def openai():
    # OpenAIのAPIキーを設定
    client = OpenAI()
    current_directory = os.path.dirname(
        os.path.abspath(__file__)
    )  # 現在のスクリプトのディレクトリ
    full_path = os.path.join(current_directory, "key.env")
    load_dotenv(full_path)
    openai_api_key = os.getenv("OPENAI_API_KEY")
    
	# 受け取ったリクエストの中から、食材のリストを取得
    ingredients = request.get_json()
    # 食材リストをテキスト化
    ingredient_text = ", ".join(ingredients)
   
    # モデルに対してリクエストを送信
    response = client.chat.completions.create(
        model="gpt-3.5-turbo",  # GPT-4を指定
        messages=[
            {
                "role": "user",
                "content": (
                    f"次の食材を使った簡単なレシピをいくつか提案し,以下のjson形式で出力してください。\\n"
                    f"余計な説明は不要で指定した形式だけで出力してください。指定した形式は必ず守ってください\\n"
                    f"食材: {ingredient_text}"
                    "{"
                    '  "id": "",'
                    '  "name": "",'
                    '  "ingredient": [],'
                    '  "procedure": {'
                    '    "1": "",'
                    '    "2": "",'
                    '    "3": ""'
                    "  }"
                    "}," # ここのカンマがないとパースに失敗することがあるので注意。
                ),
            }
        ],
    )

    text = response.choices[0].message.content
    recipes = {}
    try:
        recipes = json.loads(text)
    except json.JSONDecodeError as e:
        print("JSONのパースに失敗しました:", e)
        print("レスポンス内容:", text)

    return jsonify(recipes)