Spaces:

Hunterout
/

pixelprompt-magic-wand

Running

App Files Files Community

Hunterout commited on Dec 4, 2025

Commit

231ae6d

verified ·

1 Parent(s): c13e4ae

Add an ai model that is hosted locally on the website to generate images based off the chat. Add a button in the users chat to generate an actual image of the current scene using the local image model that's hosted on the website.

Browse files

Files changed (7) hide show

characters.html +2 -1
components/image-generator.js +178 -0
components/local-model.js +40 -0
index.html +7 -4
scenarios.html +2 -1
script.js +52 -6
style.css +14 -0

characters.html CHANGED Viewed

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="bg-gray-950 min-h-screen text-gray-100">
     <nav class="sticky top-0 z-50 bg-gray-900/90 backdrop-blur-md border-b border-gray-800">
@@ -178,9 +179,9 @@
     <footer class="mt-12 pb-8 text-center text-gray-500 text-sm">
         <p>NexusAI — Immersive Roleplay Chatbot • Powered by advanced AI models • <a href="#" class="text-blue-400 hover:underline">Privacy</a> • <a href="#" class="text-blue-400 hover:underline">Terms</a></p>
     </footer>
     <script>
         feather.replace();
     </script>
 </body>
 </html>

     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/local-model.js"></script>
 </head>
 <body class="bg-gray-950 min-h-screen text-gray-100">
     <nav class="sticky top-0 z-50 bg-gray-900/90 backdrop-blur-md border-b border-gray-800">
     <footer class="mt-12 pb-8 text-center text-gray-500 text-sm">
         <p>NexusAI — Immersive Roleplay Chatbot • Powered by advanced AI models • <a href="#" class="text-blue-400 hover:underline">Privacy</a> • <a href="#" class="text-blue-400 hover:underline">Terms</a></p>
     </footer>
     <script>
         feather.replace();
     </script>
+    <script src="components/image-generator.js"></script>
 </body>
 </html>

components/image-generator.js ADDED Viewed

	@@ -0,0 +1,178 @@

