Hugging Face's logo

Spaces:
usecodenaija
/
slidegen
Running

App Files Community
Nifemi Alpine Durin commited on
Commit
643adaf
·
1 Parent(s): bdd53bc

fix

Browse files
Files changed (1) hide show
  1. app.py +165 -15
app.py CHANGED
@@ -42,19 +42,98 @@ def generate_image(campaign_details):
42
 
43
  content_html = """
44
  <div style="text-align: center; margin-top: 30px;">
45
- <h2>Slidegen Examples</h2>
46
- <div style="display: flex; justify-content: space-around; align-items: center;">
47
- <!-- Displaying one video -->
48
- <video controls width="30%">
49
- <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
50
- Your browser does not support the video tag.
51
- </video>
52
- <!-- Displaying two images -->
53
- <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" alt="Image Description 1" style="width: 30%; margin: 0 10px;">
54
- <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" alt="Image Description 2" style="width: 30%; margin: 0 10px;">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  </div>
 
56
  </div>
57
-
58
  """
59
 
60
  default_value = """
@@ -97,7 +176,7 @@ Your sub-heading text here.
97
  ## Image Layout
98
  Selected Layout: Mobile Portrait (750x1334)
99
 
100
- **Examples of layouts: Mobile Portrait (750x1334), Mobile Landscape (940x470), Square (2048x2048), Screenshots (1280x800)
101
 
102
 
103
  ---
@@ -170,22 +249,93 @@ with gr.Blocks(analytics_enabled=False) as iface:
170
  js="(value) => { console.log('Setting cookie:', value); set_cookie('campaign_details', value); }"
171
  )
172
 
173
- gr.Interface(
 
174
  fn=generate_image,
175
  inputs=campaign_details_input,
176
  outputs=[
177
  gr.components.Image(label="Generated Image")
178
  ],
179
  title="Slidegen AI - Image generator",
180
- article=content_html,
181
  description="Generate social media creatives from a few prompts",
182
  live=False,
183
  js=js
184
  )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
 
186
  #iface.load(fn=get_config, outputs=campaign_details_input, js=js)
187
 
188
 
189
-
190
  iface.launch(show_error=True)
191
 
 
42
 
43
  content_html = """
44
  <div style="text-align: center; margin-top: 30px;">
45
+ <h2 style="font-size: 24px; margin-bottom: 20px;">Slidegen Examples</h2>
46
+ <div style="display: flex; justify-content: space-between; align-items: flex-start; margin: 20px auto; max-width: 90%;">
47
+ <!-- Portrait video on the left -->
48
+ <div style="width: 30%; padding-right: 20px;">
49
+ <video controls style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
50
+ <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
51
+ Your browser does not support the video tag.
52
+ </video>
53
+ <p style="margin-top: 10px; font-size: 14px; color: #666;">Mobile Portrait Layout</p>
54
+ </div>
55
+
56
+ <!-- Grid of images on the right -->
57
+ <div style="width: 65%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
58
+ <!-- Actual images -->
59
+ <div style="width: 100%;">
60
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" alt="Square Layout" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
61
+ <p style="margin-top: 5px; font-size: 14px; color: #666;">Square Layout</p>
62
+ </div>
63
+
64
+ <div style="width: 100%;">
65
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" alt="Mobile Landscape" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
66
+ <p style="margin-top: 5px; font-size: 14px; color: #666;">Mobile Landscape</p>
67
+ </div>
68
+
69
+ <!-- Placeholder for Screenshot layout -->
70
+ <div style="width: 100%;">
71
+ <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
72
+ <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
73
+ <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
74
+ <span style="font-size: 24px; color: #888;">+</span>
75
+ </div>
76
+ <p style="margin: 0; font-size: 14px; color: #888;">Screenshot Layout</p>
77
+ </div>
78
+ </div>
79
+ <p style="margin-top: 5px; font-size: 14px; color: #666;">Screenshots (1280x800)</p>
80
+ </div>
81
+
82
+ <!-- Placeholder for Custom layout -->
83
+ <div style="width: 100%;">
84
+ <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
85
+ <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
86
+ <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
87
+ <span style="font-size: 24px; color: #888;">+</span>
88
+ </div>
89
+ <p style="margin: 0; font-size: 14px; color: #888;">Custom Layout</p>
90
+ </div>
91
+ </div>
92
+ <p style="margin-top: 5px; font-size: 14px; color: #666;">Custom Size</p>
93
+ </div>
94
+
95
+ <!-- Placeholder for Instagram layout -->
96
+ <div style="width: 100%;">
97
+ <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
98
+ <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
99
+ <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
100
+ <span style="font-size: 24px; color: #888;">+</span>
101
+ </div>
102
+ <p style="margin: 0; font-size: 14px; color: #888;">Instagram</p>
103
+ </div>
104
+ </div>
105
+ <p style="margin-top: 5px; font-size: 14px; color: #666;">Instagram Story (1080x1920)</p>
106
+ </div>
107
+
108
+ <!-- Placeholder for Twitter layout -->
109
+ <div style="width: 100%;">
110
+ <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
111
+ <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
112
+ <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
113
+ <span style="font-size: 24px; color: #888;">+</span>
114
+ </div>
115
+ <p style="margin: 0; font-size: 14px; color: #888;">Twitter</p>
116
+ </div>
117
+ </div>
118
+ <p style="margin-top: 5px; font-size: 14px; color: #666;">Twitter Post (1200x675)</p>
119
+ </div>
120
+
121
+ <!-- Placeholder for Tablet layout -->
122
+ <div style="width: 100%;">
123
+ <div style="width: 100%; height: 0; padding-bottom: 70%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
124
+ <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
125
+ <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
126
+ <span style="font-size: 24px; color: #888;">+</span>
127
+ </div>
128
+ <p style="margin: 0; font-size: 14px; color: #888;">Tablet</p>
129
+ </div>
130
+ </div>
131
+ <p style="margin-top: 5px; font-size: 14px; color: #666;">Tablet (2280x1600)</p>
132
+ </div>
133
+ </div>
134
  </div>
