Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

mizzzuno commited on Mar 21

Commit

dedbe0a

verified ·

1 Parent(s): 891dc6c

Update UI

Browse files

Files changed (1) hide show

templates/index.html +157 -79

templates/index.html CHANGED Viewed

@@ -6,55 +6,95 @@
     <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>
@@ -83,6 +123,31 @@
         height: 40px;
         border-radius: 10%;
       }
     </style>
     <script>
@@ -93,12 +158,18 @@
       let count_voice = 0;
       let before_rate = [];
       const RECORDING_INTERVAL_MS = 1000; // 1秒
       // メンバーとチャートの初期化
       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, {
@@ -123,7 +194,6 @@
           },
         },
       });
       // サーバーからメンバー情報を取得してチャートを更新する関数
       async function updateChartFrom() {
         try {
@@ -132,7 +202,6 @@
             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"];
@@ -140,13 +209,11 @@
             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);
@@ -155,7 +222,6 @@
           updateChart();
         }
       }
       function updateChart() {
         // 一人モードの場合は、ユーザーとグレー（無音）の比率をチャートに表示
         if (members.length === 1) {
@@ -165,40 +231,37 @@
         } 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();
             // 5秒ごとに録音を停止して送信するインターバルを設定
             recordingInterval = setInterval(() => {
@@ -224,7 +287,6 @@
           before_rate = [];
         }
       }
       function sendAudioChunks(chunks) {
         const audioBlob = new Blob(chunks, { type: "audio/wav" });
         const reader = new FileReader();
@@ -255,7 +317,6 @@
         };
         reader.readAsDataURL(audioBlob);
       }
       function getMemberColors(memberCount) {
         // 一人モードの場合は特別な処理をしない（updateChartで処理するため）
         if (memberCount <= 1) {
@@ -268,7 +329,6 @@
           return colors;
         }
       }
       function updateChartData(newRate) {
         // 一人モードの時の処理
         if (members.length === 1) {
@@ -277,12 +337,12 @@
             before_rate = [newRate];
           } else {
             // 一人モードでは、過去のデータと現在のデータを加重平均する
-            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"];
@@ -300,25 +360,21 @@
             );
             return;
           }
           let averagedRates = new Array(newRate.length);
           for (let i = 0; i < newRate.length; i++) {
             let tmp_rate;
             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++;
@@ -326,22 +382,44 @@
             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>

     <title>Voice Recorder Interface</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.10.0/css/all.css"
+    />
   </head>
+  <body
+    class="flex items-center justify-center h-screen bg-gray-900 text-white"
+    onclick="closeMenu(event)"
+  >
+    <!-- 全体を囲む枠 -->
+    <div
+      class="border-4 border-gray-400 p-8 rounded-lg w-full sm:w-auto relative"
     >
+      <!-- タイトル -->
+      <div class="text-center text-4xl font-bold mb-5">JustTalk</div>
+      <!-- ハンバーガーメニュー -->
+      <div class="absolute top-4 right-4">
+        <button
+          id="menuButton"
+          class="text-white text-2xl focus:outline-none"
+          onclick="toggleMenu(event)"
+        >
+          <i class="fas fa-bars"></i>
+        </button>
+        <!-- メニューの本体 -->
+        <div
+          id="menu"
+          class="absolute top-0 right-0 h-full w-64 bg-gray-800 text-white transform translate-x-full transition-transform duration-300 ease-in-out opacity-0 visibility-hidden"
+        >
+          <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
+          <button
+            onclick="showUserRegister()"
+            class="block px-4 py-2 text-sm hover:bg-gray-700"
+          >
+            メンバーを追加
+          </button>
+          <button
+            onclick="showTalkdetail()"
+            class="block px-4 py-2 text-sm hover:bg-gray-700"
+          >
+            会話履歴を表示
+          </button>
+          <button
+            onclick="showResults()"
+            class="block px-4 py-2 text-sm hover:bg-gray-700"
+          >
+            フィードバックを表示
+          </button>
+          <!-- 追加したリセットボタン -->
+          <button
+            onclick="resetAction()"
+            class="block px-4 py-2 text-sm hover:bg-gray-700"
+          >
+            リセット
+          </button>
+          <button
+            onclick="toggleMenu(event)"
+            class="block px-4 py-2 text-sm hover:bg-gray-700"
+          >
+            閉じる
+          </button>
+        </div>
+      </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 justify-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>
     <style>
         height: 40px;
         border-radius: 10%;
       }
+      .icon i {
+        font-size: 20px;
+      }
+      /* ハンバーガーメニュー */
+      #menu {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 10;
+        transform: translateX(100%); /* 初期状態で画面外 */
+        visibility: hidden; /* 非表示 */
+        opacity: 0; /* 非表示 */
+        background-color: rgba(31, 41, 55, 1); /* 不透明な背景色 */
+        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
+          opacity 0.3s ease-in-out; /* スライド後に表示 */
+      }
+      #menu.open {
+        transform: translateX(0); /* メニューが開く */
+        visibility: visible; /* 表示 */
+        opacity: 1; /* 完全に表示 */
+        transition: transform 0.3s ease-in-out, visibility 0s 0s,
+          opacity 0.3s ease-in-out; /* すぐに表示 */
+      }
     </style>
     <script>
       let count_voice = 0;
       let before_rate = [];
       const RECORDING_INTERVAL_MS = 1000; // 1秒
       // メンバーとチャートの初期化
       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, {
           },
         },
       });
       // サーバーからメンバー情報を取得してチャートを更新する関数
       async function updateChartFrom() {
         try {
             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"];
             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);
           updateChart();
         }
       }
       function updateChart() {
         // 一人モードの場合は、ユーザーとグレー（無音）の比率をチャートに表示
         if (members.length === 1) {
         } 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();
             // 5秒ごとに録音を停止して送信するインターバルを設定
             recordingInterval = setInterval(() => {
           before_rate = [];
         }
       }
       function sendAudioChunks(chunks) {
         const audioBlob = new Blob(chunks, { type: "audio/wav" });
         const reader = new FileReader();
         };
         reader.readAsDataURL(audioBlob);
       }
       function getMemberColors(memberCount) {
         // 一人モードの場合は特別な処理をしない（updateChartで処理するため）
         if (memberCount <= 1) {
           return colors;
         }
       }
       function updateChartData(newRate) {
         // 一人モードの時の処理
         if (members.length === 1) {
             before_rate = [newRate];
           } else {
             // 一人モードでは、過去のデータと現在のデータを加重平均する
+            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"];
             );
             return;
           }
           let averagedRates = new Array(newRate.length);
           for (let i = 0; i < newRate.length; i++) {
             let tmp_rate;
             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++;
             members.length
           );
         }
         speechChart.update();
       }
+      // メニューの表示・非表示
+      function toggleMenu(event) {
+        event.stopPropagation();
+        const menu = document.getElementById("menu");
+        menu.classList.toggle("open");
       }
+      function closeMenu(event) {
+        const menu = document.getElementById("menu");
+        if (
+          menu.classList.contains("open") &&
+          !menu.contains(event.target) &&
+          !event.target.closest("#menuButton")
+        ) {
+          menu.classList.remove("open");
+        }
+      }
+      // リセットボタンの処理
+      function resetAction() {
+        alert("リセットが実行されました！");
       }
       function showUserRegister() {
         fetch("/reset");
         window.location.href = "userregister";
       }
+      function showTalkdetail() {
+        window.location.href = "talk_detail";
+      }
+      function showResults() {
+        window.location.href = "feedback";
+      }
     </script>
   </body>
 </html>