add the missing modal so i can put the API key from huggingface and use models pls. it should be able to generate also from models on hugging face, video; sound & images, the MOST SOTA ever - Follow Up Deployment

index.html

@@ -241,6 +241,95 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
             </div>
         </div>
     </div>
+    
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="fixed inset-0 bg-black/80 z-50 hidden flex items-center justify-center">
+        <div class="bg-gray-900 border-2 border-cyan-700 rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div class="sticky top-0 bg-gray-900 border-b border-cyan-700 p-4 flex justify-between items-center">
+                <h3 class="text-xl text-green-400 font-bold">NEUROCOGNITIVE TERMINAL SETTINGS</h3>
+                <button onclick="document.getElementById('settingsModal').classList.add('hidden')" 
+                        class="text-cyan-400 hover:text-red-500">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            
+            <div class="p-6">
+                <div class="mb-6">
+                    <label class="block text-cyan-300 mb-2">HuggingFace API Key</label>
+                    <input type="password" id="hfApiKeyInput" 
+                           class="w-full bg-black/50 border border-cyan-700 rounded px-3 py-2 text-green-300 focus:outline-none focus:ring-1 focus:ring-cyan-500"
+                           placeholder="hf_xxxxxxxxxxxxxxxxxxxx">
+                    <p class="text-xs text-gray-500 mt-1">Get your API key from <a href="https://huggingface.co/settings/tokens" target="_blank" class="text-blue-400 hover:underline">HuggingFace settings</a></p>
+                </div>
+                
+                <div class="mb-6">
+                    <label class="block text-cyan-300 mb-2">Model Type</label>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <input type="radio" id="modelTypeText" name="modelType" value="text" checked 
+                                   class="hidden peer">
+                            <label for="modelTypeText" class="block p-3 border border-cyan-700 rounded cursor-pointer peer-checked:border-green-500 peer-checked:bg-green-900/20">
+                                <div class="flex items-center">
+                                    <i class="fas fa-font text-green-400 mr-2"></i>
+                                    <span>Text Generation</span>
+                                </div>
+                            </label>
+                        </div>
+                        <div>
+                            <input type="radio" id="modelTypeMultimodal" name="modelType" value="multimodal"
+                                   class="hidden peer">
+                            <label for="modelTypeMultimodal" class="block p-3 border border-cyan-700 rounded cursor-pointer peer-checked:border-purple-500 peer-checked:bg-purple-900/20">
+                                <div class="flex items-center">
+                                    <i class="fas fa-images text-purple-400 mr-2"></i>
+                                    <span>Multimodal</span>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                
+                <div id="textModelsSection">
+                    <label class="block text-cyan-300 mb-2">Text Model</label>
+                    <select id="textModelSelect" class="w-full bg-black/50 border border-cyan-700 rounded px-3 py-2 text-green-300 mb-4 focus:outline-none focus:ring-1 focus:ring-cyan-500">
+                        <option value="mistralai/Mixtral-8x7B-Instruct-v0.1">Mixtral 8x7B</option>
+                        <option value="meta-llama/Llama-2-70b-chat-hf">Llama 2 70B</option>
+                        <option value="google/gemma-7b-it">Gemma 7B</option>
+                        <option value="NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO">Hermes 2 Mixtral</option>
+                        <option value="mistralai/Mistral-7B-Instruct-v0.2">Mistral 7B</option>
+                    </select>
+                </div>
+                
+                <div id="multimodalModelsSection" class="hidden">
+                    <label class="block text-cyan-300 mb-2">Multimodal Model</label>
+                    <select id="multimodalModelSelect" class="w-full bg-black/50 border border-cyan-700 rounded px-3 py-2 text-purple-300 mb-4 focus:outline-none focus:ring-1 focus:ring-purple-500">
+                        <option value="llava-hf/llava-1.5-7b-hf">LLaVA 1.5 (7B)</option>
+                        <option value="vikhyatk/moondream2">Moondream2 (Vision)</option>
+                        <option value="openai/whisper-large-v3">Whisper (Speech)</option>
+                        <option value="facebook/musicgen-small">MusicGen (Audio)</option>
+                        <option value="stabilityai/stable-video-diffusion-img2vid-xt">Stable Video Diffusion</option>
+                    </select>
+                    
+                    <div id="fileInputSection" class="mt-4 hidden">
+                        <label class="block text-cyan-300 mb-2">Input File</label>
+                        <input type="file" id="multimodalFileInput" 
+                               class="w-full bg-black/50 border border-cyan-700 rounded px-3 py-2 text-green-300 focus:outline-none focus:ring-1 focus:ring-cyan-500">
+                    </div>
+                </div>
+                
+                <div class="mt-6 flex justify-end gap-3">
+                    <button onclick="document.getElementById('settingsModal').classList.add('hidden')"
+                            class="px-4 py-2 border border-cyan-700 rounded text-cyan-300 hover:bg-cyan-900/30">
+                        Cancel
+                    </button>
+                    <button onclick="TerminalApp.saveSettings()"
+                            class="px-4 py-2 bg-green-700 rounded text-white hover:bg-green-600">
+                        Save Settings
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
         // API Client
         class HuggingFaceClient {
@@ -270,7 +359,18 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
                     throw new Error(error.error || 'API request failed');
                 }
 
