YT YouTube2Text

YouTube2Text → Transcripts → ML Regression - Linear regression, MLPs, DL nets, Linear Plus Non-Linear, XGBoost, ONNX (part 3)

ML Regression - Linear regression, MLPs, DL nets, Linear Plus Non-Linear, XGBoost, ONNX (part 3) — Transcript

by Ricardo Calix · 2,250 words · 369 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:07All right, so we're sharing the screen.
0:11All right, so um
0:14we are recording here.
0:18Let's go back here. So essentially
0:21you will need to go to GitHub.
0:38And then you will be in some kind of a
0:41repository.
0:43And when the repository is opened, it
0:46shows like a settings thing here. And
0:48then you go in there to configure. That
0:50doesn't take that long, but I can't
0:52display that cuz I'm signed out and
0:55I can't reset my password cuz my phone
0:58will not receive an email in this room.
1:01So um what we're going to do is
1:05we're just going to look at some
1:06examples of ONNX in the code
1:10essentially. So that we can do. So let's
1:13go to the homework.
1:15Your first neural networks.
1:18And let's look at the homework. Oh,
1:19sorry. You guys are not
1:21seeing this.
1:29Okay, so
1:31let's go back recap here. So we were
1:33here.
1:34We generated the ONNX file.
1:38Which are these from the models trained.
1:40Now you need to deploy it to a website.
1:44Okay.
1:45So to deploy it
1:47um I provided here
1:51you know, ONNX deployment examples. So
1:53you can click on this.
2:00Okay.
2:01And can see essentially
2:04um I have
2:07you know
2:09this real data run 10 index.html.
2:13So So here in this example, you're going
2:15to deploy it with HTML, CSS, and
2:18JavaScript. So that There's nothing new
2:21there.
2:22If you click on this
2:25essentially
2:27pretty standard HTML page. Notice
2:30there's some inputs.
2:32And then you would essentially
2:36um So imagine that you have a a model
2:39that takes four values, for instance,
2:41right? So that's the input. So you grab
2:44the values from those text boxes, you
2:46create the tensor of size four, you feed
2:49it through the model, the model
2:51predicts, and then you grab the
2:53predictions and you display them.
2:55That's it. So in the wine quality
2:57example, we had 11
3:00text boxes essentially. You would enter
3:01the values there, run them through the
3:04model, and it would predict what? The
3:06wine quality. Let's say six. And that's
3:09it. You just display the result. So in
3:12this example
3:14that's essentially
3:16the idea.
3:20There it is. So you can see here I
3:25I'm pressing run, right? And I get some
3:28values. Do you guys see that? So there's
3:31an ONNX model in the background.
3:34Takes in the four inputs and produces
3:38What is this? 1 2 3 4 5 6 7 outputs.
3:42It's a regression type of a
3:44application.
3:46Does this make sense?
3:47All right. Now the key insight is how do
3:50you build this? Well, this is just HTML
3:53text boxes and buttons, right?
3:56But you're going to and CSS if you want
3:59to make it pretty, but otherwise you
4:01need JavaScript and a JavaScript type
4:05library to be able to process the ONNX
4:08file. What do you have to do there? Grab
4:10the values from the text boxes, convert
4:14into a tensor, run it through the ONNX
4:16file, have the ONNX file predict, and
4:19then you grab that value and you display
4:21it back out to the website. Got it? Any
4:24questions on that?
4:26All right. So, let's take a look at this
4:28code. So, you've seen the application
4:30right? In this example. Now,
4:35um so, you can see here I'm using run
4:3810.
4:41Uh so, this one
4:44uh this is run 10, okay? So, we're in
4:45run 10 index.html.
4:48So, that's this file here, index.html.
4:51Notice there's a JS file, and then you
4:54have a couple of ONNX.
4:56So, what hap- what happened with this
4:57website, if you notice,
4:59because I have multiple buttons,
5:02I actually have a, you know, several
5:04ONNX models in there. And I'm just
5:07invoking all of them. You can see I have
5:09more over here.
5:11Um
5:12so, each time I run do one of those
5:14runs, I'm just calling a separate ONNX
5:17model. So, that's why say you you just
5:19have to do one.
5:21But, you know, this example has see one
5:23ONNX, another ONNX, another ONNX,
5:26another ONNX, another ONNX. Got it?
5:29So, then what do you need to do? Uh you
5:31have the end Let's start at the index
5:34page, probably.
5:35Um CSS
5:39is probably in the HTML file,
5:43if I remember correctly.
5:47Let's give it a minute. For some reason,
5:49this is taking a very long time.
6:03I think the reason why I forgot my
6:04password in GitHub is probably the last
6:07time I did a lecture like this. I reset
6:09it in another room.
6:11But here I can't I don't like it to
6:13connect my phone to the Wi-Fi, so
6:17anyway.
6:18Um let's do
6:22I don't know why this is taking too
6:26Let's go back.
6:28Click on index.html.
6:31All right, so this is the HTML. All
6:33right, so let's go through this one just
6:35to get a feel for how it works. So
6:37notice there is an index.js file. That's
6:41where you have your index logic. Notice
6:43this is the reason
6:45why you have to worry about that offset
6:48that I show you showed you. Because of
6:51the ORT ONNX runtime library that you
6:55will be importing, okay? So maybe this
6:58you know, I worked on this like last
7:00year. This is not even that old, but
7:03this these things are constantly being
7:05updated, okay? So
7:08if you have errors of it a compatibility
7:11error, that's how you can start to fix
7:13it is by figuring out that opt.
7:15But see, you have you have essentially
7:17the library for ONNX in JavaScript. You
7:19can see ort.js.
7:22And then after that um the HTML should
7:24be pretty straightforward.
7:26Uh you have essentially here you notice
7:28just I have a style sheet, so you can
7:30ignore this. This is just to make it
7:32more presentable. Then in the body you
7:35can see I have what? I have four text
7:39boxes.
7:40Right? And the four text boxes have like
7:43names box zero C1 C2 or box one C1 box
7:48two C1 box three C1. Notice I do put in
7:53default values. Please put in in your
7:55homework default values because that way
7:57I just have to click the button and get
7:59a result. If you leave that blank and it
8:03errors out, that's an automatic zero.
8:05But you know what I mean. Help me out,
8:07please, cuz I have to check all of your
8:10homework assignments, all right? So, put
8:12a default value in there,
8:14and then notice you put an input, and
8:16that's just a button,
8:18and notice it says on click run example
8:21one. So, you just need to define that
8:24function, right? And that's it. Okay? My
8:27My example is more complicated because I
8:30have multiple buttons for multiple uh
8:33ONNX files. I have a run example two.
8:37I have run example synthetic, run
8:39example Gen Hong. I have And then, you
8:43know, and that's it. Then the other
8:45thing you obviously need to have is you
8:47need to have a few divs in your HTML to
8:50display the results, right? So, in this
8:52case I have predictions one, predictions
8:55two, difference, prediction synthetic.
8:59So, when you finish the JavaScript,
9:01after you generate the output from the
9:03ONNX file, you will link that output to
9:06these variables and display the result.
9:09Got it?
9:10So, that's essentially
9:12uh it.
9:14Um I have a few more predictions here,
9:17and then I have multiple inputs, right?
9:19So, this is just for the other models.
9:21Multiple inputs.
9:23Uh and that's it. So, as you can see,
9:25the HTML HTML is pretty straightforward.
9:28Text boxes with default values, the
9:31input tying to some function, and then a
9:33div to display the results.
9:36Any questions on that part?
9:40All right. So, if you understand that,
9:41then the next step is to
9:44um
9:46look at
9:48this index.js.
9:51So, index.js is where you can define the
9:54run example one, or whatever it is,
9:57right? The function that invokes ONNX
9:59in this context. So, I'm going to click
10:02on run 10 again. I'm going to go to
10:03index.js,
10:06and you can see here it is.
10:08So, essentially, you will use something
10:10like async function run example one.
10:13And that's the function that will handle
10:16one button.
10:17Do you see that? If you scroll down,
10:20you'll see
10:22that then there's run example forward.
10:25So, if you do that's another example,
10:28another button. So, yours only needs to
10:31have one async. Got it? One of these
10:34functions to handle the pressing of a
10:36button. So, you can see here I have
10:38multiple
10:40things, but I still like to show you
10:42this code because I each of those
10:46functions handle something different, so
10:48you can scroll through them and find the
10:50one that's most appropriate to your
10:52problem, okay? So, that's what I would
10:55recommend.
10:56All right. So, now let's just take a
10:58look
10:59at one of them. So, I think run example
11:02homework one might be a good one.
11:05So, notice here
11:06what needs to happen, right? So,
11:08essentially,
11:10you you know, somebody presses the
11:12button run example heart, you know, HW1,
11:16you create a variable X, right?
11:20And th- this one is a float 32 of size
11:22four. If I was using wine quality, it
11:25would be size 11.
11:27Right? So, that you have to change that.
11:30It needs to match your dummy input when
11:32you exported the ONNX model.
11:34Then, this is pretty straightforward,
11:36document.get element by ID, and you grab
11:39the values in the text boxes. And you
11:42assign them to X as X0, X1, X2, X3.
11:46Then notice in my example, I'm using
11:48ORT, ONNX runtime, right? The offset
11:52version,
11:53right? But, that part I leave it to you
11:55guys to figure out. Hopefully, this will
11:58be the easiest approach. Notice you have
12:00to spec- This is where
12:03you start to go from JavaScript
12:05variables
12:06to torch type variables that will fit in
12:11ONNX.
12:13So, uh so, TensorFlow, for instance,
12:16they have their own approach of doing
12:19this, but it's all TensorFlow. Whereas,
12:21ONNX was developed by Microsoft, I
12:24believe, and it's the the first letter
12:26in ONNX is open. So, it's supposed to be
12:29an open
12:31uh format for multiple types of
12:33frameworks.
12:35So, anyway, so we instantiate the tensor
12:38to be a 1 {comma} 4. So, that's the
12:41dummy input again. What gets mapped to
12:43it? X. You can see that, X. And that
12:46creates tensor X. So, essentially, you
12:49have your data, your input from your
12:51text boxes,
12:52and then essentially, you just Notice
12:55here, you do ORT inference inference
12:59session.create.
13:01And what do you grab? You grab the
13:02inverse Sorry, the ONNX file that you
13:06exported from Colab or Anaconda.
13:10Does this make sense?
13:11Now, this little date now plus date now
13:14that I added here is because GitHub
13:17loves or GitHub pages loves to cache
13:20things. And so, it updates like every 10
13:24minutes. So, if you do the date now,
13:26it'll grab the latest. Otherwise, you'll
13:28see that you update your you put in a
13:30new ONNX, and then when you run, it's
13:32still using the old one. Cuz it takes
13:34about 10 minutes to update. So,
13:36when you're debugging,
13:38it'll frustrate you a lot. So, use the
13:40date.
13:41Um once the session is created, you have
13:44the ONNX tied, then you just do
13:46session.run, you give it the input, and
13:49boom, results. You're done. So, the
13:51model has now predicted, and it'll be
13:54one value for the wine quality, for
13:56instance, or you know, however you do
13:58it.
14:00And then from results, you take out
14:02output one. Remember that output one
14:04that we defined? {dot} data, okay? And
14:07now you have your data.
14:10Your results. And now, notice what you
14:12do, prediction. This is the div in your
14:14HTML. Get element by ID, you grab it as
14:18predictions, and then usually divs will
14:21have this property called inner HTML,
14:24and then you can just set that up.
14:27Right? And provide your result. Got it?
14:30So, in in this example, this is
14:32especially useful because my output
14:35it was a vector of seven values. So, I
14:38had to take out each of the values and
14:40display it properly with a label and
14:42everything to know what everything was.
14:45If you were just doing one, then you
14:46know, it might be
14:48easier.
14:49So, you can see that here. Uh we just
14:51grab from output output zero, output
14:56one, output two.
14:58You can uh round to two decimal places,
15:01and then you just display
15:04in the if this is a table. So, you
15:06create a table dynamically in HTML.
15:09That's it, guys. That's essentially the
15:11whole thing. The only thing I wasn't
15:14able to show you, unfortunately, and I'm
15:15sorry about that, is the the
15:18Once you add Notice that these files are
15:21just added to a folder
15:23in GitHub, right? This is a regular
15:25GitHub repo.
15:27But the thing is
15:29GitHub Pages is like a feature that's
15:32not enabled by default.
15:35You have to enable it. And so,
15:38I have to go into this repo and enable
15:41GitHub Pages.
15:43And it's pretty easy, but you just have
15:45to enable it. And I I'm not logged in
15:47right now.
15:48Do you have a question?
15:50>> I was going to say, do you want me to
15:52like show my GitHub Pages stuff?
15:54>> Yes.
15:55Do that, please.
15:59Yes, exactly. Thank you.
16:01I really appreciate that.
16:05Let's end this one here. So,
16:08Taylor is going to
16:11uh demo for us, okay? So, I'm going to
16:13end this one.

About this transcript

This page contains the full transcript of ML Regression - Linear regression, MLPs, DL nets, Linear Plus Non-Linear, XGBoost, ONNX (part 3) by Ricardo Calix, generated from the public captions YouTube serves with the video. The transcript has 2,250 words across 369 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.