AI update!!!

smartfoloo · Dec 19, 2024 · 6fb2b69 · 6fb2b69
1 parent 45eb309
commit 6fb2b69
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 25 deletions.
diff --git a/public/assets/.DS_Store b/public/assets/.DS_Store
diff --git a/public/css/index.css b/public/css/index.css
@@ -385,6 +385,7 @@ h2 {
 
 #game-page,
 #proxy-page,
+#ai-page,
 #settings-page {
   display: none;
   padding: 100px;
@@ -609,6 +610,45 @@ iframe {
   border-radius: 20px;
 }
 
+/* AI */
+
+.ai-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+#chat-display {
+  min-height: calc(100vh - 301.5px);
+  background: var(--background2);
+  border-radius: 20px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+#ai-page .input-container {
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  margin: 0;
+}
+
+#input-box {
+  border-radius: 20px;
+}
+
+#submit-btn {
+  width: 41.5px !important;
+  height: 41.5px !important;
+  border-radius: 20.75px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 /* settings */
 
 .settings-container {

diff --git a/public/index.html b/public/index.html
@@ -68,6 +68,13 @@ <h6>v1</h6>
               <p class="category"></p>
             </div>
           </button>
+          <button class="tab-btn" id="game-tab" onclick="openPage('ai-page')">
+            <div class="left">
+              <i data-lucide="bot"></i>
+              <p>AI</p>
+              <p class="category"></p>
+            </div>
+          </button>
           <hr>
           <div id="tabs-container"></div>
         </div>
@@ -209,6 +216,17 @@ <h1>Proxy</h1>
       <div class="page" id="forum-page">
         <iframe src="/forum" frameborder="0" style="width: 100% !important; height: 100% !important;"></iframe>
       </div>
+      <div class="page" id="ai-page">
+        <div class="ai-container">
+          <div id="chat-display"></div>
+          <div class="input-container">
+            <input type="text" id="input-box" placeholder="Message AI...">
+            <button id="submit-btn">
+              <i data-lucide="send"></i>
+            </button>
+          </div>
+        </div>
+      </div>
       <div class="page" id="settings-page">
         <h1><a href="javascript:alert('Little easter egg hidden by Silvereen 🥚')">S</a>ettings</h1>
         <div class="settings-container">
@@ -249,25 +267,9 @@ <h4>Catppuccin Mocha</h4>
             <div class="setting-card">
               <h2>Wallpaper</h2>
               <div class="cards-container">
-                <div class="wallpaper-card"
-                  onclick='changeWallpaper("winterfall")'>
-                  <img src="./assets/wallpapers/winterfall.png" alt="winterfall">
-                  <h4>Winterfall</h4>
-                </div>
-                <div class="wallpaper-card"
-                  onclick='changeWallpaper("northern-lights")'>
-                  <img src="./assets/wallpapers/northern-lights.png" alt="northern-lights">
-                  <h4>Northern Lights</h4>
-                </div>
-                <div class="wallpaper-card"
-                  onclick='changeWallpaper("spookwaves")'>
-                  <img src="./assets/wallpapers/spookwaves.png" alt="spookwaves">
-                  <h4>Spookwaves</h4>
-                </div>
-                <div class="wallpaper-card"
-                  onclick='changeWallpaper("dark-basil")'>
-                  <img src="./assets/wallpapers/dark-basil.png" alt="dark-basil">
-                  <h4>Dark Basil</h4>
+                <div class="wallpaper-card" onclick='changeWallpaper("nightfall")'>
+                  <img src="./assets/wallpapers/nightfall.png" alt="nightfall">
+                  <h4>Nightfall</h4>
                 </div>
                 <div class="wallpaper-card" onclick='changeWallpaper("chroma-glow")'>
                   <img src="./assets/wallpapers/chroma-glow.png" alt="chroma-glow">
@@ -277,10 +279,6 @@ <h4>Chroma Glow</h4>
                   <img src="./assets/wallpapers/twilight.png" alt="twilight">
                   <h4>Twilight</h4>
                 </div>
-                <div class="wallpaper-card" onclick='changeWallpaper("nightfall")'>
-                  <img src="./assets/wallpapers/nightfall.png" alt="nightfall">
-                  <h4>Nightfall</h4>
-                </div>
                 <div class="wallpaper-card" onclick='changeWallpaper("ultraradiation")'>
                   <img src="./assets/wallpapers/ultraradiation.png" alt="ultraradiation">
                   <h4>Ultraradiation</h4>

diff --git a/public/js/system.js b/public/js/system.js
@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', function () {
   openPage('home-page');
 
-  const savedWallpaper = localStorage.getItem('selectedWallpaper') || 'winterfall';
+  const savedWallpaper = localStorage.getItem('selectedWallpaper') || 'nightfall';
   changeWallpaper(savedWallpaper);
 
   const savedTheme = localStorage.getItem('theme');
@@ -347,7 +347,7 @@ function openPage(pageId) {
     element.classList.remove('current-game-embed');
   });
 
-  embedContainer.style.display = (pageId === 'home-page' || pageId === 'settings-page' || pageId === 'game-page' || pageId === 'proxy-page' || pageId === 'forum-page') ? 'none' : 'flex';
+  embedContainer.style.display = (pageId === 'home-page' || pageId === 'settings-page' || pageId === 'game-page' || pageId === 'proxy-page' || pageId === 'forum-page' || pageId === 'ai-page') ? 'none' : 'flex';
 
   pages.forEach(page => {
     page.style.display = 'none';
@@ -435,6 +435,79 @@ function refresh() {
   }
 }
 
+// AI
+
+const chatBox = document.getElementById('chat-display');
+const textInput = document.getElementById('input-box');
+const sendBtn = document.getElementById('submit-btn');
+
+const token = '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';
+
+function sendTextMessage() {
+  const message = textInput.value.trim();
+  if (!message) return;
+
+  displayMessage(message, 'user');
+  textInput.value = '';
+
+  fetchResponse(message);
+}
+
+function displayMessage(messageContent, senderType) {
+  const messageDiv = document.createElement('div');
+  messageDiv.className = `message ${senderType}`;
+  messageDiv.innerHTML = `<p><b>${senderType === 'user' ? 'You' : senderType === 'ai' ? 'AI' : 'Error'}</b>: ${messageContent}</p>`;
+  chatBox.appendChild(messageDiv);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+async function fetchResponse(userMessage) {
+  const apiUrl = 'https://api.groq.com/openai/v1/chat/completions';
+  const systemPrompt = "You are a helpful AI assistant.";
+
+  const requestData = {
+    model: "mixtral-8x7b-32768",
+    messages: [
+      { role: "system", content: systemPrompt },
+      { role: "user", content: userMessage }
+    ],
+    temperature: 0.9,
+    max_tokens: 1024,
+    stream: false
+  };
+
+  try {
+    const response = await fetch(apiUrl, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestData),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP Error: ${response.status}`);
+    }
+
+    const { choices } = await response.json();
+    const reply = choices[0].message.content;
+    displayMessage(reply, 'ai');
+  } catch (err) {
+    console.error('Request Failed:', err);
+    displayMessage(`Failed to get a response. Details: ${err.message}`, 'error');
+  }
+}
+
+textInput.addEventListener('keypress', (event) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    sendTextMessage();
+  }
+});
+
+sendBtn.addEventListener('click', sendTextMessage);
+
 // Proxy 
 
 const searchEngineUrls = {