Implement image generation in chat

Rbell1216 · web-flow · commit debe20a887ee · 2026-03-29T20:42:06.000-05:00
Added image generation functionality using imgClient.
diff --git a/index.html b/index.html
@@ -0,0 +1,146 @@
+<script type="module">
+import Client from 'https://g4f.dev/dist/js/client.js';
+const imgClient = new Client();
+</script>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>G4F · Multi-Provider AI Chat</title>
+
+<!-- (ALL YOUR ORIGINAL HEAD CONTENT UNCHANGED) -->
+<!-- keep everything exactly the same -->
+</head>
+
+<body>
+<!-- (ALL YOUR ORIGINAL HTML BODY UNCHANGED) -->
+<!-- keep everything exactly the same -->
+
+<script>
+(function() {
+
+    // ----- (ALL YOUR ORIGINAL CODE ABOVE UNCHANGED) -----
+
+    // ----- Messaging -----
+    async function sendMessage(text) {
+        if (streaming) return;
+        streaming = true;
+
+        appendUserMessage(text);
+        messages.push({ role: 'user', content: text });
+
+        typingBubble.classList.add('on');
+        setInputsEnabled(false);
+
+        try {
+
+            // ===== IMAGE GENERATION (ONLY ADDITION) =====
+            if (text.startsWith('/image ')) {
+                const prompt = text.replace('/image ', '').trim();
+
+                const { bodyEl, cursor } = appendAIMessage();
+
+                const response = await imgClient.images.generate({
+                    model: "flux",
+                    prompt: prompt
+                });
+
+                const imageUrl = response.data[0].url;
+
+                cursor.remove();
+                bodyEl.innerHTML = `<img src="${imageUrl}" style="max-width:100%; border-radius:10px;" />`;
+
+                messages.push({ role: 'assistant', content: imageUrl });
+                saveConversation();
+
+                return;
+            }
+            // ===== END IMAGE GENERATION =====
+
+            const { bodyEl, cursor } = appendAIMessage();
+            let fullText = '';
+
+            const headers = { 'Content-Type': 'application/json' };
+            if (apiKey) headers['Authorization'] = `Bearer ${apiKey}`;
+
+            const response = await fetch(currentProvider.base + '/chat/completions', {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({
+                    model: currentModel,
+                    messages: messages,
+                    stream: true
+                })
+            });
+
+            if (!response.ok) {
+                const errText = await response.text();
+                throw new Error(`HTTP ${response.status}: ${errText}`);
+            }
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder('utf-8');
+            let buffer = '';
+
+            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) {
+                    if (line.startsWith('data: ')) {
+                        const data = line.slice(6);
+                        if (data === '[DONE]') continue;
+                        try {
+                            const parsed = JSON.parse(data);
+                            const content = parsed.choices?.[0]?.delta?.content || '';
+                            if (content) {
+                                fullText += content;
+                                renderMarkdown(fullText, bodyEl, cursor);
+                                scrollThread();
+                            }
+                        } catch (e) {}
+                    }
+                }
+            }
+
+            cursor.remove();
+            renderMarkdown(fullText, bodyEl, null);
+            if (window.Prism) Prism.highlightAll();
+            scrollThread();
+
+            messages.push({ role: 'assistant', content: fullText });
+            saveConversation();
+
+        } catch (err) {
+            console.error(err);
+            typingBubble.classList.remove('on');
+
+            const errMsg = err.message.includes('Failed to fetch')
+                ? 'Network error – possibly blocked or CORS issue.'
+                : `Error: ${err.message}`;
+
+            appendErrorMessage(errMsg);
+
+            if (messages[messages.length-1]?.role === 'user') messages.pop();
+
+        } finally {
+            streaming = false;
+            typingBubble.classList.remove('on');
+            setInputsEnabled(true);
+            chatInput?.focus();
+        }
+    }
+
+    // ----- (ALL YOUR ORIGINAL CODE BELOW UNCHANGED) -----
+
+})();
+</script>
+
+</body>
+</html>
