Hugging Face's logo

Spaces:
Dalladrain
/
deepsite-project
Running

App Files Community
deepsite-project
File size: 8,966 Bytes 
ce72cf1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
 
<!DOCTYPE html>
<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>