commit_032221

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);

static/talk_detail.js

@@ -13,14 +13,6 @@ async function displayTranscription() {
     if (!data || !data.transcription) {
       throw new Error("会話データが見つかりませんでした。");
     }
-    /*
-      const formattedText = conversations
-
-        .map((conv) => `【${conv.speaker}】 ${conv.text}`)
-        .join("\n");
-      console.log("フォーマットテキスト:", formattedText);
-      transcriptionElement.textContent = formattedText;
-      */
 
     transcriptionElement.textContent = conversations;
     loader.style.display = "none";

templates/feedback.html

@@ -146,14 +146,12 @@
           </button>
         </div>
       </div>
-
       <div class="loader" id="loader">
         <div class="one"></div>
         <div class="two"></div>
         <div class="three"></div>
         <div class="four"></div>
       </div>
-
       <!-- Feedback Details -->
       <div class="text-xl font-semibold mb-6" id="level">会話レベル:</div>
       <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>

templates/index.html

@@ -1,228 +1,228 @@
-<!DOCTYPE html>
-<html lang="ja">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>JustTalk - Voice Analysis</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"
-    />
-    <style>
-      /* Custom Chart.js Styles */
-      #speechChart {
-        background-color: rgba(255, 255, 255, 0.05);
-        border-radius: 10px;
-        padding: 10px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      }
-
-      /* Record Button Styles */
-      .record-button {
-        width: 90px;
-        height: 90px;
-        background-color: transparent;
-        border-radius: 50%;
-        border: 5px solid white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
-        transition: all 0.2s ease;
-      }
-
-      .record-icon {
-        width: 70px;
-        height: 70px;
-        background-color: #e53e3e;
-        border-radius: 50%;
-        transition: all 0.2s ease;
-      }
-
-      .recording .record-icon {
-        width: 50px;
-        height: 50px;
-        border-radius: 15%;
-        background-color: #c53030;
-      }
-
-      .icon i {
-        font-size: 24px;
-      }
-
-      /* Hamburger Menu Styles */
-      #menu {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 10;
-        transform: translateX(-100%);
-        visibility: hidden;
-        opacity: 0;
-        background-color: rgb(31, 41, 55);
-        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
-          opacity 0.3s ease-in-out;
-        backdrop-filter: blur(10px);
-        border-right: 1px solid rgba(255, 255, 255, 0.2);
-      }
-
-      #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;
-      }
-
-      #menu button {
-        transition: background-color 0.2s ease;
-        background-color: rgba(0, 0, 0, 0.1); /* 変更点: 透明度を 10% に変更 */
-        margin: 2px;
-        border-radius: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 10px;
-        padding: 0.75rem 1rem;
-        width: 100%;
-        text-align: left;
-        border: none;
-        color: #fff;
-        font-size: 1rem;
-        cursor: pointer;
-      }
-
-      #menu button:hover {
-        background-color: rgba(55, 65, 81, 0.7);
-      }
-
-      /* Responsive Design */
-      @media (max-width: 640px) {
-        .w-72 {
-          width: 95%;
-        }
-        .h-72 {
-          height: 350px;
-        }
-      }
-      /* Main Container */
-      body {
-        background: linear-gradient(135deg, #2c3e50, #1f2937);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 100vh;
-        font-family: "Arial", sans-serif;
-      }
-
-      /* Main Content Wrapper */
-      .main-content {
-        border: 5px solid rgba(255, 255, 255, 0.2);
-        padding: 2rem;
-        border-radius: 1rem;
-        width: 90%;
-        max-width: 500px;
-        background-color: rgba(0, 0, 0, 0.3);
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
-        text-align: center;
-      }
-
-      /* Title */
-      .main-title {
-        font-size: 2.5rem;
-        font-weight: bold;
-        margin-bottom: 1.5rem;
-        color: #fff;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-      }
-
-      /* Hamburger Menu Button */
-      #menuButton {
-        background-color: rgba(255, 255, 255, 0.1);
-        border: none;
-        border-radius: 50%;
-        padding: 0.5rem;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-      }
-
-      #menuButton:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-    </style>
-  </head>
-  <body onclick="closeMenu(event)">
-    <!-- Main Content Wrapper -->
-    <div class="main-content relative">
-      <!-- Title -->
-      <div class="main-title">JustTalk</div>
-
-      <!-- Hamburger Menu -->
-      <div class="absolute top-4 left-4">
-        <button
-          id="menuButton"
-          class="text-white text-2xl focus:outline-none"
-          onclick="toggleMenu(event)"
-        >
-          <i class="fas fa-bars"></i>
-        </button>
-
-        <!-- Menu Content -->
-        <div
-          id="menu"
-          class="absolute top-0 left-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()">
-            <i class="fas fa-user-plus"></i> メン���ーを追加
-          </button>
-          <button onclick="showRecorder()">
-            <i class="fas fa-microphone"></i> 録音画面を表示
-          </button>
-          <button onclick="showResults()">
-            <i class="fas fa-chart-bar"></i> フィードバックを表示
-          </button>
-          <button onclick="showTalkDetail()">
-            <i class="fas fa-comments"></i> 会話詳細を表示
-          </button>
-          <button onclick="resetAction()">
-            <i class="fas fa-redo"></i> リセット
-          </button>
-          <button onclick="toggleMenu(event)">
-            <i class="fas fa-times"></i> 閉じる
-          </button>
-        </div>
-      </div>
-
-      <!-- Chart Display -->
-      <div class="chart w-72 h-72 mb-5 mx-auto">
-        <canvas id="speechChart"></canvas>
-      </div>
-
-      <!-- Record Form -->
-      <form
-        id="recordForm"
-        action="/submit"
-        method="POST"
-        class="flex items-center justify-center space-x-2 w-full sm:w-auto"
-        onsubmit="event.preventDefault();"
-      >
-        <!-- Record Button -->
-        <button
-          type="button"
-          class="record-button"
-          id="recordButton"
-          onclick="toggleRecording()"
-        >
-          <div class="record-icon" id="recordIcon"></div>
-        </button>
-      </form>
-    </div>
-
-    <script src="{{ url_for('static', filename='process.js') }}"></script>
-    <script src="{{ url_for('static', filename='menu.js') }}"></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>JustTalk - Voice Analysis</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"
+    />
+    <style>
+      /* Custom Chart.js Styles */
+      #speechChart {
+        background-color: rgba(255, 255, 255, 0.05);
+        border-radius: 10px;
+        padding: 10px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      }
+
+      /* Record Button Styles */
+      .record-button {
+        width: 90px;
+        height: 90px;
+        background-color: transparent;
+        border-radius: 50%;
+        border: 5px solid white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
+        transition: all 0.2s ease;
+      }
+
+      .record-icon {
+        width: 70px;
+        height: 70px;
+        background-color: #e53e3e;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+      }
+
+      .recording .record-icon {
+        width: 50px;
+        height: 50px;
+        border-radius: 15%;
+        background-color: #c53030;
+      }
+
+      .icon i {
+        font-size: 24px;
+      }
+
+      /* Hamburger Menu Styles */
+      #menu {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        transform: translateX(-100%);
+        visibility: hidden;
+        opacity: 0;
+        background-color: rgb(31, 41, 55);
+        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
+          opacity 0.3s ease-in-out;
+        backdrop-filter: blur(10px);
+        border-right: 1px solid rgba(255, 255, 255, 0.2);
+      }
+
+      #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;
+      }
+
+      #menu button {
+        transition: background-color 0.2s ease;
+        background-color: rgba(0, 0, 0, 0.1); /* 変更点: 透明度を 10% に変更 */
+        margin: 2px;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        padding: 0.75rem 1rem;
+        width: 100%;
+        text-align: left;
+        border: none;
+        color: #fff;
+        font-size: 1rem;
+        cursor: pointer;
+      }
+
+      #menu button:hover {
+        background-color: rgba(55, 65, 81, 0.7);
+      }
+
+      /* Responsive Design */
+      @media (max-width: 640px) {
+        .w-72 {
+          width: 95%;
+        }
+        .h-72 {
+          height: 350px;
+        }
+      }
+      /* Main Container */
+      body {
+        background: linear-gradient(135deg, #2c3e50, #1f2937);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        font-family: "Arial", sans-serif;
+      }
+
+      /* Main Content Wrapper */
+      .main-content {
+        border: 5px solid rgba(255, 255, 255, 0.2);
+        padding: 2rem;
+        border-radius: 1rem;
+        width: 90%;
+        max-width: 500px;
+        background-color: rgba(0, 0, 0, 0.3);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+        text-align: center;
+      }
+
+      /* Title */
+      .main-title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 1.5rem;
+        color: #fff;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      }
+
+      /* Hamburger Menu Button */
+      #menuButton {
+        background-color: rgba(255, 255, 255, 0.1);
+        border: none;
+        border-radius: 50%;
+        padding: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+      }
+
+      #menuButton:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    </style>
+  </head>
+  <body onclick="closeMenu(event)">
+    <!-- Main Content Wrapper -->
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">JustTalk</div>
+
+      <!-- Hamburger Menu -->
+      <div class="absolute top-4 left-4">
+        <button
+          id="menuButton"
+          class="text-white text-2xl focus:outline-none"
+          onclick="toggleMenu(event)"
+        >
+          <i class="fas fa-bars"></i>
+        </button>
+
+        <!-- Menu Content -->
+        <div
+          id="menu"
+          class="absolute top-0 left-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()">
+            <i class="fas fa-user-plus"></i> メンバーを追加
+          </button>
+          <button onclick="showRecorder()">
+            <i class="fas fa-microphone"></i> 録音画面を表示
+          </button>
+          <button onclick="showResults()">
+            <i class="fas fa-chart-bar"></i> フィードバックを表示
+          </button>
+          <button onclick="showTalkDetail()">
+            <i class="fas fa-comments"></i> 会話詳細を表示
+          </button>
+          <button onclick="resetAction()">
+            <i class="fas fa-redo"></i> リセット
+          </button>
+          <button onclick="toggleMenu(event)">
+            <i class="fas fa-times"></i> 閉じる
+          </button>
+        </div>
+      </div>
+
+      <!-- Chart Display -->
+      <div class="chart w-72 h-72 mb-5 mx-auto">
+        <canvas id="speechChart"></canvas>
+      </div>
+
+      <!-- Record Form -->
+      <form
+        id="recordForm"
+        action="/submit"
+        method="POST"
+        class="flex items-center justify-center space-x-2 w-full sm:w-auto"
+        onsubmit="event.preventDefault();"
+      >
+        <!-- Record Button -->
+        <button
+          type="button"
+          class="record-button"
+          id="recordButton"
+          onclick="toggleRecording()"
+        >
+          <div class="record-icon" id="recordIcon"></div>
+        </button>
+      </form>
+    </div>
+
+    <script src="{{ url_for('static', filename='process.js') }}"></script>
+    <script src="{{ url_for('static', filename='menu.js') }}"></script>
+  </body>
+</html>

