Matcha 2

app.py

@@ -72,27 +72,26 @@ def get_base_filename(filepath):
 
 # Define the Gradio interface
 def create_demo():
+    # --- Reintroduce CSS ---
     custom_css = """
     /* Container for the image component (#current-image-display is the elem_id of gr.Image) */
         #current-image-display {
             height: 600px;           /* Define container height */
-            width: 1000px;             /* Define container width (takes column width) */
+            width: 100%;             /* Define container width (takes column width) */
             display: flex;           /* Use flexbox for alignment */
             justify-content: center; /* Center content horizontally */
             align-items: center;     /* Center content vertically */
             overflow: hidden;        /* Hide any potential overflow from container */
         }
     
-        /* Target all possible image elements within the container */
-        #current-image-display img,
-        #current-image-display .gradio-image img,
-        #current-image-display div img,
-        #current-image-display * img {
-            object-fit: contain !important;
-            max-width: 100% !important;
-            max-height: 100% !important;
-            width: auto !important;
-            height: auto !important;
+        /* The actual <img> element inside the container */
+        #current-image-display img {
+            object-fit: contain;    /* Scale keeping aspect ratio, within bounds */
+            max-width: 100%;        /* Prevent image exceeding container width */
+            max-height: 100%;       /* Prevent image exceeding container height */
+            width: auto;            /* Use natural width unless constrained by max-width */
+            height: auto;           /* Use natural height unless constrained by max-height */
+            display: block;         /* Ensure image behaves predictably in flex */
         }
     """
     # --- Pass css to gr.Blocks ---
@@ -153,9 +152,8 @@ def create_demo():
             with gr.Column(scale=2):
                 current_image = gr.Image(
                     label="Current Image",
-                    height=600,
                     type="filepath",
-                    elem_id="current-image-display", 
+                    elem_id="current-image-display", # ADDED - for CSS targeting
                     show_fullscreen_button=True,
                     show_download_button=False,
                     show_share_button=False,
@@ -211,6 +209,10 @@ def create_demo():
                     prompt0 = prompt_new()
                     model_name = model_choice
                     client_to_use = OR # Default client
+                    # Add logic here if you need to switch between OR and gemini clients based on model_name
+                    # Example:
+                    # if model_name.startswith("google/gemini") and gemini:
+                    #      client_to_use = gemini
 
                     result = client_to_use.generate_caption(
                         img, model=model_name, max_image_size=512,