Spaces:

secutorpro
/

puter-ai-chat-studio-z7ya5

Running

App Files Files Community

secutorpro commited on Apr 18

Commit

6ca4187

verified ·

1 Parent(s): b2a71dc

🐳 18/04 - 22:02 - corrige tout

Browse files

Files changed (1) hide show

index.html +143 -28

index.html CHANGED Viewed

@@ -3,11 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Puter AI Chat Studio</title>
-    <script src="https:=======cdn.tailwindcss.com"></script>
-    <script src="https:=======unpkg.com/lucide@latest"></script>
-    <script src="https:=======cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <script>
         tailwind.config = {
@@ -171,7 +170,7 @@
             <label class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2 block">Modèle IA</label>
             <div class="relative">
                 <button id="model-dropdown-btn" onclick="toggleModelDropdown()" class="w-full flex items-center justify-between px-3 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-[#12121c] hover:border-brand-400 dark:hover:border-brand-500 transition-all text-sm">
-                    <span id="selected-model-display" class="truncate">z-ai/glm-5.1</span>
                     <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400 flex-shrink-0 ml-2"></i>
                 </button>
                 <div id="model-dropdown" class="hidden absolute top-full left-0 right-0 mt-2 bg-white dark:bg-[#12121c] border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl z-50 max-h-64 overflow-hidden flex flex-col">
@@ -200,7 +199,6 @@
         <!-- Chat History -->
         <div class="flex-1 overflow-y-auto p-3 space-y-1" id="chat-history">
-            <!-- Chat history items will be inserted here -->
         </div>
         <!-- Sidebar Footer -->
@@ -302,6 +300,7 @@
         let currentConversationId = null;
         let isGenerating = false;
         let currentAbortController = null;
         // ==================== MODELS ====================
         const MODELS = [
@@ -346,14 +345,58 @@
             { id: 'ibm-granite/granite-4.0-h-micro', name: 'Granite 4.0', provider: 'IBM' },
         ];
         // ==================== INIT ====================
         function init() {
             lucide.createIcons();
             renderChatHistory();
             renderModelList();
             updateThemeIcons();
             setupInputListener();
             if (conversations.length > 0) {
                 loadConversation(conversations[0].id);
             }
@@ -441,7 +484,7 @@
         function selectModel(modelId) {
             currentModel = modelId;
             const model = MODELS.find(m => m.id === modelId);
-            document.getElementById('selected-model-display').textContent = model ? `${model.provider}/${model.name}` : modelId;
             document.getElementById('chat-model-label').textContent = modelId;
             toggleModelDropdown();
             renderModelList();
@@ -496,7 +539,6 @@
             renderChatHistory();
             renderMessages();
             document.getElementById('user-input').focus();
-            // Close sidebar on mobile
             if (window.innerWidth < 1024) toggleSidebar();
         }
@@ -535,13 +577,11 @@
             if (!conv || conv.messages.length === 0) {
                 document.getElementById('welcome-screen').style.display = 'flex';
-                // Remove all messages except welcome
                 container.querySelectorAll('.message-bubble').forEach(el => el.remove());
                 return;
             }
             document.getElementById('welcome-screen').style.display = 'none';
-            // Clear and re-render
             container.querySelectorAll('.message-bubble').forEach(el => el.remove());
             const isDark = document.documentElement.classList.contains('dark');
@@ -656,12 +696,89 @@
             }
         }
         // ==================== SEND MESSAGE ====================
         async function sendMessage() {
             const input = document.getElementById('user-input');
             const prompt = input.value.trim();
             if (!prompt || isGenerating) return;
             isGenerating = true;
             document.getElementById('send-btn').disabled = true;
             input.value = '';
@@ -705,11 +822,7 @@
             try {
                 if (useStream) {
-                    const response = await puter.ai.chat(apiMessages, {
-                        model: currentModel,
-                        stream: true
-                    });
                     removeTypingIndicator();
                     let fullContent = '';
@@ -732,22 +845,19 @@
                     document.getElementById('messages').appendChild(msgDiv);
                     lucide.createIcons();
-                    for await (const part of response) {
-                        if (part?.text) {
-                            fullContent += part.text;
-                            updateStreamingMessage(fullContent);
-                        }
                     }
                     conv.messages.push({ role: 'assistant', content: fullContent });
                 } else {
-                    const response = await puter.ai.chat(apiMessages, {
-                        model: currentModel
-                    });
                     removeTypingIndicator();
-                    const content = typeof response === 'string' ? response : (response?.message?.content || response?.toString() || 'Aucune réponse');
                     conv.messages.push({ role: 'assistant', content });
                     addMessageToUI('assistant', content);
                 }
@@ -755,10 +865,15 @@
                 saveConversations();
             } catch (error) {
                 removeTypingIndicator();
-                const errorContent = `⚠️ Erreur : ${error.message || 'Une erreur est survenue'}`;
-                addMessageToUI('assistant', errorContent);
             } finally {
                 isGenerating = false;
                 document.getElementById('send-btn').disabled = !document.getElementById('user-input').value.trim();
             }
         }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chat Studio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <script>
         tailwind.config = {
             <label class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2 block">Modèle IA</label>
             <div class="relative">
                 <button id="model-dropdown-btn" onclick="toggleModelDropdown()" class="w-full flex items-center justify-between px-3 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-[#12121c] hover:border-brand-400 dark:hover:border-brand-500 transition-all text-sm">
+                    <span id="selected-model-display" class="truncate">Z.AI / GLM 5.1</span>
                     <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400 flex-shrink-0 ml-2"></i>
                 </button>
                 <div id="model-dropdown" class="hidden absolute top-full left-0 right-0 mt-2 bg-white dark:bg-[#12121c] border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl z-50 max-h-64 overflow-hidden flex flex-col">
         <!-- Chat History -->
         <div class="flex-1 overflow-y-auto p-3 space-y-1" id="chat-history">
         </div>
         <!-- Sidebar Footer -->
         let currentConversationId = null;
         let isGenerating = false;
         let currentAbortController = null;
+        let apiKey = localStorage.getItem('openrouter_api_key') || '';
         // ==================== MODELS ====================
         const MODELS = [
             { id: 'ibm-granite/granite-4.0-h-micro', name: 'Granite 4.0', provider: 'IBM' },
         ];
+        // ==================== API KEY ====================
+        function saveApiKey(key) {
+            apiKey = key.trim();
+            localStorage.setItem('openrouter_api_key', apiKey);
+            updateApiKeyStatus();
+        }
+        function updateApiKeyStatus() {
+            const dot = document.getElementById('api-key-dot');
+            const label = document.getElementById('api-key-label');
+            if (apiKey && apiKey.startsWith('sk-or-')) {
+                dot.className = 'w-2 h-2 rounded-full bg-green-400';
+                label.textContent = 'Configurée';
+                label.className = 'text-green-600 dark:text-green-400';
+            } else if (apiKey) {
+                dot.className = 'w-2 h-2 rounded-full bg-yellow-400';
+                label.textContent = 'Format invalide';
+                label.className = 'text-yellow-600 dark:text-yellow-400';
+            } else {
+                dot.className = 'w-2 h-2 rounded-full bg-red-400';
+                label.textContent = 'Non configurée';
+                label.className = 'text-gray-500 dark:text-gray-400';
+            }
+        }
+        function toggleApiKeyVisibility() {
+            const input = document.getElementById('api-key-input');
+            const eyeIcon = document.getElementById('api-key-eye');
+            if (input.type === 'password') {
+                input.type = 'text';
+                eyeIcon.setAttribute('data-lucide', 'eye-off');
+            } else {
+                input.type = 'password';
+                eyeIcon.setAttribute('data-lucide', 'eye');
+            }
+            lucide.createIcons();
+        }
         // ==================== INIT ====================
         function init() {
             lucide.createIcons();
             renderChatHistory();
             renderModelList();
             updateThemeIcons();
+            updateApiKeyStatus();
             setupInputListener();
+            // Load saved API key
+            if (apiKey) {
+                document.getElementById('api-key-input').value = apiKey;
+            }
             if (conversations.length > 0) {
                 loadConversation(conversations[0].id);
             }
         function selectModel(modelId) {
             currentModel = modelId;
             const model = MODELS.find(m => m.id === modelId);
+            document.getElementById('selected-model-display').textContent = model ? `${model.provider} / ${model.name}` : modelId;
             document.getElementById('chat-model-label').textContent = modelId;
             toggleModelDropdown();
             renderModelList();
             renderChatHistory();
             renderMessages();
             document.getElementById('user-input').focus();
             if (window.innerWidth < 1024) toggleSidebar();
         }
             if (!conv || conv.messages.length === 0) {
                 document.getElementById('welcome-screen').style.display = 'flex';
                 container.querySelectorAll('.message-bubble').forEach(el => el.remove());
                 return;
             }
             document.getElementById('welcome-screen').style.display = 'none';
             container.querySelectorAll('.message-bubble').forEach(el => el.remove());
             const isDark = document.documentElement.classList.contains('dark');
             }
         }
