Подэтап 5.2 — VideoRole

Создать WebRTC компонент “AI Dialog”.

Настроить AI партнёра (GPT-driven персонаж).

Добавить автооценку диалога.

components/ai-dialog.js

@@ -0,0 +1,345 @@
+class AIDialog extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.partnerVideo = null;
+    this.userVideo = null;
+    this.mediaStream = null;
+    this.peerConnection = null;
+    this.aiMessages = [];
+    this.userMessages = [];
+    this.dialogAnalysis = null;
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin: 2rem 0;
+        }
+        .container {
+          background: rgba(15, 23, 42, 0.7);
+          backdrop-filter: blur(10px);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 1rem;
+          padding: 2rem;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 1.5rem;
+        }
+        .icon {
+          width: 3rem;
+          height: 3rem;
+          background: rgba(124, 58, 237, 0.2);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 1rem;
+        }
+        h2 {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin: 0;
+          background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+        .video-container {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 1rem;
+          margin-bottom: 1.5rem;
+        }
+        .video-box {
+          position: relative;
+          border-radius: 0.5rem;
+          overflow: hidden;
+          background: #1e293b;
+          aspect-ratio: 16/9;
+        }
+        video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .video-label {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: rgba(0,0,0,0.7);
+          padding: 0.5rem;
+          font-size: 0.875rem;
+          text-align: center;
+        }
+        .controls {
+          display: flex;
+          gap: 1rem;
+          margin-bottom: 1.5rem;
+        }
+        button {
+          flex: 1;
+          padding: 0.75rem 1.5rem;
+          border-radius: 0.5rem;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          cursor: pointer;
+          transition: all 0.2s;
+          border: none;
+        }
+        .start-btn {
+          background: #7c3aed;
+          color: white;
+        }
+        .start-btn:hover {
+          background: #6d28d9;
+        }
+        .end-btn {
+          background: #1e293b;
+          color: white;
+          border: 1px solid #334155;
+        }
+        .end-btn:hover {
+          background: #334155;
+        }
+        .analysis {
+          margin-top: 1.5rem;
+          display: none;
+        }
+        .metric {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.75rem;
+          padding-bottom: 0.75rem;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .metric-label {
+          font-weight: 500;
+        }
+        .metric-value {
+          font-weight: 600;
+          color: #7c3aed;
+        }
+        .progress-bar {
+          height: 8px;
+          border-radius: 4px;
+          background: rgba(124, 58, 237, 0.2);
+          margin-top: 0.5rem;
+        }
+        .progress-fill {
+          height: 100%;
+          border-radius: 4px;
+          background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
+          width: 0%;
+          transition: width 0.3s ease;
+        }
+        .feedback {
+          margin-top: 1rem;
+          padding: 1rem;
+          background: rgba(30, 41, 59, 0.5);
+          border-radius: 0.5rem;
+        }
+      </style>
+      <div class="container">
+        <div class="header">
+          <div class="icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+              <circle cx="9" cy="7" r="4"></circle>
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+            </svg>
+          </div>
+          <h2>AI Dialog Partner</h2>
+        </div>
+
+        <p>Practice conversational skills with our AI partner. The system will analyze your performance.</p>
+
+        <div class="video-container">
+          <div class="video-box">
+            <video id="partnerVideo" autoplay muted></video>
+            <div class="video-label">AI Partner</div>
+          </div>
+          <div class="video-box">
+            <video id="userVideo" autoplay></video>
+            <div class="video-label">You</div>
+          </div>
+        </div>
+
+        <div class="controls">
+          <button class="start-btn" id="startBtn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"></circle>
+              <circle cx="12" cy="12" r="3"></circle>
+            </svg>
+            Start Conversation
+          </button>
+          <button class="end-btn" id="endBtn" disabled>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="6" y="4" width="4" height="16"></rect>
+              <rect x="14" y="4" width="4" height="16"></rect>
+            </svg>
+            End Session
+          </button>
+        </div>
+
+        <div class="analysis" id="analysis">
+          <h3>Dialog Analysis</h3>
+          <div class="metric">
+            <span class="metric-label">Fluency</span>
+            <span class="metric-value" id="fluencyScore">0%</span>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" id="fluencyBar"></div>
+          </div>
+
+          <div class="metric">
+            <span class="metric-label">Vocabulary</span>
+            <span class="metric-value" id="vocabularyScore">0%</span>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" id="vocabularyBar"></div>
+          </div>
+
+          <div class="metric">
+            <span class="metric-label">Pronunciation</span>
+            <span class="metric-value" id="pronunciationScore">0%</span>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" id="pronunciationBar"></div>
+          </div>
+
+          <div class="feedback">
+            <h4>Feedback:</h4>
+            <p id="feedbackText">Complete a conversation to receive feedback.</p>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.partnerVideo = this.shadowRoot.getElementById('partnerVideo');
+    this.userVideo = this.shadowRoot.getElementById('userVideo');
+    this.startBtn = this.shadowRoot.getElementById('startBtn');
+    this.endBtn = this.shadowRoot.getElementById('endBtn');
+    this.analysisSection = this.shadowRoot.getElementById('analysis');
+
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    this.startBtn.addEventListener('click', () => this.startConversation());
+    this.endBtn.addEventListener('click', () => this.endConversation());
+  }
+
+  async startConversation() {
+    try {
+      // Start user media
+      this.mediaStream = await navigator.mediaDevices.getUserMedia({ 
+        video: true, 
+        audio: true 
+      });
+      this.userVideo.srcObject = this.mediaStream;
+
+      // Initialize WebRTC connection (simplified for demo)
+      this.peerConnection = new RTCPeerConnection();
+      this.mediaStream.getTracks().forEach(track => {
+        this.peerConnection.addTrack(track, this.mediaStream);
+      });
+
+      // Simulate AI partner video (in real app this would be WebRTC stream)
+      this.partnerVideo.src = 'https://static.photos/people/640x360/1';
+
+      this.startBtn.disabled = true;
+      this.endBtn.disabled = false;
+
+      // Start conversation with AI
+      this.simulateAIDialog();
+    } catch (error) {
+      console.error('Error starting conversation:', error);
+      alert('Could not access camera/microphone. Please check permissions.');
+    }
+  }
+
+  async endConversation() {
+    // Stop media tracks
+    if (this.mediaStream) {
+      this.mediaStream.getTracks().forEach(track => track.stop());
+    }
+
+    // Close WebRTC connection
+    if (this.peerConnection) {
+      this.peerConnection.close();
+    }
+
+    this.userVideo.srcObject = null;
+    this.partnerVideo.src = null;
+
+    this.startBtn.disabled = false;
+    this.endBtn.disabled = true;
+
+    // Analyze dialog
+    this.analyzeDialog();
+  }
+
+  simulateAIDialog() {
+    // Simulate AI responses (in real app this would use GPT API)
+    const aiResponses = [
+      "Hello! How are you today?",
+      "That's interesting. Tell me more about that.",
+      "I understand how you feel. What would you like to discuss next?",
+      "Your pronunciation is improving! Keep practicing.",
+      "Let's try to use some new vocabulary words."
+    ];
+
+    let responseIndex = 0;
+    this.aiMessages = [];
+    
+    const aiInterval = setInterval(() => {
+      if (!this.endBtn.disabled) {
+        const response = aiResponses[responseIndex % aiResponses.length];
+        this.aiMessages.push(response);
+        responseIndex++;
+        
+        // Update UI with AI response
+        const feedback = this.shadowRoot.getElementById('feedbackText');
+        feedback.textContent = `AI: ${response}`;
+      } else {
+        clearInterval(aiInterval);
+      }
+    }, 8000);
+  }
+
+  analyzeDialog() {
+    // Simulate dialog analysis (in real app this would use speech-to-text and NLP)
+    this.dialogAnalysis = {
+      fluency: Math.floor(Math.random() * 30) + 70,
+      vocabulary: Math.floor(Math.random() * 30) + 70,
+      pronunciation: Math.floor(Math.random() * 30) + 70,
+      feedback: "Good job! You showed improvement in fluency. Try to use more complex sentences next time."
+    };
+
+    // Display analysis
+    this.analysisSection.style.display = 'block';
+    
+    this.shadowRoot.getElementById('fluencyScore').textContent = `${this.dialogAnalysis.fluency}%`;
+    this.shadowRoot.getElementById('fluencyBar').style.width = `${this.dialogAnalysis.fluency}%`;
+    
+    this.shadowRoot.getElementById('vocabularyScore').textContent = `${this.dialogAnalysis.vocabulary}%`;
+    this.shadowRoot.getElementById('vocabularyBar').style.width = `${this.dialogAnalysis.vocabulary}%`;
+    
+    this.shadowRoot.getElementById('pronunciationScore').textContent = `${this.dialogAnalysis.pronunciation}%`;
+    this.shadowRoot.getElementById('pronunciationBar').style.width = `${this.dialogAnalysis.pronunciation}%`;
+    
+    this.shadowRoot.getElementById('feedbackText').textContent = this.dialogAnalysis.feedback;
+  }
+}
+
+customElements.define('ai-dialog', AIDialog);

