What is ChatGPT?
ChatGPT is a chat system based on GPT-4 Artificial Intelligence, developed
by OpenAI. The system algorithms can coherently respond based on corrections
that train it automatically. From writing emails and essays to generating lines
of code or a music composition ChatGPT is a technology with tremendous
opportunities in our industry.
What we are building?
We are building a simple image generator using Open AI API. The idea is to learn how to integrate open API with React web applications since the opportunities are endless by using Artificial Intelligence. The AI behind Open AI image generator is DALL.E, a trained neural network, that feeds from the words of their users to generate images.
What is expected result?
In this application, we will use Open API and React to generate images using Artificial Intelligence. For instance, if we type something like bird on a tree image in the style of Pablo Picasso and click generate, it will give us the image using AI.
Now, lets begin
1. Create a new react project using:
npx create-react-app chatgpt-app
2. Open the VSCode project and clean App.js in the following way
3. Now, create an account in
openai.com In documentation Node.js library you can find the node library installation command
4. Install openai node library by running the following command in your Node.js project directory:
5. Verify in package.json if you have install openai
6. Add Configuration and OpenAIApi imports to your App.js
7. Now, initialize Configuration and OpenAIApi imports (organization and apiKey are parameters that we are going to generate on OpenAI. So, let's empty for now)
8. Return to OpenAI, go to Personal, Manage account then Settings. Here we found the Organization ID, copy this identifier
9. Now paste the Organization ID in your code under configuration organization property
10. Next, generate the apiKey. Click in
personal and select
View API Keys
11. Here create a new secret key with default organization personal. Make sure you copy the key that was generated
12. Then, paste the secret key generated in your configuration apiKey property
* a better way to do these is generating an .env file an declare Configuration and OpenAIApi as environment variables
13. Add a response generating an async function called
openaiImage.We also need two useSates one to set our prompt and another to set the response from openai
14. Create a button called
Generate Image with an
onClick event
openaiImage
15. In addition, we need a input to type the text to generate the desire image. Also, h2 tag to identify our app
16. In the input add an onChange event to set prompt with the typed text
17. Now, add image in which source contains the image generated by OpenAI
18. Finally, test our app with something like women image in the style of Monet
Always try keep the usage in the free trial range, however in manage account usage you can find a summary of the API daily usage
Comments
Post a Comment