Add a button to use the local image generation model that is loaded on the website to generate an image. The prompt for the image is of the most recent message in the users chat with the AI. The image will be displayed in chat as the most recent message.

index.html

@@ -153,8 +153,11 @@
                             <button class="p-3 rounded-full bg-surface-light hover:bg-gray-700 transition" title="Export Chat">
                                 <i data-feather="download" class="w-5 h-5"></i>
                             </button>
+                            <button id="generateImageButton" class="p-3 rounded-full bg-surface-light hover:bg-gray-700 transition" title="Generate Image from Last Message">
+                                <i data-feather="image" class="w-5 h-5"></i>
+                            </button>
                         </div>
-                    </div>
+</div>
                 </div>
 
                 <!-- Chat Messages Container -->
@@ -241,6 +244,12 @@
     <script src="components/image-generator.js"></script>
     <script src="components/local-model.js"></script>
     <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Initialize image generation button
+        document.getElementById('generateImageButton').addEventListener('click', generateImageFromLastMessage);
+    </script>
 <script>
         feather.replace();
         

script.js

@@ -15,18 +15,22 @@ document.addEventListener('DOMContentLoaded', function() {
     const stopButton = document.getElementById('stopButton');
     const sendButton = document.getElementById('sendButton');
     const generateImageBtn = document.getElementById('generateImageBtn');
+    const generateImageButton = document.getElementById('generateImageButton');
     const aiStatus = document.getElementById('aiStatus');
     const apiStatus = document.getElementById('apiStatus');
-    // Character counter
+// Character counter
     messageInput.addEventListener('input', function() {
         charCount.textContent = `${this.value.length}/1000`;
     });
-
     // Image generation button
     if (generateImageBtn) {
         generateImageBtn.addEventListener('click', generateSceneImage);
     }
-    // Send message
+    // New image generation from last message
+    if (generateImageButton) {
+        generateImageButton.addEventListener('click', generateImageFromLastMessage);
+    }
+// Send message
     chatForm.addEventListener('submit', async function(e) {
         e.preventDefault();
         if (isGenerating) {
@@ -92,7 +96,6 @@ document.addEventListener('DOMContentLoaded', function() {
             updateAPIStatus(true, 'Using fallback');
         }
     }
-
     // Generate scene image using local model
     async function generateSceneImage() {
         if (!LOCAL_IMAGE_MODEL) {
@@ -132,7 +135,104 @@ document.addEventListener('DOMContentLoaded', function() {
             generator.shadowRoot.querySelector('.generate-btn').click();
         }, 500);
     }
-    // Local AI response generation (simulated)
+
+    // Generate image from the most recent message in chat
+    async function generateImageFromLastMessage() {
+        if (!LOCAL_IMAGE_MODEL) {
+            addMessage('system', 'Local image model is not enabled.');
+            return;
+        }
+
+        // Get the most recent message content
+        const messages = chatMessages.querySelectorAll('.message');
+        let lastMessage = '';
+        
+        // Look for the last user or AI message
+        for (let i = messages.length - 1; i >= 0; i--) {
+            const msg = messages[i];
+            const p = msg.querySelector('p');
+            if (p && !p.textContent.includes('Generating an image')) {
+                lastMessage = p.textContent;
+                const isUser = msg.classList.contains('user');
+                // Use appropriate sender
+                const sender = isUser ? 'You' : document.getElementById('characterName').textContent;
+                break;
+            }
+        }
+
+        if (!lastMessage.trim()) {
+            lastMessage = "A mysterious scene from the conversation";
+        }
+
+        // Add a message indicating image generation is starting
+        const thinkingMsg = addMessage('user', `*Generating image for: "${lastMessage.substring(0, 50)}..."*`);
+        
+        // Show typing indicator
+        showTyping();
+        setGenerating(true);
+        updateAPIStatus(true, 'Generating image...');
+
+        try {
+            // Simulate local image generation (using static.photos based on prompt)
+            const prompt = lastMessage.substring(0, 100);
+            const categories = ['fantasy', 'nature', 'abstract', 'cityscape', 'technology', 'people'];
+            const category = categories[Math.floor(Math.random() * categories.length)];
+            const seed = Math.floor(Math.random() * 1000);
+            const imageUrl = `https://static.photos/${category}/400x300/${seed}`;
+            
+            // Simulate delay
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            
+            removeTyping();
+            setGenerating(false);
+            
+            // Remove the thinking message
+            if (thinkingMsg && thinkingMsg.parentNode) {
+                thinkingMsg.parentNode.remove();
+            }
+            
+            // Display the generated image in chat
+            displayGeneratedImage(imageUrl, prompt);
+            updateAPIStatus(true, 'Image generated');
+        } catch (error) {
+            removeTyping();
+            setGenerating(false);
+            addMessage('system', `Image generation failed: ${error.message}`);
+            updateAPIStatus(false, 'Image failed');
+        }
+    }
+
+    // Display generated image in chat
+    function displayGeneratedImage(imageUrl, prompt) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message ai animate-message-slide mb-6';
+        
+        const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        const avatar = document.querySelector('.bg-surface.rounded-xl.p-5 img')?.src || 'https://static.photos/people/48x48/5';
+        const characterName = document.getElementById('characterName').textContent;
+        
+        messageDiv.innerHTML = `
+            <div class="flex gap-4">
+                <img src="${avatar}" class="w-12 h-12 rounded-full flex-shrink-0">
+                <div>
+                    <div class="font-medium text-primary mb-1">${characterName}</div>
+                    <div class="bg-surface-light rounded-2xl rounded-tl-none p-4">
+                        <p>Here's an image inspired by our conversation:</p>
+                        <div class="image-gen-preview mt-3">
+                            <img src="${imageUrl}" alt="Generated image" class="rounded-lg" style="max-width: 100%; height: auto;">
+                        </div>
+                        <p class="text-sm text-gray-400 mt-2">Prompt: "${prompt.substring(0, 80)}..."</p>
+                    </div>
+                    <div class="text-xs text-gray-500 mt-2">${time}</div>
+                </div>
+            </div>
+        `;
+        
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        feather.replace();
+    }
+// Local AI response generation (simulated)
     async function generateLocalAIResponse(characterName, messages, length) {
         return new Promise((resolve) => {
             // Simulate AI thinking time

style.css

@@ -114,17 +114,22 @@
         align-items: flex-end;
     }
 }
-
 /* Image generation preview */
 .image-gen-preview {
     margin-top: 1rem;
     border-radius: 0.75rem;
     overflow: hidden;
     border: 2px solid #4b5563;
+    max-width: 400px;
 }
 
 .image-gen-preview img {
     width: 100%;
     height: auto;
     display: block;
+    transition: transform 0.3s ease;
+}
+
+.image-gen-preview img:hover {
+    transform: scale(1.02);
 }