Hugging Face's logo

Spaces:
gaur3009
/
minme
Running

App Files Community
gaur3009 commited on
Commit
2e0055d
·
verified ·
1 Parent(s): 409cbcf

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +966 -18
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Minme
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: pink
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: minme
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
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,967 @@
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 Campaign 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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .layer-card {
14
+ transition: all 0.3s ease;
15
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .layer-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .progress-ring__circle {
22
+ transition: stroke-dashoffset 0.35s;
23
+ transform: rotate(-90deg);
24
+ transform-origin: 50% 50%;
25
+ }
26
+ .animate-pulse {
27
+ animation: pulse 2s infinite;
28
+ }
29
+ @keyframes pulse {
30
+ 0% { opacity: 0.6; }
31
+ 50% { opacity: 1; }
32
+ 100% { opacity: 0.6; }
33
+ }
34
+ .tooltip {
35
+ position: relative;
36
+ }
37
+ .tooltip .tooltip-text {
38
+ visibility: hidden;
39
+ width: 200px;
40
+ background-color: #555;
41
+ color: #fff;
42
+ text-align: center;
43
+ border-radius: 6px;
44
+ padding: 5px;
45
+ position: absolute;
46
+ z-index: 1;
47
+ bottom: 125%;
48
+ left: 50%;
49
+ margin-left: -100px;
50
+ opacity: 0;
51
+ transition: opacity 0.3s;
52
+ }
53
+ .tooltip:hover .tooltip-text {
54
+ visibility: visible;
55
+ opacity: 1;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="gradient-bg min-h-screen">
60
+ <div class="container mx-auto px-4 py-8">
61
+ <!-- Header -->
62
+ <header class="text-center mb-12">
63
+ <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">AI Campaign Generator</h1>
64
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Transform your marketing ideas into high-performing campaigns with our 8-layer AI system</p>
65
+ </header>
66
+
67
+ <!-- Campaign Input Section -->
68
+ <div class="bg-white rounded-xl p-6 mb-8 layer-card">
69
+ <h2 class="text-2xl font-semibold text-indigo-700 mb-4">✨ Campaign Brief</h2>
70
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
71
+ <div>
72
+ <label class="block text-gray-700 mb-2">Campaign Goal</label>
73
+ <textarea id="campaignInput" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="4" placeholder="Example: Promote organic skincare with pink Gen Z theme"></textarea>
74
+ </div>
75
+ <div>
76
+ <label class="block text-gray-700 mb-2">Target Audience</label>
77
+ <input type="text" id="targetAudience" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Example: Gen Z women, 18-25">
78
+
79
+ <label class="block text-gray-700 mt-4 mb-2">Brand Tone</label>
80
+ <select id="brandTone" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
81
+ <option value="friendly">Friendly</option>
82
+ <option value="professional">Professional</option>
83
+ <option value="luxury">Luxury</option>
84
+ <option value="youthful">Youthful</option>
85
+ <option value="humorous">Humorous</option>
86
+ </select>
87
+ </div>
88
+ </div>
89
+ <button id="generateBtn" class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 flex items-center">
90
+ <i class="fas fa-magic mr-2"></i> Generate Campaign
91
+ </button>
92
+ </div>
93
+
94
+ <!-- Progress Indicator -->
95
+ <div id="progressSection" class="hidden bg-white rounded-xl p-6 mb-8 layer-card">
96
+ <h2 class="text-2xl font-semibold text-indigo-700 mb-4">Generating Your Campaign...</h2>
97
+ <div class="flex flex-col items-center">
98
+ <svg class="w-32 h-32 mb-4" id="progressRing">
99
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="52" cx="64" cy="64"/>
100
+ <circle class="text-indigo-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="52" cx="64" cy="64"/>
101
+ </svg>
102
+ <p id="progressText" class="text-gray-600">Initializing AI models...</p>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Layer Navigation -->
107
+ <div class="mb-8 bg-white rounded-xl p-6 layer-card">
108
+ <h2 class="text-2xl font-semibold text-indigo-700 mb-4">Campaign Layers</h2>
109
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
110
+ <button class="layer-nav-btn py-2 px-4 rounded-lg bg-indigo-100 text-indigo-700 font-medium" data-layer="1">1. User Input</button>
111
+ <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="2">2. Market Insight</button>
112
+ <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="3">3. Ad Script</button>
113
+ <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="4">4. Poster Gen</button>
114
+ <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="5">5. Taglines</button>
115
+ <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="6">6. Feedback</button>
116
+ <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="7">7. A/B Testing</button>
117
+ <button class="layer-nav-btn py-2 px-4 rounded-lg bg-gray-100 text-gray-700 font-medium" data-layer="8">8. Deployment</button>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Layer Content Sections -->
122
+ <div id="layerContent">
123
+ <!-- Layer 1: User Input -->
124
+ <div id="layer1" class="layer-section bg-white rounded-xl p-6 mb-8">
125
+ <div class="flex items-center mb-4">
126
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
127
+ <span class="font-bold">1</span>
128
+ </div>
129
+ <h2 class="text-2xl font-semibold text-indigo-700">User Input & Intent Understanding</h2>
130
+ </div>
131
+
132
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
133
+ <div>
134
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Detected Intent</h3>
135
+ <div class="bg-gray-50 p-4 rounded-lg">
136
+ <p id="detectedIntent" class="text-gray-700">Enter your campaign goal above to see analysis</p>
137
+ </div>
138
+
139
+ <h3 class="text-lg font-medium text-gray-800 mt-4 mb-2">Key Entities</h3>
140
+ <div id="keyEntities" class="flex flex-wrap gap-2">
141
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">No entities detected yet</span>
142
+ </div>
143
+ </div>
144
+
145
+ <div>
146
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
147
+ <div class="space-y-3">
148
+ <div class="flex items-center">
149
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
150
+ <i class="fas fa-brain text-blue-600"></i>
151
+ </div>
152
+ <div>
153
+ <p class="font-medium">Intent Detection</p>
154
+ <p class="text-sm text-gray-600">DistilBERT / T5 / MiniLM</p>
155
+ </div>
156
+ </div>
157
+ <div class="flex items-center">
158
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
159
+ <i class="fas fa-tags text-purple-600"></i>
160
+ </div>
161
+ <div>
162
+ <p class="font-medium">Named Entity Recognition</p>
163
+ <p class="text-sm text-gray-600">spaCy / BERT</p>
164
+ </div>
165
+ </div>
166
+ <div class="flex items-center">
167
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
168
+ <i class="fas fa-project-diagram text-green-600"></i>
169
+ </div>
170
+ <div>
171
+ <p class="font-medium">Prompt-to-Plan</p>
172
+ <p class="text-sm text-gray-600">GPT-3.5 / Mistral</p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Layer 2: Market Insight -->
181
+ <div id="layer2" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
182
+ <div class="flex items-center mb-4">
183
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
184
+ <span class="font-bold">2</span>
185
+ </div>
186
+ <h2 class="text-2xl font-semibold text-indigo-700">Market Insight & Ad Scraping</h2>
187
+ </div>
188
+
189
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
190
+ <div>
191
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Top Performing Ads</h3>
192
+ <div id="topAds" class="space-y-4">
193
+ <div class="border-l-4 border-indigo-400 pl-4 py-2 bg-gray-50">
194
+ <p class="font-medium">Loading competitor ad data...</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <div>
200
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Trending Keywords</h3>
201
+ <div id="trendingKeywords" class="flex flex-wrap gap-2">
202
+ <span class="animate-pulse bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm">organic</span>
203
+ <span class="animate-pulse bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm">skincare</span>
204
+ <span class="animate-pulse bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm">Gen Z</span>
205
+ </div>
206
+
207
+ <h3 class="text-lg font-medium text-gray-800 mt-4 mb-2">AI Models Used</h3>
208
+ <div class="space-y-3">
209
+ <div class="flex items-center">
210
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
211
+ <i class="fas fa-spider text-blue-600"></i>
212
+ </div>
213
+ <div>
214
+ <p class="font-medium">Ad Scraping</p>
215
+ <p class="text-sm text-gray-600">Scrapy / Playwright</p>
216
+ </div>
217
+ </div>
218
+ <div class="flex items-center">
219
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
220
+ <i class="fas fa-key text-purple-600"></i>
221
+ </div>
222
+ <div>
223
+ <p class="font-medium">Semantic Search</p>
224
+ <p class="text-sm text-gray-600">Sentence-BERT + ColBERT</p>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Layer 3: Ad Script Generation -->
233
+ <div id="layer3" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
234
+ <div class="flex items-center mb-4">
235
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
236
+ <span class="font-bold">3</span>
237
+ </div>
238
+ <h2 class="text-2xl font-semibold text-indigo-700">Ad Script Generation</h2>
239
+ </div>
240
+
241
+ <div class="mb-6">
242
+ <div class="flex space-x-4 mb-4">
243
+ <button class="script-style-btn px-4 py-2 bg-indigo-600 text-white rounded-lg" data-style="genz">Gen Z</button>
244
+ <button class="script-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="minimal">Minimal</button>
245
+ <button class="script-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="emotional">Emotional</button>
246
+ <button class="script-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="humorous">Humorous</button>
247
+ </div>
248
+
249
+ <div id="adScripts" class="space-y-4">
250
+ <div class="border border-gray-200 rounded-lg p-4">
251
+ <p class="text-gray-600">Select a style to generate ad scripts tailored to your campaign</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
257
+ <div>
258
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Tone Analysis</h3>
259
+ <div class="bg-gray-50 p-4 rounded-lg">
260
+ <div class="space-y-3">
261
+ <div>
262
+ <p class="font-medium text-sm text-gray-700">Confidence</p>
263
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
264
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
265
+ </div>
266
+ </div>
267
+ <div>
268
+ <p class="font-medium text-sm text-gray-700">Positivity</p>
269
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
270
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 0%"></div>
271
+ </div>
272
+ </div>
273
+ <div>
274
+ <p class="font-medium text-sm text-gray-700">Energy</p>
275
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
276
+ <div class="bg-yellow-600 h-2.5 rounded-full" style="width: 0%"></div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <div>
284
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
285
+ <div class="space-y-3">
286
+ <div class="flex items-center">
287
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
288
+ <i class="fas fa-robot text-blue-600"></i>
289
+ </div>
290
+ <div>
291
+ <p class="font-medium">LLM Generation</p>
292
+ <p class="text-sm text-gray-600">Mistral / GPT-3.5 / LLaMA-3</p>
293
+ </div>
294
+ </div>
295
+ <div class="flex items-center">
296
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
297
+ <i class="fas fa-sliders-h text-purple-600"></i>
298
+ </div>
299
+ <div>
300
+ <p class="font-medium">Tone Control</p>
301
+ <p class="text-sm text-gray-600">CTRL / Zest</p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Layer 4: Poster Generation -->
310
+ <div id="layer4" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
311
+ <div class="flex items-center mb-4">
312
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
313
+ <span class="font-bold">4</span>
314
+ </div>
315
+ <h2 class="text-2xl font-semibold text-indigo-700">Poster Generation</h2>
316
+ </div>
317
+
318
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
319
+ <div class="md:col-span-2">
320
+ <div class="flex space-x-4 mb-4">
321
+ <button class="poster-style-btn px-4 py-2 bg-indigo-600 text-white rounded-lg" data-style="modern">Modern</button>
322
+ <button class="poster-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="vintage">Vintage</button>
323
+ <button class="poster-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="minimal">Minimal</button>
324
+ <button class="poster-style-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-style="bold">Bold</button>
325
+ </div>
326
+
327
+ <div id="posterPreview" class="border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center bg-gray-50" style="height: 300px;">
328
+ <p class="text-gray-500">Poster preview will appear here</p>
329
+ </div>
330
+
331
+ <div class="mt-4 flex space-x-3">
332
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">
333
+ <i class="fas fa-download mr-2"></i> Download
334
+ </button>
335
+ <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg">
336
+ <i class="fas fa-random mr-2"></i> Regenerate
337
+ </button>
338
+ </div>
339
+ </div>
340
+
341
+ <div>
342
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Aesthetic Score</h3>
343
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
344
+ <div class="flex items-center justify-center mb-2">
345
+ <div class="text-4xl font-bold text-indigo-600">-</div>
346
+ <span class="text-gray-500 ml-1">/100</span>
347
+ </div>
348
+ <div class="text-center text-sm text-gray-600">Based on composition, color harmony, and visual appeal</div>
349
+ </div>
350
+
351
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
352
+ <div class="space-y-3">
353
+ <div class="flex items-center">
354
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
355
+ <i class="fas fa-image text-blue-600"></i>
356
+ </div>
357
+ <div>
358
+ <p class="font-medium">Image Generation</p>
359
+ <p class="text-sm text-gray-600">SDXL / DALLE-3</p>
360
+ </div>
361
+ </div>
362
+ <div class="flex items-center">
363
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
364
+ <i class="fas fa-star text-purple-600"></i>
365
+ </div>
366
+ <div>
367
+ <p class="font-medium">Aesthetic Scoring</p>
368
+ <p class="text-sm text-gray-600">CLIP + LAION</p>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Layer 5: Tagline & CTA -->
377
+ <div id="layer5" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
378
+ <div class="flex items-center mb-4">
379
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
380
+ <span class="font-bold">5</span>
381
+ </div>
382
+ <h2 class="text-2xl font-semibold text-indigo-700">Tagline & CTA Creator</h2>
383
+ </div>
384
+
385
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
386
+ <div>
387
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Generated Taglines</h3>
388
+ <div id="taglines" class="space-y-3">
389
+ <div class="border-l-4 border-indigo-400 pl-4 py-2 bg-gray-50">
390
+ <p class="text-gray-700">"Glow naturally, shine confidently with our organic skincare"</p>
391
+ <div class="mt-2 flex space-x-2">
392
+ <button class="text-xs px-2 py-1 bg-indigo-100 text-indigo-700 rounded">Use</button>
393
+ <button class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded">Regenerate</button>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <h3 class="text-lg font-medium text-gray-800 mt-6 mb-2">Call-to-Action</h3>
399
+ <div id="ctas" class="space-y-3">
400
+ <div class="border-l-4 border-green-400 pl-4 py-2 bg-gray-50">
401
+ <p class="text-gray-700">"Shop now and get 20% off your first order!"</p>
402
+ <div class="mt-2 flex space-x-2">
403
+ <button class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded">Use</button>
404
+ <button class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded">Regenerate</button>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <div>
411
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Emotional Impact</h3>
412
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
413
+ <div class="grid grid-cols-3 gap-4 text-center">
414
+ <div>
415
+ <div class="text-indigo-600 text-2xl font-bold">82%</div>
416
+ <div class="text-xs text-gray-500">Attention</div>
417
+ </div>
418
+ <div>
419
+ <div class="text-green-600 text-2xl font-bold">78%</div>
420
+ <div class="text-xs text-gray-500">Interest</div>
421
+ </div>
422
+ <div>
423
+ <div class="text-yellow-600 text-2xl font-bold">65%</div>
424
+ <div class="text-xs text-gray-500">Desire</div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
430
+ <div class="space-y-3">
431
+ <div class="flex items-center">
432
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
433
+ <i class="fas fa-quote-right text-blue-600"></i>
434
+ </div>
435
+ <div>
436
+ <p class="font-medium">Tagline Generator</p>
437
+ <p class="text-sm text-gray-600">GPT-2 fine-tuned</p>
438
+ </div>
439
+ </div>
440
+ <div class="flex items-center">
441
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
442
+ <i class="fas fa-bullseye text-purple-600"></i>
443
+ </div>
444
+ <div>
445
+ <p class="font-medium">AIDA Framework</p>
446
+ <p class="text-sm text-gray-600">Prompt Templates</p>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Layer 6: Feedback & Editor -->
455
+ <div id="layer6" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
456
+ <div class="flex items-center mb-4">
457
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
458
+ <span class="font-bold">6</span>
459
+ </div>
460
+ <h2 class="text-2xl font-semibold text-indigo-700">Feedback & Editor</h2>
461
+ </div>
462
+
463
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
464
+ <div>
465
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Edit Campaign Elements</h3>
466
+ <div class="bg-gray-50 p-4 rounded-lg">
467
+ <div class="mb-4">
468
+ <label class="block text-gray-700 mb-1">Ad Script</label>
469
+ <textarea class="w-full p-2 border border-gray-300 rounded" rows="3"></textarea>
470
+ </div>
471
+ <div class="mb-4">
472
+ <label class="block text-gray-700 mb-1">Visual Style</label>
473
+ <select class="w-full p-2 border border-gray-300 rounded">
474
+ <option>Modern</option>
475
+ <option>Vintage</option>
476
+ <option>Minimal</option>
477
+ </select>
478
+ </div>
479
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">
480
+ <i class="fas fa-save mr-2"></i> Save Changes
481
+ </button>
482
+ </div>
483
+ </div>
484
+
485
+ <div>
486
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Feedback</h3>
487
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
488
+ <div class="flex items-start">
489
+ <div class="bg-indigo-100 p-2 rounded-lg mr-3">
490
+ <i class="fas fa-lightbulb text-indigo-600"></i>
491
+ </div>
492
+ <div>
493
+ <p class="font-medium text-indigo-700">Suggestion</p>
494
+ <p class="text-sm text-gray-600">Consider adding more emojis for Gen Z appeal</p>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
500
+ <div class="space-y-3">
501
+ <div class="flex items-center">
502
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
503
+ <i class="fas fa-comment-alt text-blue-600"></i>
504
+ </div>
505
+ <div>
506
+ <p class="font-medium">Feedback Analysis</p>
507
+ <p class="text-sm text-gray-600">MiniLM / LLaMA2</p>
508
+ </div>
509
+ </div>
510
+ <div class="flex items-center">
511
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
512
+ <i class="fas fa-edit text-purple-600"></i>
513
+ </div>
514
+ <div>
515
+ <p class="font-medium">Prompt Rewriting</p>
516
+ <p class="text-sm text-gray-600">LangChain</p>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Layer 7: A/B Testing -->
525
+ <div id="layer7" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
526
+ <div class="flex items-center mb-4">
527
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
528
+ <span class="font-bold">7</span>
529
+ </div>
530
+ <h2 class="text-2xl font-semibold text-indigo-700">A/B Testing & Performance</h2>
531
+ </div>
532
+
533
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
534
+ <div>
535
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Campaign Variants</h3>
536
+ <div class="space-y-4">
537
+ <div class="border border-gray-200 rounded-lg p-4">
538
+ <div class="flex justify-between items-start">
539
+ <div>
540
+ <p class="font-medium">Variant A</p>
541
+ <p class="text-sm text-gray-600">Modern design with emotional appeal</p>
542
+ </div>
543
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Best</span>
544
+ </div>
545
+ <div class="mt-2 flex justify-between text-xs text-gray-500">
546
+ <span>CTR: 4.2%</span>
547
+ <span>Conv: 2.8%</span>
548
+ </div>
549
+ </div>
550
+ <div class="border border-gray-200 rounded-lg p-4">
551
+ <div class="flex justify-between items-start">
552
+ <div>
553
+ <p class="font-medium">Variant B</p>
554
+ <p class="text-sm text-gray-600">Minimal design with Gen Z tone</p>
555
+ </div>
556
+ </div>
557
+ <div class="mt-2 flex justify-between text-xs text-gray-500">
558
+ <span>CTR: 3.7%</span>
559
+ <span>Conv: 2.1%</span>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+
565
+ <div>
566
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Performance Prediction</h3>
567
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
568
+ <div class="grid grid-cols-2 gap-4">
569
+ <div>
570
+ <p class="text-sm text-gray-600">Estimated CTR</p>
571
+ <p class="font-bold text-indigo-600">3.8% - 4.5%</p>
572
+ </div>
573
+ <div>
574
+ <p class="text-sm text-gray-600">Conversion Rate</p>
575
+ <p class="font-bold text-green-600">2.2% - 3.1%</p>
576
+ </div>
577
+ <div>
578
+ <p class="text-sm text-gray-600">Cost Per Click</p>
579
+ <p class="font-bold text-blue-600">$0.42 - $0.58</p>
580
+ </div>
581
+ <div>
582
+ <p class="text-sm text-gray-600">ROAS</p>
583
+ <p class="font-bold text-purple-600">3.2x - 4.1x</p>
584
+ </div>
585
+ </div>
586
+ </div>
587
+
588
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
589
+ <div class="space-y-3">
590
+ <div class="flex items-center">
591
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
592
+ <i class="fas fa-chart-line text-blue-600"></i>
593
+ </div>
594
+ <div>
595
+ <p class="font-medium">CTR Predictor</p>
596
+ <p class="text-sm text-gray-600">LSTM / XGBoost</p>
597
+ </div>
598
+ </div>
599
+ <div class="flex items-center">
600
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
601
+ <i class="fas fa-calculator text-purple-600"></i>
602
+ </div>
603
+ <div>
604
+ <p class="font-medium">Conversion Estimator</p>
605
+ <p class="text-sm text-gray-600">AutoGluon / LightGBM</p>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+
613
+ <!-- Layer 8: Deployment -->
614
+ <div id="layer8" class="layer-section hidden bg-white rounded-xl p-6 mb-8">
615
+ <div class="flex items-center mb-4">
616
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
617
+ <span class="font-bold">8</span>
618
+ </div>
619
+ <h2 class="text-2xl font-semibold text-indigo-700">Campaign Deployment</h2>
620
+ </div>
621
+
622
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
623
+ <div>
624
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Publish Campaign</h3>
625
+ <div class="bg-gray-50 p-4 rounded-lg">
626
+ <div class="space-y-4">
627
+ <div class="flex items-center">
628
+ <input type="checkbox" id="facebook" class="mr-2">
629
+ <label for="facebook" class="flex items-center">
630
+ <i class="fab fa-facebook text-blue-600 mr-2"></i>
631
+ Facebook
632
+ </label>
633
+ </div>
634
+ <div class="flex items-center">
635
+ <input type="checkbox" id="instagram" class="mr-2">
636
+ <label for="instagram" class="flex items-center">
637
+ <i class="fab fa-instagram text-pink-600 mr-2"></i>
638
+ Instagram
639
+ </label>
640
+ </div>
641
+ <div class="flex items-center">
642
+ <input type="checkbox" id="google" class="mr-2">
643
+ <label for="google" class="flex items-center">
644
+ <i class="fab fa-google text-red-600 mr-2"></i>
645
+ Google Ads
646
+ </label>
647
+ </div>
648
+ </div>
649
+
650
+ <div class="mt-6">
651
+ <label class="block text-gray-700 mb-1">Campaign Schedule</label>
652
+ <select class="w-full p-2 border border-gray-300 rounded mb-2">
653
+ <option>Run continuously</option>
654
+ <option>Specific dates</option>
655
+ <option>Time of day</option>
656
+ </select>
657
+
658
+ <label class="block text-gray-700 mb-1">Daily Budget</label>
659
+ <input type="text" class="w-full p-2 border border-gray-300 rounded" placeholder="$20">
660
+ </div>
661
+
662
+ <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg w-full">
663
+ <i class="fas fa-paper-plane mr-2"></i> Publish Campaign
664
+ </button>
665
+ </div>
666
+ </div>
667
+
668
+ <div>
669
+ <h3 class="text-lg font-medium text-gray-800 mb-2">API Integration</h3>
670
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
671
+ <div class="flex items-center mb-3">
672
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
673
+ <i class="fas fa-check-circle text-green-600"></i>
674
+ </div>
675
+ <div>
676
+ <p class="font-medium">Connected Accounts</p>
677
+ <p class="text-sm text-gray-600">Facebook, Instagram</p>
678
+ </div>
679
+ </div>
680
+ <div class="flex items-center">
681
+ <div class="bg-yellow-100 p-2 rounded-lg mr-3">
682
+ <i class="fas fa-exclamation-circle text-yellow-600"></i>
683
+ </div>
684
+ <div>
685
+ <p class="font-medium">Google Ads</p>
686
+ <p class="text-sm text-gray-600">Requires re-authentication</p>
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+ <h3 class="text-lg font-medium text-gray-800 mb-2">AI Models Used</h3>
692
+ <div class="space-y-3">
693
+ <div class="flex items-center">
694
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
695
+ <i class="fas fa-code text-blue-600"></i>
696
+ </div>
697
+ <div>
698
+ <p class="font-medium">API Handlers</p>
699
+ <p class="text-sm text-gray-600">Meta Ad API</p>
700
+ </div>
701
+ </div>
702
+ <div class="flex items-center">
703
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
704
+ <i class="fas fa-calendar-alt text-purple-600"></i>
705
+ </div>
706
+ <div>
707
+ <p class="font-medium">Scheduling</p>
708
+ <p class="text-sm text-gray-600">Optimal timing algorithm</p>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+
717
+ <!-- Final CTA -->
718
+ <div class="bg-indigo-700 rounded-xl p-8 text-center text-white mb-8">
719
+ <h2 class="text-2xl md:text-3xl font-bold mb-3">Ready to launch your campaign?</h2>
720
+ <p class="text-indigo-100 mb-6 max-w-2xl mx-auto">Our AI-powered system has generated a complete marketing campaign tailored to your needs.</p>
721
+ <button class="px-6 py-3 bg-white text-indigo-700 font-medium rounded-lg hover:bg-indigo-100 transition duration-300">
722
+ <i class="fas fa-rocket mr-2"></i> Deploy Full Campaign
723
+ </button>
724
+ </div>
725
+ </div>
726
+
727
+ <script>
728
+ document.addEventListener('DOMContentLoaded', function() {
729
+ // Progress ring animation
730
+ const progressRing = document.querySelector('#progressRing .progress-ring__circle');
731
+ const radius = progressRing.r.baseVal.value;
732
+ const circumference = 2 * Math.PI * radius;
733
+ progressRing.style.strokeDasharray = circumference;
734
+ progressRing.style.strokeDashoffset = circumference;
735
+
736
+ // Layer navigation
737
+ const layerNavBtns = document.querySelectorAll('.layer-nav-btn');
738
+ const layerSections = document.querySelectorAll('.layer-section');
739
+
740
+ layerNavBtns.forEach(btn => {
741
+ btn.addEventListener('click', function() {
742
+ // Update active button
743
+ layerNavBtns.forEach(b => {
744
+ b.classList.remove('bg-indigo-100', 'text-indigo-700');
745
+ b.classList.add('bg-gray-100', 'text-gray-700');
746
+ });
747
+ this.classList.remove('bg-gray-100', 'text-gray-700');
748
+ this.classList.add('bg-indigo-100', 'text-indigo-700');
749
+
750
+ // Show corresponding section
751
+ const layerId = this.getAttribute('data-layer');
752
+ layerSections.forEach(section => {
753
+ section.classList.add('hidden');
754
+ });
755
+ document.getElementById(`layer${layerId}`).classList.remove('hidden');
756
+ });
757
+ });
758
+
759
+ // Generate campaign button
760
+ const generateBtn = document.getElementById('generateBtn');
761
+ const progressSection = document.getElementById('progressSection');
762
+ const progressText = document.getElementById('progressText');
763
+
764
+ generateBtn.addEventListener('click', function() {
765
+ const campaignInput = document.getElementById('campaignInput').value;
766
+ if (!campaignInput) {
767
+ alert('Please enter your campaign goal');
768
+ return;
769
+ }
770
+
771
+ // Show progress section
772
+ progressSection.classList.remove('hidden');
773
+ generateBtn.disabled = true;
774
+
775
+ // Simulate progress
776
+ let progress = 0;
777
+ const progressInterval = setInterval(() => {
778
+ progress += 5;
779
+ const offset = circumference - (progress / 100) * circumference;
780
+ progressRing.style.strokeDashoffset = offset;
781
+
782
+ // Update progress text
783
+ if (progress < 20) {
784
+ progressText.textContent = 'Initializing AI models...';
785
+ } else if (progress < 40) {
786
+ progressText.textContent = 'Analyzing market trends...';
787
+ } else if (progress < 60) {
788
+ progressText.textContent = 'Generating ad content...';
789
+ } else if (progress < 80) {
790
+ progressText.textContent = 'Creating visual assets...';
791
+ } else {
792
+ progressText.textContent = 'Finalizing campaign...';
793
+ }
794
+
795
+ if (progress >= 100) {
796
+ clearInterval(progressInterval);
797
+ setTimeout(() => {
798
+ progressSection.classList.add('hidden');
799
+ generateBtn.disabled = false;
800
+ updateCampaignResults(campaignInput);
801
+ }, 500);
802
+ }
803
+ }, 200);
804
+ });
805
+
806
+ // Update campaign results
807
+ function updateCampaignResults(input) {
808
+ // Layer 1: Intent and Entities
809
+ document.getElementById('detectedIntent').textContent = `Promote ${input.toLowerCase()} with focus on visual appeal and Gen Z engagement`;
810
+
811
+ const entitiesContainer = document.getElementById('keyEntities');
812
+ entitiesContainer.innerHTML = '';
813
+ const entities = ['organic', 'skincare', 'Gen Z', 'pink', 'promotion'];
814
+ entities.forEach(entity => {
815
+ const span = document.createElement('span');
816
+ span.className = 'bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm';
817
+ span.textContent = entity;
818
+ entitiesContainer.appendChild(span);
819
+ });
820
+
821
+ // Layer 2: Market Insights
822
+ const topAdsContainer = document.getElementById('topAds');
823
+ topAdsContainer.innerHTML = '';
824
+ const ads = [
825
+ "Organic Glow: 3-step routine for radiant skin (4.2% CTR)",
826
+ "Pink Perfect: Vegan skincare for Gen Z (3.8% CTR)",
827
+ "Clean Beauty: Chemical-free formulas (3.5% CTR)"
828
+ ];
829
+ ads.forEach(ad => {
830
+ const div = document.createElement('div');
831
+ div.className = 'border-l-4 border-indigo-400 pl-4 py-2 bg-gray-50';
832
+ div.innerHTML = `<p class="font-medium">${ad}</p>`;
833
+ topAdsContainer.appendChild(div);
834
+ });
835
+
836
+ // Activate first layer nav button
837
+ document.querySelector('.layer-nav-btn[data-layer="1"]').click();
838
+ }
839
+
840
+ // Ad script style buttons
841
+ const scriptStyleBtns = document.querySelectorAll('.script-style-btn');
842
+ scriptStyleBtns.forEach(btn => {
843
+ btn.addEventListener('click', function() {
844
+ scriptStyleBtns.forEach(b => {
845
+ b.classList.remove('bg-indigo-600', 'text-white');
846
+ b.classList.add('bg-gray-200', 'text-gray-700');
847
+ });
848
+ this.classList.remove('bg-gray-200', 'text-gray-700');
849
+ this.classList.add('bg-indigo-600', 'text-white');
850
+
851
+ const style = this.getAttribute('data-style');
852
+ generateAdScripts(style);
853
+ });
854
+ });
855
+
856
+ // Generate ad scripts based on style
857
+ function generateAdScripts(style) {
858
+ const adScriptsContainer = document.getElementById('adScripts');
859
+ adScriptsContainer.innerHTML = '';
860
+
861
+ let scripts = [];
862
+ if (style === 'genz') {
863
+ scripts = [
864
+ "🌸✨ Your skin deserves REAL ingredients! Our organic skincare is 100% natural, 100% effective, and 100% Gen Z approved. Swipe up to glow! #CleanSkin #OrganicGlow",
865
+ "POV: You found the perfect skincare routine 💖 Our pink-powered organic products are TikTok famous for a reason! Drop a ❤️ if you want that glass skin effect!"
866
+ ];
867
+ } else if (style === 'minimal') {
868
+ scripts = [
869
+ "Organic skincare, simplified. Three products. Visible results. Try our clinically-tested formulas today.",
870
+ "Pure ingredients. Clear skin. Our organic skincare delivers what others promise."
871
+ ];
872
+ } else if (style === 'emotional') {
873
+ scripts = [
874
+ "Your skin tells your story. Make it one of health and radiance with our organic skincare collection. Because you deserve to feel confident in your own skin.",
875
+ "Remember when skincare was simple? We do. That's why we created pure, effective organic products free from harsh chemicals. Your skin will thank you."
876
+ ];
877
+ } else {
878
+ scripts = [
879
+ "Warning: Our organic skincare may cause excessive compliments. Side effects include glowing skin and sudden confidence boosts. Use responsibly!",
880
+ "We put the 'organic' in 'organization' (because our 3-step routine will organize your skincare life). Bad puns, great products!"
881
+ ];
882
+ }
883
+
884
+ scripts.forEach(script => {
885
+ const div = document.createElement('div');
886
+ div.className = 'border border-gray-200 rounded-lg p-4';
887
+ div.innerHTML = `
888
+ <p class="text-gray-700">${script}</p>
889
+ <div class="mt-3 flex space-x-2">
890
+ <button class="text-xs px-2 py-1 bg-indigo-100 text-indigo-700 rounded">Use in Campaign</button>
891
+ <button class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded">
892
+ <i class="fas fa-copy mr-1"></i> Copy
893
+ </button>
894
+ </div>
895
+ `;
896
+ adScriptsContainer.appendChild(div);
897
+ });
898
+ }
899
+
900
+ // Poster style buttons
901
+ const posterStyleBtns = document.querySelectorAll('.poster-style-btn');
902
+ posterStyleBtns.forEach(btn => {
903
+ btn.addEventListener('click', function() {
904
+ posterStyleBtns.forEach(b => {
905
+ b.classList.remove('bg-indigo-600', 'text-white');
906
+ b.classList.add('bg-gray-200', 'text-gray-700');
907
+ });
908
+ this.classList.remove('bg-gray-200', 'text-gray-700');
909
+ this.classList.add('bg-indigo-600', 'text-white');
910
+
911
+ const style = this.getAttribute('data-style');
912
+ generatePosterPreview(style);
913
+ });
914
+ });
915
+
916
+ // Generate poster preview
917
+ function generatePosterPreview(style) {
918
+ const posterPreview = document.getElementById('posterPreview');
919
+ posterPreview.innerHTML = '';
920
+
921
+ // Create a mock poster based on style
922
+ const poster = document.createElement('div');
923
+ poster.className = 'w-full h-full flex flex-col justify-center items-center p-4';
924
+
925
+ if (style === 'modern') {
926
+ poster.innerHTML = `
927
+ <div class="bg-pink-50 w-full h-full rounded-lg flex flex-col justify-center items-center p-6 border border-pink-200">
928
+ <h3 class="text-2xl font-bold text-pink-700 mb-2">GLOW NATURALLY</h3>
929
+ <p class="text-gray-700 text-center mb-4">Organic skincare for Gen Z</p>
930
+ <div class="bg-white rounded-full w-24 h-24 mb-4 flex items-center justify-center text-pink-500 text-4xl">✨</div>
931
+ <p class="text-xs text-gray-500">100% natural ingredients</p>
932
+ </div>
933
+ `;
934
+ } else if (style === 'vintage') {
935
+ poster.innerHTML = `
936
+ <div class="bg-rose-100 w-full h-full rounded-lg flex flex-col justify-center items-center p-6 border-2 border-rose-300">
937
+ <h3 class="text-3xl font-serif text-rose-800 mb-1">Organic</h3>
938
+ <h3 class="text-3xl font-serif text-rose-800 mb-3">Skincare</h3>
939
+ <div class="border-t-2 border-rose-300 w-16 my-2"></div>
940
+ <p class="text-rose-700 italic">Since 2023</p>
941
+ </div>
942
+ `;
943
+ } else if (style === 'bold') {
944
+ poster.innerHTML = `
945
+ <div class="bg-pink-600 w-full h-full rounded-lg flex flex-col justify-center items-center p-6">
946
+ <h3 class="text-3xl font-bold text-white mb-2">YOUR SKIN</h3>
947
+ <h3 class="text-3xl font-bold text-white mb-4">DESERVES BETTER</h3>
948
+ <p class="text-pink-100 text-center">Try our organic skincare collection today</p>
949
+ </div>
950
+ `;
951
+ } else {
952
+ poster.innerHTML = `
953
+ <div class="bg-white w-full h-full rounded-lg flex flex-col justify-center items-center p-6 border border-gray-300">
954
+ <h3 class="text-xl text-gray-800 mb-1">organic</h3>
955
+ <h3 class="text-xl text-gray-800 mb-3">skincare</h3>
956
+ <div class="border-t border-gray-300 w-12 my-2"></div>
957
+ <p class="text-sm text-gray-500">pure. simple. effective.</p>
958
+ </div>
959
+ `;
960
+ }
961
+
962
+ posterPreview.appendChild(poster);
963
+ }
964
+ });
965
+ </script>
966
+ <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=gaur3009/minme" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
967
  </html>