DALL-E-Clone

This is a web application that uses OpenAI's DALL-E API to generate images from textual descriptions.

Description

DALL-E-Clone is a web application built using React.js that utilizes OpenAI's DALL-E API to generate images from textual descriptions. The application is designed to showcase the power of OpenAI's DALL-E API and how it can be used to create stunning images from textual inputs.

Getting Started

To get started with DALL-E-Clone, simply visit the web application and enter a textual description. DALL-E-Clone will use the DALL-E API to generate an image that matches the description. No additional setup or installation is required.

Usage

Want to test on your local machine?

Clone the repository to your local machine
Install the necessary dependencies by running the following command in the root directory:

npm install

Start the server by running the following command:

npm start

To build the client for production, run the following command:

npm run build

To run the client in development mode, run the following command:

npm run dev

Environmental Variables and API Key Config

This project relies on certain environment variables and API keys to function properly. Follow the steps below to set them up:

Step 1: Create a `.env` file

Create a .env file in the root directory of the project. This file will store your environment variables.

Step 2: Obtain the OpenAI API Key

Visit the OpenAI website and sign up for an account if you don't have one already. Once logged in, navigate to the API keys section of your account dashboard.

Click on the "Create API Key" button and copy the generated key.

Step 3: Add API Key and Other Variables to the `.env` File

OPENAI_API_KEY=<your_openai_api_key>
MONGODB_URL=<your_mongodb_url>

Replace <your_openai_api_key> with the API key you obtained in Step 2, and <your_mongodb_url> with your MongoDB connection URL.

Step 4: (Optional) Obtain the Cloudinary API Key and Credentials

Visit the Cloudinary website and sign up for an account if you don't have one already.
Once logged in, navigate to the Dashboard and locate the "Account Details" section.
Copy the "API Key", "API Secret", and "Cloud name" from this section.
Add them to your .env file

CLOUDINARY_CLOUD_NAME=<your_cloudinary_cloud_name>
CLOUDINARY_API_KEY=<your_cloudinary_api_key>
CLOUDINARY_API_SECRET=<your_cloudinary_api_secret>

Step 5: Load Enviornment Variables

Ensure that your application loads the environment variables from the .env file. You can use packages like dotenv to achieve this. In your project's entry file, add the following line:

require('dotenv').config();

After completing these steps, your project should be configured with the necessary environment variables and API keys. Remember to include the .env file in your .gitignore file to prevent it from being committed to your repository.

Features

Generates high-quality images from textual descriptions using OpenAI's DALL-E API
Supports a wide range of textual inputs, from simple phrases to complex sentences and even paragraphs
Offers a flexible and customizable interface that can be easily adapted to different use cases
Provides an intuitive and user-friendly design for generating images from textual descriptions
Uses Tailwind CSS for easy and responsive styling

Code Snippets

DALL-E API Request

When a client sends a request to this route with the image description (or prompt) in the request body, the server makes a call to the DALL-E API, receives the generated image in base64 format, and sends it back to the client in the response.

router.route('/').post(async (req,res) => {
    try{
        const { prompt } = req.body;
 
        const aiResponse = await openai.createImage({
            prompt,
            n: 1,
            size: '1024x1024',
            response_format: 'b64_json',
        });
 
        const image = aiResponse.data.data[0].b64_json;
 
        res.status(200).json({ photo: image });
 
    } catch (error) {
        console.log(error);
        res.status(500).send(error?.response.data.error.message)
    }
})

Image Generation Function

The generateImage function is responsible for generating an image using DALL-E based on a provided textual prompt.

const generateImage = async () => {
  if (form.prompt) {
    try {
      setGeneratingImg(true);
      const response = await fetch(
        "https://dallecloneserver-pcz4.onrender.com/api/v1/dalle",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            prompt: form.prompt,
          }),
        }
      );
 
      const data = await response.json();
      setForm({ ...form, photo: `data:image/jpeg;base64,${data.photo}` });
    } catch (err) {
      alert(err);
    } finally {
      setGeneratingImg(false);
    }
  } else {
    alert("Please provide proper prompt");
  }
};

TailWindCSS Styling

This snippet demonstrates how to style the image generated using Tailwind CSS.

const Card = ({ _id, name, prompt, photo }) => (
  <div className="rounded-xl group relative shadow-card hover:shadow-cardhover card">
    <img
      className="w-full h-auto object-cover rounded-xl"
      src={photo}
      alt={prompt}
    />
    <div className="group-hover:flex flex-col max-h-[94.5%] hidden absolute bottom-0 left-0 right-0 bg-[#10131f] m-2 p-4 rounded-md">
      <p className="text-white text-sm overflow-y-auto prompt">{prompt}</p>
 
      <div className="mt-5 flex justify-between items-center gap-2">
        <div className="flex items-center gap-2">
          <div className="w-7 h-7 rounded-full object-cover bg-green-700 flex justify-center items-center text-white text-xs font-bold">
            {name[0]}
          </div>
          <p className="text-white text-sm">{name}</p>
        </div>
        <button
          type="button"
          onClick={() => downloadImage(_id, photo)}
          className="outline-none bg-transparent border-none"
        >
          <img
            src={download}
            alt="download"
            className="w-6 h-6 object-contain invert"
          />
        </button>
      </div>
    </div>
  </div>
);

Tech Stack

This project is built using the following technologies:

MongoDB: Used as the NoSQL database to store image and user-generated data.
Express.js: Provides the backend server and API endpoints for fetching and generating images.
React.js: Utilized for building the frontend user interface and handling user interactions.
Node.js: Serves as the runtime environment for the Express.js backend server.
OpenAI's DALL-E API: Integrated to generate images based on user prompts.
Tailwind CSS: Applied as the utility-first CSS framework for styling the frontend components.
Cloudinary: (Optional) Can be used for managing and serving the generated images.
Vite: Employs next-generation frontend tooling to enhance development experience and optimize production builds.