Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

buletomato25 commited on 26 days ago

Commit

a2d1919

2 Parent(s): a776d5a 1804233

gitmerge

Browse files

Files changed (5) hide show

__pycache__/process.cpython-310.pyc +0 -0
app.py +3 -2
process.py +2 -2
static/process.js +1 -1
templates/index.html +170 -107

__pycache__/process.cpython-310.pyc CHANGED Viewed

Binary files a/__pycache__/process.cpython-310.pyc and b/__pycache__/process.cpython-310.pyc differ

app.py CHANGED Viewed

@@ -101,6 +101,7 @@ def analyze():
 # 音声アップロード＆解析エンドポイント
 @app.route('/upload_audio', methods=['POST'])
 def upload_audio():
     try:
         data = request.get_json()
         # name か users のいずれかが必須。どちらも無い場合はエラー
@@ -129,13 +130,13 @@ def upload_audio():
         # 複数人の場合は参照パスのリストを、1人の場合は単一のパスを渡す
         if len(users) > 1:
             print("複数人の場合の処理")
-            matched_times = process.process_multi_audio(reference_paths, audio_path, threshold=0.05)
             # 各メンバーの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 = process.process_audio(reference_paths[0], audio_path, threshold=0.05)
             total_time = matched_time + unmatched_time
             rate = (matched_time / total_time) * 100 if total_time > 0 else 0
             return jsonify({"rate": rate}), 200

 # 音声アップロード＆解析エンドポイント
 @app.route('/upload_audio', methods=['POST'])
 def upload_audio():
+    global segments_dir
     try:
         data = request.get_json()
         # name か users のいずれかが必須。どちらも無い場合はエラー
         # 複数人の場合は参照パスのリストを、1人の場合は単一のパスを渡す
         if len(users) > 1:
             print("複数人の場合の処理")
+            matched_times, segments_dir = process.process_multi_audio(reference_paths, audio_path, threshold=0.05)
             # 各メンバーの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_time = matched_time + unmatched_time
             rate = (matched_time / total_time) * 100 if total_time > 0 else 0
             return jsonify({"rate": rate}), 200

process.py CHANGED Viewed

@@ -89,7 +89,7 @@ class AudioProcessor():
                 matched_time_ms += len(AudioSegment.from_file(segment_file))
         unmatched_time_ms = total_duration_ms - matched_time_ms
-        return matched_time_ms, unmatched_time_ms
     def process_multi_audio(self, reference_pathes, input_path, output_folder='/tmp/data/matched_multi_segments', seg_duration=1.0, threshold=0.5):
@@ -141,7 +141,7 @@ class AudioProcessor():
             if match is not None:
                 matched_time[match] += seg_duration
-        return matched_time
     def save_audio_from_base64(self,base64_audio,output_dir,output_filename,temp_format='webm'):

                 matched_time_ms += len(AudioSegment.from_file(segment_file))
         unmatched_time_ms = total_duration_ms - matched_time_ms
+        return matched_time_ms, unmatched_time_ms,output_folder
     def process_multi_audio(self, reference_pathes, input_path, output_folder='/tmp/data/matched_multi_segments', seg_duration=1.0, threshold=0.5):
             if match is not None:
                 matched_time[match] += seg_duration
+        return matched_time, segmented_path
     def save_audio_from_base64(self,base64_audio,output_dir,output_filename,temp_format='webm'):

static/process.js CHANGED Viewed

@@ -4,7 +4,7 @@ let audioChunks = [];
 let recordingInterval;
 let count_voice = 0;
 let before_rate = [];
-const RECORDING_INTERVAL_MS = 1000; // 5秒
 // メンバーとチャートの初期化
 let members = [];
 let voiceData = [];

 let recordingInterval;
 let count_voice = 0;
 let before_rate = [];
+const RECORDING_INTERVAL_MS = 5000; // 5秒
 // メンバーとチャートの初期化
 let members = [];
 let voiceData = [];

templates/index.html CHANGED Viewed

@@ -3,27 +3,165 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Voice Recorder Interface</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"
     />
   </head>
-  <body
-    class="flex items-center justify-center h-screen bg-gray-900 text-white"
-    onclick="closeMenu(event)"
-  >
-    <!-- 全体を囲む枠 -->
-    <div
-      class="border-4 border-gray-400 p-8 rounded-lg w-full sm:w-auto relative"
-    >
-      <!-- タイトル -->
-      <div class="text-center text-4xl font-bold mb-5">JustTalk</div>
-      <!-- ハンバーガーメニュー -->
-      <div class="absolute top-4 right-4">
         <button
           id="menuButton"
           class="text-white text-2xl focus:outline-none"
@@ -32,51 +170,36 @@
           <i class="fas fa-bars"></i>
         </button>
-        <!-- メニューの本体 -->
         <div
           id="menu"
-          class="absolute top-0 right-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()"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            メンバーを追加
           </button>
-          <button
-            onclick="showResults()"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            フィードバックを表示
           </button>
-          <button
-            onclick="showTalkdetail()"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            会話詳細を表示
           </button>
-          <button
-            onclick="resetAction()"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            リセット
           </button>
-          <button
-            onclick="toggleMenu(event)"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            閉じる
           </button>
         </div>
       </div>
-      <!-- チャート表示部 -->
-      <div class="chart w-72 h-72 mb-5">
         <canvas id="speechChart"></canvas>
       </div>
-      <!-- 録音フォーム -->
       <form
         id="recordForm"
         action="/submit"
@@ -84,7 +207,7 @@
         class="flex items-center justify-center space-x-2 w-full sm:w-auto"
         onsubmit="event.preventDefault();"
       >
-        <!-- 録音ボタン -->
         <button
           type="button"
           class="record-button"
@@ -96,66 +219,6 @@
       </form>
     </div>
-    <style>
-      .record-button {
-        width: 80px;
-        height: 80px;
-        background-color: transparent;
-        border-radius: 50%;
-        border: 4px 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.2s ease;
-      }
-      .record-icon {
-        width: 60px;
-        height: 60px;
-        background-color: #d32f2f;
-        border-radius: 50%;
-        transition: all 0.2s ease;
-      }
-      .recording .record-icon {
-        width: 40px;
-        height: 40px;
-        border-radius: 10%;
-      }
-      .icon i {
-        font-size: 20px;
-      }
-      /* ハンバーガーメニュー */
-      #menu {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 10;
-        transform: translateX(100%); /* 初期状態で画面外 */
-        visibility: hidden; /* 非表示 */
-        opacity: 0; /* 非表示 */
-        background-color: rgba(31, 41, 55, 1); /* 不透明な背景色 */
-        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
-          opacity 0.3s ease-in-out; /* スライド後に表示 */
-      }
-      #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; /* すぐに表示 */
-      }
-      /* レスポンシブデザイン */
-      @media (max-width: 640px) {
-        .w-72 {
-          width: 90%;
-        }
-        .h-72 {
-          height: 300px;
-        }
-      }
-    </style>
-<script src="{{ url_for('static', filename='process.js') }}"></script>
   </body>
-</html>

   <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"
           <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"
         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"
       </form>
     </div>
+    <script src="{{ url_for('static', filename='process.js') }}"></script>
   </body>
+</html>