Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

A-yum1 commited on Mar 15

Commit

4bc59e8

2 Parent(s): 793bb36 d7776bd

merge main and AyumiWork

Browse files

Files changed (2) hide show

app.py +15 -2
templates/index.html +185 -167

app.py CHANGED Viewed

@@ -1,6 +1,9 @@
 from flask import Flask, request, jsonify, render_template
 import base64
 import os
 app = Flask(__name__)
@@ -39,7 +42,7 @@ def upload_audio():
         persist_dir = "/tmp/data"
         os.makedirs(persist_dir, exist_ok=True)
-        filepath = os.path.join(persist_dir, "recorded_audio.wav")
         with open(filepath, 'wb') as f:
             f.write(audio_binary)
@@ -49,6 +52,16 @@ def upload_audio():
         app.logger.error("エラー: %s", str(e))
         return jsonify({"error": "サーバー内部エラー", "details": str(e)}), 500
 if __name__ == '__main__':
     port = int(os.environ.get("PORT", 7860))
-    app.run(debug=True, host="0.0.0.0", port=port)

 from flask import Flask, request, jsonify, render_template
 import base64
 import os
+import string
+import random
+from datetime import datetime
 app = Flask(__name__)
         persist_dir = "/tmp/data"
         os.makedirs(persist_dir, exist_ok=True)
+        filepath = os.path.join(persist_dir, generate_filename(6))   #ここだけ変更しましたごめんなさい
         with open(filepath, 'wb') as f:
             f.write(audio_binary)
         app.logger.error("エラー: %s", str(e))
         return jsonify({"error": "サーバー内部エラー", "details": str(e)}), 500
+def generate_random_string(length):
+    letters = string.ascii_letters + string.digits
+    return ''.join(random.choice(letters) for i in range(length))
+def generate_filename(random_length):
+    random_string = 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
 if __name__ == '__main__':
     port = int(os.environ.get("PORT", 7860))
+    app.run(debug=True, host="0.0.0.0", port=port)

templates/index.html CHANGED Viewed

@@ -1,177 +1,195 @@
 <!DOCTYPE html>
 <html lang="ja">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Voice Recorder Interface</title>
-    <style>
-      body {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        margin: 0;
-        background-color: #121212;
-        color: white;
-      }
-      .chart {
-        width: 300px;
-        height: 300px;
-        margin-bottom: 20px;
-      }
-      .record-button {
-        position: fixed;
-        bottom: 30px;
-        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%;
-      }
-      .result-button {
-        margin-top: 20px;
-        padding: 10px 20px;
-        background-color: #4caf50;
-        border: none;
-        border-radius: 5px;
-        color: white;
-        cursor: pointer;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-      }
-      .result-button:hover {
-        background-color: #388e3c;
-      }
-      .result {
-        display: flex;
-      }
-    </style>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  </head>
-  <body>
-    <div class="chart">
-      <canvas id="speechChart"></canvas>
-    </div>
-    <button class="record-button" id="recordButton" onclick="toggleRecording()">
-      <div class="record-icon" id="recordIcon"></div>
-    </button>
-    <form method="POST" action="/feedback">
-      <div class="result">
-        <button class="result-button" id="resultButton" onclick="showHistory()">
-          会話履歴を表示
-        </button>
-        <button class="result-button" id="resultButton" onclick="showResults()">
-          フィードバック画面を表示
-        </button>
-      </div>
-    </form>
-    <script>
-      let isRecording = false;
-      let mediaRecorder;
-      let audioChunks = [];
-      async function toggleRecording() {
-        const recordButton = document.getElementById("recordButton");
-        const recordIcon = document.getElementById("recordIcon");
-        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 = () => {
-              const audioBlob = new Blob(audioChunks, { 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 }),
-                })
-                  .then((response) => response.json())
-                  .then((data) => {
-                    alert("音声がバックエンドに送信されました。");
-                  })
-                  .catch((error) => {
-                    console.error("エラー:", error);
-                  });
-              };
-              reader.readAsDataURL(audioBlob);
-            };
-            mediaRecorder.start();
-          } catch (error) {
-            console.error("マイクへのアクセスに失敗しました:", error);
-            isRecording = false;
-            recordButton.classList.remove("recording");
-          }
-        } else {
-          // 録音停止
           isRecording = false;
-          recordButton.classList.remove("recording");
-          if (mediaRecorder && mediaRecorder.state !== "inactive") {
-            mediaRecorder.stop();
-          }
         }
       }
