Base code

2026-01-08 22:39:53 +07:00
parent 697115c61a
commit c35fa52117
2169 changed files with 626670 additions and 0 deletions
--- a/docs-site/docs/features/image-studio/modules.md
+++ b/docs-site/docs/features/image-studio/modules.md
@@ -0,0 +1,432 @@
+# Image Studio Modules
+
+Image Studio consists of 7 core modules that provide a complete image workflow from creation to optimization. This guide provides detailed information about each module, their features, and current implementation status.
+
+## Module Overview
+
+| Module | Status | Route | Description |
+|--------|-------|-------|-------------|
+| **Create Studio** | ✅ Live | `/image-generator` | Generate images from text prompts |
+| **Edit Studio** | ✅ Live | `/image-editor` | AI-powered image editing |
+| **Upscale Studio** | ✅ Live | `/image-upscale` | Enhance image resolution |
+| **Social Optimizer** | ✅ Live | `/image-studio/social-optimizer` | Optimize for social platforms |
+| **Asset Library** | ✅ Live | `/image-studio/asset-library` | Unified content archive |
+| **Transform Studio** | 🚧 Planned | - | Convert images to videos/avatars |
+| **Control Studio** | 🚧 Planned | - | Advanced generation controls |
+
+---
+
+## 1. Create Studio ✅
+
+**Status**: Fully implemented and live  
+**Route**: `/image-generator`
+
+### Overview
+Create Studio enables you to generate high-quality images from text prompts using multiple AI providers. It includes platform templates, style presets, and batch generation capabilities.
+
+### Key Features
+
+#### Multi-Provider Support
+- **Stability AI**: Ultra (highest quality), Core (fast & affordable), SD3.5 (advanced)
+- **WaveSpeed Ideogram V3**: Photorealistic images with superior text rendering
+- **WaveSpeed Qwen**: Ultra-fast generation (2-3 seconds)
+- **HuggingFace**: FLUX models for diverse styles
+- **Gemini**: Google's Imagen models
+
+#### Platform Templates
+- **Instagram**: Feed posts (square, portrait), Stories, Reels
+- **LinkedIn**: Post images, article covers, company banners
+- **Facebook**: Feed posts, Stories, cover photos
+- **Twitter/X**: Post images, header images
+- **YouTube**: Thumbnails, channel art
+- **Pinterest**: Pins, board covers
+- **TikTok**: Video thumbnails
+- **Blog**: Featured images, article headers
+- **Email**: Newsletter headers, promotional images
+- **Website**: Hero images, section backgrounds
+
+#### Style Presets
+40+ built-in styles including:
+- Photographic
+- Digital Art
+- 3D Model
+- Anime
+- Cinematic
+- Oil Painting
+- Watercolor
+- And many more...
+
+#### Advanced Features
+- **Batch Generation**: Create 1-10 variations in one request
+- **Prompt Enhancement**: AI-powered prompt improvement
+- **Cost Estimation**: See costs before generating
+- **Quality Levels**: Draft, Standard, Premium
+- **Advanced Controls**: Guidance scale, steps, seed for fine-tuning
+- **Persona Support**: Generate content aligned with brand personas
+
+### Use Cases
+- Social media campaign visuals
+- Blog post featured images
+- Product photography
+- Marketing materials
+- Brand assets
+- Content library building
+
+### Backend Components
+- `CreateStudioService`: Generation logic
+- `ImageStudioManager`: Orchestration
+- Template system with platform specifications
+
+### Frontend Components
+- `CreateStudio.tsx`: Main interface
+- `TemplateSelector.tsx`: Template selection
+- `ImageResultsGallery.tsx`: Results display
+- `CostEstimator.tsx`: Cost calculation
+
+---
+
+## 2. Edit Studio ✅
+
+**Status**: Fully implemented and live  
+**Route**: `/image-editor`
+
+### Overview
+Edit Studio provides AI-powered image editing capabilities including background operations, object manipulation, and conversational editing.
+
+### Available Operations
+
+#### Background Operations
+- **Remove Background**: Extract subjects with transparent backgrounds
+- **Replace Background**: Change backgrounds with proper lighting
+- **Relight**: Adjust lighting to match new backgrounds
+
+#### Object Manipulation
+- **Erase**: Remove unwanted objects from images
+- **Inpaint**: Fill or replace specific areas with AI
+- **Outpaint**: Expand images beyond original boundaries
+- **Search & Replace**: Replace objects using text prompts
+- **Search & Recolor**: Change colors using text prompts
+
+#### General Editing
+- **General Edit**: Prompt-based editing with optional mask support
+- **Mask Editor**: Visual mask creation for precise control
+
+### Key Features
+- **Reusable Mask Editor**: Create and reuse masks across operations
+- **Optional Masking**: Use masks for `general_edit`, `search_replace`, `search_recolor`
+- **Multiple Input Support**: Base image, mask, background, and lighting references
+- **Real-time Preview**: See results before applying
+- **Operation-Specific Fields**: Dynamic UI based on selected operation
+
+### Use Cases
+- Remove unwanted objects
+- Change backgrounds
+- Fix imperfections
+- Add or modify elements
+- Adjust colors
+- Extend image canvas
+
+### Backend Components
+- `EditStudioService`: Editing logic
+- Stability AI integration
+- HuggingFace integration
+
+### Frontend Components
+- `EditStudio.tsx`: Main interface
+- `ImageMaskEditor.tsx`: Mask creation tool
+- `EditImageUploader.tsx`: Image upload interface
+- `EditOperationsToolbar.tsx`: Operation selection
+
+---
+
+## 3. Upscale Studio ✅
+
+**Status**: Fully implemented and live  
+**Route**: `/image-upscale`
+
+### Overview
+Upscale Studio enhances image resolution using AI-powered upscaling with multiple modes and quality presets.
+
+### Upscaling Modes
+
+#### Fast Upscale
+- **Speed**: ~1 second
+- **Quality**: 4x upscaling
+- **Use Case**: Quick previews, web display
+- **Cost**: 2 credits
+
+#### Conservative Upscale
+- **Quality**: 4K resolution
+- **Style**: Preserves original style
+- **Use Case**: Professional printing, high-quality display
+- **Cost**: 6 credits
+- **Optional Prompt**: Guide the upscaling process
+
+#### Creative Upscale
+- **Quality**: 4K resolution
+- **Style**: Enhances and improves style
+- **Use Case**: Artistic enhancement, style improvement
+- **Cost**: 6 credits
+- **Optional Prompt**: Guide creative enhancements
+
+### Key Features
+- **Quality Presets**: Web, print, social media optimizations
+- **Side-by-Side Comparison**: Before/after preview with synchronized zoom
+- **Prompt Support**: Optional prompts for conservative/creative modes
+- **Real-time Preview**: See results immediately
+- **Metadata Display**: View upscaling details
+
+### Use Cases
+- Enhance low-resolution images
+- Prepare images for printing
+- Improve image quality for display
+- Upscale product photos
+- Enhance social media images
+
+### Backend Components
+- `UpscaleStudioService`: Upscaling logic
+- Stability AI upscaling endpoints
+
+### Frontend Components
+- `UpscaleStudio.tsx`: Main interface
+- Comparison viewer with zoom
+
+---
+
+## 4. Social Optimizer ✅
+
+**Status**: Fully implemented and live  
+**Route**: `/image-studio/social-optimizer`
+
+### Overview
+Social Optimizer automatically resizes and optimizes images for all major social media platforms with smart cropping and safe zone visualization.
+
+### Supported Platforms
+- **Instagram**: Feed posts (square, portrait), Stories, Reels
+- **Facebook**: Feed posts, Stories, cover photos
+- **Twitter/X**: Post images, header images
+- **LinkedIn**: Post images, article covers, company banners
+- **YouTube**: Thumbnails, channel art
+- **Pinterest**: Pins, board covers
+- **TikTok**: Video thumbnails
+
+### Key Features
+
+#### Platform Formats
+- **Multiple Formats per Platform**: Choose from various format options
+- **Automatic Sizing**: Platform-specific dimensions
+- **Format Selection**: Pick the best format for your content
+
+#### Crop Modes
+- **Smart Crop**: Preserve important content with intelligent cropping
+- **Center Crop**: Crop from center
+- **Fit**: Fit with padding
+
+#### Safe Zones
+- **Visual Overlays**: Display text-safe areas
+- **Platform-Specific**: Safe zones tailored to each platform
+- **Toggle Display**: Show/hide safe zones
+
+#### Batch Export
+- **Multi-Platform**: Generate optimized versions for multiple platforms
+- **Single Source**: One image → all platforms
+- **Individual Downloads**: Download specific formats
+- **Bulk Download**: Download all optimized images at once
+
+### Use Cases
+- Social media campaigns
+- Multi-platform content distribution
+- Brand consistency across platforms
+- Time-saving batch optimization
+
+### Backend Components
+- `SocialOptimizerService`: Optimization logic
+- Platform format specifications
+- Image processing and resizing
+
+### Frontend Components
+- `SocialOptimizer.tsx`: Main interface
+- Platform selector
+- Format selection
+- Results grid
+
+---
+
+## 5. Asset Library ✅
+
+**Status**: Fully implemented and live  
+**Route**: `/image-studio/asset-library`
+
+### Overview
+Asset Library is a unified content archive that tracks all AI-generated content (images, videos, audio, text) across all ALwrity modules.
+
+### Key Features
+
+#### Search & Filtering
+- **Advanced Search**: Search by ID, model, keywords
+- **Type Filtering**: Filter by image, video, audio, text
+- **Module Filtering**: Filter by source module (Image Studio, Story Writer, Blog Writer, etc.)
+- **Status Filtering**: Filter by completion status
+- **Date Filtering**: Filter by creation date
+- **Favorites Filter**: Show only favorited assets
+
+#### Organization
+- **Favorites**: Mark and organize favorite assets
+- **Collections**: Organize assets into collections (coming soon)
+- **Tags**: AI-powered tagging (coming soon)
+- **Version History**: Track asset versions (coming soon)
+
+#### Views
+- **Grid View**: Visual card-based layout
+- **List View**: Detailed table layout with all metadata
+- **Toggle Views**: Switch between grid and list views
+
+#### Bulk Operations
+- **Bulk Download**: Download multiple assets at once
+- **Bulk Delete**: Delete multiple assets
+- **Bulk Share**: Share multiple assets (coming soon)
+
+#### Usage Tracking
+- **Download Count**: Track asset downloads
+- **Share Count**: Track asset shares
+- **Usage Analytics**: Monitor asset performance
+
+#### Asset Information
+- **Metadata Display**: View provider, model, cost, generation time
+- **Status Indicators**: Visual status chips (completed, processing, failed)
+- **Source Module**: Identify which ALwrity tool created the asset
+- **Creation Date**: Timestamp of asset creation
+
+### Integration
+Assets are automatically tracked from:
+- **Image Studio**: All generated and edited images
+- **Story Writer**: Scene images, audio, videos
+- **Blog Writer**: Generated images
+- **LinkedIn Writer**: Generated content
+- **Other Modules**: All ALwrity tools
+
+### Use Cases
+- Organize campaign assets
+- Find previously generated content
+- Track content usage
+- Manage brand assets
+- Archive content library
+
+### Backend Components
+- `ContentAssetService`: Asset management
+- Database models for asset storage
+- Search and filtering logic
+
+### Frontend Components
+- `AssetLibrary.tsx`: Main interface
+- Search and filter controls
+- Grid and list views
+- Bulk operation tools
+
+---
+
+## 6. Transform Studio 🚧
+
+**Status**: Planned for future release
+
+### Overview
+Transform Studio will enable conversion of images into videos, creation of talking avatars, and generation of 3D models.
+
+### Planned Features
+
+#### Image-to-Video
+- **WaveSpeed WAN 2.5**: Convert static images to dynamic videos
+- **Resolutions**: 480p, 720p, 1080p
+- **Duration**: Up to 10 seconds
+- **Audio Support**: Add audio/voiceover
+- **Social Optimization**: Optimize for social platforms
+
+#### Make Avatar
+- **Hunyuan Avatar**: Create talking avatars from photos
+- **Audio-Driven**: Lip-sync with audio input
+- **Duration**: Up to 2 minutes
+- **Emotion Control**: Adjust avatar expressions
+- **Resolutions**: 480p, 720p
+
+#### Image-to-3D
+- **Stable Fast 3D**: Generate 3D models from images
+- **Export Formats**: Standard 3D formats
+- **Quality Options**: Multiple quality levels
+
+### Use Cases
+- Product showcases
+- Social media videos
+- Explainer videos
+- Personal branding
+- Marketing campaigns
+
+---
+
+## 7. Control Studio 🚧
+
+**Status**: Planned for future release
+
+### Overview
+Control Studio will provide advanced generation controls for fine-grained image creation.
+
+### Planned Features
+
+#### Sketch-to-Image
+- **Control Strength**: Adjust how closely the image follows the sketch
+- **Style Transfer**: Apply styles to sketches
+- **Multiple Sketches**: Combine multiple control inputs
+
+#### Style Transfer
+- **Style Library**: Pre-built style library
+- **Custom Styles**: Upload custom style images
+- **Strength Control**: Adjust style application intensity
+
+#### Structure Control
+- **Pose Control**: Control human poses
+- **Depth Control**: Control depth information
+- **Edge Control**: Control edge detection
+
+### Use Cases
+- Precise image generation
+- Style consistency
+- Brand-aligned visuals
+- Advanced creative control
+
+---
+
+## Module Dependencies
+
+### Infrastructure
+- **ImageStudioManager**: Orchestrates all modules
+- **Shared UI Components**: Consistent interface across modules
+- **Cost Estimation**: Unified cost calculation
+- **Authentication**: User validation for all operations
+
+### Data Flow
+1. User selects module
+2. Module-specific UI loads
+3. User provides input (prompt, image, settings)
+4. Pre-flight validation (cost, subscription)
+5. Operation executes
+6. Results displayed
+7. Asset saved to Asset Library (if applicable)
+
+---
+
+## Module Status Summary
+
+### ✅ Implemented (5/7)
+- Create Studio
+- Edit Studio
+- Upscale Studio
+- Social Optimizer
+- Asset Library
+
+### 🚧 Planned (2/7)
+- Transform Studio
+- Control Studio
+
+---
+
+*For detailed guides on each module, see the module-specific documentation: [Create Studio](create-studio.md), [Edit Studio](edit-studio.md), [Upscale Studio](upscale-studio.md), [Social Optimizer](social-optimizer.md), [Asset Library](asset-library.md).*
+