Update app.py

app.py

@@ -10,16 +10,7 @@ DEFAULT_PARAMS = {
     "do_sample": False,
     "max_new_tokens": 256,
 }
-DEFAULT_QUERY = (
-    "Provide a factual description of this image in up to two paragraphs. "
-    "Include details on objects, background, scenery, interactions, gestures, poses, and any visible text content. "
-    "Specify the number of repeated objects. "
-    "Describe the dominant colors, color contrasts, textures, and materials. "
-    "Mention the composition, including the arrangement of elements and focus points. "
-    "Note the camera angle or perspective, and provide any identifiable contextual information. "
-    "Include details on the style, lighting, and shadows. "
-    "Avoid subjective interpretations or speculation."
-)
+DEFAULT_QUERY = "Write a detailed caption for this image."
 
 DTYPE = torch.bfloat16
 DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
@@ -63,7 +54,7 @@ def generate_caption(
     result = result.replace("This image showcases", "").strip().removesuffix("</s>").strip().capitalize()
     return result
 
-# CSS for design enhancements with a dark button and white text
+# CSS for design enhancements with a fixed image input bar and simplified query
 css = """
   #container {
     background-color: #f9f9f9;
@@ -74,7 +65,14 @@ css = """
     max-width: 400px;
     margin: auto;
   }
-  #input_image, #output_caption, #run_button {
+  #input_image {
+    margin-top: 15px;
+    border: 2px solid #333; /* Darker outline */
+    border-radius: 8px;
+    height: 300px; /* Fixed height */
+    object-fit: contain; /* Ensure image fits within the fixed height */
+  }
+  #output_caption {
     margin-top: 15px;
     border: 2px solid #333; /* Darker outline */
     border-radius: 8px;
@@ -86,22 +84,23 @@ css = """
     padding: 10px;
     cursor: pointer;
     transition: background-color 0.3s ease;
+    margin-top: 15px;
   }
   #run_button:hover {
     background-color: #333; /* Slightly lighter on hover */
   }
 """
 
-# Gradio interface with vertical alignment
+# Gradio interface with vertical alignment and fixed image input height
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="container"):
         input_image = gr.Image(type="pil", elem_id="input_image")
-        run_button = gr.Button(value="Generate Caption", elem_id="run_button")
+        run_button = gr.Button(value="Generate", elem_id="run_button")
         output_caption = gr.Textbox(label="Generated Caption", show_copy_button=True, elem_id="output_caption")
 
     run_button.click(
         fn=generate_caption,
-        inputs=[input_image],  # Only the image input is passed
+        inputs=[input_image],
         outputs=output_caption,
     )