xxxxxxxxxx125
<html lang="jp"><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>AI Respondent</title> <link rel="icon" type="image/x-icon" href="./favicon.ico"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"> <link rel="stylesheet" type="text/css" href="static/css/main.css" /></head><body> <div class="h-100 d-flex flex-column"> <nav class="navbar sticky-top navbar-light bg-light "> <div class="container-fluid"> <a class="navbar-brand text-left" href="/"><img src="logo.svg" height="60"></a> <a class="nav-link text-right text-secondary" aria-current="page" href="dblogpage">過去の回答を見る</a> </div> </nav> <form id="content-question" class="p-3" method="get" name="questionform"> <div class="py-2"> <label for="question_text_box" class="form-label">有名人に聞いてみたい質問</label> <textarea class="form-control" id="question_text_box" name="question_sentence" rows="3" placeholder="例: 将棋の楽しさを教えてください！" required></textarea> </div> <div class="py-2"> <label for="question_select_box" class="form-label">回答させたい有名人</label> <select class="form-select" id="question_select_box" aria-label="Default select example" name="persona"> <option value="藤井 聡太（日本の将棋棋士）"> 👑藤井 聡太（日本の将棋棋士） </option> <option value="大谷 翔平（プロ野球選手）"> ⚾大谷 翔平（プロ野球選手） </option> <option value="織田 信長（天下人）"> ⚔️織田 信長（天下人） </option> <option value="アインシュタイン（理論物理学者）"> 🧪アインシュタイン（理論物理学者） </option> </select> </div> <div class="py-2"> <button type="submit" id="submit_button" class="btn btn-primary">回答</button> </div> </form> <div class="px-3"> <div class="pb-2">有名人からの回答</div> <div class="p-1 border rounded"> <div id="answer_text" class="px-2 py-1"> <span class="text-black-50"> ここに回答が入ります。 </span> </div> </div> </div> <script> // ボタンとテキストボックスのelementを取得 const button = document.getElementById("submit_button"); const questionTextBox = document.getElementById("question_text_box"); const answerText = document.getElementById("answer_text"); const form = document.getElementById("content-question"); // ボタンが押されたときの挙動 form.addEventListener("submit", ev => { // ページを移動する処理を抑制 ev.preventDefault(); // ボタン表示の変更と無効化 button.innerHTML = "<span class=\"px-2\">回答中...</span><div class=\"loading\"></div>"; button.disabled = true; // テキストボックスに回答中の旨を表示 answerText.innerHTML = "ChatGPTが回答中です。少々お待ちください。"; // 質問時の情報を連想配列に変換する。 const postData = { "persona": form.persona.value, "question_sentence": form.question_sentence.value }; // バックエンドに対して回答データをリクエスト fetch("answer", { method: "POST", headers: { "Content-Type": "application/json; charset=utf-8" }, body: JSON.stringify(postData) }) .then(response => { // 回答データをjson形式で取得 return response.json(); }) .then(data => { // テキストボックスに回答データを反映 answerText.innerHTML = data.answer; }) .finally(() => { // ボタンを元に戻す button.innerHTML = "回答させる"; button.disabled = false; console.log("request complete!") }); }); </script> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script></body></html>