Building on the approach we use with planning, you're going to use oh one to help with the coding task oh one performs best with simple, direct prompting to both create new applications and add existing ones. To test this, you'll run two coding competitions between O1 mini and GPU four O to create a. Net new application and to edit some existing code. Let's get coding. In this lab, we're going to learn how to use O one to assist us with creating an original app, using code and then editing existing code using o one. To start with, we'll import our variables. So our OpenAI API key. And again the GPT model and O one model that we've been using so far, we'll begin by creating a react app. To start with I'm going to define a function which will allow us to get a short completion response. The next thing you'll do is define a prompt for how O one and four O should think about creating this app. So paste it in a prompt here where we give instructions to create an elegant, delightful react component for an interview feedback form. We give it some criteria for how this app should perform and what the overall goal is. And a couple of reminders here. I've included these because I'm working with four, so generally I wouldn't throw one. So now we'll generate code using both for O and O one. And then we're going to render both apps and visually compare the quality of each. You'll begin with four O here. We'll get it to generate the app will render the app and then we'll do a one. And hopefully we'll see a marked improvement with the O one model. Let's kick off the generation. Now that the code's done, let's print it and have a look. There we are. I'm just going to copy this out, render it in our app, and we'll be ready to inspect the results. I'm going to display a static image of what I've gotten when I loaded that code into the app. And here we can see an interview feedback form. But it's not so great looking some some sort of little weird formatting. So hopefully O one is capable of improving on this. Now we'll repeat the process with O one. Our hope here is that using the same prompt will get superior results. So kick this off to generate our code. Now that that's generated will print it out to have a look at it and see that we've got some disks here. And I'm going to copy that into the app and print the image so that we can have a look at the quality of what it produced. And we can see here a you'd have to say a superior. So it's gone with some dropdowns for the different rating numbers. It's listen to all of our instructions instead of including just a subset of categories. That's giving us a nice green feedback box as well. So a quick view of where Own can help you when you have a high level design for an app and you want a starting point, often O one will get you a bit further forward than for oh well, with equivalent prompting. This is a static example that I've generated, but if you want to delve into this yourself and do some prompt engineering and then render your own app, then please follow the instructions in the notebook. If you want to try out the code, you can go to the link in the notebook. Cut and paste the code into the editor. And it'll render the form. You can see the recommendation changing as we fill things in. And you can submit some feedback. If you're an expert in JavaScript and react, also in the notebook is a description of how to download a zip file containing an application. You can run on your local computer. Next, we'll move on to editing some existing code and show how oh one can give useful feedback that will result in, again, superior code to that produced by for you to compare the editing capabilities of for oh versus oh one, we've produced some code that has some clear issues, like multiple nested loops, a lack of error handling, and overall it's not super readable. What we'll do is we'll feed this code to both models and we'll see how they clean it up. Then we'll employ A01 LM as a judge to rate the two resulting code blocks, and tell us which one performed better. We'll begin again with a simple and direct prompt and use 400 for our first generation. So the prompt I have some code that I'd like you to clean up and improve. Return only the updated code that fixes the issues. And then we're passing in that code snippet, which we showed above will generate this. Have a look at the results. You've now generated some code. And outwardly I mean on first glance it looks a little better. But let's generate the oh one code and then we'll compare the two with LM as the judge here we're going to generate the same output, but this time using zero one. And again the results look plausible here. But the best way to figure this out is to employ an alum to compare the two. So let's do that. We're going to employ zero one as our greater here. Because this is the sort of nuanced, multi-step process where a one does generally tend to perform better than four. Oh, so again, we feel pretty good using it here. And in this case we used again a simple and direct prompt. So which code is better. And why? Option one for code and option two the oh one code. So we'll run that and you'll see the results the results are in. And oh one's deduced that both of them are trying to do the same thing. But there are several key differences between the two implementations that make option two better. It's called out the readability and structure, the error handling and robustness, where option two has selected a more effective way of doing that, and also the data processing and calculations. The debugging and log in, and just general performance considerations. So again, a useful example of where even if you didn't rely on four zero for a code editor or kind of a copilot to help you work through issues and edit your existing code, this is an area that everyone does fairly well at. Great. So you should now be confident using oh one to assist you in coding. Whether it's creating. Net new applications or helping improve your existing code. This is an area we're seeing a ton of uptake of oh one, especially in the first category where you have a high level design and you want a really good first job. Looking forward to being with you for the next stage where we use oh one to reason on top of images.