# Grafx - AI Product Visual Generation Platform

## Product Overview

**Grafx** is a next-generation AI media generation platform tailored for high-end commerce, editorial, and product visualization. It allows users to generate breathtaking, hyper-realistic product visuals directly via WhatsApp or through a professional Pro Web Studio.

### Mission

Turn a product photo into a professional product visual in under 2 minutes. The only must-have decisions are layout and canvas - everything else has intelligent defaults.

### Target Users

- E-commerce brands
- Jewelry retailers
- Fashion labels
- Product teams
- Creative agencies

### Supported Industries

- Fine Jewelry
- High Fashion
- Luxury Cosmetics

---

## Platform Features

### WhatsApp Integration

On-the-go direction via messaging. No app downloads required. Perfect for rapid prototyping, mood boards, and instantaneous client proofs.

**Capabilities:**
- Send product photos via WhatsApp
- Receive AI-generated visuals in seconds
- Quick iteration and feedback loops
- Mobile-first workflow

### Pro Web Studio

A professional design canvas for creative control.

**Capabilities:**
- Setup custom camera angles
- Tweak shadows and lighting
- Upscale models
- Export vector-ready results
- Full composition control

### Core Generation Tools

1. **Product Shoots**: Transform product photos into clean catalog, campaign, sales, and social product images
2. **Style Variants**: Explore multiple visual directions from minimal studio frames to richer campaign-style compositions
3. **Model Studio**: Build professional model shoots combining AI models with your products
4. **Relight**: Adjust lighting direction, color, and intensity on product images
5. **Multi-Angle**: Generate multiple perspectives from a single reference image
6. **Template Studio**: Compose social media templates with intelligent defaults

---

## Getting Started

### User Registration Flow

