WEBVTT 00:00.120 --> 00:00.680 Okay. 00:00.720 --> 00:03.560 So next we're going to actually put these tools to good use. 00:03.800 --> 00:08.920 So this thing here is a neat neat little bit of Python called a dictionary comprehension. 00:08.920 --> 00:10.080 You might be very familiar with it. 00:10.120 --> 00:11.760 If not check out the guides. 00:11.760 --> 00:16.960 We put together a dictionary by iterating through tools and creating something where the key is the 00:16.960 --> 00:22.200 name of the tool, and the value is the tool itself, and that allows us to pluck out the navigate tool 00:22.240 --> 00:25.360 and the extract text tool from this list of tools. 00:25.760 --> 00:32.240 And we're then going to call the navigate tool asynchronously navigate tool with the web address for 00:32.240 --> 00:32.800 CNN. 00:33.200 --> 00:38.920 And then we're going to call await to extract the text from it and call this. 00:38.920 --> 00:40.800 So this has got nothing to do with LMS. 00:40.840 --> 00:47.120 This is all about running Microsoft Playwright with the tools that come with Lang Chain. 00:47.440 --> 00:48.440 And we'll run that. 00:48.440 --> 00:54.680 Up comes a browser, it turns to CNN and stuff is happening and that just completed. 00:55.040 --> 00:56.200 And isn't that cool? 00:56.240 --> 01:00.160 It was like, I know it's got nothing to do with AI, but it's just great technology. 01:00.200 --> 01:03.480 Come back here and we print the text and there we go. 01:03.520 --> 01:05.720 We've got the text from CNN. 01:06.200 --> 01:07.560 Impressive stuff. 01:08.000 --> 01:12.760 So we can now package this together into one collection of tools. 01:12.960 --> 01:18.440 These tools that we just got from playwright, plus our push notification tool in it goes. 01:18.520 --> 01:21.960 And now it's time for us to make some agents. 01:22.440 --> 01:29.040 So the first thing we do is we do some, some pre-work to create our LLM, which is GPT four mini. 01:29.080 --> 01:30.800 Feel free to switch in your favorites. 01:30.960 --> 01:33.000 And then we bind it to tools. 01:33.000 --> 01:36.920 This you remember is what we do to deal with creating all of that JSON. 01:36.920 --> 01:37.960 For all of these tools. 01:37.960 --> 01:39.560 We've got a whole ton of tools now. 01:39.600 --> 01:41.480 JSON will be built for all of them. 01:41.720 --> 01:44.560 And now this is our chat bot function. 01:44.560 --> 01:47.160 This is something that is going to be one of our nodes. 01:47.160 --> 01:54.480 Because a node is just a function and it's something which will call it will invoke LLM with tools passing 01:54.480 --> 01:55.800 in the messages. 01:55.800 --> 01:59.760 And what comes out will be shoved into messages and returned. 01:59.760 --> 02:06.160 And that, of course, is our the new state, and the reducer will be used to combine it with the old 02:06.160 --> 02:06.840 state. 02:07.160 --> 02:08.880 So let's execute that. 02:09.120 --> 02:10.280 That's great. 02:10.280 --> 02:12.640 And now we have our graph. 02:12.680 --> 02:18.080 I think this is probably makes more sense to go here just to be nice and tidy. 02:18.320 --> 02:23.520 So we create our graph builder with the state that we've specified. 02:23.800 --> 02:25.600 We add the chatbot node. 02:25.600 --> 02:27.320 That's this function we just got here. 02:27.520 --> 02:29.200 We add in our tools. 02:29.880 --> 02:32.320 We then add in a conditional edge. 02:32.360 --> 02:36.080 This is going to be the if statement implemented behind the scenes. 02:36.680 --> 02:39.880 If the tools condition is true then tools will be called. 02:40.320 --> 02:47.400 We add an edge from tools to chatbot and then we add from the start to the chatbot. 02:48.120 --> 02:49.240 So I said agents. 02:49.240 --> 02:50.360 It's only one agent. 02:50.360 --> 02:51.200 That's it. 02:51.240 --> 02:52.320 We get some memory. 02:52.360 --> 02:56.080 We compile with that memory and we draw our image. 02:56.360 --> 02:57.280 There it is. 02:57.640 --> 02:59.560 It's a an image we're familiar with. 02:59.560 --> 03:00.560 It's the same as last time. 03:00.560 --> 03:04.440 The only difference is that these tools are a bit meatier than we had before. 03:04.440 --> 03:07.240 We now can control a browser window. 03:07.280 --> 03:13.200 Okay, so here we have at the end our final, our gradio, uh, flow. 03:13.360 --> 03:15.720 So we're going to create a Gradio interface. 03:15.960 --> 03:19.560 Um, we're going to use a function called chat as our callback. 03:19.560 --> 03:20.440 And here is chat. 03:20.440 --> 03:21.880 It's an async function. 03:22.080 --> 03:23.360 Gradio supports functions. 03:23.360 --> 03:25.640 It's callbacks being being async or being async. 03:26.040 --> 03:30.440 And it's um, we're going to to just simply call our graph that we've already built. 03:30.440 --> 03:36.880 We're going to call a invoke the asynchronous version we pass in our first state, which is the user 03:36.880 --> 03:37.280 input. 03:37.280 --> 03:38.360 This is a super step. 03:38.360 --> 03:43.000 So every input is like another run of the graph we pass in the config. 03:43.000 --> 03:44.200 So we have memory. 03:44.240 --> 03:47.840 We don't actually use the history because we're relying on checkpointing for that. 03:47.840 --> 03:49.840 But Gradio sends it to us anyway. 03:50.000 --> 03:51.560 And that is our gradio code. 03:51.560 --> 03:53.000 And with that let's run it. 03:53.520 --> 03:54.320 There it is. 03:54.360 --> 03:54.760 Okay. 03:54.800 --> 03:55.680 Let's say hi there. 03:58.080 --> 03:58.440 Okay. 03:58.480 --> 04:02.600 Let's say, uh, please send me a push notification. 04:05.600 --> 04:11.440 With a news headline news headline from CNN. 04:12.640 --> 04:13.760 See what happens there. 04:13.960 --> 04:14.960 There goes the browser. 04:15.000 --> 04:15.360 It's. 04:15.640 --> 04:16.800 I'm not touching it. 04:23.360 --> 04:23.840 Haha. 04:24.640 --> 04:25.800 Have you expecting that? 04:26.000 --> 04:26.960 We got a text. 04:26.960 --> 04:32.840 I could see the push and it says indeed this push notification about news going on. 04:33.320 --> 04:34.320 Very cool. 04:34.360 --> 04:35.960 All right, let's try another. 04:36.280 --> 04:47.880 Uh, please, uh, send me a push notification with the current usd GBP exchange rate. 04:53.760 --> 04:55.240 The browser is still running behind. 04:55.240 --> 04:56.960 Let me just bring that up there. 04:57.000 --> 05:00.480 It's gone to an exchange rates page and we got the push notification. 05:00.480 --> 05:01.000 There he is. 05:01.040 --> 05:01.480 Yep. 05:01.680 --> 05:04.080 And it is a different than yesterday. 05:04.480 --> 05:07.000 Down by a little bit 0.77 instead of 0.78. 05:07.520 --> 05:08.440 That's amazing. 05:08.440 --> 05:09.160 So there you go. 05:09.200 --> 05:10.120 There you have it. 05:10.360 --> 05:14.480 Uh, that is a really powerful tool in playwright. 05:14.480 --> 05:21.080 And isn't it amazing that we've now armed our agent to be able to drive a browser? 05:21.080 --> 05:26.600 And you can start to see when you think of the excitement people have around things like Manus and this 05:26.600 --> 05:34.200 idea of agents that can drive, you can now see how this could become an agent that can drive a browser 05:34.200 --> 05:35.720 and do work for you. 05:35.960 --> 05:40.800 And of course, that is what we're coming to for this week's big project. 05:41.000 --> 05:44.640 And I thought it'd be nice to just bring this up in Lang Smith for a second to show what it looks like. 05:44.760 --> 05:46.120 Uh, here we have it. 05:46.280 --> 05:52.600 Uh, you can see, if you look, that there was a fair amount of interactions that went on the process 05:52.600 --> 05:55.680 of going around the browser and and doing various things. 05:55.680 --> 05:57.520 It takes a little bit of interaction. 05:57.680 --> 06:01.520 It takes, of course, doing some navigation, navigating and reading. 06:01.680 --> 06:03.840 And if we look on the right, we can see what happened here. 06:03.840 --> 06:05.280 This is the human making that. 06:05.680 --> 06:06.760 So I said hi there. 06:06.760 --> 06:07.400 It said, hello. 06:07.440 --> 06:09.120 How can I assist you today. 06:09.240 --> 06:16.960 Please send me push notification and then you can see it uh it called to visit navigate browser to CNN.com. 06:16.960 --> 06:23.800 So I think yeah I just said CNN so it knew to look up that that web page um and then it knew to navigate 06:23.840 --> 06:25.720 it extracted hyperlinks. 06:25.720 --> 06:28.240 It looked at some hyperlinks, it did some stuff. 06:28.440 --> 06:31.600 And then it ended up sending a push notification. 06:31.920 --> 06:37.080 Uh, I noticed that I've got the tool returning just null, which is probably a bad thing. 06:37.080 --> 06:42.720 I should have it returning like some some fake JSON that says success or something so that it doesn't, 06:42.720 --> 06:45.360 uh, so, so that it just sort of lands better. 06:45.400 --> 06:48.360 It's more coherent with the, with the call of the tool. 06:48.360 --> 06:49.720 So I will make that change. 06:50.040 --> 06:56.800 Uh, and then, um, you can see that it then goes to exchange rates, it pulls that out, it gets the 06:56.800 --> 06:59.440 results, it extracts all of the text. 06:59.600 --> 07:02.360 And then once more it sends a push notification. 07:02.400 --> 07:04.560 So it's great to see this trace. 07:04.560 --> 07:07.240 And then you can see some other information about this too. 07:07.280 --> 07:09.520 I think I got to see over here. 07:09.560 --> 07:09.760 Yep. 07:09.800 --> 07:13.720 The total number of tokens that were exchanged with GPT four mini. 07:14.000 --> 07:20.840 And the fact that the total cost was, uh, $0.10 out of. 07:20.880 --> 07:21.080 Oh, no. 07:21.120 --> 07:22.760 That's from from all of the runs. 07:22.760 --> 07:24.680 I was going to say that would be expensive. 07:24.920 --> 07:29.680 Uh, and I've been doing a lot of runs, so, so so you should not have spent $0.10. 07:29.880 --> 07:34.520 Uh, that was, in fact, 0.8 of a cent for that whole conversation. 07:34.720 --> 07:38.120 Uh, and if you've been using a llama, then it wouldn't have cost you anything, but you might have 07:38.120 --> 07:41.480 had more coherence issues because we're expecting a lot. 07:41.520 --> 07:43.840 You probably needed to use a larger model. 07:44.080 --> 07:46.160 Um, but certainly worth experimenting with. 07:46.160 --> 07:52.080 But if you chose to splash out and use GPT four on many, it would have cost you all of 0.8 of a cent. 07:52.360 --> 07:57.680 Uh, so, uh, you can see that these things and obviously they can rack up over time if you use it 07:57.720 --> 07:58.600 extensively. 07:58.600 --> 08:03.160 But for any one given call, it is, uh, relatively low cost.