How to make a web app that transcribes YouTube videos with Streamlit | Part 2

9:53

How to make a web app that transcribes YouTube videos with Streamlit | Part 2

AssemblyAI 01.11.2021 2 808 просмотров 61 лайков

Machine-readable: Markdown · JSON API · Site index

Смотреть на YouTube

Поделиться Telegram VK Бот

Транскрипт Скачать .md

Анализ с AI

Описание видео

Let’s build an interactive web app that can transcribe YouTube videos in minutes! Streamlit is a great Python library that makes web development a piece of cake. And on top of Streamlit’s powerful framework we will plug in Assembly AI’s easy-to-use API to quickly upload and transcribe audio files. Sign up for a free AssemblyAI API token here 👇 https://www.assemblyai.com/?utm_source=youtube&utm_medium=referral&utm_campaign=yt_mis_3 In this part of the tutorial we will set up our Streamlit app. The main components will be a video player to display the video of choice of the user, a check status button to check on the progress of the transcription and displaying the transcript. We will also set up the Streamlit application to handle consecutive queries. All the code in this tutorial is shared through a public Github repository. (https://github.com/misraturp/YouTube-transcriber) This is all possible with only the free API token provided by Assembly AI. Sign up to get your own free API token here: https://www.assemblyai.com/?utm_source=youtube&utm_medium=referral&utm_campaign=channel_assemblyai 👩‍💻 Grab the code: https://github.com/misraturp/YouTube-transcriber 📥 Download FFmpeg: https://ffbinaries.com/downloads ✍️ See this tutorial in written format: https://www.assemblyai.com/blog/how-to-get-the-transcript-of-a-youtube-video/ 00:00 Introduction 00:10 Display video to the user 00:31 Display processing progress 02:07 Polling AssemblyAI for updates 03:05 Check status button 03:43 Caching past results 04:38 Review the app 05:40 Get transcript from AssemblyAI 06:35 Handling consecutive submissions 07:41 The final product 09:42 Get your free API token below!

Оглавление (11 сегментов)

Introduction

in the first part of this tutorial we prepared the code to submit a transcription job to assembly ai in this video we will create our streamlet web app so let's get started

Display video to the user

so the first thing that i want to add definitely is to seeing the video actually right after the user inputs this video so what i will do is very simply just say streamlit video and then add the link here so from now on once i submit the video i will be able to see the video under the text input

Display processing progress

section and to have some input for the user i also want to tell them what the process that is happening right now so that while they're waiting they understand that they're not just you know the application is not stuck or anything but things are happening so for this one i'm just going to add a text component and then whatever is happening so right now there is something really nice about streamlight that we can use at this point specifically and that is session states so all the way at the top i can initialize a session state that um keeps information of what's happening to the video currently so that when that is updated this is updated and we will show the user only the latest information so let's create that so i will create a variable in the session state that will be status so the status will be initially just submitted once to a user clicks the submit button or basically presses enter here after pushing the filling in the link and then the user will see the transcription is submitted so for that one i just need to copy the session state path and then put it here but of course we also want to be able to refresh the session state and show the user the latest state that is happening so this could either be queued so the audio is queued to be transcribed on assembly ai this could be processing currently or this could be completed so ideally once it's completed we will be able to show it to the user in the streamlit application and where

Polling AssemblyAI for updates

do i get this information of if it's processing if it's completed or if it's just queued well we need to actually use a polling endpoint that was created using the function that we wrote and uh asks assembly ai hey is it done yet or not so for that one i basically will need to remember the polling end point and then what i'm going to do is to create a function that will ask assembly ai what the latest status is so basically it's called get status i'm giving it as an argument the polling endpoint and then it is asking assembly ai hey how is it going this was a transcription job that i submitted to you have you been able to work on it and then as a result we get update the session state the status variable in our session state to be the status that we get from assembly ai so we will be able to show the user the latest status of job that we submitted

Check status button