index.html

@@ -53,8 +53,9 @@
                 <a href="learning-engine.html" class="hover:text-indigo-400 transition-colors">Learning Engine</a>
                 <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
                 <a href="select-role.html" class="hover:text-indigo-400 transition-colors">Roles</a>
-                <a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
-                <a href="self-talk-journal.html" class="hover:text-indigo-400 transition-colors">Self-Talk</a>
+            <a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
+            <a href="self-talk-journal.html" class="hover:text-indigo-400 transition-colors">Self-Talk</a>
+            <a href="learning-engine.html#ai-dialog" class="hover:text-indigo-400 transition-colors">AI Dialog</a>
 </div>
 <button class="md:hidden">
             <i data-feather="menu"></i>

learning-engine.html

@@ -234,9 +234,11 @@
             <div class="glass-card p-8 mb-12">
                 <h2 class="text-2xl font-bold mb-6">VoiceTrack Module</h2>
                 <p class="text-slate-300 mb-6">Test the voice analysis API with real-time recording and feedback.</p>
-                <voice-track></voice-track>
-                
-                <div class="mt-6">
+        <div class="grid md:grid-cols-2 gap-8 mb-12">
+          <voice-track></voice-track>
+          <ai-dialog></ai-dialog>
+        </div>
+<div class="mt-6">
                     <h3 class="text-xl font-bold mb-4 flex items-center">
                         <span class="px-3 py-1 bg-purple-900/30 text-purple-400 rounded mr-3">POST</span>
                         <code>/voice/analyze</code>
@@ -262,6 +264,7 @@
         </section>
     </main>
     <script src="components/voice-track.js"></script>
+    <script src="components/ai-dialog.js"></script>
 <footer class="py-12 border-t border-slate-800">
         <div class="container mx-auto px-4 text-center">
             <p class="text-slate-500 text-sm">