addreset

app.py

@@ -48,6 +48,16 @@ def userregister():
 def confirm():
     return jsonify({'members': users}), 200
 
+#リセット画面（テンプレート: reset.html）
+@app.route('/reset_html', methods=['GET', 'POST']) 
+def reset_html():
+    return render_template('reset.html')
+#メンバー削除
+@app.route('/reset_member', methods=['GET', 'POST'])
+def reset():
+    users.clear()
+    return render_template('index.html', users = users)
+
 # 書き起こし作成エンドポイント
 @app.route('/transcription',methods =['GET','POST'])
 def transcription():

static/process.js

@@ -1,255 +1,265 @@
+let isRecording = false;
+let mediaRecorder;
+let audioChunks = [];
+let recordingInterval;
+let count_voice = 0;
+let before_rate = [];
+const RECORDING_INTERVAL_MS = 1000; // 5秒
+// メンバーとチャートの初期化
+let members = [];
+let voiceData = [];
+let baseMemberColors = [
+  "#4caf50",
+  "#007bff",
+  "#ffc107",
+  "#dc3545",
+  "#28a745",
+  "#9c27b0",
+  "#ff9800",
+];
+// Chart.js の初期化
+const ctx = document.getElementById("speechChart").getContext("2d");
+const speechChart = new Chart(ctx, {
+  type: "doughnut",
+  data: {
+    labels: members,
+    datasets: [
+      {
+        data: voiceData,
+        backgroundColor: getMemberColors(members.length),
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: true,
+        position: "bottom",
+        labels: { color: "white" },
+      },
+    },
+  },
+});
+// サーバーからメンバー情報を取得してチャートを更新する関数
+async function updateChartFrom() {
+  try {
+    const response = await fetch("/confirm");
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    if (!data || !data.members || !Array.isArray(data.members)) {
+      console.error("Invalid member data received:", data);
+      members = ["member1"];
+      voiceData = [50, 50];
+      updateChart();
+      return;
+    }
+    members = data.members;
+    voiceData = [];
+    for (let i = 0; i < members.length; i++) {
+      voiceData.push(100 / members.length);
+    }
+    updateChart();
+  } catch (error) {
+    console.error("Failed to fetch member data:", error);
+    members = ["member1"];
+    voiceData = [50, 50];
+    updateChart();
+  }
+}
+function updateChart() {
+  // 一人モードの場合は、ユーザーとグレー（無音）の比率をチャートに表示
+  if (members.length === 1) {
+    const userName = members[0];
+    speechChart.data.labels = [userName, "無音"];
+    speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
+  } else {
+    // 複数メンバーの場合は通常通りの処理
+    speechChart.data.labels = members;
+    speechChart.data.datasets[0].backgroundColor = getMemberColors(
+      members.length
+    );
+  }
+  speechChart.data.datasets[0].data = voiceData;
+  speechChart.update();
+}
+// メニューの表示・非表示
+function toggleMenu(event) {
+  event.stopPropagation();
+  const menu = document.getElementById("menu");
+  menu.classList.toggle("open");
+}
 
