Create Beautiful Haiku with AI

Create Beautiful Haiku with AI

Table of Contents:

1. Introduction
2. Setting up the Next.js App
3. Installing Node Modules
4. Incorporating Tailwind Forms
5. Implementing the AI Package
6. Creating the API Endpoint
7. Generating Haikus with OpenAI
8. Allowing Custom Inspirations
9. Building the Front-end
10. Styling the Form
11. Deploying the App
12. Conclusion

Introduction

In this article, we will explore how to generate poems using today's AI projects. We will delve into the concept of time travel and the fusion of past and future, unraveling the secrets of chronology. We'll also venture into the world of Ikea and its Swedish Labyrinth shelves, as we uncover the hidden secrets that fuel our hunt. However, due to cost reasons, we won't keep the app online. But don't fret! If you're interested in running it yourself or building something similar, all the code from this project is available on GitHub.

Setting up the Next.js App

To begin our journey into the realm of AI-generated poems, we need to set up a Next.js app. By using the command npx create next-app Haiku-GPT, we can create a new project with Next.js.

Installing Node Modules

Next, we need to install two critical node modules: Tailwind Forms and the AI package. Tailwind Forms is a plugin that helps style form elements like text areas when using Tailwind CSS for styling. On the other hand, the AI package simplifies the integration process with streaming AI APIs.

Incorporating Tailwind Forms

To incorporate Tailwind Forms into our project, we need to make a small adjustment in the tailwind.config.js file. By requiring Tailwind CSS forms, we can utilize this plugin to style our form elements effectively.

Implementing the AI Package

The AI package provided by Versel is the star of our project. This package simplifies the integration process with streaming AI APIs. To get started, we need to put our OpenAI API key in the .env.local file. With the dependencies in place, we can initiate a local server by running npm run dev.

Creating the API Endpoint

Our next step is to create an API endpoint that will generate the haikus. In Next.js, routes are constructed based on the directory structure. Hence, we'll place our API endpoint at app/api/haiku/route.js. We'll export an async function called get that takes a request and returns a simple "hello world" response.

Generating Haikus with OpenAI

Now, let's dive into the exciting part - generating haikus with OpenAI! We'll start by creating a system prompt and defining the model's initial messages. These messages will include a placeholder user prompt, allowing users to provide custom inspiration for the haikus. We'll utilize the GPT 3.5 Turbo model with a temperature of 1.3 to make the results creative and unpredictable.

Allowing Custom Inspirations

To make our haikus more versatile, we should allow users to provide custom inspiration rather than restricting them to a specific topic. To implement this, we'll change the API endpoint from GET to POST. This will enable us to retrieve the prompt value from the request body and create a more interactive front-end experience.

Building the Front-end

With the API endpoint ready, it's time to focus on the front-end. We'll start by deleting the default home page and replacing it with a form, a text input, a button, and an output div. We'll also integrate the AI package's useCompletion hook to handle input completion, submit event handling, and input change.

Styling the Form

To enhance the visual appeal of our form, we'll make use of Tailwind UI, a package of pre-built components offered by the makers of Tailwind CSS. By implementing these pre-styled components, we can create a more visually appealing and user-friendly form.

Deploying the App

Once we have refined our app and made it fully functional, we can deploy it to Vercel easily. By following Vercel's deployment instructions, we can make our app accessible to the public and share our AI-generated haikus with the world.

Conclusion

In conclusion, integrating AI models into a React app has become a seamless and straightforward process thanks to the AI package on npm. By demonstrating how to generate haikus using Next.js and OpenAI, we hope to inspire you to explore the possibilities of AI-driven creativity in your own projects. Don't forget to like, subscribe, and share your feedback as it will help us create more exciting content in the future.

Highlights:

• Generate poems with AI projects
• Explore the fusion of past and future
• Uncover secrets in Ikea's Swedish Labyrinth shelves
• Use Next.js to create a haiku-generating app
• Install Tailwind Forms and AI package
• Implement system prompts and user input
• Deploy the app to Vercel for public access

FAQ

Q: Can I customize the prompts for the haikus? A: Yes, you can! The app allows users to provide custom inspiration for the haikus instead of being restricted to a specific topic.

Q: Is the AI package provided by Versel free to use? A: No, the AI package simplifies integration with streaming AI APIs but is not free to use due to cost reasons.

Q: Where can I find the code for this project? A: You can find all the code for this project on GitHub. The link is provided in the description of the article.