Skip to content

Latest commit

 

History

History
114 lines (88 loc) · 4.94 KB

replit.md

File metadata and controls

114 lines (88 loc) · 4.94 KB

AI Generative Multimedia Creator

Overview

This is a full-stack web application for AI-powered multimedia content generation. The application allows users to generate images, create animations, produce audio, and generate captions using various AI services. It's built with a modern React frontend and Express.js backend, using PostgreSQL for data persistence and Drizzle ORM for database management.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

  • Framework: React 18 with TypeScript
  • Styling: Tailwind CSS with shadcn/ui component library
  • State Management: TanStack Query (React Query) for server state
  • Routing: Wouter for client-side routing
  • Build Tool: Vite for development and bundling
  • UI Components: Radix UI primitives with custom styling

Backend Architecture

  • Runtime: Node.js with Express.js
  • Language: TypeScript with ES modules
  • API Style: RESTful API with JSON responses
  • File Handling: Multer for multipart/form-data uploads
  • Development: tsx for TypeScript execution in development

Database Architecture

  • Database: PostgreSQL (configured for Neon serverless) - ACTIVE
  • ORM: Drizzle ORM with Drizzle Kit for migrations
  • Schema: Type-safe schema definitions with Zod validation
  • Storage Strategy: DatabaseStorage implementation using PostgreSQL (switched from memory storage)
  • Tables: users and generated_content tables with proper relations
  • Migration: Database schema pushed successfully using npm run db:push

Key Components

Core Data Models

  • Users: Basic user management with username/password
  • Generated Content: Polymorphic content storage supporting multiple media types (image, animation, audio, caption)
  • Metadata: JSON storage for generation parameters and settings

Content Generation Modules

  1. Image Generator: Uses Stable Diffusion XL via Hugging Face for high-quality image generation
  2. Animation Creator: Combines multiple images into animated sequences
  3. Audio Generator: Text-to-speech functionality with multiple voice options
  4. Caption Generator: Automatic caption/subtitle generation for media files

UI Component System

  • Sidebar Navigation: Mode switching between different generators
  • Content Gallery: Displays user-generated content with favorites and download options
  • Form Components: Reusable form elements with validation
  • Toast Notifications: User feedback system

Data Flow

Content Generation Flow

  1. User selects generation mode via sidebar
  2. User fills out generation parameters in the respective component
  3. Form data is validated and submitted to backend API
  4. Backend processes request using appropriate AI service
  5. Generated content is stored with metadata
  6. Frontend refreshes content gallery via React Query
  7. User can interact with generated content (favorite, download, delete)

File Upload Flow

  1. Files are uploaded via multipart/form-data
  2. Multer middleware handles file processing
  3. Files are stored in /uploads directory
  4. File metadata is stored in database
  5. Content is served via download endpoints

External Dependencies

AI Services

  • Stable Diffusion XL: High-quality image generation via Hugging Face (stabilityai/stable-diffusion-xl-base-1.0)
  • API Configuration: Requires HUGGING_FACE_API_KEY or HF_TOKEN environment variable
  • Model Features: Advanced diffusion model with 1024x1024 resolution and negative prompting

Database Services

  • Neon Database: Serverless PostgreSQL hosting
  • Connection: Uses @neondatabase/serverless driver

Development Tools

  • Replit Integration: Custom Vite plugins for Replit environment
  • Error Handling: Runtime error overlay for development

Deployment Strategy

Build Process

  1. Frontend: Vite builds React app to dist/public
  2. Backend: esbuild bundles server code to dist/index.js
  3. Database: Drizzle migrations ensure schema consistency

Environment Configuration

  • Development: Uses tsx for hot reloading
  • Production: Serves bundled JavaScript with static file serving
  • Database: Requires DATABASE_URL environment variable

File Storage

  • Uploads: Local filesystem storage in /uploads directory
  • Static Assets: Served via Express static middleware
  • Content Delivery: Direct file serving with download endpoints

Session Management

  • Storage: PostgreSQL-backed sessions using connect-pg-simple
  • Security: Session-based authentication (implementation in progress)

Error Handling

  • API Errors: Centralized error middleware with status codes
  • Frontend Errors: Toast notifications for user feedback
  • Development: Enhanced error overlays and logging

This architecture provides a scalable foundation for AI content generation with clear separation of concerns, type safety throughout the stack, and a modern development experience.