Hugging Face's logo

Spaces:
AHMed3290mljdh
/
sdm
Running

App Files Community
AHMed3290mljdh commited on
Commit
7f9d603
·
verified ·
1 Parent(s): cf9b0b5

AIzaSyDpSvm_yMKFiFv3VM4iS5cKtiwaicMj96w اجعله فعلا يستطيع انشاء الصور واترك خانتها بطريقه جيده واستعمل مفتاح جيميناي جيميني الذكاء السريعي من جوجل وساقدم لك المفتاح الان. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +326 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sdm
3
- emoji: 🌖
4
- colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: sdm
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,326 @@
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 Image Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/@google/generative-ai@0.1.0/dist/browser.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
+ }
14
+ .image-card {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .image-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .loading-spinner {
22
+ animation: spin 1s linear infinite;
23
+ }
24
+ @keyframes spin {
25
+ 0% { transform: rotate(0deg); }
26
+ 100% { transform: rotate(360deg); }
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="min-h-screen bg-gray-100">
31
+ <!-- Header -->
32
+ <header class="gradient-bg text-white shadow-lg">
33
+ <div class="container mx-auto px-4 py-6">
34
+ <div class="flex flex-col md:flex-row justify-between items-center">
35
+ <div class="flex items-center mb-4 md:mb-0">
36
+ <i class="fas fa-robot text-3xl mr-3"></i>
37
+ <h1 class="text-2xl md:text-3xl font-bold">AI Image Generator</h1>
38
+ </div>
39
+ <nav>
40
+ <ul class="flex space-x-6">
41
+ <li><a href="#" class="hover:text-gray-200 transition">Home</a></li>
42
+ <li><a href="#" class="hover:text-gray-200 transition">Gallery</a></li>
43
+ <li><a href="#" class="hover:text-gray-200 transition">About</a></li>
44
+ </ul>
45
+ </nav>
46
+ </div>
47
+ </div>
48
+ </header>
49
+
50
+ <!-- Main Content -->
51
+ <main class="container mx-auto px-4 py-8">
52
+ <section class="mb-12">
53
+ <div class="max-w-3xl mx-auto text-center">
54
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Create Stunning AI-Generated Images</h2>
55
+ <p class="text-lg text-gray-600 mb-8">Describe what you want to see and our AI will generate it for you. Be as creative as you want!</p>
56
+
57
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
58
+ <form id="imageForm" class="space-y-4">
59
+ <div>
60
+ <label for="prompt" class="block text-left text-gray-700 font-medium mb-2">Describe your image</label>
61
+ <textarea id="prompt" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="A futuristic cityscape at sunset with flying cars and neon lights..."></textarea>
62
+ </div>
63
+
64
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
65
+ <div>
66
+ <label for="style" class="block text-left text-gray-700 font-medium mb-2">Art Style</label>
67
+ <select id="style" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
68
+ <option value="realistic">Realistic</option>
69
+ <option value="cartoon">Cartoon</option>
70
+ <option value="abstract">Abstract</option>
71
+ <option value="watercolor">Watercolor</option>
72
+ <option value="digital-art">Digital Art</option>
73
+ </select>
74
+ </div>
75
+
76
+ <div>
77
+ <label for="quality" class="block text-left text-gray-700 font-medium mb-2">Quality</label>
78
+ <select id="quality" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
79
+ <option value="standard">Standard</option>
80
+ <option value="hd">HD</option>
81
+ <option value="4k">4K</option>
82
+ </select>
83
+ </div>
84
+
85
+ <div>
86
+ <label for="count" class="block text-left text-gray-700 font-medium mb-2">Number of Images</label>
87
+ <select id="count" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
88
+ <option value="1">1</option>
89
+ <option value="2">2</option>
90
+ <option value="4">4</option>
91
+ </select>
92
+ </div>
93
+ </div>
94
+
95
+ <button type="submit" class="w-full gradient-bg text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition flex items-center justify-center">
96
+ <i class="fas fa-magic mr-2"></i> Generate Images
97
+ </button>
98
+ </form>
99
+ </div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Results Section -->
104
+ <section id="resultsSection" class="hidden">
105
+ <div class="flex justify-between items-center mb-6">
106
+ <h3 class="text-2xl font-bold text-gray-800">Your Generated Images</h3>
107
+ <button id="downloadAll" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition flex items-center">
108
+ <i class="fas fa-download mr-2"></i> Download All
109
+ </button>
110
+ </div>
111
+
112
+ <div id="loadingIndicator" class="hidden flex-col items-center justify-center py-12">
113
+ <div class="loading-spinner border-4 border-purple-500 border-t-transparent rounded-full w-12 h-12 mb-4"></div>
114
+ <p class="text-gray-600">Generating your images... This may take a moment.</p>
115
+ </div>
116
+
117
+ <div id="imageResults" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
118
+ <!-- Images will be inserted here by JavaScript -->
119
+ </div>
120
+ </section>
121
+
122
+ <!-- Examples Section -->
123
+ <section class="mt-16">
124
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Inspiration Gallery</h3>
125
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
126
+ <div class="image-card bg-white rounded-xl overflow-hidden shadow-md">
127
+ <img src="https://source.unsplash.com/random/600x400/?fantasy" alt="Example image" class="w-full h-48 object-cover">
128
+ <div class="p-4">
129
+ <h4 class="font-semibold text-lg mb-2">Fantasy Landscape</h4>
130
+ <p class="text-gray-600 text-sm">"A magical forest with glowing mushrooms and fairies under a twilight sky"</p>
131
+ </div>
132
+ </div>
133
+ <div class="image-card bg-white rounded-xl overflow-hidden shadow-md">
134
+ <img src="https://source.unsplash.com/random/600x400/?cyberpunk" alt="Example image" class="w-full h-48 object-cover">
135
+ <div class="p-4">
136
+ <h4 class="font-semibold text-lg mb-2">Cyberpunk City</h4>
137
+ <p class="text-gray-600 text-sm">"Neon-lit streets in a futuristic Asian metropolis with rain reflections"</p>
138
+ </div>
139
+ </div>
140
+ <div class="image-card bg-white rounded-xl overflow-hidden shadow-md">
141
+ <img src="https://source.unsplash.com/random/600x400/?portrait" alt="Example image" class="w-full h-48 object-cover">
142
+ <div class="p-4">
143
+ <h4 class="font-semibold text-lg mb-2">Portrait</h4>
144
+ <p class="text-gray-600 text-sm">"A wise old wizard with a long white beard and intricate robes, digital art style"</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </section>
149
+ </main>
150
+
151
+ <!-- Footer -->
152
+ <footer class="bg-gray-800 text-white py-8">
153
+ <div class="container mx-auto px-4">
154
+ <div class="flex flex-col md:flex-row justify-between items-center">
155
+ <div class="mb-4 md:mb-0">
156
+ <h3 class="text-xl font-bold">AI Image Generator</h3>
157
+ <p class="text-gray-400">Create anything you can imagine</p>
158
+ </div>
159
+ <div class="flex space-x-6">
160
+ <a href="#" class="hover:text-purple-400 transition"><i class="fab fa-twitter text-xl"></i></a>
161
+ <a href="#" class="hover:text-purple-400 transition"><i class="fab fa-instagram text-xl"></i></a>
162
+ <a href="#" class="hover:text-purple-400 transition"><i class="fab fa-github text-xl"></i></a>
163
+ </div>
164
+ </div>
165
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
166
+ <p>© 2023 AI Image Generator. All rights reserved.</p>
167
+ </div>
168
+ </div>
169
+ </footer>
170
+
171
+ <script>
172
+ document.addEventListener('DOMContentLoaded', function() {
173
+ const form = document.getElementById('imageForm');
174
+ const resultsSection = document.getElementById('resultsSection');
175
+ const loadingIndicator = document.getElementById('loadingIndicator');
176
+ const imageResults = document.getElementById('imageResults');
177
+ const downloadAllBtn = document.getElementById('downloadAll');
178
+
179
+ // Initialize Gemini API
180
+ const API_KEY = 'AIzaSyDpSvm_yMKFiFv3VM4iS5cKtiwaicMj96w';
181
+ const genAI = new GoogleGenerativeAI(API_KEY);
182
+ const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });
183
+
184
+ form.addEventListener('submit', async function(e) {
185
+ e.preventDefault();
186
+
187
+ const prompt = document.getElementById('prompt').value.trim();
188
+ if (!prompt) {
189
+ alert('Please describe the image you want to generate');
190
+ return;
191
+ }
192
+
193
+ // Show loading indicator
194
+ resultsSection.classList.remove('hidden');
195
+ loadingIndicator.classList.remove('hidden');
196
+ imageResults.innerHTML = '';
197
+
198
+ try {
199
+ await generateImages(prompt);
200
+ } catch (error) {
201
+ console.error('Error generating images:', error);
202
+ alert('Failed to generate images. Please try again.');
203
+ } finally {
204
+ loadingIndicator.classList.add('hidden');
205
+ }
206
+ });
207
+
208
+ async function generateImages(prompt) {
209
+ const style = document.getElementById('style').value;
210
+ const count = parseInt(document.getElementById('count').value);
211
+ const quality = document.getElementById('quality').value;
212
+
213
+ imageResults.innerHTML = '';
214
+
215
+ try {
216
+ // Generate images using Gemini API
217
+ const result = await model.generateContent({
218
+ contents: [{
219
+ parts: [{
220
+ text: `Generate ${count} ${style}-style images based on: "${prompt}".
221
+ Quality should be ${quality}. Return as image URLs.`
222
+ }]
223
+ }]
224
+ });
225
+
226
+ const response = await result.response;
227
+ const text = response.text();
228
+
229
+ // Parse the response (assuming it returns image URLs)
230
+ const imageUrls = text.match(/https?:\/\/[^\s]+/g) || [];
231
+
232
+ if (imageUrls.length === 0) {
233
+ throw new Error('No images were generated');
234
+ }
235
+
236
+ // Display the generated images
237
+ imageUrls.slice(0, count).forEach((url, i) => {
238
+ const imageCard = document.createElement('div');
239
+ imageCard.className = 'image-card bg-white rounded-xl overflow-hidden shadow-md';
240
+ imageCard.innerHTML = `
241
+ <img src="${url}" alt="Generated image" class="w-full h-64 object-cover">
242
+ <div class="p-4">
243
+ <div class="flex justify-between items-start mb-2">
244
+ <h4 class="font-semibold text-lg">${getImageTitle(prompt)}</h4>
245
+ <div class="flex space-x-2">
246
+ <button class="download-btn text-purple-600 hover:text-purple-800" data-url="${url}">
247
+ <i class="fas fa-download"></i>
248
+ </button>
249
+ <button class="like-btn text-gray-400 hover:text-red-500">
250
+ <i class="far fa-heart"></i>
251
+ </button>
252
+ </div>
253
+ </div>
254
+ <p class="text-gray-600 text-sm mb-2">${truncatePrompt(prompt)}</p>
255
+ <span class="inline-block bg-gray-100 rounded-full px-3 py-1 text-xs font-semibold text-gray-700">${style}</span>
256
+ </div>
257
+ `;
258
+
259
+ imageResults.appendChild(imageCard);
260
+ });
261
+ } catch (error) {
262
+ console.error('Error generating images:', error);
263
+ throw error;
264
+ }
265
+
266
+ // Add event listeners to download buttons
267
+ document.querySelectorAll('.download-btn').forEach(btn => {
268
+ btn.addEventListener('click', function() {
269
+ const url = this.getAttribute('data-url');
270
+ downloadImage(url);
271
+ });
272
+ });
273
+
274
+ // Add event listeners to like buttons
275
+ document.querySelectorAll('.like-btn').forEach(btn => {
276
+ btn.addEventListener('click', function() {
277
+ const icon = this.querySelector('i');
278
+ if (icon.classList.contains('far')) {
279
+ icon.classList.remove('far');
280
+ icon.classList.add('fas', 'text-red-500');
281
+ } else {
282
+ icon.classList.remove('fas', 'text-red-500');
283
+ icon.classList.add('far');
284
+ }
285
+ });
286
+ });
287
+ }
288
+
289
+
290
+ function getImageTitle(prompt) {
291
+ const firstFewWords = prompt.split(' ').slice(0, 4).join(' ');
292
+ return firstFewWords + (prompt.split(' ').length > 4 ? '...' : '');
293
+ }
294
+
295
+ function truncatePrompt(prompt, maxLength = 60) {
296
+ return prompt.length > maxLength ? prompt.substring(0, maxLength) + '...' : prompt;
297
+ }
298
+
299
+ function downloadImage(url) {
300
+ // In a real app, you would need to implement proper download functionality
301
+ // This is just a simulation
302
+ const a = document.createElement('a');
303
+ a.href = url;
304
+ a.download = `ai-image-${Date.now()}.jpg`;
305
+ document.body.appendChild(a);
306
+ a.click();
307
+ document.body.removeChild(a);
308
+
309
+ // Show download confirmation
310
+ alert('Image download started!');
311
+ }
312
+
313
+ downloadAllBtn.addEventListener('click', function() {
314
+ const images = document.querySelectorAll('.download-btn');
315
+ if (images.length === 0) {
316
+ alert('No images to download');
317
+ return;
318
+ }
319
+
320
+ alert(`Preparing to download ${images.length} images...`);
321
+ // In a real app, you would implement proper batch download functionality
322
+ });
323
+ });
324
+ </script>
325
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AHMed3290mljdh/sdm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
326
+ </html>