Maska

Minimalist • Secure • Localized Privacy Protection

极简 • 安全 • 本地化个人隐私保护工具

---

🌐 Language | 语言切换

English Version (Click to Expand)

Introduction

Maska is a powerful Chrome extension designed to protect your privacy before you share images online. Built with a Zero-Server philosophy, it ensures all AI processing happens locally in your browser. No images are ever uploaded to any server.

Feature Highlights

• 🌟 Privacy First: Completely offline AI inference using MediaPipe.
• 👥 Auto-Detection: Instant identification of faces (and soon barcodes/text).
• 🖱️ Interactive Canvas: Powered by Fabric.js for seamless zooming, panning, and manually adjusting blurring zones.
• 🎨 Modern Aesthetics: A sleek, glassmorphism UI designed for premium user experience.
• ⚡ WebGPU Ready: Optimized for modern hardware acceleration.

Installation

1. Clone the repository

   git clone https://github.com/Susskind2/A_myCode.git
   cd maska

2. Install dependencies

   npm install

3. Build the extension

   npm run build

4. Load in Chrome

   • Open chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked" and select the dist directory.

How to Use

1. Upload: Drag and drop or click to upload your image.
2. Review: The AI will automatically highlight sensitive areas.
3. Adjust: Drag corners to resize or move boxes; use the upcoming brush tools for manual repair.
4. Download: Click "Save" to export the processed image locally.

Project Structure

Maska/
├── src/
│   ├── popup/         # UI: Interactive components (Vue 3)
│   ├── offscreen/     # Core: AI model orchestration (MediaPipe/WASM)
│   ├── core/          # Logic: Processing services and interface definitions
│   ├── shared/        # Utils: Global type definitions and messaging
│   └── assets/        # Styles and static assets
├── public/            # Static assets and local model files (.tflite/.wasm)
└── vite.config.ts     # Extension build configuration

Tech Stack

• Frontend: Vue 3, Vite, TailwindCSS
• AI Engine: MediaPipe Tasks Vision (Local WASM)
• Canvas Engine: Fabric.js
• Persistence: IndexedDB (Model caching)

Acknowledgments

• MediaPipe - For providing robust local AI vision tasks.
• Vue.js - For the reactive UI framework.
• Fabric.js - For the powerful interactive canvas.

中文版 (点击展开/收起)

项目介绍

Maska 是一款专注于隐私保护的 Chrome 浏览器扩展。它的核心使命是在你向外界分享图片之前，自动识别并抹除图片中的敏感信息（如人脸、二维码等）。基于 Zero-Server（零服务器）理念，所有 AI 推理均在用户本地完成，图片永不上传，极致安全。

功能特点

• 🌟 隐私至上：采用 MediaPipe 技术，所有 AI 推理完全在本地离线运行。
• 👥 自动检测：毫秒级自动定位人脸（即将支持二维码与文字识别）。
• 🖱️ 交互式画布：基于 Fabric.js，支持缩放、平移以及手动调整脱敏区域的大小与位置。
• 🎨 高级美学：现代化的毛玻璃（Glassmorphism）UI 设计，提供丝滑的交互体验。
• ⚡ 硬件加速：支持 WebGPU 加速，实现接近原生的推理速度。

安装步骤

1. 克隆仓库

   git clone https://github.com/Susskind2/A_myCode.git
   cd maska

2. 安装依赖

   npm install

3. 编译项目

   npm run build

4. 加载至 Chrome

   • 访问 chrome://extensions/
   • 开启右上角的“开发者模式”
   • 点击“加载已解压的扩展程序”，选择项目中的 dist 目录。

使用方法

1. 导入图片：点击插件图标，在弹出窗口中上传或拖拽待处理的图片。
2. 自动识别：AI 将立即扫描图片并标出敏感区域。
3. 手动微调：点击识别框进行缩放、移动，或通过即将上线的画笔工具手动修补。
4. 一键保存：确认脱敏效果后，点击保存将图片下载到本地。

项目结构

Maska/
├── src/
│   ├── popup/         # 核心交互层：Popup 界面与组件 (Vue 3)
│   ├── offscreen/     # 离屏推理层：托管 AI 模型与推理逻辑 (WASM)
│   ├── core/          # 逻辑服务层：探测器 Provider 与业务服务
│   ├── shared/        # 共享工具层：消息类型与基础工具函数
│   └── assets/        # 静态资源与全局样式
├── public/            # 模型文件与 WASM 静态资源存储
└── vite.config.ts     # 插件构建与路径配置

技术栈

• 核心框架：Vue 3 + Vite + TailwindCSS
• AI 推理：MediaPipe Tasks Vision (完全本地化加载)
• 画布处理：Fabric.js
• 本地存储：IndexedDB (用于模型文件持久化缓存)

致谢

• MediaPipe - 提供强大的本地计算机视觉处理能力。
• Vue.js - 提供高效的 UI 响应式框架。
• Fabric.js - 提供强大的交互式画布支持。

---

Protecting your privacy, one pixel at a time.

守护隐私，从抹除敏感像素开始。