Hugging Face's logo

Spaces:
Dalladrain
/
deepsite-project
Running

App Files Community
Dalladrain commited on
Commit
ce72cf1
·
verified ·
1 Parent(s): 7f440d4

Build a fully interactive AI Comic Book Generator with the following features:

Browse files

1. User Story Input:
User enters a detailed comic description: storyline, characters, setting, genre, tone.
Optional toggle for explicit/adult content (blood, gore, offensive language, violence).
User sets number of chapters and total panels.
2. Art Style & Reference Images:
User selects art style: comic book, manga, anime, realistic, cinematic, noir.
User can upload character reference images to maintain consistent appearances.
User can upload background reference images for consistent environments.
3. Model Selection:
Optional support for custom Hugging Face model via API key and model ID.
4. Story & Chapter Generation:
AI automatically splits the story into chapters.
Generates chapter title pages and optional AI summaries.
Panels are distributed across chapters based on total panel count.
5. Panel Generation:
Generate panel artwork using Stable Diffusion or chosen model.
Blend uploaded character and background references for style consistency.
Optionally add comic-style sound effects (BAM, POW, CRASH) and dynamic borders (rectangular, jagged, angled).
6. Interactive Panel Preview:
User previews each panel before finalizing.
User can edit dialogues in speech bubbles interactively.
User can regenerate panels if the art doesn’t match expectations.
User can reorder panels within a chapter.
7. PDF Assembly & Export:
Compile panels into a multi-chapter PDF.
Configurable panels per page, optional title page and ending credits.
PDF is downloadable for full comic reading.
8. Optional Enhancements:
Ensure consistent character appearances across panels.
Maintain smooth story flow and visually appealing comic layout.
Respect explicit content settings for mature stories.
Deliverable:
A fully functional browser-based interactive web application where users can generate complete, professional-quality AI comic books from detailed prompts.
The app must be intuitive, with clear options for all user inputs, previews, edits, and final export.

Files changed (2) hide show
  1. comic-generator.html +192 -0
  2. index.html +6 -4
