Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

mizzzuno commited on Mar 19

Commit

4780055

verified ·

1 Parent(s): cb5ad90

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +82 -201

templates/index.html CHANGED Viewed

@@ -4,80 +4,52 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Voice Recorder Interface</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
     <style>
-      body {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        margin: 0;
-        background-color: #121212;
-        color: white;
-      }
-      /* トグルスイッチ（基準音声保存用） */
-      .toggle-container {
-        display: flex;
-        align-items: center;
-        margin-bottom: 20px;
-      }
-      .toggle-label {
-        margin-right: 10px;
-      }
-      .toggle-switch {
-        position: relative;
-        display: inline-block;
-        width: 50px;
-        height: 24px;
-      }
-      .toggle-switch input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-      }
-      .slider {
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: #757575;
-        transition: 0.2s;
-        border-radius: 34px;
-      }
-      .slider::before {
-        content: "";
-        position: absolute;
-        height: 18px;
-        width: 18px;
-        left: 4px;
-        bottom: 3px;
-        background-color: white;
-        transition: 0.2s;
-        border-radius: 50%;
-      }
-      input:checked + .slider {
-        background-color: #4caf50;
-      }
-      input:checked + .slider::before {
-        transform: translateX(26px);
-      }
-      /* チャートのスタイル */
-      .chart {
-        width: 300px;
-        height: 300px;
-        margin-bottom: 20px; /* 円グラフとボタンの間隔を狭く */
-      }
-      .controls {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
       .record-button {
         width: 80px;
         height: 80px;
@@ -91,6 +63,7 @@
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
         transition: all 0.2s ease;
       }
       .record-icon {
         width: 60px;
         height: 60px;
@@ -98,83 +71,35 @@
         border-radius: 50%;
         transition: all 0.2s ease;
       }
       .recording .record-icon {
         width: 40px;
         height: 40px;
         border-radius: 10%;
       }
-      .result-button {
-        margin-left: 10px;
-        margin-top: 20px;
-        padding: 10px 20px;
-        background-color: #4caf50;
-        border: none;
-        border-radius: 5px;
-        color: white;
-        cursor: pointer;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-      }
-      .result {
-        display: flex;
-      }
-      .result-button:hover {
-        background-color: #388e3c;
-      }
-      header {
-        display: flex;
-      }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  </head>
-  <body>
-    <!-- トグルスイッチ：基準音声保存モード -->
-    <div class="toggle-container">
-      <span class="toggle-label">基準音声を保存</span>
-      <label class="toggle-switch">
-        <input type="checkbox" id="baseVoiceToggle" />
-        <span class="slider"></span>
-      </label>
-    </div>
-    <!-- チャート表示部 -->
-    <div class="chart">
-      <canvas id="speechChart"></canvas>
-    </div>
-    <!-- 録音ボタン -->
-    <button class="record-button" id="recordButton" onclick="toggleRecording()">
-      <div class="record-icon" id="recordIcon"></div>
-    </button>
-    <!-- 結果ボタン -->
-    <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 recordingInterval; // 通常モードでの10秒周期用
-      let baseTimeout; // 基準音声モード用のタイマー
       let count_voice = 0;
       let before_rate = 0;
       // 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"],
             },
           ],
@@ -191,9 +116,20 @@
         },
       });
-      // トグルの状態を取得する関数
-      function isBaseVoiceMode() {
-        return document.getElementById("baseVoiceToggle").checked;
       }
       async function toggleRecording() {
@@ -222,26 +158,6 @@
             };
             mediaRecorder.start();
