Update app.py

app.py

@@ -20,10 +20,10 @@ examples = [
     ["See you later!", "بَعِد چُھٹ چھُ؟"]
 
 ]
-# Path to your image file
-image_path = "https://cdn-uploads.huggingface.co/production/uploads/66afb3f1eaf3e876595627bf/cPHY7iEpErxAEakPBWvKR.png"  # Replace with the actual path to your image
-image_path = "https://cdn-uploads.huggingface.co/production/uploads/66afb3f1eaf3e876595627bf/TZNNe4XJcO4qzoFfug18v.png"  # Replace with the actual path to your image
 
+     # Path to your before and after image files
+     before_image_path = "https://cdn-uploads.huggingface.co/production/uploads/66afb3f1eaf3e876595627bf/cPHY7iEpErxAEakPBWvKR.png"  # Replace with actual path to your "before" image
+     after_image_path = "https://cdn-uploads.huggingface.co/production/uploads/66afb3f1eaf3e876595627bf/TZNNe4XJcO4qzoFfug18v.png"    # Replace with actual path to your "after" image
 
 # Set up the Gradio interface
 with gr.Blocks() as demo:
@@ -55,8 +55,11 @@ with gr.Blocks() as demo:
     # Add examples to the interface for easy testing
     gr.Examples(examples=examples, inputs=user_input, outputs=transliterated_output)
 
-    # Display the image at the bottom of the page
-    gr.Image(image_path, label="Example Image", elem_id="bottom-image")
+     # Display the "Before" and "After" images
+    with gr.Row():
+        gr.Image(before_image_path, label="Before", elem_id="before-image", show_label=True)
+        gr.Image(after_image_path, label="After", elem_id="after-image", show_label=True)
+
     
 # Launch the Gradio interface
 demo.launch(share=True, inbrowser=True)