Spaces:

Justtalk
/

JusTalk

Running

File size: 13,370 Bytes

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>ユーザー音声登録</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='menu.css') }}">
    <style>
      @keyframes pulse-scale {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
      }
      .animate-pulse-scale {
        animation: pulse-scale 1s infinite;
      }
      /* Record Button Styles */
      .record-button {
        width: 50px;
        height: 50px;
        background-color: transparent;
        border-radius: 50%;
        border: 2px 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.3s ease;
      }
      .record-icon {
        width: 35px;
        height: 35px;
        background-color: #d32f2f;
        border-radius: 50%;
        transition: all 0.3s ease;
      }
      .record-button.recording .record-icon {
        background-color: #f44336; /* 録音中は赤色 */
        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
      }
      .recording .record-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
      /* Title */
      .main-title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 1.5rem;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }
      /* Buttons */
      .action-button {
        margin-top: 1rem;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
        width: 100%;
      }
      .action-button:hover {
        background-color: rgba(55, 65, 81, 0.7);
      }
      .back-button {
        background-color: #607d8b; /* 落ち着いたグレー */
        color: white;
      }
      .add-button {
        background-color: #4caf50; /* 落ち着いた緑色 */
        color: white;
      }
      /* Disabled State */
      .disabled {
        opacity: 0.5;
        pointer-events: none;
      }

      /* Modal Styles */
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        justify-content: center;
        align-items: center;
      }
      
      .modal-content {
        background-color: #2d3748;
        color: white;
        padding: 2rem;
        border-radius: 1rem;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
      }

      .input-field {
        width: 100%;
        padding: 0.75rem;
        border-radius: 0.5rem;
        background-color: #1a202c;
        border: 1px solid #4a5568;
        color: white;
        margin-bottom: 1rem;
      }

      .modal-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
      }

      .modal-button {
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        cursor: pointer;
        min-width: 100px;
        text-align: center;
      }

      .record-modal-button {
        background-color: #d32f2f;
        color: white;
      }

      .cancel-button {
        background-color: #64748b;
        color: white;
      }
    </style>
  </head>
  <body>
    <!-- Main Content Wrapper -->
    <div class="main-content relative">
      <!-- Title -->
      <div class="main-title">JustTalk</div>
      <!-- User List -->
      <div id="people-list" class="space-y-4"></div>
      <!-- Add Button -->
      <button id="add-btn" class="action-button add-button">
        <i class="fas fa-user-plus"></i> メンバーを追加
      </button>
      <!-- 録音画面へ移動ボタン(Back Buttonから変更) -->
      <button
        id="backButton"
        onclick="showUserSelect()"
        class="action-button back-button"
      >
        <i class="fas fa-users"></i> メンバー選択画面を表示
      </button>
    </div>

    <!-- Modal for Adding New User -->
    <div id="add-modal" class="modal">
      <div class="modal-content">
        <h2 class="text-xl font-bold mb-4">新しいメンバーを追加</h2>
        <input id="user-name" type="text" placeholder="名前を入力" class="input-field">
        
        <div class="flex justify-center my-4">
          <div id="record-button" class="record-button">
            <div class="record-icon"></div>
          </div>
        </div>
        <div id="recording-status" class="text-center mb-4">録音をクリックして開始</div>
        
        <div class="modal-buttons">
          <button id="cancel-button" class="modal-button cancel-button">キャンセル</button>
          <button id="save-button" class="modal-button record-modal-button" disabled>保存</button>
        </div>
      </div>
    </div>

    <script>
      // グローバル変数
      let mediaRecorder;
      let audioChunks = [];
      let registeredUsers = [];
      let isRecording = false;

      // ページ読み込み時に実行
      document.addEventListener('DOMContentLoaded', () => {
        loadUsers();
        setupEventListeners();
      });

      // イベントリスナーの設定
      function setupEventListeners() {
        // 追加ボタン
        document.getElementById('add-btn').addEventListener('click', () => {
          openModal();
        });

        // 録音ボタン
        document.getElementById('record-button').addEventListener('click', toggleRecording);

        // キャンセルボタン
        document.getElementById('cancel-button').addEventListener('click', closeModal);

        // 保存ボタン
        document.getElementById('save-button').addEventListener('click', saveRecording);
      }

      // ユーザーリストを読み込む
      async function loadUsers() {
        try {
          const response = await fetch('/list_base_audio');
          const data = await response.json();
          
          if (data.status === "success" && Array.isArray(data.id)) {
            registeredUsers = data.id;
            displayUsers(registeredUsers);
          } else {
            console.error('Unexpected response format:', data);
          }
        } catch (error) {
          console.error('Error loading users:', error);
        }
      }

      // ユーザーリストを表示
      function displayUsers(users) {
        const peopleList = document.getElementById('people-list');
        peopleList.innerHTML = '';

        if (users.length === 0) {
          peopleList.innerHTML = '<p class="text-gray-400 text-center">登録されたメンバーはいません</p>';
          return;
        }

        users.forEach(user => {
          const userDiv = document.createElement('div');
          userDiv.className = 'bg-gray-700 rounded-lg p-4 flex justify-between items-center';
          userDiv.innerHTML = `
            <div class="flex items-center">
              <i class="fas fa-user-circle text-2xl mr-3"></i>
              <span>${user}</span>
            </div>
            <button class="delete-btn text-red-500 hover:text-red-300" data-name="${user}">
              <i class="fas fa-trash"></i>
            </button>
          `;
          peopleList.appendChild(userDiv);
        });

        // 削除ボタンのイベントリスナーを追加
        document.querySelectorAll('.delete-btn').forEach(button => {
          button.addEventListener('click', function() {
            const name = this.getAttribute('data-name');
            deleteUser(name);
          });
        });
      }

      // ユーザーを削除
      async function deleteUser(name) {
        if (!confirm(`${name}を削除してもよろしいですか？`)) return;

        try {
          const response = await fetch('/reset_member', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              names: [name]
            })
          });

          const data = await response.json();
          
          if (data.status === "success") {
            // 削除成功時、ユーザーリストを更新
            loadUsers();
          } else {
            console.error('Error deleting user:', data.message);
            alert('ユーザーの削除に失敗しました');
          }
        } catch (error) {
          console.error('Error:', error);
          alert('エラーが発生しました');
        }
      }

      // モーダルを開く
      function openModal() {
        document.getElementById('add-modal').style.display = 'flex';
        document.getElementById('user-name').value = '';
        document.getElementById('save-button').disabled = true;
        document.getElementById('recording-status').textContent = '録音をクリックして開始';
        
        // 録音状態をリセット
        isRecording = false;
        audioChunks = [];
        const recordButton = document.getElementById('record-button');
        recordButton.classList.remove('recording');
      }

      // モーダルを閉じる
      function closeModal() {
        document.getElementById('add-modal').style.display = 'none';
        
        // 録音中なら停止
        if (mediaRecorder && isRecording) {
          mediaRecorder.stop();
          isRecording = false;
        }
      }

      // 録音の開始/停止を切り替え
      async function toggleRecording() {
        const recordButton = document.getElementById('record-button');
        const statusText = document.getElementById('recording-status');
        
        if (!isRecording) {
          // 録音開始
          try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);
            audioChunks = [];
            
            mediaRecorder.ondataavailable = event => {
              audioChunks.push(event.data);
            };
            
            mediaRecorder.onstop = () => {
              document.getElementById('save-button').disabled = false;
              statusText.textContent = '録音完了！';
              recordButton.classList.remove('recording');
            };
            
            mediaRecorder.start();
            isRecording = true;
            statusText.textContent = '録音中...';
            recordButton.classList.add('recording');
          } catch (error) {
            console.error('録音の開始に失敗しました:', error);
            statusText.textContent = '録音の開始に失敗しました';
          }
        } else {
          // 録音停止
          mediaRecorder.stop();
          isRecording = false;
        }
      }

      // 録音を保存
      async function saveRecording() {
        const userName = document.getElementById('user-name').value.trim();
        
        if (!userName) {
          alert('名前を入力してください');
          return;
        }
        
        if (registeredUsers.includes(userName)) {
          if (!confirm(`${userName}は既に登録されています。上書きしますか？`)) {
            return;
          }
        }
        
        if (audioChunks.length === 0) {
          alert('録音データがありません');
          return;
        }
        
        try {
          // 録音データをBlobに変換
          const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
          
          // Base64に変換
          const reader = new FileReader();
          reader.readAsDataURL(audioBlob);
          reader.onloadend = async () => {
            // Base64文字列から先頭の "data:audio/wav;base64," を削除
            const base64Audio = reader.result.split(',')[1];
            
            // サーバーに送信
            const response = await fetch('/upload_base_audio', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                name: userName,
                audio_data: base64Audio
              })
            });
            
            const data = await response.json();
            
            if (data.state === "Registration Success!") {
              closeModal();
              loadUsers(); // ユーザーリストを更新
              alert(`${userName}を登録しました！`);
            } else {
              console.error('Error saving recording:', data);
              alert('録音の保存に失敗しました');
            }
          };
        } catch (error) {
          console.error('Error:', error);
          alert('エラーが発生しました');
        }
      }

      // ユーザー選択画面に戻る
      function showUserSelect() {
        window.location.href = "/userselect";
      }
    </script>
  </body>
</html>