Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Comic Generator</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .comic-panel { | |
| border: 3px solid #000; | |
| background-color: #fff; | |
| transition: all 0.3s ease; | |
| } | |
| .comic-panel:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .speech-bubble { | |
| position: absolute; | |
| background: white; | |
| border: 2px solid black; | |
| border-radius: 50%; | |
| padding: 10px; | |
| max-width: 150px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="text-4xl font-bold text-center mb-8">AI Comic Book Generator</h1> | |
| <!-- Main Navigation Tabs --> | |
| <nav class="flex mb-8 border-b"> | |
| <button class="tab-btn active px-4 py-2" data-tab="story-tab">Story</button> | |
| <button class="tab-btn px-4 py-2" data-tab="style-tab">Art Style</button> | |
| <button class="tab-btn px-4 py-2" data-tab="generate-tab">Generate</button> | |
| <button class="tab-btn px-4 py-2" data-tab="export-tab">Export</button> | |
| </nav> | |
| <!-- Story Input Tab --> | |
| <div id="story-tab" class="tab-content active"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-2xl font-semibold mb-4">Comic Story Details</h2> | |
| <textarea class="w-full h-40 p-3 border rounded mb-4" placeholder="Enter your comic story description..."></textarea> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block mb-2">Genre</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>Superhero</option> | |
| <option>Fantasy</option> | |
| <option>Sci-Fi</option> | |
| <option>Horror</option> | |
| <option>Romance</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block mb-2">Tone</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>Serious</option> | |
| <option>Humorous</option> | |
| <option>Dark</option> | |
| <option>Lighthearted</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> | |
| <div> | |
| <label class="block mb-2">Chapters</label> | |
| <input type="number" min="1" max="10" value="1" class="w-full p-2 border rounded"> | |
| </div> | |
| <div> | |
| <label class="block mb-2">Panels</label> | |
| <input type="number" min="1" max="100" value="10" class="w-full p-2 border rounded"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="explicit-toggle" class="mr-2"> | |
| <label for="explicit-toggle">Mature Content</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Art Style Tab --> | |
| <div id="style-tab" class="tab-content hidden"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-2xl font-semibold mb-4">Art Style</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="art-style-option p-4 border rounded cursor-pointer hover:bg-gray-100"> | |
| <img src="http://static.photos/comic/320x240/1" class="w-full h-32 object-cover mb-2"> | |
| <p class="text-center">Comic Book</p> | |
| </div> | |
| <div class="art-style-option p-4 border rounded cursor-pointer hover:bg-gray-100"> | |
| <img src="http://static.photos/manga/320x240/1" class="w-full h-32 object-cover mb-2"> | |
| <p class="text-center">Manga</p> | |
| </div> | |
| <div class="art-style-option p-4 border rounded cursor-pointer hover:bg-gray-100"> | |
| <img src="http://static.photos/anime/320x240/1" class="w-full h-32 object-cover mb-2"> | |
| <p class="text-center">Anime</p> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Character References</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="border-2 border-dashed p-4 rounded text-center"> | |
| <i data-feather="upload" class="mx-auto text-gray-400"></i> | |
| <p>Upload Character Image</p> | |
| <input type="file" class="hidden"> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Background References</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="border-2 border-dashed p-4 rounded text-center"> | |
| <i data-feather="upload" class="mx-auto text-gray-400"></i> | |
| <p>Upload Background Image</p> | |
| <input type="file" class="hidden"> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded"> | |
| <h3 class="text-lg font-semibold mb-2">Advanced Options</h3> | |
| <div class="mb-2"> | |
| <label class="block mb-1">Custom Model (Hugging Face)</label> | |
| <input type="text" placeholder="API Key" class="w-full p-2 border rounded mb-2"> | |
| <input type="text" placeholder="Model ID" class="w-full p-2 border rounded"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generate Tab --> | |
| <div id="generate-tab" class="tab-content hidden"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-2xl font-semibold mb-4">Generate Your Comic</h2> | |
| <button class="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">Generate Panels</button> | |
| <div id="comic-preview" class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Generated panels will appear here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Tab --> | |
| <div id="export-tab" class="tab-content hidden"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-2xl font-semibold mb-4">Export Options</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block mb-2">Panels Per Page</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>4</option> | |
| <option>6</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="title-page" class="mr-2" checked> | |
| <label for="title-page">Include Title Page</label> | |
| </div> | |
| </div> | |
| <button class="bg-green-600 text-white px-6 py-3 rounded hover:bg-green-700 flex items-center"> | |
| <i data-feather="download" class="mr-2"></i> | |
| Export as PDF | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden')); | |
| btn.classList.add('active'); | |
| document.getElementById(btn.dataset.tab).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |