Web application for generating images with artificial intelligence. Developed using React + Next.js 14 & Typescript, implementing Server Actions and cache handling techniques. Utilizes Vercel KV's Redis database, Zustand for state management, styled with Tailwind CSS, and incorporates components from Shadcn/ui. Image generation is done through the
Replicate API. In addition, testing has been conducted using Cypress, Jest, and Testing Library.
Clone the repository by running the following command in your terminal: git clone https://github.com/fra-zelada/text2img
Navigate to the project directory by running: cd text2img
Install the project dependencies using: npm install
To start the database, you can use the attached Docker Compose file by running: docker-compose up -d, or use your own credentials for a Redis database, such as Vercel KV storage.
The images generated by the Replicate API have a 10-minute expiration, so they will be uploaded to an image hosting service, in this case, Cloudinary. You will need the Cloud Name and to configure an unsigned Upload Preset.
Rename the file .env.TEMPLATE to .env.
Add the necessary values to the .env file.
| KEY | DESCRIPTION | DEFAULT VALUE |
|---|---|---|
| REPLICATE_API_TOKEN | API Token from replicate.com |
|
| REPLICATE_API | API endpoing of Replicate service | https://api.replicate.com/v1/predictions |
| CLOUDINARY_CLOUD_NAME | Your Cloudinary Cloud Name | |
| CLOUDINARY_UPLOAD_PRESET | Name of a Cloudinary Upload Preset (unsigned mode) | |
| KV_REST_API_URL | Redis / Vercel kv endpoint | http://localhost:8079 |
| KV_REST_API_TOKEN | Redis / Vercel kv token | example_token |
| DOMAIN_URL | URL Domain | http://localhost:3000 |
REPLICATE_API_TOKEN =
REPLICATE_API = "https://api.replicate.com/v1/predictions"
CLOUDINARY_CLOUD_NAME =
CLOUDINARY_UPLOAD_PRESET =
KV_REST_API_URL="http://localhost:8079"
KV_REST_API_TOKEN="example_token"
DOMAIN_URL="http://localhost:3000"
Start the application by running npm run dev
The application will now be running on http://localhost:3000
Open http://localhost:3000 with your browser to see the result.
With the application running, run this commmand npm run cypress:run or npm run cypress:open
npm run test