135
+ <p style="margin-top: 20px; font-size: 16px; color: #666;">Choose a layout that suits your needs from the examples above</p>
136
  </div>
 
137
  """
138
 
139
  default_value = """
 
176
  ## Image Layout
177
  Selected Layout: Mobile Portrait (750x1334)
178
 
179
+ **Examples of layouts: Mobile Portrait (750x1334), Mobile Landscape (940x470), Square (2048x2048), Screenshots (1280x800), Screenshots Xlarge (2280x1600)
180
 
181
 
182
  ---
 
249
  js="(value) => { console.log('Setting cookie:', value); set_cookie('campaign_details', value); }"
250
  )
251
 
252
+ # Create the main interface
253
+ interface = gr.Interface(
254
  fn=generate_image,
255
  inputs=campaign_details_input,
256
  outputs=[
257
  gr.components.Image(label="Generated Image")
258
  ],
259
  title="Slidegen AI - Image generator",
 
260
  description="Generate social media creatives from a few prompts",
261
  live=False,
262
  js=js
263
  )
264
+
265
+ # Add examples section separately
266
+ gr.HTML("""
267
+ <div style="margin-top: 30px; text-align: center;">
268
+ <h3>Slidegen Examples</h3>
269
+ <div style="display: flex; margin: 20px auto; max-width: 90%;">
270
+ <div style="width: 30%; padding-right: 20px;">
271
+ <video width="100%" controls>
272
+ <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
273
+ </video>
274
+ <div>Mobile Portrait</div>
275
+ </div>
276
+ <div style="width: 70%;">
277
+ <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
278
+ <div>
279
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" width="100%">
280
+ <div style="margin-top: 5px;">Square Layout</div>
281
+ </div>
282
+ <div>
283
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" width="100%">
284
+ <div style="margin-top: 5px;">Mobile Landscape</div>
285
+ </div>
286
+ <div>
287
+ <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
288
+ <div style="text-align: center;">
289
+ <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
290
+ <div>Screenshot Layout</div>
291
+ </div>
292
+ </div>
293
+ <div style="margin-top: 5px;">Screenshots (1280x800)</div>
294
+ </div>
295
+ <div>
296
+ <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
297
+ <div style="text-align: center;">
298
+ <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
299
+ <div>Custom Layout</div>
300
+ </div>
301
+ </div>
302
+ <div style="margin-top: 5px;">Custom Size</div>
303
+ </div>
304
+ <div>
305
+ <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
306
+ <div style="text-align: center;">
307
+ <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
308
+ <div>Instagram</div>
309
+ </div>
310
+ </div>
311
+ <div style="margin-top: 5px;">Instagram Story (1080x1920)</div>
312
+ </div>
313
+ <div>
314
+ <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
315
+ <div style="text-align: center;">
316
+ <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
317
+ <div>Twitter</div>
318
+ </div>
319
+ </div>
320
+ <div style="margin-top: 5px;">Twitter Post (1200x675)</div>
321
+ </div>
322
+ <div>
323
+ <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
324
+ <div style="text-align: center;">
325
+ <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
326
+ <div>Tablet</div>
327
+ </div>
328
+ </div>
329
+ <div style="margin-top: 5px;">Tablet (2280x1600)</div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ """)
336
 
337
  #iface.load(fn=get_config, outputs=campaign_details_input, js=js)
338
 
339
 
 
340
  iface.launch(show_error=True)
341