Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

A-yum1 commited on Mar 15

Commit

7811276

1 Parent(s): 2a860fb

Prepare button design

Browse files

Files changed (3) hide show

templates/feedback.html +148 -117
templates/index.html +168 -162
templates/talkDetail.html +118 -79

templates/feedback.html CHANGED Viewed

@@ -1,136 +1,167 @@
 <!DOCTYPE html>
 <html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>会話フィードバック画面</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            background-color: #f5f5f5;
-        }
-        .card {
-            border: 2px solid #000;
-            border-radius: 20px;
-            padding: 30px;
-            width: 500px;
-            text-align: center;
-            background-color: white;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-        .level {
-            font-size: 28px;
-            font-weight: bold;
-            margin-bottom: 20px;
-        }
-        .message {
-            margin: 15px 0;
-            font-size: 20px;
-            font-weight: bold;
-            color: #333;
-        }
-        .bar-container {
-            display: flex;
-            align-items: center;
-            margin: 8px 0;
-        }
-        .bar-label {
-            width: 60px;
-            margin-right: 10px;
-            font-weight: bold;
-        }
-        .bar {
-            flex: 1;
-            height: 25px;
-            background-color: lightgray;
-            border-radius: 5px;
-            overflow: hidden;
-        }
-        .bar-fill {
-            height: 100%;
-            border-radius: 5px;
-        }
-        .back-button, .history-button {
-            margin-top: 20px;
-            padding: 10px 20px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .back-button:hover, .history-button:hover {
-            background-color: #0056b3;
-        }
     </style>
     <script>
-        function getMessage(level) {
-            if (level < 20) return "やばい";
-            if (level < 40) return "気をつけよう";
-            if (level < 60) return "まずまずですね";
-            if (level < 80) return "がんばれあとちょっと";
-            return "素晴らしい";
-        }
-        function showRecorder() {
-            window.location.href = "index.html";
-        }
-        function showHistory() {
-            window.location.href = "talkDetail.html";
-        }
-        window.onload = function() {
-            const level = 73; // レベル値
-            const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
-            const labels = ["項目1", "項目2", "項目3", "項目4", "項目5"]; // 各項目名
-            const message = getMessage(level);
-            document.getElementById("level").innerText = `話者Lv: ${level}`;
-            document.getElementById("message").innerText = message;
-            const barElements = document.getElementsByClassName("bar-fill");
-            const labelElements = document.getElementsByClassName("bar-label");
-            for (let i = 0; i < barElements.length; i++) {
-                barElements[i].style.width = `${percentages[i]}%`;
-                labelElements[i].innerText = labels[i];
-            }
-        };
     </script>
-</head>
-<body>
     <div class="card">
-        <div class="level" id="level">話者Lv: 85</div>
-        <div class="message" id="message">素晴らしい</div>
-        <div class="bar-container">
-            <span class="bar-label"></span>
-            <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
         </div>
-        <div class="bar-container">
-            <span class="bar-label"></span>
-            <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
         </div>
-        <div class="bar-container">
-            <span class="bar-label"></span>
-            <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
         </div>
-        <div class="bar-container">
-            <span class="bar-label"></span>
-            <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
         </div>
-        <div class="bar-container">
-            <span class="bar-label"></span>
-            <div class="bar"><div class="bar-fill" style="background-color: lightcoral;"></div></div>
         </div>
-        <button class="back-button" onclick="showRecorder()">録音画面を表示</button>
-        <button class="history-button" onclick="showHistory()">会話履歴を表示</button>
     </div>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>会話フィードバック画面</title>
     <style>
+      body {
+        font-family: Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #f5f5f5;
+      }
+      .card {
+        border: 2px solid #000;
+        border-radius: 20px;
+        padding: 30px;
+        width: 500px;
+        text-align: center;
+        background-color: white;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+      .level {
+        font-size: 28px;
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+      .message {
+        margin: 15px 0;
+        font-size: 20px;
+        font-weight: bold;
+        color: #333;
+      }
+      .bar-container {
+        display: flex;
+        align-items: center;
+        margin: 8px 0;
+      }
+      .bar-label {
+        width: 60px;
+        margin-right: 10px;
+        font-weight: bold;
+      }
+      .bar {
+        flex: 1;
+        height: 25px;
+        background-color: lightgray;
+        border-radius: 5px;
+        overflow: hidden;
+      }
+      .bar-fill {
+        height: 100%;
+        border-radius: 5px;
+      }
+      .back-button,
+      .history-button {
+        margin-top: 20px;
+        margin-left: 20px;
+        padding: 10px 20px;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      .back-button:hover,
+      .history-button:hover {
+        background-color: #0056b3;
+      }
+      .flex {
+        display: flex;
+        justify-content: center;
+      }
     </style>
     <script>
+      function getMessage(level) {
+        if (level < 20) return "やばい";
+        if (level < 40) return "気をつけよう";
+        if (level < 60) return "まずまずですね";
+        if (level < 80) return "がんばれあとちょっと";
+        return "素晴らしい";
+      }
+      window.onload = function () {
+        const level = 73; // レベル値
+        const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
+        const labels = ["項目1", "項目2", "項目3", "項目4", "項目5"]; // 各項目名
+        const message = getMessage(level);
+        document.getElementById("level").innerText = `話者Lv: ${level}`;
+        document.getElementById("message").innerText = message;
+        const barElements = document.getElementsByClassName("bar-fill");
+        const labelElements = document.getElementsByClassName("bar-label");
+        for (let i = 0; i < barElements.length; i++) {
+          barElements[i].style.width = `${percentages[i]}%`;
+          labelElements[i].innerText = labels[i];
+        }
+      };
     </script>
+  </head>
+  <body>
     <div class="card">
+      <div class="level" id="level">話者Lv: 85</div>
+      <div class="message" id="message">素晴らしい</div>
+      <div class="bar-container">
+        <span class="bar-label"></span>
+        <div class="bar">
+          <div class="bar-fill" style="background-color: lightblue"></div>
         </div>
+      </div>
+      <div class="bar-container">
+        <span class="bar-label"></span>
+        <div class="bar">
+          <div class="bar-fill" style="background-color: peachpuff"></div>
         </div>
+      </div>
+      <div class="bar-container">
+        <span class="bar-label"></span>
+        <div class="bar">
+          <div class="bar-fill" style="background-color: lightblue"></div>
         </div>
+      </div>
+      <div class="bar-container">
+        <span class="bar-label"></span>
+        <div class="bar">
+          <div class="bar-fill" style="background-color: peachpuff"></div>
         </div>
+      </div>
+      <div class="bar-container">
+        <span class="bar-label"></span>
+        <div class="bar">
+          <div class="bar-fill" style="background-color: lightcoral"></div>
         </div>
+      </div>
+      <div class="flex">
+        <form method="POST" action="/index">
+          <div class="feedback-space">
+            <input
+              class="history-button"
+              id="indexButton"
+              type="submit"
+              name="submit"
+              value="録音画面を表示"
+            />
+          </div>
+        </form>
+        <form method="POST" action="/talk_detail">
+          <div class="feedback-space">
+            <input
+              class="history-button"
+              id="detailButton"
+              type="submit"
+              name="submit"
+              value="会話履歴を表示"
+            />
+          </div>
+        </form>
+      </div>
     </div>
+  </body>
+</html>

templates/index.html CHANGED Viewed

@@ -1,171 +1,177 @@
 <!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;
-    }
-    .chart {
-      width: 300px;
-      height: 300px;
-      margin-bottom: 20px;
-    }
-    .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-button {
-      margin-top: 20px;
-      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);
-    }
-    .result-button:hover {
-      background-color: #388e3c;
-    }
-  </style>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-</head>
-<body>
-  <div class="chart">
-    <canvas id="speechChart"></canvas>
-  </div>
-  <button class="record-button" id="recordButton" onclick="toggleRecording()">
-  <div class="record-icon" id="recordIcon"></div>
-  </button>
-  <!--
-  <button class="result-button" id="resultButton" onclick="showResults()">結果を表示</button>
-  -->
-  <form method="POST" action="/feedback">
-    <div class="feedback-space">
-      <input class="result-button" id="resultButton" type="submit" name="submit" value="フィードバック画面を表示">
-    </div>
-  </form>
-  <script>
-    let isRecording = false;
-    let mediaRecorder;
-    let audioChunks = [];
-    async function toggleRecording() {
-      const recordButton = document.getElementById('recordButton');
-      const recordIcon = document.getElementById('recordIcon');
-      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 = () => {
-            const audioBlob = new Blob(audioChunks, { 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);
-          };
-          mediaRecorder.start();
-        } catch (error) {
-          console.error('マイクへのアクセスに失敗しました:', error);
           isRecording = false;
-          recordButton.classList.remove('recording');
-        }
-      } else {
-        // 録音停止
-        isRecording = false;
-        recordButton.classList.remove('recording');
-        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
-          mediaRecorder.stop();
-        }
-      }
-    }
-    function showResults() {
-      window.location.href = 'feedback.html';
-    }
-    // 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'
-            }
           }
         }
       }
