restructure, limit image height

README.md

@@ -10,11 +10,16 @@ pinned: false
 license: wtfpl
 ---
 
-# PNG Parameters Viewer (png-params)
-[GitHub](https://github.com/andzhik/png-params)
+This project is published on [HuggingFace](https://huggingface.co/spaces/andzhk/PNGInfo)
+
+# PNG Info (png-params)
+
 This is Gradio project for reading and displaying an image and its metadata from url.
 
+Currently, only PNG is supported.
+
 ## Usage
+
 - Copy image address
 - Paste it into the **url** field
 - or Drag and Drop/Upload image
@@ -25,17 +30,27 @@ This is Gradio project for reading and displaying an image and its metadata from
 ## Running locally
 
 ### Prerequisites
+
 Python 3
 
 ### Install requirements
-``` bash
+
+```bash
 pip install -r requirements.txt
 ```
 
 ### Run
-``` bash
+
+```bash
 python images.py
 ```
 
+Use [nodemon](https://www.npmjs.com/package/nodemon) for development.
+
+```bash
+nodemon images.py
+```
+
 ### Open UI
+
 Usually Gradio UI is running on http://127.0.0.1:7860

app.py

@@ -20,11 +20,33 @@ def display_image_from_url(url, input_image):
     if input_image is not None:
         image = input_image
 
-    parameters = "Parameters have been erased from this image"
+    parameters = "Parameters have been erased from this image or unsupported format"
     if 'parameters' in image.info:
         parameters = image.info['parameters']
 
     return image, parameters, image.info
 
-server = gr.Interface(display_image_from_url, ["text", gr.Image(type='pil')], [gr.Image(type='pil'), gr.Textbox(label="Generation Parameters"), gr.Textbox(label="Metadata")])
-server.launch()
+blocks = gr.Blocks(css="#out_image {height: 400px}")
+with blocks as png_info:
+    with gr.Row():
+        gr.Markdown(
+    """
+    Report any issues on the (GitHub)[https://github.com/andzhik/png-params] page of this project
+    """)
+    with gr.Row().style(equal_height=False):
+        with gr.Column():
+            in_url = gr.Textbox(label="Source URL")
+            in_image = gr.Image(label="Source Image", type='pil')
+            with gr.Row():
+                btn_submit = gr.Button("Submit", variant="primary")
+
+        with gr.Column():
+            out_image = gr.Image(type='pil', elem_id="out_image")
+            out_info = gr.Textbox(label="Generation Parameters")
+            out_meta = gr.Textbox(label="Metadata")
+    
+    btn_submit.click(fn=display_image_from_url,
+    inputs=[in_url, in_image],
+    outputs=[out_image, out_info, out_meta])
+            
+png_info.launch()