Update templates/index.html

templates/index.html

@@ -47,8 +47,12 @@
       height: 40px;
       border-radius: 10%;
     }
-    .result-button {
+    .result-buttons {
       margin-top: 20px;
+      display: flex;
+      gap: 10px;
+    }
+    .result-button {
       padding: 10px 20px;
       background-color: #4caf50;
       border: none;
@@ -56,6 +60,7 @@
       color: white;
       cursor: pointer;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+      transition: background-color 0.2s ease;
     }
     .result-button:hover {
       background-color: #388e3c;
@@ -67,31 +72,48 @@
   <div class="chart">
     <canvas id="speechChart"></canvas>
   </div>
+  
   <button class="record-button" id="recordButton" onclick="toggleRecording()">
     <div class="record-icon" id="recordIcon"></div>
   </button>
-
-  <form method="POST" action="/feedback">
-    <div class="result">
-      <button class="result-button" id="resultButton" onclick="showHistory()">
-        会話履歴を表示
-      </button>
-      <button class="result-button" id="resultButton" onclick="showResults()">
-        フィードバック画面を表示
-      </button>
-    </div>
-  </form>
+  
+  <div class="result-buttons">
+    <button class="result-button" id="historyButton" onclick="showHistory()">会話履歴を表示</button>
+    <button class="result-button" id="feedbackButton" onclick="showResults()">フィードバック画面を表示</button>
+  </div>
   
   <script>
     let isRecording = false;
     let mediaRecorder;
     let audioChunks = [];
-    let isRecordingStopped = false; //自動停止を管理する
     let recordingInterval;
-
+    
+    // Chart.js の初期化
+    const ctx = document.getElementById('speechChart').getContext('2d');
+    const speechChart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['自分', '他の人'],
+        datasets: [{
+          data: [30, 70],
+          backgroundColor: ['#4caf50', '#757575'],
+        }],
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            display: true,
+            position: 'bottom',
+            labels: { color: 'white' }
+          }
+        }
+      }
+    });
+    
     async function toggleRecording() {
       const recordButton = document.getElementById('recordButton');
-      const recordIcon = document.getElementById('recordIcon');
+      
       if (!isRecording) {
         // 録音開始
         isRecording = true;
@@ -100,47 +122,46 @@
           const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
           mediaRecorder = new MediaRecorder(stream);
           audioChunks = [];
-          previousAudioChunks = [];
+  
           mediaRecorder.ondataavailable = event => {
             if (event.data.size > 0) {
               audioChunks.push(event.data);
             }
           };
+  
           mediaRecorder.onstop = () => {
             sendAudioChunks([...audioChunks]);
             audioChunks = [];
           };
-
+  
           mediaRecorder.start();
-
+          // 10秒ごとに自動で停止して送信
           recordingInterval = setInterval(() => {
-            if(isRecording && !isRecordingStopped){
-              isRecordingStopped = true;
+            if (mediaRecorder && mediaRecorder.state === "recording") {
               mediaRecorder.stop();
             }
-          },10000);
+          }, 10000);
         } catch (error) {
           console.error('マイクへのアクセスに失敗しました:', error);
           isRecording = false;
           recordButton.classList.remove('recording');
         }
       } else {
-        // 録音停止
+        // 手動停止
         isRecording = false;
         recordButton.classList.remove('recording');
         clearInterval(recordingInterval);
-        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        if (mediaRecorder && mediaRecorder.state === "recording") {
           mediaRecorder.stop();
         }
       }
     }
-
-    function sendAudioChunks(chunks){
+    
+    function sendAudioChunks(chunks) {
       const audioBlob = new Blob(chunks, { type: 'audio/wav' });
       const reader = new FileReader();
       reader.onloadend = () => {
-        const base64String = reader.result.split(',')[1]; // Base64 エンコードされた音声データ
-        // サーバーへ音声データを送信
+        const base64String = reader.result.split(',')[1]; // Base64エンコードされた音声データ
         fetch('/upload_audio', {
           method: 'POST',
           headers: {
@@ -150,46 +171,42 @@
         })
         .then(response => response.json())
         .then(data => {
-          alert('音声がバックエンドに送信されました。');
+          if (data.error) {
+            alert('エラー: ' + data.error);
+            console.error(data.details);
+          } else if (data.rate !== undefined) {
+            // 解析結果が返ってきた場合はチャートを更新
+            speechChart.data.datasets[0].data = [data.rate, 100 - data.rate];
+            speechChart.update();
+            alert('音声の解析が完了しました。自分の音声: ' + data.rate.toFixed(2) + '%, 他の人: ' + (100 - data.rate).toFixed(2) + '%');
+          } else {
+            alert('音声がバックエンドに送信されました。');
+          }
+          // 録音が継続中であれば、再度録音を開始（自動録音の連続処理）
+          if (isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
+            mediaRecorder.start();
+          }
         })
         .catch(error => {
           console.error('エラー:', error);
+          if (isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
+            mediaRecorder.start();
+          }
         });
       };
       reader.readAsDataURL(audioBlob);
-
-      isRecordingStopped = false;
-      mediaRecorder.start();
     }
-
+    
+    function showHistory() {
+      // 会話履歴表示の画面があれば、そのページへ遷移する例
+      // window.location.href = 'history.html';
+      alert('会話履歴を表示する機能は未実装です。');
+    }
+    
     function showResults() {
+      // フィードバック画面へ遷移
       window.location.href = 'feedback.html';
     }
-
-    // Chart.js の初期化
-    const ctx = document.getElementById('speechChart').getContext('2d');
-    const speechChart = new Chart(ctx, {
-      type: 'doughnut',
-      data: {
-        labels: ['自分', '他の人'],
-        datasets: [{
-          data: [30, 70],
-          backgroundColor: ['#4caf50', '#757575'],
-        }],
-      },
-      options: {
-        responsive: true,
-        plugins: {
-          legend: {
-            display: true,
-            position: 'bottom',
-            labels: {
-              color: 'white'
-            }
-          }
-        }
-      }
-    });
   </script>
 </body>
-</html>
+</html>