upload

app.py

@@ -14,6 +14,7 @@ from dotenv import load_dotenv
 from google.oauth2 import id_token
 from google_auth_oauthlib.flow import Flow
 from google.auth.transport import requests as google_requests
+from new_record import record_bp
 
 
 # Hugging Face のトークン取得（環境変数 HF に設定）
@@ -39,7 +40,9 @@ app.config['SECRET_KEY'] = os.urandom(24)
 os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"
 GOOGLE_CLIENT_ID = "228160683186-6u7986qsfhcv3kd9iqtv08iphpl4gdk2.apps.googleusercontent.com"
 GOOGLE_CLIENT_SECRET = "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"
+#HFにpushするときは下記のコメントアウトを外してください
 #REDIRECT_URI = "https://huggingface.co/spaces/Justtalk/JusTalk/callback"
+#ローカルの時はこちら
 REDIRECT_URI = "http://127.0.0.1:7860/callback"
 
 flow = Flow.from_client_secrets_file(
@@ -105,10 +108,12 @@ def generate_filename(random_length):
     filename = f"{current_time}_{random_string}.wav"
     return filename
 
+app.register_blueprint(record_bp)
+
 # トップページ（テンプレート: index.html）
 @app.route('/')
 def top():
-    return redirect('login')
+    return redirect('index')
 
 # ログイン画面（テンプレート: login.html）
 @app.route('/login')
@@ -123,7 +128,12 @@ def login():
 def callback():
     flow.fetch_token(authorization_response=request.url)
 
-    if not session['state'] == request.args['state']:
+    # `session.get('state')` を使用し、エラーを防ぐ
+    session_state = session.get('state')
+    request_state = request.args.get('state')
+
+    if session_state is None or session_state != request_state:
+        print(f"State mismatch error: session_state={session_state}, request_state={request_state}")
         return 'State mismatch error', 400
 
     credentials = flow.credentials
@@ -137,40 +147,48 @@ def callback():
     session['email'] = id_info.get("email")
     session['name'] = id_info.get("name")
 
-    return redirect(url_for('index'))
+    return redirect(url_for('new_person'))
+
 
 # フィードバック画面（テンプレート: feedback.html）
 @app.route('/feedback', methods=['GET', 'POST'])
 def feedback():
+    #ログイン問題解決しだい戻す
+    """
     if 'google_id' not in session:
         return redirect(url_for('login'))
     user_info = {
         'name': session.get('name'),
         'email': session.get('email')
     }
-    return render_template('feedback.html', user=user_info)
+    """
+    return render_template('feedback.html')
 
 # 会話詳細画面（テンプレート: talkDetail.html）
 @app.route('/talk_detail', methods=['GET', 'POST'])
 def talk_detail():
+    """
     if 'google_id' not in session:
         return redirect(url_for('login'))
     user_info = {
         'name': session.get('name'),
         'email': session.get('email')
    }
-    return render_template('talkDetail.html', user=user_info)
+   """
+    return render_template('talkDetail.html')
 
    # インデックス画面（テンプレート: index.html）
 @app.route('/index', methods=['GET', 'POST'])
 def index():
+    """
    if 'google_id' not in session:
         return redirect(url_for('login'))
    user_info = {
         'name': session.get('name'),
         'email': session.get('email')
    }
-   return render_template('index.html', user=user_info)
+   """
+    return render_template('index.html')
 
 # 登録画面（テンプレート: new_person.html）
 @app.route('/new_person', methods=['GET', 'POST'])

new_record.py

@@ -0,0 +1,43 @@
+from flask import Blueprint, request, jsonify
+import os
+import base64
+from pydub import AudioSegment
+
+record_bp = Blueprint('record', __name__)
+
+# 録音データの保存先ディレクトリ
+record_data_dir = "record_data"
+os.makedirs(record_data_dir, exist_ok=True)
+
+@record_bp.route('/upload_audio', methods=['POST'])
+def upload_audio():
+    try:
+        data = request.get_json()
+        if not data or 'audio_data' not in data or 'user_name' not in data:
+            return jsonify({"error": "音声データまたはユーザー名がありません"}), 400
+        
+        user_name = data['user_name'].replace(" ", "_")  # 空白をアンダースコアに変換
+        audio_binary = base64.b64decode(data['audio_data'])
+
+        # 保存先のファイルパス
+        audio_path = os.path.join(record_data_dir, f"{user_name}.wav")
+
+        # 一時ファイルとして保存
+        temp_audio_path = os.path.join(record_data_dir, "temp_audio")
+        with open(temp_audio_path, 'wb') as f:
+            f.write(audio_binary)
+
+        # pydub を使って WAV に変換
+        try:
+            audio = AudioSegment.from_file(temp_audio_path, format="webm")
+        except Exception:
+            audio = AudioSegment.from_file(temp_audio_path)
+        
+        audio.export(audio_path, format="wav")
+        os.remove(temp_audio_path)
+
+        return jsonify({"success": True, "message": f"音声が {audio_path} に保存されました"}), 200
+
+    except Exception as e:
+        print("Error in /upload_audio:", str(e))
+        return jsonify({"error": "サーバーエラー", "details": str(e)}), 500

templates/feedback.html

@@ -115,7 +115,6 @@
     </script>
   </head>
   <body>
-    <h1 class="mb-4">ようこそ, {{ user.name }} さん!</h1>
     <div class="card">
       <div class="level" id="level">話者Lv: 85</div>
       <div class="message" id="message">素晴らしい</div>

templates/history.html

@@ -109,7 +109,7 @@
   </head>
   <body>
     <header>All Recordings</header>
-    <h1>ようこそ, {{ user.name }} さん!</h1>
+
     <div class="recording-list">
       <div class="record-item record-item-template">
         <div>

templates/index.html

@@ -121,11 +121,22 @@
       .result-button:hover {
         background-color: #388e3c;
       }
+      header {
+        display: flex;
+      }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   </head>
   <body>
-    <h1>ようこそ, {{ user.name }} さん!</h1>
+    <header>
+      <div></div>
+      <div>
+        <button class="result-button" id="historyButton" onclick="showLogin()">
+          ログイン
+        </button>
+      </div>
+    </header>
+
     <!-- トグルスイッチ：基準音声保存モード -->
     <div class="toggle-container">
       <span class="toggle-label">基準音声を保存</span>
@@ -352,6 +363,11 @@
         // フィードバック画面へ遷移
         window.location.href = "feedback";
       }
