PerlerGen is a modern web application designed for bead artists and pixel art enthusiasts. It seamlessly converts images into professional bead patterns, supporting major brands like Perler, Artkal, and Hama.
Built with a soft, tactile Neumorphic UI, it offers a distraction-free environment for creativity. Leveraging Google Gemini AI, PerlerGen not only generates patterns but also analyzes them to provide difficulty ratings, descriptions, and usage suggestions.
- 🎨 Smart Conversion: High-fidelity image-to-pixel conversion with adjustable grid sizes and aspect ratio locking.
- 🧩 Multi-Brand Support: Native support for Perler, Artkal (S-Series), Hama, and generic color palettes.
- 🤖 AI Analysis: Integrated Google Gemini AI provides insights on pattern difficulty and creative usage ideas.
- 🛠️ Precision Editing:
- Global Color Replacement: Swap a color across the entire pattern instantly.
- Pixel-Level Editing: Click any bead to change its color.
- Visibility Toggles: Hide specific colors to focus on layers or counts.
- 📏 Advanced Export:
- Full Chart: Download the complete pattern with coordinates.
- Split Export: Automatically slice large projects (e.g., 200x200) into printable chunks (ZIP archive) with alignment guides.
- 📝 Material Management: Real-time calculation of bead counts and color codes.
- 🌍 Bilingual Interface: Fully localized for English and Chinese.
- Frontend: React 19, TypeScript
- Build Tool: Vite
- AI Integration: Google GenAI SDK (Gemini)
- Styling: Tailwind CSS (Custom Neumorphic System)
- Utilities: JSZip, File-Saver
Follow these steps to run PerlerGen locally on your machine.
- Node.js (v16 or higher recommended)
- npm or yarn
- A valid Google Gemini API Key
-
Clone the repository
git clone https://github.com/yourusername/PerlerGen.git cd PerlerGen -
Install dependencies
npm install
-
Configure Environment Variables Create a
.envfile in the root directory and add your Gemini API Key:GEMINI_API_KEY=your_api_key_here
-
Run the Development Server
npm run dev
Open http://localhost:3000 in your browser.
To create a production-ready build:
npm run buildThe output will be in the dist directory, ready to be deployed to Vercel, Netlify, or GitHub Pages.
Contributions are welcome! If you have ideas for new features or bug fixes:
- Fork the repository.
- Create a new branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
This project is available for personal and educational use.