Merge branch 'main' of https://huggingface.co/spaces/Justtalk/Justalk

app.py

@@ -196,8 +196,9 @@ def upload_audio():
 @app.route('/reset', methods=['GET'])
 def reset():
     global users
-    users=[]
-    return 200
+    users = []
+    return jsonify({"status": "success", "message": "Users reset"}), 200
+
 
 @app.route('/upload_base_audio', methods=['POST'])
 def upload_base_audio():

static/feedback.js

@@ -16,6 +16,7 @@ async function getAnalysis() {
   loader.style.display = "block";
   try {
     const response = await fetch("/analyze");
+
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
@@ -32,6 +33,16 @@ async function getAnalysis() {
     const pleasantConversation = analysis.pleasantConversation;
     const blameOrHarassment = analysis.blameOrHarassment;
 
+    if (harassmentPresent) {
+      harassmentPresent = "あり";
+    } else {
+      harassmentPresent = "なし";
+    }
+
+    if (harassmentType == null) {
+      harassmentType = "該当なし";
+    }
+
     loader.style.display = "none";
     // DOMに表示
     document.getElementById(

static/register_record.js

@@ -1,150 +1,150 @@
-let mediaRecorder;
-let audioChunks = [];
-let userCount = 0; // 追加されたメンバー数を保持
-let isRecording = false; // 録音中かどうかを判定するフラグ
-let currentRecordingButton = null; // 現在録音中のボタンを保持
-let userNames = [];
-
-function toggleRecording(button) {
-  button.classList.toggle("recording");
-}
-
-async function startRecording(button) {
-  if (isRecording && currentRecordingButton !== button) return; // 他の人が録音中なら何もしない
-  isRecording = true; // 録音中に設定
-  currentRecordingButton = button; // 録音中のボタンを記録
-
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({
-      audio: true,
-    });
-    mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
-    audioChunks = [];
-    mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
-    mediaRecorder.onstop = () => {
-      sendAudioChunks(audioChunks, button); // ボタン情報を渡す
-      audioChunks = [];
-      isRecording = false; // 録音停止後はフラグを戻す
-      currentRecordingButton = null; // 録音ボタンを解除
-    };
-    mediaRecorder.start();
-    toggleRecording(button);
-  } catch (err) {
-    console.error("マイクアクセスに失敗しました:", err);
-    isRecording = false; // エラー発生時もフラグを戻す
-    currentRecordingButton = null;
-  }
-}
-
-function stopRecording(button) {
-  if (!isRecording) return; // 録音中でない場合は停止しない
-  mediaRecorder.stop();
-  toggleRecording(button);
-}
-
-function handleRecording(e) {
-  const button = e.target.closest(".record-button");
-  if (button) {
-    if (isRecording && currentRecordingButton !== button) {
-      // 他の人が録音中なら反応しない
-      return;
-    }
-    if (mediaRecorder && mediaRecorder.state === "recording") {
-      stopRecording(button);
-    } else {
-      startRecording(button);
-    }
-  }
-}
-
-function sendAudioChunks(chunks, button) {
-  // 引数に button を追加
-  const audioBlob = new Blob(chunks, { type: "audio/wav" });
-  const reader = new FileReader();
-  reader.onloadend = () => {
-    const base64String = reader.result.split(",")[1]; // Base64エンコードされた音声データ
-    // フォームの取得方法を変更
-    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",
-      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 {
-          console.log("音声データ送信成功:", data);
-          userNames.push(name);
-          // 必要に応じて、ここでUIの変更（ボタンの有効化など）を行う
-          // 例: button.disabled = true; // 送信ボタンを無効化
-          // 例: button.classList.remove("recording"); //録音中のスタイルを解除
-        }
-      })
-      .catch((error) => {
-        console.error("エラー:", error);
-      });
-  };
-  reader.readAsDataURL(audioBlob);
-}
-
-// 前の画面に戻る
-function goBack() {
-  window.location.href = "index";
-}
-
-// 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);
+let mediaRecorder;
+let audioChunks = [];
+let userCount = 0; // 追加されたメンバー数を保持
+let isRecording = false; // 録音中かどうかを判定するフラグ
+let currentRecordingButton = null; // 現在録音中のボタンを保持
+let userNames = [];
+
+function toggleRecording(button) {
+  button.classList.toggle("recording");
+}
+
+async function startRecording(button) {
+  if (isRecording && currentRecordingButton !== button) return; // 他の人が録音中なら何もしない
+  isRecording = true; // 録音中に設定
+  currentRecordingButton = button; // 録音中のボタンを記録
+
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: true,
+    });
+    mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
+    audioChunks = [];
+    mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
+    mediaRecorder.onstop = () => {
+      sendAudioChunks(audioChunks, button); // ボタン情報を渡す
+      audioChunks = [];
+      isRecording = false; // 録音停止後はフラグを戻す
+      currentRecordingButton = null; // 録音ボタンを解除
+    };
+    mediaRecorder.start();
+    toggleRecording(button);
+  } catch (err) {
+    console.error("マイクアクセスに失敗しました:", err);
+    isRecording = false; // エラー発生時もフラグを戻す
+    currentRecordingButton = null;
+  }
+}
+
+function stopRecording(button) {
+  if (!isRecording) return; // 録音中でない場合は停止しない
+  mediaRecorder.stop();
+  toggleRecording(button);
+}
+
+function handleRecording(e) {
+  const button = e.target.closest(".record-button");
+  if (button) {
+    if (isRecording && currentRecordingButton !== button) {
+      // 他の人が録音中なら反応しない
+      return;
+    }
+    if (mediaRecorder && mediaRecorder.state === "recording") {
+      stopRecording(button);
+    } else {
+      startRecording(button);
+    }
+  }
+}
+
+function sendAudioChunks(chunks, button) {
+  // 引数に button を追加
+  const audioBlob = new Blob(chunks, { type: "audio/wav" });
+  const reader = new FileReader();
+  reader.onloadend = () => {
+    const base64String = reader.result.split(",")[1]; // Base64エンコードされた音声データ
+    // フォームの取得方法を変更
+    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",
+      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 {
+          console.log("音声データ送信成功:", data);
+          userNames.push(name);
+          // 必要に応じて、ここでUIの変更（ボタンの有効化など）を行う
+          // 例: button.disabled = true; // 送信ボタンを無効化
+          // 例: button.classList.remove("recording"); //録音中のスタイルを解除
+        }
+      })
+      .catch((error) => {
+        console.error("エラー:", error);
+      });
+  };
+  reader.readAsDataURL(audioBlob);
+}
+
+// 録音画面に移動
+function showRecorder() {
+  window.location.href = "index";
+}
+
+// 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);

