update the code. I want user will enter their api key and then all the list from open router models will be shown and user can choose any model they want and it model will be used for chatbot conversation

index.html

@@ -72,14 +72,11 @@
                     <div>
                         <label class="block text-sm font-medium mb-1">Select Model</label>
                         <select id="modelSelect" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                            <option value="openai/gpt-3.5-turbo">GPT-3.5 Turbo</option>
-                            <option value="openai/gpt-4">GPT-4</option>
-                            <option value="anthropic/claude-2">Claude 2</option>
-                            <option value="google/palm-2-chat-bison">PaLM 2 Chat</option>
-                            <option value="meta-llama/llama-2-70b-chat">Llama 2 (70B)</option>
+                            <option value="" disabled selected>Enter API key to load models</option>
                         </select>
+                        <p class="text-xs text-gray-400 mt-1">Models will be loaded after entering API key</p>
                     </div>
-                    <div>
+<div>
                         <label class="block text-sm font-medium mb-1">Chat Theme</label>
                         <div class="flex space-x-2">
                             <button data-theme="indigo" class="theme-btn w-8 h-8 bg-indigo-600 rounded-full border-2 border-transparent focus:border-white"></button>
@@ -150,9 +147,8 @@
         const typingIndicator = document.getElementById('typingIndicator');
         const modelIndicator = document.getElementById('modelIndicator');
         const themeBtns = document.querySelectorAll('.theme-btn');
-
         // Load saved settings
-        function loadSettings() {
+        async function loadSettings() {
             const savedApiKey = localStorage.getItem('chatRouterApiKey');
             const savedModel = localStorage.getItem('chatRouterModel');
             const savedTheme = localStorage.getItem('chatRouterTheme') || 'indigo';
@@ -160,6 +156,7 @@
             if (savedApiKey) {
                 apiKeyInput.value = savedApiKey;
                 sendBtn.disabled = false;
+                await fetchModels(savedApiKey); // Load models when API key exists
             }
             if (savedModel) {
                 modelSelect.value = savedModel;
@@ -170,12 +167,69 @@
             document.body.className = `bg-gradient-to-br from-${savedTheme}-900 to-purple-900 text-white`;
         }
 
+        // Fetch available models from OpenRouter
+        async function fetchModels(apiKey) {
+            try {
+                const response = await fetch('https://openrouter.ai/api/v1/models', {
+                    headers: {
+                        'Authorization': `Bearer ${apiKey}`,
+                        'HTTP-Referer': window.location.href,
+                        'X-Title': 'ChatRouter'
+                    }
+                });
+                
+                const data = await response.json();
+                if (data.error) {
+                    addMessage('system', `Error loading models: ${data.error.message}`);
+                    return;
+                }
+
+                // Clear existing options
+                modelSelect.innerHTML = '';
+                
+                // Add default option
+                const defaultOption = document.createElement('option');
+                defaultOption.value = '';
+                defaultOption.textContent = 'Select a model';
+                defaultOption.disabled = true;
+                defaultOption.selected = true;
+                modelSelect.appendChild(defaultOption);
+
+                // Add chat models with pricing info
+                data.data
+                    .filter(model => model.description.includes('chat'))
+                    .sort((a, b) => b.top_provider.max_completion_tokens - a.top_provider.max_completion_tokens)
+                    .forEach(model => {
+                        const option = document.createElement('option');
+                        option.value = model.id;
+                        option.textContent = `${model.name} (${(model.pricing.completion / 1000).toFixed(4)}/token)`;
+                        modelSelect.appendChild(option);
+                    });
+
+            } catch (error) {
+                addMessage('system', `Error loading models: ${error.message}`);
+            }
+        }
         // Save settings
-        saveSettings.addEventListener('click', () => {
+        saveSettings.addEventListener('click', async () => {
             const apiKey = apiKeyInput.value.trim();
             const model = modelSelect.value;
             
-            if (apiKey) {
+            if (!apiKey) {
+                alert('Please enter your OpenRouter API key');
+                return;
+            }
+
+            if (!model) {
+                alert('Please select a model');
+                return;
+            }
+            
+            try {
+                // Verify API key by fetching models
+                await fetchModels(apiKey);
+                
+                // If successful, save settings
                 localStorage.setItem('chatRouterApiKey', apiKey);
                 localStorage.setItem('chatRouterModel', model);
                 sendBtn.disabled = false;
@@ -184,12 +238,19 @@
                 
                 // Add confirmation message to chat
                 addMessage('system', 'Settings saved successfully. You can now start chatting!');
-            } else {
-                alert('Please enter your OpenRouter API key');
+            } catch (error) {
+                addMessage('system', `Error verifying API key: ${error.message}`);
             }
         });
 
-        // Theme selection
+        // Load models when API key changes
+        apiKeyInput.addEventListener('blur', async () => {
+            const apiKey = apiKeyInput.value.trim();
+            if (apiKey) {
+                await fetchModels(apiKey);
+            }
+        });
+// Theme selection
         themeBtns.forEach(btn => {
             btn.addEventListener('click', () => {
                 const theme = btn.dataset.theme;