🚀 From a Personal AI Image Assistant to a Real-Time AI Creative Studio!
What started as a standalone AI text-to-image tool has evolved. Recognizing that the creative process rarely happens in isolation, we went back to the drawing board and completely transformed Imagify into a full-fledged collaborative workspace designed for teams, designers, and creators to build together in real time.
Powered by Socket.io, users can join live creation rooms. When a team member updates a prompt, applies an artistic style tag, or generates artwork, every action syncs instantly across everyone's screen in real time.
Upload reference images alongside your text prompts! Our Gemini-powered assistant analyzes the uploaded image's lighting, composition, and color palette, blending it with the text prompt for precise, highly controlled Image-to-Image generation.
Persistent project folders with Role-Based Access Control (RBAC). Project owners can securely invite members via an in-app notification system, assigning Editor or Viewer permissions, while an Activity Feed tracks every modification with timestamped logs.
A persistent, real-time chatbox built directly into the project workspaces—eliminating the need to switch to third-party messaging apps. Features include an unread message badge system and a 1.5-second anti-spam cooldown mechanism.
To ensure a safe environment for all teams, we engineered a custom regex and keyword-based filtering system. It automatically intercepts and blocks violent, explicit, or offensive language across both image generation prompts and live chat messages.
We upgraded our image generation engine to Pollinations.ai, specifically routing generation requests through the photorealistic FLUX model to deliver high-fidelity results with zero credit bottlenecks.
- Framework: React 19, Vite
- Styling & UI: Tailwind CSS, Lucide React Icons
- Animations: Motion (Framer Motion)
- Real-Time Communication: Socket.io-client
- HTTP & Toast Notifications: Axios, React Router, React Toastify
- Runtime & Framework: Node.js, Express.js
- Database: MongoDB Atlas, Mongoose ORM
- Real-Time Socket Layer: Socket.io
- Security & Authentication: JWT (JSON Web Tokens), Bcrypt, Regex Safety Middleware
- Payment Gateway: Razorpay API
- AI Engines: Google Gemini AI API, Pollinations.ai (FLUX Model Engine)
[ User Prompt / Image Reference Upload ]
│
▼
[ Regex & Keyword Safety Content Guardrail ]
│
┌──────────────────┴──────────────────┐
▼ ▼
(Violation Intercepted) (Passed Safety Check)
│ │
[ Real-time Alert Triggered ] ▼
[ Google Gemini Analysis Engine ]
(Lighting, Composition & Palette Sync)
│
▼
[ Pollinations.ai (FLUX Model) ]
│
▼
[ Socket.io Room Broadcast ]
(Syncs Gallery, Chat & Activity Feed Live)
Clone the repository
git clone https://github.com/yourusername/imagify.gitFrontend
cd client
npm install
npm run devBackend
cd server
npm install
npm run serverMONGODB_URI=
JWT_SECRET=
GEMINI_API_KEY=
RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=VITE_BACKEND_URL=
VITE_RAZORPAY_KEY_ID=User Text Prompt / Image Reference │ ▼ Safety & Content Guardrail (Regex & Keyword Filter Check) │ ▼ Gemini AI (Prompt Enhancement & Image Analysis) │ ▼ Pollinations.ai (FLUX Model) (High-Fidelity Image Synthesis) │ ▼ MongoDB Storage │ ▼ Socket.io Event Sync │ ▼ Live Broadcast to Workspace Room
Purchase Credits │ ▼ Razorpay Payment │ ▼ Payment Verification │ ▼ Credits Updated │ ▼ Generate AI Assets
Imagify
│
├── client
│ ├── src
│ │ ├── components
│ │ │ ├── common # Navbar, Footer, Modals, ChatBox, Notifications
│ │ │ ├── studio # PromptInput, StyleSelector, ImageToImageUploader
│ │ │ └── workspace # ActivityFeed, MembersList, AssetGallery, RoleBadge
│ │ ├── pages # Home, ProjectWorkspace, Dashboard, BuyCredit
│ │ ├── context # AppContext (Auth, Socket.io, Workspace State)
│ │ ├── assets # Icons, Media, Visual Assets
│ │ └── App.jsx
│ └── vite.config.js
│
├── server
│ ├── config # Database & Socket.io Initialization
│ ├── controllers # Workspace, AI, Chat, User, Payment Controllers
│ ├── middleware # JWT Auth, RBAC Guards, Content Moderation Middleware
│ ├── models # User, Workspace, ChatMessage, Activity Log Models
│ ├── routes # Express REST API Endpoints
│ ├── sockets # Real-Time Event Handlers & Chat Sockets
│ └── server.js # Express Server & Socket.io Bootstrapper
│
└── README.md
- 👤 User Auth: JWT-based Token Authentication & Bcrypt Password Hashing.
- 🛡️ Role-Based Access Control (RBAC): Granular permissions for Owner, Editor, and Viewer roles within workspaces.
- 🚨 Safety Content Guardrails: Automated Regex and keyword filtering for explicit, violent, or profane prompt & chat intercept.
- ⌛ Anti-Spam Controls: Cooldown mechanisms (1.5s delay) to prevent message flooding in live room chats.
- 🔔 Workspace Notifications: Secure in-app room invitations and real-time permission updates.
- 🧠 Google Gemini AI API: Prompt enhancement, style parsing, and reference image analysis.
- ⚡ Pollinations.ai (FLUX Model): Open-source, photorealistic text-to-image synthesis engine.
- 🔌 Socket.io Engine: Bi-directional WebSockets for real-time collaboration, live messaging, and room syncing.
- 💳 Razorpay Payment Gateway: Secure payment processing for credit purchases.
- 🖌️ In-Canvas AI Inpainting & Outpainting: Edit specific regions of generated assets directly inside the canvas.
- 🔍 Native Resolution Upscaling: Super-resolution upscaling for high-dpi print downloads.
- 🎙️ Voice Prompts: Real-time speech-to-prompt AI creation.
- 🌐 Public Community Showcase: Publish, share, and remix creative studio projects.
GitHub: https://github.com/pragati956
GitHub: https://github.com/notoveryet-51
This project is licensed under the MIT License.
⭐ If you found this project useful, consider giving it a star on GitHub! ⭐ If you found this project useful, consider giving it a star!