chore: Update app.py with improved styling and image display

README.md

@@ -1,6 +1,6 @@
 ---
-title: Loc Songs
-emoji: 🐠
+title: Library of Congress  Song Sheet ColPali Explorer
+emoji: 🎵
 colorFrom: indigo
 colorTo: blue
 sdk: gradio

app.py

@@ -123,7 +123,7 @@ with gr.Blocks() as demo:
     gr.HTML(
         """
         <h1 style='text-align: center; color: #2a4b7c;'>America Singing: Nineteenth-Century Song Sheets ColPali Search</h1>
-        <div style="display: flex; align-items: flex-start; margin-bottom: 20px;">
+        <div style="display: flex; align-items: stretch; margin-bottom: 20px;">
             <div style="flex: 2; padding-right: 20px;">
                 <p>This app allows you to search through the Library of Congress's <a href="https://www.loc.gov/collections/nineteenth-century-song-sheets/about-this-collection/" target="_blank">"America Singing: Nineteenth-Century Song Sheets"</a> collection using natural language queries. The collection contains 4,291 song sheets from the 19th century, offering a unique window into American history, culture, and music.</p>
 
@@ -139,9 +139,11 @@ with gr.Blocks() as demo:
                 </ul>
                 </p>
             </div>
-            <div style="flex: 1;">
-                <img src="https://tile.loc.gov/image-services/iiif/service:rbc:amss:hc:00:00:3b:hc00003b:001a/full/pct:50/0/default.jpg" alt="Example Song Sheet" style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                <p style="text-align: center;"><em>Example of a song sheet from the collection</em></p>
+            <div style="flex: 1; display: flex; flex-direction: column;">
+                <div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center;">
+                    <img src="https://tile.loc.gov/image-services/iiif/service:rbc:amss:hc:00:00:3b:hc00003b:001a/full/pct:50/0/default.jpg" alt="Example Song Sheet" style="width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+                </div>
+                <p style="text-align: center; margin-top: 10px;"><em>Example of a song sheet from the collection</em></p>
             </div>
         </div>
         """
@@ -151,7 +153,6 @@ with gr.Blocks() as demo:
             search_box = gr.Textbox(
                 label="Search Query", placeholder="i.e. Irish migrant experience"
             )
-        with gr.Column(scale=1):
             submit_button = gr.Button("Search", variant="primary")
     num_results = gr.Slider(
         minimum=1, maximum=20, step=1, label="Number of Results", value=5
@@ -159,7 +160,7 @@ with gr.Blocks() as demo:
     results_html = gr.HTML(label="Search Results")
 
     submit_button.click(
-        fn=lambda query, top_k: search_and_display_wrapper(query, top_k, 100),
+        fn=lambda query, top_k: search_and_display_wrapper(query, top_k, 50),
         inputs=[search_box, num_results],
         outputs=results_html,
     )