added demo at start

app.py

@@ -24,6 +24,9 @@ real_remote = [f for f in all_files if f.startswith("Real/")]
 ai_files   = [hf_hub_download(repo_id=REPO_ID, repo_type="dataset",filename=path, token=HF_TOKEN) for path in ai_remote]
 real_files = [hf_hub_download(repo_id=REPO_ID, repo_type="dataset",filename=path, token=HF_TOKEN) for path in real_remote]
 
+# Load a sample real image for the demo
+real_demo_path= hf_hub_download(repo_id=REPO_ID, repo_type="dataset",filename="Experiment_grid_3x3.png", token=HF_TOKEN)
+real_demo = np.array(Image.open(real_demo_path).convert("RGB"))
 history_file = "history_state.json"
 # --------------------------------
 
@@ -157,6 +160,15 @@ with gr.Blocks(fill_width=True) as demo:
         )
         state     = gr.State(None)
 
+        example_ui = gr.Column(visible=True)
+        with example_ui:
+            gr.Markdown("### Before you begin: This are what  *Real* Images look like. Click start to begin the game. ")
+            gr.Image(value=real_demo, type="numpy", show_label=False).style(
+            width=300,    # px
+            height=300    # px
+            )  # set desired display height)
+            gr.Markdown("---")
+
         # Add a Start button that WILL load images and start the timer
         start_btn = gr.Button("Start")
 
@@ -205,6 +217,11 @@ with gr.Blocks(fill_width=True) as demo:
             inputs=[],
             outputs=[grid_ui]
         )
+        start_btn.click(
+        fn=lambda _: gr.update(visible=False),
+        inputs=[],
+        outputs=[example_ui]
+    )
         
 
     # Reveal main UI only after agreeing to terms