Skip to content

Latest commit

 

History

History
103 lines (68 loc) · 2.91 KB

README.md

File metadata and controls

103 lines (68 loc) · 2.91 KB
Raw

AI Image Generator

This repository is a simple app built with the OpenAI API to generate images using artificial intelligence. It has a frontend developed with Vue (client file) and a backend with Express (server file).

🛠 Installation and Configuration

  1. Clone the project to your local machine
git clone https://github.com/X1-Il/AI-image.git
  1. Navigate to project directory
cd AI-image
  1. Install client dependencies
cd client
yarn
  1. Install server dependencies
cd ../server
yarn
  1. Configure enviroment variables

Create .env file inside server/ and set the next values:

PORT=5000 // Your number port
OPENAI_API_KEY="Your_API_Key_Here"

Note: If your dont know how to get your API KEY, follow this guide, or if you already have and OpenAI Account, create an API Key here

  1. Run server (development mode)
yarn dev

Server should be running on https://localhost:5000/

  1. Run client (development mode)
cd ../client
yarn dev

Client should be running on https://localhost:5173/

⚙️ Functionallity

The app just has a single page on the initial route "/".

Through an input field (desktop) or a textarea (mobile), it collects a string of characters entered by the user. In the case that the string is empty, the application will notify the user and there will be no further actions.

Customized Prompt

The user will have the "Options" menu, which offers a series of keywords to generate different types of images and refine their quality.

Once it has been verified that the string of characters is not empty, the application will combine the string with the values of the selected options. For example:

  • Input: "A dog with a red hat"
  • Options: ["Graffiti", "Underground", "High Quality"...]
  • Final Prompt: "A dog with a red hat, graffiti, underground, high quality"

Generate Image

/generateimage is an endpoint to generate image request to OpenAI Image generation with necessary props:

const response = await openai.createImage({
  prompt: "A dog with a red hat, graffiti, underground, high quality",
  n: 1,
  size: "1024x1024",
});
image_url = response.data.data[0].url;

Express Server

An endpoint is created using Express routing on the route /openai/, with the endpoint /generateimage, which is responsible for handling the request.

Server is deployed on Vercel and here is the endpoint:

POST -> https://openai-app-image-generator.vercel.app/openai/generateimage