Update

app.py

@@ -9,14 +9,16 @@ example_output_transcript = utils.load_transcript(example_video_id)
 example_chapters = utils.load_json_chapters(example_video_id)
 example_output_html = utils.get_result_as_html(example_chapters, example_video_id)
 
-example_video_id_dict = {"MIT Introduction to Deep Learning | 6.S191 - Alexander Amini": "ErnWZxJovaM",
-                         "dog": "b8HO6hba9ZE",
-                         "bird": "EuC1GWhQdKE"}
+example_video_id_dict = {"MIT Introduction to Deep Learning | 6.S191 - Alexander Amini - 2024": "ErnWZxJovaM",
+                         "How to speak - Patrick Winston - 2018": "Unzc731iCUY",
+                         "Let's build the GPT Tokenizer - Andrej Karpathy - 2024": "zduSFxRajkE"}
 
 example_video_names = list(example_video_id_dict.keys())
 
 def gradio_load_example(example_video):
 
+    print(f"Loading example: {example_video}")
+
     video_id = example_video_id_dict[example_video]
 
     transcript_as_text = utils.load_transcript(video_id)
@@ -46,27 +48,20 @@ with (gr.Blocks(css=css) as app):
     gr.HTML("<div align='center'><h3>See the companion <a href=''>Medium article</a> and <a href=''>Github repository</a> for more details</h3>")
     gr.HTML("<hr>")
 
-    #gv_transcript = gr.State()
-
     video_id_input = gr.Dropdown(choices=example_video_names,
                                  label="Choose a video to see the structured transcript",
                                  value=example_video_names[0])
 
-    load_button = gr.Button("Load example")
-
-    #gv_output = gr.State()
-
     gr.HTML("<hr>")
 
     with gr.Accordion("See raw transcript", open=False):
         output_transcript = gr.Textbox(value=example_output_transcript, max_lines=10, lines=10, label="Raw transcript")
 
+
     output_processing = gr.HTML(label="Output processing", value=example_output_html)
 
-    load_button.click(gradio_load_example,
+    video_id_input.change(gradio_load_example,
                             inputs=[video_id_input],
                             outputs=[output_processing, output_transcript])
 
-    # gr.HTML(result_as_html)
-
 app.launch(debug=True, width="100%")

utils.py

@@ -71,7 +71,6 @@ def toc_to_html(chapters):
 
     return toc_html
 
-
 def section_to_html(section_json_data):
     formatted_section = ""
 
@@ -132,6 +131,7 @@ def get_result_as_html(chapters, video_id):
 
     result_as_html = f"""
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+
 <div class="container mt-4">
     <div class="content">
         {video_embed}
@@ -144,7 +144,9 @@ def get_result_as_html(chapters, video_id):
     <div class="content">
         {edited_transcript}
     </div>
-</div>"""
+</div>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+"""
 
     return result_as_html