Hugging Face's logo

Spaces:
gaur3009
/
genai
Running

App Files Community
gaur3009 commited on
Commit
83ffa83
·
verified ·
1 Parent(s): bd536e0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +281 -19
index.html CHANGED
@@ -1,19 +1,281 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Phone Cover Designer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes gradientShift {
11
+ 0% { background-position: 0% 50%; }
12
+ 50% { background-position: 100% 50%; }
13
+ 100% { background-position: 0% 50%; }
14
+ }
15
+ body::before {
16
+ content: "";
17
+ position: fixed;
18
+ top: 0;
19
+ left: 0;
20
+ width: 100%;
21
+ height: 100%;
22
+ background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #8fd3f4);
23
+ background-size: 400% 400%;
24
+ z-index: -1;
25
+ animation: gradientShift 15s ease infinite;
26
+ }
27
+ .design-box {
28
+ background: rgba(255, 255, 255, 0.9);
29
+ backdrop-filter: blur(10px);
30
+ border-radius: 15px;
31
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
32
+ }
33
+ .gallery-item {
34
+ transition: transform 0.3s, box-shadow 0.3s;
35
+ }
36
+ .gallery-item:hover {
37
+ transform: scale(1.05);
38
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
39
+ }
40
+ .loading-dots span {
41
+ animation: typing 1s infinite ease-in-out;
42
+ }
43
+ @keyframes typing {
44
+ 0% { transform: translateY(0); opacity: 0.4; }
45
+ 50% { transform: translateY(-5px); opacity: 1; }
46
+ 100% { transform: translateY(0); opacity: 0.4; }
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="min-h-screen font-sans">
51
+ <div class="container mx-auto px-4 py-8">
52
+ <!-- Header -->
53
+ <header class="text-center mb-12">
54
+ <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-blue-500">
55
+ AI Phone Cover Designer
56
+ </h1>
57
+ <p class="text-xl text-gray-700">Create custom phone covers with AI</p>
58
+ </header>
59
+
60
+ <!-- Main Content -->
61
+ <div class="design-box p-8 max-w-4xl mx-auto">
62
+ <!-- Tabs -->
63
+ <div class="flex gap-4 mb-8">
64
+ <button data-tab="home" class="tab-btn px-6 py-2 rounded-full bg-blue-500 text-white font-semibold">
65
+ Home
66
+ </button>
67
+ <button data-tab="design" class="tab-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700">
68
+ Design
69
+ </button>
70
+ <button data-tab="about" class="tab-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700">
71
+ About
72
+ </button>
73
+ </div>
74
+
75
+ <!-- Home Tab -->
76
+ <div id="home-tab" class="tab-content active">
77
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Welcome</h2>
78
+ <div class="grid grid-cols-2 gap-4" id="gallery">
79
+ <!-- Gallery items will be dynamically loaded here -->
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Design Tab -->
84
+ <div id="design-tab" class="tab-content hidden">
85
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
86
+ <div>
87
+ <div class="mb-6">
88
+ <label class="block text-gray-700 mb-2 font-semibold">Color</label>
89
+ <input type="text" id="color-input" class="w-full p-3 border rounded-lg"
90
+ placeholder="E.g., Red">
91
+ </div>
92
+ <div class="mb-6">
93
+ <label class="block text-gray-700 mb-2 font-semibold">Mobile Type</label>
94
+ <input type="text" id="type-input" class="w-full p-3 border rounded-lg"
95
+ placeholder="E.g., iPhone 15">
96
+ </div>
97
+ <div class="mb-6">
98
+ <label class="block text-gray-700 mb-2 font-semibold">Design Details</label>
99
+ <textarea id="design-input" class="w-full p-3 border rounded-lg" rows="3"
100
+ placeholder="E.g., Bold stripes with geometric patterns"></textarea>
101
+ </div>
102
+ <button id="generate-btn" class="w-full bg-blue-500 text-white py-3 rounded-lg font-semibold
103
+ hover:bg-blue-600 transition-colors">
104
+ Generate Design
105
+ </button>
106
+ <button id="save-btn" class="w-full mt-4 bg-green-500 text-white py-3 rounded-lg font-semibold
107
+ hover:bg-green-600 transition-colors">
108
+ Save Design
109
+ </button>
110
+ </div>
111
+ <div>
112
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 aspect-square flex items-center justify-center"
113
+ id="output-image">
114
+ <span class="text-gray-400">Your design will appear here</span>
115
+ </div>
116
+ <div class="mt-4 p-4 bg-blue-50 rounded-lg" id="ai-message">
117
+ <div class="text-blue-600 font-semibold">AI Assistant:</div>
118
+ <div id="message-text" class="mt-2"></div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- About Tab -->
125
+ <div id="about-tab" class="tab-content hidden">
126
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">About</h2>
127
+ <div class="space-y-4 text-gray-700">
128
+ <p>The AI Phone Cover Maker is a cutting-edge tool designed to help users create personalized phone cover designs quickly and easily.</p>
129
+ <div class="bg-white p-4 rounded-lg">
130
+ <h3 class="font-semibold text-lg mb-2">Features:</h3>
131
+ <ul class="list-disc pl-6">
132
+ <li>Create custom designs using simple prompts</li>
133
+ <li>Generate designs for various phone models</li>
134
+ <li>Save your designs for future use</li>
135
+ </ul>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Loading State -->
141
+ <div id="loading" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
142
+ <div class="bg-white p-8 rounded-lg text-center">
143
+ <div class="loading-dots space-x-1 mb-4">
144
+ <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
145
+ <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
146
+ <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
147
+ </div>
148
+ <p class="text-gray-700">Generating your design...</p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <script>
155
+ document.addEventListener('DOMContentLoaded', function() {
156
+ const API_URL = "https://api-inference.huggingface.co/models/artificialguybr/TshirtDesignRedmond-V2";
157
+ const tabs = {
158
+ home: document.getElementById('home-tab'),
159
+ design: document.getElementById('design-tab'),
160
+ about: document.getElementById('about-tab')
161
+ };
162
+
163
+ // Tab functionality
164
+ document.querySelectorAll('.tab-btn').forEach(btn => {
165
+ btn.addEventListener('click', function() {
166
+ // Set all tabs inactive
167
+ Object.values(tabs).forEach(tab => tab.classList.add('hidden'));
168
+ document.querySelectorAll('.tab-btn').forEach(b =>
169
+ b.classList.replace('bg-blue-500', 'bg-gray-200'));
170
+
171
+ // Activate selected tab
172
+ const tabId = this.dataset.tab;
173
+ tabs[tabId].classList.remove('hidden');
174
+ this.classList.replace('bg-gray-200', 'bg-blue-500');
175
+ });
176
+ });
177
+
178
+ // Generate Design
179
+ document.getElementById('generate-btn').addEventListener('click', async function() {
180
+ const color = document.getElementById('color-input').value;
181
+ const type = document.getElementById('type-input').value;
182
+ const design = document.getElementById('design-input').value;
183
+
184
+ if (!color || !type || !design) {
185
+ alert('Please fill in all fields');
186
+ return;
187
+ }
188
+
189
+ showLoading(true);
190
+ try {
191
+ const prompt = `A single vertical ${color} colored ${type} back cover featuring a bold ${design} design on the front, hanging on the plain wall. The soft light and shadows, creating a striking contrast against the minimal background, evoking modern sophistication.`;
192
+
193
+ const response = await queryAPI(prompt);
194
+ const imageUrl = URL.createObjectURL(response);
195
+
196
+ // Display image
197
+ const output = document.getElementById('output-image');
198
+ output.innerHTML = `<img src="${imageUrl}" class="w-full h-full object-contain rounded-lg">`;
199
+
200
+ // Update message
201
+ const message = `Your design is generated with the color '${color}', mobile type '${type}', and design '${design}'.`;
202
+ document.getElementById('message-text').textContent = message;
203
+ speakMessage(message);
204
+ } catch (error) {
205
+ alert('Error generating design: ' + error.message);
206
+ }
207
+ showLoading(false);
208
+ });
209
+
210
+ // Save Design
211
+ document.getElementById('save-btn').addEventListener('click', function() {
212
+ const img = document.querySelector('#output-image img');
213
+ if (!img) {
214
+ alert('No design to save');
215
+ return;
216
+ }
217
+
218
+ const link = document.createElement('a');
219
+ link.download = 'phone-design.png';
220
+ link.href = img.src;
221
+ link.click();
222
+ document.getElementById('message-text').textContent = 'Design saved successfully!';
223
+ });
224
+
225
+ async function queryAPI(prompt) {
226
+ const payload = {
227
+ inputs: prompt,
228
+ parameters: {
229
+ negative_prompt: "(worst quality, low quality, lowres, oversaturated, grayscale, bad photo:1.4)",
230
+ num_inference_steps: 30,
231
+ scheduler: "DPMSolverMultistepScheduler",
232
+ }
233
+ };
234
+
235
+ let retries = 0;
236
+ while (retries < 5) {
237
+ const response = await fetch(API_URL, {
238
+ method: 'POST',
239
+ headers: { 'Content-Type': 'application/json' },
240
+ body: JSON.stringify(payload)
241
+ });
242
+
243
+ if (response.ok) return await response.blob();
244
+ if (response.status === 503) {
245
+ await new Promise(resolve => setTimeout(resolve, 1000));
246
+ retries++;
247
+ } else {
248
+ throw new Error(`API Error: ${response.status}`);
249
+ }
250
+ }
251
+ throw new Error('Server busy, please try again later');
252
+ }
253
+
254
+ function showLoading(show) {
255
+ document.getElementById('loading').style.display = show ? 'flex' : 'none';
256
+ }
257
+
258
+ function speakMessage(text) {
259
+ const synth = window.speechSynthesis;
260
+ const utterance = new SpeechSynthesisUtterance(text);
261
+ synth.speak(utterance);
262
+ }
263
+
264
+ // Load sample gallery images
265
+ const gallery = document.getElementById('gallery');
266
+ ['https://via.placeholder.com/300x500/FFB6C1/ffffff?text=Sample+1',
267
+ 'https://via.placeholder.com/300x500/87CEEB/ffffff?text=Sample+2',
268
+ 'https://via.placeholder.com/300x500/98FB98/ffffff?text=Sample+3',
269
+ 'https://via.placeholder.com/300x500/DDA0DD/ffffff?text=Sample+4']
270
+ .forEach(url => {
271
+ gallery.innerHTML += `
272
+ <div class="gallery-item bg-white rounded-lg overflow-hidden">
273
+ <img src="${url}" class="w-full h-48 object-cover">
274
+ <div class="p-3 text-gray-700">Sample Design</div>
275
+ </div>
276
+ `;
277
+ });
278
+ });
279
+ </script>
280
+ </body>
281
+ </html>