fix_feedback

static/feedback.js

@@ -0,0 +1,69 @@
+async function getTranscription() {
+  try {
+    const response = await fetch("/transcription");
+    if (!response.ok) {
+      throw new Error("HTTP error! status: ${response.status}");
+    }
+    const data = await response.json;
+    const results = data.response;
+  } catch (error) {
+    console.error("Failed to fetch transcription", error);
+  }
+}
+
+async function getAnalysis() {
+  try {
+    await getTranscription();
+
+    const response = await fetch("/analyze");
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    const results = data.results;
+    const analysis = results.deepseek_analysis;
+
+    // 変数に格納
+    const conversationLevel = analysis.conversationLevel;
+    const harassmentPresent = analysis.harassmentPresent;
+    const harassmentType = analysis.harassmentType;
+    const repetition = analysis.repetition;
+    const pleasantConversation = analysis.pleasantConversation;
+    const blameOrHarassment = analysis.blameOrHarassment;
+
+    // コンソールに表示
+    console.log(
+      conversationLevel,
+      harassmentPresent,
+      harassmentType,
+      repetition,
+      pleasantConversation,
+      blameOrHarassment
+    );
+
+    // DOMに表示
+    document.getElementById(
+      "level"
+    ).innerText = `会話レベル: ${conversationLevel}`;
+    document.getElementById(
+      "Harassment_bool"
+    ).innerText = `ハラスメントの有無: ${harassmentPresent}`;
+    document.getElementById(
+      "Harassment_type"
+    ).innerText = `ハラスメントの種類: ${harassmentType}`;
+    document.getElementById(
+      "Harassment_loop"
+    ).innerText = `繰り返しの程度: ${repetition}`;
+    document.getElementById(
+      "Harassment_comfort"
+    ).innerText = `会話の心地よさ: ${pleasantConversation}`;
+    document.getElementById(
+      "Harassment_volume"
+    ).innerText = `非難またはハラスメントの程度: ${blameOrHarassment}`;
+  } catch (error) {
+    console.error("Failed to fetch analysis data:", error);
+  }
+}
+
+window.onload = getAnalysis();

static/loading.css

@@ -0,0 +1,56 @@
+.loader {
+  position: absolute;
+  top: calc(50% - 32px);
+  left: calc(50% - 32px);
+  width: 64px;
+  height: 64px;
+}
+
+.loader div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-sizing: border-box;
+  opacity: 0.8;
+}
+
+.one {
+  border-top: 1px solid #8fb259;
+  animation: rotate-left 1s linear infinite;
+}
+
+.two {
+  border-right: 1px solid #cccc52;
+  animation: rotate-right 1s linear infinite;
+}
+
+.three {
+  border-bottom: 1px solid #ffd933;
+  animation: rotate-right 1s linear infinite;
+}
+
+.four {
+  border-left: 1px solid #ff7f00;
+  animation: rotate-right 1s linear infinite;
+}
+
+@keyframes rotate-left {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes rotate-right {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

static/talk_detail.js

@@ -0,0 +1,39 @@
+async function displayTranscription() {
+  const transcriptionElement = document.getElementById("transcription");
+
+  try {
+    const response = await fetch("/transcription");
+    if (!response.ok) throw new Error("データ取得に失敗しました。");
+
+    const data = await response.json();
+    const conversations = data.transcription;
+
+    if (!data || !data.transcription) {
+      throw new Error("会話データが見つかりませんでした。");
+    }
+    /*
+      const formattedText = conversations
+
+        .map((conv) => `【${conv.speaker}】 ${conv.text}`)
+        .join("\n");
+      console.log("フォーマットテキスト:", formattedText);
+      transcriptionElement.textContent = formattedText;
+      */
+    transcriptionElement.textContent = conversations;
+
+    console.log(conversations);
+  } catch (error) {
+    transcriptionElement.textContent = `エラー: ${error.message}`;
+    console.error("データ取得エラー:", error);
+  }
+}
+
+displayTranscription();
+
+function showRecorder() {
+  window.location.href = "/index";
+}
+
+function showFeedback() {
+  window.location.href = "/feedback";
+}

templates/feedback.html

@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>会話フィードバック画面</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: "class",
+      };
+    </script>
     <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
     <style>
       /* Main Container */
@@ -143,7 +148,7 @@
       </div>
 
       <!-- Feedback Details -->
-      <div class="text-xl font-semibold mb-6" id="level">話者Lv:</div>
+      <div class="text-xl font-semibold mb-6" id="level">会話レベル:</div>
       <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>
       <div class="text-lg mb-2" id="Harassment_type">ハラスメントの種類:</div>
       <div class="text-lg mb-2" id="Harassment_loop">繰り返しの程度:</div>
@@ -154,5 +159,6 @@
     </div>
 
     <script src="{{ url_for('static', filename='menu.js') }}"></script>
+    <script src="{{ url_for('static', filename='feedback.js') }}"></script>
   </body>
 </html>

templates/talkDetail.html

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>会話詳細画面</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='loading.css') }}"
+    />
   </head>
   <body
     class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center"
@@ -34,45 +38,6 @@
         </button>
       </div>
     </div>
-    <script>
-      async function displayTranscription() {
-        const transcriptionElement = document.getElementById("transcription");
-
-        try {
-          const response = await fetch("/transcription");
-          if (!response.ok) throw new Error("データ取得に失敗しました。");
-
-          const data = await response.json();
-          const conversations = data.transcription;
-
-          if (!data || !data.transcription) {
-            throw new Error("会話データが見つかりませんでした。");
-          }
-          /*
-          const formattedText = conversations
-
-            .map((conv) => `【${conv.speaker}】 ${conv.text}`)
-            .join("\n");
-          console.log("フォーマットテキスト:", formattedText);
-          transcriptionElement.textContent = formattedText;
-          */
-         transcriptionElement.textContent = conversations;
-         console.log(conversations);
-        } catch (error) {
-          transcriptionElement.textContent = `エラー: ${error.message}`;
-          console.error("データ取得エラー:", error);
-        }
-      }
-
-      displayTranscription();
-
-      function showRecorder() {
-        window.location.href = "/index";
-      }
-
-      function showFeedback() {
-        window.location.href = "/feedback";
-      }
-    </script>
+    <script src="{{ url_for('static', filename='talk_detail.js') }}"></script>
   </body>
 </html>