Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

mizz12 commited on Mar 16

Commit

d45f43f

1 Parent(s): 1767d67

アプリとHTMLファイルを更新

Browse files

Files changed (3) hide show

app.py +5 -0
templates/history.html +120 -0
templates/index.html +100 -76

app.py CHANGED Viewed

@@ -24,6 +24,11 @@ def feedback():
 def talk_detail():
     return render_template('talkDetail.html')
 # 音声アップロード＆解析エンドポイント
 @app.route('/upload_audio', methods=['POST'])
 def upload_audio():

 def talk_detail():
     return render_template('talkDetail.html')
+# 会話履歴画面（テンプレート: history.html）
+@app.route('/history', methods=['GET', 'POST'])
+def history():
+    return render_template('history.html')
 # 音声アップロード＆解析エンドポイント
 @app.route('/upload_audio', methods=['POST'])
 def upload_audio():

templates/history.html ADDED Viewed

	@@ -0,0 +1,120 @@

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>会話履歴</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        background-color: #fff;
+        color: #000;
+      }
+      header {
+        padding: 16px;
+        background-color: #f5f5f5;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        font-size: 20px;
+        font-weight: bold;
+        text-align: center;
+      }
+      .recording-list {
+        padding: 16px;
+      }
+      .record-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px;
+        margin: 8px 0;
+        border-radius: 8px;
+        background-color: #e9e9e9;
+        transition: background-color 0.2s ease;
+        cursor: pointer;
+      }
+      .record-item:hover {
+        background-color: #d3d3d3;
+      }
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .timestamp {
+        font-size: 14px;
+        color: #555;
+      }
+      .record-item-template {
+        display: none;
+      }
+      button {
+        margin: 5px;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 4px; /* 4pxに統一 */
+        background-color: #007bff;
+        color: #fff;
+        cursor: pointer;
+        position: fixed; /* 画面に固定 */
+        left: 50%; /* 水平方向の中央 */
+        transform: translateX(-50%); /* 中央に配置 */
+        bottom: 20px; /* 画面下に配置 */
+      }
+      .history-button:hover {
+        background-color: #0056b3;
+      }
+      button:hover {
+        background-color: #0056b3;
+      }
+    </style>
+    <script>
+      const recordings = [
+        { title: "Recording 1", time: "01:15:35", date: "2/26/2025" },
+        { title: "Recording 2", time: "00:16:41", date: "2/10/2025" },
+      ];
+      function createRecordItem(title, time, date) {
+        const template = document.querySelector(".record-item-template");
+        const item = template.cloneNode(true);
+        item.classList.remove("record-item-template");
+        item.style.display = "flex";
+        item.querySelector(".title").textContent = title;
+        item.querySelector(".timestamp").textContent = `${time} | ${date}`;
+        item.onclick = () => (location.href = "talkDetail");
+        return item;
+      }
+      function renderRecordings() {
+        const list = document.querySelector(".recording-list");
+        list.innerHTML = "";
+        recordings.forEach((rec) => {
+          const item = createRecordItem(rec.title, rec.time, rec.date);
+          list.appendChild(item);
+        });
+      }
+      window.onload = renderRecordings;
+      //画面遷移
+      function showRecorder() {
+        // 録音画面へ遷移
+        window.location.href = "/index";
+      }
+    </script>
+  </head>
+  <body>
+    <header>All Recordings</header>
+    <div class="recording-list">
+      <div class="record-item record-item-template">
+        <div>
+          <div class="title">Recording Title</div>
+          <div class="timestamp">00:00:00 | 1/1/2025</div>
+        </div>
+      </div>
+    </div>
+    <button class="history-button" id="detailButton" onclick="showRecorder()">
+      録音画面を表示
+    </button>
+  </body>
+</html>

templates/index.html CHANGED Viewed

@@ -1,8 +1,8 @@
 <!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 {
@@ -85,8 +85,12 @@
     </button>
     <div class="result-buttons">
-      <button class="result-button" id="historyButton" onclick="showHistory()">会話履歴を表示</button>
-      <button class="result-button" id="feedbackButton" onclick="showResults()">フィードバック画面を表示</button>
     </div>
     <script>
@@ -94,44 +98,48 @@
       let mediaRecorder;
       let audioChunks = [];
       let recordingInterval;
-      let count_voice=0;
-      let before_rate=0;
       // 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' }
-            }
-          }
-        }
       });
       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);
               }