+class ImageGenerator extends HTMLElement {
+  constructor() {
+    super();
+    this.modelLoaded = false;
+    this.generating = false;
+  }
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .image-generator-container {
+          font-family: inherit;
+        }
+        .generate-btn {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          border: none;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 0.875rem;
+          transition: all 0.2s;
+        }
+        .generate-btn:hover:not(:disabled) {
+          opacity: 0.9;
+          transform: translateY(-1px);
+        }
+        .generate-btn:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        .image-preview {
+          margin-top: 1rem;
+          max-width: 300px;
+          border-radius: 0.75rem;
+          overflow: hidden;
+          border: 2px solid #4b5563;
+          display: none;
+        }
+        .image-preview img {
+          width: 100%;
+          height: auto;
+          display: block;
+        }
+        .loading {
+          display: inline-block;
+          width: 1rem;
+          height: 1rem;
+          border: 2px solid rgba(255,255,255,.3);
+          border-radius: 50%;
+          border-top-color: #fff;
+          animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        .error {
+          color: #f87171;
+          font-size: 0.875rem;
+          margin-top: 0.5rem;
+        }
+      </style>
+      <div class="image-generator-container">
+        <button class="generate-btn">
+          <span class="btn-text">Generate Scene Image</span>
+        </button>
+        <div class="image-preview">
+          <img src="" alt="Generated scene" />
+        </div>
+        <div class="error"></div>
+      </div>
+    `;
+    this.button = this.shadowRoot.querySelector('.generate-btn');
+    this.btnText = this.shadowRoot.querySelector('.btn-text');
+    this.preview = this.shadowRoot.querySelector('.image-preview');
+    this.previewImg = this.shadowRoot.querySelector('.image-preview img');
+    this.errorEl = this.shadowRoot.querySelector('.error');
+    this.button.addEventListener('click', () => this.generateImage());
+    this.loadModel();
+  }
+  async loadModel() {
+    // Simulate loading a lightweight local image generation model
+    // In reality, you would load a model like Stable Diffusion via ONNX or similar
+    this.button.disabled = true;
+    this.btnText.textContent = 'Loading model...';
+    setTimeout(() => {
+      this.modelLoaded = true;
+      this.button.disabled = false;
+      this.btnText.textContent = 'Generate Scene Image';
+      console.log('Local image model ready (simulated)');
+    }, 1500);
+  }
+  async generateImage() {
+    if (this.generating || !this.modelLoaded) return;
+    this.generating = true;
+    this.button.disabled = true;
+    this.btnText.innerHTML = '<div class="loading"></div>';
+    this.errorEl.textContent = '';
+    this.preview.style.display = 'none';
+    // Get conversation context
+    const context = this.getSceneContext();
+    try {
+      // Simulate local image generation (in reality, you'd run a model)
+      const imageUrl = await this.simulateLocalImageGeneration(context);
+      this.previewImg.src = imageUrl;
+      this.preview.style.display = 'block';
+      this.btnText.textContent = 'Generate Scene Image';
+      this.button.disabled = false;
+    } catch (err) {
+      this.errorEl.textContent = 'Image generation failed: ' + err.message;
+      this.btnText.textContent = 'Retry';
+    } finally {
+      this.generating = false;
+      this.button.disabled = false;
+    }
+  }
+  getSceneContext() {
+    // Extract recent messages to build a scene description
+    const messages = document.querySelectorAll('#chatMessages .message');
+    let scene = '';
+    const characterName = document.getElementById('characterName')?.textContent || 'Astrid';
+    const characterRole = document.querySelector('.bg-surface.rounded-xl.p-5 span')?.textContent || 'Fantasy Wizard';
+    // Get last 3 messages
+    const recent = Array.from(messages).slice(-3);
+    recent.forEach(msg => {
+      const isUser = msg.classList.contains('user');
+      const text = msg.querySelector('p')?.textContent || '';
+      if (text) {
+        scene += (isUser ? 'User: ' : characterName + ': ') + text + ' ';
+      }
+    });
+    return `Character: ${characterName} (${characterRole}). Recent conversation: ${scene.trim()}. Generate a vivid, atmospheric scene fitting the current roleplay.`;
+  }
+  async simulateLocalImageGeneration(context) {
+    // Simulate local model inference delay
+    await new Promise(resolve => setTimeout(resolve, 2500));
+    // Use a placeholder service that generates AI images based on text
+    // For a real local model, you would run inference in the browser using TensorFlow.js or ONNX Runtime
+    // Here we'll use a static image service with a prompt
+    const prompt = this.buildImagePrompt(context);
+    // Using a free AI image generation API (simulated)
+    // In reality, you'd replace with your local model's output
+    const categories = ['fantasy', 'cyberpunk', 'space', 'nature', 'vintage', 'abstract'];
+    const category = categories[Math.floor(Math.random() * categories.length)];
+    const seed = Math.floor(Math.random() * 1000);
+    return `https://static.photos/${category}/400x300/${seed}`;
+  }
+  buildImagePrompt(context) {
+    // Create a concise image prompt from context
+    const character = document.getElementById('characterName')?.textContent || 'Astrid';
+    const words = context.split(' ').slice(0, 20).join(' ');
+    return `${character} ${words}`;
+  }
+}
+customElements.define('image-generator', ImageGenerator);

components/local-model.js ADDED Viewed

	@@ -0,0 +1,40 @@

