initial commitHEAD master

author: Navan Chauhan <navanchauhan@gmail.com> 2025-02-18 18:06:54 -0700
committer: Navan Chauhan <navanchauhan@gmail.com> 2025-02-18 18:06:54 -0700
commit: 3633f09b2a881e2c2596ad7c6a50133017e436d0 (patch)
tree: f0cda6e62dacda49910c3d64d760c82c11358b57 /groq.html
1 files changed, 232 insertions, 0 deletions
diff --git a/groq.html b/groq.html
new file mode 100644
index 0000000..d47ad40
--- /dev/null
+++ b/groq.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <style>
+    .chat-container {
+      height: 300px;
+      overflow-y: auto;
+      border: 1px solid #dbdbdb;
+      border-radius: 4px;
+      padding: 1rem;
+      margin-bottom: 1rem;
+    }
+    .message {
+      margin-bottom: 1rem;
+    }
+    .message-content {
+      margin-top: 0.5rem;
+    }
+    .typing-indicator {
+      display: none;
+      color: #666;
+      font-style: italic;
+    }
+    .message pre {
+      background-color: #f5f5f5;
+      padding: 1em;
+      border-radius: 4px;
+      overflow-x: auto;
+    }
+    .message code {
+      font-family: monospace;
+      background-color: #f5f5f5;
+      padding: 0.2em 0.4em;
+      border-radius: 3px;
+    }
+    .message p {
+      margin-bottom: 1em;
+    }
+    .message ul, .message ol {
+      margin-left: 2em;
+      margin-bottom: 1em;
+    }
+  </style>
+</head>
+<body>
+  <section class="section">
+    <div class="container">
+      <div class="field">
+        <label class="label">GROQ API Key</label>
+        <div class="control">
+          <input class="input" type="password" id="apiKey" placeholder="Enter your GROQ API key">
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">System Prompt</label>
+        <div class="control">
+          <textarea class="textarea" id="systemPrompt" placeholder="Enter your system prompt">You are a helpful assistant</textarea>
+        </div>
+      </div>
+
+      <div class="box chat-container" id="chatBox">
+        <div class="message">
+          <strong>System:</strong>
+          <div class="message-content">
+            <p>Welcome to GROQ Chat! Please enter your API key and system prompt to begin.</p>
+          </div>
+        </div>
+        <div class="typing-indicator" id="typingIndicator">Assistant is typing...</div>
+      </div>
+
+      <div class="field">
+        <div class="control">
+          <textarea class="textarea" id="userInput" placeholder="Type your message here..." rows="2"></textarea>
+        </div>
+      </div>
+
+      <div class="field">
+        <div class="control">
+          <button class="button is-primary" id="sendButton">Send Message</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <script>
+    marked.setOptions({
+      breaks: true,
+      gfm: true,
+      headerIds: false,
+      mangle: false
+    });
+
+    const apiKeyInput = document.getElementById('apiKey');
+    const systemPromptInput = document.getElementById('systemPrompt');
+    const userInput = document.getElementById('userInput');
+    const sendButton = document.getElementById('sendButton');
+    const chatBox = document.getElementById('chatBox');
+    const typingIndicator = document.getElementById('typingIndicator');
+
+    let messages = [];
+
+    function addMessageToChat(role, content, useMarkdown = false) {
+      const messageDiv = document.createElement('div');
+      messageDiv.className = 'message';
+      
+      const contentDiv = document.createElement('div');
+      contentDiv.className = 'message-content';
+      
+      messageDiv.innerHTML = `<strong>${role}:</strong>`;
+      contentDiv.innerHTML = useMarkdown ? marked.parse(content) : `<p>${content}</p>`;
+      
+      messageDiv.appendChild(contentDiv);
+      chatBox.insertBefore(messageDiv, typingIndicator);
+      chatBox.scrollTop = chatBox.scrollHeight;
+    }
+
+    async function sendMessage() {
+      const apiKey = apiKeyInput.value;
+      const systemPrompt = systemPromptInput.value;
+      const userMessage = userInput.value.trim();
+
+      if (!apiKey || !userMessage) {
+        alert('Please enter both API key and message');
+        return;
+      }
+
+      // Add user message to chat
+      addMessageToChat('User', userMessage);
+      userInput.value = '';
+
+      // Update messages array
+      if (messages.length === 0) {
+        messages.push({
+          role: 'system',
+          content: systemPrompt
+        });
+      }
+      messages.push({
+        role: 'user',
+        content: userMessage
+      });
+
+      typingIndicator.style.display = 'block';
+
+      try {
+        const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+          },
+          body: JSON.stringify({
+            messages: messages,
+            model: 'llama-3.1-8b-instant',
+            temperature: 1,
+            max_tokens: 1024,
+            top_p: 1,
+            stream: true,
+            stop: null
+          })
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let assistantResponse = '';
+        let messageDiv = null;
+
+        while (true) {
+          const {value, done} = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value);
+          const lines = chunk.split('\n');
+
+          for (const line of lines) {
+            if (line.startsWith('data: ') && line !== 'data: [DONE]') {
+              try {
+                const data = JSON.parse(line.substring(6));
+                if (data.choices[0].delta.content) {
+                  const content = data.choices[0].delta.content;
+                  assistantResponse += content;
+
+                  if (!messageDiv) {
+                    messageDiv = document.createElement('div');
+                    messageDiv.className = 'message';
+                    const contentDiv = document.createElement('div');
+                    contentDiv.className = 'message-content';
+                    messageDiv.innerHTML = '<strong>Assistant:</strong>';
+                    messageDiv.appendChild(contentDiv);
+                    chatBox.insertBefore(messageDiv, typingIndicator);
+                  }
+                  
+                  messageDiv.querySelector('.message-content').innerHTML = marked.parse(assistantResponse);
+                  chatBox.scrollTop = chatBox.scrollHeight;
+                }
+              } catch (e) {
+                console.error('Error parsing chunk:', e);
+              }
+            }
+          }
+        }
+
+        messages.push({
+          role: 'assistant',
+          content: assistantResponse
+        });
+
+      } catch (error) {
+        console.error('Error:', error);
+        addMessageToChat('System', `Error: ${error.message}`);
+      } finally {
+        typingIndicator.style.display = 'none';
+      }
+    }
+
+    sendButton.addEventListener('click', sendMessage);
+    userInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+  </script>
+</body>
+</html>
author	Navan Chauhan <navanchauhan@gmail.com>	2025-02-18 18:06:54 -0700
committer	Navan Chauhan <navanchauhan@gmail.com>	2025-02-18 18:06:54 -0700
commit	3633f09b2a881e2c2596ad7c6a50133017e436d0 (patch)
tree	f0cda6e62dacda49910c3d64d760c82c11358b57 /groq.html