In this project we delve into the creation of a web application that generates images based on descriptions using OpenAI’s DALL E system. The backend of the application is built using Node.js utilizing the Express framework and OpenAI Node package to interact with the API. For the frontend we employ HTML, CSS and vanilla JavaScript. To get started we establish the Node.js project. Install dependencies such, as Express, OpenAI and dotenv for managing environment variables. Organizing our structure involves creating a routes folder with files defining routes related to OpenAI functionality. The server actively listens for requests while setting up a route to handle image generation via post requests. Additionally, we develop an OpenAI controller for processing logic associated with image generation. By employing a request function in this controller we send a request to the OpenAI API along with specified prompts. Upon receiving a response from the API we process it accordingly to extract the URL of generated images before sending it as a JSON response. On our frontend side an HTML file incorporates a user form enabling text input alongside options for selecting image sizes. CSS styles are applied to create an UI design featuring both a showcase area and section, for displaying images.
