Merge branch 'adduser'

app.py

@@ -8,11 +8,13 @@ from process import AudioProcessor
 process=AudioProcessor()
 app = Flask(__name__)
 
+users = ["ccc"]
+
 # トップページ（テンプレート: index.html）
 @app.route('/')
 @app.route('/index', methods=['GET', 'POST'])
 def index():
-    return render_template('index.html')
+    return render_template('index.html', users = users)
 
 # フィードバック画面（テンプレート: feedback.html）
 @app.route('/feedback', methods=['GET', 'POST'])
@@ -35,25 +37,35 @@ def userregister():
 def upload_audio():
     try:
         data = request.get_json()
-        if not data or 'audio_data' not in data:
-            return jsonify({"error": "音声データがありません"}), 400
+        if not data or 'audio_data' not in data or 'name' not in data:
+            return jsonify({"error": "音声データまたは名前がありません"}), 400
         
-        audio_path=process.save_audio_from_base64(
-            base64_audio=data['audio_data'],    # 音声データ
-            output_dir= "/tmp/data",    #保存先
-            output_filename="recorded_audio.wav"    # 固定ファイル名（必要に応じて generate_filename() で一意のファイル名に変更可能）
-        )
+        # Base64デコードして音声バイナリを取得
+        audio_binary = base64.b64decode(data['audio_data'])
+        name = data['name']  # 名前を取得
+        audio_dir = "/tmp/data"
+        os.makedirs(audio_dir, exist_ok=True)
+        # 固定ファイル名（必要に応じて generate_filename() で一意のファイル名に変更可能）
+        audio_path = os.path.join(audio_dir, f"{name}.wav")
+       
+        with open(audio_path, 'wb') as f:
+            f.write(audio_binary)
         
         # 参照音声ファイルのパスを指定（sample.wav を正しい場所に配置すること）
-        reference_audio = os.path.abspath('/tmp/data/base_audio/recorded_base_audio.wav')
+        reference_audio = os.path.abspath("/tmp/data/base_audio/",  f"{name}.wav")
+        
         if not os.path.exists(reference_audio):
             return jsonify({"error": "参照音声ファイルが見つかりません", "details": reference_audio}), 500
         
         # 音声解析：参照音声とアップロードされた音声との類似度をセグメント毎に計算
         # threshold の値は調整可能です（例: 0.1）
