multi_reset

app.py

@@ -13,13 +13,13 @@ transcripter = TranscriptionMaker()
 app = Flask(__name__)
 
 users = []
-segments_dir = ""
 transcription_text=""
 harassment_keywords = [
         "バカ", "馬鹿", "アホ", "死ね", "クソ", "うざい",
         "きもい", "キモい", "ブス", "デブ", "ハゲ",
         "セクハラ", "パワハラ", "モラハラ"
     ]
+total_audio = ""
 
 # トップページ（テンプレート: index.html）
 @app.route('/')
@@ -32,7 +32,6 @@ def index():
 def feedback():
     return render_template('feedback.html')
 
-
 # 会話詳細画面（テンプレート: talkDetail.html）
 @app.route('/talk_detail', methods=['GET', 'POST'])
 def talk_detail():
@@ -53,10 +52,13 @@ def confirm():
 def reset_html():
     return render_template('reset.html')
 
-#メンバー削除
+#メンバー削除&累積音声削除
 @app.route('/reset_member', methods=['GET', 'POST'])
 def reset_member():
     global users
+    global total_audio
+    print(total_audio)
+    process.delete_files_in_directory(total_audio)
     try:
         data = request.get_json()
         if not data or "names" not in data:
@@ -92,10 +94,11 @@ def reset_member():
 # 書き起こし作成エンドポイント
 @app.route('/transcription',methods =['GET','POST'])
 def transcription():
-    global segments_dir
     global transcription_text
+    global total_audio
+    print(total_audio)
     try:
-        transcription_text = transcripter.create_transcription(segments_dir)
+        transcription_text = transcripter.create_transcription(total_audio)
         print(transcription_text)
         with open(transcription_text,'r',encoding='utf-8') as file:
             file_content = file.read()
@@ -139,7 +142,7 @@ def analyze():
 # 音声アップロード＆解析エンドポイント
 @app.route('/upload_audio', methods=['POST'])
 def upload_audio():
-    global segments_dir
+    global total_audio
     try:
         data = request.get_json()
         # name か users のいずれかが必須。どちらも無い場合はエラー
@@ -169,23 +172,27 @@ def upload_audio():
         if len(users) > 1:
             print("複数人の場合の処理")
             matched_times, segments_dir = process.process_multi_audio(reference_paths, audio_path, threshold=0.05)
+            total_audio = transcripter.merge_segments(segments_dir)
             # 各メンバーのrateを計算
             total_time = sum(matched_times)
             rates = [(time / total_time) * 100 if total_time > 0 else 0 for time in matched_times]
             return jsonify({"rates": rates}), 200
         else:
             matched_time, unmatched_time, segments_dir = process.process_audio(reference_paths[0], audio_path, threshold=0.05)
+            total_audio = transcripter.merge_segments(segments_dir)
             total_time = matched_time + unmatched_time
             rate = (matched_time / total_time) * 100 if total_time > 0 else 0
             return jsonify({"rate": rate}), 200
     except Exception as e:
         print("Error in /upload_audio:", str(e))
         return jsonify({"error": "サーバーエラー", "details": str(e)}), 500
+    
 @app.route('/reset', methods=['GET'])
 def reset():
     global users
     users=[]
     return 200
+
 @app.route('/upload_base_audio', methods=['POST'])
 def upload_base_audio():
     global users#グローバル変数を編集できるようにする

process.py

@@ -58,15 +58,7 @@ class AudioProcessor():
         embedding2 = self.inference(path2)
         return float(self.cosine_similarity(embedding1.data.flatten(), embedding2.data.flatten()))
     
-    def generate_random_string(self,length):
-        letters = string.ascii_letters + string.digits
-        return ''.join(random.choice(letters) for i in range(length))
-
-    def generate_filename(self,random_length):
-        random_string = self.generate_random_string(random_length)
-        current_time = datetime.now().strftime("%Y%m%d%H%M%S")
-        filename = f"{current_time}_{random_string}.wav"
-        return filename
+
     
     def process_audio(self, reference_path, input_path, output_folder='/tmp/data/matched_segments', seg_duration=1.0, threshold=0.5):
         # 出力先ディレクトリの中身をクリアする
