Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on 26 days ago

Commit

4df27e3

verified ·

1 Parent(s): 4663c23

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +161 -422

templates/index.html CHANGED Viewed

@@ -1,422 +1,161 @@
-<!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>
-    <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="showResults()"
-            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="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>
-      .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%;
-      }
-      .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; /* すぐに表示 */
-      }
-      /* レスポンシブデザイン */
-      @media (max-width: 640px) {
-        .w-72 {
-          width: 90%;
-        }
-        .h-72 {
-          height: 300px;
-        }
-      }
-    </style>
-    <script>
-      let isRecording = false;
-      let mediaRecorder;
-      let audioChunks = [];
-      let recordingInterval;
-      let count_voice = 0;
-      let before_rate = [];
-      const RECORDING_INTERVAL_MS = 1000; // 5秒
-      // メンバーとチャートの初期化
-      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();
-            // 5秒ごとに録音を停止して送信するインターバルを設定
-            recordingInterval = setInterval(() => {
-              if (mediaRecorder && mediaRecorder.state === "recording") {
-                mediaRecorder.stop();
-                mediaRecorder.start();
-              }
-            }, RECORDING_INTERVAL_MS);
-          } 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();
-          }
-          clearInterval(recordingInterval);
-          count_voice = 0;
-          before_rate = [];
-        }
-      }
-      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);
-              } else if (data.rates !== undefined) {
-                updateChartData(data.rates);
-              }
-            })
-            .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 {
-            // 一人モードでは、過去のデータと現在のデータを加重平均する
-            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 {
-          console.log(before_rate)
-          // 複数人モードの処理
-          if (!Array.isArray(newRate)) {
-            console.error("newRate is not an array:", newRate);
-            return;
-          }
-          if (newRate.length !== members.length) {
-            console.error(
-              "newRate length does not match members length:",
-              newRate,
-              members
-            );
-            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++;
-          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>
+    <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="showResults()"
+            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="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>
+      .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%;
+      }
+      .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; /* すぐに表示 */
+      }
+      /* レスポンシブデザイン */
+      @media (max-width: 640px) {
+        .w-72 {
+          width: 90%;
+        }
+        .h-72 {
+          height: 300px;
+        }
+      }
+    </style>
+<script src="{{ url_for('static', filename='process.js') }}"></script>
+  </body>
+</html>