-    });
-  </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 {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #121212;
+        color: white;
+      }
+      .chart {
+        width: 300px;
+        height: 300px;
+        margin-bottom: 20px;
+      }
+      .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-button {
+        margin-top: 20px;
+        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);
+      }
+      .result-button:hover {
+        background-color: #388e3c;
+      }
+      .result {
+        display: flex;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <div class="chart">
+      <canvas id="speechChart"></canvas>
+    </div>
+    <button class="record-button" id="recordButton" onclick="toggleRecording()">
+      <div class="record-icon" id="recordIcon"></div>
+    </button>
+    <form method="POST" action="/feedback">
+      <div class="result">
+        <button class="result-button" id="resultButton" onclick="showHistory()">
+          会話履歴を表示
+        </button>
+        <button class="result-button" id="resultButton" onclick="showResults()">
+          フィードバック画面を表示
+        </button>
+      </div>
+    </form>
+    <script>
+      let isRecording = false;
+      let mediaRecorder;
+      let audioChunks = [];
+      async function toggleRecording() {
+        const recordButton = document.getElementById("recordButton");
+        const recordIcon = document.getElementById("recordIcon");
+        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 = () => {
+              const audioBlob = new Blob(audioChunks, { 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);
             };
+            mediaRecorder.start();
+          } catch (error) {
+            console.error("マイクへのアクセスに失敗しました:", error);
+            isRecording = false;
+            recordButton.classList.remove("recording");
+          }
+        } else {
+          // 録音停止
           isRecording = false;
+          recordButton.classList.remove("recording");
+          if (mediaRecorder && mediaRecorder.state !== "inactive") {
+            mediaRecorder.stop();
           }
         }
       }
