`app.py`: show exif data in html

app.py

@@ -8,6 +8,7 @@ import os
 from io import BytesIO
 import PIL
 from PIL.ExifTags import TAGS
+import html
 
 
 class Prodia:
@@ -174,15 +175,36 @@ with gr.Blocks(css=css) as demo:
         text_button.click(flip_text, inputs=[prompt, negative_prompt, model, steps, sampler, cfg_scale, width, height, seed], outputs=image_output)
     
     with gr.Tab("PNG Info"):
+        def plaintext_to_html(text, classname=None):
+            content = "<br>\n".join(html.escape(x) for x in text.split('\n'))
+
+            return f"<p class='{classname}'>{content}</p>" if classname else f"<p>{content}</p>"
+
+
         def get_exif_data(image):
-            return image.info
+            items = image.info
+
+            info = ''
+            for key, text in items.items():
+                info += f"""
+                <div>
+                <p><b>{plaintext_to_html(str(key))}</b></p>
+                <p>{plaintext_to_html(str(text))}</p>
+                </div>
+                """.strip()+"\n"
+
+            if len(info) == 0:
+                message = "Nothing found in the image."
+                info = f"<div><p>{message}<p></div>"
+
+            return info
 
         with gr.Row():
             with gr.Column():
                 image_input = gr.Image(type="pil")
                 
             with gr.Column():
-                exif_output = gr.Textbox(label="EXIF Data")
+                exif_output = gr.HTML(label="EXIF Data")
 
         image_input.upload(get_exif_data, inputs=[image_input], outputs=exif_output)