+        // ==================== OPENROUTER API ====================
+        async function callOpenRouter(messages, model, stream) {
+            if (!apiKey) {
+                throw new Error('Clé API non configurée. Ajoutez votre clé OpenRouter dans la barre latérale.');
+            }
+            const url = 'https://openrouter.ai/api/v1/chat/completions';
+            const options = {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${apiKey}`,
+                    'Content-Type': 'application/json',
+                    'HTTP-Referer': window.location.href,
+                    'X-Title': 'AI Chat Studio'
+                },
+                body: JSON.stringify({
+                    model: model,
+                    messages: messages,
+                    stream: stream
+                })
+            };
+            if (stream) {
+                currentAbortController = new AbortController();
+                options.signal = currentAbortController.signal;
+            }
+            const response = await fetch(url, options);
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                const errorMessage = errorData.error?.message || `Erreur HTTP ${response.status}`;
+                throw new Error(errorMessage);
+            }
+            return response;
+        }
+        function parseSSEStream(response) {
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            return {
+                async *[Symbol.asyncIterator]() {
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done) break;
+                        buffer += decoder.decode(value, { stream: true });
+                        const lines = buffer.split('\n');
+                        buffer = lines.pop() || '';
+                        for (const line of lines) {
+                            const trimmed = line.trim();
+                            if (!trimmed || !trimmed.startsWith('data: ')) continue;
+                            const data = trimmed.slice(6);
+                            if (data === '[DONE]') return;
+                            try {
+                                const parsed = JSON.parse(data);
+                                const content = parsed.choices?.[0]?.delta?.content;
+                                if (content) yield content;
+                            } catch (e) {
+                                // Skip malformed JSON chunks
+                            }
+                        }
+                    }
+                }
+            };
+        }
         // ==================== SEND MESSAGE ====================
         async function sendMessage() {
             const input = document.getElementById('user-input');
             const prompt = input.value.trim();
             if (!prompt || isGenerating) return;
+            if (!apiKey) {
+                addMessageToUI('assistant', '⚠️ **Clé API non configurée.** Ajoutez votre clé OpenRouter dans la barre latérale pour commencer.');
+                return;
+            }
             isGenerating = true;
             document.getElementById('send-btn').disabled = true;
             input.value = '';
             try {
                 if (useStream) {
+                    const response = await callOpenRouter(apiMessages, currentModel, true);
                     removeTypingIndicator();
                     let fullContent = '';
                     document.getElementById('messages').appendChild(msgDiv);
                     lucide.createIcons();
+                    const stream = parseSSEStream(response);
+                    for await (const chunk of stream) {
+                        fullContent += chunk;
+                        updateStreamingMessage(fullContent);
                     }
                     conv.messages.push({ role: 'assistant', content: fullContent });
                 } else {
+                    const response = await callOpenRouter(apiMessages, currentModel, false);
+                    const data = await response.json();
                     removeTypingIndicator();
+                    const content = data.choices?.[0]?.message?.content || 'Aucune réponse reçue.';
                     conv.messages.push({ role: 'assistant', content });
                     addMessageToUI('assistant', content);
                 }
                 saveConversations();
             } catch (error) {
                 removeTypingIndicator();
+                if (error.name === 'AbortError') {
+                    // User cancelled, don't show error
+                } else {
+                    const errorContent = `⚠️ **Erreur :** ${error.message || 'Une erreur est survenue lors de la communication avec l\'API.'}`;
+                    addMessageToUI('assistant', errorContent);
+                }
             } finally {
                 isGenerating = false;
+                currentAbortController = null;
                 document.getElementById('send-btn').disabled = !document.getElementById('user-input').value.trim();
             }
         }