Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on Mar 16

Commit

37782cb

verified ·

1 Parent(s): 99daaaf

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +67 -92

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 {
@@ -19,14 +19,12 @@
       .chart {
         width: 300px;
         height: 300px;
-        margin-bottom: 20px; /* 円グラフとボタンの間隔を狭く */
-      }
-      .controls {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
       }
       .record-button {
         width: 80px;
         height: 80px;
         background-color: transparent;
@@ -54,10 +52,13 @@
         border-radius: 10%;
       }
-      .result-button {
-        margin-left: 10px;
-        margin-top: 20px;
         padding: 10px 20px;
         background-color: #4caf50;
         border: none;
@@ -65,10 +66,9 @@
         color: white;
         cursor: pointer;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
       }
-      .result {
-        display: flex;
-      }
       .result-button:hover {
         background-color: #388e3c;
       }
@@ -85,12 +85,8 @@
     </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>
@@ -100,45 +96,41 @@
       let recordingInterval;
       // 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);
               }
@@ -157,14 +149,14 @@
               }
             }, 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();
@@ -173,58 +165,41 @@
       }
       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) {
-                // 解析結果が返ってきた場合はチャートを更新
-                speechChart.data.datasets[0].data = [
-                  data.rate,
-                  100 - data.rate,
-                ];
-                speechChart.update();
-                alert(
-                  "音声の解析が完了しました。自分の音声: " +
-                    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);
       }
@@ -232,13 +207,13 @@
       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 {
       .chart {
         width: 300px;
         height: 300px;
+        margin-bottom: 50px; /* 円グラフとボタンの間隔を狭く */
       }
       .record-button {
+        position: fixed;
+        bottom: 30px;
         width: 80px;
         height: 80px;
         background-color: transparent;
         border-radius: 10%;
       }
+      .result-buttons {
+        margin-top: 5px; /* ボタン間の距離を少し縮める */
+        display: flex;
+        gap: 10px;
+      }
+      .result-button {
         padding: 10px 20px;
         background-color: #4caf50;
         border: none;
         color: white;
         cursor: pointer;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        transition: background-color 0.2s ease;
       }
       .result-button:hover {
         background-color: #388e3c;
       }
     </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 recordingInterval;
       // 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);
               }
               }
             }, 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();
       }
       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) {
+              // 解析結果が返ってきた場合はチャートを更新
+              speechChart.data.datasets[0].data = [data.rate, 100 - data.rate];
+              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>