Image Cropper - Standalone App

A standalone Angular application for preparing image datasets with cropping and bucketing.

Development

npm install
npm start

The app will be available at http://localhost:4200 (or the next available port).

Production Build

Build

npm run build

This creates optimized production files in dist/image-cropper/browser/.

Serve Production Build

Option 1: Using npm script (recommended)

npm run serve:dist

This will serve the production build at http://localhost:4206.

Option 2: Using Python (if installed)

cd dist/image-cropper/browser
python -m http.server 4206

Option 3: Using Node's http-server

npx http-server dist/image-cropper/browser -p 4206

Option 4: Using serve (via npx)

npx serve dist/image-cropper/browser -l 4206

Important Notes

⚠️ You cannot open index.html directly in the browser (using file:// protocol) due to:

• CORS restrictions
• Angular's routing and module loading requirements
• Security policies

The app must be served via HTTP/HTTPS using one of the methods above.

Deployment

The dist/image-cropper/browser folder contains all static files needed for deployment. You can:

• Upload to any static hosting service (GitHub Pages, Netlify, Vercel, etc.)
• Serve from any web server (nginx, Apache, etc.)
• Deploy to cloud storage with static website hosting enabled
• Deploy to Hugging Face Spaces - See DEPLOY_HF.md for detailed instructions

Quick Deploy to Hugging Face

1. Build: npm run build
2. Create a new Space on Hugging Face Spaces with "Static" SDK
3. Upload all files from dist/image-cropper/browser/ to your Space
4. Upload README_HF.md as README.md in the Space root

For detailed instructions, see DEPLOY_HF.md.