Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

A-yum1 commited on Mar 16

Commit

3b67cd9

1 Parent(s): c8c2f4b

suwabe/databaseを反映

Browse files

Files changed (4) hide show

templates/index.html +92 -67
templates/new_person.html +215 -0
templates/resetting_password.html +76 -0
templates/style.css +128 -0

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,12 +19,14 @@
       .chart {
         width: 300px;
         height: 300px;
-        margin-bottom: 50px; /* 円グラフとボタンの間隔を狭く */
       }
       .record-button {
-        position: fixed;
-        bottom: 30px;
         width: 80px;
         height: 80px;
         background-color: transparent;
@@ -52,13 +54,10 @@
         border-radius: 10%;
       }
-      .result-buttons {
-        margin-top: 5px; /* ボタン間の距離を少し縮める */
-        display: flex;
-        gap: 10px;
-      }
       .result-button {
         padding: 10px 20px;
         background-color: #4caf50;
         border: none;
@@ -66,9 +65,10 @@
         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;
       }
@@ -85,8 +85,12 @@
     </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>
@@ -96,41 +100,45 @@
       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);
               }
@@ -149,14 +157,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();
@@ -165,41 +173,58 @@
       }
       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);
       }
@@ -207,13 +232,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: 20px; /* 円グラフとボタンの間隔を狭く */
+      }
+      .controls {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
       .record-button {
         width: 80px;
         height: 80px;
         background-color: transparent;
         border-radius: 10%;
       }
       .result-button {
+        margin-left: 10px;
+        margin-top: 20px;
         padding: 10px 20px;
         background-color: #4caf50;
         border: none;
         color: white;
         cursor: pointer;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
       }
+      .result {
+        display: flex;
+      }
       .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();
+                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);
       }
       function showHistory() {
         // 会話履歴表示の画面があれば、そのページへ遷移する例
         // window.location.href = 'history';
+        alert("会話履歴を表示する機能は未実装です。");
       }
       function showResults() {
         // フィードバック画面へ遷移
+        window.location.href = "feedback";
       }
     </script>
   </body>
+</html>

templates/new_person.html ADDED Viewed

	@@ -0,0 +1,215 @@

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>ユーザー登録画面</title>
+  </head>
+  <body>
+    <form method="POST">
+      <div class="container">
+        <h2>ユーザー登録</h2>
+        <div class="flex">
+          <div>
+            <label for="">ユーザー名</label>
+            <br />
+            <input
+              type="text"
+              id="username"
+              name="username"
+              placeholder="例：技育 太郎"
+              required
+              oninput="validateForm()"
+            />
+            <br />
+            <br />
+            <label for="">パスワード</label>
+            <br />
+            <input
+              type="password"
+              id="password"
+              name="password"
+              placeholder="半角数字8文字以上20文字以内"
+              maxlength="20"
+              required
+              oninput="validateForm()"
+            />
+            <br />
+            <br />
+            <label for=""> パスワード再入力</label>
+            <br />
+            <input
+              type="password"
+              id="repassword"
+              name="repassword"
+              placeholder="再入力してください"
+              maxlength="20"
+              required
+              oninput="validateForm()"
+            />
+            <p id="passwordError" class="error-message"></p>
+            <br />
+          </div>
+          <div class="new-person-right-container">
+            <label for="">
+              録音ボタンを押した後、10秒間声を録音してください</label
+            >
+            <br />
+            <p class="record-p">
+              例文：昔々、あるところにおばあさんとおじいさんがいました。<br />
+              おばあさんは川に洗濯に、おじいさんは山に芝刈りに行きました。
+            </p>
+            <div class="record-container">
+              <button
+                class="record-button"
+                id="recordButton"
+                onclick="toggleRecording()"
+              >
+                <div class="record-icon" id="recordIcon"></div>
+              </button>
+            </div>
+            <p id="countdownDisplay"></p>
+          </div>
+        </div>
+        <div class="flex">
+          <input
+            type="submit"
+            value="会員登録を行う"
+            name="submit"
+            id="submit"
+            class="history-button disabled"
+            disabled
+          />
+        </div>
+      </div>
+    </form>
+    <script>
+      let mediaRecorder;
+      let audioChunks = [];
+      let countdownTimer;
+      let isAudioRecorded = false;
+      async function toggleRecording() {
+        const recordButton = document.getElementById("recordButton");
+        const countdownDisplay = document.getElementById("countdownDisplay");
+        recordButton.disabled = true; // ボタンを無効化（連打防止）
+        countdownDisplay.textContent = "録音中…"; // 初期表示
+        isAudioRecorded = false;
+        recordIcon.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 = [];
+            recordButton.disabled = false; // ボタンを再度有効化
+            countdownDisplay.textContent = ""; // カウントダウンを消す
+            isAudioRecorded = true; // 録音完了
+            recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す
+            validateForm(); // フォームの状態を更新
+          };
+          mediaRecorder.start();
+          startCountdown(10, countdownDisplay); // 10秒のカウントダウン開始
+          // 10秒後に録音を自動停止
+          setTimeout(() => {
+            if (mediaRecorder.state === "recording") {
+              mediaRecorder.stop();
+            }
+          }, 10000);
+        } catch (error) {
+          console.error("マイクのアクセスに失敗しました:", error);
+          recordButton.disabled = false; // ボタンを再度有効化
+          countdownDisplay.textContent = ""; // カウントダウンを消す
+          recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す
+        }
+      }
+      function startCountdown(seconds, displayElement) {
+        let remaining = seconds;
+        displayElement.textContent = `録音終了まで: ${remaining}秒`;
+        countdownTimer = setInterval(() => {
+          remaining--;
+          displayElement.textContent = `録音終了まで: ${remaining}秒`;
+          if (remaining <= 0) {
+            clearInterval(countdownTimer); // カウントダウン終了
+          }
+        }, 1000);
+      }
+      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) => {
+              alert("音声がサーバーに送信されました。");
+            })
+            .catch((error) => {
+              console.error("送信エラー:", error);
+            });
+        };
+        reader.readAsDataURL(audioBlob);
+      }
+      // フォームの入力状態をチェック
+      function validateForm() {
+        const username = document.getElementById("username").value.trim();
+        const password = document.getElementById("password").value.trim();
+        const repassword = document.getElementById("repassword").value.trim();
+        const submitButton = document.getElementById("submit");
+        const passwordError = document.getElementById("passwordError");
+        if (password !== repassword) {
+          passwordError.textContent = "パスワードが一致しません。";
+          submitButton.classList.add("disabled");
+          submitButton.disabled = true;
+          return;
+        } else {
+          passwordError.textContent = "";
+        }
+        if (
+          username !== "" &&
+          password.length >= 8 &&
+          password.length <= 20 &&
+          password === repassword &&
+          isAudioRecorded
+        ) {
+          submitButton.classList.remove("disabled");
+          submitButton.disabled = false;
+        } else {
+          submitButton.classList.add("disabled");
+          submitButton.disabled = true;
+        }
+      }
+    </script>
+  </body>
+</html>

