Update index.html

AiGptCode · Jun 6, 2024 · 56f9f29 · 56f9f29
1 parent 5cbd37b
commit 56f9f29
Showing 1 changed file with 189 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Llama3 AI Assistant</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.3.1/styles/default.min.css">
+  <style>
+    body {
+      font-family: Inter, sans-serif;
+      background-color: #212121;
+      color: #fff;
+    }
+   .chat-container {
+      max-width: 800px;
+      margin: 40px auto;
+      padding: 20px;
+      background-color: #333;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+   .chat-header {
+      background-color: #444;
+      color: #fff;
+      padding: 10px;
+      border-bottom: 1px solid #444;
+    }
+   .chat-header h2 {
+      margin: 0;
+      font-weight: bold;
+    }
+   .chat-messages {
+      padding: 20px;
+    }
+   .message {
+      margin-bottom: 20px;
+      padding: 10px;
+      border-radius: 10px;
+    }
+   .message.assistant {
+      background-color: #43537E;
+      color: #fff;
+    }
+   .message.user {
+      background-color: #666;
+      color: #fff;
+    }
+   .message span {
+      font-weight: bold;
+      color: #fff;
+    }
+   .input-container {
+      padding: 20px;
+    }
+   .input-field {
+      width: 100%;
+      padding: 10px;
+      font-size: 16px;
+      border: none;
+      border-radius: 10px;
+      background-color: #444;
+      color: #fff;
+    }
+   .input-field:focus {
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+   .send-button {
+      background-color: #337ab7;
+      color: #fff;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+    }
+   .send-button:hover {
+      background-color: #23527c;
+    }
+   .code-block {
+      padding: 10px;
+      border-radius: 10px;
+      background-color: #333;
+      color: #fff;
+    }
+   .code-block code {
+      font-family: Monaco, monospace;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <div class="chat-container">
+    <div class="chat-header">
+      <h2>Llama3 AI Assistant</h2>
+    </div>
+    <div class="chat-messages">
+      <div class="message system">
+        <span>System:</span> You are a helpful assistant.
+      </div>
+    </div>
+    <div class="input-container">
+      <input id="user-input" type="text" class="input-field" placeholder="Type a message...">
+      <button id="send-button" class="send-button">Send</button>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.3.1/highlight.min.js"></script>
+    <script>
+      const chatMessages = document.querySelector('.chat-messages');
+      const userInput = document.querySelector('#user-input');
+      const sendButton = document.querySelector('#send-button');
+
+      let messages = [
+        { role:'system', content: 'You are a helpful assistant.' }
+      ];
+
+      sendButton.addEventListener('click', async () => {
+        const userInputValue = userInput.value.trim();
+        if (userInputValue!== '') {
+          messages.push({ role: 'user', content: userInputValue });
+          userInput.value = '';
+
+          const assistantResponse = await getAssistantResponse(messages);
+          if (assistantResponse) {
+            messages.push({ role: 'assistant', content: assistantResponse });
+            renderChatMessages();
+          } else {
+            console.error('Failed to get a response from the assistant.');
+          }
+        }
+      });
+
+      async function getAssistantResponse(messages) {
+        const url = 'https://api.fireworks.ai/inference/v1/chat/completions';
+        const payload = {
+          model: 'accounts/fireworks/models/llama-v3-70b-instruct',
+          max_tokens: 8192,
+          top_p: 1,
+          top_k: 40,
+          presence_penalty: 0,
+          frequency_penalty: 0,
+          temperature: 1,
+          messages
+        };
+        const headers = {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer QAwsdCAvRsIaGhoJQvXqfwNkwuDj7D1MyGqldWn07GV068cq'
+        };
+
+        try {
+          const response = await fetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
+          const responseData = await response.json();
+          if (responseData.choices && responseData.choices[0].message.content) {
+            return responseData.choices[0].message.content;
+          } else {
+            console.error('No valid response received from the API.');
+            return null;
+          }
+        } catch (error) {
+          console.error('Error:', error);
+          return null;
+        }
+      }
+
+      function renderChatMessages() {
+        chatMessages.innerHTML = '';
+        messages.forEach((message) => {
+          const messageElement = document.createElement('div');
+          messageElement.className = `message ${message.role}`;
+          if (message.content.includes('```')) {
+            const codeBlock = document.createElement('div');
+            codeBlock.className = 'code-block';
+            codeBlock.innerHTML = `<code>${message.content.replace('```', '')}</code>`;
+            messageElement.appendChild(codeBlock);
+          } else {
+            messageElement.innerHTML = `<span>${message.role.charAt(0).toUpperCase() + message.role.slice(1)}:</span> ${message.content}`;
+          }
+          chatMessages.appendChild(messageElement);
+        });
+        hljs.highlightAll();
+      }
+
+      renderChatMessages();
+    </script>
+  </div>
+</body>
+</html>