Spaces:

eaglelandsonce
/

DOGE_Hackathon

Running

App Files Files Community

eaglelandsonce commited on Dec 15, 2024

Commit

f3d266c

verified ·

1 Parent(s): bab596f

Update index.html

Browse files

Files changed (1) hide show

index.html +68 -79

index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <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;
@@ -14,20 +14,42 @@
         body {
             font-family: Arial, sans-serif;
             display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
             min-height: 100vh;
             background-color: #f0f0f0;
         }
         .container {
             position: relative;
-            width: 100%;
-            max-width: 1920px;
-            aspect-ratio: 16 / 9;
-            background: #000;
-            overflow: hidden;
-            border: 5px solid #444;
         }
         .top-bar {
             position: absolute;
@@ -79,50 +101,31 @@
             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">
@@ -134,19 +137,13 @@
         <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');
@@ -191,26 +188,17 @@
         // 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`, {
@@ -223,7 +211,7 @@
                         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 }
                         ]
                     })
                 });
@@ -233,15 +221,16 @@
                 }
                 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>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Slide Viewer with Grok Chat</title>
     <style>
+        /* General styling */
         * {
             margin: 0;
             padding: 0;
         body {
             font-family: Arial, sans-serif;
             display: flex;
+            flex-direction: row;
             min-height: 100vh;
             background-color: #f0f0f0;
         }
+        /* Sidebar styling */
+        .sidebar {
+            width: 40px;
+            background-color: #333;
+            color: white;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+        .prompt-icon {
+            margin: 20px 0;
+            cursor: pointer;
+            text-align: center;
+        }
+        .prompt-icon img {
+            width: 24px;
+            height: 24px;
+            margin-bottom: 5px;
+        }
+        .prompt-icon span {
+            font-size: 12px;
+            display: block;
+        }
+        /* Main content styling */
         .container {
+            flex: 1;
             position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
         }
         .top-bar {
             position: absolute;
             object-fit: contain;
             display: block;
         }
+        /* Response box styling */
+        .response-box {
+            position: absolute;
+            top: 10%;
+            left: 10%;
+            background-color: rgba(255, 255, 255, 0.8);
+            color: #333;
+            padding: 15px;
             border: 1px solid #ccc;
             border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            display: none;
         }
     </style>
 </head>
 <body>
+    <!-- Sidebar -->
+    <div class="sidebar">
+        <div class="prompt-icon" id="promptIcon">
+            <img src="prompt-icon.png" alt="Prompt Icon">
+            <span>Prompt</span>
+        </div>
+    </div>
+    <!-- Main Container -->
     <div class="container">
         <div class="top-bar">
             <div class="nav-buttons">
         <div class="main">
             <div class="content">
                 <img id="slide-image" src="images/01_mg.png" alt="Slide Image">
+                <div class="response-box" id="responseBox">
+                    <p id="responseText"></p>
+                </div>
             </div>
         </div>
     </div>
     <script>
         // Slide viewer script
         const slideTitle = document.getElementById('slide-title');
         // Initialize slides
         fetchSlides();
+        // Grok Chat script
         const API_KEY = "xai-hOb0j9QUXVVQMe86ULxWrvyWQQm2LqnWVdxh5hanvqsiVDsXcSPY9EA7YAM5uLCXaThgJscWxxFCHJFy";
         const BASE_URL = "https://api.x.ai/v1";
+        const promptIcon = document.getElementById('promptIcon');
+        const responseBox = document.getElementById('responseBox');
+        const responseText = document.getElementById('responseText');
+        async function sendPrompt(prompt) {
+            responseBox.style.display = "block";
+            responseText.textContent = "Loading...";
             try {
                 const response = await fetch(`${BASE_URL}/chat/completions`, {
                         model: "grok-beta",
                         messages: [
                             { role: "system", content: "You are Grok, a chatbot inspired by the Hitchhiker's Guide to the Galaxy." },
+                            { role: "user", content: prompt }
                         ]
                     })
                 });
                 }
                 const data = await response.json();
+                responseText.textContent = data.choices?.[0]?.message?.content || "Unexpected API response.";
             } catch (error) {
+                responseText.textContent = `Error: ${error.message}`;
             }
         }
+        promptIcon.addEventListener('click', () => {
+            const slideText = slides[currentIndex]?.text || "Default prompt";
+            sendPrompt(slideText);
+        });
     </script>
 </body>
 </html>