Updated:Screen transitions

app.py

@@ -5,6 +5,7 @@ import os
 app = Flask(__name__)
 
 @app.route('/')
+@app.route('/index',methods=['POST'])
 def index():
     return send_from_directory(".", "index.html")
 
@@ -12,6 +13,10 @@ def index():
 def feedback():
     return send_from_directory(".","feedback.html")
 
+@app.route('/talk_detail',methods=['POST'])
+def talk_detail():
+    return send_from_directory(".","talkDetail.html")
+
 @app.route('/upload_audio', methods=['POST'])
 def upload_audio():
     try:

feedback.html

@@ -77,14 +77,6 @@
             return "素晴らしい";
         }
 
-        function showRecorder() {
-            window.location.href = "index.html";
-        }
-
-        function showHistory() {
-            window.location.href = "talkDetail.html";
-        }
-
         window.onload = function() {
             const level = 73; // レベル値
             const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
@@ -129,8 +121,18 @@
             <div class="bar"><div class="bar-fill" style="background-color: lightcoral;"></div></div>
         </div>
 
-        <button class="back-button" onclick="showRecorder()">録音画面を表示</button>
-        <button class="history-button" onclick="showHistory()">会話履歴を表示</button>
+        <form method="POST" action="/index">
+            <div class="feedback-space">
+                <input class="history-button" id="indexButton" type="submit" name="submit" value="録音画面を表示">
+            </div> 
+        </form>
+
+
+        <form method="POST" action="/talk_detail">
+            <div class="feedback-space">
+                <input class="history-button" id="detailButton" type="submit" name="submit" value="会話履歴を表示">
+            </div> 
+        </form>
     </div>
 </body>
 </html>

index.html

@@ -70,17 +70,13 @@
   <button class="record-button" id="recordButton" onclick="toggleRecording()">
   <div class="record-icon" id="recordIcon"></div>
   </button>
-  <!--
-  <button class="result-button" id="resultButton" onclick="showResults()">結果を表示</button>
-  -->
-
+  
   <form method="POST" action="/feedback">
     <div class="feedback-space">
       <input class="result-button" id="resultButton" type="submit" name="submit" value="フィードバック画面を表示">
     </div> 
   </form>
 
-
   <script>
     let isRecording = false;
     let mediaRecorder;
@@ -139,9 +135,7 @@
         }
       }
     }
-    function showResults() {
-      window.location.href = 'feedback.html';
-    }
+    
     // Chart.js の初期化
     const ctx = document.getElementById('speechChart').getContext('2d');
     const speechChart = new Chart(ctx, {

talkDetail.html

@@ -52,8 +52,19 @@
     <div class="container">
         <h2>会話の文字起こし表示</h2>
         <div id="transcription">ここに会話内容が表示されます。</div>
-        <button onclick="showRecorder()">録音画面を表示</button>
-        <button onclick="showHistory()">フィードバック画面を表示</button>
+        
+        <form method="POST" action="/index">
+            <div class="feedback-space">
+                <input class="history-button" id="indexButton" type="submit" name="submit" value="録音画面を表示">
+            </div> 
+        </form>
+
+        <form method="POST" action="/feedback">
+            <div class="feedback-space">
+                <input class="history-button" id="feedbackButton" type="submit" name="submit" value="フィードバック画面を表示">
+            </div> 
+          </form>
+        
     </div>
 
     <script>