0% found this document useful (0 votes)

39 views13 pages

Full Stack AI Image Generator Project Report With Overview

The document outlines a project for a full stack AI image generator web application built using the MERN stack, integrated with OpenAI's DALL·E model. It allows users to generate images from text prompts, manage credits for image generation, and explore a community feed, with payment handled through Razorpay. The project showcases real-world applicability and includes features such as user authentication, image history, and a responsive UI.

Uploaded by

arora29harman

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

39 views13 pages

Full Stack AI Image Generator Project Report With Overview

Uploaded by

arora29harman

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 13

FULL STACK AI IMAGE GENERATOR

USING MERN STACK

FACULTY GUIDE: [Leave space for name]

STUDENT: Harman [Leave space for Roll No.]

CERTIFICATE
[Leave space for full certificate content as per format]
ACKNOWLEDGEMENT
I would like to place on record my deep sense of gratitude to Prof. [Leave space], HOD-
Dept. Computer Science & Engineering, CGC- College of Engineering Landran, Mohali,
India for his generous guidance, help, and useful suggestions.

I express my sincere gratitude to Prof. [Leave space], Dept. Computer Science &
Engineering, CGC- College of Engineering Landran, Mohali, for his stimulating
guidance, continuous encouragement, and supervision throughout the course of this
project.

I am extremely thankful to the Principal, CGC- College of Engineering Landran, for

providing the infrastructural facilities to carry out this project work.
ABSTRACT
This project presents a full stack AI image generator web application built using the
MERN stack (MongoDB, Express.js, React.js, and Node.js) integrated with OpenAI's
DALL·E model. The application allows users to generate images from text prompts using
AI, view a community feed of all generated images, and share their own creations.

The app includes a credits system where users consume 1 credit per image generation.
Credits can be purchased via Razorpay integration, ensuring smooth and secure payment
handling. This addition introduces a monetization model into the project, showcasing
real-world applicability.

The frontend is built using React.js and Tailwind CSS for a responsive, clean user
experience. Backend services are powered by Express.js and Node.js, handling prompt
submissions, image generation logic, payment webhook handling, and storage of image
data in a MongoDB database. Users can generate images, view past generations, and
contribute to a shared feed. Features like image downloading, prompt copying, Razorpay
transactions, and credit management are implemented.

[Leave space for Screenshot of Homepage and App]

TABLE OF CONTENTS
1. Introduction

2. Literature Survey

3. Present Work

4. Result and Discussion

5. Conclusion and Future Scope

6. References
Chapter 1: INTRODUCTION
The recent advancements in artificial intelligence have enabled machines to understand
and generate images based on textual prompts. This project aims to provide a user-
friendly platform where users can interact with DALL·E, a powerful text-to-image
model, through a custom-built MERN stack application. The motivation behind this work
is to blend frontend development with AI integration and to build a product that
showcases the power of AI in creative fields.

Objectives:
- To implement a text-to-image generator using OpenAI’s DALL·E API.
- To build a full stack application using MERN stack.
- To create a community-driven image sharing platform.
- To integrate Razorpay for a credit-based generation system.
Chapter 2: LITERATURE SURVEY
Various platforms and applications such as MidJourney, DALL·E, and Stable Diffusion
have proven the potential of AI in generating creative visual content. OpenAI's DALL·E
model uses deep learning and natural language processing to understand prompts and
create images from scratch.

In this project, the following technologies and systems were studied in detail:
- OpenAI API documentation and integration.
- MongoDB Atlas for scalable NoSQL database usage.
- RESTful API design with Express.js for secure communication.
- Frontend frameworks and routing with React.js.
- Razorpay payment gateway for real-time credit purchasing.
- Prompt-to-image response validation and image optimization.

[Leave space for sample API diagrams, UI flowcharts, and Razorpay integration demo]
Chapter 3: PRESENT WORK
This chapter details the actual implementation of the AI Image Generator and the
integrated Razorpay payment system. The core idea is to allow users to create AI-
generated images from text prompts, and manage their usage via a credit system.

3.1 Tools and Technologies Used:

- Frontend: React.js, Tailwind CSS, Axios
- Backend: Node.js, Express.js, OpenAI API, Razorpay SDK
- Database: MongoDB with Mongoose (hosted via MongoDB Atlas)
- Deployment: Vercel (Frontend), Render (Backend)

3.2 Application Features:

