Upload 9 files

static/menu.js

@@ -1,50 +1,50 @@
-  // Show user registration page
-  function showUserRegister() {
-    fetch("/reset");
-    window.location.href = "userregister";
-  }
-
-  // Show recorder page
-  function showRecorder() {
-    window.location.href = "index";
-  }
-
-  // Show results page
-  function showResults() {
-    window.location.href = "feedback";
-  }
-
-  // Show talk detail page
-  function showTalkDetail() {
-    window.location.href = "talk_detail";
-  }
-
-  // Reset action page
-  function resetAction() {
-    window.location.href = "reset_html";
-  }
-
-  // Toggle hamburger menu visibility
-  function toggleMenu(event) {
-    event.stopPropagation();  // Prevents click event from propagating to the document
-    const menu = document.getElementById("menu");
-    menu.classList.toggle("open");
-  }
-
-  // Close the menu if clicked outside
-  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");
-    }
-  }
-
-  // Add event listener for closing the menu when clicking outside
-  document.addEventListener("click", closeMenu);
-
-  // Show recorder page
+  // Show user registration page
+  function showUserRegister() {
+    fetch("/reset");
+    window.location.href = "userregister";
+  }
+
+  // Show recorder page
+  function showRecorder() {
+    window.location.href = "index";
+  }
+
+  // Show results page
+  function showResults() {
+    window.location.href = "feedback";
+  }
+
+  // Show talk detail page
+  function showTalkDetail() {
+    window.location.href = "talk_detail";
+  }
+
+  // Reset action page
+  function resetAction() {
+    window.location.href = "reset_html";
+  }
+
+  // Toggle hamburger menu visibility
+  function toggleMenu(event) {
+    event.stopPropagation();  // Prevents click event from propagating to the document
+    const menu = document.getElementById("menu");
+    menu.classList.toggle("open");
+  }
+
+  // Close the menu if clicked outside
+  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");
+    }
+  }
+
+  // Add event listener for closing the menu when clicking outside
+  document.addEventListener("click", closeMenu);
+
+  // Show recorder page 名前に気を付けて！
   document.getElementById("add-btn").addEventListener("click", showRecorder);

static/process.js

@@ -1,222 +1,222 @@
-
-      let isRecording = false;
-      let mediaRecorder;
-      let audioChunks = [];
-      let recordingInterval;
-      let count_voice = 0;
-      let before_rate = [];
-      const RECORDING_INTERVAL_MS = 5000; // 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();
+
+      let isRecording = false;
+      let mediaRecorder;
+      let audioChunks = [];
+      let recordingInterval;
+      let count_voice = 0;
+      let before_rate = [];
+      const RECORDING_INTERVAL_MS = 5000; // 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();
       }

static/register_record.js

@@ -63,8 +63,9 @@ function sendAudioChunks(chunks, button) {
   const reader = new FileReader();
   reader.onloadend = () => {
     const base64String = reader.result.split(",")[1]; // Base64エンコードされた音声データ
-    const form = button.closest("form");
-    const nameInput = form.querySelector('input[name="name"]');
+    // フォームの取得方法を変更
+    const form = button.closest(".user-item")?.querySelector("form")
+    const nameInput = form?.querySelector('input[name="name"]');
     const name = nameInput ? nameInput.value : "unknown"; // 名前がない
     fetch("/upload_base_audio", {
       method: "POST",
@@ -96,29 +97,54 @@ function sendAudioChunks(chunks, button) {
   reader.readAsDataURL(audioBlob);
 }
 
-document.getElementById("add-btn").addEventListener("click", () => {
-  const newItem = document.createElement("div");
-  newItem.className = "flex items-center gap-3 flex-wrap";
-  newItem.innerHTML = `
-              <form
-                  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" aria-label="音声録音開始">
-                      <div class="record-icon"></div>
-                  </button>
-              </form>
-          `;
-  newItem.addEventListener("click", handleRecording);
-  document.getElementById("people-list").appendChild(newItem);
-  userCount++; // 新しいメンバーを追加するたびにカウントを増やす
-});
+// 前の画面に戻る
+function goBack() {
+  window.history.back();
+}
+
+// Add user function
+function addUser() {
+  const userName = prompt("ユーザー名を入力してください");
+  if (userName) {
+    const userList = document.getElementById("people-list");
+    const userDiv = document.createElement("div");
+    userDiv.classList.add(
+      "user-item", // 追加
+      "bg-gray-700",
+      "p-4",
+      "rounded-lg",
+      "text-white",
+      "flex",
+      "justify-between",
+      "items-center",
+      "flex-wrap", // 追加
+      "gap-3" // 追加
+    );
+    userDiv.innerHTML = `
+      <form
+        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="名前を入力"
+          value="${userName}"
+          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" aria-label="音声録音開始">
+          <div class="record-icon"></div>
+        </button>
+      </form>
+    `;
+    userDiv
+      .querySelector(".record-button")
+      .addEventListener("click", handleRecording);
+    userList.appendChild(userDiv);
+    userCount++;
+  }
+}
+
+document.getElementById("add-btn").addEventListener("click", addUser);