app.py

import gradio as gr
import os

import utils

example_video_id = "ErnWZxJovaM"

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_names = list(example_video_id_dict.keys())

def gradio_load_example(example_video):

    video_id = example_video_id_dict[example_video]

    transcript_as_text = utils.load_transcript(video_id)

    chapters = utils.load_json_chapters(video_id)
    output_html = utils.get_result_as_html(chapters, video_id)

    return {output_processing: output_html,
            output_transcript: transcript_as_text}


# %%
css = """
.content {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
"""

with (gr.Blocks(css=css) as app):
    gr.HTML("<div align='center'><h1>Demo: Automatic video chaptering with LLMs and TF-IDF</h1></div>")
    gr.HTML("<div align='center'><h2>From raw transcript to structured document</h2></div>")
    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,
                            inputs=[video_id_input],
                            outputs=[output_processing, output_transcript])

    # gr.HTML(result_as_html)

app.launch(debug=True, width="100%")