Spaces:

eaglelandsonce
/

DOGE_Hackathon

Running

App Files Files Community

eaglelandsonce commited on Dec 15, 2024

Commit

bab596f

verified ·

1 Parent(s): 13a67ce

Update index.html

Browse files

Files changed (1) hide show

index.html +120 -93

index.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Responsive Slide Viewer</title>
     <style>
-        /* General styles */
         * {
             margin: 0;
             padding: 0;
@@ -14,6 +14,7 @@
         body {
             font-family: Arial, sans-serif;
             display: flex;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
@@ -27,56 +28,11 @@
             background: #000;
             overflow: hidden;
             border: 5px solid #444;
-            display: flex;
-        }
-        .left-sidebar {
-            width: 40px;
-            background-color: #333;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 10px 0;
-            gap: 10px;
-            position: relative;
-        }
-        .sidebar-button {
-            width: 30px;
-            height: 30px;
-            background-color: #666;
-            border: none;
-            border-radius: 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            position: absolute;
-            top: 100px;
-        }
-        .sidebar-button:hover {
-            background-color: #888;
-        }
-        .sidebar-button img {
-            width: 20px;
-            height: 20px;
-        }
-        .sidebar-button:hover::after {
-            content: "Prompt";
-            position: absolute;
-            left: 50px;
-            top: 50%;
-            transform: translateY(-50%);
-            background-color: #444;
-            color: #fff;
-            padding: 5px 10px;
-            border-radius: 5px;
-            white-space: nowrap;
-            font-size: 14px;
-            z-index: 100;
         }
         .top-bar {
             position: absolute;
             top: 0;
-            width: calc(100% - 40px);
             background-color: #333;
             color: white;
             text-align: center;
@@ -84,18 +40,15 @@
             z-index: 10;
             display: flex;
             align-items: center;
-            justify-content: center;
-            left: 40px;
         }
         .top-bar h1 {
-            margin: 0;
             text-align: center;
         }
         .nav-buttons {
             display: flex;
             gap: 10px;
-            position: absolute;
-            right: 10px;
         }
         .nav-buttons button {
             background-color: #666;
@@ -111,7 +64,6 @@
         .main {
             display: flex;
             height: 100%;
-            flex: 1;
         }
         .content {
             flex: 1;
@@ -127,94 +79,169 @@
             object-fit: contain;
             display: block;
         }
-        .prompt-box {
-            position: absolute;
-            top: 20%;
-            left: 20%;
-            width: 60%;
-            background-color: rgba(255, 255, 255, 0.9);
             padding: 20px;
-            border: 2px solid #333;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-            font-size: 18px;
-            display: none;
-            z-index: 20;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="left-sidebar">
-            <button class="sidebar-button" id="prompt-icon">
-                <img src="images/prompt-icon.png" alt="Prompt">
-            </button>
-        </div>
         <div class="top-bar">
-            <h1 id="slide-title">Slide Viewer</h1>
             <div class="nav-buttons">
                 <button id="prev-btn">&#8592; Previous</button>
                 <button id="next-btn">Next &#8594;</button>
             </div>
         </div>
         <div class="main">
             <div class="content">
                 <img id="slide-image" src="images/01_mg.png" alt="Slide Image">
-                <div class="prompt-box" id="prompt-box"></div>
             </div>
         </div>
     </div>
     <script>
         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 promptIcon = document.getElementById('prompt-icon');
-        const promptBox = document.getElementById('prompt-box');
-        let data = [];
         let currentIndex = 0;
-        // Fetch slide configuration
-        async function fetchSlideConfig() {
             try {
                 const response = await fetch('slide_config.json');
-                const jsonData = await response.json();
-                data = jsonData.slides;
                 loadSlide(currentIndex);
             } catch (error) {
-                console.error('Error loading slide configuration:', error);
             }
         }
         function loadSlide(index) {
-            if (data.length === 0) return;
-            const slide = data[index];
             slideTitle.textContent = slide.id.replace('_', ' ');
             slideImage.src = slide.image;
-            promptBox.textContent = slide.text;
-            promptBox.style.display = 'none'; // Hide the prompt box initially
         }
         prevBtn.addEventListener('click', () => {
-            if (data.length > 0) {
-                currentIndex = (currentIndex - 1 + data.length) % data.length;
                 loadSlide(currentIndex);
             }
         });
         nextBtn.addEventListener('click', () => {
-            if (data.length > 0) {
-                currentIndex = (currentIndex + 1) % data.length;
                 loadSlide(currentIndex);
             }
         });
-        promptIcon.addEventListener('click', () => {
-            promptBox.style.display = promptBox.style.display === 'none' ? 'block' : 'none';
-        });
-        // Initialize
-        fetchSlideConfig();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Slide Viewer with Grok Chat</title>
     <style>
+        /* Original slide viewer styles */
         * {
             margin: 0;
             padding: 0;
         body {
             font-family: Arial, sans-serif;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
             background: #000;
             overflow: hidden;
             border: 5px solid #444;
         }
         .top-bar {
             position: absolute;
             top: 0;
+            width: 100%;
             background-color: #333;
             color: white;
             text-align: center;
             z-index: 10;
             display: flex;
             align-items: center;
+            justify-content: space-between;
         }
         .top-bar h1 {
+            flex: 1;
             text-align: center;
         }
         .nav-buttons {
             display: flex;
             gap: 10px;
         }
         .nav-buttons button {
             background-color: #666;
         .main {
             display: flex;
             height: 100%;
         }
         .content {
             flex: 1;
             object-fit: contain;
             display: block;
         }
+        /* Chat with Grok styles */
+        .chat-section {
+            margin-top: 20px;
+            width: 100%;
+            max-width: 600px;
+        }
+        #prompt {
+            width: 100%;
+            margin-bottom: 10px;
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        button:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+        .response-container {
+            margin-top: 20px;
             padding: 20px;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .response-container h3 {
+            color: #007bff;
+        }
+        .response-container p {
+            font-size: 16px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="top-bar">
             <div class="nav-buttons">
                 <button id="prev-btn">&#8592; Previous</button>
                 <button id="next-btn">Next &#8594;</button>
             </div>
+            <h1 id="slide-title">Slide Viewer</h1>
         </div>
         <div class="main">
             <div class="content">
                 <img id="slide-image" src="images/01_mg.png" alt="Slide Image">
             </div>
         </div>
     </div>
+    <div class="chat-section">
+        <textarea id="prompt" rows="5" placeholder="Enter your prompt here..."></textarea>
+        <button id="sendButton">Send</button>
+        <div class="response-container" id="responseContainer" style="display: none;">
+            <h3>Response:</h3>
+            <p id="response"></p>
+        </div>
+    </div>
     <script>
+        // Slide viewer script
         const slideTitle = document.getElementById('slide-title');
         const slideImage = document.getElementById('slide-image');
         const prevBtn = document.getElementById('prev-btn');
         const nextBtn = document.getElementById('next-btn');
+        let slides = [];
         let currentIndex = 0;
+        async function fetchSlides() {
             try {
                 const response = await fetch('slide_config.json');
+                const data = await response.json();
+                slides = data.slides;
                 loadSlide(currentIndex);
             } catch (error) {
+                console.error('Error loading slides:', error);
             }
         }
         function loadSlide(index) {
+            if (!slides.length) return;
+            const slide = slides[index];
             slideTitle.textContent = slide.id.replace('_', ' ');
             slideImage.src = slide.image;
         }
         prevBtn.addEventListener('click', () => {
+            if (slides.length > 0) {
+                currentIndex = (currentIndex - 1 + slides.length) % slides.length;
                 loadSlide(currentIndex);
             }
         });
         nextBtn.addEventListener('click', () => {
+            if (slides.length > 0) {
+                currentIndex = (currentIndex + 1) % slides.length;
                 loadSlide(currentIndex);
             }
         });
+        // Initialize slides
+        fetchSlides();
+        // Chat with Grok script
+        const API_KEY = "xai-hOb0j9QUXVVQMe86ULxWrvyWQQm2LqnWVdxh5hanvqsiVDsXcSPY9EA7YAM5uLCXaThgJscWxxFCHJFy";
+        const BASE_URL = "https://api.x.ai/v1";
+        const sendButton = document.getElementById("sendButton");
+        const promptInput = document.getElementById("prompt");
+        const responseContainer = document.getElementById("responseContainer");
+        const responseOutput = document.getElementById("response");
+        async function sendPrompt() {
+            const userPrompt = promptInput.value.trim();
+            if (!userPrompt) {
+                responseContainer.style.display = "block";
+                responseOutput.textContent = "Please enter a valid prompt.";
+                return;
+            }
+            sendButton.disabled = true;
+            responseContainer.style.display = "block";
+            responseOutput.textContent = "Loading...";
+            try {
+                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: "You are Grok, a chatbot inspired by the Hitchhiker's Guide to the Galaxy." },
+                            { role: "user", content: userPrompt }
+                        ]
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`Error: ${response.statusText}`);
+                }
+                const data = await response.json();
+                responseOutput.textContent = data.choices?.[0]?.message?.content || "Unexpected API response.";
+            } catch (error) {
+                responseOutput.textContent = `Error: ${error.message}`;
+            } finally {
+                sendButton.disabled = false;
+            }
+        }
+        sendButton.addEventListener("click", sendPrompt);
     </script>
 </body>
 </html>