Hugging Face's logo

Spaces:
Saeed504-N
/
ai-creative-studio
Running

App Files Community
Saeed504-N commited on
Commit
c015c98
·
verified ·
1 Parent(s): 857043f

Publish it

Browse files
Files changed (6) hide show
  1. ai-ad-generator.html +213 -0
  2. ai-chat.html +159 -0
  3. image-editor.html +215 -0
  4. image-generator.html +201 -0
  5. image-to-prompt.html +241 -0
  6. index.html +18 -20
ai-ad-generator.html ADDED
@@ -0,0 +1,213 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Ad Generator - AI Creative Studio</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#f97316', // orange-500
19
+ },
20
+ secondary: {
21
+ 500: '#f59e0b', // amber-500
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .glass-effect {
30
+ backdrop-filter: blur(10px);
31
+ background: rgba(15, 23, 42, 0.7);
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, #f97316, #f59e0b);
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ }
39
+
40
+ .card-hover {
41
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
42
+ }
43
+
44
+ .card-hover:hover {
45
+ transform: translateY(-5px);
46
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gray-900 text-white min-h-screen">
51
+ <!-- Background Animation -->
52
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
53
+
54
+ <!-- Header -->
55
+ <header class="glass-effect sticky top-0 z-50 border-b border-gray-800">
56
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
57
+ <div class="flex items-center space-x-2">
58
+ <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
59
+ <i data-feather="aperture" class="text-white"></i>
60
+ </div>
61
+ <h1 class="text-2xl font-bold gradient-text">AI Creative Studio</h1>
62
+ </div>
63
+
64
+ <nav class="hidden md:flex space-x-8">
65
+ <a href="image-to-prompt.html" class="font-medium hover:text-primary-500 transition-colors">Image to Prompt</a>
66
+ <a href="image-generator.html" class="font-medium hover:text-primary-500 transition-colors">Image Generator</a>
67
+ <a href="image-editor.html" class="font-medium hover:text-primary-500 transition-colors">Image Editor</a>
68
+ <a href="ai-ad-generator.html" class="font-medium hover:text-primary-500 transition-colors">AI Ad Generator</a>
69
+ <a href="ai-chat.html" class="font-medium hover:text-primary-500 transition-colors">AI Chat</a>
70
+ </nav>
71
+
72
+ <div class="flex items-center space-x-4">
73
+ <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium hover:opacity-90 transition-opacity">
74
+ Sign In
75
+ </button>
76
+ <button class="md:hidden">
77
+ <i data-feather="menu" class="w-6 h-6"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Main Content -->
84
+ <section class="py-16">
85
+ <div class="container mx-auto px-4">
86
+ <div class="max-w-4xl mx-auto">
87
+ <h1 class="text-3xl font-bold mb-2">AI Ad Generator</h1>
88
+ <p class="text-gray-400 mb-8">Create compelling advertisements with AI-powered design</p>
89
+
90
+ <div class="glass-effect rounded-2xl p-6 md:p-8 border border-gray-800">
91
+ <!-- Product Information -->
92
+ <div class="mb-8">
93
+ <label class="block text-gray-400 mb-2">Product Name</label>
94
+ <input
95
+ type="text"
96
+ class="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
97
+ placeholder="Enter product name">
98
+ </div>
99
+
100
+ <div class="mb-8">
101
+ <label class="block text-gray-400 mb-2">Product Description</label>
102
+ <textarea
103
+ class="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
104
+ rows="4"
105
+ placeholder="Describe your product..."></textarea>
106
+ </div>
107
+
108
+ <!-- Image Upload -->
109
+ <div class="mb-8">
110
+ <label class="block text-gray-400 mb-2">Product Image</label>
111
+ <div class="rounded-xl p-12 bg-gray-800 border border-gray-700">
112
+ <div class="flex flex-col items-center justify-center">
113
+ <i data-feather="upload-cloud" class="w-12 h-12 text-primary-500 mb-4"></i>
114
+ <h3 class="text-2xl font-semibold mb-2">Upload product image</h3>
115
+ <p class="text-gray-400 mb-6">or choose from stock images</p>
116
+ <button class="px-6 py-3 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium">
117
+ Choose File
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Ad Style Selection -->
124
+ <div class="mb-8">
125
+ <label class="block text-gray-400 mb-2">Ad Style</label>
126
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
127
+ <div class="bg-gray-800 rounded-xl p-4 card-hover cursor-pointer border-2 border-transparent hover:border-primary-500">
128
+ <h3 class="font-semibold mb-2">Minimalist</h3>
129
+ <p class="text-gray-400 text-sm">Clean and simple design</p>
130
+ </div>
131
+
132
+ <div class="bg-gray-800 rounded-xl p-4 card-hover cursor-pointer border-2 border-transparent hover:border-primary-500">
133
+ <h3 class="font-semibold mb-2">Bold & Vibrant</h3>
134
+ <p class="text-gray-400 text-sm">Eye-catching colors</p>
135
+ </div>
136
+
137
+ <div class="bg-gray-800 rounded-xl p-4 card-hover cursor-pointer border-2 border-transparent hover:border-primary-500">
138
+ <h3 class="font-semibold mb-2">Professional</h3>
139
+ <p class="text-gray-400 text-sm">Corporate and formal</p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Call to Action -->
145
+ <div class="mb-8">
146
+ <label class="block text-gray-400 mb-2">Call to Action</label>
147
+ <input
148
+ type="text"
149
+ class="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
150
+ placeholder="e.g. Shop Now, Learn More, Get Started">
151
+ </div>
152
+
153
+ <!-- Generate Button -->
154
+ <button class="w-full py-4 rounded-xl bg-gradient-to-r from-primary-500 to-secondary-500 font-bold text-lg hover:opacity-90 transition-opacity">
155
+ Generate Ad
156
+ </button>
157
+ </div>
158
+
159
+ <!-- Results Section -->
160
+ <div id="results-section" class="mt-12 glass-effect rounded-2xl p-6 md:p-8 border border-gray-800 hidden">
161
+ <h2 class="text-2xl font-bold mb-6">Generated Ad</h2>
162
+ <div class="bg-gray-800 rounded-xl p-6">
163
+ <img src="http://static.photos/abstract/640x360/789" alt="Generated Ad" class="rounded-lg w-full">
164
+ </div>
165
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
166
+ <button class="py-3 rounded-lg bg-gray-700 font-medium hover:bg-gray-600 transition-colors">
167
+ Download PNG
168
+ </button>
169
+ <button class="py-3 rounded-lg bg-gray-700 font-medium hover:bg-gray-600 transition-colors">
170
+ Download JPG
171
+ </button>
172
+ <button class="py-3 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium hover:opacity-90 transition-opacity">
173
+ Edit Further
174
+ </button>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Footer -->
182
+ <footer class="py-8 border-t border-gray-800">
183
+ <div class="container mx-auto px-4 text-center">
184
+ <p class="text-gray-500">
185
+ © 2023 AI Creative Studio. All rights reserved.
186
+ </p>
187
+ </div>
188
+ </footer>
189
+
190
+ <script>
191
+ feather.replace();
192
+
193
+ VANTA.GLOBE({
194
+ el: "#vanta-bg",
195
+ mouseControls: true,
196
+ touchControls: true,
197
+ gyroControls: false,
198
+ minHeight: 200.00,
199
+ minWidth: 200.00,
200
+ scale: 1.00,
201
+ scaleMobile: 1.00,
202
+ color: 0xf97316,
203
+ color2: 0xf59e0b,
204
+ backgroundColor: 0x0f172a
205
+ });
206
+
207
+ // Show results when generate button is clicked
208
+ document.querySelector('button.w-full.py-4').addEventListener('click', function() {
209
+ document.getElementById('results-section').classList.remove('hidden');
210
+ });
211
+ </script>
212
+ </body>
213
+ </html>
ai-chat.html ADDED
@@ -0,0 +1,159 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Chat - AI Creative Studio</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#f97316', // orange-500
19
+ },
20
+ secondary: {
21
+ 500: '#f59e0b', // amber-500
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .glass-effect {
30
+ backdrop-filter: blur(10px);
31
+ background: rgba(15, 23, 42, 0.7);
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, #f97316, #f59e0b);
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ }
39
+
40
+ .chat-bubble {
41
+ border-radius: 1rem;
42
+ padding: 1rem;
43
+ margin-bottom: 1rem;
44
+ max-width: 80%;
45
+ }
46
+
47
+ .user-bubble {
48
+ background: linear-gradient(90deg, #f97316, #f59e0b);
49
+ margin-left: auto;
50
+ }
51
+
52
+ .ai-bubble {
53
+ background: rgba(30, 41, 59, 0.7);
54
+ margin-right: auto;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-900 text-white min-h-screen">
59
+ <!-- Background Animation -->
60
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
61
+
62
+ <!-- Header -->
63
+ <header class="glass-effect sticky top-0 z-50 border-b border-gray-800">
64
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
65
+ <div class="flex items-center space-x-2">
66
+ <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
67
+ <i data-feather="aperture" class="text-white"></i>
68
+ </div>
69
+ <h1 class="text-2xl font-bold gradient-text">AI Creative Studio</h1>
70
+ </div>
71
+
72
+ <nav class="hidden md:flex space-x-8">
73
+ <a href="image-to-prompt.html" class="font-medium hover:text-primary-500 transition-colors">Image to Prompt</a>
74
+ <a href="image-generator.html" class="font-medium hover:text-primary-500 transition-colors">Image Generator</a>
75
+ <a href="image-editor.html" class="font-medium hover:text-primary-500 transition-colors">Image Editor</a>
76
+ <a href="ai-ad-generator.html" class="font-medium hover:text-primary-500 transition-colors">AI Ad Generator</a>
77
+ <a href="ai-chat.html" class="font-medium hover:text-primary-500 transition-colors">AI Chat</a>
78
+ </nav>
79
+
80
+ <div class="flex items-center space-x-4">
81
+ <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium hover:opacity-90 transition-opacity">
82
+ Sign In
83
+ </button>
84
+ <button class="md:hidden">
85
+ <i data-feather="menu" class="w-6 h-6"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </header>
90
+
91
+ <!-- Main Content -->
92
+ <section class="py-8 flex-1 flex flex-col">
93
+ <div class="container mx-auto px-4 flex-1 flex flex-col">
94
+ <div class="max-w-4xl mx-auto flex-1 flex flex-col">
95
+ <h1 class="text-3xl font-bold mb-2">AI Chat Assistant</h1>
96
+ <p class="text-gray-400 mb-6">Ask anything about creative design, image generation, or get help with your projects</p>
97
+
98
+ <!-- Chat Container -->
99
+ <div class="glass-effect rounded-2xl p-6 md:p-8 border border-gray-800 flex-1 flex flex-col">
100
+ <div class="flex-1 overflow-y-auto mb-6 space-y-4">
101
+ <!-- AI Message -->
102
+ <div class="chat-bubble ai-bubble">
103
+ <p>Hello! I'm your AI creative assistant. How can I help you today with your design projects?</p>
104
+ </div>
105
+
106
+ <!-- User Message -->
107
+ <div class="chat-bubble user-bubble">
108
+ <p>I need help creating a cyberpunk-style image of a futuristic city. Can you guide me?</p>
109
+ </div>
110
+
111
+ <!-- AI Response -->
112
+ <div class="chat-bubble ai-bubble">
113
+ <p>Certainly! For a cyberpunk cityscape, try using prompts like "futuristic cityscape with neon lights, flying cars, rain-slicked streets, towering skyscrapers, cyberpunk aesthetic, high detail, digital art". You can also specify color palettes focusing on blues, purples, and bright neon accents.</p>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Input Area -->
118
+ <div class="flex">
119
+ <input
120
+ type="text"
121
+ class="flex-1 bg-gray-800 border border-gray-700 rounded-l-xl p-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
122
+ placeholder="Type your message...">
123
+ <button class="bg-gradient-to-r from-primary-500 to-secondary-500 px-6 rounded-r-xl font-medium hover:opacity-90 transition-opacity">
124
+ Send
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </section>
131
+
132
+ <!-- Footer -->
133
+ <footer class="py-8 border-t border-gray-800">
134
+ <div class="container mx-auto px-4 text-center">
135
+ <p class="text-gray-500">
136
+ © 2023 AI Creative Studio. All rights reserved.
137
+ </p>
138
+ </div>
139
+ </footer>
140
+
141
+ <script>
142
+ feather.replace();
143
+
144
+ VANTA.GLOBE({
145
+ el: "#vanta-bg",
146
+ mouseControls: true,
147
+ touchControls: true,
148
+ gyroControls: false,
149
+ minHeight: 200.00,
150
+ minWidth: 200.00,
151
+ scale: 1.00,
152
+ scaleMobile: 1.00,
153
+ color: 0xf97316,
154
+ color2: 0xf59e0b,
155
+ backgroundColor: 0x0f172a
156
+ });
157
+ </script>
158
+ </body>
159
+ </html>
image-editor.html ADDED
@@ -0,0 +1,215 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Editor - AI Creative Studio</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#f97316', // orange-500
19
+ },
20
+ secondary: {
21
+ 500: '#f59e0b', // amber-500
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .glass-effect {
30
+ backdrop-filter: blur(10px);
31
+ background: rgba(15, 23, 42, 0.7);
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, #f97316, #f59e0b);
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ }
39
+
40
+ .card-hover {
41
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
42
+ }
43
+
44
+ .card-hover:hover {
45
+ transform: translateY(-5px);
46
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gray-900 text-white min-h-screen">
51
+ <!-- Background Animation -->
52
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
53
+
54
+ <!-- Header -->
55
+ <header class="glass-effect sticky top-0 z-50 border-b border-gray-800">
56
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
57
+ <div class="flex items-center space-x-2">
58
+ <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
59
+ <i data-feather="aperture" class="text-white"></i>
60
+ </div>
61
+ <h1 class="text-2xl font-bold gradient-text">AI Creative Studio</h1>
62
+ </div>
63
+
64
+ <nav class="hidden md:flex space-x-8">
65
+ <a href="image-to-prompt.html" class="font-medium hover:text-primary-500 transition-colors">Image to Prompt</a>
66
+ <a href="image-generator.html" class="font-medium hover:text-primary-500 transition-colors">Image Generator</a>
67
+ <a href="image-editor.html" class="font-medium hover:text-primary-500 transition-colors">Image Editor</a>
68
+ <a href="ai-ad-generator.html" class="font-medium hover:text-primary-500 transition-colors">AI Ad Generator</a>
69
+ <a href="ai-chat.html" class="font-medium hover:text-primary-500 transition-colors">AI Chat</a>
70
+ </nav>
71
+
72
+ <div class="flex items-center space-x-4">
73
+ <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium hover:opacity-90 transition-opacity">
74
+ Sign In
75
+ </button>
76
+ <button class="md:hidden">
77
+ <i data-feather="menu" class="w-6 h-6"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Main Content -->
84
+ <section class="py-16">
85
+ <div class="container mx-auto px-4">
86
+ <div class="max-w-4xl mx-auto">
87
+ <h1 class="text-3xl font-bold mb-2">AI Image Editor</h1>
88
+ <p class="text-gray-400 mb-8">Enhance and modify your images with AI-powered tools</p>
89
+
90
+ <div class="glass-effect rounded-2xl p-6 md:p-8 border border-gray-800">
91
+ <!-- Upload Area -->
92
+ <div class="rounded-xl p-12 mb-8 bg-gray-800 border border-gray-700">
93
+ <div class="flex flex-col items-center justify-center">
94
+ <i data-feather="upload-cloud" class="w-12 h-12 text-primary-500 mb-4"></i>
95
+ <h3 class="text-2xl font-semibold mb-2">Upload an image to edit</h3>
96
+ <p class="text-gray-400 mb-6">or choose from your recent uploads</p>
97
+ <button class="px-6 py-3 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium">
98
+ Choose File
99
+ </button>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Editing Tools -->
104
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
105
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
106
+ <div class="flex items-center mb-4">
107
+ <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center mr-3">
108
+ <i data-feather="wand" class="w-5 h-5"></i>
109
+ </div>
110
+ <h3 class="text-lg font-semibold">AI Enhance</h3>
111
+ </div>
112
+ <p class="text-gray-400 text-sm">Automatically improve image quality</p>
113
+ </div>
114
+
115
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
116
+ <div class="flex items-center mb-4">
117
+ <div class="w-10 h-10 rounded-lg bg-secondary-500 flex items-center justify-center mr-3">
118
+ <i data-feather="scissors" class="w-5 h-5"></i>
119
+ </div>
120
+ <h3 class="text-lg font-semibold">Background Remove</h3>
121
+ </div>
122
+ <p class="text-gray-400 text-sm">Remove background with one click</p>
123
+ </div>
124
+
125
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
126
+ <div class="flex items-center mb-4">
127
+ <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center mr-3">
128
+ <i data-feather="sun" class="w-5 h-5"></i>
129
+ </div>
130
+ <h3 class="text-lg font-semibold">Color Adjust</h3>
131
+ </div>
132
+ <p class="text-gray-400 text-sm">Adjust brightness, contrast, and saturation</p>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Advanced Tools -->
137
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
138
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
139
+ <div class="flex items-center mb-4">
140
+ <div class="w-10 h-10 rounded-lg bg-secondary-500 flex items-center justify-center mr-3">
141
+ <i data-feather="edit-3" class="w-5 h-5"></i>
142
+ </div>
143
+ <h3 class="text-lg font-semibold">Object Removal</h3>
144
+ </div>
145
+ <p class="text-gray-400 text-sm">Remove unwanted objects from your image</p>
146
+ </div>
147
+
148
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
149
+ <div class="flex items-center mb-4">
150
+ <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center mr-3">
151
+ <i data-feather="copy" class="w-5 h-5"></i>
152
+ </div>
153
+ <h3 class="text-lg font-semibold">Image Resize</h3>
154
+ </div>
155
+ <p class="text-gray-400 text-sm">Resize image while maintaining quality</p>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Apply Button -->
160
+ <button class="w-full py-4 rounded-xl bg-gradient-to-r from-primary-500 to-secondary-500 font-bold text-lg hover:opacity-90 transition-opacity">
161
+ Apply Edits
162
+ </button>
163
+ </div>
164
+
165
+ <!-- Results Section -->
166
+ <div id="results-section" class="mt-12 glass-effect rounded-2xl p-6 md:p-8 border border-gray-800 hidden">
167
+ <h2 class="text-2xl font-bold mb-6">Edited Image</h2>
168
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
169
+ <div class="bg-gray-800 rounded-xl p-6">
170
+ <h3 class="text-lg font-semibold mb-4">Original</h3>
171
+ <img src="http://static.photos/technology/640x360/123" alt="Original" class="rounded-lg w-full">
172
+ </div>
173
+ <div class="bg-gray-800 rounded-xl p-6">
174
+ <h3 class="text-lg font-semibold mb-4">Edited</h3>
175
+ <img src="http://static.photos/abstract/640x360/456" alt="Edited" class="rounded-lg w-full">
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- Footer -->
184
+ <footer class="py-8 border-t border-gray-800">
185
+ <div class="container mx-auto px-4 text-center">
186
+ <p class="text-gray-500">
187
+ © 2023 AI Creative Studio. All rights reserved.
188
+ </p>
189
+ </div>
190
+ </footer>
191
+
192
+ <script>
193
+ feather.replace();
194
+
195
+ VANTA.GLOBE({
196
+ el: "#vanta-bg",
197
+ mouseControls: true,
198
+ touchControls: true,
199
+ gyroControls: false,
200
+ minHeight: 200.00,
201
+ minWidth: 200.00,
202
+ scale: 1.00,
203
+ scaleMobile: 1.00,
204
+ color: 0xf97316,
205
+ color2: 0xf59e0b,
206
+ backgroundColor: 0x0f172a
207
+ });
208
+
209
+ // Show results when apply button is clicked
210
+ document.querySelector('button.w-full.py-4').addEventListener('click', function() {
211
+ document.getElementById('results-section').classList.remove('hidden');
212
+ });
213
+ </script>
214
+ </body>
215
+ </html>
image-generator.html ADDED
@@ -0,0 +1,201 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Generator - AI Creative Studio</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#f97316', // orange-500
19
+ },
20
+ secondary: {
21
+ 500: '#f59e0b', // amber-500
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .glass-effect {
30
+ backdrop-filter: blur(10px);
31
+ background: rgba(15, 23, 42, 0.7);
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, #f97316, #f59e0b);
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ }
39
+
40
+ .card-hover {
41
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
42
+ }
43
+
44
+ .card-hover:hover {
45
+ transform: translateY(-5px);
46
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gray-900 text-white min-h-screen">
51
+ <!-- Background Animation -->
52
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
53
+
54
+ <!-- Header -->
55
+ <header class="glass-effect sticky top-0 z-50 border-b border-gray-800">
56
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
57
+ <div class="flex items-center space-x-2">
58
+ <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
59
+ <i data-feather="aperture" class="text-white"></i>
60
+ </div>
61
+ <h1 class="text-2xl font-bold gradient-text">AI Creative Studio</h1>
62
+ </div>
63
+
64
+ <nav class="hidden md:flex space-x-8">
65
+ <a href="image-to-prompt.html" class="font-medium hover:text-primary-500 transition-colors">Image to Prompt</a>
66
+ <a href="image-generator.html" class="font-medium hover:text-primary-500 transition-colors">Image Generator</a>
67
+ <a href="image-editor.html" class="font-medium hover:text-primary-500 transition-colors">Image Editor</a>
68
+ <a href="ai-ad-generator.html" class="font-medium hover:text-primary-500 transition-colors">AI Ad Generator</a>
69
+ <a href="ai-chat.html" class="font-medium hover:text-primary-500 transition-colors">AI Chat</a>
70
+ </nav>
71
+
72
+ <div class="flex items-center space-x-4">
73
+ <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium hover:opacity-90 transition-opacity">
74
+ Sign In
75
+ </button>
76
+ <button class="md:hidden">
77
+ <i data-feather="menu" class="w-6 h-6"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Main Content -->
84
+ <section class="py-16">
85
+ <div class="container mx-auto px-4">
86
+ <div class="max-w-4xl mx-auto">
87
+ <h1 class="text-3xl font-bold mb-2">AI Image Generator</h1>
88
+ <p class="text-gray-400 mb-8">Create stunning visuals from text prompts or images</p>
89
+
90
+ <div class="glass-effect rounded-2xl p-6 md:p-8 border border-gray-800">
91
+ <!-- Prompt Input -->
92
+ <div class="mb-8">
93
+ <label class="block text-gray-400 mb-2">Describe what you want to create</label>
94
+ <textarea
95
+ class="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
96
+ rows="4"
97
+ placeholder="A futuristic cityscape with flying cars and neon lights, cyberpunk style..."></textarea>
98
+ </div>
99
+
100
+ <!-- Options Grid -->
101
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
102
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
103
+ <div class="flex items-center mb-4">
104
+ <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center mr-3">
105
+ <i data-feather="image" class="w-5 h-5"></i>
106
+ </div>
107
+ <h3 class="text-lg font-semibold">Image Reference</h3>
108
+ </div>
109
+ <p class="text-gray-400 text-sm">Upload an image for style reference</p>
110
+ </div>
111
+
112
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
113
+ <div class="flex items-center mb-4">
114
+ <div class="w-10 h-10 rounded-lg bg-secondary-500 flex items-center justify-center mr-3">
115
+ <i data-feather="droplet" class="w-5 h-5"></i>
116
+ </div>
117
+ <h3 class="text-lg font-semibold">Style</h3>
118
+ </div>
119
+ <select class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2 text-gray-300">
120
+ <option>None</option>
121
+ <option>Realistic</option>
122
+ <option>Abstract</option>
123
+ <option>Cartoon</option>
124
+ <option>Cyberpunk</option>
125
+ </select>
126
+ </div>
127
+
128
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
129
+ <div class="flex items-center mb-4">
130
+ <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center mr-3">
131
+ <i data-feather="settings" class="w-5 h-5"></i>
132
+ </div>
133
+ <h3 class="text-lg font-semibold">Advanced Settings</h3>
134
+ </div>
135
+ <p class="text-gray-400 text-sm">Adjust generation parameters</p>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Negative Prompt -->
140
+ <div class="mb-8">
141
+ <label class="block text-gray-400 mb-2">Negative Prompt</label>
142
+ <input
143
+ type="text"
144
+ class="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
145
+ placeholder="What to exclude from generation...">
146
+ </div>
147
+
148
+ <!-- Generate Button -->
149
+ <button class="w-full py-4 rounded-xl bg-gradient-to-r from-primary-500 to-secondary-500 font-bold text-lg hover:opacity-90 transition-opacity">
150
+ Generate Image
151
+ </button>
152
+ </div>
153
+
154
+ <!-- Results Section -->
155
+ <div id="results-section" class="mt-12 glass-effect rounded-2xl p-6 md:p-8 border border-gray-800 hidden">
156
+ <h2 class="text-2xl font-bold mb-6">Generated Image</h2>
157
+ <div class="bg-gray-800 rounded-xl p-6">
158
+ <img src="http://static.photos/abstract/640x360/789" alt="Generated" class="rounded-lg w-full">
159
+ </div>
160
+ <div class="mt-6">
161
+ <h3 class="text-lg font-semibold mb-2">Prompt Used</h3>
162
+ <p class="bg-gray-800 p-4 rounded-lg">A futuristic cityscape with flying cars and neon lights, cyberpunk style, high detail, digital art</p>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Footer -->
170
+ <footer class="py-8 border-t border-gray-800">
171
+ <div class="container mx-auto px-4 text-center">
172
+ <p class="text-gray-500">
173
+ © 2023 AI Creative Studio. All rights reserved.
174
+ </p>
175
+ </div>
176
+ </footer>
177
+
178
+ <script>
179
+ feather.replace();
180
+
181
+ VANTA.GLOBE({
182
+ el: "#vanta-bg",
183
+ mouseControls: true,
184
+ touchControls: true,
185
+ gyroControls: false,
186
+ minHeight: 200.00,
187
+ minWidth: 200.00,
188
+ scale: 1.00,
189
+ scaleMobile: 1.00,
190
+ color: 0xf97316,
191
+ color2: 0xf59e0b,
192
+ backgroundColor: 0x0f172a
193
+ });
194
+
195
+ // Show results when generate button is clicked
196
+ document.querySelector('button.w-full.py-4').addEventListener('click', function() {
197
+ document.getElementById('results-section').classList.remove('hidden');
198
+ });
199
+ </script>
200
+ </body>
201
+ </html>
image-to-prompt.html ADDED
@@ -0,0 +1,241 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 - AI Creative Studio</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#f97316', // orange-500
19
+ },
20
+ secondary: {
21
+ 500: '#f59e0b', // amber-500
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .glass-effect {
30
+ backdrop-filter: blur(10px);
31
+ background: rgba(15, 23, 42, 0.7);
32
+ }
33
+
34
+ .upload-area {
35
+ border: 2px dashed #f97316;
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .upload-area:hover {
40
+ border-color: #f59e0b;
41
+ background: rgba(249, 115, 22, 0.05);
42
+ }
43
+
44
+ .gradient-text {
45
+ background: linear-gradient(90deg, #f97316, #f59e0b);
46
+ -webkit-background-clip: text;
47
+ -webkit-text-fill-color: transparent;
48
+ }
49
+
50
+ .card-hover {
51
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
52
+ }
53
+
54
+ .card-hover:hover {
55
+ transform: translateY(-5px);
56
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-900 text-white min-h-screen">
61
+ <!-- Background Animation -->
62
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
63
+
64
+ <!-- Header -->
65
+ <header class="glass-effect sticky top-0 z-50 border-b border-gray-800">
66
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
67
+ <div class="flex items-center space-x-2">
68
+ <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
69
+ <i data-feather="aperture" class="text-white"></i>
70
+ </div>
71
+ <h1 class="text-2xl font-bold gradient-text">AI Creative Studio</h1>
72
+ </div>
73
+
74
+ <nav class="hidden md:flex space-x-8">
75
+ <a href="image-to-prompt.html" class="font-medium hover:text-primary-500 transition-colors">Image to Prompt</a>
76
+ <a href="image-generator.html" class="font-medium hover:text-primary-500 transition-colors">Image Generator</a>
77
+ <a href="image-editor.html" class="font-medium hover:text-primary-500 transition-colors">Image Editor</a>
78
+ <a href="ai-ad-generator.html" class="font-medium hover:text-primary-500 transition-colors">AI Ad Generator</a>
79
+ <a href="ai-chat.html" class="font-medium hover:text-primary-500 transition-colors">AI Chat</a>
80
+ </nav>
81
+
82
+ <div class="flex items-center space-x-4">
83
+ <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium hover:opacity-90 transition-opacity">
84
+ Sign In
85
+ </button>
86
+ <button class="md:hidden">
87
+ <i data-feather="menu" class="w-6 h-6"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </header>
92
+
93
+ <!-- Main Content -->
94
+ <section class="py-16">
95
+ <div class="container mx-auto px-4">
96
+ <div class="max-w-4xl mx-auto">
97
+ <h1 class="text-3xl font-bold mb-2">Image to Prompt Converter</h1>
98
+ <p class="text-gray-400 mb-8">Upload an image or video and get a descriptive prompt generated by AI</p>
99
+
100
+ <div class="glass-effect rounded-2xl p-6 md:p-8 border border-gray-800">
101
+ <!-- Upload Area -->
102
+ <div class="upload-area rounded-xl p-12 mb-8 cursor-pointer">
103
+ <div class="flex flex-col items-center justify-center">
104
+ <i data-feather="upload-cloud" class="w-12 h-12 text-primary-500 mb-4"></i>
105
+ <h3 class="text-2xl font-semibold mb-2">Upload an image or video</h3>
106
+ <p class="text-gray-400 mb-6">or describe your idea below</p>
107
+ <button class="px-6 py-3 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium">
108
+ Choose File
109
+ </button>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Preview Area -->
114
+ <div class="mb-8">
115
+ <img id="preview-image" src="http://static.photos/technology/640x360/123" alt="Preview" class="rounded-xl mx-auto max-h-96 hidden">
116
+ </div>
117
+
118
+ <!-- Divider -->
119
+ <div class="relative flex items-center py-6 mb-8">
120
+ <div class="flex-grow border-t border-gray-700"></div>
121
+ <span class="flex-shrink mx-4 text-gray-500">OR</span>
122
+ <div class="flex-grow border-t border-gray-700"></div>
123
+ </div>
124
+
125
+ <!-- Text Input -->
126
+ <div class="mb-8">
127
+ <textarea
128
+ class="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
129
+ rows="4"
130
+ placeholder="Describe your idea... (Supports image and video references)"></textarea>
131
+ </div>
132
+
133
+ <!-- Options Grid -->
134
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
135
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
136
+ <div class="flex items-center mb-4">
137
+ <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center mr-3">
138
+ <i data-feather="wand" class="w-5 h-5"></i>
139
+ </div>
140
+ <h3 class="text-lg font-semibold">Magic Enhance</h3>
141
+ </div>
142
+ <p class="text-gray-400 text-sm">Automatically improve your prompt</p>
143
+ </div>
144
+
145
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
146
+ <div class="flex items-center mb-4">
147
+ <div class="w-10 h-10 rounded-lg bg-secondary-500 flex items-center justify-center mr-3">
148
+ <i data-feather="droplet" class="w-5 h-5"></i>
149
+ </div>
150
+ <h3 class="text-lg font-semibold">Style</h3>
151
+ </div>
152
+ <select class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2 text-gray-300">
153
+ <option>None</option>
154
+ <option>Realistic</option>
155
+ <option>Abstract</option>
156
+ <option>Cartoon</option>
157
+ <option>Cyberpunk</option>
158
+ </select>
159
+ </div>
160
+
161
+ <div class="bg-gray-800 rounded-xl p-6 card-hover">
162
+ <div class="flex items-center mb-4">
163
+ <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center mr-3">
164
+ <i data-feather="video" class="w-5 h-5"></i>
165
+ </div>
166
+ <h3 class="text-lg font-semibold">Video Reference</h3>
167
+ </div>
168
+ <p class="text-gray-400 text-sm">Upload video for image generation</p>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Negative Prompt -->
173
+ <div class="mb-8">
174
+ <label class="block text-gray-400 mb-2">Negative Prompt</label>
175
+ <input
176
+ type="text"
177
+ class="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
178
+ placeholder="What to exclude from generation... (Supports image/video references)">
179
+ </div>
180
+
181
+ <!-- Generate Button -->
182
+ <button class="w-full py-4 rounded-xl bg-gradient-to-r from-primary-500 to-secondary-500 font-bold text-lg hover:opacity-90 transition-opacity">
183
+ Generate Prompts
184
+ </button>
185
+ </div>
186
+
187
+ <!-- Results Section -->
188
+ <div id="results-section" class="mt-12 glass-effect rounded-2xl p-6 md:p-8 border border-gray-800 hidden">
189
+ <h2 class="text-2xl font-bold mb-6">Generated Results</h2>
190
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
191
+ <div class="bg-gray-800 rounded-xl p-6">
192
+ <h3 class="text-lg font-semibold mb-4">Original Image</h3>
193
+ <img src="http://static.photos/technology/640x360/123" alt="Original" class="rounded-lg w-full">
194
+ </div>
195
+ <div class="bg-gray-800 rounded-xl p-6">
196
+ <h3 class="text-lg font-semibold mb-4">Enhanced Result</h3>
197
+ <img src="http://static.photos/abstract/640x360/456" alt="Enhanced" class="rounded-lg w-full">
198
+ </div>
199
+ </div>
200
+ <div class="mt-6">
201
+ <h3 class="text-lg font-semibold mb-2">Generated Prompt</h3>
202
+ <p class="bg-gray-800 p-4 rounded-lg">A futuristic cityscape with flying cars and neon lights, cyberpunk style, high detail, digital art</p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Footer -->
210
+ <footer class="py-8 border-t border-gray-800">
211
+ <div class="container mx-auto px-4 text-center">
212
+ <p class="text-gray-500">
213
+ © 2023 AI Creative Studio. All rights reserved.
214
+ </p>
215
+ </div>
216
+ </footer>
217
+
218
+ <script>
219
+ feather.replace();
220
+
221
+ VANTA.GLOBE({
222
+ el: "#vanta-bg",
223
+ mouseControls: true,
224
+ touchControls: true,
225
+ gyroControls: false,
226
+ minHeight: 200.00,
227
+ minWidth: 200.00,
228
+ scale: 1.00,
229
+ scaleMobile: 1.00,
230
+ color: 0xf97316,
231
+ color2: 0xf59e0b,
232
+ backgroundColor: 0x0f172a
233
+ });
234
+
235
+ // Show results when generate button is clicked
236
+ document.querySelector('button.w-full.py-4').addEventListener('click', function() {
237
+ document.getElementById('results-section').classList.remove('hidden');
238
+ });
239
+ </script>
240
+ </body>
241
+ </html>
index.html CHANGED
@@ -70,16 +70,14 @@
70
  </div>
71
  <h1 class="text-2xl font-bold gradient-text">AI Creative Studio</h1>
72
  </div>
73
-
74
- <nav class="hidden md:flex space-x-8">
75
- <a href="#" class="font-medium hover:text-primary-500 transition-colors">Image to Prompt</a>
76
- <a href="#" class="font-medium hover:text-primary-500 transition-colors">Image Generator</a>
77
- <a href="#" class="font-medium hover:text-primary-500 transition-colors">Image Editor</a>
78
- <a href="#" class="font-medium hover:text-primary-500 transition-colors">AI Ad Generator</a>
79
- <a href="#" class="font-medium hover:text-primary-500 transition-colors">AI Chat</a>
80
  </nav>
81
-
82
- <div class="flex items-center space-x-4">
83
  <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium hover:opacity-90 transition-opacity">
84
  Sign In
85
  </button>
@@ -213,46 +211,46 @@
213
  <section class="py-16 bg-gray-800/50">
214
  <div class="container mx-auto px-4">
215
  <h2 class="text-3xl font-bold text-center mb-16">Our AI Tools</h2>
216
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
217
- <div class="bg-gray-800 rounded-xl p-6 text-center card-hover">
218
  <div class="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center mx-auto mb-4">
219
  <i data-feather="image" class="w-8 h-8 text-primary-500"></i>
220
  </div>
221
  <h3 class="text-xl font-semibold mb-2">Image to Prompt</h3>
222
  <p class="text-gray-400 text-sm">Convert images/videos to descriptive prompts</p>
223
- </div>
224
 
225
- <div class="bg-gray-800 rounded-xl p-6 text-center card-hover">
226
  <div class="w-16 h-16 rounded-full bg-secondary-500/20 flex items-center justify-center mx-auto mb-4">
227
  <i data-feather="camera" class="w-8 h-8 text-secondary-500"></i>
228
  </div>
229
  <h3 class="text-xl font-semibold mb-2">Image Generator</h3>
230
  <p class="text-gray-400 text-sm">Create stunning visuals from text/images</p>
231
- </div>
232
 
233
- <div class="bg-gray-800 rounded-xl p-6 text-center card-hover">
234
  <div class="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center mx-auto mb-4">
235
  <i data-feather="edit" class="w-8 h-8 text-primary-500"></i>
236
  </div>
237
  <h3 class="text-xl font-semibold mb-2">Image Editor</h3>
238
  <p class="text-gray-400 text-sm">Enhance and modify your images</p>
239
- </div>
240
 
241
- <div class="bg-gray-800 rounded-xl p-6 text-center card-hover">
242
  <div class="w-16 h-16 rounded-full bg-secondary-500/20 flex items-center justify-center mx-auto mb-4">
243
  <i data-feather="layout" class="w-8 h-8 text-secondary-500"></i>
244
  </div>
245
  <h3 class="text-xl font-semibold mb-2">AI Ad Generator</h3>
246
  <p class="text-gray-400 text-sm">Create compelling advertisements with image support</p>
247
- </div>
248
 
249
- <div class="bg-gray-800 rounded-xl p-6 text-center card-hover">
250
  <div class="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center mx-auto mb-4">
251
  <i data-feather="message-circle" class="w-8 h-8 text-primary-500"></i>
252
  </div>
253
  <h3 class="text-xl font-semibold mb-2">AI Chat</h3>
254
  <p class="text-gray-400 text-sm">Converse with our intelligent assistant</p>
255
- </div>
256
  </div>
257
  </div>
258
  </section>
 
70
  </div>
71
  <h1 class="text-2xl font-bold gradient-text">AI Creative Studio</h1>
72
  </div>
73
+ <nav class="hidden md:flex space-x-8">
74
+ <a href="image-to-prompt.html" class="font-medium hover:text-primary-500 transition-colors">Image to Prompt</a>
75
+ <a href="image-generator.html" class="font-medium hover:text-primary-500 transition-colors">Image Generator</a>
76
+ <a href="image-editor.html" class="font-medium hover:text-primary-500 transition-colors">Image Editor</a>
77
+ <a href="ai-ad-generator.html" class="font-medium hover:text-primary-500 transition-colors">AI Ad Generator</a>
78
+ <a href="ai-chat.html" class="font-medium hover:text-primary-500 transition-colors">AI Chat</a>
 
79
  </nav>
80
+ <div class="flex items-center space-x-4">
 
81
  <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 font-medium hover:opacity-90 transition-opacity">
82
  Sign In
83
  </button>
 
211
  <section class="py-16 bg-gray-800/50">
212
  <div class="container mx-auto px-4">
213
  <h2 class="text-3xl font-bold text-center mb-16">Our AI Tools</h2>
214
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
215
+ <a href="image-to-prompt.html" class="bg-gray-800 rounded-xl p-6 text-center card-hover block">
216
  <div class="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center mx-auto mb-4">
217
  <i data-feather="image" class="w-8 h-8 text-primary-500"></i>
218
  </div>
219
  <h3 class="text-xl font-semibold mb-2">Image to Prompt</h3>
220
  <p class="text-gray-400 text-sm">Convert images/videos to descriptive prompts</p>
221
+ </a>
222
 
223
+ <a href="image-generator.html" class="bg-gray-800 rounded-xl p-6 text-center card-hover block">
224
  <div class="w-16 h-16 rounded-full bg-secondary-500/20 flex items-center justify-center mx-auto mb-4">
225
  <i data-feather="camera" class="w-8 h-8 text-secondary-500"></i>
226
  </div>
227
  <h3 class="text-xl font-semibold mb-2">Image Generator</h3>
228
  <p class="text-gray-400 text-sm">Create stunning visuals from text/images</p>
229
+ </a>
230
 
231
+ <a href="image-editor.html" class="bg-gray-800 rounded-xl p-6 text-center card-hover block">
232
  <div class="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center mx-auto mb-4">
233
  <i data-feather="edit" class="w-8 h-8 text-primary-500"></i>
234
  </div>
235
  <h3 class="text-xl font-semibold mb-2">Image Editor</h3>
236
  <p class="text-gray-400 text-sm">Enhance and modify your images</p>
237
+ </a>
238
 
239
+ <a href="ai-ad-generator.html" class="bg-gray-800 rounded-xl p-6 text-center card-hover block">
240
  <div class="w-16 h-16 rounded-full bg-secondary-500/20 flex items-center justify-center mx-auto mb-4">
241
  <i data-feather="layout" class="w-8 h-8 text-secondary-500"></i>
242
  </div>
243
  <h3 class="text-xl font-semibold mb-2">AI Ad Generator</h3>
244
  <p class="text-gray-400 text-sm">Create compelling advertisements with image support</p>
245
+ </a>
246
 
247
+ <a href="ai-chat.html" class="bg-gray-800 rounded-xl p-6 text-center card-hover block">
248
  <div class="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center mx-auto mb-4">
249
  <i data-feather="message-circle" class="w-8 h-8 text-primary-500"></i>
250
  </div>
251
  <h3 class="text-xl font-semibold mb-2">AI Chat</h3>
252
  <p class="text-gray-400 text-sm">Converse with our intelligent assistant</p>
253
+ </a>
254
  </div>
255
  </div>
256
  </section>