-      let isRecording = false;
-      let mediaRecorder;
-      let audioChunks = [];
-      let recordingInterval;
-      let count_voice = 0;
-      let before_rate = [];
-      const RECORDING_INTERVAL_MS = 1000; // 5秒
-      // メンバーとチャートの初期化
-      let members = [];
-      let voiceData = [];
-      let baseMemberColors = ["#4caf50", "#007bff", "#ffc107", "#dc3545", "#28a745", "#9c27b0", "#ff9800"];
-      // Chart.js の初期化
-      const ctx = document.getElementById("speechChart").getContext("2d");
-      const speechChart = new Chart(ctx, {
-        type: "doughnut",
-        data: {
-          labels: members,
-          datasets: [
-            {
-              data: voiceData,
-              backgroundColor: getMemberColors(members.length),
-            },
-          ],
-        },
-        options: {
-          responsive: true,
-          plugins: {
-            legend: {
-              display: true,
-              position: "bottom",
-              labels: { color: "white" },
-            },
-          },
-        },
-      });
-      // サーバーからメンバー情報を取得してチャートを更新する関数
-      async function updateChartFrom() {
-        try {
-          const response = await fetch("/confirm");
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          }
-          const data = await response.json();
-          if (!data || !data.members || !Array.isArray(data.members)) {
-            console.error("Invalid member data received:", data);
-            members = ["member1"];
-            voiceData = [50, 50];
-            updateChart();
-            return;
-          }
-          members = data.members;
-          voiceData = [];
-          for (let i = 0; i < members.length; i++) {
-            voiceData.push(100 / members.length);
-          }
-          updateChart();
-        } catch (error) {
-          console.error("Failed to fetch member data:", error);
-          members = ["member1"];
-          voiceData = [50, 50];
-          updateChart();
-        }
-      }
-      function updateChart() {
-        // 一人モードの場合は、ユーザーとグレー（無音）の比率をチャートに表示
-        if (members.length === 1) {
-          const userName = members[0];
-          speechChart.data.labels = [userName, "無音"];
-          speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
-        } else {
-          // 複数メンバーの場合は通常通りの処理
-          speechChart.data.labels = members;
-          speechChart.data.datasets[0].backgroundColor = getMemberColors(members.length);
-        }
-        speechChart.data.datasets[0].data = voiceData;
-        speechChart.update();
-      }
-       // メニューの表示・非表示
-       function toggleMenu(event) {
-        event.stopPropagation();
-        const menu = document.getElementById("menu");
-        menu.classList.toggle("open");
-      }
+function closeMenu(event) {
+  const menu = document.getElementById("menu");
+  if (
+    menu.classList.contains("open") &&
+    !menu.contains(event.target) &&
+    !event.target.closest("#menuButton")
+  ) {
+    menu.classList.remove("open");
+  }
+}
 
-      function closeMenu(event) {
-        const menu = document.getElementById("menu");
-        if (
-          menu.classList.contains("open") &&
-          !menu.contains(event.target) &&
-          !event.target.closest("#menuButton")
-        ) {
-          menu.classList.remove("open");
-        }
-      }
+// リセットボタンの処理
+function resetAction() {
+  window.location.href = "reset_html";
+}
 
-      // リセットボタンの処理
-      function resetAction() {
-        alert("リセットが実行されました！");
-      }
-
-      // ページ読み込み時にチャート情報を更新
-      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 = [];
+// ページ読み込み時にチャート情報を更新
+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);
         }
-      }
-      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;
+      };
+      mediaRecorder.onstop = () => {
+        sendAudioChunks([...audioChunks]);
+        audioChunks = [];
+      };
+      mediaRecorder.start();
+      // 5秒ごとに録音を停止して送信するインターバルを設定
+      recordingInterval = setInterval(() => {
+        if (mediaRecorder && mediaRecorder.state === "recording") {
+          mediaRecorder.stop();
+          mediaRecorder.start();
         }
-      }
-      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
-          );
+      }, 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);
         }
