Update app.py

app.py

@@ -72,25 +72,59 @@ def model_inference(image, text):
     generated_text = result['generated_text']
     return generated_text
 
-with gr.Blocks(css=".input_image {max-width: 100%; border: 1px solid #ccc; box-shadow: 0 0 10px #ccc; margin-bottom: 10px;} .output_textbox {min-height: 100px;}") as demo:
+with gr.Blocks(css="""
+.input_image, .prompt_input {
+    background-color: lightgrey;
+}
+""") as demo:
     gr.Markdown("## Enhanced IDEFICS2 Demo")
+    
+    # Create a row with two columns of equal size
     with gr.Row():
-        with gr.Column(scale=1):
-            image_input = gr.Image(label="Upload Image", type="pil", height=240, width=320)
-            query_input = gr.Textbox(label="Enter Prompt", placeholder="Type your prompt here...")
-        with gr.Column(scale=1):
-            output = gr.Textbox(label="Model Output", interactive=True, placeholder="Output will be displayed here...")
-
+        with gr.Column():
+            # Labelled input fields
+            image_input = gr.Image(label="Upload Image", type="pil", elem_classes=["input_image"]) #,height=240, width=320
+            query_input = gr.Textbox(label="Enter Prompt", placeholder="Type your prompt here...", elem_classes=["prompt_input"])
+        with gr.Column():
+            # Output textbox
+            output = gr.Textbox(label="Model Output", interactive=True, placeholder="Output will be displayed here...", elem_classes=["prompt_input"])
+    
+    # Button to submit the inputs for model inference
     submit_btn = gr.Button("Generate")
     submit_btn.click(model_inference, inputs=[image_input, query_input], outputs=output)
 
+    # Example inputs for quick testing
     examples = [
         ["american_football.png", "Explain in detail what is depicted in the picture"],
-        ["bike.png", "Explore the image closely and describe in detail what you discover."],
-        ["finance.png", "Provide a detailed description of everything you see in the image."],
-        ["science.png", "Please perform optical character recognition (OCR) on the uploaded image. Extract all text visible in the image accurately. Ensure to capture the text in its entirety and maintain the formatting as closely as possible to how it appears in the image. After extracting the text, display it in a clear and readable format, making sure that any special characters or symbols are also accurately represented. Provide the extracted text as output."],
-        ["spirituality.png", "Please perform optical character recognition (OCR) on the uploaded image. Extract all text visible in the image accurately. Ensure to capture the text in its entirety and maintain the formatting as closely as possible to how it appears in the image. After extracting the text, display it in a clear and readable format, making sure that any special characters or symbols are also accurately represented. Provide the extracted text as output."]
+        ["bike.png", "Describe in detail what you see in this image."],
+        ["finance.png", "Describe in detail everything you see in the image."],
+        ["science.png", "Extract all visible text in the image, keeping the format."],
+        ["spirituality.png", "Extract all text from the image, preserving its format."]
     ]
     gr.Examples(examples=examples, inputs=[image_input, query_input], outputs=output)
 
+# Launch the Gradio app with debugging enabled
 demo.launch(debug=True)
+    
+# with gr.Blocks(css=".input_image {max-width: 100%; border: 1px solid #ccc; box-shadow: 0 0 10px #ccc; margin-bottom: 10px;} .output_textbox {min-height: 100px;}") as demo:
+#     gr.Markdown("## Enhanced IDEFICS2 Demo")
+#     with gr.Row():
+#         with gr.Column(scale=1):
+#             image_input = gr.Image(label="Upload Image", type="pil", height=240, width=320)
+#             query_input = gr.Textbox(label="Enter Prompt", placeholder="Type your prompt here...")
+#         with gr.Column(scale=1):
+#             output = gr.Textbox(label="Model Output", interactive=True, placeholder="Output will be displayed here...")
+
+#     submit_btn = gr.Button("Generate")
+#     submit_btn.click(model_inference, inputs=[image_input, query_input], outputs=output)
+
+#     examples = [
+#         ["american_football.png", "Explain in detail what is depicted in the picture"],
+#         ["bike.png", "Explore the image closely and describe in detail what you discover."],
+#         ["finance.png", "Provide a detailed description of everything you see in the image."],
+#         ["science.png", "Please perform optical character recognition (OCR) on the uploaded image. Extract all text visible in the image accurately. Ensure to capture the text in its entirety and maintain the formatting as closely as possible to how it appears in the image. After extracting the text, display it in a clear and readable format, making sure that any special characters or symbols are also accurately represented. Provide the extracted text as output."],
+#         ["spirituality.png", "Please perform optical character recognition (OCR) on the uploaded image. Extract all text visible in the image accurately. Ensure to capture the text in its entirety and maintain the formatting as closely as possible to how it appears in the image. After extracting the text, display it in a clear and readable format, making sure that any special characters or symbols are also accurately represented. Provide the extracted text as output."]
+#     ]
+#     gr.Examples(examples=examples, inputs=[image_input, query_input], outputs=output)
+
+# demo.launch(debug=True)