Update app.py

app.py

@@ -269,25 +269,24 @@ custom_css = """
     ) !important;
     background-size: 100% 100% !important;
 }
+#image_container-image {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    max-height: 100%;
+}
+#image_container img {
+    object-fit: contain !important;
+}
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("""
-    ## Joint Tagger Project: JTP-PILOT² Demo **BETA**
-    This tagger is designed for use on furry images (though may very well work on out-of-distribution images, potentially with funny results).  A threshold of 0.2 is recommended.  Lower thresholds often turn up more valid tags, but can also result in some amount of hallucinated tags.
-
-    This tagger is the result of joint efforts between members of the RedRocket team, with distinctions given to Thessalo for creating the foundation for this project with his efforts, RedHotTensors for redesigning the process into a second-order method that models information expectation, and drhead for dataset prep, creation of training code and supervision of training runs.
-
-    Thanks to metal63 for providing initial code for attention visualization (click a tag in the tag list to try it out!)
-
-    Special thanks to Minotoro at frosting.ai for providing the compute power for this project.
-    """)
+    gr.Markdown("## Joint Tagger Project: JTP-PILOT² Demo **BETA**")
     original_image_state = gr.State() # stash a copy of the input image
     sorted_tag_score_state = gr.State(value={}) # stash a copy of the input image
     cam_state = gr.State()
     with gr.Row():
         with gr.Column():
-            image_input = gr.Image(label="Source", sources=['upload', 'clipboard'], type='pil', height=512, show_label=False)
+            image = gr.Image(label="Source", sources=['upload', 'clipboard'], type='pil', show_label=False, elem_id="image_container")
             threshold_slider = gr.Slider(minimum=0.00, maximum=1.00, step=0.01, value=0.20, label="Tag Threshold")
             cam_slider = gr.Slider(minimum=0.00, maximum=1.00, step=0.01, value=0.40, label="CAM Threshold", elem_classes="inferno-slider")
             alpha_slider = gr.Slider(minimum=0.00, maximum=1.00, step=0.01, value=0.60, label="CAM Alpha")
@@ -295,14 +294,24 @@ with gr.Blocks(css=custom_css) as demo:
             tag_string = gr.Textbox(label="Tag String")
             label_box = gr.Label(label="Tag Predictions", num_top_classes=250, show_label=False)
 
-    image_input.upload(
+    gr.Markdown("""
+    This tagger is designed for use on furry images (though may very well work on out-of-distribution images, potentially with funny results).  A threshold of 0.2 is recommended.  Lower thresholds often turn up more valid tags, but can also result in some amount of hallucinated tags.
+
+    This tagger is the result of joint efforts between members of the RedRocket team, with distinctions given to Thessalo for creating the foundation for this project with his efforts, RedHotTensors for redesigning the process into a second-order method that models information expectation, and drhead for dataset prep, creation of training code and supervision of training runs.
+
+    Thanks to metal63 for providing initial code for attention visualization (click a tag in the tag list to try it out!)
+
+    Special thanks to Minotoro at frosting.ai for providing the compute power for this project.
+    """)
+
+    image.upload(
         fn=run_classifier,
-        inputs=[image_input, threshold_slider],
+        inputs=[image, threshold_slider],
         outputs=[tag_string, label_box, original_image_state, sorted_tag_score_state],
         show_progress='minimal'
     )
 
-    image_input.clear(
+    image.clear(
         fn=clear_image,
         inputs=[],
         outputs=[tag_string, label_box, original_image_state, sorted_tag_score_state, cam_state]
@@ -318,21 +327,21 @@ with gr.Blocks(css=custom_css) as demo:
     label_box.select(
         fn=cam_inference,
         inputs=[original_image_state, cam_slider, alpha_slider],
-        outputs=[image_input, cam_state],
+        outputs=[image, cam_state],
         show_progress='minimal'
     )
 
     cam_slider.input(
         fn=create_cam_visualization_pil,
         inputs=[original_image_state, cam_state, alpha_slider, cam_slider],
-        outputs=[image_input],
+        outputs=[image],
         show_progress='hidden'
     )
 
     alpha_slider.input(
         fn=create_cam_visualization_pil,
         inputs=[original_image_state, cam_state, alpha_slider, cam_slider],
-        outputs=[image_input],
+        outputs=[image],
         show_progress='hidden'
     )