Update uncloseai.js

uncloseai.js

@@ -136,6 +136,64 @@ async function createModelSelectionDropdown() {
   }
 }
 
+// Function to add the Refresh Models button
+function addRefreshModelsButton() {
+  // Create a container for the button
+  const container = document.createElement('div');
+  container.id = 'refresh-models-container';
+  
+  // Position it near the model selection dropdown
+  const userInput = document.getElementById("user-input");
+  if (userInput && userInput.parentNode) {
+    userInput.parentNode.parentNode.insertBefore(container, userInput.parentNode);
+  }
+  
+  // Create a button element (if you're not using React)
+  const refreshButton = document.createElement('button');
+  refreshButton.textContent = 'Refresh Models';
+  refreshButton.style.margin = '10px';
+  refreshButton.onclick = async function() {
+    refreshButton.textContent = 'Refreshing...';
+    refreshButton.disabled = true;
+    
+    try {
+      // Clear the model registry cache
+      localStorage.removeItem('modelRegistryCache');
+      localStorage.removeItem('vllmEndpointsHash');
+      
+      // Fetch models again
+      await fetchModelsFromEndpoints();
+      
+      // Update the dropdown
+      const dropdown = document.getElementById('model-selection');
+      if (dropdown) {
+        // Clear existing options
+        dropdown.innerHTML = '';
+        
+        // Get models from registry
+        const models = Object.keys(modelRegistry).map(id => ({ id }));
+        
+        // Add options
+        models.forEach((model) => {
+          const option = document.createElement('option');
+          option.value = model.id;
+          option.textContent = model.id;
+          dropdown.appendChild(option);
+        });
+      }
+      
+      alert('Models refreshed successfully!');
+    } catch (error) {
+      console.error('Error refreshing models:', error);
+      alert('Failed to refresh models. Please try again.');
+    } finally {
+      refreshButton.textContent = 'Refresh Models';
+      refreshButton.disabled = false;
+    }
+  };
+  container.appendChild(refreshButton);
+}
+
 // Utility to determine which endpoint to use based on the selected model
 function getSelectedModelEndpoint() {
   const dropdown = document.getElementById('model-selection');
@@ -946,7 +1004,8 @@ function getSelectedModel() {
 // Initialize on page load
 window.onload = () => {
   initializeChatInterface();
-  createModelSelectionDropdown(); // Create the model selection dropdown on load, directly above the chat input box.
+  createModelSelectionDropdown();
+  addRefreshModelsButton();
 };
 
 // Export functions to global scope