Update index.html

index.html

@@ -14,6 +14,10 @@
             <img src="prompt-icon.png" alt="Prompt Icon">
             <span>Prompt</span>
         </div>
+        <div class="video-icon" id="videoIcon">
+            <img src="video-icon.png" alt="Video Icon">
+            <span>Video</span>
+        </div>
     </div>
 
     <!-- Main Container -->
@@ -37,43 +41,31 @@
                 </div>
             </div>
         </div>
+        <div class="video-overlay" id="videoOverlay" style="display: none;">
+            <iframe id="videoPlayer" src="" allowfullscreen></iframe>
+            <button class="close-button" id="closeVideo">×</button>
+        </div>
     </div>
 
     <script>
-        // Define the Grok API constants
         const BASE_URL = "https://api.x.ai/v1";
         const API_KEY = "xai-hOb0j9QUXVVQMe86ULxWrvyWQQm2LqnWVdxh5hanvqsiVDsXcSPY9EA7YAM5uLCXaThgJscWxxFCHJFy";
 
-        // Define agentic workers
-        const agents = [
-            {
-                name: "Zoe Kim",
-                systemMessage: `
-                    You are Zoe Kim, a Software Engineer specializing in full-stack development. 
-                    Keep your response brief (1-2 sentences). Start by discussing the application’s development requirements.
-                `,
-            },
-            {
-                name: "Alex Patel",
-                systemMessage: `
-                    You are Alex Patel, a DevOps Engineer focusing on CI/CD pipelines. 
-                    Respond briefly to Zoe’s suggestions and discuss infrastructure adjustments in 1-2 sentences.
-                `,
-            },
-            {
-                name: "Jack Dawson",
-                systemMessage: `
-                    You are Jack Dawson, a QA and SRE specializing in system reliability. 
-                    Provide concise feedback on Alex’s design (1-2 sentences), focusing on risks or gaps.
-                `,
-            },
-        ];
-
-        // Slide viewer script
+        // DOM elements
         const slideTitle = document.getElementById('slide-title');
         const slideImage = document.getElementById('slide-image');
         const prevBtn = document.getElementById('prev-btn');
         const nextBtn = document.getElementById('next-btn');
+        const promptBox = document.getElementById('promptBox');
+        const promptText = document.getElementById('promptText');
+        const responseBox = document.getElementById('responseBox');
+        const responseContent = document.getElementById('responseContent');
+        const promptIcon = document.getElementById('promptIcon');
+        const videoIcon = document.getElementById('videoIcon');
+        const videoOverlay = document.getElementById('videoOverlay');
+        const videoPlayer = document.getElementById('videoPlayer');
+        const closeVideo = document.getElementById('closeVideo');
+
         let slides = [];
         let currentIndex = 0;
 
@@ -93,97 +85,44 @@
             const slide = slides[index];
             slideTitle.textContent = slide.id.replace('_', ' ');
             slideImage.src = slide.image;
+
+            // Clear prompt and Grok information
+            promptBox.style.display = 'none';
+            responseBox.style.display = 'none';
+            responseContent.innerHTML = '';
+
+            // Reset video player
+            videoPlayer.src = '';
         }
 
         prevBtn.addEventListener('click', () => {
-            if (slides.length > 0) {
-                currentIndex = (currentIndex - 1 + slides.length) % slides.length;
-                loadSlide(currentIndex);
-            }
+            currentIndex = (currentIndex - 1 + slides.length) % slides.length;
+            loadSlide(currentIndex);
         });
 
         nextBtn.addEventListener('click', () => {
-            if (slides.length > 0) {
-                currentIndex = (currentIndex + 1) % slides.length;
-                loadSlide(currentIndex);
-            }
+            currentIndex = (currentIndex + 1) % slides.length;
+            loadSlide(currentIndex);
         });
 
-        // Initialize slides
-        fetchSlides();
-
-        // Grok Chat script with agentic workers
-        const promptIcon = document.getElementById('promptIcon');
-        const promptBox = document.getElementById('promptBox');
-        const promptText = document.getElementById('promptText');
-        const queryButton = document.getElementById('queryButton');
-        const responseBox = document.getElementById('responseBox');
-        const responseContent = document.getElementById('responseContent');
-        let isPromptBoxVisible = false;
-
         promptIcon.addEventListener('click', () => {
-            isPromptBoxVisible = !isPromptBoxVisible;
-            promptBox.style.display = isPromptBoxVisible ? "block" : "none";
+            promptBox.style.display = promptBox.style.display === 'block' ? 'none' : 'block';
+        });
 
-            if (isPromptBoxVisible) {
-                const slideText = slides[currentIndex]?.text || "Default prompt text";
-                promptText.value = slideText;
-            } else {
-                responseBox.style.display = "none";
+        videoIcon.addEventListener('click', () => {
+            const videoURL = slides[currentIndex]?.video || '';
+            if (videoURL) {
+                videoPlayer.src = videoURL;
+                videoOverlay.style.display = 'flex';
             }
         });
 
-        queryButton.addEventListener('click', async () => {
-            const userPrompt = promptText.value.trim();
-            if (!userPrompt) return;
-
-            responseBox.style.display = "block";
-            responseContent.innerHTML = "Loading...";
-
-            try {
-                let conversationLog = [];
-                const numIterations = 2; // Number of back-and-forth interactions
-
-                for (let iteration = 0; iteration < numIterations; iteration++) {
-                    for (const agent of agents) {
-                        const response = await fetch(`${BASE_URL}/chat/completions`, {
-                            method: "POST",
-                            headers: {
-                                "Authorization": `Bearer ${API_KEY}`,
-                                "Content-Type": "application/json"
-                            },
-                            body: JSON.stringify({
-                                model: "grok-beta",
-                                messages: [
-                                    { role: "system", content: agent.systemMessage },
-                                    { role: "user", content: userPrompt },
-                                    ...conversationLog.map((log) => ({
-                                        role: "assistant",
-                                        content: log.response,
-                                    })),
-                                ],
-                            }),
-                        });
-
-                        if (!response.ok) {
-                            throw new Error(`Error: ${response.statusText}`);
-                        }
-
-                        const data = await response.json();
-                        const agentResponse = data.choices?.[0]?.message?.content || "Unexpected API response.";
-                        conversationLog.push({
-                            agent: agent.name,
-                            response: agentResponse,
-                        });
-
-                        // Append response to content
-                        responseContent.innerHTML += `<strong>${agent.name}:</strong> ${agentResponse}<br>`;
-                    }
-                }
-            } catch (error) {
-                responseContent.textContent = `Error: ${error.message}`;
-            }
+        closeVideo.addEventListener('click', () => {
+            videoOverlay.style.display = 'none';
+            videoPlayer.src = '';
         });
+
+        fetchSlides();
     </script>
 </body>
 </html>