Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on Mar 21

Commit

da3d356

verified ·

1 Parent(s): f514ea6

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +315 -320

templates/index.html CHANGED Viewed

@@ -1,321 +1,316 @@
-<!DOCTYPE html>
-<html lang="ja">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Voice Recorder Interface</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="flex flex-col items-center justify-center h-screen bg-gray-900 text-white">
-    <!-- メンバーを登録ボタン -->
-    <div class="flex items-center mb-5">
-      <button
-        id="registerButton"
-        onclick="showUserRegister()"
-        class="px-4 py-2 bg-blue-600 rounded-md hover:bg-blue-700 transition"
-      >
-        メンバーを登録
-      </button>
-    </div>
-    <!-- チャート表示部 -->
-    <div class="chart w-72 h-72 mb-5">
-      <canvas id="speechChart"></canvas>
-    </div>
-    <!-- 録音フォーム -->
-    <form
-      id="recordForm"
-      action="/submit"
-      method="POST"
-      class="flex items-center space-x-2 w-full sm:w-auto"
-      onsubmit="event.preventDefault();"
-    >
-      <input
-        type="text"
-        name="name"
-        placeholder="名前を入力"
-        class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-700 text-white"
-      />
-      <!-- 録音ボタン -->
-      <button type="button" class="record-button" id="recordButton" onclick="toggleRecording()">
-        <div class="record-icon" id="recordIcon"></div>
-      </button>
-    </form>
-    <!-- 結果ボタン -->
-    <div class="flex mt-5">
-      <button
-        id="historyButton"
-        onclick="showTalkdetail()"
-        class="result-button px-4 py-2 mx-2 bg-green-600 rounded-md hover:bg-green-700 transition"
-      >
-        会話履歴を表示
-      </button>
-      <button
-        id="feedbackButton"
-        onclick="showResults()"
-        class="result-button px-4 py-2 mx-2 bg-blue-600 rounded-md hover:bg-blue-700 transition"
-      >
-        フィードバック画面を表示
-      </button>
-    </div>
-    <style>
-      .record-button {
-        width: 80px;
-        height: 80px;
-        background-color: transparent;
-        border-radius: 50%;
-        border: 4px solid white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-        transition: all 0.2s ease;
-      }
-      .record-icon {
-        width: 60px;
-        height: 60px;
-        background-color: #d32f2f;
-        border-radius: 50%;
-        transition: all 0.2s ease;
-      }
-      .recording .record-icon {
-        width: 40px;
-        height: 40px;
-        border-radius: 10%;
-      }
-    </style>
-    <script>
-      let isRecording = false;
-      let mediaRecorder;
-      let audioChunks = [];
-      let recordingInterval;
-      let count_voice = 0;
-      let before_rate = 0;
-      // メンバーとチャートの初期化
-      let members = [];
-      let voiceData = [];
-      let baseMemberColors = ["#4caf50", "#007bff", "#ffc107", "#dc3545", "#28a745", "#9c27b0", "#ff9800"];
-      // Chart.js の初期化
-      const ctx = document.getElementById("speechChart").getContext("2d");
-      const speechChart = new Chart(ctx, {
-        type: "doughnut",
-        data: {
-          labels: members,
-          datasets: [
-            {
-              data: voiceData,
-              backgroundColor: getMemberColors(members.length),
-            },
-          ],
-        },
-        options: {
-          responsive: true,
-          plugins: {
-            legend: {
-              display: true,
-              position: "bottom",
-              labels: { color: "white" },
-            },
-          },
-        },
-      });
-      // サーバーからメンバー情報を取得してチャートを更新する関数
-      async function updateChartFrom() {
-        try {
-          const response = await fetch("/confirm");
-          if (!response.ok) {
-            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"];
-            voiceData = [50, 50];
-            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);
-          members = ["member1"];
-          voiceData = [50, 50];
-          updateChart();
-        }
-      }
-      function updateChart() {
-        // 一人モードの場合は、ユーザーとグレー（無音）の比率をチャートに表示
-        if (members.length === 1) {
-          const userName = members[0];
-          speechChart.data.labels = [userName, "無音"];
-          speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
-        } else {
-          // 複数メンバーの場合は通常通りの処理
-          speechChart.data.labels = members;
-          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 });
-            mediaRecorder = new MediaRecorder(stream);
-            audioChunks = [];
-            mediaRecorder.ondataavailable = (event) => {
-              if (event.data.size > 0) {
-                audioChunks.push(event.data);
-              }
-            };
-            mediaRecorder.onstop = () => {
-              sendAudioChunks([...audioChunks]);
-              audioChunks = [];
-            };
-            mediaRecorder.start();
-          } catch (error) {
-            console.error("マイクへのアクセスに失敗しました:", error);
-            isRecording = false;
-            recordButton.classList.remove("recording");
-          }
-        } else {
-          // 録音停止
-          isRecording = false;
-          recordButton.classList.remove("recording");
-          if (mediaRecorder && mediaRecorder.state === "recording") {
-            mediaRecorder.stop();
-            count_voice = 0;
-            before_rate = 0;
-          }
-        }
-      }
-      function sendAudioChunks(chunks) {
-        const audioBlob = new Blob(chunks, { type: "audio/wav" });
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const base64String = reader.result.split(",")[1];
-          const form = document.getElementById("recordForm");
-          const nameInput = form.querySelector('input[name="name"]');
-          const name = nameInput ? nameInput.value : "unknown";
-          fetch("/upload_audio", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ audio_data: base64String, name: name }),
-          })
-            .then((response) => response.json())
-            .then((data) => {
-              if (data.error) {
-                alert("エラー: " + data.error);
-                console.error(data.details);
-              } else if (data.rate !== undefined) {
-                updateChartData(data.rate);
-              }
-            })
-            .catch((error) => {
-              console.error("エラー:", error);
-            });
-        };
-        reader.readAsDataURL(audioBlob);
-      }
-      function getMemberColors(memberCount) {
-        // 一人モードの場合は特別な処理をしない（updateChartで処理するため）
-        if (memberCount <= 1) {
-          return ["#4caf50", "#757575"];
-        } else {
-          let colors = [];
-          for (let i = 0; i < memberCount; i++) {
-            colors.push(baseMemberColors[i % baseMemberColors.length]);
-          }
-          return colors;
-        }
-      }
-      function updateChartData(newRate) {
-        // 一人モードの時の処理
-        if (members.length === 1) {
-          if (count_voice === 0) {
-            speechChart.data.datasets[0].data = [newRate, 100 - newRate];
-            before_rate = newRate;
-          } else if (count_voice === 1) {
-            let tmp_rate = (newRate + before_rate) / 2;
-            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
-            before_rate = tmp_rate;
-          } else {
-            let tmp_rate = (newRate + before_rate * 2) / 3;
-            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 {
-          // 複数メンバーの場合は元の処理
-          if (count_voice === 0) {
-            speechChart.data.datasets[0].data = [newRate, 100 - newRate];
-            before_rate = newRate;
-          } else if (count_voice === 1) {
-            let tmp_rate = (newRate + before_rate) / 2;
-            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
-            before_rate = tmp_rate;
-          } else {
-            let tmp_rate = (newRate + before_rate * 2) / 3;
-            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
-            before_rate = tmp_rate;
-          }
-          count_voice++;
-          speechChart.data.datasets[0].backgroundColor = getMemberColors(members.length);
-        }
-        speechChart.update();
-      }
-      function showTalkdetail() {
-        window.location.href = "talk_detail";
-      }
-      function showResults() {
-        window.location.href = "feedback";
-      }
-      function showUserRegister() {
-        fetch("/reset");
-        window.location.href = "userregister";
-      }
-    </script>
-  </body>
 </html>

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Voice Recorder Interface</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="flex flex-col items-center justify-center h-screen bg-gray-900 text-white">
+    <!-- メンバーを登録ボタン -->
+    <div class="flex items-center mb-5">
+      <button
+        id="registerButton"
+        onclick="showUserRegister()"
+        class="px-4 py-2 bg-blue-600 rounded-md hover:bg-blue-700 transition"
+      >
+        メンバーを登録
+      </button>
+    </div>
+    <!-- チャート表示部 -->
+    <div class="chart w-72 h-72 mb-5">
+      <canvas id="speechChart"></canvas>
+    </div>
+    <!-- 録音フォーム -->
+    <form
+      id="recordForm"
+      action="/submit"
+      method="POST"
+      class="flex items-center space-x-2 w-full sm:w-auto"
+      onsubmit="event.preventDefault();"
+    >
+      <!-- 録音ボタン -->
+      <button type="button" class="record-button" id="recordButton" onclick="toggleRecording()">
+        <div class="record-icon" id="recordIcon"></div>
+      </button>
+    </form>
+    <!-- 結果ボタン -->
+    <div class="flex mt-5">
+      <button
+        id="historyButton"
+        onclick="showTalkdetail()"
+        class="result-button px-4 py-2 mx-2 bg-green-600 rounded-md hover:bg-green-700 transition"
+      >
+        会話履歴を表示
+      </button>
+      <button
+        id="feedbackButton"
+        onclick="showResults()"
+        class="result-button px-4 py-2 mx-2 bg-blue-600 rounded-md hover:bg-blue-700 transition"
+      >
+        フィードバック画面を表示
+      </button>
+    </div>
+    <style>
+      .record-button {
+        width: 80px;
+        height: 80px;
+        background-color: transparent;
+        border-radius: 50%;
+        border: 4px solid white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        transition: all 0.2s ease;
+      }
+      .record-icon {
+        width: 60px;
+        height: 60px;
+        background-color: #d32f2f;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+      }
+      .recording .record-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10%;
+      }
+    </style>
+    <script>
+      let isRecording = false;
+      let mediaRecorder;
+      let audioChunks = [];
+      let recordingInterval;
+      let count_voice = 0;
+      let before_rate = 0;
+      // メンバーとチャートの初期化
+      let members = [];
+      let voiceData = [];
+      let baseMemberColors = ["#4caf50", "#007bff", "#ffc107", "#dc3545", "#28a745", "#9c27b0", "#ff9800"];
+      // Chart.js の初期化
+      const ctx = document.getElementById("speechChart").getContext("2d");
+      const speechChart = new Chart(ctx, {
+        type: "doughnut",
+        data: {
+          labels: members,
+          datasets: [
+            {
+              data: voiceData,
+              backgroundColor: getMemberColors(members.length),
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              display: true,
+              position: "bottom",
+              labels: { color: "white" },
+            },
+          },
+        },
+      });
+      // サーバーからメンバー情報を取得してチャートを更新する関数
+      async function updateChartFrom() {
+        try {
+          const response = await fetch("/confirm");
+          if (!response.ok) {
+            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"];
+            voiceData = [50, 50];
+            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);
+          members = ["member1"];
+          voiceData = [50, 50];
+          updateChart();
+        }
+      }
+      function updateChart() {
+        // 一人モードの場合は、ユーザーとグレー（無音）の比率をチャートに表示
+        if (members.length === 1) {
+          const userName = members[0];
+          speechChart.data.labels = [userName, "無音"];
+          speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
+        } else {
+          // 複数メンバーの場合は通常通りの処理
+          speechChart.data.labels = members;
+          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 });
+            mediaRecorder = new MediaRecorder(stream);
+            audioChunks = [];
+            mediaRecorder.ondataavailable = (event) => {
+              if (event.data.size > 0) {
+                audioChunks.push(event.data);
+              }
+            };
+            mediaRecorder.onstop = () => {
+              sendAudioChunks([...audioChunks]);
+              audioChunks = [];
+            };
+            mediaRecorder.start();
+          } catch (error) {
+            console.error("マイクへのアクセスに失敗しました:", error);
+            isRecording = false;
+            recordButton.classList.remove("recording");
+          }
+        } else {
+          // 録音停止
+          isRecording = false;
+          recordButton.classList.remove("recording");
+          if (mediaRecorder && mediaRecorder.state === "recording") {
+            mediaRecorder.stop();
+            count_voice = 0;
+            before_rate = 0;
+          }
+        }
+      }
+      function sendAudioChunks(chunks) {
+        const audioBlob = new Blob(chunks, { type: "audio/wav" });
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const base64String = reader.result.split(",")[1];
+          const form = document.getElementById("recordForm");
+          const nameInput = form.querySelector('input[name="name"]');
+          const name = nameInput ? nameInput.value : "unknown";
+          fetch("/upload_audio", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ audio_data: base64String, name: name }),
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              if (data.error) {
+                alert("エラー: " + data.error);
+                console.error(data.details);
+              } else if (data.rate !== undefined) {
+                updateChartData(data.rate);
+              }
+            })
+            .catch((error) => {
+              console.error("エラー:", error);
+            });
+        };
+        reader.readAsDataURL(audioBlob);
+      }
+      function getMemberColors(memberCount) {
+        // 一人モードの場合は特別な処理をしない（updateChartで処理するため）
+        if (memberCount <= 1) {
+          return ["#4caf50", "#757575"];
+        } else {
+          let colors = [];
+          for (let i = 0; i < memberCount; i++) {
+            colors.push(baseMemberColors[i % baseMemberColors.length]);
+          }
+          return colors;
+        }
+      }
+      function updateChartData(newRate) {
+        // 一人モードの時の処理
+        if (members.length === 1) {
+          if (count_voice === 0) {
+            speechChart.data.datasets[0].data = [newRate, 100 - newRate];
+            before_rate = newRate;
+          } else if (count_voice === 1) {
+            let tmp_rate = (newRate + before_rate) / 2;
+            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
+            before_rate = tmp_rate;
+          } else {
+            let tmp_rate = (newRate + before_rate * 2) / 3;
+            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 {
+          // 複数メンバーの場合は元の処理
+          if (count_voice === 0) {
+            speechChart.data.datasets[0].data = [newRate, 100 - newRate];
+            before_rate = newRate;
+          } else if (count_voice === 1) {
+            let tmp_rate = (newRate + before_rate) / 2;
+            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
+            before_rate = tmp_rate;
+          } else {
+            let tmp_rate = (newRate + before_rate * 2) / 3;
+            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
+            before_rate = tmp_rate;
+          }
+          count_voice++;
+          speechChart.data.datasets[0].backgroundColor = getMemberColors(members.length);
+        }
+        speechChart.update();
+      }
+      function showTalkdetail() {
+        window.location.href = "talk_detail";
+      }
+      function showResults() {
+        window.location.href = "feedback";
+      }
+      function showUserRegister() {
+        fetch("/reset");
+        window.location.href = "userregister";
+      }
+    </script>
+  </body>
 </html>