Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on Mar 17

Commit

994dca5

verified ·

1 Parent(s): db2374b

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -320

index.html DELETED Viewed

@@ -1,320 +0,0 @@
-<!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;
-      }
-      /* トグルスイッチ（基準音声保存用） */
-      .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;
-        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-buttons {
-        margin-top: 5px;
-        display: flex;
-        gap: 10px;
-      }
-      .result-button {
-        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);
-        transition: background-color 0.2s ease;
-      }
-      .result-button:hover {
-        background-color: #388e3c;
-      }
-    </style>
-    <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.onstop = () => {
-              sendAudioChunks([...audioChunks]);
-              audioChunks = [];
-            };
-            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;
-            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エンコードされた音声データ
-          // エンドポイントの選択：基準音声モードなら '/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>
-</html>