comic-generator.html ADDED
@@ -0,0 +1,192 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <style>
10
+ .comic-panel {
11
+ border: 3px solid #000;
12
+ background-color: #fff;
13
+ transition: all 0.3s ease;
14
+ }
15
+ .comic-panel:hover {
16
+ transform: scale(1.02);
17
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
18
+ }
19
+ .speech-bubble {
20
+ position: absolute;
21
+ background: white;
22
+ border: 2px solid black;
23
+ border-radius: 50%;
24
+ padding: 10px;
25
+ max-width: 150px;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-100">
30
+ <div class="container mx-auto px-4 py-8">
31
+ <h1 class="text-4xl font-bold text-center mb-8">AI Comic Book Generator</h1>
32
+
33
+ <!-- Main Navigation Tabs -->
34
+ <nav class="flex mb-8 border-b">
35
+ <button class="tab-btn active px-4 py-2" data-tab="story-tab">Story</button>
36
+ <button class="tab-btn px-4 py-2" data-tab="style-tab">Art Style</button>
37
+ <button class="tab-btn px-4 py-2" data-tab="generate-tab">Generate</button>
38
+ <button class="tab-btn px-4 py-2" data-tab="export-tab">Export</button>
39
+ </nav>
40
+
41
+ <!-- Story Input Tab -->
42
+ <div id="story-tab" class="tab-content active">
43
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
44
+ <h2 class="text-2xl font-semibold mb-4">Comic Story Details</h2>
45
+ <textarea class="w-full h-40 p-3 border rounded mb-4" placeholder="Enter your comic story description..."></textarea>
46
+
47
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
48
+ <div>
49
+ <label class="block mb-2">Genre</label>
50
+ <select class="w-full p-2 border rounded">
51
+ <option>Superhero</option>
52
+ <option>Fantasy</option>
53
+ <option>Sci-Fi</option>
54
+ <option>Horror</option>
55
+ <option>Romance</option>
56
+ </select>
57
+ </div>
58
+ <div>
59
+ <label class="block mb-2">Tone</label>
60
+ <select class="w-full p-2 border rounded">
61
+ <option>Serious</option>
62
+ <option>Humorous</option>
63
+ <option>Dark</option>
64
+ <option>Lighthearted</option>
65
+ </select>
66
+ </div>
67
+ </div>
68
+
69
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
70
+ <div>
71
+ <label class="block mb-2">Chapters</label>
72
+ <input type="number" min="1" max="10" value="1" class="w-full p-2 border rounded">
73
+ </div>
74
+ <div>
75
+ <label class="block mb-2">Panels</label>
76
+ <input type="number" min="1" max="100" value="10" class="w-full p-2 border rounded">
77
+ </div>
78
+ <div class="flex items-center">
79
+ <input type="checkbox" id="explicit-toggle" class="mr-2">
80
+ <label for="explicit-toggle">Mature Content</label>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Art Style Tab -->
87
+ <div id="style-tab" class="tab-content hidden">
88
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
89
+ <h2 class="text-2xl font-semibold mb-4">Art Style</h2>
90
+
91
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
92
+ <div class="art-style-option p-4 border rounded cursor-pointer hover:bg-gray-100">
93
+ <img src="http://static.photos/comic/320x240/1" class="w-full h-32 object-cover mb-2">
94
+ <p class="text-center">Comic Book</p>
95
+ </div>
96
+ <div class="art-style-option p-4 border rounded cursor-pointer hover:bg-gray-100">
97
+ <img src="http://static.photos/manga/320x240/1" class="w-full h-32 object-cover mb-2">
98
+ <p class="text-center">Manga</p>
99
+ </div>
100
+ <div class="art-style-option p-4 border rounded cursor-pointer hover:bg-gray-100">
101
+ <img src="http://static.photos/anime/320x240/1" class="w-full h-32 object-cover mb-2">
102
+ <p class="text-center">Anime</p>
103
+ </div>
104
+ </div>
105
+
106
+ <h3 class="text-xl font-semibold mb-4">Character References</h3>
107
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
108
+ <div class="border-2 border-dashed p-4 rounded text-center">
109
+ <i data-feather="upload" class="mx-auto text-gray-400"></i>
110
+ <p>Upload Character Image</p>
111
+ <input type="file" class="hidden">
112
+ </div>
113
+ </div>
114
+
115
+ <h3 class="text-xl font-semibold mb-4">Background References</h3>
116
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
117
+ <div class="border-2 border-dashed p-4 rounded text-center">
118
+ <i data-feather="upload" class="mx-auto text-gray-400"></i>
119
+ <p>Upload Background Image</p>
120
+ <input type="file" class="hidden">
121
+ </div>
122
+ </div>
123
+
124
+ <div class="bg-gray-100 p-4 rounded">
125
+ <h3 class="text-lg font-semibold mb-2">Advanced Options</h3>
126
+ <div class="mb-2">
127
+ <label class="block mb-1">Custom Model (Hugging Face)</label>
128
+ <input type="text" placeholder="API Key" class="w-full p-2 border rounded mb-2">
129
+ <input type="text" placeholder="Model ID" class="w-full p-2 border rounded">
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Generate Tab -->
136
+ <div id="generate-tab" class="tab-content hidden">
137
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
138
+ <h2 class="text-2xl font-semibold mb-4">Generate Your Comic</h2>
139
+ <button class="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">Generate Panels</button>
140
+
141
+ <div id="comic-preview" class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
142
+ <!-- Generated panels will appear here -->
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Export Tab -->
148
+ <div id="export-tab" class="tab-content hidden">
149
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
150
+ <h2 class="text-2xl font-semibold mb-4">Export Options</h2>
151
+
152
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
153
+ <div>
154
+ <label class="block mb-2">Panels Per Page</label>
155
+ <select class="w-full p-2 border rounded">
156
+ <option>1</option>
157
+ <option>2</option>
158
+ <option>4</option>
159
+ <option>6</option>
160
+ </select>
161
+ </div>
162
+ <div class="flex items-center">
163
+ <input type="checkbox" id="title-page" class="mr-2" checked>
164
+ <label for="title-page">Include Title Page</label>
165
+ </div>
166
+ </div>
167
+
168
+ <button class="bg-green-600 text-white px-6 py-3 rounded hover:bg-green-700 flex items-center">
169
+ <i data-feather="download" class="mr-2"></i>
170
+ Export as PDF
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <script>
177
+ // Tab switching functionality
178
+ document.querySelectorAll('.tab-btn').forEach(btn => {
179
+ btn.addEventListener('click', () => {
180
+ document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
181
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
182
+
183
+ btn.classList.add('active');
184
+ document.getElementById(btn.dataset.tab).classList.remove('hidden');
185
+ });
186
+ });
187
+
188
+ // Initialize feather icons
189
+ feather.replace();
190
+ </script>
191
+ </body>
192
+ </html>
index.html CHANGED
@@ -8,12 +8,14 @@
8
  </head>
9
  <body>
10
  <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
 
13
  <p>
14
- Also don't forget to check the
15
  <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
  </p>
17
  </div>
18
- </body>
19
  </html>
 
 
8
  </head>
9
  <body>
10
  <div class="card">
11
+ <h1>AI Comic Book Generator</h1>
12
+ <p>Create professional-quality comics with AI assistance.</p>
13
+ <a href="comic-generator.html" class="button">Start Creating</a>
14
  <p>
15
+ Or check the
16
  <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
17
  </p>
18
  </div>
19
+ </body>
20
  </html>
21
+