Update index.html

index.html

@@ -22,9 +22,75 @@
         <input type="submit" value="Search">
     </form>
 
+    <div class="form-group">
+        <label for="chatModels">Chat Models:</label>
+        <select id="chatModels" multiple>
+            <option value="claude-3-5-sonnet">claude-3-5-sonnet</option>
+            <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
+            <option value="gpt-4o">GPT-4o</option>
+        </select>
+    </div>
+  
     <div id="results"></div>
 
     <script>
+        let apiKey = '';
+        let apiUrl = '';
+      
+        ////////////////////////////////////////////////
+        // Populate the model list on api key change
+        ////////////////////////////////////////////////
+        
+        async function fetchLLMModels() {
+        	try {
+        		const apiBaseUrl = document.getElementById('apiBaseUrl').value;
+        		const apiKey = document.getElementById('apiKey').value;
+        		
+        		const response = await fetch(
+        			apiBaseUrl + 'models',
+        			{
+        				method: 'GET',
+        				headers: {
+        					'Authorization': `Bearer ${apiKey}`
+        				}
+        			}
+        		);
+        		if (!response.ok) {
+        			throw new Error(`HTTP error! Status: ${response.status}`);
+        		}
+        		const data = await response.json();
+        		return data.data.map(model => model.id); 
+        	} catch (error) {
+        		console.error('Error fetching LLM models:', error);
+        		return ['Error fetching model'];
+        	}
+        }
+        
+        async function populateLLMModels() {
+        	const chatModels = document.getElementById('chatModels');
+            // Set the multiple attribute
+            chatModels.setAttribute('multiple', '');
+        	// Clear existing options
+        	chatModels.innerHTML = '';
+        
+        	const models = await fetchLLMModels();
+        	        
+        	// Sort options alphabetically
+        	const sortedOptions = Array.from(models).sort((a, b) => a.localeCompare(b));
+        	console.log(sortedOptions);
+        	
+        	// Add new options
+        	sortedOptions.forEach(model => {
+        		const option = document.createElement('option');
+        		option.value = model;
+        		option.text = model;
+        		chatModels.add(option);
+        	});
+        	// Set the size of the select element to match the number of options
+        	chatModels.size = chatModels.options.length / 4;
+        }
+
+      
         document.getElementById("embed-form").addEventListener("submit", function(event) {
             event.preventDefault();
             const text = document.getElementById("embed-input").value;