Hugging Face's logo

Spaces:
Dalladrain
/
ShadowfangV1
Running

App Files Community
Dalladrain commited on
Commit
af90a0f
·
verified ·
1 Parent(s): 877b8f2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +25 -9
index.html CHANGED
@@ -3,18 +3,33 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Comic Book Generator</title>
7
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
10
  </head>
11
  <body class="bg-gray-100">
12
  <div class="container mx-auto px-4 py-8 max-w-6xl">
13
- <h1 class="text-4xl font-extrabold text-center mb-8">📖 AI Comic Book Generator</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
  <!-- Tabs -->
16
  <nav class="flex mb-8 border-b">
17
- <button class="tab-btn active px-4 py-2" data-tab="story-tab">Story</button>
18
  <button class="tab-btn px-4 py-2" data-tab="characters-tab">Characters</button>
19
  <button class="tab-btn px-4 py-2" data-tab="style-tab">Art Style</button>
20
  <button class="tab-btn px-4 py-2" data-tab="generate-tab">Generate</button>
@@ -45,21 +60,22 @@
45
  <div id="style-tab" class="tab-content hidden">
46
  <div class="bg-white rounded-lg shadow p-6 mb-6">
47
  <select id="art-style" class="w-full p-2 border rounded mb-4">
48
- <option>Comic Book</option>
49
- <option>Manga</option>
50
- <option>Anime</option>
51
  <option>Cartoon</option>
52
  <option>Realistic</option>
53
  <option>Noir / Dark</option>
54
  </select>
55
- <input id="custom-model" type="text" class="w-full p-2 border rounded" placeholder="Optional custom model ID (default SD2)">
 
56
  </div>
57
  </div>
58
 
59
  <!-- Generate Tab -->
60
  <div id="generate-tab" class="tab-content hidden">
61
  <input id="api-key" type="password" placeholder="Enter Hugging Face API Key" class="w-full p-2 border rounded mb-4">
62
- <button id="generate-btn" class="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">🎨 Generate Panels</button>
63
  <div id="comic-preview" class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6"></div>
64
  </div>
65
 
@@ -67,8 +83,8 @@
67
  <div id="export-tab" class="tab-content hidden">
68
  <button id="download-btn" class="bg-green-600 text-white px-6 py-3 rounded hover:bg-green-700">📥 Download PDF</button>
69
  </div>
70
- </div>
71
 
 
72
  <script src="script.js"></script>
73
  </body>
74
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Comic Generator</title>
7
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
10
  </head>
11
  <body class="bg-gray-100">
12
  <div class="container mx-auto px-4 py-8 max-w-6xl">
13
+
14
+ <h1 class="text-4xl font-extrabold text-center mb-6 text-red-700 drop-shadow-lg">🎨 AI Comic Book Generator</h1>
15
+
16
+ <!-- Tutorial Section -->
17
+ <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-6">
18
+ <h2 class="text-xl font-bold mb-2">Tutorial: How to Use</h2>
19
+ <ul class="list-disc ml-5">
20
+ <li>Step 1: Write a detailed comic story in the Story tab.</li>
21
+ <li>Step 2: Add characters with detailed descriptions or upload images.</li>
22
+ <li>Step 3: Describe the background or scene for each panel.</li>
23
+ <li>Step 4: Choose an art style and color scheme.</li>
24
+ <li>Step 5: Click 'Generate Panels' to see your comic.</li>
25
+ <li>Step 6: Edit speech bubbles and add sound effects like BAM, KAPOW!</li>
26
+ <li>Step 7: Export your comic as a PDF.</li>
27
+ </ul>
28
+ </div>
29
 
30
  <!-- Tabs -->
31
  <nav class="flex mb-8 border-b">
32
+ <button class="tab-btn active px-4 py-2 bg-red-200 rounded-t" data-tab="story-tab">Story</button>
33
  <button class="tab-btn px-4 py-2" data-tab="characters-tab">Characters</button>
34
  <button class="tab-btn px-4 py-2" data-tab="style-tab">Art Style</button>
35
  <button class="tab-btn px-4 py-2" data-tab="generate-tab">Generate</button>
 
60
  <div id="style-tab" class="tab-content hidden">
61
  <div class="bg-white rounded-lg shadow p-6 mb-6">
62
  <select id="art-style" class="w-full p-2 border rounded mb-4">
63
+ <option>Comic Book - Bright Colors</option>
64
+ <option>Manga - Colorized</option>
65
+ <option>Anime Style</option>
66
  <option>Cartoon</option>
67
  <option>Realistic</option>
68
  <option>Noir / Dark</option>
69
  </select>
70
+ <textarea id="bg-desc" class="w-full p-2 border rounded" placeholder="Describe the background scene for panels..."></textarea>
71
+ <input id="custom-model" type="text" class="w-full p-2 border rounded mt-2" placeholder="Optional custom model ID">
72
  </div>
73
  </div>
74
 
75
  <!-- Generate Tab -->
76
  <div id="generate-tab" class="tab-content hidden">
77
  <input id="api-key" type="password" placeholder="Enter Hugging Face API Key" class="w-full p-2 border rounded mb-4">
78
+ <button id="generate-btn" class="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700 mb-4">🎨 Generate Panels</button>
79
  <div id="comic-preview" class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6"></div>
80
  </div>
81
 
 
83
  <div id="export-tab" class="tab-content hidden">
84
  <button id="download-btn" class="bg-green-600 text-white px-6 py-3 rounded hover:bg-green-700">📥 Download PDF</button>
85
  </div>
 
86
 
87
+ </div>
88
  <script src="script.js"></script>
89
  </body>
90
  </html>