# GridWise

**Repository Path**: lgySpace/GridWise

## Basic Information

- **Project Name**: GridWise
- **Description**: GridWise 是一款专为创意工作者和社交媒体运营设计的专业级图片处理工具。它采用 "增强 -> 抠图 -> 切分" 的三步工作流，集成了 TensorFlow.js AI 画质增强、智能背景移除和等距切图功能，帮助用户在几秒钟内完成高质量的图片素材加工。
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-13
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 抠图, 图片处理

## README


# GridWise - 智图九宫格 🎨

[中文](#中文) | [English](#english)

---

## 中文

GridWise 是一款专为创意工作者和社交媒体运营设计的专业级图片处理工具。它采用 **"增强 -> 抠图 -> 切分"** 的三步工作流，集成了 TensorFlow.js AI 画质增强、智能背景移除和等距切图功能，帮助用户在几秒钟内完成高质量的图片素材加工。

### ✨ 核心功能

1.  **AI 画质增强 (TensorFlow.js)** 🚀
    *   利用浏览器端 GPU 加速，支持 2x/4x 图片超分辨率重建。
    *   智能细节锐化算法，修复模糊图片，提升清晰度。

2.  **智能背景移除** ✂️
    *   内置基于 Canvas 的智能色彩识别算法。
    *   支持容差调节、边缘平滑以及“仅删除外部区域”的填充逻辑。

3.  **智能等距切图与裁剪** 🖼️
    *   支持自定义横向与纵向格子数（1x1 到 10x10），完美适配微信朋友圈、小红书九宫格排版。
    *   高精度的自由裁剪工具，支持实时预览与 Rule of Thirds（三分法）参考线。

4.  **极致体验**
    *   多格式导出：支持 PNG、JPG 或 WebP，可一键打包 ZIP。
    *   双语支持：无缝切换中英文界面。
    *   流畅交互：支持图片缩放、拖拽预览。

### 🛠️ 技术栈

- **框架**: React 19 (Hooks)
- **AI 引擎**: TensorFlow.js (WebGL Backend)
- **样式**: Tailwind CSS
- **图片处理**: HTML5 Canvas API
- **压缩分发**: JSZip & FileSaver
- **字体**: Google Fonts (Inter)

### 🚀 快速开始

1.  **上传**: 将图片拖入上传区域或点击选择。
2.  **第一步：画质增强**:
    *   选择放大倍数（1x/2x/4x）和锐化程度，点击“执行增强”。
3.  **第二步：智能抠图**:
    *   选择背景色，调整容差和边缘平滑度，去除不需要的背景。
4.  **第三步：切图导出**:
    *   裁剪图片至理想范围。
    *   调整九宫格行列数，点击“下载全部”或“下载选中部分”。

### 💻 本地开发

如果您希望在本地运行或二次开发本项目，请确保您的环境已安装 Node.js（推荐版本 16 或更高）。

1.  **克隆仓库**
    ```bash
    git clone https://github.com/gycodex/GridWise.git
    cd GridWise
    ```

2.  **安装依赖**
    ```bash
    npm install
    # 或者使用 yarn / pnpm
    yarn install
    # 或者
    pnpm install
    ```

3.  **启动开发服务器**
    ```bash
    npm run dev
    ```
    开发服务器将启动在 `http://localhost:3000/`，打开浏览器访问该地址即可预览应用。

4.  **构建生产版本**
    ```bash
    npm run build
    ```
    构建完成后，产物将生成在 `dist` 目录中。

5.  **预览生产版本**
    ```bash
    npm run preview
    ```
    预览服务器将启动在 `http://localhost:4173/`，用于检查生产版本的效果。

---

## English

GridWise is a professional-grade image processing tool designed for creators and social media managers. It features a streamlined **"Enhance -> Remove BG -> Split"** workflow, powered by TensorFlow.js for AI upscaling, alongside intelligent background removal and precision grid splitting.

### ✨ Key Features

1.  **AI Image Enhancement (TensorFlow.js)** 🚀
    *   GPU-accelerated super-resolution (up to 4x) directly in the browser.
    *   Smart detail sharpening to fix blur and improve clarity.

2.  **Intelligent Background Removal** ✂️
    *   Canvas-based color recognition algorithm.
    *   Adjustable similarity threshold, edge smoothing, and "outer-only" flood-fill logic.

3.  **Smart Grid Splitter & Cropping** 🖼️
    *   Custom rows and columns (1x1 to 10x10). Perfect for Instagram grids, WeChat, and more.
    *   Precision cropping tool with real-time preview and Rule of Thirds grid lines.

4.  **Superior Experience**
    *   Multi-format Export: PNG, JPG, or WebP. Download individually or as a ZIP.
    *   Bilingual Interface: Seamlessly switch between Simplified Chinese and English.
    *   Interactive: Smooth zooming, dragging, and tile selection.

### 🛠️ Tech Stack

- **Framework**: React 19 (Hooks)
- **AI Engine**: TensorFlow.js (WebGL Backend)
- **Styling**: Tailwind CSS
- **Image Processing**: HTML5 Canvas API
- **Compression**: JSZip & FileSaver
- **Typography**: Google Fonts (Inter)

### 🚀 Quick Start

1.  **Upload**: Drag and drop an image or click the upload area.
2.  **Step 1: Enhance**:
    *   Select upscale factor (1x/2x/4x) and sharpening intensity. Click "Run Enhancer".
3.  **Step 2: Remove BG**:
    *   Pick the target background color, adjust threshold, and smooth edges to isolate your subject.
4.  **Step 3: Split & Export**:
    *   Crop the image to the desired composition.
    *   Adjust grid rows/columns and click "Download All" or "Download Selected".

### 💻 Local Development

To run or modify this project locally, ensure you have Node.js installed (version 16 or higher recommended).

1.  **Clone the repository**
    ```bash
    git clone https://github.com/gycodex/GridWise.git
    cd GridWise
    ```

2.  **Install dependencies**
    ```bash
    npm install
    # or using yarn / pnpm
    yarn install
    # or
    pnpm install
    ```

3.  **Start development server**
    ```bash
    npm run dev
    ```
    The development server will start at `http://localhost:3000/`. Open this URL in your browser to preview the application.

4.  **Build for production**
    ```bash
    npm run build
    ```
    After building, the production files will be generated in the `dist` directory.

5.  **Preview production version**
    ```bash
    npm run preview
    ```
    The preview server will start at `http://localhost:4173/`, allowing you to check the production version.

---