Update playground.html

playground.html

@@ -366,6 +366,7 @@
                     <option value="llama-3.1-405b">Llama 3.1 405b</option>
                     <option value="gemini-1.5-flash">Gemini 1.5 Flash</option>
                     <option value="gemini-pro">Gemini Pro</option>
+                    <option value="searchgpt">SearchGPT(Realtime Stuff)</option>
                     <option value="mixtral-8x7b">Mixtral 8x7b</option>
                     <option value="command-r">Command-R</option>
                     <option value="command">Command</option>
@@ -428,34 +429,55 @@
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
         function appendMessage(content, type = 'bot', isStreaming = false) {
-            if (type === 'bot' && isStreaming) {
-                if (!currentStreamingMessage) {
-                    currentStreamingMessage = document.createElement('div');
-                    currentStreamingMessage.className = `message ${type}`;
-                    chatMessages.appendChild(currentStreamingMessage);
-                }
-                // Use innerHTML for streaming content
-                currentStreamingMessage.innerHTML = currentStreamingMessage.innerHTML + content;
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-            } else {
-                if (currentStreamingMessage) {
-                    currentStreamingMessage = null;
-                }
-
-                const messageBox = document.createElement('div');
-                messageBox.className = `message ${type}`;
-                // Use innerHTML for new messages
-                messageBox.innerHTML = content;
-                chatMessages.appendChild(messageBox);
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-
-                // Update conversation history
-                conversationHistory.push({
-                    role: type === 'user' ? 'user' : 'assistant',
-                    content: content
-                });
-            }
-        }
+    if (type === 'bot' && isStreaming) {
+        if (!currentStreamingMessage) {
+            currentStreamingMessage = document.createElement('div');
+            currentStreamingMessage.className = `message ${type}`;
+            chatMessages.appendChild(currentStreamingMessage);
+        }
+        
+        // Replace consecutive numbers followed by spaces with numbered list format
+        // Convert text between ** to bold, handling multiple occurrences
+        const formattedContent = content
+            .replace(/(\d+)\.\s*/g, '<br>$1. ')  // Ensure proper spacing and line breaks
+            .replace(/\n/g, '<br>')  // Convert remaining newlines
+            .replace(/\*\*(.*?)\*\*/g, function(match, p1) {
+                return '<strong>' + p1 + '</strong>';
+            });
+        
+        // Safely set innerHTML
+        currentStreamingMessage.innerHTML += formattedContent;
+        
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    } else {
+        // Similar logic for non-streaming messages
+        if (currentStreamingMessage) {
+            currentStreamingMessage = null;
+        }
+
+        const messageBox = document.createElement('div');
+        messageBox.className = `message ${type}`;
+        
+        // Format content similarly
+        const formattedContent = content
+            .replace(/(\d+)\.\s*/g, '<br>$1. ')
+            .replace(/\n/g, '<br>')
+            .replace(/\*\*(.*?)\*\*/g, function(match, p1) {
+                return '<strong>' + p1 + '</strong>';
+            });
+        
+        messageBox.innerHTML = formattedContent;
+        
+        chatMessages.appendChild(messageBox);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+
+        // Update conversation history
+        conversationHistory.push({
+            role: type === 'user' ? 'user' : 'assistant',
+            content: content
+        });
+    }
+}
         $(document).ready(function () {
             $('#modelSelect').select2({
                 placeholder: 'Select a model', // Placeholder text
@@ -507,74 +529,124 @@
         }
 
         async function callApi(userMessage, model) {
-            const url = "https://parthsadaria-lokiai.hf.space/chat/completions";
-            const payload = {
-                model: model,
-                messages: [
-                    ...conversationHistory,
-                    { role: "user", content: userMessage }
-                ],
-                stream: true
-            };
-
-            const headers = {
-                "Content-Type": "application/json"
-            };
-
-            let fullResponse = "";
-
-            try {
-                const response = await fetch(url, {
-                    method: "POST",
-                    headers: headers,
-                    body: JSON.stringify(payload)
-                });
-
-                if (response.ok) {
-                    const reader = response.body.getReader();
-                    const decoder = new TextDecoder("utf-8");
-                    let done = false;
-
-                    while (!done) {
-                        const { value, done: streamDone } = await reader.read();
-                        done = streamDone;
-
-                        if (value) {
-                            const chunk = decoder.decode(value);
-                            const cleanedChunk = chunk.trim().replace(/^data:\s*/, '');
-                            const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
-
-                            jsonChunks.forEach(jsonString => {
-                                try {
-                                    const jsonData = JSON.parse(jsonString);
-                                    const delta = jsonData.choices?.[0]?.delta || {};
-                                    let content = delta.content || "";
-
-                                    if (content) {
-                                        // Convert \n to <br>
-                                        // Properly handle newline characters
-                                        content = content.replace(/\\n/g, '<br>'); // Replace escaped newlines (\n) with <br>
-
-                                        // Call appendMessage with the processed content
-                                        appendMessage(content, 'bot', true);
-
-                                    }
-                                } catch (err) {
-                                    console.warn("Parsing error:", err);
+    let fullResponse = "";
+
+    if (model === "searchgpt") {
+        const url = `https://parthsadaria-lokiai.hf.space/searchgpt?q=${encodeURIComponent(userMessage)}&stream=true&systemprompt=You are **SearchGPT**, an AI with internet access. Reply directly and accurately to user requests.`;
+        try {
+            const response = await fetch(url);
+
+            if (response.ok) {
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+                let done = false;
+
+                while (!done) {
+                    const { value, done: streamDone } = await reader.read();
+                    done = streamDone;
+
+                    if (value) {
+                        const chunk = decoder.decode(value);
+                        const cleanedChunk = chunk.trim().replace(/^data:\s*/, '');
+                        const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
+
+                        jsonChunks.forEach(jsonString => {
+                            try {
+                                const jsonData = JSON.parse(jsonString);
+                                const content = jsonData.choices?.[0]?.message?.content || "";
+
+                                if (content) {
+                                    // Comprehensive newline conversion
+                                    const formattedContent = content
+                                        .replace(/\r\n/g, '<br>')   // Windows-style newlines
+                                        .replace(/\n/g, '<br>')     // Unix/Linux-style newlines
+                                        .replace(/\r/g, '<br>');    // Old Mac-style newlines
+
+                                    appendMessage(formattedContent, 'bot', true);
                                 }
-                            });
-                        }
+                            } catch (err) {
+                                console.warn("Parsing error:", err);
+                            }
+                        });
                     }
-                } else {
-                    throw new Error(`API responded with status ${response.status}`);
                 }
-            } catch (error) {
-                console.error("API call error:", error);
-                throw error;
+            } else {
+                throw new Error(`API responded with status ${response.status}`);
             }
+        } catch (error) {
+            console.error("API call error:", error);
+            throw error;
+        }
+
+    } else {
+        // Similar changes for other models
+        const url = "https://parthsadaria-lokiai.hf.space/chat/completions";
+        const payload = {
+            model: model,
+            messages: [
+                ...conversationHistory,
+                { role: "user", content: userMessage }
+            ],
+            stream: true
+        };
+
+        const headers = {
+            "Content-Type": "application/json"
+        };
+
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: headers,
+                body: JSON.stringify(payload)
+            });
 
-            return fullResponse.trim();
+            if (response.ok) {
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+                let done = false;
+
+                while (!done) {
+                    const { value, done: streamDone } = await reader.read();
+                    done = streamDone;
+
+                    if (value) {
+                        const chunk = decoder.decode(value);
+                        const cleanedChunk = chunk.trim().replace(/^data:\s*/, '');
+                        const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
+
+                        jsonChunks.forEach(jsonString => {
+                            try {
+                                const jsonData = JSON.parse(jsonString);
+                                const delta = jsonData.choices?.[0]?.delta || {};
+                                let content = delta.content || "";
+                                
+                                // Comprehensive newline conversion
+                                content = content
+                                    .replace(/\r\n/g, '<br>')   // Windows-style newlines
+                                    .replace(/\n/g, '<br>')     // Unix/Linux-style newlines
+                                    .replace(/\r/g, '<br>');    // Old Mac-style newlines
+
+                                if (content) {
+                                    appendMessage(content, 'bot', true);
+                                }
+                            } catch (err) {
+                                console.warn("Parsing error:", err);
+                            }
+                        });
+                    }
+                }
+            } else {
+                throw new Error(`API responded with status ${response.status}`);
+            }
+        } catch (error) {
+            console.error("API call error:", error);
+            throw error;
         }
+    }
+
+    return fullResponse.trim();
+}
         // Event Listeners
         initialSendIcon.addEventListener('click', sendInitialMessage);
         initialChatInput.addEventListener('keypress', (event) => {
@@ -592,9 +664,6 @@
 </body>
 <!-- random
 comments
-to
-get
-to
-600 lines
-coz why not -->
+to get
+669 lines -->
 </html>