Update index.html

index.html

@@ -70,6 +70,7 @@
   <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>
 
   <script>
@@ -77,6 +78,32 @@
     let mediaRecorder;
     let audioChunks = [];
 
+    // Chart.jsの初期化
+    const ctx = document.getElementById('speechChart').getContext('2d');
+    const speechChart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['自分', '他の人'],
+        datasets: [{
+          // 初期値は仮のデータとして [30, 70] を設定
+          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');
@@ -100,7 +127,8 @@
             const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
             const reader = new FileReader();
             reader.onloadend = () => {
-              const base64String = reader.result.split(',')[1]; // Base64 エンコードされた音声データ
+              // Base64エンコードされた文字列を取得
+              const base64String = reader.result.split(',')[1];
               // サーバーへ音声データを送信
               fetch('/upload_audio', {
                 method: 'POST',
@@ -111,7 +139,16 @@
               })
               .then(response => response.json())
               .then(data => {
-                alert('音声がバックエンドに送信されました。');
+                if(data.error) {
+                  alert('エラー: ' + data.error);
+                  console.error(data.details);
+                  return;
+                }
+                // data.rate はパーセンテージ（例: 40なら自分の音声が40%）\n
+                // 円グラフのデータを更新：自分の音声をdata.rate、他の音声を(100 - data.rate)として設定
+                speechChart.data.datasets[0].data = [data.rate, 100 - data.rate];
+                speechChart.update();
+                alert('音声の解析が完了しました。自分の音声: ' + data.rate.toFixed(2) + '%, 他の人: ' + (100 - data.rate).toFixed(2) + '%');
               })
               .catch(error => {
                 console.error('エラー:', error);
@@ -137,33 +174,10 @@
     }
 
     function showResults() {
-      window.location.href = 'feedback.html';
+      // 結果表示の別画面へ遷移する場合の処理例（必要に応じて実装してください）：
+      // window.location.href = 'feedback.html';
+      alert('結果は円グラフ上に反映されています。');
     }
-
-    // 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>