Spaces:
Sleeping
Sleeping
File size: 5,500 Bytes
8aa2044 228505b bbd7ec4 228505b bbd7ec4 228505b bbd7ec4 228505b bbd7ec4 228505b bbd7ec4 228505b 8aa2044 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 | ---
title: Image Cutter
emoji: ๐
colorFrom: green
colorTo: blue
sdk: gradio
sdk_version: 6.2.0
app_file: app.py
pinned: false
---
# โ๏ธ Image Grid Cutter
> **Blog:** [www.airabbit.blog](https://www.airabbit.blog)
A powerful Gradio-based tool to split images into customizable grids, crop individual tiles, and generate animated GIFs.



---
## ๐ฏ Features
### 1. **Grid Cutting**
- Upload any image and split it into a customizable grid (up to 16ร16 = 256 tiles)
- Live preview with grid lines overlaid on the image
- Adjustable rows and columns with real-time updates
- Download all tiles as a ZIP file
### 2. **Individual Tile Cropping**
- Navigate through tiles with Previous/Next buttons
- Jump to first or last tile instantly
- Crop each tile individually using an interactive crop tool
- **Background options:** Choose transparent or custom color fill for cropped areas
- Apply a single crop uniformly to all tiles
- Download edited tiles as ZIP
### 3. **GIF / MP4 Animation**
- Generate animated GIFs from your tiles
- Export MP4 videos with the same animation styles, plus optional transitions
- **Animation styles:**
- **Reveal (build up):** Tiles appear one by one, building the complete image
- **Cycle (one at a time):** Each tile appears alone in sequence
- **Flash (all tiles):** Each tile shown centered, one after another
- **Shuffle (random order):** Tiles revealed in random order
- **Single tile mode:** Create a slideshow of individual tiles
- Adjustable frame duration (50ms - 1000ms)
- Transparent or custom color backgrounds
---
## ๐ Getting Started
### Prerequisites
- Python 3.8+
- pip
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/yourusername/image-grid-cutter.git
cd image-grid-cutter
```
2. **Create a virtual environment (recommended):**
```bash
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
```
3. **Install dependencies:**
```bash
pip install -r requirements.txt
```
4. **Run the app:**
```bash
python app.py
```
5. **Open your browser:**
Navigate to `http://127.0.0.1:7860`
### Docker
```bash
docker build -t image-cutter .
docker run --rm -p 7860:7860 image-cutter
```
---
## ๐ How It Works
### Step 1: Cut Your Image
1. Go to the **"1. Cut"** tab
2. Upload an image (drag & drop, paste, or click to upload)
3. Adjust the **Rows** and **Columns** sliders to define your grid
4. The preview updates in real-time showing grid lines
5. Click **"โ๏ธ Cut Image"** to split the image
6. Download all tiles as a ZIP file
### Step 2: Crop Tiles (Optional)
1. Go to the **"2. Crop (Optional)"** tab
2. Choose your **background fill**: Transparent or a custom color
3. Use **โ โถ** arrows or **โฎ First / Last โญ** buttons to navigate tiles
4. Use the **crop tool** in the editor to crop the current tile
5. Click **"๐พ Save This Tile"** to save individual crops
6. Or click **"โ
Apply to All"** to apply the same crop to every tile
7. Download the edited tiles as ZIP
### Step 3: Generate Animation
1. Go to the **"3. Export"** tab
2. Select an **animation style** from the dropdown
3. Enable **"Single tile per frame"** for slideshow mode
4. Adjust the **frame duration** in milliseconds
5. Click **"๐ฌ Generate GIF"** or **"๐ฅ Generate MP4"**
6. Download your animated GIF or MP4 video
---
## ๐จ Use Cases
- **Sprite sheets:** Extract individual sprites from game assets
- **Puzzle creation:** Split images into puzzle pieces
- **Social media grids:** Create Instagram grid posts
- **Animation frames:** Generate frame-by-frame animations
- **Image analysis:** Divide images for detailed inspection
- **Collage preparation:** Prepare tiles for collage projects
---
## ๐ ๏ธ Technical Details
### Dependencies
| Package | Version | Purpose |
|---------|---------|---------|
| Gradio | โฅ6.0.0 | Web UI framework |
| Pillow | โฅ10.0.0 | Image processing |
| NumPy | โฅ1.24.0 | Numerical operations |
### File Structure
```
image-grid-cutter/
โโโ app.py # Main Gradio application
โโโ requirements.txt # Python dependencies
โโโ README.md # This file
โโโ LICENSE # Apache 2.0 license
โโโ .gitignore # Git ignore rules
```
### Key Functions
- `split_image_into_grid()` - Divides image into equal-sized tiles
- `create_grid_preview()` - Generates preview with grid overlay
- `process_image()` - Main cutting logic with ZIP creation
- `generate_gif_from_tile_list()` - Creates animated GIFs from tiles
- `save_single_tile()` - Handles individual tile cropping with background options
---
## ๐ License
This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.
---
## ๐ค Contributing
Contributions are welcome! Feel free to:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
---
## ๐ฌ Contact
- **Blog:** [www.airabbit.blog](https://www.airabbit.blog)
---
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|