Update app.py

app.py

@@ -109,8 +109,36 @@ demo_vqascore_ranking = gr.Interface(
     allow_flagging='never'  
 )
 
+# Custom component for loading examples
+def load_example(model_name, images, prompt):
+    return model_name, images, prompt
+
+# Create the second demo
+with gr.Blocks() as demo_vqascore_ranking_beta:
+    gr.Markdown("# VQAScore Ranking\nThis model ranks a gallery of images based on their similarity to a text prompt.")
+    model_dropdown = gr.Dropdown(["clip-flant5-xl", "clip-flant5-xxl"], label="Model Name")
+    gallery = gr.Gallery(label="Generated Images")
+    prompt = gr.Textbox(label="Prompt")
+    rank_button = gr.Button("Rank Images")
+    ranked_gallery = gr.Gallery(label="Ranked Images with Scores")
+    
+    rank_button.click(fn=rank_images, inputs=[model_dropdown, gallery, prompt], outputs=ranked_gallery)
+    
+    # Custom example buttons
+    example1_button = gr.Button("Load Example 1")
+    example2_button = gr.Button("Load Example 2")
+    
+    example1_button.click(fn=lambda: load_example("clip-flant5-xl", example_imgs, example_prompt0), inputs=[], outputs=[model_dropdown, gallery, prompt])
+    example2_button.click(fn=lambda: load_example("clip-flant5-xl", example_imgs, example_prompt1), inputs=[], outputs=[model_dropdown, gallery, prompt])
+
+    # Layout to allow user to input their own data
+    with gr.Row():
+        gr.Column([model_dropdown, gallery, prompt, rank_button])
+        gr.Column([example1_button, example2_button])
+        
+
 # Combine the demos into a tabbed interface
-tabbed_interface = gr.TabbedInterface([demo_vqascore, demo_vqascore_ranking], ["VQAScore", "VQAScore Ranking"])
+tabbed_interface = gr.TabbedInterface([demo_vqascore, demo_vqascore_ranking, demo_vqascore_ranking_beta], ["VQAScore", "VQAScore Ranking"])
 
 # Launch the tabbed interface
 tabbed_interface.queue()