@@ -147,93 +155,109 @@
             recordingInterval = setInterval(() => {
               if (mediaRecorder && mediaRecorder.state === "recording") {
                 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 === "recording") {
             mediaRecorder.stop();
-            count_voice=0;
-            before_rate=0;
           }
         }
       }
       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 => {
-            if (data.error) {
-              alert('エラー: ' + data.error);
-              console.error(data.details);
-            } else if (data.rate !== undefined) {
-              // 解析結果が返ってきた場合はチャートを更新
-              if(count_voice==0){
-                speechChart.data.datasets[0].data = [data.rate, 100 - data.rate];
-                before_rate=data.rate;
-              }else if(count_voice==1){
-                let tmp_rate= (data.rate+before_rate)/2//データ数が二つだから平均をとる
-                speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
-                console.log(before_rate,tmp_rate, 100 - tmp_rate)
-                before_rate=tmp_rate;
-              }else{
-                let tmp_rate= (data.rate+before_rate*2)/3//過去のやつに重みを付けて三つで考える。
-                speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
-                console.log(before_rate,tmp_rate, 100 - tmp_rate);
-                before_rate=tmp_rate;//ここのrateを保存しておく
               }
-              count_voice++;
-              speechChart.update();
-              //lert('音声の解析が完了しました。自分の音声: ' + data.rate.toFixed(2) + '%, 他の人: ' + (100 - data.rate).toFixed(2) + '%');
-            } else {
-              alert('音声がバックエンドに送信されました。');
-            }
-            // 録音が継続中であれば、再度録音を開始（自動録音の連続処理）
-            if (isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
-              mediaRecorder.start();
-            }
-          })
-          .catch(error => {
-            console.error('エラー:', error);
-            if (isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
-              mediaRecorder.start();
-            }
-          });
         };
         reader.readAsDataURL(audioBlob);
       }
       function showHistory() {
         // 会話履歴表示の画面があれば、そのページへ遷移する例
-        // window.location.href = 'history';
-        alert('会話履歴を表示する機能は未実装です。');
       }
       function showResults() {
         // フィードバック画面へ遷移
-        window.location.href = 'feedback';
       }
     </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 {
     </button>
     <div class="result-buttons">
+      <button class="result-button" id="historyButton" onclick="showHistory()">
+        会話履歴を表示
+      </button>
+      <button class="result-button" id="feedbackButton" onclick="showResults()">
+        フィードバック画面を表示
+      </button>
     </div>
     <script>
       let mediaRecorder;
       let audioChunks = [];
       let recordingInterval;
+      let count_voice = 0;
+      let before_rate = 0;
       // 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" },
+            },
+          },
+        },
       });
       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);
               }
             recordingInterval = setInterval(() => {
               if (mediaRecorder && mediaRecorder.state === "recording") {
                 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 === "recording") {
             mediaRecorder.stop();
+            count_voice = 0;
+            before_rate = 0;
           }
         }
       }
       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) => {
+              if (data.error) {
+                alert("エラー: " + data.error);
+                console.error(data.details);
+              } else if (data.rate !== undefined) {
+                // 解析結果が返ってきた場合はチャートを更新
+                if (count_voice == 0) {
+                  speechChart.data.datasets[0].data = [
+                    data.rate,
+                    100 - data.rate,
+                  ];
+                  before_rate = data.rate;
+                } else if (count_voice == 1) {
+                  let tmp_rate = (data.rate + before_rate) / 2; //データ数が二つだから平均をとる
+                  speechChart.data.datasets[0].data = [
+                    tmp_rate,
+                    100 - tmp_rate,
+                  ];
+                  console.log(before_rate, tmp_rate, 100 - tmp_rate);
+                  before_rate = tmp_rate;
+                } else {
+                  let tmp_rate = (data.rate + before_rate * 2) / 3; //過去のやつに重みを付けて三つで考える。
+                  speechChart.data.datasets[0].data = [
+                    tmp_rate,
+                    100 - tmp_rate,
+                  ];
+                  console.log(before_rate, tmp_rate, 100 - tmp_rate);
+                  before_rate = tmp_rate; //ここのrateを保存しておく
+                }
+                count_voice++;
+                speechChart.update();
+                //lert('音声の解析が完了しました。自分の音声: ' + data.rate.toFixed(2) + '%, 他の人: ' + (100 - data.rate).toFixed(2) + '%');
+              } else {
+                alert("音声がバックエンドに送信されました。");
               }
+              // 録音が継続中であれば、再度録音を開始（自動録音の連続処理）
+              if (
+                isRecording &&
+                mediaRecorder &&
+                mediaRecorder.state === "inactive"
+              ) {
+                mediaRecorder.start();
+              }
+            })
+            .catch((error) => {
+              console.error("エラー:", error);
+              if (
+                isRecording &&
+                mediaRecorder &&
+                mediaRecorder.state === "inactive"
+              ) {
+                mediaRecorder.start();
+              }
+            });
         };
         reader.readAsDataURL(audioBlob);
       }
       function showHistory() {
         // 会話履歴表示の画面があれば、そのページへ遷移する例
+        window.location.href = "history";
+        //alert('会話履歴を表示する機能は未実装です。');
       }
       function showResults() {
         // フィードバック画面へ遷移
+        window.location.href = "feedback";
       }
     </script>
   </body>
+</html>