Подэтап 4.2 — AI-анализ эмоций

Подключить Whisper для распознавания речи.

Интегрировать Emotion API (TensorFlow / DeepFace).

Рассчитывать Confidence Score (0–100).

components/emotion-analysis.js

@@ -0,0 +1,84 @@
+class EmotionAnalysis extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin: 1rem 0;
+        }
+        .container {
+          background: rgba(15, 23, 42, 0.7);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 0.5rem;
+          padding: 1rem;
+        }
+        .metrics {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .metric {
+          text-align: center;
+        }
+        .metric-value {
+          font-size: 1.2rem;
+          font-weight: bold;
+          color: #7c3aed;
+        }
+        .metric-label {
+          font-size: 0.8rem;
+          color: #94a3b8;
+        }
+        .confidence-score {
+          font-size: 1.5rem;
+          font-weight: bold;
+          text-align: center;
+          margin: 1rem 0;
+          background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+      </style>
+      <div class="container">
+        <h3>Emotion Analysis</h3>
+        <div class="confidence-score">
+          Confidence Score: <span id="score">0</span>/100
+        </div>
+        <div class="metrics">
+          <div class="metric">
+            <div class="metric-value" id="confidence">0%</div>
+            <div class="metric-label">Confidence</div>
+          </div>
+          <div class="metric">
+            <div class="metric-value" id="clarity">0%</div>
+            <div class="metric-label">Clarity</div>
+          </div>
+          <div class="metric">
+            <div class="metric-value" id="fluency">0%</div>
+            <div class="metric-label">Fluency</div>
+          </div>
+          <div class="metric">
+            <div class="metric-value" id="emotional">0%</div>
+            <div class="metric-label">Emotional Impact</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  updateAnalysis(data) {
+    if (!this.shadowRoot) return;
+    
+    const { confidence, clarity, fluency, emotionalImpact, confidenceScore } = data;
+    this.shadowRoot.getElementById('score').textContent = confidenceScore;
+    this.shadowRoot.getElementById('confidence').textContent = `${confidence}%`;
+    this.shadowRoot.getElementById('clarity').textContent = `${clarity}%`;
+    this.shadowRoot.getElementById('fluency').textContent = `${fluency}%`;
+    this.shadowRoot.getElementById('emotional').textContent = `${emotionalImpact}%`;
+  }
+}
+
+customElements.define('emotion-analysis', EmotionAnalysis);

components/speak-brave-player.js

@@ -1,6 +1,18 @@
 class SpeakBravePlayer extends HTMLElement {
   connectedCallback() {
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: 'open'
+    // Add event listeners
+    this.shadowRoot.getElementById('analyzeBtn').addEventListener('click', async () => {
+      const audioBlob = await getRecordingBlob(); // Get recorded audio
+      const videoBlob = await getVideoBlob(); // Get recorded video
+      
+      const analysis = await analyzeEmotion(audioBlob, videoBlob);
+      if (analysis) {
+        this.shadowRoot.getElementById('analysis').updateAnalysis(analysis);
+      }
+    });
+  }
+);
     this.shadowRoot.innerHTML = `
       <style>
         :host {
@@ -136,17 +148,24 @@ class SpeakBravePlayer extends HTMLElement {
             </svg>
             Start Recording
           </button>
+          <button id="analyzeBtn" class="record-btn" style="margin-top: 1rem; background: #2563eb;">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+            Analyze Emotion
+          </button>
         </div>
-
-        <div class="reflection-card">
+<div class="reflection-card">
           <h3>Reflection</h3>
           <p>How did this challenge make you feel? What did you learn about yourself?</p>
           <textarea class="reflection-textarea" placeholder="Write your reflection here..."></textarea>
           <button class="submit-btn">Submit Reflection</button>
         </div>
+
+        <emotion-analysis id="analysis"></emotion-analysis>
       </div>
     `;
-  }
+}
 }
 
 customElements.define('speak-brave-player', SpeakBravePlayer);

learning-engine.html

@@ -190,13 +190,23 @@
     "timeSpent": 150,
     "attempts": 4
   },
-  "speakBraveScore": {
-    "confidence": 85,
-    "clarity": 80,
-    "fluency": 75,
-    "emotionalImpact": 90
-  },
-  "confidence": 85,
+                        "speakBraveScore": {
+                            "confidence": 85,
+                            "clarity": 80,
+                            "fluency": 75,
+                            "emotionalImpact": 90,
+                            "transcript": "I believe in my ability to speak English confidently...",
+                            "emotions": [
+                                {"emotion": "happy", "score": 0.85},
+                                {"emotion": "neutral", "score": 0.12},
+                                {"emotion": "sad", "score": 0.03}
+                            ],
+                            "facialExpressions": [
+                                {"expression": "smile", "intensity": 0.8},
+                                {"expression": "eyeContact", "intensity": 0.7}
+                            ]
+                        },
+"confidence": 85,
 "completionStatus": "completed",
   "masteryPercentage": 78.75
 }

progress-report.html

@@ -8,7 +8,8 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <style>
+    <script src="components/emotion-analysis.js"></script>
+<style>
         @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
         
         body {