AutoCropAI - Mobile App

Overview

AutoCropAI is a focused image-utility app inspired by GIMP's "Crop to Content" feature. Its purpose is simple: remove all empty space around an image so only the actual content remains.

Upload a PNG, JPG, or HEIC with a transparent or solid background and AutoCropAI automatically finds the largest area that contains real content, then crops away uniform borders with zero padding. The result is a clean, tightly-cropped PNG that preserves the original resolution and transparency.

Crop Modes

• Simple (GIMP-like): Replicates the classic Crop-to-Content behavior by trimming fully transparent pixels or uniform edge colors.
• Advanced (Tolerance Control): Adds adjustable tolerance so you can fine-tune how strictly background colors are detected, useful for anti-aliasing or noisy edges.
• AI Mode (Local): Uses on-device segmentation to separate foreground from complex backgrounds such as gradients, textures, or shadows before cropping. (Unavailable in MVP - requires future ML implementation)

Why AutoCropAI

• No accounts, no uploads stored
• Preserves image quality and alpha transparency
• Designed as a modern, mobile-friendly evolution of GIMP's AutoCrop idea
• Ideal for designers, developers, and anyone tired of manual cropping

Architecture

Frontend (Expo React Native)

• Screens: TrimScreen, HistoryScreen, SettingsScreen, InfoModalScreen
• Navigation: Bottom tab navigator with 3 tabs (History, Crop, Settings)
• State Management: React hooks + AsyncStorage for persistence
• Image Processing: Images sent to backend for processing via REST API

Backend (Express.js)

• Port: 5000
• Image Processing: Uses Sharp library for pixel-level image analysis and cropping
• Endpoints:
  • POST /api/trim - Crops image based on settings
  • POST /api/image-info - Gets image metadata
  • GET /api/health - Health check

Key Files

• client/screens/TrimScreen.tsx - Main cropping interface
• client/screens/HistoryScreen.tsx - Cropped image history
• client/screens/SettingsScreen.tsx - App preferences
• client/lib/image-processing.ts - Client-side API calls
• client/lib/storage.ts - AsyncStorage utilities
• server/image-processor.ts - Server-side image processing with Sharp
• server/routes.ts - API route handlers

Running the App

1. Start Backend: npm run server:dev (port 5000)
2. Start Frontend: npm run expo:dev (port 8081)
3. Scan QR code with Expo Go app on mobile device

Design Guidelines

See design_guidelines.md for color palette, typography, and component specifications.

Code Style

This project follows Google's TypeScript Style Guide:

• Use interface over type aliases where appropriate
• Add JSDoc comments to all exported functions, interfaces, and types
• Use camelCase for variables and functions, PascalCase for types and classes
• Use explicit return types on functions
• Prefer named imports for frequently used symbols
• Organize imports: external modules first, then internal modules