+
+      function showLogin() {
+        // フィードバック画面へ遷移
+        window.location.href = "login";
+      }
     </script>
   </body>
 </html>

templates/new_person.html

@@ -188,16 +188,14 @@
       let audioChunks = [];
       let countdownTimer;
       let isAudioRecorded = false;
-
+      sessionStorage.setItem("userName", "{{ user.name }}");
       async function toggleRecording() {
         const recordButton = document.getElementById("recordButton");
-
         const countdownDisplay = document.getElementById("countdownDisplay");
 
         recordButton.disabled = true; // ボタンを無効化（連打防止）
         countdownDisplay.textContent = "録音中…"; // 初期表示
         isAudioRecorded = false;
-        recordIcon.classList.add("recording"); // アイコンを正方形に変更
 
         try {
           const stream = await navigator.mediaDevices.getUserMedia({
@@ -215,17 +213,15 @@
           mediaRecorder.onstop = () => {
             sendAudioChunks([...audioChunks]); // 録音データをサーバーに送信
             audioChunks = [];
-            recordButton.disabled = false; // ボタンを再度有効化
-            countdownDisplay.textContent = ""; // カウントダウンを消す
-            isAudioRecorded = true; // 録音完了
-            recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す
-            validateForm(); // フォームの状態を更新
+            recordButton.disabled = false;
+            countdownDisplay.textContent = "";
+            isAudioRecorded = true;
+            validateForm();
           };
 
           mediaRecorder.start();
-          startCountdown(10, countdownDisplay); // 10秒のカウントダウン開始
+          startCountdown(10, countdownDisplay);
 
-          // 10秒後に録音を自動停止
           setTimeout(() => {
             if (mediaRecorder.state === "recording") {
               mediaRecorder.stop();
@@ -233,9 +229,8 @@
           }, 10000);
         } catch (error) {
           console.error("マイクのアクセスに失敗しました:", error);
-          recordButton.disabled = false; // ボタンを再度有効化
-          countdownDisplay.textContent = ""; // カウントダウンを消す
-          recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す
+          recordButton.disabled = false;
+          countdownDisplay.textContent = "";
         }
       }
 
@@ -248,29 +243,36 @@
           displayElement.textContent = `録音終了まで: ${remaining}秒`;
 
           if (remaining <= 0) {
-            clearInterval(countdownTimer); // カウントダウン終了
+            clearInterval(countdownTimer);
           }
         }, 1000);
       }
 
       function sendAudioChunks(chunks) {
+        const userName = sessionStorage.getItem("userName"); // ユーザー名を取得
+        if (!userName) {
+          alert("ユーザー名が取得できません。ログインしてください。");
+          return;
+        }
+
         const audioBlob = new Blob(chunks, { type: "audio/wav" });
         const reader = new FileReader();
         reader.onloadend = () => {
           const base64String = reader.result.split(",")[1]; // Base64 に変換
           fetch("/upload_audio", {
             method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ audio_data: base64String }),
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              audio_data: base64String,
+              user_name: userName,
+            }),
           })
             .then((response) => response.json())
             .then((data) => {
               if (data.success) {
                 alert("音声がサーバーに送信されました。");
-                isAudioRecorded = true; // サーバーからの成功レスポンスを受け取った後に設定
-                validateForm(); // フォームの状態を更新
+                isAudioRecorded = true;
+                validateForm();
               } else {
                 alert("音声の送信に失敗しました。");
               }
@@ -283,17 +285,9 @@
         reader.readAsDataURL(audioBlob);
       }
 
-      // フォームの入力状態をチェック
-      function validateForm() {
-        const submitButton = document.getElementById("submit");
-
-        if (isAudioRecorded) {
-          submitButton.classList.remove("disabled");
-          submitButton.disabled = false;
-        } else {
-          submitButton.classList.add("disabled");
-          submitButton.disabled = true;
-        }
+      // ユーザー名をセッションに保存（ログイン後に実行）
+      function setUserName(userName) {
+        sessionStorage.setItem("userName", userName);
       }
 
       // 初期化処理

templates/talkDetail.html

@@ -70,7 +70,6 @@
     </style>
   </head>
   <body>
-    <h1>ようこそ, {{ user.name }} さん!</h1>
     <div class="container">
       <h2>会話の文字起こし表示</h2>
       <div id="transcription">ここに会話内容が表示されます。</div>