Spaces:
Running
Running
| <!-- index.html content here --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>AI Tentacle Chat Bot - Text to Image Generator (Claude Opus 4.1)</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <meta name="theme-color" content="#0f172a" /> | |
| <meta name="description" content="AI chat bot that takes text input and generates an image as output picturing a single tentacle curved into the described shape. Include style, texture, and shape details in your message." /> | |
| </head> | |
| <body> | |
| <header class="app-header"> | |
| <div class="brand"> | |
| <svg class="logo" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path d="M12 2c5.5 0 10 4.2 10 9.5S15.5 21 12 22c0 0 4-3 4-8.5S12 2 12 2z" fill="currentColor"></path> | |
| </svg> | |
| <h1>AI Tentacle Chat Bot</h1> | |
| </div> | |
| <nav class="header-links"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">Built with anycoder</a> | |
| <a id="model-docs" href="#" target="_blank" rel="noopener noreferrer" aria-label="Claude Opus 4.1 documentation">Claude Opus 4.1</a> | |
| </nav> | |
| </header> | |
| <main class="container"> | |
| <section class="panel left-panel" aria-labelledby="prompt-heading"> | |
| <h2 id="prompt-heading">Chat with AI Bot</h2> | |
| <p class="helper">Send a text message to the AI chat bot describing a single tentacle. Include the style, texture, and shape you want it to curve into. The bot (powered by Claude Opus 4.1) will generate an image as output based on your text input.</p> | |
| <form id="prompt-form" novalidate> | |
| <label class="field" for="prompt"> | |
| <span class="field-label">Chat message</span> | |
| <textarea id="prompt" name="prompt" rows="6" required placeholder="Describe the single tentacle’s style, texture, and the exact shape it should curve into (e.g., treble clef, heart, S-curve)."></textarea> | |
| </label> | |
| <div class="row"> | |
| <label class="field grow" for="negPrompt"> | |
| <span class="field-label">Negative prompt (optional)</span> | |
| <input id="negPrompt" name="negPrompt" type="text" placeholder="e.g., multiple tentacles, extra limbs, text, watermark" /> | |
| </label> | |
| <label class="field small" for="steps"> | |
| <span class="field-label">Steps</span> | |
| <input id="steps" name="steps" type="number" min="4" max="50" value="20" /> | |
| </label> | |
| </div> | |
| <div class="row"> | |
| <label class="field small" for="width"> | |
| <span class="field-label">Width</span> | |
| <input id="width" name="width" type="number" min="256" max="1024" step="64" value="512" /> | |
| </label> | |
| <label class="field small" for="height"> | |
| <span class="field-label">Height</span> | |
| <input id="height" name="height" type="number" min="256" max="1024" step="64" value="512" /> | |
| </label> | |
| <label class="toggle field"> | |
| <span class="field-label">Use GPU (WebGPU)</span> | |
| <div class="toggle-wrap"> | |
| <input type="checkbox" id="useGPU" name="useGPU" /> | |
| <span class="toggle-switch" aria-hidden="true"></span> | |
| </div> | |
| <span id="gpu-support" class="hint" role="status" aria-live="polite"></span> | |
| </label> | |
| </div> | |
| <button id="generate" type="submit" class="primary-btn"> | |
| <span class="btn-text">Send Message & Generate Image</span> | |
| <span class="spinner" aria-hidden="true"></span> | |
| </button> | |
| <div id="status" class="status" role="status" aria-live="polite"></div> | |
| </form> | |
| <details class="tips"> | |
| <summary>Prompt tips</summary> | |
| <ul> | |
| <li>Always specify it’s a single tentacle.</li> | |
| <li>Describe the exact shape (e.g., “S-curve”, “heart shape”, “treble clef”).</li> | |
| <li>Add style and texture cues (glossy, bioluminescent, clay, watercolor, photorealistic).</li> | |
| <li>Use a negative prompt to avoid extra limbs or multiple tentacles.</li> | |
| </ul> | |
| </details> | |
| </section> | |
| <section class="panel right-panel" aria-labelledby="result-heading"> | |
| <div class="result-header"> | |
| <h2 id="result-heading">AI Bot Response</h2> | |
| <div class="actions"> | |
| <button id="downloadBtn" class="secondary-btn" disabled>Download</button> | |
| <button id="copySeedBtn" class="secondary-btn" disabled>Copy seed</button> | |
| </div> | |
| </div> | |
| <div class="canvas-wrap"> | |
| <canvas id="resultCanvas" width="512" height="512" role="img" aria-label="Generated tentacle image"></canvas> | |
| <div id="overlay" class="overlay hidden" aria-hidden="true"> | |
| <div class="loader" aria-hidden="true"></div> | |
| <p id="overlayText">Loading model…</p> | |
| </div> | |
| </div> | |
| <p class="note">Chat Bot Output: Your text input generates an image (via Claude Opus 4.1) as output picturing a single tentacle curved into the described shape</p> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <p>Made with Claude Opus 4.1 and transformers.js in the browser. No data leaves your device.</p> | |
| </footer> | |
| <!-- Required transformers.js import snippet --> | |
| <script type="module"> | |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.3'; | |
| </script> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> | |
| ``` |