templates/feedback.html

@@ -1,170 +1,174 @@
-<!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>
-    <script>
-      tailwind.config = {
-        darkMode: "class",
-      };
-    </script>
-    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
-    <style>
-      /* 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;
-        color: #fff;
-      }
-
-      /* 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);
-      }
-
-      /* 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);
-        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);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="loader" id="loader">
-      <div class="one"></div>
-      <div class="two"></div>
-      <div class="three"></div>
-      <div class="four"></div>
-    </div>
-    <div class="main-content relative">
-      <!-- Title -->
-      <div class="main-title">会話フィードバック</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>
-
-      <!-- Feedback Details -->
-      <div class="text-xl font-semibold mb-6" id="level">会話レベル:</div>
-      <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>
-      <div class="text-lg mb-2" id="Harassment_type">ハラスメントの種類:</div>
-      <div class="text-lg mb-2" id="Harassment_loop">繰り返しの程度:</div>
-      <div class="text-lg mb-2" id="Harassment_comfort">会話の心地よさ:</div>
-      <div class="text-lg mb-2" id="Harassment_volume">
-        非難またはハラスメントの程度:
-      </div>
-    </div>
-
-    <script src="{{ url_for('static', filename='menu.js') }}"></script>
-    <script src="{{ url_for('static', filename='feedback.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>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='loading.css') }}"
+    />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: "class",
+      };
+    </script>
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
+    <style>
+      /* 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;
+        color: #fff;
+      }
+
+      /* 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);
+      }
+
+      /* 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);
+        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);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="loader" id="loader">
+      <div class="one"></div>
+      <div class="two"></div>
+      <div class="three"></div>
+      <div class="four"></div>
+    </div>
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">会話フィードバック</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>
+
+      <!-- Feedback Details -->
+      <div class="text-xl font-semibold mb-6" id="level">会話レベル:</div>
+      <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>
+      <div class="text-lg mb-2" id="Harassment_type">ハラスメントの種類:</div>
+      <div class="text-lg mb-2" id="Harassment_loop">繰り返しの程度:</div>
+      <div class="text-lg mb-2" id="Harassment_comfort">会話の心地よさ:</div>
+      <div class="text-lg mb-2" id="Harassment_volume">
+        非難またはハラスメントの程度:
+      </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='menu.js') }}"></script>
+    <script src="{{ url_for('static', filename='feedback.js') }}"></script>
+  </body>
+</html>

templates/talkDetail.html

@@ -1,49 +1,151 @@
-<!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>
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='loading.css') }}"
+    />
+    <style>
+      .main-content {
+        border: 5px solid rgba(255, 255, 255, 0.2);
+        border-radius: 1rem;
+        margin: 1rem; /* 外側の余白 */
+        width: 90%;
+        max-width: 500px;
+        /*width: 100%; */ /* 枠線全体を広げる */
+        /*max-width: 90%;*/ /* 最大幅を画面の90%に設定 */
+      }
+
+      /* 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);
+      }
+
+      /* 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);
+        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);
+      }
+    </style>
+  </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="main-content relative">
+      <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 w-full max-w-none"
+      >
+        <h2 class="text-2xl font-semibold mb-4 text-center">
+          会話の文字起こし表示
+        </h2>
+
+        <!-- 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>
+        <!-- Hamburger Menu End -->
+
+        <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>
+      <script src="{{ url_for('static', filename='talk_detail.js') }}"></script>
+      <script src="{{ url_for('static', filename='menu.js') }}"></script>
+    </div>
+  </body>
+</html>

templates/userRegister.html

@@ -1,151 +1,151 @@
-<!DOCTYPE html>
-<html lang="ja">
-  <head>
-    <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%,
-        100% {
-          transform: scale(1);
-        }
-        50% {
-          transform: scale(1.1);
-        }
-      }
-      .animate-pulse-scale {
-        animation: pulse-scale 1s infinite;
-      }
-
-      /* Record Button Styles */
-      .record-button {
-        width: 50px;
-        height: 50px;
-        background-color: transparent;
-        border-radius: 50%;
-        border: 2px 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.3s ease;
-      }
-      .record-icon {
-        width: 35px;
-        height: 35px;
-        background-color: #d32f2f;
-        border-radius: 50%;
-        transition: all 0.3s ease;
-      }
-      .record-button.recording .record-icon {
-        background-color: #f44336; /* 録音中は赤色 */
-        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
-      }
-      .recording .record-icon {
-        width: 20px;
-        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) {
-        .main-content {
-          padding: 1.5rem;
-        }
-      }
-    </style>
-  </head>
-  <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>
-
-      <!-- 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="goBack()"
-        class="action-button back-button"
-      >
-        戻る
-      </button>
-    </div>
-
-    <script src="{{ url_for('static', filename='register_record.js') }}"></script>
-    
-
-    
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <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%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+        }
+      }
+      .animate-pulse-scale {
+        animation: pulse-scale 1s infinite;
+      }
+
+      /* Record Button Styles */
+      .record-button {
+        width: 50px;
+        height: 50px;
+        background-color: transparent;
+        border-radius: 50%;
+        border: 2px 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.3s ease;
+      }
+      .record-icon {
+        width: 35px;
+        height: 35px;
+        background-color: #d32f2f;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+      .record-button.recording .record-icon {
+        background-color: #f44336; /* 録音中は赤色 */
+        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
+      }
+      .recording .record-icon {
+        width: 20px;
+        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) {
+        .main-content {
+          padding: 1.5rem;
+        }
+      }
+    </style>
+  </head>
+  <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>
+
+      <!-- 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="action-button back-button"
+      >
+        <i class="fas fa-microphone"></i> 録音画面を表示
+      </button>
+    </div>
+
+    <script src="{{ url_for('static', filename='register_record.js') }}"></script>
+    
+
+    
+  </body>
+</html>