-      // Chart.js の初期化
-      const ctx = document.getElementById("speechChart").getContext("2d");
-      const speechChart = new Chart(ctx, {
-        type: "doughnut",
-        data: {
-          labels: ["自分", "他の人"],
-          datasets: [
-            {
-              data: [30, 70],
-              backgroundColor: ["#4caf50", "#757575"],
-            },
-          ],
-        },
-        options: {
-          responsive: true,
-          plugins: {
-            legend: {
-              display: true,
-              position: "bottom",
-              labels: {
-                color: "white",
-              },
-            },
           },
-        },
-      });
-    </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>Voice Recorder Interface</title>
+  <style>
+    body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      background-color: #121212;
+      color: white;
+    }
+    .chart {
+      width: 300px;
+      height: 300px;
+      margin-bottom: 20px;
+    }
+    .record-button {
+      position: fixed;
+      bottom: 30px;
+      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%;
+    }
+    .result-button {
+      margin-top: 20px;
+      padding: 10px 20px;
+      background-color: #4caf50;
+      border: none;
+      border-radius: 5px;
+      color: white;
+      cursor: pointer;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+    }
+    .result-button:hover {
+      background-color: #388e3c;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+  <div class="chart">
+    <canvas id="speechChart"></canvas>
+  </div>
+  <button class="record-button" id="recordButton" onclick="toggleRecording()">
+    <div class="record-icon" id="recordIcon"></div>
+  </button>
+  <form method="POST" action="/feedback">
+    <div class="result">
+      <button class="result-button" id="resultButton" onclick="showHistory()">
+        会話履歴を表示
+      </button>
+      <button class="result-button" id="resultButton" onclick="showResults()">
+        フィードバック画面を表示
+      </button>
+    </div>
+  </form>
+  <script>
+    let isRecording = false;
+    let mediaRecorder;
+    let audioChunks = [];
+    let isRecordingStopped = false; //自動停止を管理する
+    let recordingInterval;
+    async function toggleRecording() {
+      const recordButton = document.getElementById('recordButton');
+      const recordIcon = document.getElementById('recordIcon');
+      if (!isRecording) {
+        // 録音開始
+        isRecording = true;
+        recordButton.classList.add('recording');
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          mediaRecorder = new MediaRecorder(stream);
+          audioChunks = [];
+          previousAudioChunks = [];
+          mediaRecorder.ondataavailable = event => {
+            if (event.data.size > 0) {
+              audioChunks.push(event.data);
+            }
+          };
+          mediaRecorder.onstop = () => {
+            sendAudioChunks([...audioChunks]);
             audioChunks = [];
+          };
+          mediaRecorder.start();
+          recordingInterval = setInterval(() => {
+            if(isRecording && !isRecordingStopped){
+              isRecordingStopped = true;
+              mediaRecorder.stop();
+            }
+          },10000);
+        } catch (error) {
+          console.error('マイクへのアクセスに失敗しました:', error);
           isRecording = false;
+          recordButton.classList.remove('recording');
+        }
+      } else {
+        // 録音停止
+        isRecording = false;
+        recordButton.classList.remove('recording');
+        clearInterval(recordingInterval);
+        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+          mediaRecorder.stop();
         }
       }
+    }
+    function sendAudioChunks(chunks){
+      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 }),
+        })
+        .then(response => response.json())
+        .then(data => {
+          alert('音声がバックエンドに送信されました。');
+        })
+        .catch(error => {
+          console.error('エラー:', error);
+        });
+      };
+      reader.readAsDataURL(audioBlob);
+      isRecordingStopped = false;
+      mediaRecorder.start();
+    }
+    function showResults() {
+      window.location.href = 'feedback.html';
+    }
+    // Chart.js の初期化
+    const ctx = document.getElementById('speechChart').getContext('2d');
+    const speechChart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['自分', '他の人'],
+        datasets: [{
+          data: [30, 70],
+          backgroundColor: ['#4caf50', '#757575'],
+        }],
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            display: true,
+            position: 'bottom',
+            labels: {
+              color: 'white'
+            }
+          }
+        }
+      }
+    });
+  </script>
+</body>
+</html>