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 - 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)

    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='https://ya-lb.medium.com/automate-video-chaptering-with-llms-and-tf-idf-f6569fd4d32b'>Medium article</a> and <a href='https://github.com/Yannael/automatic-video-chaptering'>Github repository</a> for more details</h3>")
    gr.HTML("<hr>")

    video_id_input = gr.Dropdown(choices=example_video_names,
                                 label="Choose a video to see the structured transcript",
                                 value=example_video_names[0])

    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)

    video_id_input.change(gradio_load_example,
                            inputs=[video_id_input],
                            outputs=[output_processing, output_transcript])

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