This is a web application that uses OpenAI's DALL-E API to generate images from textual descriptions.
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.
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.
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
This project relies on certain environment variables and API keys to function properly. Follow the steps below to set them up:
Create a .env file in the root directory of the project. This file will store your environment variables.
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.
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.
- 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
.envfile
CLOUDINARY_CLOUD_NAME=<your_cloudinary_cloud_name>
CLOUDINARY_API_KEY=<your_cloudinary_api_key>
CLOUDINARY_API_SECRET=<your_cloudinary_api_secret>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.
- 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
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)
}
})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");
}
};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>
);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.
Copyright (c) 2023 Jorge Zamora
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.