@@ -182,4 +174,17 @@ class AudioProcessor():
             print(f"File Not Found Error: {e}")
         except Exception as e:
             print(f"Unexpected Error: {e}")
-        return None
+        return None
+
+    def delete_files_in_directory(self,directory_path):
+        try:
+            # ディレクトリ内のすべてのファイルを取得
+            for filename in os.listdir(directory_path):
+                file_path = os.path.join(directory_path, filename)
+                # ファイルのみ削除する
+                if os.path.isfile(file_path):
+                    os.remove(file_path)
+                    print(f"{file_path} を削除しました")
+        except Exception as e:
+            print(f"エラーが発生しました: {e}")
+        

static/menu.js

@@ -0,0 +1,34 @@
+function showUserRegister() {
+    fetch("/reset");
+    window.location.href = "userregister";
+  }
+  function showRecorder() {
+    window.location.href = "index";
+  }
+  function showResults() {
+    window.location.href = "feedback";
+  }
+  function showTalkDetail() {
+    window.location.href = "talk_detail";
+  }
+  function resetAction() {
+    window.location.href = "reset_html";
+  }
+
+// メニューの表示・非表示
+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");
+    }
+  }

static/process.js

@@ -1,265 +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();
-}
-// メニューの表示・非表示
-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 resetAction() {
-  window.location.href = "reset_html";
-}
-
-// ページ読み込み時にチャート情報を更新
-updateChartFrom();
-// 録音ボタンの録音開始／停止処理
-async function toggleRecording() {
-  const recordButton = document.getElementById("recordButton");
-  if (!isRecording) {
-    // 録音開始
-    isRecording = true;
-    recordButton.classList.add("recording");
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      mediaRecorder = new MediaRecorder(stream);
-      audioChunks = [];
-      mediaRecorder.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          audioChunks.push(event.data);
-        }
-      };
-      mediaRecorder.onstop = () => {
-        sendAudioChunks([...audioChunks]);
-        audioChunks = [];
-      };
-      mediaRecorder.start();
-      // 5秒ごとに録音を停止して送信するインターバルを設定
-      recordingInterval = setInterval(() => {
-        if (mediaRecorder && mediaRecorder.state === "recording") {
-          mediaRecorder.stop();
-          mediaRecorder.start();
-        }
-      }, RECORDING_INTERVAL_MS);
-    } catch (error) {
-      console.error("マイクへのアクセスに失敗しました:", error);
-      isRecording = false;
-      recordButton.classList.remove("recording");
-    }
-  } else {
-    // 録音停止
-    isRecording = false;
-    recordButton.classList.remove("recording");
-    if (mediaRecorder && mediaRecorder.state === "recording") {
-      mediaRecorder.stop();
-    }
-    clearInterval(recordingInterval);
-    count_voice = 0;
-    //before_rate = [];
-  }
-}
-function sendAudioChunks(chunks) {
-  const audioBlob = new Blob(chunks, { type: "audio/wav" });
-  const reader = new FileReader();
-  reader.onloadend = () => {
-    const base64String = reader.result.split(",")[1];
-    const form = document.getElementById("recordForm");
-    const nameInput = form.querySelector('input[name="name"]');
-    const name = nameInput ? nameInput.value : "unknown";
-    fetch("/upload_audio", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ audio_data: base64String, name: name }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        if (data.error) {
-          alert("エラー: " + data.error);
-          console.error(data.details);
-        } else if (data.rate !== undefined) {
-          updateChartData(data.rate);
-        } else if (data.rates !== undefined) {
-          updateChartData(data.rates);
-        }
-      })
-      .catch((error) => {
-        console.error("エラー:", error);
-      });
-  };
-  reader.readAsDataURL(audioBlob);
-}
-function getMemberColors(memberCount) {
-  // 一人モードの場合は特別な処理をしない（updateChartで処理するため）
-  if (memberCount <= 1) {
-    return ["#4caf50", "#757575"];
-  } else {
-    let colors = [];
-    for (let i = 0; i < memberCount; i++) {
-      colors.push(baseMemberColors[i % baseMemberColors.length]);
-    }
-    return colors;
-  }
-}
-function updateChartData(newRate) {
-  // 一人モードの時の処理
-  if (members.length === 1) {
-    if (count_voice === 0) {
-      speechChart.data.datasets[0].data = [newRate, 100 - newRate];
-      before_rate = [newRate];
-    } else {
-      // 一人モードでは、過去のデータと現在のデータを加重平均する
-      let tmp_rate =
-        (newRate + before_rate[0] * count_voice) / (count_voice + 1);
-      speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
-      before_rate = [tmp_rate];
-    }
-    count_voice++;
-    // 一人モードでは常に緑色とグレーの組み合わせを使用
-    speechChart.data.labels = [members[0], "無音"];
-    speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
-  } else {
-    console.log(before_rate);
-    // 複数人モードの処理
-    if (!Array.isArray(newRate)) {
-      console.error("newRate is not an array:", newRate);
-      return;
-    }
-    if (newRate.length !== members.length) {
-      console.error(
-        "newRate length does not match members length:",
-        newRate,
-        members
-      );
-      return;
-    }
-    let averagedRates = new Array(newRate.length);
-    for (let i = 0; i < newRate.length; i++) {
-      let tmp_rate;
-      if (count_voice === 0) {
-        // 初回はそのまま
-        tmp_rate = newRate[i];
-      } else {
-        // 2回目以降は、過去の平均値と現在の値を加重平均する
-        tmp_rate =
-          (newRate[i] + before_rate[i] * count_voice) / (count_voice + 1);
-      }
-      averagedRates[i] = tmp_rate;
-    }
-    // before_rateを更新
-    before_rate = averagedRates;
-    //グラフに反映
-    speechChart.data.datasets[0].data = averagedRates;
-    count_voice++;
-    speechChart.data.datasets[0].backgroundColor = getMemberColors(
-      members.length
-    );
-  }
-  speechChart.update();
-}
-function showTalkdetail() {
-  window.location.href = "talk_detail";
-}
-function showResults() {
-  window.location.href = "feedback";
-}
-function showUserRegister() {
-  fetch("/reset");
-  window.location.href = "userregister";
-}
+
+      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();
+      }

