Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on Mar 17

Commit

de16ffe

verified ·

1 Parent(s): 7f39f82

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +167 -110

templates/index.html CHANGED Viewed

@@ -15,13 +15,61 @@
         background-color: #121212;
         color: white;
       }
       .chart {
         width: 300px;
         height: 300px;
-        margin-bottom: 50px; /* 円グラフとボタンの間隔を狭く */
       }
       .record-button {
         position: fixed;
         bottom: 30px;
@@ -37,7 +85,6 @@
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
         transition: all 0.2s ease;
       }
       .record-icon {
         width: 60px;
         height: 60px;
@@ -45,19 +92,17 @@
         border-radius: 50%;
         transition: all 0.2s ease;
       }
       .recording .record-icon {
         width: 40px;
         height: 40px;
         border-radius: 10%;
       }
       .result-buttons {
-        margin-top: 5px; /* ボタン間の距離を少し縮める */
         display: flex;
         gap: 10px;
       }
       .result-button {
         padding: 10px 20px;
         background-color: #4caf50;
@@ -68,7 +113,6 @@
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
         transition: background-color 0.2s ease;
       }
       .result-button:hover {
         background-color: #388e3c;
       }
@@ -76,70 +120,81 @@
     <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>
     <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 isRecording = false;
       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);
               }
@@ -151,22 +206,40 @@
             };
             mediaRecorder.start();
-            // 10秒ごとに自動で停止して送信
-            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;
@@ -176,87 +249,71 @@
       }
       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>

         background-color: #121212;
         color: white;
       }
+      /* トグルスイッチ（基準音声保存用） */
+      .toggle-container {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+      .toggle-label {
+        margin-right: 10px;
+      }
+      .toggle-switch {
+        position: relative;
+        display: inline-block;
+        width: 50px;
+        height: 24px;
+      }
+      .toggle-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #757575;
+        transition: 0.2s;
+        border-radius: 34px;
+      }
+      .slider::before {
+        content: "";
+        position: absolute;
+        height: 18px;
+        width: 18px;
+        left: 4px;
+        bottom: 3px;
+        background-color: white;
+        transition: 0.2s;
+        border-radius: 50%;
+      }
+      input:checked + .slider {
+        background-color: #4caf50;
+      }
+      input:checked + .slider::before {
+        transform: translateX(26px);
+      }
+      /* チャートのスタイル */
       .chart {
         width: 300px;
         height: 300px;
+        margin-bottom: 50px;
       }
+      /* 録音ボタンのスタイル */
       .record-button {
         position: fixed;
         bottom: 30px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
         transition: all 0.2s ease;
       }
       .record-icon {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         transition: all 0.2s ease;
       }
       .recording .record-icon {
         width: 40px;
         height: 40px;
         border-radius: 10%;
       }
+      /* 結果ボタンのスタイル */
       .result-buttons {
+        margin-top: 5px;
         display: flex;
         gap: 10px;
       }
       .result-button {
         padding: 10px 20px;
         background-color: #4caf50;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
         transition: background-color 0.2s ease;
       }
       .result-button:hover {
         background-color: #388e3c;
       }
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   </head>
   <body>
+    <!-- トグルスイッチ：基準音声保存モード -->
+    <div class="toggle-container">
+      <span class="toggle-label">基準音声を保存</span>
+      <label class="toggle-switch">
+        <input type="checkbox" id="baseVoiceToggle" />
+        <span class="slider"></span>
+      </label>
+    </div>
+    <!-- チャート表示部 -->
     <div class="chart">
       <canvas id="speechChart"></canvas>
     </div>
+    <!-- 録音ボタン -->
     <button class="record-button" id="recordButton" onclick="toggleRecording()">
       <div class="record-icon" id="recordIcon"></div>
     </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 isRecording = false;
       let mediaRecorder;
       let audioChunks = [];
+      let recordingInterval; // 通常モードでの10秒周期用
+      let baseTimeout;       // 基準音声モード用のタイマー
       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' }
+            }
+          }
+        }
       });
+      // トグルの状態を取得する関数
+      function isBaseVoiceMode() {
+        return document.getElementById('baseVoiceToggle').checked;
+      }
       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);
               }
             };
             mediaRecorder.start();
+            if (isBaseVoiceMode()) {
+              // 基準音声モード：10秒後に自動停止するタイマーをセット
+              baseTimeout = setTimeout(() => {
+                if (mediaRecorder && mediaRecorder.state === "recording") {
+                  mediaRecorder.stop();
+                  // 10秒経過しても録音ボタンがONなら強制的に停止＆トグルをオフにする
+                  isRecording = false;
+                  recordButton.classList.remove('recording');
+                  document.getElementById('baseVoiceToggle').checked = false;
+                }
+              }, 10000);
+            } else {
+              // 通常モード：10秒ごとに自動停止して送信、継続録音する処理
+              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');
+          if (isBaseVoiceMode()) {
+            clearTimeout(baseTimeout);
+          } else {
+            clearInterval(recordingInterval);
+          }
           if (mediaRecorder && mediaRecorder.state === "recording") {
             mediaRecorder.stop();
             count_voice = 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エンコードされた音声データ
+          // エンドポイントの選択：基準音声モードなら '/upload_base_audio'
+          const endpoint = isBaseVoiceMode() ? '/upload_base_audio' : '/upload_audio';
+          fetch(endpoint, {
+            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 && !isBaseVoiceMode()) {
+              // 通常モードの場合、解析結果をチャートに反映
+              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];
+                before_rate = tmp_rate;
               } else {
+                let tmp_rate = (data.rate + before_rate * 2) / 3;
+                speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
+                before_rate = tmp_rate;
               }
+              count_voice++;
+              speechChart.update();
+            } else {
+              // 基準音声モードまたは解析結果がない場合
+              if (isBaseVoiceMode()) {
+                //alert('基準音声が保存されました。');
+                // トグルをリセット
+                document.getElementById('baseVoiceToggle').checked = false;
+              } else {
+                //alert('音声がバックエンドに送信されました。');
               }
+            }
+            // 通常モードの場合、録音が継続中なら次の録音を開始（自動連続録音）
+            if (!isBaseVoiceMode() && isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
+              mediaRecorder.start();
+            }
+          })
+          .catch(error => {
+            console.error('エラー:', error);
+            if (!isBaseVoiceMode() && isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
+              mediaRecorder.start();
+            }
+          });
         };
         reader.readAsDataURL(audioBlob);
       }
       function showHistory() {
+        alert('会話履歴を表示する機能は未実装です。');
       }
       function showResults() {
+        window.location.href = 'feedback';
       }
     </script>
   </body>