+// Local AI Image Model Simulation
+// This component simulates having a local image generation model
+class LocalModelStatus extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .model-status {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.25rem 0.75rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          font-weight: 500;
+          background: rgba(59, 130, 246, 0.1);
+          color: rgb(96, 165, 250);
+          border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+        .status-dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: currentColor;
+          animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      </style>
+      <div class="model-status">
+        <div class="status-dot"></div>
+        <span>Local Image Model Ready</span>
+      </div>
+    `;
+  }
+}
+customElements.define('local-model-status', LocalModelStatus);

index.html CHANGED Viewed

@@ -222,10 +222,11 @@
                             </div>
                         </div>
                         <div class="flex justify-between text-sm text-gray-500">
-                            <div class="flex items-center gap-4">
                             <span id="aiStatus">AI is in character. Using local intelligence for immersive roleplay.</span>
-<span id="apiStatus" class="px-2 py-1 rounded-full bg-green-900/30 text-green-400 text-xs">Connected</span>
-                            </div>
                             <span id="charCount">0/1000</span>
                         </div>
                     </form>
@@ -237,8 +238,10 @@
     <footer class="mt-12 pb-8 text-center text-gray-500 text-sm">
         <p>NexusAI — Immersive Roleplay Chatbot • Powered by advanced AI models • <a href="#" class="text-primary hover:underline">Privacy</a> • <a href="#" class="text-primary hover:underline">Terms</a></p>
     </footer>
     <script src="script.js"></script>
-    <script>
         feather.replace();
         // Character switching

                             </div>
                         </div>
                         <div class="flex justify-between text-sm text-gray-500">
+                        <div class="flex items-center gap-4 flex-wrap">
                             <span id="aiStatus">AI is in character. Using local intelligence for immersive roleplay.</span>
+                            <span id="apiStatus" class="px-2 py-1 rounded-full bg-green-900/30 text-green-400 text-xs">Connected</span>
+                            <local-model-status></local-model-status>
+</div>
                             <span id="charCount">0/1000</span>
                         </div>
                     </form>
     <footer class="mt-12 pb-8 text-center text-gray-500 text-sm">
         <p>NexusAI — Immersive Roleplay Chatbot • Powered by advanced AI models • <a href="#" class="text-primary hover:underline">Privacy</a> • <a href="#" class="text-primary hover:underline">Terms</a></p>
     </footer>
+    <script src="components/image-generator.js"></script>
+    <script src="components/local-model.js"></script>
     <script src="script.js"></script>
+<script>
         feather.replace();
         // Character switching

scenarios.html CHANGED Viewed

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="bg-gray-950 min-h-screen text-gray-100">
     <nav class="sticky top-0 z-50 bg-gray-900/90 backdrop-blur-md border-b border-gray-800">
@@ -165,9 +166,9 @@
     <footer class="mt-12 pb-8 text-center text-gray-500 text-sm">
         <p>NexusAI — Immersive Roleplay Chatbot • Powered by advanced AI models • <a href="#" class="text-blue-400 hover:underline">Privacy</a> • <a href="#" class="text-blue-400 hover:underline">Terms</a></p>
     </footer>
     <script>
         feather.replace();
     </script>
 </body>
 </html>

     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/local-model.js"></script>
 </head>
 <body class="bg-gray-950 min-h-screen text-gray-100">
     <nav class="sticky top-0 z-50 bg-gray-900/90 backdrop-blur-md border-b border-gray-800">
     <footer class="mt-12 pb-8 text-center text-gray-500 text-sm">
         <p>NexusAI — Immersive Roleplay Chatbot • Powered by advanced AI models • <a href="#" class="text-blue-400 hover:underline">Privacy</a> • <a href="#" class="text-blue-400 hover:underline">Terms</a></p>
     </footer>
     <script>
         feather.replace();
     </script>
+    <script src="components/image-generator.js"></script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -2,7 +2,7 @@
 // Configuration - Now using local AI simulation (no API required)
 const USE_LOCAL_AI = true;
 const LOCAL_AI_DELAY = 800; // ms delay to simulate AI thinking
 // State
 let isGenerating = false;
 let abortController = null;
@@ -14,14 +14,18 @@ document.addEventListener('DOMContentLoaded', function() {
     const charCount = document.getElementById('charCount');
     const stopButton = document.getElementById('stopButton');
     const sendButton = document.getElementById('sendButton');
     const aiStatus = document.getElementById('aiStatus');
     const apiStatus = document.getElementById('apiStatus');
     // Character counter
     messageInput.addEventListener('input', function() {
         charCount.textContent = `${this.value.length}/1000`;
     });
     // Send message
     chatForm.addEventListener('submit', async function(e) {
         e.preventDefault();
@@ -31,10 +35,8 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         await sendMessage();
     });
     // Stop generation
     stopButton.addEventListener('click', stopGeneration);
     // Allow Shift+Enter for new line, Enter to send
     messageInput.addEventListener('keydown', function(e) {
         if (e.key === 'Enter' && !e.shiftKey) {
@@ -91,6 +93,45 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
     // Local AI response generation (simulated)
     async function generateLocalAIResponse(characterName, messages, length) {
         return new Promise((resolve) => {
@@ -102,7 +143,6 @@ document.addEventListener('DOMContentLoaded', function() {
             }, LOCAL_AI_DELAY);
         });
     }
     // Character-specific response generation
     function generateCharacterResponse(characterName, userMessage, length) {
         const characterResponses = {
@@ -177,6 +217,11 @@ document.addEventListener('DOMContentLoaded', function() {
             response += details[Math.floor(Math.random() * details.length)];
         }
         return response;
     }
 // Build system prompt
@@ -208,7 +253,6 @@ document.addEventListener('DOMContentLoaded', function() {
         return messages;
     }
     // Helper functions
     function getMaxTokens() {
         const length = document.getElementById('responseLength').value;
@@ -254,12 +298,14 @@ document.addEventListener('DOMContentLoaded', function() {
         if (generating) {
             stopButton.classList.remove('hidden');
             sendButton.classList.add('hidden');
             messageInput.disabled = true;
             aiStatus.textContent = `${document.getElementById('characterName').textContent} is thinking...`;
             updateAPIStatus(true, 'Generating locally');
         } else {
             stopButton.classList.add('hidden');
             sendButton.classList.remove('hidden');
             messageInput.disabled = false;
             aiStatus.textContent = `AI is in character. Using local intelligence for immersive roleplay.`;
             abortController = null;

 // Configuration - Now using local AI simulation (no API required)
 const USE_LOCAL_AI = true;
 const LOCAL_AI_DELAY = 800; // ms delay to simulate AI thinking
+const LOCAL_IMAGE_MODEL = true; // Enable local image generation
 // State
 let isGenerating = false;
 let abortController = null;
     const charCount = document.getElementById('charCount');
     const stopButton = document.getElementById('stopButton');
     const sendButton = document.getElementById('sendButton');
+    const generateImageBtn = document.getElementById('generateImageBtn');
     const aiStatus = document.getElementById('aiStatus');
     const apiStatus = document.getElementById('apiStatus');
     // Character counter
     messageInput.addEventListener('input', function() {
         charCount.textContent = `${this.value.length}/1000`;
     });
+    // Image generation button
+    if (generateImageBtn) {
+        generateImageBtn.addEventListener('click', generateSceneImage);
+    }
     // Send message
     chatForm.addEventListener('submit', async function(e) {
         e.preventDefault();
         }
         await sendMessage();
     });
     // Stop generation
     stopButton.addEventListener('click', stopGeneration);
     // Allow Shift+Enter for new line, Enter to send
     messageInput.addEventListener('keydown', function(e) {
         if (e.key === 'Enter' && !e.shiftKey) {
         }
     }
+    // Generate scene image using local model
+    async function generateSceneImage() {
+        if (!LOCAL_IMAGE_MODEL) {
+            addMessage('system', 'Local image model is not enabled.');
+            return;
+        }
+        // Create and show image generator component
+        const generator = document.createElement('image-generator');
+        // Create a container for the generator in the chat
+        const container = document.createElement('div');
+        container.className = 'message user animate-message-slide mb-6';
+        container.innerHTML = `
+            <div class="flex gap-4 justify-end">
+                <div class="text-right">
+                    <div class="font-medium text-accent mb-2">You</div>
+                    <div class="bg-primary/20 rounded-2xl rounded-tr-none p-4">
+                        <p><i>Generating an image of the current scene using local AI model...</i></p>
+                        <div id="imageGenContainer" style="margin-top: 1rem;"></div>
+                    </div>
+                    <div class="text-xs text-gray-500 mt-2">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
+                </div>
+                <img src="https://static.photos/people/48x48/10" class="w-12 h-12 rounded-full flex-shrink-0">
+            </div>
+        `;
+        chatMessages.appendChild(container);
+        const genContainer = container.querySelector('#imageGenContainer');
+        genContainer.appendChild(generator);
+        // Scroll to show
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        // Trigger generation after a short delay
+        setTimeout(() => {
+            generator.shadowRoot.querySelector('.generate-btn').click();
+        }, 500);
+    }
     // Local AI response generation (simulated)
     async function generateLocalAIResponse(characterName, messages, length) {
         return new Promise((resolve) => {
             }, LOCAL_AI_DELAY);
         });
     }
     // Character-specific response generation
     function generateCharacterResponse(characterName, userMessage, length) {
         const characterResponses = {
             response += details[Math.floor(Math.random() * details.length)];
         }
+        // Sometimes include image generation suggestion
+        if (Math.random() > 0.7 && LOCAL_IMAGE_MODEL) {
+            response += ' *Would you like me to generate an image of this scene?*';
+        }
         return response;
     }
 // Build system prompt
         return messages;
     }
     // Helper functions
     function getMaxTokens() {
         const length = document.getElementById('responseLength').value;
         if (generating) {
             stopButton.classList.remove('hidden');
             sendButton.classList.add('hidden');
+            if (generateImageBtn) generateImageBtn.disabled = true;
             messageInput.disabled = true;
             aiStatus.textContent = `${document.getElementById('characterName').textContent} is thinking...`;
             updateAPIStatus(true, 'Generating locally');
         } else {
             stopButton.classList.add('hidden');
             sendButton.classList.remove('hidden');
+            if (generateImageBtn) generateImageBtn.disabled = false;
             messageInput.disabled = false;
             aiStatus.textContent = `AI is in character. Using local intelligence for immersive roleplay.`;
             abortController = null;

style.css CHANGED Viewed

@@ -114,3 +114,17 @@
         align-items: flex-end;
     }
 }

         align-items: flex-end;
     }
 }
+/* Image generation preview */
+.image-gen-preview {
+    margin-top: 1rem;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    border: 2px solid #4b5563;
+}
+.image-gen-preview img {
+    width: 100%;
+    height: auto;
+    display: block;
+}