How to generate an OutScript for your audio or video

You can create an OutScript for your audio or video by following these steps.

Transcribe your audio or video using TurboScribe

Upload your audio or video file to TurboScribe, which is free for up to 3 videos per day.

Generate subheadings using Google AI Studio

Once the transcription is complete, open the file.

Consider the following transcriptions on the topic of FastHTML.

First click on the transcription – in this example let us use “Intro to HTML”

The transcript looks like this:

Now copy the whole transcript using CTRL + A.

This is what the copied text looks like – there is some unnecessary information (like the text TurboScribe logo) which will be added when you use CTRL + A, but it does not matter.

TurboScribe Logo
TurboScribe
Unlimited

    Shortcuts

Folders

    Export

More
Intro to FastHTML
Aug 10, 2024, 11:14 PM
Intro to FastHTML
% buffered
00:00
07:28
Speaker 1
(0:00) Hi, I'm Jeremy Howen. (0:03) Hi, I'm Jonath. (0:04) Hi, I'm Nate.
(0:06) We wanted to give you a quick introduction here to FastHTML. (0:09) Have a look at some of these things that we made.
Speaker 2
(0:11) So this first example is a chatbot that I made to interact with ChatGPT. (0:16) You may need to try out a styling library for these beautiful looking chat bubbles. (0:21) And this is the entire source code, there's no other components to it.
Speaker 3
(0:25) And this is an app that I made based off of Conway's Game of Life that allows multiple users to be able to play the game of life. (0:35) And the backend, it uses WebSockets. (0:38) And as you can see, the code is quite small.
Speaker 1
(0:42) Here's my little demo. (0:43) It's maybe the most uninteresting one in some ways, but I like it because it's an example of like everything. (0:48) It's markdown, it's drag and drop, it's a complete custom login system.
(0:54) And that entire thing also fits onto a single screen of code written from scratch. (1:00) Other people are making cool stuff with this as well. (1:02) If you know a bit of web programming already, you'll get started real fast.
(1:06) Legendary author and web programmer Daniel Roy-Greenfield said he would like to give it a try. (1:12) And within 45 minutes of starting out with FastHTML, he sent me a screenshot and said, look, I've just created a complete blog system. (1:18) There's lots of great ways to create web applications nowadays.
(1:22) Data scientists in particular love these rapid dashboarding apps like Radio and Streamlet. (1:29) What we've heard though, and we found ourselves, is that when you're ready to go to the next level beyond your dashboard or proof of concept, things like this require rewriting from scratch in a totally different framework and learning a whole lot of new skills. (1:43) Lots of people have created lots of fantastic web applications in Django.
(1:47) For example, Instagram is written in Django. (1:50) But it's pretty complicated. (1:52) This is the getting started setting up a new project example in less than five minutes.
(1:58) One great way to write web apps is with something like FastAPI on the back end and something like React or Svelte or Vue on the front end. (2:07) You can create nice sophisticated apps with this. (2:10) But there's a lot to learn, particularly if you don't know JavaScript or TypeScript already.
(2:16) And then you've got a few other things to learn about as well. (2:20) I've been writing web applications for years. (2:23) I created the framework that FastMail is built on.
(2:26) I started it over 25 years ago now. (2:29) It's had millions of users. (2:31) A lot of what I learned from that is now built into this.
(2:34) And ever since then, I've been looking for better and better ways to create web frameworks and to create web applications. (2:40) I have hundreds of thousands of views of my tutorials on Flask, AngularJS, C Sharp, and so forth. (2:47) With FastHTML, this is by far the most excited I've ever been about web programming.
(2:53) I think it makes it so much easier. (2:56) And I can't wait to see what you can do with it. (2:59) So we're going to show you how to get started with building that to-do web application to create this source code that you see here.
Speaker 2
(3:08) Okay, so Jeremy, where's the rest of this? (3:09) Can you show us how to create the scaffolding and templates that go along with this app?
Speaker 1
(3:14) There is no create scaffolding. (3:15) There is no create FastHTML app. (3:17) You just start typing into a window.
(3:19) That's all you need. (3:20) One Python file.
Speaker 3
(3:22) Wait, what about the front-end JavaScript code?
Speaker 1
(3:26) There is no front-end JavaScript code. (3:28) You just type into one Python file. (3:31) Let's start typing the Python file right now.
(3:33) Jono, take it away.
Speaker 2
(3:35) Fantastic. (3:36) Okay, so we're in a single Python file. (3:38) And the app here is going to define some different routes that we can hit.
(3:42) So you could have different routes for different pages, for example. (3:45) And here we're displaying some code and running the app. (3:49) This has got something like live reloading switched on by default.
(3:52) So you can see all the changes that you make in real time. (3:55) So whenever we're building an app, we want to be able to show some content. (3:58) But we don't have to type the HTML ourselves.
(4:00) We use templates. (4:01) And FastHTML has all of these built-in tags that we can use to construct the HTML programmatically in Python. (4:07) Here we're creating a to-do list, which is the list of multiple items.
(4:11) And we're seeing if we can display that component. (4:14) So we have this idea of nested components starting to merge here. (4:18) We can create these with Python list comprehensions and so on.
(4:21) And start to build up the UI. (4:23) So let's add a form that lets us specify new to-dos. (4:26) And then we need a way for these UI elements to interact with the app.
(4:30) So rather than going to whole new pages, what we're going to do here is do something called htmx, which plays really nicely with FastHTML. (4:36) We trigger an event, send a message to our server. (4:39) And then we're going to have a new route that responds to that, in this case, postRequest, asking us to add a new to-do.
(4:46) htmx also doesn't refresh the whole page. (4:49) It just updates specific parts of it. (4:50) So that's why we have the to-do list section here.
(4:53) And we're adding to the end of it any new to-dos that are added by that button.
Speaker 3
(4:59) All right. (5:00) So let's add some persistency to this app. (5:02) So you can use any sort of database.
(5:06) But already built into FastHTML is SQLite. (5:10) In our fast app, we can set where our database is going to be stored and some of the fields, as well as which one's going to be the primary key. (5:21) We can update our td list to go ahead and go through all of the to-dos in our database.
(5:28) If we refresh that, we can see that it gets returned, but it doesn't get added to the database. (5:34) So let's go ahead and insert that. (5:36) Now, as you can see, it's getting added.
(5:38) But we don't really render the returned post request HTML. (5:44) So let's go ahead and add a little rendering function that makes it a little bit prettier. (5:48) We can make this for loop comprehension a little bit nicer.
(5:53) And as you can see, now we have a very beautiful rendering of the to-dos.
Speaker 1
(6:00) So from here, really, it's just about adding all the features you've won. (6:03) You've actually, we've shown you all the key concepts you need to know. (6:06) You know that you can use any HTML tag, but you can now create them as Python functions.
(6:11) You can compose them together to create component libraries for other people to use. (6:15) You can use any CSS frameworks or Webcam frameworks you like. (6:20) So here, let's go ahead and add a delete link as well.
(6:22) So when we click on the delete link, it's going to call delete on the server. (6:26) So we create a function called delete and just go to dos.delete. We'll delete the id that we're being passed. (6:33) And now we've got delete tags.
(6:35) There they are. (6:35) They're done. (6:37) You can add anything from the entirety of the foundations of the web.
(6:41) So for example, you could add authentication by taking advantage of basic auth in your web browser. (6:48) So now we've got an authenticated web app. (6:50) We can add a logout by using your browser's logout functionality.
(6:54) So all of the functionality of the web is here for you to use. (6:59) All of the components that exist, all of the web framework that exists, all of the CSS libraries that exist. (7:05) They're now for you.
(7:07) And you can deploy it with a single line of code. (7:11) And within a minute or so, it's done.
Speaker 2
(7:14) So we've all been having a ton of fun writing examples. (7:17) And do go check out our docs. (7:18) We're going to keep adding more and more examples and documentation as we go.
(7:21) And I think you'll be able to get something there that you can get started with. (7:25) And we're really looking forward to seeing what you build.