-        speechChart.update();
-      }
-      function showTalkdetail() {
-        window.location.href = "talk_detail";
-      }
-      function showResults() {
-        window.location.href = "feedback";
-      }
-      function showUserRegister() {
-        fetch("/reset");
-        window.location.href = "userregister";
+      })
+      .catch((error) => {
+        console.error("エラー:", error);
+      });
+  };
+  reader.readAsDataURL(audioBlob);
+}
+function getMemberColors(memberCount) {
+  // 一人モードの場合は特別な処理をしない（updateChartで処理するため）
+  if (memberCount <= 1) {
+    return ["#4caf50", "#757575"];
+  } else {
+    let colors = [];
+    for (let i = 0; i < memberCount; i++) {
+      colors.push(baseMemberColors[i % baseMemberColors.length]);
+    }
+    return colors;
+  }
+}
+function updateChartData(newRate) {
+  // 一人モードの時の処理
+  if (members.length === 1) {
+    if (count_voice === 0) {
+      speechChart.data.datasets[0].data = [newRate, 100 - newRate];
+      before_rate = [newRate];
+    } else {
+      // 一人モードでは、過去のデータと現在のデータを加重平均する
+      let tmp_rate =
+        (newRate + before_rate[0] * count_voice) / (count_voice + 1);
+      speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
+      before_rate = [tmp_rate];
+    }
+    count_voice++;
+    // 一人モードでは常に緑色とグレーの組み合わせを使用
+    speechChart.data.labels = [members[0], "無音"];
+    speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
+  } else {
+    console.log(before_rate);
+    // 複数人モードの処理
+    if (!Array.isArray(newRate)) {
+      console.error("newRate is not an array:", newRate);
+      return;
+    }
+    if (newRate.length !== members.length) {
+      console.error(
+        "newRate length does not match members length:",
+        newRate,
+        members
+      );
+      return;
+    }
+    let averagedRates = new Array(newRate.length);
+    for (let i = 0; i < newRate.length; i++) {
+      let tmp_rate;
+      if (count_voice === 0) {
+        // 初回はそのまま
+        tmp_rate = newRate[i];
+      } else {
+        // 2回目以降は、過去の平均値と現在の値を加重平均する
+        tmp_rate =
+          (newRate[i] + before_rate[i] * count_voice) / (count_voice + 1);
       }
-   
+      averagedRates[i] = tmp_rate;
+    }
+    // before_rateを更新
+    before_rate = averagedRates;
+    //グラフに反映
+    speechChart.data.datasets[0].data = averagedRates;
+    count_voice++;
+    speechChart.data.datasets[0].backgroundColor = getMemberColors(
+      members.length
+    );
+  }
+  speechChart.update();
+}
+function showTalkdetail() {
+  window.location.href = "talk_detail";
+}
+function showResults() {
+  window.location.href = "feedback";
+}
+function showUserRegister() {
+  fetch("/reset");
+  window.location.href = "userregister";
+}

templates/feedback.html

@@ -19,51 +19,76 @@
         return "素晴らしい";
       }
 