so to do that i will create a button that will help the user to check on the status so that we don't have to constantly be listening to the assembly ai polling endpoints but we can just have a button where the user can click and then get the latest status on the job that they submitted since it's going to take a while for the whole download upload and transcription process to be completed so using this button the user will be able to call the getstatus function this will be basically a callback function that is going to help us to ask assembly ai how the transcription is going and then update our session state but one problem

Caching past results

right now is that if we have this button right now without any changes to our code what's going to happen is streamline is going to go to the top and run the code from beginning to end and what's going to happen is that we're going to run the transcribe from link function again so that's going to cause the link to be read again and video to be downloaded and turned into audio again but we don't want that and there is a solution to that basically on streamlight if you decorate your function with streamlet cache your function is not going to run unless the input or the output or anything inside the function has not changed since the last time it was run and then it's just going to give the same output that it did last time and that's exactly what we need because we don't want the application to run from the beginning and download the video every time the user wants to check on the status of the job that they

Review the app

submitted so let's see what it looks like now nice so we have the default uh video already specified in our stillmate application so that's why the application starts with that one it shows us the video and then it shows us that the transcription is submitted so before it shows me the button to check on the status it needs to download the video and then upload the video to assembly ai and then i will be able to check on the status of the video so now as you can see actually the application doesn't look like it's running anymore because basically the part that happens in our application is done everything else is right now is happening on assembly ai servers because we uploaded our audio file there and now it's being transcribed there but what we can do is basically to check on it to see what is the latest status so the last update was that it was submitted i'll just click check status again and now it tells me that it is processing and once it's done then of course we are able to uh display the transcription

Get transcript from AssemblyAI

we can very easily use streamlet's markdown function to show our transcripts but of course first we need to get the transcript right so for that what we're going to do is create just a little if condition uh so that if ever the session state is updated to complete it then we will read the transcript from the assembly ai servers and we will show it so what we do is basically we just if the session's state status is completed then we are requesting to get the polling response and then in the polling response we read the text which is going to be there because we know that the it is completed and just so that the application is not going to give us an error saying that transcript is not defined yet we're just going to set transcript to be an empty string for now

Handling consecutive submissions

one other thing that we want to do is to make sure that our application is able to refresh its states in case the user wants to transcribe more than one video one after another so for that one i'm just going to create another callback function i'm going to call it refresh state for example it doesn't need any arguments and for that one i basically i'm going to say set the status to submit it again and i want to call this when the user inputs a new a text input gives me a new youtube link so for that one we're just going to say on change call the function refresh state so now if the user adds a new link or inputs a new link to our text input component then we are able to refresh the state just tell the user that is submitted and then refresh and show them what's been happening with the video that they just submitted uh on assembly ai

The final product

ai so let's go ahead and just see how this application works from the beginning to end so now once it's uploaded i can just check the status so that also i know that the application is not halting or it's not frozen it is just running somewhere else and i just need to check once in a while to see if the transcription is done and once the status is changed to completed now i am able to see the whole transcription and the video is right here so i can watch the video at the same time and read the transcription if that's what i want to do so let's try submitting another video just to see how our application will act in that case so i'm going to submit a video that is of a ted talk nicely my video is updated and also the transcription status is actually updated so now my application says that transcription is submitted so now after the video is downloaded and it's uploaded to assembly ai i am i will be able to check the status to see the latest update on the video nice so i know now that the video is uploaded already to assembly ai and if i check status i know it's going to be processing so after a couple of seconds it will already be completed nice so the transcription is already completed and now i can see the whole talk here in text format instead of video format or audio format it looks like our application is working as we intended we have nice visuals we are able to see the video and then seamlessly create transcriptions from the video itself we are also able to submit one video after another without breaking anything so i would say this is a success

Get your free API token below!

if you'd like to create this up for yourself too you can get a free api token from assembly ai using the link in the description thank you for watching and i'll see you around

Другие видео автора — AssemblyAI

Ctrl+V

Экстракт Знаний в Telegram

Экстракты и дистилляты из лучших YouTube-каналов — сразу после публикации.

Подписаться

Лучшие методички за неделю — каждый понедельник