Hugging Face's logo

Spaces:
tanmayhadke
/
Serverless-Marketing-Copy-Gen
Running

App Files Community
Tanmay Hadke commited on
Commit
1c76d88
·
verified ·
1 Parent(s): 50b2c63

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +217 -19
index.html CHANGED
@@ -1,19 +1,217 @@
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 Marketing Copy Generator</title>
7
+ <style>
8
+ :root {
9
+ --primary: #2563eb;
10
+ --background: #f8fafc;
11
+ --card-bg: #ffffff;
12
+ --text: #1e293b;
13
+ --border: #e2e8f0;
14
+ }
15
+ body {
16
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
17
+ background-color: var(--background);
18
+ color: var(--text);
19
+ line-height: 1.6;
20
+ margin: 0;
21
+ padding: 2rem;
22
+ display: flex;
23
+ justify-content: center;
24
+ }
25
+ .container {
26
+ max-width: 800px;
27
+ width: 100%;
28
+ }
29
+ h1 {
30
+ text-align: center;
31
+ color: var(--primary);
32
+ margin-bottom: 2rem;
33
+ }
34
+ .card {
35
+ background: var(--card-bg);
36
+ padding: 2rem;
37
+ border-radius: 12px;
38
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
39
+ margin-bottom: 2rem;
40
+ }
41
+ .form-group {
42
+ margin-bottom: 1.5rem;
43
+ }
44
+ label {
45
+ display: block;
46
+ font-weight: 600;
47
+ margin-bottom: 0.5rem;
48
+ }
49
+ input, textarea {
50
+ width: 100%;
51
+ padding: 0.75rem;
52
+ border: 1px solid var(--border);
53
+ border-radius: 6px;
54
+ font-family: inherit;
55
+ box-sizing: border-box;
56
+ }
57
+ textarea {
58
+ resize: vertical;
59
+ min-height: 100px;
60
+ }
61
+ button {
62
+ background-color: var(--primary);
63
+ color: white;
64
+ border: none;
65
+ padding: 1rem 2rem;
66
+ font-size: 1rem;
67
+ font-weight: 600;
68
+ border-radius: 6px;
69
+ cursor: pointer;
70
+ width: 100%;
71
+ transition: background-color 0.2s;
72
+ }
73
+ button:hover {
74
+ background-color: #1d4ed8;
75
+ }
76
+ button:disabled {
77
+ background-color: #93c5fd;
78
+ cursor: not-allowed;
79
+ }
80
+ .results {
81
+ display: none;
82
+ }
83
+ .platform-result {
84
+ margin-top: 1.5rem;
85
+ padding: 1.5rem;
86
+ background: #f1f5f9;
87
+ border-left: 4px solid var(--primary);
88
+ border-radius: 4px;
89
+ }
90
+ .platform-name {
91
+ font-weight: bold;
92
+ text-transform: uppercase;
93
+ font-size: 0.875rem;
94
+ color: var(--primary);
95
+ margin-bottom: 0.5rem;
96
+ }
97
+ .error {
98
+ color: #dc2626;
99
+ background: #fee2e2;
100
+ padding: 1rem;
101
+ border-radius: 6px;
102
+ margin-top: 1rem;
103
+ display: none;
104
+ }
105
+ </style>
106
+ </head>
107
+ <body>
108
+
109
+ <div class="container">
110
+ <h1>Dynamic Marketing Copy Generator</h1>
111
+
112
+ <div class="card">
113
+ <form id="marketingForm">
114
+ <div class="form-group">
115
+ <label for="product_name">Product Name</label>
116
+ <input type="text" id="product_name" placeholder="e.g., Equine Dream Interpreter" required>
117
+ </div>
118
+
119
+ <div class="form-group">
120
+ <label for="description">Product Description</label>
121
+ <textarea id="description" placeholder="What does your product do? What problem does it solve?" required></textarea>
122
+ </div>
123
+
124
+ <div class="form-group">
125
+ <label for="target_audience">Target Audience</label>
126
+ <input type="text" id="target_audience" placeholder="e.g., Equestrians and veterinary researchers" required>
127
+ </div>
128
+
129
+ <button type="submit" id="submitBtn">Generate Campaigns</button>
130
+ </form>
131
+ <div id="errorMessage" class="error"></div>
132
+ </div>
133
+
134
+ <div id="resultsContainer" class="results card">
135
+ <h2>Generated Campaigns</h2>
136
+ <p style="font-size: 0.875rem; color: #64748b;">Campaign ID: <span id="campaignIdDisplay"></span></p>
137
+
138
+ <div class="platform-result">
139
+ <div class="platform-name">Twitter</div>
140
+ <div id="twitterCopy"></div>
141
+ </div>
142
+
143
+ <div class="platform-result">
144
+ <div class="platform-name">LinkedIn</div>
145
+ <div id="linkedinCopy"></div>
146
+ </div>
147
+
148
+ <div class="platform-result">
149
+ <div class="platform-name">Instagram</div>
150
+ <div id="instagramCopy"></div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <script>
156
+ // --- SENIOR ENGINEER INSTRUCTION: REPLACE THIS URL ---
157
+ // Paste the Invoke URL from API Gateway here. Make sure it ends with /generate
158
+ const API_GATEWAY_URL = 'https://m64rmf7qx7.execute-api.us-east-1.amazonaws.com/generate';
159
+
160
+ document.getElementById('marketingForm').addEventListener('submit', async (e) => {
161
+ e.preventDefault(); // Prevent page reload
162
+
163
+ const btn = document.getElementById('submitBtn');
164
+ const errorDiv = document.getElementById('errorMessage');
165
+ const resultsDiv = document.getElementById('resultsContainer');
166
+
167
+ // Reset UI state
168
+ btn.disabled = true;
169
+ btn.innerText = 'Analyzing & Generating...';
170
+ errorDiv.style.display = 'none';
171
+ resultsDiv.style.display = 'none';
172
+
173
+ // Gather data from the form
174
+ const payload = {
175
+ product_name: document.getElementById('product_name').value,
176
+ description: document.getElementById('description').value,
177
+ target_audience: document.getElementById('target_audience').value
178
+ };
179
+
180
+ try {
181
+ // Make the POST request to your AWS Backend
182
+ const response = await fetch(API_GATEWAY_URL, {
183
+ method: 'POST',
184
+ headers: {
185
+ 'Content-Type': 'application/json'
186
+ },
187
+ body: JSON.stringify(payload)
188
+ });
189
+
190
+ const data = await response.json();
191
+
192
+ if (!response.ok) {
193
+ throw new Error(data.error || 'Failed to generate copy');
194
+ }
195
+
196
+ // Populate the UI with the LLM's response
197
+ document.getElementById('campaignIdDisplay').innerText = data.campaign_id;
198
+ document.getElementById('twitterCopy').innerText = data.variants.twitter;
199
+ document.getElementById('linkedinCopy').innerText = data.variants.linkedin;
200
+ document.getElementById('instagramCopy').innerText = data.variants.instagram;
201
+
202
+ // Show the results
203
+ resultsDiv.style.display = 'block';
204
+
205
+ } catch (error) {
206
+ console.error('Error:', error);
207
+ errorDiv.innerText = `Error: ${error.message}`;
208
+ errorDiv.style.display = 'block';
209
+ } finally {
210
+ // Reset button state
211
+ btn.disabled = false;
212
+ btn.innerText = 'Generate Campaigns';
213
+ }
214
+ });
215
+ </script>
216
+ </body>
217
+ </html>