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"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <h1 class="text-4xl font-extrabold text-center mb-6 text-red-700 drop-shadow-lg">🎨 AI Comic Book Generator</h1> | |
| <!-- Tutorial Section --> | |
| <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-6"> | |
| <h2 class="text-xl font-bold mb-2">Tutorial: How to Use</h2> | |
| <ul class="list-disc ml-5"> | |
| <li>Step 1: Write a detailed comic story in the Story tab.</li> | |
| <li>Step 2: Add characters with detailed descriptions or upload images.</li> | |
| <li>Step 3: Describe the background or scene for each panel.</li> | |
| <li>Step 4: Choose an art style and color scheme.</li> | |
| <li>Step 5: Click 'Generate Panels' to see your comic.</li> | |
| <li>Step 6: Edit speech bubbles and add sound effects like BAM, KAPOW!</li> | |
| <li>Step 7: Export your comic as a PDF.</li> | |
| </ul> | |
| </div> | |
| <!-- Tabs --> | |
| <nav class="flex mb-8 border-b"> | |
| <button class="tab-btn active px-4 py-2 bg-red-200 rounded-t" data-tab="story-tab">Story</button> | |
| <button class="tab-btn px-4 py-2" data-tab="characters-tab">Characters</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 Tab --> | |
| <div id="story-tab" class="tab-content active"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <textarea id="story-input" class="w-full h-40 p-3 border rounded mb-4" placeholder="Enter your comic story..."></textarea> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <input id="chapters" type="number" min="1" max="10" value="1" class="w-full p-2 border rounded" placeholder="Chapters"> | |
| <input id="panel-count" type="number" min="1" max="20" value="6" class="w-full p-2 border rounded" placeholder="Panels"> | |
| <label class="flex items-center"><input type="checkbox" id="explicit-toggle" class="mr-2">Mature/Explicit Content</label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Characters Tab --> | |
| <div id="characters-tab" class="tab-content hidden"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <div id="character-list" class="space-y-4"></div> | |
| <button id="add-character" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">➕ Add Character</button> | |
| </div> | |
| </div> | |
| <!-- Style Tab --> | |
| <div id="style-tab" class="tab-content hidden"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <select id="art-style" class="w-full p-2 border rounded mb-4"> | |
| <option>Comic Book - Bright Colors</option> | |
| <option>Manga - Colorized</option> | |
| <option>Anime Style</option> | |
| <option>Cartoon</option> | |
| <option>Realistic</option> | |
| <option>Noir / Dark</option> | |
| </select> | |
| <textarea id="bg-desc" class="w-full p-2 border rounded" placeholder="Describe the background scene for panels..."></textarea> | |
| <input id="custom-model" type="text" class="w-full p-2 border rounded mt-2" placeholder="Optional custom model ID"> | |
| </div> | |
| </div> | |
| <!-- Generate Tab --> | |
| <div id="generate-tab" class="tab-content hidden"> | |
| <input id="api-key" type="password" placeholder="Enter Hugging Face API Key" class="w-full p-2 border rounded mb-4"> | |
| <button id="generate-btn" class="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700 mb-4">🎨 Generate Panels</button> | |
| <div id="comic-preview" class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6"></div> | |
| </div> | |
| <!-- Export Tab --> | |
| <div id="export-tab" class="tab-content hidden"> | |
| <button id="download-btn" class="bg-green-600 text-white px-6 py-3 rounded hover:bg-green-700">📥 Download PDF</button> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |