Hugging Face's logo

Spaces:
ElonMuskTeslaMarketingDepartment
/
editor
Sleeping

App Files Community
ElonMuskTeslaMarketingDepartment commited on
Commit
0cd855b
·
verified ·
1 Parent(s): 873c664

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +330 -0
app.py ADDED
@@ -0,0 +1,330 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import gradio as gr
2
+ from io import StringIO
3
+ import base64
4
+
5
+ # HTML template with placeholders like {title_one}, {subtitle_one}, etc.
6
+ HTML_TEMPLATE = """<!DOCTYPE html>
7
+ <html>
8
+ <head>
9
+ <meta charset="utf-8" />
10
+ <meta name="viewport" content="width=device-width" />
11
+ <title>Tesla</title>
12
+ <link
13
+ rel="stylesheet"
14
+ href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css"
15
+ integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w=="
16
+ crossorigin="anonymous"
17
+ referrerpolicy="no-referrer"
18
+ />
19
+ <link rel="stylesheet" href="css/style.css" />
20
+ <link rel="stylesheet" href="css/variable.css" />
21
+ <link rel="stylesheet" href="css/header.css" />
22
+ <link rel="stylesheet" href="css/navigation.css" />
23
+ <link rel="stylesheet" href="css/section.css" />
24
+ <link rel="stylesheet" href="css/footer.css" />
25
+ <link rel="stylesheet" href="css/responsive.css" />
26
+ </head>
27
+ <body>
28
+ <div class="blur__overlay"></div>
29
+
30
+ <header class="header">
31
+ <a class="header__left" href="signup.html">
32
+ <img class="header__logo" src="media/tesla_logo.svg" alt="" />
33
+ </a>
34
+
35
+ <ul class="header__middle">
36
+ <li>
37
+ <li><a class="header__nav__btn" href="signup.html">Model S</a></li>
38
+ <li><a class="header__nav__btn" href="signup.html">Model 3</a></li>
39
+ <li><a class="header__nav__btn" href="signup.html">Model X</a></li>
40
+ <li><a class="header__nav__btn" href="signup.html">Model Y</a></li>
41
+ <li><a class="header__nav__btn" href="signup.html">solar roof</a></li>
42
+ <li><a class="header__nav__btn" href="signup.html">solar panels</a></li>
43
+ </li>
44
+ </ul>
45
+
46
+ <div class="header__right">
47
+ <a class="header__nav__btn" href="signup.html">shop</a>
48
+ <a class="header__nav__btn" href="signup.html">account</a>
49
+ <a class="header__nav__btn menu__btn" href="signup.html">menu</a>
50
+ </div>
51
+ </header>
52
+
53
+ <nav class="navigation">
54
+ <div class="close__btn__container">
55
+ <img class="navigation__close__btn" src="media/close_icon.svg" alt="" />
56
+ </div>
57
+
58
+ <ul>
59
+ <li class="link__in__middle"><a class="nav__link" href="signup.html">Model S</a></li>
60
+ <li class="link__in__middle"><a class="nav__link" href="signup.html">Model 3</a></li>
61
+ <li class="link__in__middle"><a class="nav__link" href="signup.html">Model X</a></li>
62
+ <li class="link__in__middle"><a class="nav__link" href="signup.html">Model Y</a></li>
63
+ <li class="link__in__middle">
64
+ <a class="nav__link" href="signup.html">Solar roofs</a>
65
+ </li>
66
+ <li class="link__in__middle">
67
+ <a class="nav__link" href="signup.html">Solar panels</a>
68
+ </li>
69
+ <li><a class="nav__link" href="signup.html">Existing Inventory </a></li>
70
+ <li><a class="nav__link" href="signup.html">Used Inventory </a></li>
71
+ <li><a class="nav__link" href="signup.html">Trade-In </a></li>
72
+ <li><a class="nav__link" href="signup.html">Test drive </a></li>
73
+ <li><a class="nav__link" href="signup.html">Powerwall </a></li>
74
+ <li><a class="nav__link" href="signup.html">Commercial Energy </a></li>
75
+ <li><a class="nav__link" href="signup.html">utilities </a></li>
76
+ <li><a class="nav__link" href="signup.html">Charging</a></li>
77
+ <li><a class="nav__link" href="signup.html">Find us</a></li>
78
+ <li><a class="nav__link" href="signup.html">Support</a></li>
79
+ <li><a class="nav__link" href="signup.html">Investor Relations</a></li>
80
+ </ul>
81
+ </nav>
82
+
83
+ <section id="fullpage">
84
+ <section class="section one">
85
+ <div class="section__content">
86
+ <h1 class="section__content__title">{title_one}</h1>
87
+ <h2 class="section__content__subtitle">
88
+ {subtitle_one}
89
+ </h2>
90
+ </div>
91
+
92
+ <div class="section__action__container">
93
+ <a class="section__action__btn action__btn__primary" href="signup.html"
94
+ >{btn_primary_one}</a
95
+ >
96
+ <a class="section__action__btn action__btn__secondary" href="signup.html"
97
+ >{btn_secondary_one}</a
98
+ >
99
+ </div>
100
+ </section>
101
+
102
+ <section class="section two">
103
+ <div class="section__content">
104
+ <h1 class="section__content__title">{title_two}</h1>
105
+ <h2 class="section__content__subtitle">
106
+ {subtitle_two}
107
+ </h2>
108
+ </div>
109
+
110
+ <div class="section__action__container">
111
+ <a class="section__action__btn action__btn__primary" href="signup.html"
112
+ >{btn_primary_two}</a
113
+ >
114
+ <a class="section__action__btn action__btn__secondary" href="signup.html"
115
+ >{btn_secondary_two}</a
116
+ >
117
+ </div>
118
+ </section>
119
+
120
+ <section class="section three">
121
+ <div class="section__content">
122
+ <h1 class="section__content__title">{title_three}</h1>
123
+ <h2 class="section__content__subtitle">
124
+ {subtitle_three}
125
+ </h2>
126
+ </div>
127
+
128
+ <div class="section__action__container">
129
+ <a class="section__action__btn action__btn__primary" href="signup.html"
130
+ >{btn_primary_three}</a
131
+ >
132
+ <a class="section__action__btn action__btn__secondary" href="signup.html"
133
+ >{btn_secondary_three}</a
134
+ >
135
+ </div>
136
+ </section>
137
+
138
+ <section class="section four">
139
+ <div class="section__content">
140
+ <h1 class="section__content__title">{title_four}</h1>
141
+ <h2 class="section__content__subtitle">
142
+ {subtitle_four}
143
+ </h2>
144
+ </div>
145
+
146
+ <div class="section__action__container">
147
+ <a class="section__action__btn action__btn__primary" href="signup.html"
148
+ >{btn_primary_four}</a
149
+ >
150
+ <a class="section__action__btn action__btn__secondary" href="signup.html"
151
+ >{btn_secondary_four}</a
152
+ >
153
+ </div>
154
+ </section>
155
+
156
+ <section class="section five">
157
+ <div class="section__content">
158
+ <h1 class="section__content__title">{title_five}</h1>
159
+ <h2 class="section__content__subtitle">
160
+ {subtitle_five}
161
+ </h2>
162
+ </div>
163
+
164
+ <div class="section__action__container">
165
+ <a class="section__action__btn action__btn__primary" href="signup.html">{btn_primary_five}</a>
166
+ <a class="section__action__btn action__btn__secondary" href="signup.html"
167
+ >{btn_secondary_five}</a
168
+ >
169
+ </div>
170
+ </section>
171
+
172
+ <section class="section six">
173
+ <div class="section__content">
174
+ <h1 class="section__content__title">{title_six}</h1>
175
+ <h2 class="section__content__subtitle">
176
+ {subtitle_six}
177
+ </h2>
178
+ </div>
179
+
180
+ <div class="section__action__container">
181
+ <a class="section__action__btn action__btn__primary" href="signup.html">{btn_primary_six}</a>
182
+ <a class="section__action__btn action__btn__secondary" href="signup.html"
183
+ >{btn_secondary_six}</a
184
+ >
185
+ </div>
186
+ </section>
187
+
188
+ <section class="section seven">
189
+ <div class="section__content">
190
+ <h1 class="section__content__title">{title_seven}</h1>
191
+ </div>
192
+
193
+ <div class="section__action__container">
194
+ <a class="section__action__btn action__btn__primary" href="signup.html">{btn_primary_seven}</a>
195
+ </div>
196
+
197
+ <footer class="footer">
198
+ <ul>
199
+ <li><a href="signup.html">Tesla © 2021</a></li>
200
+ <li><a href="signup.html"> Privacy &amp; Legal </a></li>
201
+ <li><a href="signup.html"> contact </a></li>
202
+ <li><a href="signup.html">careers</a></li>
203
+ <li><a href="signup.html">news</a></li>
204
+ <li><a href="signup.html">engage</a></li>
205
+ <li><a href="signup.html">locations</a></li>
206
+ </ul>
207
+ </footer>
208
+ </section>
209
+ </section>
210
+
211
+ <script
212
+ src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"
213
+ integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg=="
214
+ crossorigin="anonymous"
215
+ referrerpolicy="no-referrer"
216
+ ></script>
217
+
218
+ <script src="js/script.js"></script>
219
+ </body>
220
+ </html>"""
221
+
222
+ def generate_html(
223
+ title_one, subtitle_one, btn_primary_one, btn_secondary_one,
224
+ title_two, subtitle_two, btn_primary_two, btn_secondary_two,
225
+ title_three, subtitle_three, btn_primary_three, btn_secondary_three,
226
+ title_four, subtitle_four, btn_primary_four, btn_secondary_four,
227
+ title_five, subtitle_five, btn_primary_five, btn_secondary_five,
228
+ title_six, subtitle_six, btn_primary_six, btn_secondary_six,
229
+ title_seven, btn_primary_seven
230
+ ):
231
+ # Inject values into template (note: links like "Touchless delivery" are kept as-is; edit manually if needed)
232
+ html = HTML_TEMPLATE.format(
233
+ title_one=title_one,
234
+ subtitle_one=subtitle_one.replace("order online for <a href='signup.html'>Touchless delivery</a>", "order online for <a href='signup.html'>Touchless delivery</a>"), # Preserve HTML
235
+ btn_primary_one=btn_primary_one,
236
+ btn_secondary_one=btn_secondary_one,
237
+ title_two=title_two,
238
+ subtitle_two=subtitle_two.replace("order online for <a href='signup.html'>Touchless delivery</a>", "order online for <a href='signup.html'>Touchless delivery</a>"),
239
+ btn_primary_two=btn_primary_two,
240
+ btn_secondary_two=btn_secondary_two,
241
+ title_three=title_three,
242
+ subtitle_three=subtitle_three.replace("order online for <a href='signup.html'>Touchless delivery</a>", "order online for <a href='signup.html'>Touchless delivery</a>"),
243
+ btn_primary_three=btn_primary_three,
244
+ btn_secondary_three=btn_secondary_three,
245
+ title_four=title_four,
246
+ subtitle_four=subtitle_four.replace("order online for <a href='signup.html'>Touchless delivery</a>", "order online for <a href='signup.html'>Touchless delivery</a>"),
247
+ btn_primary_four=btn_primary_four,
248
+ btn_secondary_four=btn_secondary_four,
249
+ title_five=title_five,
250
+ subtitle_five=subtitle_five,
251
+ btn_primary_five=btn_primary_five,
252
+ btn_secondary_five=btn_secondary_five,
253
+ title_six=title_six,
254
+ subtitle_six=subtitle_six,
255
+ btn_primary_six=btn_primary_six,
256
+ btn_secondary_six=btn_secondary_six,
257
+ title_seven=title_seven,
258
+ btn_primary_seven=btn_primary_seven
259
+ )
260
+ return html, html # Return for preview and download
261
+
262
+ with gr.Blocks(title="Tesla Page Editor") as demo:
263
+ gr.Markdown("# Tesla Page Text Editor\nEdit texts below to customize sections for visitor engagement. Preview scrolls like the original!")
264
+
265
+ with gr.Row():
266
+ with gr.Column(scale=1):
267
+ gr.Markdown("### Section 1 (Model S)")
268
+ title_one = gr.Textbox("Model S", label="Title")
269
+ subtitle_one = gr.Textbox("order online for <a href='signup.html'>Touchless delivery</a>", label="Subtitle (HTML OK)")
270
+ btn_primary_one = gr.Textbox("Custom Order", label="Primary Button")
271
+ btn_secondary_one = gr.Textbox("Existing inventory", label="Secondary Button")
272
+
273
+ gr.Markdown("### Section 2 (Model Y)")
274
+ title_two = gr.Textbox("Model y", label="Title")
275
+ subtitle_two = gr.Textbox("order online for <a href='signup.html'>Touchless delivery</a>", label="Subtitle")
276
+ btn_primary_two = gr.Textbox("Custom Order", label="Primary Button")
277
+ btn_secondary_two = gr.Textbox("Existing inventory", label="Secondary Button")
278
+
279
+ gr.Markdown("### Section 3 (Model 3)")
280
+ title_three = gr.Textbox("Model 3", label="Title")
281
+ subtitle_three = gr.Textbox("order online for <a href='signup.html'>Touchless delivery</a>", label="Subtitle")
282
+ btn_primary_three = gr.Textbox("Custom Order", label="Primary Button")
283
+ btn_secondary_three = gr.Textbox("Existing inventory", label="Secondary Button")
284
+
285
+ gr.Markdown("### Section 4 (Model X)")
286
+ title_four = gr.Textbox("Model x", label="Title")
287
+ subtitle_four = gr.Textbox("order online for <a href='signup.html'>Touchless delivery</a>", label="Subtitle")
288
+ btn_primary_four = gr.Textbox("Custom Order", label="Primary Button")
289
+ btn_secondary_four = gr.Textbox("Existing inventory", label="Secondary Button")
290
+
291
+ gr.Markdown("### Section 5 (Solar Panels)")
292
+ title_five = gr.Textbox("solar panels", label="Title")
293
+ subtitle_five = gr.Textbox("Lowest Cost Solar Panels In America", label="Subtitle")
294
+ btn_primary_five = gr.Textbox("Order now", label="Primary Button")
295
+ btn_secondary_five = gr.Textbox("Learn more", label="Secondary Button")
296
+
297
+ gr.Markdown("### Section 6 (Solar Roofs)")
298
+ title_six = gr.Textbox("Solar roofs", label="Title")
299
+ subtitle_six = gr.Textbox("Produce Clean Energy From Your Roof", label="Subtitle")
300
+ btn_primary_six = gr.Textbox("Order now", label="Primary Button")
301
+ btn_secondary_six = gr.Textbox("Learn more", label="Secondary Button")
302
+
303
+ gr.Markdown("### Section 7 (Accessories)")
304
+ title_seven = gr.Textbox("Accessories", label="Title")
305
+ btn_primary_seven = gr.Textbox("Shop now", label="Primary Button")
306
+
307
+ generate_btn = gr.Button("Generate & Preview", variant="primary")
308
+
309
+ with gr.Column(scale=2):
310
+ preview = gr.HTML(label="Live Preview")
311
+ download = gr.File(label="Download Updated index.html", visible=False)
312
+
313
+ generate_btn.click(
314
+ generate_html,
315
+ inputs=[
316
+ title_one, subtitle_one, btn_primary_one, btn_secondary_one,
317
+ title_two, subtitle_two, btn_primary_two, btn_secondary_two,
318
+ title_three, subtitle_three, btn_primary_three, btn_secondary_three,
319
+ title_four, subtitle_four, btn_primary_four, btn_secondary_four,
320
+ title_five, subtitle_five, btn_primary_five, btn_secondary_five,
321
+ title_six, subtitle_six, btn_primary_six, btn_secondary_six,
322
+ title_seven, btn_primary_seven
323
+ ],
324
+ outputs=[download, preview]
325
+ ).then(
326
+ lambda: gr.update(visible=True), outputs=[download]
327
+ )
328
+
329
+ if __name__ == "__main__":
330
+ demo.launch()