🚀 Lumina Studio (Lumina AI)

Transform imagination into stunning AI-generated artwork with a modern, high-performance image generation platform.

Lumina Studio is a full-stack AI-powered image generation application built with React, TypeScript, Vite, and Node.js. It provides an elegant and responsive interface where users can generate high-quality AI images from text prompts, explore different artistic styles, manage their generation history, and download generated images with a single click.

Designed with both developers and beginners in mind, this project demonstrates how a modern AI application can be built using a React frontend connected to a Node.js backend that communicates with an AI image generation model.

📸 Preview

assets/
├── home-page.png
├── generation-page.png
├── gallery.png
└── pricing.png

✨ Features

🎨 AI Image Generation

Generate beautiful AI-generated artwork simply by describing your imagination in natural language.

Example Prompt

"A futuristic cyberpunk city during sunset with flying cars."

⚡ Lightning Fast Interface

Built with React + Vite, providing

Instant page loading
Fast Hot Module Reload (HMR)
Smooth animations
Optimized performance

🖼️ Multiple Aspect Ratios

Generate images in different dimensions depending on your needs.

Supported ratios:

1:1 (Square)
16:9 (Landscape)
9:16 (Portrait)
4:3
3:4

🎭 Multiple AI Styles

Choose different visual styles before generating.

Current styles include:

Default
Neon Dystopia
Cosmic Impasto
Prismatic Void
Anime / Digital Art
Watercolor
Photorealistic

📂 Local Generation History

Every generated image is automatically stored inside your browser's Local Storage.

History includes:

Prompt
Original Prompt
Style
Aspect Ratio
Resolution
Generation Time

No database is required.

📥 One Click Download

Download generated images directly to your local computer.

Supports

PNG
High Resolution
One Click Export

📱 Fully Responsive

The application works beautifully on

Desktop
Laptop
Tablet
Mobile Devices

🎯 Modern UI

Lumina Studio features

Glassmorphism
Gradient UI
Animated Components
Blur Effects
Modern Typography
Dark Theme
Interactive Hover Effects

🛠️ Built With

Frontend

React
TypeScript
Vite
CSS3
HTML5
Lucide React

Backend

Node.js
Express.js
TypeScript

AI

Local AI Translation Node
Image Generation API
Prompt Processing Engine

Storage

Browser Local Storage

Development Tools

VS Code
npm
Git
GitHub

📁 Project Structure

lumina-ai/
│
├── assets/                     # Static assets
│
├── src/
│   ├── App.tsx                 # Main application
│   ├── main.tsx                # React Entry
│   ├── index.css               # Global styling
│   └── responsive.css          # Responsive layouts
│
├── .env                        # Environment variables
├── .env.example                # Example environment file
├── .gitignore
├── index.html
├── metadata.json
├── package.json
├── package-lock.json
├── README.md
├── requirements.txt
├── server.ts                   # Backend Server
├── tsconfig.json
└── vite.config.ts

⚙️ Prerequisites

Before running the project, make sure the following software is installed.

Install Node.js

Download

https://nodejs.org

Recommended Version

Node.js 18+

Verify Installation

node -v

Example

v22.17.0

Verify npm

npm -v

Example

10.9.2

Install Git

Download

https://git-scm.com

Verify

git --version

📥 Installation Guide (Beginner Friendly)

Step 1

Clone the repository

git clone https://github.com/YOUR_USERNAME/lumina-ai.git

Step 2

Move inside the project

cd lumina-ai

Step 3

Install dependencies

npm install

Wait until npm finishes downloading all packages.

Step 4

Create your environment file

Copy

.env.example

Rename it to

.env

Example

API_KEY=YOUR_API_KEY
PORT=3000

Replace

YOUR_API_KEY

with your own AI provider API key.

Step 5

Start the backend server

npm run server

or

npx tsx server.ts

The terminal should display something similar to

Server Running

http://localhost:3000

Leave this terminal running.

Step 6

Open another terminal.

Run the frontend.

npm run dev

You should now see

Local:

http://localhost:5173

Step 7

Open your browser.

Visit

http://localhost:5173

The application is now ready.

🎨 How to Generate Images

Enter a prompt.

Example

A white wolf standing in snowy mountains.

Select an aspect ratio.
Select a style.
Click

Generate

Wait a few seconds.
Your AI-generated image will appear.
Click Download to save it.

📥 Downloading Images

Simply click

Download

The generated image will automatically be downloaded to your computer.

🗂 Generation History

Every image is automatically saved locally.

The history stores

Image
Prompt
Style
Aspect Ratio
Time
Resolution

You can revisit previous generations anytime during the same browser session (or until Local Storage is cleared).

📦 Available Scripts

Install dependencies

npm install

Run frontend

npm run dev

Build project

npm run build

Preview production build

npm run preview

Run backend

npm run server

🌍 Environment Variables

Example

API_KEY=YOUR_API_KEY
PORT=3000

Never commit your real .env file to GitHub.

❓ Common Issues

npm install fails

Delete

node_modules
package-lock.json

Then run

npm install

Backend won't start

Check

Node.js is installed
.env exists
API key is valid
Port 3000 is not already in use

Frontend cannot connect to backend

Make sure the backend server is running first.

Expected backend URL

http://localhost:3000

Images are not generating

Check

Internet connection
AI API key
Backend logs for errors

🚀 Future Improvements

User Authentication
Cloud Storage
Image Upscaling
AI Image Editing
Favorites Collection
Public Gallery
Dark/Light Theme Toggle
Multiple AI Providers
Batch Image Generation
Prompt Templates
Image Sharing
Prompt History Search

🤝 Contributing

Contributions are always welcome.

Fork the repository.
Create a new branch.

git checkout -b feature-name

Commit your changes.

git commit -m "Added new feature"

Push your branch.

git push origin feature-name

Open a Pull Request.

📄 License

This project is licensed under the MIT License.

You are free to use, modify, and distribute this project.

👨‍💻 Author

Muhammad Zaeem Ahmad

Full Stack MERN Developer

GitHub

https://github.com/chzaeem47

https://linkedin.com/in/muhammad-zaeem-ahmad-06a5a0363

⭐ Support

If you found this project useful,

⭐ Star the repository

🍴 Fork the repository

📢 Share it with others

Your support helps improve the project and motivates future development.

Name		Name	Last commit message	Last commit date
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
image.png		image.png
index.html		index.html
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
server.ts		server.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation

🚀 Lumina Studio (Lumina AI)

📸 Preview

✨ Features

🎨 AI Image Generation

⚡ Lightning Fast Interface

🖼️ Multiple Aspect Ratios

🎭 Multiple AI Styles

📂 Local Generation History

📥 One Click Download

📱 Fully Responsive

🎯 Modern UI

🛠️ Built With

Frontend

Backend

AI

Storage

Development Tools

📁 Project Structure

⚙️ Prerequisites

Install Node.js

📥 Installation Guide (Beginner Friendly)

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

🎨 How to Generate Images

📥 Downloading Images

🗂 Generation History

📦 Available Scripts

🌍 Environment Variables

❓ Common Issues

npm install fails

Backend won't start

Frontend cannot connect to backend

Images are not generating

🚀 Future Improvements

🤝 Contributing

📄 License

👨‍💻 Author

⭐ Support

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages