Update templates/index.html

templates/index.html

@@ -166,19 +166,13 @@
       let recordingInterval;
       let count_voice = 0;
       let before_rate = [];
-      const RECORDING_INTERVAL_MS = 1000; // 1秒
+      const RECORDING_INTERVAL_MS = 1000; // 5秒
+
       // メンバーとチャートの初期化
       let members = [];
       let voiceData = [];
-      let baseMemberColors = [
-        "#4caf50",
-        "#007bff",
-        "#ffc107",
-        "#dc3545",
-        "#28a745",
-        "#9c27b0",
-        "#ff9800",
-      ];
+      let baseMemberColors = ["#4caf50", "#007bff", "#ffc107", "#dc3545", "#28a745", "#9c27b0", "#ff9800"];
+
       // Chart.js の初期化
       const ctx = document.getElementById("speechChart").getContext("2d");
       const speechChart = new Chart(ctx, {
@@ -203,6 +197,7 @@
           },
         },
       });
+
       // サーバーからメンバー情報を取得してチャートを更新する関数
       async function updateChartFrom() {
         try {
@@ -211,6 +206,7 @@
             throw new Error(`HTTP error! status: ${response.status}`);
           }
           const data = await response.json();
+
           if (!data || !data.members || !Array.isArray(data.members)) {
             console.error("Invalid member data received:", data);
             members = ["member1"];
@@ -218,11 +214,13 @@
             updateChart();
             return;
           }
+
           members = data.members;
           voiceData = [];
           for (let i = 0; i < members.length; i++) {
             voiceData.push(100 / members.length);
           }
+
           updateChart();
         } catch (error) {
           console.error("Failed to fetch member data:", error);
@@ -231,6 +229,7 @@
           updateChart();
         }
       }
+
       function updateChart() {
         // 一人モードの場合は、ユーザーとグレー（無音）の比率をチャートに表示
         if (members.length === 1) {
@@ -240,37 +239,40 @@
         } else {
           // 複数メンバーの場合は通常通りの処理
           speechChart.data.labels = members;
-          speechChart.data.datasets[0].backgroundColor = getMemberColors(
-            members.length
-          );
+          speechChart.data.datasets[0].backgroundColor = getMemberColors(members.length);
         }
+
         speechChart.data.datasets[0].data = voiceData;
         speechChart.update();
       }
+
       // ページ読み込み時にチャート情報を更新
       updateChartFrom();
+
       // 録音ボタンの録音開始／停止処理
       async function toggleRecording() {
         const recordButton = document.getElementById("recordButton");
+
         if (!isRecording) {
           // 録音開始
           isRecording = true;
           recordButton.classList.add("recording");
           try {
-            const stream = await navigator.mediaDevices.getUserMedia({
-              audio: true,
-            });
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             mediaRecorder = new MediaRecorder(stream);
             audioChunks = [];
+
             mediaRecorder.ondataavailable = (event) => {
               if (event.data.size > 0) {
                 audioChunks.push(event.data);
               }
             };
+
             mediaRecorder.onstop = () => {
               sendAudioChunks([...audioChunks]);
               audioChunks = [];
             };
+
             mediaRecorder.start();
             // 5秒ごとに録音を停止して送信するインターバルを設定
             recordingInterval = setInterval(() => {
@@ -296,6 +298,7 @@
           before_rate = [];
         }
       }
+
       function sendAudioChunks(chunks) {
         const audioBlob = new Blob(chunks, { type: "audio/wav" });
         const reader = new FileReader();
@@ -326,6 +329,7 @@
         };
         reader.readAsDataURL(audioBlob);
       }
+
       function getMemberColors(memberCount) {
         // 一人モードの場合は特別な処理をしない（updateChartで処理するため）
         if (memberCount <= 1) {
@@ -338,6 +342,7 @@
           return colors;
         }
       }
+
       function updateChartData(newRate) {
         // 一人モードの時の処理
         if (members.length === 1) {
@@ -346,56 +351,71 @@
             before_rate = [newRate];
           } else {
             // 一人モードでは、過去のデータと現在のデータを加重平均する
-            let tmp_rate =
-              (newRate + before_rate[0] * count_voice) / (count_voice + 1);
+            let tmp_rate = (newRate + before_rate[0] * count_voice) / (count_voice + 1);
             speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
             before_rate = [tmp_rate];
           }
           count_voice++;
+
+          // 一人モードでは常に緑色とグレーの組み合わせを使用
+          speechChart.data.labels = [members[0], "無音"];
+          speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
         } else {
-          // 複数モー��の時の処理
-          let sum_rate = 0;
-          for (let i = 0; i < newRate.length; i++) {
-            sum_rate += newRate[i];
+          console.log(before_rate)
+          // 複数人モードの処理
+          if (!Array.isArray(newRate)) {
+            console.error("newRate is not an array:", newRate);
+            return;
           }
-          // 各メンバーの割合を計算
-          for (let i = 0; i < members.length; i++) {
-            voiceData[i] = (newRate[i] / sum_rate) * 100;
+          if (newRate.length !== members.length) {
+            console.error(
+              "newRate length does not match members length:",
+              newRate,
+              members
+            );
+            return;
           }
-          updateChart();
-        }
-      }
 
-      // メニューの開閉
-      function toggleMenu(event) {
-        event.stopPropagation();
-        const menu = document.getElementById("menu");
-        menu.classList.toggle("open");
-      }
+          let averagedRates = new Array(newRate.length);
+
+          for (let i = 0; i < newRate.length; i++) {
+            let tmp_rate;
 
-      // メニュー外クリックで閉じる
-      function closeMenu(event) {
-        const menu = document.getElementById("menu");
-        if (!menu.contains(event.target)) {
-          menu.classList.remove("open");
+            if (count_voice === 0) {
+              // 初回はそのまま
+              tmp_rate = newRate[i];
+            } else {
+              // 2回目以降は、過去の平均値と現在の値を加重平均する
+              tmp_rate = (newRate[i] + before_rate[i] * count_voice) / (count_voice + 1);
+            }
+            averagedRates[i] = tmp_rate;
+          }
+
+          // before_rateを更新
+          before_rate = averagedRates;
+
+          //グラフに反映
+          speechChart.data.datasets[0].data = averagedRates;
+          count_voice++;
+          speechChart.data.datasets[0].backgroundColor = getMemberColors(
+            members.length
+          );
         }
-      }
 
-      // 以下の関数はサンプルのためのスタブです。必要に応じて実装を加えてください。
-      function showUserRegister() {
-        console.log("ユーザー登録画面を表示");
+        speechChart.update();
       }
 
       function showTalkdetail() {
-        console.log("会話履歴画面を表示");
+        window.location.href = "talk_detail";
       }
 
       function showResults() {
-        console.log("結果画面を表示");
+        window.location.href = "feedback";
       }
 
-      function resetAction() {
-        console.log("リセット処理を実行");
+      function showUserRegister() {
+        fetch("/reset");
+        window.location.href = "userregister";
       }
     </script>
   </body>