Updating UI

app.py

@@ -6,6 +6,10 @@ p {
     font-size: 120%;
 }
 
+li {
+    font-size: 110%;
+}
+
 .container {
     height: initial;
 }
@@ -26,6 +30,18 @@ img {
 }
 """
 
+# Optional CSS stuff for the header example image:
+#example {
+#    width: 80%;
+#    height: 60%
+#}
+
+#example img {
+#    width: 80%;
+#    height: 80%
+#}
+
+
 a = os.path.join(os.path.dirname(__file__), "files/barkley_balloon.mp4")
 b = os.path.join(os.path.dirname(__file__), "files/eiffel_tower.mp4")
 w1 = os.path.join(os.path.dirname(__file__), "files/AI_generated.png")
@@ -38,17 +54,35 @@ def generate_video(original_video, watermark):
 
 # Use RGBA image mode to preserve transparency for png images.
 with gr.Blocks(css=css) as demo:
-    gr.Markdown("# Watermarking with Gradio: Example")
-    gr.Markdown("Watermarks can be **visible** or **invisible**.")
-    gr.Markdown("""They can provide information directly, or provide a link for more information.  
-                   - Visible watermarks can help to disclose when content is AI-generated, so viewers know it's synthetic.  
-                   - Invisible watermarks can help to mark content as authentic.""")
-
-    gr.Markdown()
-    gr.Markdown("""For more information on watermarking -- what watermarking is, why it's important, and the tools available on Hugging Face --  
-    please check out [our blogpost on AI watermarking](https://huggingface.co/blog/watermarking).""")
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("# 🤗 Watermarking with Gradio: Example")
+            gr.Markdown("Watermarks can be **visible** or **invisible**.")
+            gr.Markdown("""They can provide information directly, or provide a link for more information.  
+                           - Visible watermarks can help to disclose when content is AI-generated, so viewers know it's synthetic.  
+                           - Invisible watermarks can help to mark content as authentic.""")
+            gr.Markdown()
+            gr.Markdown()
+            gr.Markdown("""For more information on watermarking -- what watermarking is, why it's important,  
+        and the tools available on Hugging Face -- please check out [our blogpost on AI watermarking](https://huggingface.co/blog/watermarking).""")
+            gr.Markdown()
+            gr.Markdown("## Try it out below!")
+        with gr.Column():
+            with gr.Column():
+                gr.Image('files/watermark_example.png', visible=False)
+            with gr.Column():
+                gr.Image('files/watermark_example.png', show_label=False, show_download_button=False, elem_id='example', container=False, interactive=False)
+                gr.Markdown('**Code:**')
+                gr.Code('import gradio as gr\n\nwatermarked_video = gr.Video(original_video_file, watermark=watermark_file)', lines=3)
+            with gr.Column():
+                gr.Image('files/watermark_example.png', visible=False)
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("**Inputs**: Video and watermark file")
+        with gr.Column():
+            gr.Markdown("**Output**: Watermarked video")
     gr.Interface(generate_video, [gr.Video(), gr.Image(type='filepath', image_mode=None)], gr.Video(),
-                        examples=[[a, w1], [b, w2], [a, w3], [b, w4]])
+                            examples=[[a, w1], [b, w2], [a, w3], [b, w4]])
 
 if __name__ == "__main__":
     demo.launch()