-        matched_time, unmatched_time = process.process_audio(reference_audio, audio_path, threshold=0.05)
-        total_time = matched_time + unmatched_time
-        rate = (matched_time / total_time) * 100 if total_time > 0 else 0
+        if(users.length > 2):
+            print("複数人の場合の処理")
+        else:
+            matched_time, unmatched_time = process.process_audio(reference_audio, 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
     except Exception as e:
@@ -65,11 +77,13 @@ def upload_base_audio():
         data = request.get_json()
         if not data or 'audio_data' not in data or 'name' not in data:
             return jsonify({"error": "音声データまたは名前がありません"}), 400
+        name = data['name']  # 名前を取得
+        users.append(name)
         
         audio_path=process.save_audio_from_base64(
             base64_audio=data['audio_data'],    # 音声データ
             output_dir= "/tmp/data",    #保存先
-            output_filename="recorded_audio.wav"    # 固定ファイル名（必要に応じて generate_filename() で一意のファイル名に変更可能）
+            output_filename=f"{name}.wav"    # 固定ファイル名（必要に応じて generate_filename() で一意のファイル名に変更可能）
         )
         return jsonify({"state": "Registration Success!", "path": audio_path}), 200
     except Exception as e:

requirements.txt

@@ -1,4 +1,5 @@
 Flask==2.2.5
+Flask-WTF
 pyannote.audio==2.1.1
 numpy==1.23.5
 pydub==0.25.1
@@ -13,4 +14,6 @@ google-auth==2.38.0
 google-auth-oauthlib==1.2.1
 google-auth-httplib2==0.2.0
 faster-whisper
+Flask-Migrate
+requests
 

static/register_record.js

@@ -0,0 +1,124 @@
+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("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);
+}
+
+document.getElementById("add-btn").addEventListener("click", () => {
+  const newItem = document.createElement("div");
+  newItem.className = "flex items-center gap-3 flex-wrap";
+  newItem.innerHTML = `
+              <form
+                  action="/submit"
+                  method="POST"
+                  class="flex items-center space-x-2 w-full sm:w-auto"
+                  onsubmit="event.preventDefault();"
+              >
+                  <input
+                      type="text"
+                      name="name"
+                      placeholder="名前を入力"
+                      class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-700 text-white"
+                  />
+  
+                  <button type="button" class="record-button" aria-label="音声録音開始">
+                      <div class="record-icon"></div>
+                  </button>
+              </form>
+          `;
+  newItem.addEventListener("click", handleRecording);
+  document.getElementById("people-list").appendChild(newItem);
+  userCount++; // 新しいメンバーを追加するたびにカウントを増やす
+});

templates/index.html

@@ -25,11 +25,30 @@
     <div class="chart w-72 h-72 mb-5">
       <canvas id="speechChart"></canvas>
     </div>
-
-    <!-- 録音ボタン -->
-    <button class="record-button" id="recordButton" onclick="toggleRecording()">
-      <div class="record-icon" id="recordIcon"></div>
-    </button>
+    <form
+      id="recordForm"
+      action="/submit"
+      method="POST"
+      class="flex items-center space-x-2 w-full sm:w-auto"
+      onsubmit="event.preventDefault();"
+    >
+      <input
+        type="text"
+        name="name"
+        placeholder="名前を入力"
+        class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-700 text-white"
+      />
+      <!-- 録音ボタン -->
+      <button
+        type="button"
+        class="record-button"
+        id="recordButton"
+        onclick="toggleRecording()"
+      >
+        <div class="record-icon" id="recordIcon"></div>
+      </button>
+    </form>
+    <!-- 名前入力 -->
 
     <!-- 結果ボタン -->
     <div class="flex mt-5">
@@ -88,7 +107,8 @@
       let before_rate = 0;
 
       // 初期設定：人数と名前を受け取って円グラフを作成
-      let members = ["自分", "ahaha", "nufufu", "不明"];
+      let members = ["aaa", "bbb", "ccc", "その他"];
+
       let voiceData = [50, 20, 20, 10]; // 自分と不明の割合を仮設定
 
       // Chart.js の初期化
@@ -180,12 +200,16 @@
         const reader = new FileReader();
         reader.onloadend = () => {
           const base64String = reader.result.split(",")[1]; // Base64エンコードされた音声データ
+          // フォーム要素を取得
+          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 }),
+            body: JSON.stringify({ audio_data: base64String, name: name }),
           })
             .then((response) => response.json())
             .then((data) => {

templates/userRegister.html

@@ -67,158 +67,18 @@
       <!-- 録音画面に戻るボタン -->
       <button
         id="backButton"
+        onclick="showRecorder()"
         class="mt-6 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
       >
         録音画面に戻る
       </button>
     </div>
 
+    <script src="{{ url_for('static', filename='register_record.js') }}"></script>
     <script>
-      let mediaRecorder;
-      let audioChunks = [];
-      let userCount = 0; // 追加されたメンバー数を保持
-      let isRecording = false; // 録音中かどうかを判定するフラグ
-      let currentRecordingButton = null; // 現在録音中のボタンを保持
-
-      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("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);
-                // 必要に応じて、ここでUIの変更（ボタンの有効化など）を行う
-                // 例: button.disabled = true; // 送信ボタンを無効化
-                // 例: button.classList.remove("recording"); //録音中のスタイルを解除
-              }
-            })
-            .catch((error) => {
-              console.error("エラー:", error);
-            });
-        };
-        reader.readAsDataURL(audioBlob);
-      }
-
-      document.getElementById("add-btn").addEventListener("click", () => {
-        const newItem = document.createElement("div");
-        newItem.className = "flex items-center gap-3 flex-wrap";
-        newItem.innerHTML = `
-              <form
-                  action="/submit"
-                  method="POST"
-                  class="flex items-center space-x-2 w-full sm:w-auto"
-                  onsubmit="event.preventDefault();"
-              >
-                  <input
-                      type="text"
-                      name="name"
-                      placeholder="名前を入力"
-                      class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-700 text-white"
-                  />
-  
-                  <button type="button" class="record-button" aria-label="音声録音開始">
-                      <div class="record-icon"></div>
-                  </button>
-  
-                  <button
-                      type="submit"
-                      class="submit-button px-4 py-2 border rounded-lg bg-blue-500 text-white hover:bg-blue-600"
-                  >
-                      送信
-                  </button>
-              </form>
-          `;
-        newItem.addEventListener("click", handleRecording);
-        document.getElementById("people-list").appendChild(newItem);
-        userCount++; // 新しいメンバーを追加するたびにカウントを増やす
-      });
-
-      // 「録音画面に戻る」ボタンの処理
-      document
-        .getElementById("backButton")
-        .addEventListener("click", function () {
-          // メンバーの人数を送信する
-          sendUserCount();
-
-          // index.htmlに戻る
-          window.location.href = "index.html";
-        });
-
-      // メンバーの人数を送信する関数
-      function sendUserCount() {
-        console.log(`追加された人数: ${userCount}`);
-        // ここで人数を送信する処理を実行（例: fetchを使ってサーバーに送信）
+      function showRecorder() {
+        // 録音画面へ遷移
+        window.location.href = "index";
       }
     </script>
   </body>