Update app.py

app.py

@@ -61,7 +61,7 @@ def youtube_search(query, max_results=50):
 
     except requests.exceptions.RequestException as e:
         print(f"Error during YouTube API request: {e}")
-        return []
+        return [], f"Error retrieving video results: {str(e)}"
 
 # Function to display the video using the video URL
 def show_video(video_url):
@@ -92,60 +92,79 @@ def show_video(video_url):
     return html_code
 
 # Create the Gradio interface
-with gr.Blocks() as demo:
+with gr.Blocks(css="""
+#search_output img {
+    width: 300px !important;
+    height: auto !important;
+    margin-right: 20px;
+}
+#search_output .label {
+    font-size: 24px !important;
+}
+#search_output .gallery-item {
+    display: flex !important;
+    align-items: flex-start !important;
+    margin-bottom: 30px !important;
+}
+#search_output .gallery-caption {
+    text-align: left !important;
+    padding-left: 20px;
+}
+#search_output .gallery-item div {
+    display: flex;
+    flex-direction: column;
+}
+#search_output .gallery-item h3 {
+    font-size: 24px;
+    margin: 0 0 10px 0;
+}
+#search_output .gallery-item p {
+    font-size: 18px;
+    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
 
     with gr.Row():
         with gr.Column(scale=3):
             search_query_input = gr.Textbox(label="Search YouTube", placeholder="Enter your search query here")
             search_button = gr.Button("Search")
-            search_output = gr.HTML(label="Search Results")
+            search_output = gr.Gallery(label="Search Results", columns=1, height="800px", elem_id="search_output")
 
         with gr.Column(scale=2):
-            selected_video_link = gr.Textbox(label="Selected Video Link", interactive=True)
-            play_button = gr.Button("Play Video")
+            selected_video_link = gr.Textbox(label="Selected Video Link", interactive=False)
+            play_video_button = gr.Button("Play Video")
             video_output = gr.HTML(label="Video Player")
 
-    # Define search button behavior
+    # Update the search results and store video IDs
     def update_search_results(query):
         search_results = youtube_search(query)
-        html_code = '<div id="search-results">'
+        gallery_items = []
+        video_ids = []
         for item in search_results:
-            video_id = item['video_id']
-            thumbnail_url = item['thumbnail_url']
+            image_url = item['thumbnail_url']
             title = item['title']
             description = item['description']
-            video_url = f"https://www.youtube.com/watch?v={video_id}"
-            html_code += f'''
-            <div class="search-item" onclick="selectVideo('{video_url}')">
-                <img src="{thumbnail_url}" alt="{title}">
-                <div>
-                    <h3>{title}</h3>
-                    <p>{description}</p>
-                </div>
-            </div>
-            '''
-        html_code += '''
-        <script>
-        function selectVideo(videoUrl) {
-            const textbox = document.querySelector('input[data-testid="textbox"]');
-            if (textbox) {
-                textbox.value = videoUrl;
-                textbox.dispatchEvent(new Event('input', { bubbles: true }));
-            }
-        }
-        </script>
-        '''
-        html_code += '</div>'
-        return html_code
-
-    # Function to play the selected video
+            caption = f"<div><h3>{title}</h3><p>{description}</p></div>"
+            gallery_items.append((image_url, caption))
+            video_ids.append(item['video_id'])
+        return gallery_items, video_ids
+
+    # When a video is selected
+    def on_video_select(evt: gr.SelectData, video_ids):
+        index = evt.index
+        selected_video_id = video_ids[index]
+        video_url = f"https://www.youtube.com/watch?v={selected_video_id}"
+        return video_url
+
+    # Play the video
     def play_video(video_url):
         return show_video(video_url)
 
-    # Set up event listeners
-    search_button.click(update_search_results, inputs=search_query_input, outputs=search_output)
-    play_button.click(play_video, inputs=selected_video_link, outputs=video_output)
+    search_button.click(update_search_results, inputs=search_query_input, outputs=[search_output, video_ids_state])
+    search_output.select(on_video_select, inputs=video_ids_state, outputs=selected_video_link)
+    play_video_button.click(play_video, inputs=selected_video_link, outputs=video_output)
 
 # Launch the Gradio interface
-demo.launch()
+demo.launch()