-            if (isBaseVoiceMode()) {
-              // 基準音声モード：10秒後に自動停止するタイマーをセット
-              baseTimeout = setTimeout(() => {
-                if (mediaRecorder && mediaRecorder.state === "recording") {
-                  mediaRecorder.stop();
-                  // 10秒経過しても録音ボタンがONなら強制的に停止＆トグルをオフにする
-                  isRecording = false;
-                  recordButton.classList.remove("recording");
-                  document.getElementById("baseVoiceToggle").checked = false;
-                }
-              }, 10000);
-            } else {
-              // 通常モード：10秒ごとに自動停止して送信、継続録音する処理
-              recordingInterval = setInterval(() => {
-                if (mediaRecorder && mediaRecorder.state === "recording") {
-                  mediaRecorder.stop();
-                }
-              }, 10000);
-            }
           } catch (error) {
             console.error("マイクへのアクセスに失敗しました:", error);
             isRecording = false;
@@ -251,11 +167,6 @@
           // 手動停止
           isRecording = false;
           recordButton.classList.remove("recording");
-          if (isBaseVoiceMode()) {
-            clearTimeout(baseTimeout);
-          } else {
-            clearInterval(recordingInterval);
-          }
           if (mediaRecorder && mediaRecorder.state === "recording") {
             mediaRecorder.stop();
             count_voice = 0;
@@ -269,11 +180,7 @@
         const reader = new FileReader();
         reader.onloadend = () => {
           const base64String = reader.result.split(",")[1]; // Base64エンコードされた音声データ
-          // エンドポイントの選択：基準音声モードなら '/upload_base_audio'
-          const endpoint = isBaseVoiceMode()
-            ? "/upload_base_audio"
-            : "/upload_audio";
-          fetch(endpoint, {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
@@ -285,7 +192,7 @@
               if (data.error) {
                 alert("エラー: " + data.error);
                 console.error(data.details);
-              } else if (data.rate !== undefined && !isBaseVoiceMode()) {
                 // 通常モードの場合、解析結果をチャートに反映
                 if (count_voice === 0) {
                   speechChart.data.datasets[0].data = [
@@ -310,55 +217,29 @@
                 }
                 count_voice++;
                 speechChart.update();
-              } else {
-                // 基準音声モードまたは解析結果がない場合
-                if (isBaseVoiceMode()) {
-                  //alert('基準音声が保存されました。');
-                  // トグルをリセット
-                  document.getElementById("baseVoiceToggle").checked = false;
-                } else {
-                  //alert('音声がバックエンドに送信されました。');
-                }
-              }
-              // 通常モードの場合、録音が継続中なら次の録音を開始（自動連続録音）
-              if (
-                !isBaseVoiceMode() &&
-                isRecording &&
-                mediaRecorder &&
-                mediaRecorder.state === "inactive"
-              ) {
-                mediaRecorder.start();
               }
             })
             .catch((error) => {
               console.error("エラー:", error);
-              if (
-                !isBaseVoiceMode() &&
-                isRecording &&
-                mediaRecorder &&
-                mediaRecorder.state === "inactive"
-              ) {
-                mediaRecorder.start();
-              }
             });
         };
         reader.readAsDataURL(audioBlob);
       }
-      function showHistory() {
-        window.location.href = "history";
-        alert("会話履歴を表示する機能は未実装です。");
-      }
-      function showResults() {
-        // フィードバック画面へ遷移
-        window.location.href = "feedback";
-      }
-      function showLogin() {
-        // フィードバック画面へ遷移
-        window.location.href = "login";
-      }
     </script>
   </body>
 </html>

     <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="window.location.href='userRegister.html'"
+        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>
+    <!-- 録音ボタン -->
+    <button class="record-button" id="recordButton" onclick="toggleRecording()">
+      <div class="record-icon" id="recordIcon"></div>
+    </button>
+    <!-- 結果ボタン -->
+    <div class="flex mt-5">
+      <button
+        id="historyButton"
+        onclick="window.location.href = 'history.html'"
+        class="result-button px-4 py-2 mx-2 bg-green-600 rounded-md hover:bg-green-700 transition"
+      >
+        会話履歴を表示
+      </button>
+      <button
+        id="feedbackButton"
+        onclick="window.location.href = 'feedback.html'"
+        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;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
         transition: all 0.2s ease;
       }
       .record-icon {
         width: 60px;
         height: 60px;
         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 = ["自分", "ahaha", "nufufu", "不明"];
+      let voiceData = [50, 20, 20, 10]; // 自分と不明の割合を仮設定
       // Chart.js の初期化
       const ctx = document.getElementById("speechChart").getContext("2d");
       const speechChart = new Chart(ctx, {
         type: "doughnut",
         data: {
+          labels: members,
           datasets: [
             {
+              data: voiceData,
               backgroundColor: ["#4caf50", "#757575"],
             },
           ],
         },
       });
+      //録音ボタン見た目変化
+      function toggleRecording() {
+        isRecording = !isRecording;
+        const recordIcon = document.getElementById("recordIcon");
+        if (isRecording) {
+          recordIcon.classList.add("w-10", "h-10", "bg-red-900", "rounded-md");
+        } else {
+          recordIcon.classList.remove(
+            "w-10",
+            "h-10",
+            "bg-red-900",
+            "rounded-md"
+          );
+        }
       }
       async function toggleRecording() {
             };
             mediaRecorder.start();
           } catch (error) {
             console.error("マイクへのアクセスに失敗しました:", error);
             isRecording = false;
           // 手動停止
           isRecording = false;
           recordButton.classList.remove("recording");
           if (mediaRecorder && mediaRecorder.state === "recording") {
             mediaRecorder.stop();
             count_voice = 0;
         const reader = new FileReader();
         reader.onloadend = () => {
           const base64String = reader.result.split(",")[1]; // Base64エンコードされた音声データ
+          fetch("/upload_audio", {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
               if (data.error) {
                 alert("エラー: " + data.error);
                 console.error(data.details);
+              } else if (data.rate !== undefined) {
                 // 通常モードの場合、解析結果をチャートに反映
                 if (count_voice === 0) {
                   speechChart.data.datasets[0].data = [
                 }
                 count_voice++;
                 speechChart.update();
               }
             })
             .catch((error) => {
               console.error("エラー:", error);
             });
         };
         reader.readAsDataURL(audioBlob);
       }
+      //function showHistory() {
+      //window.location.href = "history";
+      //alert("会話履歴を表示する機能は未実装です。");
+      //}
+      //function showResults() {
+      // フィードバック画面へ遷移
+      //window.location.href = "feedback";
+      //}
+      //function showLogin() {
+      // ログイン画面へ遷移
+      //window.location.href = "login";
+      //}
     </script>
   </body>
 </html>