Spaces:

Justtalk
/

JusTalk

Running

File size: 10,377 Bytes

<!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>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex flex-col items-center justify-center h-screen bg-gray-900 text-white">
    <!-- メンバーを登録ボタン -->
    <div class="flex items-center mb-5">
      <button
        id="registerButton"
        onclick="showUserRegister()"
        class="px-4 py-2 bg-blue-600 rounded-md hover:bg-blue-700 transition"
      >
        メンバーを登録
      </button>
    </div>

    <!-- チャート表示部 -->
    <div class="chart w-72 h-72 mb-5">
      <canvas id="speechChart"></canvas>
    </div>

    <!-- 録音フォーム -->
    <form
      id="recordForm"
      action="/submit"
      method="POST"
      class="flex items-center space-x-2 w-full sm:w-auto"
      onsubmit="event.preventDefault();"
    >
     
      <!-- 録音ボタン -->
      <button type="button" class="record-button" id="recordButton" onclick="toggleRecording()">
        <div class="record-icon" id="recordIcon"></div>
      </button>
    </form>

    <!-- 結果ボタン -->
    <div class="flex mt-5">
      <button
        id="historyButton"
        onclick="showTalkdetail()"
        class="result-button px-4 py-2 mx-2 bg-green-600 rounded-md hover:bg-green-700 transition"
      >
        会話履歴を表示
      </button>
      <button
        id="feedbackButton"
        onclick="showResults()"
        class="result-button px-4 py-2 mx-2 bg-blue-600 rounded-md hover:bg-blue-700 transition"
      >
        フィードバック画面を表示
      </button>
    </div>

    <style>
      .record-button {
        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%;
      }
    </style>

    <script>
      let isRecording = false;
      let mediaRecorder;
      let audioChunks = [];
      let recordingInterval;
      let count_voice = 0;
      let before_rate = 0;

      // メンバーとチャートの初期化
      let members = [];
      let voiceData = []; 
      let baseMemberColors = ["#4caf50", "#007bff", "#ffc107", "#dc3545", "#28a745", "#9c27b0", "#ff9800"];
      
      // Chart.js の初期化
      const ctx = document.getElementById("speechChart").getContext("2d");
      const speechChart = new Chart(ctx, {
        type: "doughnut",
        data: {
          labels: members,
          datasets: [
            {
              data: voiceData,
              backgroundColor: getMemberColors(members.length),
            },
          ],
        },
        options: {
          responsive: true,
          plugins: {
            legend: {
              display: true,
              position: "bottom",
              labels: { color: "white" },
            },
          },
        },
      });

      // サーバーからメンバー情報を取得してチャートを更新する関数
      async function updateChartFrom() {
        try {
          const response = await fetch("/confirm");
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          const data = await response.json();

          if (!data || !data.members || !Array.isArray(data.members)) {
            console.error("Invalid member data received:", data);
            members = ["member1"];
            voiceData = [50, 50];
            updateChart();
            return;
          }

          members = data.members;
          voiceData = [];
          for (let i = 0; i < members.length; i++) {
            voiceData.push(100 / members.length);
          }
          
          updateChart();
        } catch (error) {
          console.error("Failed to fetch member data:", error);
          members = ["member1"];
          voiceData = [50, 50];
          updateChart();
        }
      }

      function updateChart() {
        // 一人モードの場合は、ユーザーとグレー（無音）の比率をチャートに表示
        if (members.length === 1) {
          const userName = members[0];
          speechChart.data.labels = [userName, "その他"];
          speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
        } else {
          // 複数メンバーの場合は通常通りの処理
          speechChart.data.labels = members;
          speechChart.data.datasets[0].backgroundColor = getMemberColors(members.length);
        }
        
        speechChart.data.datasets[0].data = voiceData;
        speechChart.update();
      }

      // ページ読み込み時にチャート情報を更新
      updateChartFrom();

      // 録音ボタンの録音開始／停止処理
      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();
          } catch (error) {
            console.error("マイクへのアクセスに失敗しました:", error);
            isRecording = false;
            recordButton.classList.remove("recording");
          }
        } else {
          // 録音停止
          isRecording = false;
          recordButton.classList.remove("recording");
          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];
          const form = document.getElementById("recordForm");
          const nameInput = form.querySelector('input[name="name"]');
          const name = nameInput ? nameInput.value : "unknown";
          fetch("/upload_audio", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ audio_data: base64String, name: name }),
          })
            .then((response) => response.json())
            .then((data) => {
              if (data.error) {
                alert("エラー: " + data.error);
                console.error(data.details);
              } else if (data.rate !== undefined) {
                updateChartData(data.rate);
              }
            })
            .catch((error) => {
              console.error("エラー:", error);
            });
        };
        reader.readAsDataURL(audioBlob);
      }

      function getMemberColors(memberCount) {
        // 一人モードの場合は特別な処理をしない（updateChartで処理するため）
        if (memberCount <= 1) {
          return ["#4caf50", "#757575"];
        } else {
          let colors = [];
          for (let i = 0; i < memberCount; i++) {
            colors.push(baseMemberColors[i % baseMemberColors.length]);
          }
          return colors;
        }
      }

      function updateChartData(newRate) {
        // 一人モードの時の処理
        if (members.length === 1) {
          if (count_voice === 0) {
            speechChart.data.datasets[0].data = [newRate, 100 - newRate];
            before_rate = newRate;
          } else if (count_voice === 1) {
            let tmp_rate = (newRate + before_rate) / 2;
            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
            before_rate = tmp_rate;
          } else {
            let tmp_rate = (newRate + before_rate * 2) / 3;
            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
            before_rate = tmp_rate;
          }
          count_voice++;
          
          // 一人モードでは常に緑色とグレーの組み合わせを使用
          speechChart.data.labels = [members[0], "その他"];
          speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
        } else {
          // 複数メンバーの場合は元の処理
          if (count_voice === 0) {
            speechChart.data.datasets[0].data = [newRate, 100 - newRate];
            before_rate = newRate;
          } else if (count_voice === 1) {
            let tmp_rate = (newRate + before_rate) / 2;
            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
            before_rate = tmp_rate;
          } else {
            let tmp_rate = (newRate + before_rate * 2) / 3;
            speechChart.data.datasets[0].data = [tmp_rate, 100 - tmp_rate];
            before_rate = tmp_rate;
          }
          count_voice++;
          speechChart.data.datasets[0].backgroundColor = getMemberColors(members.length);
        }
        
        speechChart.update();
      }

      function showTalkdetail() {
        window.location.href = "talk_detail";
      }

      function showResults() {
        window.location.href = "feedback";
      }

      function showUserRegister() {
        fetch("/reset");
        window.location.href = "userregister";
      }
    </script>
  </body>
</html>