templates/talkDetail.html

@@ -1,49 +1,49 @@
-<!DOCTYPE html>
-<html lang="ja" class="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>会話詳細画面</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link
-      rel="stylesheet"
-      href="{{ url_for('static', filename='loading.css') }}"
-    />
-  </head>
-  <body
-    class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center"
-  >
-    <div class="loader" id="loader">
-      <div class="one"></div>
-      <div class="two"></div>
-      <div class="three"></div>
-      <div class="four"></div>
-    </div>
-    <div
-      class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl"
-    >
-      <h2 class="text-2xl font-semibold mb-4">会話の文字起こし表示</h2>
-      <div
-        id="transcription"
-        class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4 max-h-96 overflow-y-auto"
-      >
-        ここに会話内容が表示されます。
-      </div>
-      <div class="flex justify-center gap-4">
-        <button
-          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-          onclick="showRecorder()"
-        >
-          録音画面を表示
-        </button>
-        <button
-          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-          onclick="showFeedback()"
-        >
-          フィードバック画面を表示
-        </button>
-      </div>
-    </div>
-    <script src="{{ url_for('static', filename='talk_detail.js') }}"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="ja" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>会話詳細画面</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='loading.css') }}"
+    />
+  </head>
+  <body
+    class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center"
+  >
+    <div class="loader" id="loader">
+      <div class="one"></div>
+      <div class="two"></div>
+      <div class="three"></div>
+      <div class="four"></div>
+    </div>
+    <div
+      class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl"
+    >
+      <h2 class="text-2xl font-semibold mb-4">会話の文字起こし表示</h2>
+      <div
+        id="transcription"
+        class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4 max-h-96 overflow-y-auto"
+      >
+        ここに会話内容が表示されます。
+      </div>
+      <div class="flex justify-center gap-4">
+        <button
+          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          onclick="showRecorder()"
+        >
+          録音画面を表示
+        </button>
+        <button
+          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          onclick="showFeedback()"
+        >
+          フィードバック画面を表示
+        </button>
+      </div>
+    </div>
+    <script src="{{ url_for('static', filename='talk_detail.js') }}"></script>
+  </body>
+</html>