Now sign in to Google AI Studio using your Google account.

Use the following as the System instruction (and experiment with it if it does not produce the best possible results)

For the given video transcript, identify the speakers and list them in this format:
Speaker 1: <speaker 1 name>
Speaker 2: <speaker 2 name>
etc

And also provide a concise bullet point summary including the timestamp in the following format, one per line:
<timestamp1> | <chapter heading 1>
<timestamp2> | <chapter heading 2>
etc

And paste the full transcript you just copied from TurboScribe into the Prompt section at the bottom and click on the Run button.

The response will take a few seconds as usual, but you will see a response which looks like this:

Speaker 1: Jeremy Howen
Speaker 2: Jonath
Speaker 3: Nate

0:00 | Introduction
0:11 | Chatbot Example
0:25 | Game of Life Example
0:42 | Markdown Example
1:18 | FastHTML vs Other Frameworks
1:43 | Django Example
1:58 | FastAPI, React, Svelte, Vue Example
2:16 | FastHTML Advantages
3:08 | Building the To-Do App
3:35 | Single Python File
3:55 | Templates and Components
4:23 | UI Elements Interaction
4:59 | Persistency and SQLite
6:00 | Adding Features
6:41 | Authentication and Logout
7:07 | Deployment
7:14 | Conclusion and Call to Action

There are a couple of things you can see straightaway. Google AI Studio is able to read the transcript and identify the speakers. This can be useful when you label the speakers.

Now edit the transcript and update the speaker names.

Also notice that the format of the chapters is predictable – this means it should be possible to write some code to parse the output and merge the chapter subheadings into the transcript.

Annotate the transcript using Airtable

Now we can annotate the subheadings into the appropriate location in the transcript.

Download the CSV version of the transcript.

Add a new Formula column called start_sec to your table using the following formula

Add another column called Chapter and add the chapter subheadings to match the corresponding sentences.

Note: You can actually prompt Google AI Studio to convert all the chapter timestamps from the previous response to seconds to speed up your work.

I recommend doing this in a new prompt and leaving the old prompt (which detects speakers and chapters) as it was.

Now add the chapters into the Airtable table at the correct seconds mark, and make sure you leave the other rows empty.

This is what it looks like when you are done:

Download the CSV file to your local computer.

Generate the OutScript using the OutScript Creator

Once you download the CSV file from Airtable, you can use my OutScript Creator to get the Markdown for the OutScript. Click on the “How to Use this tool” button to see a walkthrough explaining how to use the tool.

Why Markdown?

I use Markdown since it is a versatile format and you can convert it to PDF or HTML using Dilinger

You can copy and paste the HTML into a webpage, or into your note taking software.

You can upload the PDF file to ChatPDF and search across all your OutScripts using GPT4.