+      // 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",
+              },
+            },
+          },
+        },
+      });
+    </script>
+  </body>
+</html>

templates/talkDetail.html CHANGED Viewed

@@ -1,97 +1,136 @@
 <!DOCTYPE html>
 <html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>会話表示画面</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 20px;
-            background-color: #f4f4f4;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        .container {
-            max-width: 800px;
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-        h2 {
-            margin-bottom: 20px;
-        }
-        #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 20px;
-            border: none;
-            border-radius: 4px;
-            background-color: #007bff;
-            color: #fff;
-            cursor: pointer;
-        }
-        button:hover {
-            background-color: #0056b3;
-        }
     </style>
-</head>
-<body>
     <div class="container">
-        <h2>会話の文字起こし表示</h2>
-        <div id="transcription">ここに会話内容が表示されます。</div>
-        <button onclick="showRecorder()">録音画面を表示</button>
-        <button onclick="showHistory()">フィードバック画面を表示</button>
     </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);
-            }
         }
-        // 録音画面に戻る
-        function showRecorder() {
-            window.location.href = 'index.html';
-        }
-        // フィードバック画面に移動
-        function showHistory() {
-            window.location.href = 'feedback.html';
-        }
-        // 初期化処理
-        displayTranscription();
     </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>会話表示画面</title>
     <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 20px;
+        background-color: #f4f4f4;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .container {
+        max-width: 800px;
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+      h2 {
+        margin-bottom: 20px;
+      }
+      #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 20px;
+        border: none;
+        border-radius: 4px;
+        background-color: #007bff;
+        color: #fff;
+        cursor: pointer;
+      }
+      .history-button {
+        margin: 5px;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 4px;
+        background-color: #007bff;
+        color: #fff;
+        cursor: pointer;
+      }
+      history-button:hover {
+        background-color: #0056b3;
+      }
+      button:hover {
+        background-color: #0056b3;
+      }
+      .flex {
+        display: flex;
+        justify-content: center;
+      }
     </style>
+  </head>
+  <body>
     <div class="container">
+      <h2>会話の文字起こし表示</h2>
+      <div id="transcription">ここに会話内容が表示されます。</div>
+      <div class="flex">
+        <form method="POST" action="/index">
+          <div class="feedback-space">
+            <input
+              class="history-button"
+              id="indexButton"
+              type="submit"
+              name="submit"
+              value="録音画面を表示"
+            />
+          </div>
+        </form>
+        <form method="POST" action="/feedback">
+          <div class="feedback-space">
+            <input
+              class="history-button"
+              id="feedbackButton"
+              type="submit"
+              name="submit"
+              value="フィードバック画面を表示"
+            />
+          </div>
+        </form>
+      </div>
     </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);
         }
+      }
+      // 録音画面に戻る
+      function showRecorder() {
+        window.location.href = "index.html";
+      }
+      // フィードバック画面に移動
+      function showHistory() {
+        window.location.href = "feedback.html";
+      }
+      // 初期化処理
+      displayTranscription();
     </script>
+  </body>
+</html>