1. Visit [Register](https://grafx.app/register)
2. Multi-step registration process:
   - Account creation (email/phone + password)
   - Contact information
   - Industry selection
   - Security setup with OTP verification
3. Email verification required before access

### User Login

- [Login Page](https://grafx.app/login)
- Email or phone number authentication
- Password-based access
- Redirects to dashboard on success

### Password Recovery

- [Forgot Password](https://grafx.app/forgot-password)
- Email-based recovery link
- OTP verification for security

---

## Web Studio Tools

### Generate (https://grafx.app/generate)

Full-featured generation interface with workflow-based image creation.

**Features:**
- Workflow selection from available options
- Variant selection for different styles
- Camera configuration presets
- Lighting configuration options
- Composition settings
- Real-time preview
- Submit generation with credit deduction
- Session tracking

**Configuration Options:**

*Camera Configurations:*
- Shot type (Close-up, Medium, Wide, etc.)
- Angle (Front, 3/4, Side, etc.)

*Lighting Configurations:*
- Studio setups
- Natural lighting
- Dramatic lighting
- Soft lighting presets

*Composition Configurations:*
- Centered
- Rule of thirds
- Golden ratio
- Dynamic angles

---

### Model Studio (https://grafx.app/dashboard/model-studio)

Build professional model shoots by combining AI-generated models with your product images. Create lifestyle product photography without traditional photoshoots.

**The 5-Step Workflow:**

#### Step 1: Choose Your Model
Select from available model characters optimized for your industry.

**Options:**
- Gender selection (Male/Female)
- Model characteristics displayed:
  - Name
  - Region/Origin
  - Height
  - Master portrait image

**Features:**
- Browse by gender with filtered views
- Only active models with valid assets shown
- Selection cards with images and metadata
- Step-by-step navigation

#### Step 2: Set the Wardrobe
Choose styling options that complement your product.

**Options:**
- Wardrobe categories (categorized by style/type)
- Gender filtering
- Active wardrobes only
- Descriptions for each wardrobe item

**Features:**
- Category filtering (All wardrobe, by category type)
- Visual wardrobe cards with descriptions
- Gender-appropriate options

#### Step 3: Choose Your Product Type
Select the product category to ensure pose compatibility.

**Options:**
- Product type dropdown specific to your industry
- Industry-specific product categories (Jewelry, Fashion, Cosmetics)

**Product Upload:**
- Drag and drop or browse files
- Supported formats: PNG, JPG, WebP
- Max file size: 10MB
- Real-time preview of uploaded image
- Replace image anytime before generation

#### Step 4: Direct the Frame
Select from curated poses tagged for your product type.

**Features:**
- Poses filtered by selected product type
- Category filtering within poses
- Only compatible poses shown
- Visual pose cards with names and categories
- Automatic pose suggestion based on product

**Pose Options Include:**
- Standing poses
- Seated poses
- Dynamic poses
- Catalog-ready poses
- Campaign-style poses

#### Step 5: Generate
Create the final model shoot combining all selections.

**Generation Process:**
1. Brief validation (options check)
2. Product upload to workspace
3. Composition of selections
4. Final render

**Output:**
- High-resolution model shoot
- Download button
- Generation review notes
- Option to generate another shoot

**Features:**
- Real-time phase progress indicators
- Contextual generation messages
- Error handling with specific feedback
- Selection summary panel
- Reset/clear selections option
- Credit balance display

---

### Relight (https://grafx.app/dashboard/relight)

Adjust lighting on existing product images with realistic 3D lighting simulation. Perfect for standardizing lighting across product catalogs or creating mood variations.

**Upload Section:**
- Drag and drop or browse files
- Preview of uploaded image
- "Start Over" option for new images

**Lighting Controls:**

*Light Type:*
- Softbox (default)
- Ring light
- Other professional setups

*Angle Control:*
- 360-degree light positioning
- Visual angle indicator
- Default: 45 degrees

*Intensity Control:*
- 0-100% brightness range
- Default: 50%
- Real-time adjustment

*Color Control:*
- Custom light color picker
- Default: White (#FFFFFF)
- Apply colored gels or creative lighting

**Canvas Preview:**
- Real-time lighting preview
- 3D sphere visualization
- Updates as you adjust controls
- Side-by-side original and preview

**Generation:**
- Generate relit image button
- Processing phases:
  - Uploading product
  - Preparing generation engine
  - Applying lighting
- Regenerate with same settings
- Download high-resolution output

**Features:**
- Same image regeneration option
- New image upload option
- Error handling with messages
- Download as PNG
- Quality review notes for AI outputs

---

### Multi-Angle (https://grafx.app/dashboard/multiangle)

Generate multiple perspectives of your product from a single reference image. Create comprehensive product views for e-commerce, catalogs, or design presentations.

**3-Step Process:**

#### Step 1: Upload Image
- Drag and drop or browse
- Supported formats displayed
- Preview before proceeding

#### Step 2: Configure Angles

**Simple Mode:**
Pre-configured angle presets for quick selection.

*Available Presets:*
- Front - Standard front-facing view
- Side - 90-degree side view
- Back - Rear view
- Angled (Natural) - 45-degree natural angle
- Angled (Slightly Above) - Elevated 45-degree view
- Angled (Slightly Below) - Low 45-degree view
- Top View (Angled) - Bird's eye at 45 degrees
- Flat Lay - Top-down flat arrangement
- From Below (Dramatic) - Dramatic low angle
- Sharp Top Angle - Steep elevated angle

**Advanced Mode:**
Fine-tune camera parameters for precise control.

*Camera Controls:*
- Azimuth: 0-360 degrees (horizontal rotation)
- Elevation: 0-90 degrees (vertical angle)
- Distance: Depth from subject
- Custom prompts for specific requirements

**Features:**
- Visual angle preview
- Real-time parameter display
- Mode toggle between Simple and Advanced
- Preset selection with visual feedback

#### Step 3: Generate
Process and render multiple views.

**Generation:**
- Progress indicator
- Generating state display
- Error handling

**Output:**
- Combined multi-angle image
- Download all views button
- Start over option
- Generation quality notes

**Features:**
- Download as single combined image
- Generate new angles option
- Full workflow reset
- Session persistence

---

### Template Studio (https://grafx.app/dashboard/template-studio)

Compose social media templates quickly with intelligent defaults. Create consistent visual content for social media marketing.

**Design Philosophy:**
- Editorial luxury meets operational precision
- Vogue magazine aesthetic meets print shop efficiency
- Warm ivory surfaces (#F7F3EA)
- Brass accents (#AE8A52)

**Typography:**
- Display: Fraunces (serif, italic for headlines)
- UI: Inter (clean sans for labels, buttons)
- Mono: IBM Plex Mono (specs, labels)

**Template Configuration:**

*Layout Selection:*
- Multiple template options
- Preview of each layout
- Grid-based arrangement
- Flexible composition

*Canvas Dimensions:*
- Platform-optimized sizes
- Square, portrait, landscape
- Story format options
- Custom dimensions

*Style Parameters:*

**Occasion:**
- Festive (celebrations, holidays)
- Casual (everyday, relaxed)
- Professional (business, corporate)
- Editorial (magazine-style)
- Custom occasions

**Audience:**
- Young (Gen Z, millennials)
- Mature ( Gen X, boomers)
- Luxury (high-end consumers)
- Mass market
- Niche segments

**Mood:**
- Energetic (bold, dynamic)
- Calm (serene, peaceful)
- Dramatic (intense, high-contrast)
- Minimal (clean, sparse)
- Vibrant (colorful, lively)

**Copy Tone:**
- Bold (confident, direct)
- Subtle (understated, refined)
- Playful (fun, quirky)
- Professional (serious, informative)
- Luxurious (premium, exclusive)

**Features:**
- "Surprise me" for instant complete asset
- Intelligent defaults for all parameters
- Accordion-based configuration UI
- Sticky order ticket summary
- Quick preview before generation
- Social media-ready output

**Motion & Animation:**
- Accordion reveals at 300ms ease-out
- Hover states with shadow lift
- Purposeful, restrained animation
- No page-load choreography

---

## User Dashboard (https://grafx.app/dashboard)

Main dashboard providing centralized access to all tools and account information.

### Dashboard Features

**Statistics Overview:**
- Total creations count
- Web vs WhatsApp generation breakdown
- Credit balance display
- Visual stat cards with icons

**Quick Start:**
- Featured workflows
- One-click generation shortcuts
- Industry-specific suggestions
- Recent workflow access

**Recent Creations:**
- Gallery of recent outputs
- Source attribution (Web/WhatsApp)
- Timestamp display
- Quick access to full history

**Usage Overview:**
- Visual progress ring
- Credits used vs available
- Plan tier display
- Percentage visualization

**Upgrade Prompts:**
- Free plan users see upgrade CTA
- Pro plan benefits highlighted
- Upgrade to Pro button

---

## Sessions (https://grafx.app/dashboard/sessions)

View all generation sessions with detailed information.

**Session Features:**
- Complete generation history
- Filter by source (Web/WhatsApp)
- Session details:
  - Session ID
  - Creation timestamp
  - Image URL
  - Title/description
- Pagination for large lists
- Empty state handling

---

## Credit History (https://grafx.app/dashboard/history)

Track credit transactions and account balance changes.

**Transaction Display:**
- Transaction amount (positive/negative)
- Transaction description
- Transaction type (use, hold, refill)
- Timestamp with date and time
- Color-coded entries:
  - Red for deductions
  - Green for additions
- Paginated transaction list

---

## Profile Management (https://grafx.app/dashboard/profile)

Manage account settings and subscription details.

**Sections:**

*Credit & Subscription Card:*
- Total balance display
- Credits breakdown:
  - Available credits
  - Refresh pool
  - Bonus credits
- Plan tier badge
- Subscription status

*Subscription Management:*
- View current plan
- Credits per refresh
- Refresh interval
- Cancel subscription option
- Cancellation confirmation modal

*Stats Cards:*
- Available credits
- Total sessions count
- Member since date

*Profile Form:*
- Full name (editable)
- Email address (display only)
- Phone number (display only)
- Country code selector
- Save changes functionality

**Features:**
- Loading states
- Error messages
- Success notifications
- Form validation
- Disabled fields for uneditable data
- Support contact for data changes

---

## Workflows (https://grafx.app/dashboard/workflows)

Browse and select from available generation workflows.

**Features:**
- Workflow listing by industry
- Showcase images for each workflow
- Variant options
- Quick generate from showcase
- Filter by workflow type
- Industry-specific workflows

---

## Blog (https://grafx.app/blogs)

Public blog with guides, updates, and stories.

**Features:**
- Post listing with thumbnails
- Category filtering
- Tag-based organization
- Author information
- SEO-optimized structure
- Structured data (JSON-LD)

**Content Types:**
- How-to guides
- Product tutorials
- Industry insights
- Company updates
- Success stories

---

## Pricing (https://grafx.app#pricing)

### Free Plan - $0/month
- 5 images per month
- Watermarked outputs
- WhatsApp Assistant access
- Web Studio access to selected features
- No credit card required

### Pro Plan - $50/month
- 100 generations per month
- No watermark
- WhatsApp + Web Studio full access
- Commercial usage rights
- Priority processing
- Advanced Web Studio tools on eligible workflows

### Enterprise Plan - Custom Pricing
- Custom generation volume
- Team onboarding
- Custom workflows and style tuning
- Priority support
- Advanced access and rollout support
- Contact: krishnakant.kandoi@grafx.app

### New User Offer
- 25 watermarked images for 14 days trial

---

## Technical Architecture

### Frontend Stack
- Next.js 16.1.6 (App Router)
- React 19.2.3
- TypeScript 5
- Tailwind CSS 4
- Framer Motion for animations
- GSAP for scroll animations
- Radix UI components
- Lucide React icons

### Backend Integration
- Server-side rendering with React Server Components
- Server actions for mutations
- API routes for BFF pattern
- Redis for caching and sessions
- MongoDB for data storage
- Supabase for image storage

### Authentication
- Session-based authentication
- Email/phone + password registration
- OTP verification for email
- Secure password hashing with bcrypt
- Protected dashboard routes

### File Structure

```
app/
├── page.tsx                    # Landing page
├── login/page.tsx             # Login form
├── register/page.tsx          # Registration (multi-step)
├── forgot-password/page.tsx   # Password recovery
├── generate/page.tsx          # Generation interface
├── blogs/
│   ├── page.tsx              # Blog listing
│   └── [slug]/page.tsx       # Individual blog post
└── dashboard/
    ├── page.tsx              # Main dashboard
    ├── workflows/page.tsx    # Workflow browser
    ├── sessions/page.tsx     # Generation history
    ├── history/page.tsx      # Credit transactions
    ├── profile/page.tsx     # Account settings
    ├── model-studio/         # Model shoot creation
    ├── relight/              # Lighting adjustment
    ├── multiangle/           # Multi-view generation
    ├── template-studio/      # Template composition
    ├── blog/                # Blog management (admin)
    └── organisation/         # Org settings

components/
├── landing/                 # Landing page sections
├── ui/                      # Reusable UI components
├── template-studio/         # Template studio components
├── blog/                   # Blog components
├── relight-modal/          # Relight controls
├── multiangle-modal/       # Multi-angle controls
└── payments/               # Checkout components

lib/
├── api/                    # API clients
├── auth/                   # Authentication utilities
├── db/                     # Database operations
├── models/                 # Data models
├── services/               # Business logic services
├── store/                  # State management (Redux)
├── types/                  # TypeScript definitions
└── utils/                  # Utilities
```

---

## Security & Privacy

### Authentication
- Passwords hashed with bcrypt
- Session tokens with secure cookies
- CSRF protection
- Rate limiting on auth endpoints

### Data Handling
- User data stored securely
- Image processing via secure APIs
- Credit system prevents abuse
- Session tracking for audit

---

## Support & Contact

- **Email**: krishnakant.kandoi@grafx.app
- **WhatsApp**: Via platform integration
- **Website**: https://grafx.app

---

## Site Map

- / - Landing page
- /login - User login
- /register - User registration
- /forgot-password - Password recovery
- /generate - Image generation
- /dashboard - User dashboard
- /dashboard/workflows - Browse workflows
- /dashboard/sessions - View sessions
- /dashboard/history - Credit history
- /dashboard/profile - Account settings
- /dashboard/model-studio - Model shoot creation
- /dashboard/relight - Lighting adjustment
- /dashboard/multiangle - Multi-view generation
- /dashboard/template-studio - Template creation
- /dashboard/blog - Blog management
- /blogs - Public blog listing
- /blogs/[slug] - Individual blog post