updated layout and headines

app.py

@@ -55,22 +55,25 @@ def img2para(cnet_img2):
 demo = gr.Blocks()
 
 with demo:
-  gr.HTML("<h2><center>Gradio Clients : Whisper Client -> Stable Diffusion Client -> ControlNet Client -> Image2Paragraph Client</center></h2><br>")
-  gr.HTML("""<div style="text-align:center;"><iframe src="https://gifer.com/embed/25cz" width=480 height=270.000 frameBorder="0" allowFullScreen></iframe></div>""")
+  gr.HTML("<h2><center>Using Multiple Gradio Clients</center></h2><br>")
+  gr.HTML("""<div style="text-align:center;"><iframe src="https://gifer.com/embed/25cz" width=480 height=270.000 frameBorder="0" allowFullScreen></iframe></div><br>""")
   with gr.Row():
     audio_mic = gr.Audio(source="microphone", type="filepath")
     with gr.Column():
       btn_whisper = gr.Button("Transcribe👇").style(full_width=True)
       prompt = gr.Textbox(label="prompt for SD image generation", interactive=False) #, value='a black swan')
+  gr.HTML("<br>")
   with gr.Row():
     btn_sd = gr.Button("Generate Image👉").style(full_width=True)
     sd_img = gr.Image(type='filepath') #value="/content/e321040c-b2eb-4550-8aaa-4cd416a7602d/tmpwyiwdr_1.jpg",
+  gr.HTML("<br>")
   with gr.Row():
     with gr.Column():
       cnet_prompt = gr.Textbox(label="prompt for SD image generation")
       btn_cnet = gr.Button("ControlNet Output👉").style(full_width=True)
     cnet_img1 = gr.Image(type='filepath')
     cnet_img2 = gr.Image(type='filepath')
+  gr.HTML("<br>")
   with gr.Row():
     btn_Img2para = gr.Button("Lets understand Image with Text👉").style(full_width=True)
     paragraph = gr.Textbox(label="Image to Paragraph generation")
@@ -86,12 +89,12 @@ with demo:
 demo_chain_events = gr.Blocks()
 
 with demo_chain_events:
-  gr.HTML("<h2><center>Chaining Gradio Clients using Events : Whisper Client -> Stable Diffusion Client -> ControlNet Client -> Image2Paragraph Client</center></h2><br>")
-  gr.HTML("""<div style="text-align:center;"><iframe src="https://gifer.com/embed/2YYc" width=480 height=280.286 frameBorder="0" allowFullScreen></iframe></div>""")
+  gr.HTML("<h2><center>Chaining Multiple Gradio Clients using Events </center></h2><br>")
+  gr.HTML("""<div style="text-align:center;"><iframe src="https://gifer.com/embed/2YYc" width=480 height=280.286 frameBorder="0" allowFullScreen></iframe></div><br>""")
   audio_mic = gr.Audio(source="microphone", type="filepath")
   btn_whisper = gr.Button("Trigger the Chained Events🚀🚀").style(full_width=True)
   prompt = gr.Textbox(label="Getting the Prompt for Stable Diffusion using Whisper Gradio Client", interactive=False,) #value='a black swan'
-  
+  gr.HTML("<br>")
   with gr.Row():
     with gr.Column():
       html_sd = gr.HTML("<h1><center>Stable Diffusion Generated Image👇</center></h1>") #.style(full_width=True)
@@ -104,6 +107,7 @@ with demo_chain_events:
       with gr.Row():
         cnet_img1 = gr.Image(type='filepath')
         cnet_img2 = gr.Image(type='filepath')
+  gr.HTML("<br>")
   with gr.Row():
     with gr.Column():
       html_Img2para = gr.HTML("<h1><center>Image to Paragraph output👇</center></h1>") #.style(full_width=True)
@@ -119,7 +123,8 @@ with demo_chain_events:
 
 demo_joint = gr.Blocks(theme=gr.themes.Monochrome())
 with demo_joint:
-  gr.HTML("<h1><center>🚀Revolutionize Your App Development with Gradio Client🏗️</center></h1><br><br>")
+  gr.HTML("<h1><center>🚀Revolutionize Your App Development with Gradio Client🏗️</center></h1>")
+    gr.HTML("<h3> Using Multiple Clients at Once : Whisper Client -> Stable Diffusion Client -> ControlNet Client -> Image2Paragraph Client</h3><br>")
   with gr.Row():
     with gr.Box():
       demo.render()