-      async function getTranscription(){
-        try{
-          const response = await fetch('/transcription');
-          if(!response.ok){
-            throw new Error('HTTP error! status: ${response.status}');
+      async function getTranscription() {
+        try {
+          const response = await fetch("/transcription");
+          if (!response.ok) {
+            throw new Error("HTTP error! status: ${response.status}");
           }
           const data = await response.json;
           const results = data.response;
-        }catch(error){
-          console.error("Failed to fetch transcription",error);
+        } catch (error) {
+          console.error("Failed to fetch transcription", error);
         }
       }
 
       async function getAnalysis() {
         try {
-            await getTranscription();
+          await getTranscription();
 
-            const response = await fetch('/analyze');
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
+          const response = await fetch("/analyze");
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
 
-            const data = await response.json();
-            const results = data.results;
-            const analysis = results.deepseek_analysis;
+          const data = await response.json();
+          const results = data.results;
+          const analysis = results.deepseek_analysis;
 
-            // 変数に格納
-            const conversationLevel = analysis.conversationLevel;
-            const harassmentPresent = analysis.harassmentPresent;
-            const harassmentType = analysis.harassmentType;
-            const repetition = analysis.repetition;
-            const pleasantConversation = analysis.pleasantConversation;
-            const blameOrHarassment = analysis.blameOrHarassment;
+          // 変数に格納
+          const conversationLevel = analysis.conversationLevel;
+          const harassmentPresent = analysis.harassmentPresent;
+          const harassmentType = analysis.harassmentType;
+          const repetition = analysis.repetition;
+          const pleasantConversation = analysis.pleasantConversation;
+          const blameOrHarassment = analysis.blameOrHarassment;
 
-            // コンソールに表示
-            console.log(conversationLevel,harassmentPresent,harassmentType,repetition,pleasantConversation,blameOrHarassment);
+          // コンソールに表示
+          console.log(
+            conversationLevel,
+            harassmentPresent,
+            harassmentType,
+            repetition,
+            pleasantConversation,
+            blameOrHarassment
+          );
 
+          // DOMに表示
+          document.getElementById(
+            "level"
+          ).innerText = `会話レベル: ${conversationLevel}`;
+          document.getElementById(
+            "Harassment_bool"
+          ).innerText = `ハラスメントの有無: ${harassmentPresent}`;
+          document.getElementById(
+            "Harassment_type"
+          ).innerText = `ハラスメントの種類: ${harassmentType}`;
+          document.getElementById(
+            "Harassment_loop"
+          ).innerText = `繰り返しの程度: ${repetition}`;
+          document.getElementById(
+            "Harassment_comfort"
+          ).innerText = `会話の心地よさ: ${pleasantConversation}`;
+          document.getElementById(
+            "Harassment_volume"
+          ).innerText = `非難またはハラスメントの程度: ${blameOrHarassment}`;
         } catch (error) {
-            console.error("Failed to fetch analysis data:", error);
+          console.error("Failed to fetch analysis data:", error);
         }
-    }
-
+      }
 
       window.onload = getAnalysis();
-      
+
       function showSampleData() {
         const level = 73;
         const percentages = [80, 50, 60, 100, 30];
@@ -79,7 +104,7 @@
           barElements[i].style.width = `${percentages[i]}%`;
           labelElements[i].innerText = labels[i];
         }
-      };
+      }
 
       function showRecorder() {
         window.location.href = "index";
@@ -93,9 +118,23 @@
     class="flex items-center justify-center min-h-screen bg-gray-900 text-white"
   >
     <div class="p-8 bg-gray-800 rounded-2xl shadow-xl text-center w-96">
-      <div class="text-3xl font-bold mb-4" id="level">話者Lv: 85</div>
-      <div class="text-xl font-semibold mb-6" id="message">素晴らしい</div>
-
+      <div class="text-3xl font-bold mb-4" id="level">話者Lv:</div>
+      <div class="text-xl font-semibold mb-6" id="Harassment_bool">
+        素晴らしい
+      </div>
+      <div class="text-xl font-semibold mb-6" id="Harassment_type">
+        素晴らしい
+      </div>
+      <div class="text-xl font-semibold mb-6" id="Harassment_loop">
+        素晴らしい
+      </div>
+      <div class="text-xl font-semibold mb-6" id="Harassment_comfort">
+        素晴らしい
+      </div>
+      <div class="text-xl font-semibold mb-6" id="Harassment_volume">
+        素晴らしい
+      </div>
+      <!--
       <div class="space-y-2">
         <div class="bar-container flex items-center">
           <span class="bar-label w-20 mr-2"></span>
@@ -128,6 +167,7 @@
           </div>
         </div>
       </div>
+      -->
 
       <div class="flex justify-center space-x-4 mt-6">
         <button

templates/reset.html

@@ -0,0 +1,41 @@
+<!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>
+  </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="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 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="showReset()"
+        >
+          メンバーを消去
+        </button>
+        <button
+          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          onclick="showRecorder()"
+        >
+          録音画面を表示
+        </button>
+      </div>
+    </div>
+    <script>
+      function showRecorder() {
+        window.location.href = "/index";
+      }
+      function showReset() {
+        window.location.href = "/reset_member";
+      }
+    </script>
+  </body>
+</html>

templates/talkDetail.html

@@ -39,7 +39,7 @@
         const transcriptionElement = document.getElementById("transcription");
 
         try {
-          const response = await fetch("/api/transcription");
+          const response = await fetch("/transcription");
           if (!response.ok) throw new Error("データ取得に失敗しました。");
 
           const data = await response.json();