-                return response.json();
+                const contentType = response.headers.get('content-type');
+                if (contentType.includes('application/json')) {
+                    return response.json();
+                } else if (contentType.includes('image')) {
+                    const blob = await response.blob();
+                    return URL.createObjectURL(blob);
+                } else if (contentType.includes('audio')) {
+                    const blob = await response.blob();
+                    return URL.createObjectURL(blob);
+                } else {
+                    return response.text();
+                }
             }
         }
 
@@ -291,7 +391,23 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
                 localStorage.setItem('terminalHistory', JSON.stringify(AppState.history));
             }
 
-            static async streamResponse(responseText, prompt) {
+            static async streamResponse(response, prompt) {
+                // Handle different response types
+                let responseText;
+                if (typeof response === 'string') {
+                    responseText = response;
+                } else if (response instanceof Blob || response.startsWith('blob:')) {
+                    // Handle image/audio responses
+                    if (response.type?.includes('image') || response.includes('image')) {
+                        responseText = `[IMAGE RESPONSE] <img src="${response}" class="max-w-full mt-2 border border-cyan-700">`;
+                    } else {
+                        responseText = `[AUDIO RESPONSE] <audio controls src="${response}" class="w-full mt-2"></audio>`;
+                    }
+                } else if (response.generated_text) {
+                    responseText = response.generated_text;
+                } else {
+                    responseText = JSON.stringify(response, null, 2);
+                }
                 const terminalOutput = document.querySelector('.terminal-scrollbar');
                 const responseDiv = document.createElement('div');
                 responseDiv.className = 'mb-4';
@@ -415,8 +531,97 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
             }
 
             static showSettings() {
-                // Implementation for settings modal
-                alert('Settings modal would appear here to configure API key and model');
+                const modal = document.getElementById('settingsModal');
+                document.getElementById('hfApiKeyInput').value = AppState.apiKey;
+                modal.classList.remove('hidden');
+                
+                // Set up model type toggle
+                document.querySelectorAll('input[name="modelType"]').forEach(radio => {
+                    radio.addEventListener('change', (e) => {
+                        if (e.target.value === 'text') {
+                            document.getElementById('textModelsSection').classList.remove('hidden');
+                            document.getElementById('multimodalModelsSection').classList.add('hidden');
+                        } else {
+                            document.getElementById('textModelsSection').classList.add('hidden');
+                            document.getElementById('multimodalModelsSection').classList.remove('hidden');
+                        }
+                    });
+                });
+                
+                // Set up file input toggle for multimodal
+                document.getElementById('multimodalModelSelect').addEventListener('change', (e) => {
+                    const fileInput = document.getElementById('fileInputSection');
+                    fileInput.classList.toggle('hidden', !e.target.value.includes('llava') && !e.target.value.includes('moondream'));
+                });
+            }
+
+            static saveSettings() {
+                AppState.apiKey = document.getElementById('hfApiKeyInput').value.trim();
+                localStorage.setItem('hfApiKey', AppState.apiKey);
+                
+                const modelType = document.querySelector('input[name="modelType"]:checked').value;
+                if (modelType === 'text') {
+                    AppState.currentModel = document.getElementById('textModelSelect').value;
+                } else {
+                    AppState.currentModel = document.getElementById('multimodalModelSelect').value;
+                }
+                
+                document.getElementById('settingsModal').classList.add('hidden');
+                document.getElementById('llmStatus').textContent = AppState.currentModel.split('/').pop();
+            }
+
+            static async executePrompt() {
+                const input = document.getElementById('promptInput');
+                const prompt = input.value.trim();
+                if (!prompt) return;
+
+                const mode = document.querySelector('select').value;
+                const fullPrompt = PROMPT_TEMPLATES[mode].replace('{query}', prompt);
+                
+                TerminalUI.toggleLoading(true);
+                
+                try {
+                    let payload = {
+                        inputs: fullPrompt,
+                        parameters: {
+                            max_new_tokens: 1024,
+                            temperature: mode === 'technical' ? 0.3 : 0.7,
+                            return_full_text: false
+                        }
+                    };
+
+                    // Handle multimodal inputs
+                    if (AppState.currentModel.includes('llava') || AppState.currentModel.includes('moondream')) {
+                        const fileInput = document.getElementById('multimodalFileInput');
+                        if (fileInput.files.length > 0) {
+                            const file = fileInput.files[0];
+                            const reader = new FileReader();
+                            
+                            await new Promise((resolve) => {
+                                reader.onload = (e) => {
+                                    payload.inputs = {
+                                        image: e.target.result.split(',')[1],
+                                        question: prompt
+                                    };
+                                    resolve();
+                                };
+                                reader.readAsDataURL(file);
+                            });
+                        }
+                    }
+
+                    const response = await HuggingFaceClient.query(payload, AppState.currentModel);
+                    const result = Array.isArray(response) ? response[0].generated_text : response.generated_text;
+                    const processedText = await TerminalUI.streamResponse(result, prompt);
+                    
+                    document.getElementById('tokenCounter').textContent = processedText.length;
+                    input.value = '';
+                } catch (error) {
+                    TerminalUI.showError(error.message);
+                    console.error('API Error:', error);
+                } finally {
+                    TerminalUI.toggleLoading(false);
+                }
             }
         }