Architecture
This video lesson delves into the architecture of an app integrated with OpenAI. Tom acknowledges that there are various ways to approach the app's architecture and explains the specific choices made in this course. While code reusability and separating concerns are important considerations, the focus here is on showcasing the power of the OpenAI API.
Tom suggests that refactoring the code to improve reusability and maintainability is encouraged after gaining proficiency with OpenAI. The lesson concludes with an exciting task of generating a movie title using OpenAI.
[00:00] I just wanted to say a word about the architecture of this app. As always with code, there are loads of ways you could do this. So I want to say right now that the way I'm doing it here is definitely not the one best way. And in an app this size, actually, it's not going to matter very much at all.
[00:17] But there are some things which we could do here which we're not doing, and I wanted to give you an explanation as to why. So firstly, on the code reusability front, we are building objects for each of our calls to the API. And as you can see, before this app is finished, we will have done that multiple times.
[00:37] Now, would there be a way to set up one function to do the fetching and pass it an object with the prompt, max tokens, etc., every time we need it? Probably yes. And that would make our code much more reusable and less repetitive.
[00:53] But the reason I'm not doing that is just to let the AI take center stage and not get bogged down in JavaScript. Once you've got the basics of working with OpenAI, as you will by the end of this project, that is the time to start looking at ways of saving time, saving work, and being more concise with the code.
[01:11] And likewise, normally, I like to have my functions, as much as possible, just doing one thing. And we're breaking that rule here because we've got a function that's doing the fetching, and it's also rendering out to the DOM. Now, we could potentially set up one render function and then have these fetch functions just return the response.
[01:31] And then, when all of the API calls have completed, the render function could render out the results. It would be doable. We could store all of our completions in an object and have a function that checks if all of the fetch requests have responded successfully before triggering the render. But again, that would involve a whole lot more JavaScript
[01:48] when, in this course, I really want to just focus on the AI. Now, at the end of the course, if you would like to refactor the code, that is not a bad idea at all. In fact, it's a really good idea. But I just wanted to give you a quick explanation now of why I chose to do it like this. Okay, with that done, let's go ahead and use OpenAI
[02:07] to generate a movie title that's so iconic, it's going to reverberate down through cinema history for the next 500 years. When you're ready for that, let's move on.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!