はじめに

ChatGPTを使ったクイズアプリを作るにあたって、
前回まではChatGPT APIの呼び出し方について紹介したので今回は実際に完成したアプリを紹介していきたいと思います！

API呼び出し編については以下の記事でまとめています。
https://qiita.com/kitaji12/items/ac770569db6fcc7169ad

事前情報

OpenAI / ChatGPT 初心者
クイズアプリは React + Flask で作成

開発環境

macOS Sonoma 14.4
Visual Studio Code 1.87.2
Python 3.10.6
Flask 2.3.2

プロンプト準備

前回の記事で紹介した以下の形式で準備していく
model：今回は gpt-3.5-turbo を使用
messages：ChatGPTに投げる質問を記載する
- role：どこからの問い合わせなのかを明記する
  - user：人間からの問い合わせ
  - assistant：GPTからの返答（以前の応答を保存するのに役立つ）
  - system：ChatGPTに与える役を設定するために使用
- content：問い合わせや返答の文章を記載する

① キーワードに対応したクイズを返却するプロンプト

画面で入力したキーワードに関するクイズを返却するようなプロンプトにしています。
生成されるクイズによって揺れがあったので最後の文のような「枕詞は不要」という表記を加えています。

quiz.py

@app.route("/quiz")
def quiz():
  openai.api_key = os.environ["OPENAI_API_KEY"]

  req = request.args
  keyword = req.get("keyword")

  QUIZ_PROMPT = """
  {}についてのクイズを１つ出力して。
  クイズの形式は、自由入力で答えられるようなものにして。
  ○○についてのクイズのような、枕詞は不要。
  """

  response = openai.ChatCompletion.create(
      model="gpt-3.5-turbo",
      messages=[
          {"role": "user", "content": QUIZ_PROMPT.format(keyword)},
      ],
  )

  return response.choices[0]["message"]["content"].strip()

② クイズに対する回答の正誤判定と、解説を返却するプロンプト

クイズに対する回答が正しいか誤っているかの判定と、
そのクイズに関する解説を返却してくれるようなプロンプトにしています。
正誤判定と解説で分けた結果が欲しかったので「JSONを出力して」という表記をプロンプトに含めています。

quiz.py

@app.route("/answer")
def answer():
  openai.api_key = os.environ["OPENAI_API_KEY"]

  req = request.args
  quiz = req.get("quiz")
  answer = req.get("answer")

  ANSWER_PROMPT = """
  以下の要件に合ったJSONを出力して。
  フォーマットは下記の通り。各行改行禁止。
  correction:{}という問題に対して、{}という回答が、正解ならYES、不正解ならNOを出力して。
  commentary:{}という問題に対する正解と、学習が楽しくなる詳しい解説を出力して。
  """

  response = openai.ChatCompletion.create(
      model="gpt-3.5-turbo",
      messages=[
          {"role": "user", "content": ANSWER_PROMPT.format(quiz, answer, quiz)},
      ],
  )

  res = response.choices[0]["message"]["content"].strip()
  return jsonify(res)

実行結果

■ quiz
/quizを実行した結果です。

http://localhost:3001/quiz?keyword=ハリーポッター

■ answer
/answerを実行した結果です。（JSON形式で出力されています）

http://localhost:3001/answer?quiz=「ハリーポッターに登場する魔法学校の名前は何ですか？」&answer=ホグワーツ魔法大学

クイズアプリ動作

今回はReactとFlaskの繋ぎ込み部分は割愛しますが、キーワード入力欄と結果表示できるような画面をReactで作成しました。
（参考にさせていただいたサイトは「参考サイト」に記載しています）

さいごに

前回までのChatGPT API学習をもとにクイズアプリを作ってみました。
想定しているような結果を出力するようなプロンプトを考えるのに結構苦戦しました...
今後はクイズアプリだけでなく、ChatGPT APIを使った別のアプリも作る予定です！

ChatGPTを使ったクイズアプリを作ってみた