templates/resetting_password.html ADDED Viewed

	@@ -0,0 +1,76 @@

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>パスワード再設定画面</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <form method="POST">
+      <div class="container">
+        <h2>パスワード再設定</h2>
+        <div>
+          <label for="">ユーザ名</label>
+          <input type="text" name="username" />
+          <br />
+          <br />
+          <label for="">パスワード</label>
+          <input type="password" name="password" />
+          <br />
+        </div>
+        <div class="flex">
+          <input
+            type="submit"
+            class="history-button"
+            id="loginButton"
+            onclick="showRecorder()"
+            value="パスワード再設定"
+          />
+        </div>
+    </form>
+    </div>
+    <script>
+      // 会話データを表示
+      async function displayTranscription() {
+        const transcriptionElement = document.getElementById("transcription");
+        try {
+          // バックエンドからデータを取得（デモ用のURLを指定）
+          const response = await fetch("/api/transcription");
+          if (!response.ok) throw new Error("データ取得に失敗しました。");
+          const data = await response.json();
+          // 会話内容を整形して表示
+          const formattedText = data.conversations
+            .map((conv, index) => `【${conv.speaker}】 ${conv.text}`)
+            .join("\n");
+          transcriptionElement.textContent = formattedText;
+        } catch (error) {
+          transcriptionElement.textContent = `エラー: ${error.message}`;
+          console.error("データ取得エラー:", error);
+        }
+      }
+      // 初期化処理
+      displayTranscription();
+      //画面遷移
+      function showRecorder() {
+        // 録音画面へ遷移
+        window.location.href = "/index";
+      }
+      function showFeedback() {
+        // フィードバック画面へ遷移
+        window.location.href = "/feedback";
+      }
+    </script>
+  </body>
+</html>

templates/style.css ADDED Viewed

	@@ -0,0 +1,128 @@

+@charset "UTF-8";
+body {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+  background-color: #f4f4f4;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+h2 {
+  margin-bottom: 20px;
+  text-align: center;
+}
+a {
+  text-decoration: none;
+  color: #000000cc;
+}
+a:hover {
+  text-decoration: underline;
+}
+.container {
+  max-width: 800px;
+  background-color: #fff;
+  padding: 20px 80px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+#transcription {
+  white-space: pre-wrap;
+  padding: 10px;
+  background-color: #e9e9e9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+button {
+  margin: 5px;
+  padding: 10px 10px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+}
+.history-button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+history-button:hover {
+  background-color: #0056b3;
+}
+.flex {
+  display: flex;
+  justify-content: center;
+}
+.new-person {
+  text-align: center;
+}
+.controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.record-button {
+  width: 80px;
+  height: 80px;
+  background-color: transparent;
+  border-radius: 50%;
+  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%;
+}
+.record-p {
+  border: 2px dashed #0000008c;
+}
+.disabled {
+  background-color: gray;
+  cursor: not-allowed;
+}
+.record-icon.recording {
+  width: 40px;
+  height: 40px;
+  border-radius: 0;
+}
+.new-person-right-container {
+  padding-left: 20px;
+}
+.record-container {
+  display: flex;
+  justify-content: center;
+}