Update playground.html

playground.html

@@ -685,74 +685,114 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Fetch available models
     async function fetchModels() {
-        try {
-            const response = await fetch('https://parthsadaria-lokiai.hf.space/models', {
-                headers: {
-                    'Authorization': 'playground'
-                }
-            });
-            
-            if (response.ok) {
-                const data = await response.json();
-                modelsList = data.data || [];
-                
-                // Add search GPT option
-                modelsList.push({
-                    id: 'searchgpt',
-                    displayName: 'SearchGPT (with internet)',
-                    description: 'GPT model with internet search capability'
-                });
-                
-                populateModelOptions(modelsList);
-            } else {
-                modelLoader.textContent = 'Failed to load models';
-            }
-        } catch (error) {
-            console.error('Error fetching models:', error);
-            modelLoader.textContent = 'Error loading models';
-        }
+    try {
+        const response = await fetch('https://parthsadaria-lokiai.hf.space/models', {
+            method: 'GET',
+            headers: { 'Authorization': 'playground' }
+        });
+        if (response.ok) {
+            const data = await response.json();
+            modelsList = data;
+            populateModels(data);
+        } else {
+            const fallbackModels = [
+                { id: "gpt-4o", object: "model" },
+                { id: "gpt-3.5-turbo", object: "model" },
+                { id: "claude-3-5-sonnet", object: "model" },
+                { id: "claude-3-haiku", object: "model" },
+                { id: "llama-3.1-70b", object: "model" }
+            ];
+            populateModels(fallbackModels);
+        }
+    } catch (error) {
+        console.error('Error fetching models:', error);
+        const fallbackModels = [
+            { id: "gpt-4o", object: "model" },
+            { id: "gpt-3.5-turbo", object: "model" },
+            { id: "claude-3-5-sonnet", object: "model" },
+            { id: "claude-3-haiku", object: "model" },
+            { id: "llama-3.1-70b", object: "model" }
+        ];
+        populateModels(fallbackModels);
     }
-    
-    // Populate model dropdown
-    function populateModelOptions(models) {
-        modelOptions.innerHTML = '';
-        
-        if (models.length === 0) {
-            const noModels = document.createElement('div');
-            noModels.className = 'py-2 px-4 text-sm text-gray-600 dark:text-gray-400';
-            noModels.textContent = 'No models available';
-            modelOptions.appendChild(noModels);
-            return;
-        }
-        
-        models.forEach(model => {
+}
+
+function populateModels(models) {
+    // Group models by provider
+    const providers = {};
+    models.forEach(model => {
+        const modelName = model.id;
+        let provider = 'Other';
+        if (modelName.includes('gpt')) provider = 'OpenAI';
+        else if (modelName.includes('claude')) provider = 'Anthropic';
+        else if (modelName.includes('llama')) provider = 'Meta';
+        else if (modelName.includes('gemini')) provider = 'Google';
+        else if (modelName.includes('mistral')) provider = 'Mistral';
+        else if (modelName.includes('yi')) provider = 'Yi';
+        if (!providers[provider]) providers[provider] = [];
+        providers[provider].push(model);
+    });
+
+    // Clear existing options
+    modelOptions.innerHTML = '';
+
+    // Add special option for web search
+    const searchOption = document.createElement('div');
+    searchOption.className = 'px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer';
+    searchOption.textContent = 'SearchGPT (Web-access)';
+    searchOption.dataset.value = 'searchgpt';
+    modelOptions.appendChild(searchOption);
+
+    // Add a separator
+    const separator = document.createElement('div');
+    separator.className = 'px-4 py-1 text-xs font-semibold text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400';
+    separator.textContent = 'AI Models';
+    modelOptions.appendChild(separator);
+
+    // Create and append provider groups and their models
+    Object.keys(providers).sort().forEach(provider => {
+        const providerGroup = document.createElement('div');
+        providerGroup.className = 'px-4 py-1 text-xs font-semibold text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400';
+        providerGroup.textContent = provider;
+        modelOptions.appendChild(providerGroup);
+        providers[provider].sort((a, b) => a.id.localeCompare(b.id)).forEach(model => {
             const option = document.createElement('div');
-            option.className = 'py-2 px-4 text-sm hover:bg-light-input dark:hover:bg-dark-input cursor-pointer';
-            option.dataset.modelId = model.id;
-            
-            const modelName = document.createElement('div');
-            modelName.className = 'font-medium text-gray-800 dark:text-gray-200';
-            modelName.textContent = model.displayName || model.id;
-            
-            const modelDesc = document.createElement('div');
-            modelDesc.className = 'text-xs text-gray-500 dark:text-gray-400';
-            modelDesc.textContent = model.description || '';
-            
-            option.appendChild(modelName);
-            option.appendChild(modelDesc);
-            
-            option.addEventListener('click', function() {
-                selectModel(model);
-            });
-            
+            option.className = 'px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer';
+            option.textContent = model.id;
+            option.dataset.value = model.id;
             modelOptions.appendChild(option);
         });
-        
-        // Default to first model if available
-        if (models.length > 0 && !selectedModel) {
-            selectModel(models[0]);
+    });
+
+    // Set default model if none selected
+    if (!selectedModel && models.length > 0) {
+        const preferredModels = ['gpt-4o', 'gpt-4', 'claude-3-5-sonnet', 'gpt-3.5-turbo'];
+        for (const preferred of preferredModels) {
+            const match = models.find(m => m.id.includes(preferred));
+            if (match) {
+                selectedModel = match.id;
+                modelSelectDisplay.textContent = selectedModel;
+                break;
+            }
+        }
+        if (!selectedModel) {
+            selectedModel = models[0].id;
+            modelSelectDisplay.textContent = selectedModel;
         }
     }
+
+    // Add click event listeners
+    document.querySelectorAll('#modelOptions > div').forEach(option => {
+        if (option.dataset.value) {
+            option.addEventListener('click', function() {
+                selectedModel = this.dataset.value;
+                modelSelectDisplay.textContent = this.textContent;
+                modelOptions.classList.add('hidden');
+            });
+        }
+    });
+}
+
     
     // Select a model
     function selectModel(model) {