Update app.py

app.py

@@ -47,7 +47,8 @@ def youtube_search(query, max_results=50):
                 video_info = {
                     'thumbnail_url': result["snippet"]["thumbnails"]["high"]["url"],
                     'video_id': result["id"]["videoId"],
-                    'title': result["snippet"]["title"]
+                    'title': result["snippet"]["title"],
+                    'description': result["snippet"]["description"]  # Include the description
                 }
                 all_results.append(video_info)
 
@@ -93,9 +94,9 @@ def show_video(video_url):
 # Create the Gradio interface
 with gr.Blocks(css="""
 #search_output img {
-    width: 150px !important;
-    height: 150px !important;
-    margin-right: 5px;
+    width: 500px !important;
+    height: auto !important;
+    margin-right: 20px;
 }
 #search_output .gallery-item {
     display: flex !important;
@@ -108,6 +109,11 @@ with gr.Blocks(css="""
     font-size: 24px !important;
     font-weight: bold !important;
 }
+#search_output .gallery-item p {
+    font-size: 96px !important;  /* Makes the font four times bigger */
+    font-weight: bold !important; /* Makes the text bold */
+    margin: 0;
+}
 """) as demo:
     gr.Markdown("## YouTube Video Search, Selection, and Playback")
     video_ids_state = gr.State()  # To store video IDs corresponding to the search results
@@ -130,8 +136,10 @@ with gr.Blocks(css="""
         video_ids = []
         for item in search_results:
             image_url = item['thumbnail_url']
-            title = item['title']  # Only show the title as plain text
-            gallery_items.append((image_url, title))  # Pass the title directly as plain text
+            title = item['title']
+            description = item['description']
+            caption = f"<div><h3>{title}</h3><p>{description}</p></div>"  # Include the description as well
+            gallery_items.append((image_url, caption))
             video_ids.append(item['video_id'])
         return gallery_items, video_ids