- Text prompt-based image generation using DALL·E
- User dashboard and image history
- Real-time community feed of public generations
- Download and prompt copy functionality
- Credits system: each generation deducts 1 credit
- Razorpay payment integration for purchasing credits
- Admin credit packages configuration

3.3 Flow of Application:

1. User signs in or continues as guest.
2. They input a prompt in the text field.
3. Request is sent to backend; OpenAI API generates the image.
4. Image and prompt are stored in MongoDB.
5. Image is shown in UI, and displayed in community feed (if public).
6. Each generation deducts 1 credit from the user’s account.
7. If credits = 0, user is prompted to purchase credits via Razorpay.

[Leave space for UI wireframes, flowcharts, screenshots of Razorpay popup and credit
deduction logic]
Chapter 4: RESULT & DISCUSSION
The final deployed web application demonstrates the power of AI-based image
generation combined with a practical monetization model. Key results and observations:

- Average generation time: ~4 seconds

- High prompt-to-image accuracy with DALL·E
- Smooth Razorpay checkout experience and real-time credit updates
- MongoDB Atlas ensured scalable, cloud-based image storage
- React’s component-based design allowed modular development
- Tailwind CSS helped achieve a responsive and clean UI

Challenges faced:
- Handling API limits and billing
- Managing image cache, file formats, and compression
- Ensuring security in payment handling (used Razorpay webhooks with secret keys)
- UI responsiveness and loading states

[Leave space for screenshot comparisons, prompt vs generated image, Razorpay receipts]
Chapter 5: CONCLUSION & FUTURE SCOPE
Conclusion:
The Full Stack AI Image Generator is a successful implementation of AI-powered design,
bridging the gap between creativity and technology. It enables users to generate stunning
visuals with simple text, and supports a self-sustaining business model through credit
purchases.

Future Scope:
- Add user authentication (JWT + Google OAuth)
- Advanced generation settings (image size, styles)
- Implement Stable Diffusion / MidJourney APIs
- Integration of image upscaling or editing tools
- Leaderboard and reward system for most creative prompts
- Mobile app version with React Native

This application can serve as a base for startups and educational tools focusing on visual
creativity and generative AI.

[Leave space for roadmap diagrams, user feedback screenshots]

REFERENCES
- OpenAI API Docs: https://beta.openai.com/docs/
- MongoDB Atlas: https://www.mongodb.com/cloud/atlas
- React.js: https://reactjs.org/
- Razorpay Docs: https://razorpay.com/docs/
- Tailwind CSS: https://tailwindcss.com/docs
- Node.js + Express: https://expressjs.com/
- Vercel Deployment: https://vercel.com/
- Render Hosting: https://render.com/
APPLICATION OVERVIEW: FULL STACK AI IMAGE GENERATOR
The AI Image Generator is a full-stack web application built using the MERN stack
(MongoDB, Express.js, React.js, Node.js), powered by OpenAI's DALL·E model. It
allows users to generate creative images from text prompts, manage image history,
purchase credits, and explore a community feed — all within a sleek and intuitive
interface.

Core Functionalities

1. User Authentication
- Secure sign-up and login system using email and password.
- Passwords are encrypted and stored using hashing algorithms.
- Logged-in users can track remaining credits, access their history, and manage
public/private generations.
- JWT (JSON Web Token) used for secure, token-based access control to protected
routes.

2. Prompt-to-Image Generation
- Users input creative prompts which are processed by the OpenAI DALL·E API.
- AI generates a unique image based on the description.
- Images are stored in MongoDB and displayed instantly in the UI.

3. Credit System
- Every image generation deducts 1 credit from the user’s account.
- Users receive initial free credits on signup.
- System prevents generation if credits are insufficient.

4. Credit Purchase via Razorpay

- Razorpay payment gateway integrated for buying credit bundles.
- Secure checkout and real-time webhook handling for credit updates.
- Credit packages configurable from the admin panel.

5. Community Feed
- Users can choose to share generated images publicly.
- All public images are shown in the community gallery.
- Promotes creativity and discovery among users.

6. User Dashboard & History

- Logged-in users can view previous generations.
- Allows downloading images, copying prompts, and tracking usage.
- Displays remaining credits and payment logs.
7. Technology Stack
- Frontend: React.js, Tailwind CSS
- Backend: Node.js, Express.js
- Database: MongoDB Atlas
- Authentication: JWT, Bcrypt.js for password hashing
- Payment Gateway: Razorpay
- AI Model: OpenAI DALL·E
- Hosting: Vercel (Frontend), Render (Backend)