Update static/index.html

static/index.html

@@ -58,6 +58,13 @@
         <div style="margin-bottom: 20px;">
             <label for="apiKey" style="display: block; margin-bottom: 5px; font-weight: bold;">Clé API :</label>
             <input type="password" id="apiKey" placeholder="Entrez votre clé API..." style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
+            <div style="margin-bottom: 20px;">
+                <label for="defaultModel" style="display: block; margin-bottom: 5px; font-weight: bold;">Modèle par défaut :</label>
+                <select id="defaultModel" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
+                    <option value="">Chargement des modèles...</option>
+                </select>
+                <small style="color: #666; font-size: 12px;">Modèle utilisé si non spécifié par Python.</small>
+            </div>
             <small style="color: #666; font-size: 12px;">La clé est stockée uniquement dans votre navigateur pour cette session.</small>
         </div>
         
@@ -120,7 +127,74 @@
                 throw error;
             }
         }
+        // Fonction pour récupérer la liste des modèles
+        async function loadAvailableModels() {
+            const apiKey = document.getElementById('apiKey').value.trim();
+            const modelSelect = document.getElementById('defaultModel');
+            
+            if (!apiKey) {
+                modelSelect.innerHTML = '<option value="gemini-2.5-pro">gemini-2.5-pro (défaut)</option>';
+                addLog('Saisissez votre clé API pour charger les modèles disponibles');
+                return;
+            }
+            
+            try {
+                addLog('Chargement des modèles disponibles...');
+                const response = await fetch('https://llm.synapse.thalescloud.io/v1/models', {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': `Bearer ${apiKey}`
+                    }
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`Erreur API: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Vider le select et ajouter les options
+                modelSelect.innerHTML = '';
+                
+                if (data.data && Array.isArray(data.data)) {
+                    data.data.forEach(model => {
+                        const option = document.createElement('option');
+                        option.value = model.id;
+                        option.textContent = model.id;
+                        if (model.id === 'gemini-2.5-pro') {
+                            option.selected = true; // Sélectionner par défaut
+                        }
+                        modelSelect.appendChild(option);
+                    });
+                    addLog(`${data.data.length} modèles chargés`);
+                } else {
+                    // Fallback si la structure de réponse est différente
+                    modelSelect.innerHTML = '<option value="gemini-2.5-pro" selected>gemini-2.5-pro (défaut)</option>';
+                }
+                
+            } catch (error) {
+                console.error('Erreur lors du chargement des modèles:', error);
+                addLog(`Erreur chargement modèles: ${error.message}`);
+                // Ajouter une option par défaut en cas d'erreur
+                modelSelect.innerHTML = '<option value="gemini-2.5-pro" selected>gemini-2.5-pro (défaut)</option>';
+            }
+        }
+        
+        // Écouter les changements sur le champ API Key pour recharger les modèles
+        document.getElementById('apiKey').addEventListener('input', debounce(loadAvailableModels, 1000));
         
+        // Fonction debounce pour éviter trop d'appels
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
         function connect() {
             // Adapte le protocole (ws ou wss pour le sécurisé)
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -135,13 +209,27 @@
             
             ws.onmessage = async function(event) {
                 try {
-                    const messageData = JSON.parse(event.data);
-                    const prompt = messageData.prompt;
-                    const model = messageData.model;
+                    let prompt, model;
                     
-                    console.log(`Message reçu - Prompt: "${prompt}", Modèle: "${model}"`);
-                    addLog(`Message reçu - Prompt: "${prompt}", Modèle: "${model}"`);
+                    // Essayer de parser comme JSON (nouveau format)
+                    try {
+                        const messageData = JSON.parse(event.data);
+                        prompt = messageData.prompt;
+                        model = messageData.model;
+                    } catch (parseError) {
+                        // Si ce n'est pas du JSON, traiter comme ancien format (string simple)
+                        prompt = event.data;
+                        model = null;
+                    }
                     
+                    // Si aucun modèle spécifié, utiliser celui sélectionné dans l'UI
+                    if (!model) {
+                        model = document.getElementById('defaultModel').value || 'gemini-2.5-pro';
+                    }
+                    
+                    console.log(`Message reçu - Prompt: "${prompt}", Modèle: "${model}"`);
+                    addLog(`Message reçu - Prompt: "${prompt}", Modèle: "${model}"`); 
+                  
                     const responsePhrase = await callOpenAI(prompt, model);
                     
                     // Vérifier à nouveau que la connexion est ouverte
@@ -152,9 +240,9 @@
                         addLog('Erreur: WebSocket fermé pendant l\'appel API');
                     }
                     
-                } catch (parseError) {
-                    console.error('Erreur parsing JSON:', parseError);
-                    addLog(`Erreur parsing message: ${event.data}`);
+                } catch (error) {
+                    console.error('Erreur traitement message:', error);
+                    addLog(`Erreur traitement message: ${error.message}`);
                 }
             };