Switch to gradio blocks & columnar view

#25
by mishig HF staff - opened
Files changed (1) hide show
  1. app.py +41 -12
app.py CHANGED
@@ -216,8 +216,25 @@ def inference(image):
216
  inputs = [gr.inputs.Image(type='pil')]
217
  outputs = gr.outputs.Textbox(label="Output")
218
 
219
- title = "CLIP Interrogator"
220
- description = "Want to figure out what a good prompt might be to create new images like an existing one? The CLIP Interrogator is here to get you answers!"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
221
  article = """
222
  <p>
223
  Example art by <a href="https://pixabay.com/illustrations/watercolour-painting-art-effect-4799014/">Layers</a>
@@ -237,13 +254,25 @@ and check out more tools at my
237
  </p>
238
  """
239
 
240
- io = gr.Interface(
241
- inference,
242
- inputs,
243
- outputs,
244
- title=title, description=description,
245
- article=article,
246
- examples=[['example01.jpg'], ['example02.jpg']]
247
- )
248
- io.queue(max_size=32)
249
- io.launch(show_api=False)
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  inputs = [gr.inputs.Image(type='pil')]
217
  outputs = gr.outputs.Textbox(label="Output")
218
 
219
+ title = """
220
+ <div style="text-align: center; max-width: 650px; margin: 0 auto;">
221
+ <div
222
+ style="
223
+ display: inline-flex;
224
+ align-items: center;
225
+ gap: 0.8rem;
226
+ font-size: 1.75rem;
227
+ "
228
+ >
229
+ <h1 style="font-weight: 900; margin-bottom: 7px;">
230
+ CLIP Interrogator
231
+ </h1>
232
+ </div>
233
+ <p style="margin-bottom: 10px; font-size: 94%">
234
+ Want to figure out what a good prompt might be to create new images like an existing one? The CLIP Interrogator is here to get you answers!
235
+ </p>
236
+ </div>
237
+ """
238
  article = """
239
  <p>
240
  Example art by <a href="https://pixabay.com/illustrations/watercolour-painting-art-effect-4799014/">Layers</a>
 
254
  </p>
255
  """
256
 
257
+ css = '''
258
+ #col-container {max-width: 700px; margin-left: auto; margin-right: auto;}
259
+ a {text-decoration-line: underline; font-weight: 600;}
260
+ '''
261
+
262
+ with gr.Blocks(css=css) as block:
263
+ with gr.Column(elem_id="col-container"):
264
+ gr.HTML(title)
265
+
266
+ input_image = gr.inputs.Image(type='pil')
267
+ submit_btn = gr.Button("Submit")
268
+ output_text = gr.outputs.Textbox(label="Output")
269
+
270
+ examples=[['example01.jpg'], ['example02.jpg']]
271
+ ex = gr.Examples(examples=examples, fn=inference, inputs=input_image, outputs=output_text, cache_examples=True, run_on_click=True)
272
+ ex.dataset.headers = [""]
273
+
274
+ gr.HTML(article)
275
+
276
+ submit_btn.click(fn=inference, inputs=input_image, outputs=output_text)
277
+
278
+ block.queue(max_size=32).launch(show_api=False)