ThreeJS with OpenAI's DALL·E

Demonstration of the application   |    Features   |    Technologies used   |    Application installation

Application status : Developed ✔️

💻 Demonstration of the application

1. Overview

2. Pick any color palette

3. Upload your desired image

4. Apply the image for either the logo, the whole shirt or both

5. Generate image using OpenAI's DALLE 2 ( EXPIRED )

📓 About

A responsive t-shirt designing website with an interactive 3D Model using:

• ReactJS - a popular front-end library that has gradually become the go-to framework for modern web development
• ThreeJS - a powerful 3D graphics library for rendering and animating the 3D model
• React Three Fiber - a popular library for creating 3D graphics with ThreeJS in React
• Tailwind CSS - a popular utility-first CSS styling framework
• Framer Motion - the most popular library used to bring your React website to life with animations
• Dalle·E 2 - OpenAI's ai system to create realistic images and art from a description in natural language

⭐ Features

• Color Picker.
• Image Upload for both logo and full canvas.
• Image Generation using OpenAI's DALL·E 2.

🔑 Take a look

https://dalle-ai-threejs.netlify.app/

🚀 Technologies used:

         

ℹ️ Application installation

• git clone https://github.com/ChammounC/TShirtDesign-ThreeJS.git to clone the repository

server-side

• cd server and run npm install
• Visit https://platform.openai.com/account/api-keys and generate an API_KEY
• create a .env file in the root of server folder and add variables:

OPENAI_API_KEY = <GENERATED_API_KEY_FROM_ABOVE_STEP>
ALLOWED_ORIGIN = <CLIENT_URL> // eg.http://localhost:3000/

• run npm start

client-side

• cd client and run npm install
• create a .env file in the root of client folder and add variable:

VITE_URL = http://localhost:8080/api/v1/dalle

• run npm run dev