Hugging Face's logo

Spaces:
sajjadmamun
/
im-to-pro
Running

App Files Community
sajjadmamun commited on
Commit
0584c6a
·
verified ·
1 Parent(s): 32dd8f7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +338 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Im To Pro
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: blue
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: im-to-pro
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,338 @@
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>Image to Prompt Generator</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
+ .dropzone {
11
+ border: 2px dashed #9CA3AF;
12
+ transition: all 0.3s ease;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #3B82F6;
16
+ background-color: rgba(59, 130, 246, 0.05);
17
+ }
18
+ .prompt-card {
19
+ transition: all 0.3s ease;
20
+ }
21
+ .prompt-card:hover {
22
+ transform: translateY(-2px);
23
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .loading-spinner {
26
+ animation: spin 1s linear infinite;
27
+ }
28
+ @keyframes spin {
29
+ 0% { transform: rotate(0deg); }
30
+ 100% { transform: rotate(360deg); }
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 min-h-screen">
35
+ <div class="container mx-auto px-4 py-12">
36
+ <!-- Header -->
37
+ <header class="text-center mb-12">
38
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Image to Prompt Generator</h1>
39
+ <p class="text-gray-600 max-w-2xl mx-auto">
40
+ Upload any image and get creative AI prompts generated automatically. Perfect for artists, writers, and content creators!
41
+ </p>
42
+ </header>
43
+
44
+ <!-- Main Content -->
45
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
46
+ <!-- Upload Section -->
47
+ <div class="p-8">
48
+ <div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer">
49
+ <div class="flex flex-col items-center justify-center">
50
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
51
+ <i class="fas fa-cloud-upload-alt text-blue-500 text-2xl"></i>
52
+ </div>
53
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Drag & drop your image here</h3>
54
+ <p class="text-gray-500 mb-4">or click to browse files</p>
55
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
56
+ <button id="uploadBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition">
57
+ Select Image
58
+ </button>
59
+ </div>
60
+ </div>
61
+ <div id="imagePreviewContainer" class="mt-6 hidden">
62
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Image Preview</h3>
63
+ <div class="flex flex-col md:flex-row gap-6">
64
+ <div class="w-full md:w-1/2">
65
+ <img id="imagePreview" src="#" alt="Preview" class="w-full h-auto rounded-lg border border-gray-200">
66
+ </div>
67
+ <div class="w-full md:w-1/2">
68
+ <div class="flex items-center mb-3">
69
+ <h4 class="text-md font-medium text-gray-700">Prompt Style</h4>
70
+ <div class="ml-auto relative">
71
+ <select id="styleSelect" class="appearance-none bg-gray-100 border border-gray-200 rounded-md px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
72
+ <option value="creative">Creative</option>
73
+ <option value="detailed">Detailed</option>
74
+ <option value="minimal">Minimal</option>
75
+ <option value="artistic">Artistic</option>
76
+ <option value="technical">Technical</option>
77
+ </select>
78
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
79
+ <i class="fas fa-chevron-down text-sm"></i>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ <button id="generateBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition flex items-center justify-center">
84
+ <span>Generate Prompts</span>
85
+ <i id="generateIcon" class="fas fa-magic ml-2"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Loading State -->
93
+ <div id="loadingState" class="p-8 hidden">
94
+ <div class="flex flex-col items-center justify-center py-12">
95
+ <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full loading-spinner mb-4"></div>
96
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Analyzing your image</h3>
97
+ <p class="text-gray-500">This may take a few moments...</p>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Results Section -->
102
+ <div id="resultsSection" class="p-8 hidden">
103
+ <div class="flex items-center justify-between mb-6">
104
+ <h2 class="text-xl font-bold text-gray-800">Generated Prompts</h2>
105
+ <button id="copyAllBtn" class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md transition flex items-center">
106
+ <i class="fas fa-copy mr-2"></i>
107
+ Copy All
108
+ </button>
109
+ </div>
110
+
111
+ <div id="promptsContainer" class="grid grid-cols-1 md:grid-cols-2 gap-4">
112
+ <!-- Prompts will be inserted here by JavaScript -->
113
+ </div>
114
+
115
+ <div class="mt-8 pt-6 border-t border-gray-200">
116
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Try another image</h3>
117
+ <button id="newImageBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-6 py-2 rounded-lg transition">
118
+ <i class="fas fa-redo mr-2"></i>
119
+ Start Over
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Features Section -->
126
+ <div class="max-w-4xl mx-auto mt-16">
127
+ <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">How It Works</h2>
128
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
129
+ <div class="bg-white p-6 rounded-xl shadow-sm">
130
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
131
+ <i class="fas fa-upload text-blue-500"></i>
132
+ </div>
133
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Upload Image</h3>
134
+ <p class="text-gray-600">Drag & drop or select any image from your device. We support JPG, PNG, and WEBP formats.</p>
135
+ </div>
136
+ <div class="bg-white p-6 rounded-xl shadow-sm">
137
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
138
+ <i class="fas fa-brain text-purple-500"></i>
139
+ </div>
140
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Analysis</h3>
141
+ <p class="text-gray-600">Our advanced AI analyzes the visual elements, composition, and style of your image.</p>
142
+ </div>
143
+ <div class="bg-white p-6 rounded-xl shadow-sm">
144
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
145
+ <i class="fas fa-lightbulb text-green-500"></i>
146
+ </div>
147
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Get Prompts</h3>
148
+ <p class="text-gray-600">Receive multiple creative prompts tailored to your image's content and your selected style.</p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <script>
155
+ document.addEventListener('DOMContentLoaded', function() {
156
+ // DOM Elements
157
+ const dropzone = document.getElementById('dropzone');
158
+ const fileInput = document.getElementById('fileInput');
159
+ const uploadBtn = document.getElementById('uploadBtn');
160
+ const imagePreviewContainer = document.getElementById('imagePreviewContainer');
161
+ const imagePreview = document.getElementById('imagePreview');
162
+ const generateBtn = document.getElementById('generateBtn');
163
+ const loadingState = document.getElementById('loadingState');
164
+ const resultsSection = document.getElementById('resultsSection');
165
+ const promptsContainer = document.getElementById('promptsContainer');
166
+ const copyAllBtn = document.getElementById('copyAllBtn');
167
+ const newImageBtn = document.getElementById('newImageBtn');
168
+ const styleSelect = document.getElementById('styleSelect');
169
+ const generateIcon = document.getElementById('generateIcon');
170
+
171
+ // Event Listeners
172
+ uploadBtn.addEventListener('click', () => fileInput.click());
173
+ fileInput.addEventListener('change', handleFileSelect);
174
+ dropzone.addEventListener('dragover', handleDragOver);
175
+ dropzone.addEventListener('dragleave', handleDragLeave);
176
+ dropzone.addEventListener('drop', handleDrop);
177
+ generateBtn.addEventListener('click', generatePrompts);
178
+ copyAllBtn.addEventListener('click', copyAllPrompts);
179
+ newImageBtn.addEventListener('click', resetForm);
180
+
181
+ // Functions
182
+ function handleFileSelect(e) {
183
+ const file = e.target.files[0];
184
+ if (file && file.type.match('image.*')) {
185
+ displayImagePreview(file);
186
+ }
187
+ }
188
+
189
+ function handleDragOver(e) {
190
+ e.preventDefault();
191
+ dropzone.classList.add('active');
192
+ }
193
+
194
+ function handleDragLeave() {
195
+ dropzone.classList.remove('active');
196
+ }
197
+
198
+ function handleDrop(e) {
199
+ e.preventDefault();
200
+ dropzone.classList.remove('active');
201
+
202
+ const file = e.dataTransfer.files[0];
203
+ if (file && file.type.match('image.*')) {
204
+ displayImagePreview(file);
205
+ }
206
+ }
207
+
208
+ function displayImagePreview(file) {
209
+ const reader = new FileReader();
210
+ reader.onload = function(e) {
211
+ imagePreview.src = e.target.result;
212
+ imagePreviewContainer.classList.remove('hidden');
213
+ dropzone.classList.add('hidden');
214
+ };
215
+ reader.readAsDataURL(file);
216
+ }
217
+
218
+ function generatePrompts() {
219
+ // Show loading state
220
+ imagePreviewContainer.classList.add('hidden');
221
+ loadingState.classList.remove('hidden');
222
+ generateIcon.classList.replace('fa-magic', 'fa-spinner');
223
+ generateIcon.classList.add('loading-spinner');
224
+
225
+ // Simulate API call with timeout
226
+ setTimeout(() => {
227
+ loadingState.classList.add('hidden');
228
+ resultsSection.classList.remove('hidden');
229
+ displayGeneratedPrompts();
230
+ }, 2500);
231
+ }
232
+
233
+ function displayGeneratedPrompts() {
234
+ // Clear previous prompts
235
+ promptsContainer.innerHTML = '';
236
+
237
+ // Get selected style
238
+ const style = styleSelect.value;
239
+
240
+ // Generate sample prompts based on style (in a real app, these would come from an API)
241
+ const samplePrompts = {
242
+ creative: [
243
+ "A surreal dreamscape where the elements of this image come alive in unexpected ways",
244
+ "Imagine this scene as part of a fantasy world with magical enhancements",
245
+ "Reinterpret this composition in the style of a famous artist's painting"
246
+ ],
247
+ detailed: [
248
+ "A highly detailed description of all visual elements including colors, textures, lighting, and spatial relationships",
249
+ "Break down the composition into its fundamental elements with precise terminology",
250
+ "Technical analysis of the image's color palette, contrast, and focal points"
251
+ ],
252
+ minimal: [
253
+ "Simple, clean interpretation focusing only on essential elements",
254
+ "Reduced to basic shapes and colors while maintaining recognizability",
255
+ "Minimalist version emphasizing negative space and simplicity"
256
+ ],
257
+ artistic: [
258
+ "Artistic interpretation with emphasis on brush strokes and painterly qualities",
259
+ "Describe how to recreate this image using traditional art techniques",
260
+ "Analysis of the artistic style and potential influences"
261
+ ],
262
+ technical: [
263
+ "Technical specifications for recreating this image in digital art software",
264
+ "Detailed breakdown of camera settings if this were a photograph",
265
+ "Color theory analysis with hex codes for major color areas"
266
+ ]
267
+ };
268
+
269
+ // Create prompt cards
270
+ samplePrompts[style].forEach((prompt, index) => {
271
+ const promptCard = document.createElement('div');
272
+ promptCard.className = 'prompt-card bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md cursor-pointer';
273
+ promptCard.innerHTML = `
274
+ <div class="flex items-start mb-3">
275
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mr-3">
276
+ <span class="text-blue-500 font-medium">${index + 1}</span>
277
+ </div>
278
+ <p class="text-gray-700 flex-grow">${prompt}</p>
279
+ </div>
280
+ <div class="flex justify-end">
281
+ <button class="copy-prompt-btn text-sm text-gray-500 hover:text-blue-500 transition">
282
+ <i class="fas fa-copy mr-1"></i>
283
+ Copy
284
+ </button>
285
+ </div>
286
+ `;
287
+ promptsContainer.appendChild(promptCard);
288
+
289
+ // Add click event to copy button
290
+ const copyBtn = promptCard.querySelector('.copy-prompt-btn');
291
+ copyBtn.addEventListener('click', (e) => {
292
+ e.stopPropagation();
293
+ navigator.clipboard.writeText(prompt);
294
+
295
+ // Show feedback
296
+ const originalText = copyBtn.innerHTML;
297
+ copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
298
+ setTimeout(() => {
299
+ copyBtn.innerHTML = originalText;
300
+ }, 2000);
301
+ });
302
+
303
+ // Add click event to select prompt
304
+ promptCard.addEventListener('click', () => {
305
+ navigator.clipboard.writeText(prompt);
306
+ promptCard.classList.add('border-blue-500', 'bg-blue-50');
307
+ setTimeout(() => {
308
+ promptCard.classList.remove('border-blue-500', 'bg-blue-50');
309
+ }, 1000);
310
+ });
311
+ });
312
+ }
313
+
314
+ function copyAllPrompts() {
315
+ const prompts = Array.from(document.querySelectorAll('.prompt-card p')).map(p => p.textContent);
316
+ navigator.clipboard.writeText(prompts.join('\n\n'));
317
+
318
+ // Show feedback
319
+ const originalText = copyAllBtn.innerHTML;
320
+ copyAllBtn.innerHTML = '<i class="fas fa-check mr-2"></i> All Copied!';
321
+ setTimeout(() => {
322
+ copyAllBtn.innerHTML = originalText;
323
+ }, 2000);
324
+ }
325
+
326
+ function resetForm() {
327
+ fileInput.value = '';
328
+ imagePreview.src = '#';
329
+ resultsSection.classList.add('hidden');
330
+ imagePreviewContainer.classList.add('hidden');
331
+ dropzone.classList.remove('hidden');
332
+ generateIcon.classList.replace('fa-spinner', 'fa-magic');
333
+ generateIcon.classList.remove('loading-spinner');
334
+ }
335
+ });
336
+ </script>
337
+ <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=sajjadmamun/im-to-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
338
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ image to prompt generator