templates/feedback.html

@@ -5,184 +5,154 @@
     <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>
-      function getMessage(level) {
-        if (level < 20) return "やばい";
-        if (level < 40) return "気をつけよう";
-        if (level < 60) return "まずまずですね";
-        if (level < 80) return "がんばれあとちょっと";
-        return "素晴らしい";
+    <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;
       }
 
-      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);
-        }
+      /* 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;
       }
 
-      async function getAnalysis() {
-        try {
-          await getTranscription();
-
-          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 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
-          );
-
-          // 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);
-        }
+      /* 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);
       }
 
-      window.onload = getAnalysis();
+      /* 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;
+      }
 
-      function showSampleData() {
-        const level = 73;
-        const percentages = [80, 50, 60, 100, 30];
-        const labels = ["項目1", "項目2", "項目3", "項目4", "項目5"];
+      #menuButton:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
 
-        const message = getMessage(level);
-        document.getElementById("level").innerText = `話者Lv: ${level}`;
-        document.getElementById("message").innerText = message;
+      /* 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);
+      }
 
-        const barElements = document.getElementsByClassName("bar-fill");
-        const labelElements = document.getElementsByClassName("bar-label");
-        for (let i = 0; i < barElements.length; i++) {
-          barElements[i].style.width = `${percentages[i]}%`;
-          labelElements[i].innerText = labels[i];
-        }
+      #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;
       }
 
-      function showRecorder() {
-        window.location.href = "index";
+      #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;
       }
-      function showTalkDetail() {
-        window.location.href = "talk_detail";
+
+      #menu button:hover {
+        background-color: rgba(55, 65, 81, 0.7);
       }
-    </script>
+    </style>
   </head>
-  <body
-    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:</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>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-blue-500"></div>
-          </div>
-        </div>
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-orange-400"></div>
-          </div>
-        </div>
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-blue-500"></div>
-          </div>
-        </div>
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-orange-400"></div>
-          </div>
-        </div>
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-red-500"></div>
-          </div>
-        </div>
-      </div>
-      -->
+  <body>
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">会話フィードバック</div>
 
-      <div class="flex justify-center space-x-4 mt-6">
+      <!-- Hamburger Menu -->
+      <div class="absolute top-4 left-4">
         <button
-          onclick="showRecorder()"
-          class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
+          id="menuButton"
+          class="text-white text-2xl focus:outline-none"
+          onclick="toggleMenu(event)"
         >
-          録音画面を表示
+          <i class="fas fa-bars"></i>
         </button>
-        <button
-          onclick="showTalkDetail()"
-          class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
+
+        <!-- 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"
         >
-          会話詳細を表示
-        </button>
+          <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">話者Lv:</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>
   </body>
 </html>

templates/index.html

@@ -1,224 +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="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>
-  </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

@@ -43,17 +43,21 @@
           if (!response.ok) throw new Error("データ取得に失敗しました。");
 
           const data = await response.json();
-          const conversations = data.conversations;
+          const conversations = data.transcription;
 
-          if (!Array.isArray(conversations)) {
+          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;
+         console.log(conversations);
         } catch (error) {
           transcriptionElement.textContent = `エラー: ${error.message}`;
           console.error("データ取得エラー:", error);

transcription.py

@@ -1,6 +1,9 @@
 import os
 from faster_whisper import WhisperModel
 from pydub import AudioSegment
+import string
+import random
+from datetime import datetime
 
 # Matplotlibのキャッシュディレクトリを変更
 os.environ["MPLCONFIGDIR"] = "/tmp/matplotlib"
@@ -18,14 +21,14 @@ class TranscriptionMaker():
 
 
     #音声ファイルのディレクトリを受け取り、書き起こしファイルを作成する
-    def create_transcription(self,segments_directory):
+    def create_transcription(self,audio_directory):
         results = []
-        #細切れ音声をくっつける
-        audio_directory = self.merge_segments(segments_directory)
+
         #ディレクトリ内のファイルを全て取得
         if not os.path.isdir(audio_directory):
             raise ValueError(f"The specified path is not a valid directory: {audio_directory}")
         audio_files = os.listdir(audio_directory)
+        audio_files = sorted(os.listdir(audio_directory))
         for audio_file in audio_files:
             if os.path.splitext(audio_file)[-1].lower() != '.wav':
                 continue
@@ -35,7 +38,8 @@ class TranscriptionMaker():
             except Exception as e:
                 print(f"Error transcripting file {audio_path}: {e}")
                 raise
-            for segment in segments:
+            sorted_segments = sorted(segments, key=lambda s: s.start)
+            for segment in sorted_segments:
                 results.append({
                     "start": segment.start,
                     "end": segment.end,
@@ -53,7 +57,7 @@ class TranscriptionMaker():
         return output_file
     
     #ファイル名が連続しているならくっつける
-    def merge_segments(self,segments_dir,output_dir = "/tmp/data/merged_audio"):
+    def merge_segments(self,segments_dir,output_dir = "/tmp/data/merged_segment"):
         if not os.path.exists(output_dir):
             os.makedirs(output_dir, exist_ok=True)
 
@@ -90,7 +94,16 @@ class TranscriptionMaker():
                 segment = AudioSegment.from_file(file_path)
                 combined_audio += segment
             # 出力ファイル名を設定して保存
-            output_file = os.path.join(output_dir, f'merged_{i}.wav')
+            output_file = os.path.join(output_dir, self.generate_filename(3))
             combined_audio.export(output_file, format='wav')
 
-        return output_dir
+        return output_dir
+    
+    def generate_random_string(self,length):
+        letters = string.ascii_letters + string.digits
+        return ''.join(random.choice(letters) for i in range(length))
+
+    def generate_filename(self,random_length):
+        current_time = datetime.now().strftime("%Y%m%d%H%M%S")
+        filename = f"{current_time}.wav"
+        return filename