templates/userRegister.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <title>ユーザー音声登録</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
     <style>
       @keyframes pulse-scale {
         0%,
@@ -17,6 +18,8 @@
       .animate-pulse-scale {
         animation: pulse-scale 1s infinite;
       }
+
+      /* Record Button Styles */
       .record-button {
         width: 50px;
         height: 50px;
@@ -38,6 +41,7 @@
         transition: all 0.3s ease;
       }
       .record-button.recording .record-icon {
+        background-color: #f44336; /* 録音中は赤色 */
         border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
       }
       .recording .record-icon {
@@ -45,46 +49,103 @@
         height: 20px;
         border-radius: 50%;
       }
+
+      /* Main Container */
+      body {
+        background: linear-gradient(135deg, #2c3e50, #1f2937);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        font-family: "Arial", sans-serif;
+      }
+
+      /* Main Content Wrapper */
+      .main-content {
+        border: 5px solid rgba(255, 255, 255, 0.2);
+        padding: 2rem;
+        border-radius: 1rem;
+        width: 90%;
+        max-width: 500px;
+        background-color: rgba(0, 0, 0, 0.3);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+        text-align: center;
+      }
+
+      /* Title */
+      .main-title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 1.5rem;
+        color: #fff;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      }
+
+      /* Buttons */
+      .action-button {
+        margin-top: 1rem;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        width: 100%;
+      }
+
+      .action-button:hover {
+        background-color: rgba(55, 65, 81, 0.7);
+      }
+
+      .back-button {
+        background-color: #607d8b; /* 落ち着いたグレー */
+        color: white;
+      }
+
+      .add-button {
+        background-color: #4caf50; /* 落ち着いた緑色 */
+        color: white;
+      }
+
+      /* Disabled State */
+      .disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      /* Responsive Design */
       @media (max-width: 640px) {
-        .container {
-          padding: 2rem;
+        .main-content {
+          padding: 1.5rem;
         }
       }
     </style>
   </head>
-  <body
-    class="bg-gray-800 text-gray-100 dark:bg-gray-900 dark:text-gray-300 transition-colors"
-  >
-    <div class="container mx-auto p-5 max-w-full sm:max-w-2xl">
+  <body>
+    <!-- Main Content Wrapper -->
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">ユーザー音声登録</div>
+
+      <!-- User List -->
       <div id="people-list" class="space-y-4"></div>
-      <button
-        id="add-btn"
-        class="mt-6 px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
-      >
-        メンバーを追加
+
+      <!-- Add Button -->
+      <button id="add-btn" class="action-button add-button">
+        <i class="fas fa-user-plus"></i> メンバーを追加
       </button>
 
-      <!-- 録音画面に戻るボタン -->
+      <!-- Back Button -->
       <button
         id="backButton"
-        onclick="showRecorder()"
-        class="mt-6 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+        onclick="goBack()"
+        class="action-button back-button"
       >
-        録音画面に戻る
+        戻る
       </button>
     </div>
 
     <script src="{{ url_for('static', filename='register_record.js') }}"></script>
-    <script>
-      function showRecorder() {
-        // 録音画面へ遷移
-        window.location.href = "index";
-      }
-    </script>
-    <script>
-      
-
+    
 
-    </script>
+    
   </body>
 </html>