AI导哈

动画检测工具

AnimaWatch是一款基于AI视觉的动画检测工具，能够像人类测试员一样检测网页动画中的卡顿、抖动和视觉伪影等问题。

  • by rishitank
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 rishitank/animawatch

使用说明

🎬 AnimaWatch

MCP服务器 手表 网络动画就像人类测试员一样——使用人工智能视觉检测笨拙、口吃和视觉伪影。

建于 快速MCP 利用最新的MCP规范（2025-11-25）功能。

✨ 它的作用

YOU: "Watch the modal animation on this page"
     ↓
ANIMAWATCH:
  1. Records browser interaction as video (Playwright)
  2. Sends video to Vision AI (Gemini FREE or Ollama local)
  3. AI watches the recording like a human would
     ↓
RESULT: "Jank detected at 1.2s - fade-in stutters for 180ms"

🚀 特性

特性 描述
🎥 视频录制 使用Playwright记录浏览器交互
👁️ AI视觉分析 使用Gemini 2.0 Flash（免费）或Olama（本地）
🔍 动画诊断 检测jank、口吃、计时问题、视觉伪影
📸 屏幕截图分析 非动画问题的快速静态分析
♿ 可访问性检查 视觉可访问性分析（对比度、可读性）
💾 资源 通过MCP资源访问记录和分析
📝 提示 为不同分析类型预定义提示模板
🆓 100%免费 使用Gemini的免费套餐或与Olama一起在本地运行

🛠️ MCP能力

工具

工具 说明
watch 🎬 录制和分析动画（主要工具）
screenshot 📸 具有图像返回功能的快速静态页面分析
analyze_video 🎥 分析现有视频文件
record ⏺️ 只记录而不分析
check_accessibility ♿ 视觉可访问性分析

资源

URI 描述
animawatch://recordings/{id} 访问存储的视频记录
animawatch://analyses/{id} 访问存储的分析结果
animawatch://config 当前服务器配置

提示

提示 描述
animation_diagnosis 综合动画分析模板
page_analysis 静态页面可视化分析模板
accessibility_check 以可访问性为重点的分析模板

🚀 快速开始

1.安装

cd ~/github/animawatch
uv sync
uv run playwright install chromium

2.免费获取Gemini API密钥

  1. 首选 谷歌AI工作室
  2. 点击“获取API密钥”→ 创建API密钥
  3. 复制您的密钥

3.配置

cp .env.example .env
# Edit .env and add your GEMINI_API_KEY

4.添加到您的MCP客户端

克劳德桌面版 (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "animawatch": {
      "command": "uv",
      "args": ["--directory", "/Users/YOUR_USER/github/animawatch", "run", "animawatch"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

增强代码 （设置）：

{
  "mcpServers": {
    "animawatch": {
      "command": "uv",
      "args": ["--directory", "/Users/YOUR_USER/github/animawatch", "run", "animawatch"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

📖 用法示例

观看动画问题

"Watch the modal animation on https://example.com for any jank"

执行操作然后观看

"Click the hamburger menu on https://example.com and watch the slide-in animation"

专注于特定领域

"Watch https://example.com with focus on scroll behavior"

可访问性检查

"Check accessibility on https://example.com"

访问以前的结果

"Show me the analysis from animawatch://analyses/abc123"

🔧 配置

环境变量 默认值 描述
GEMINI_API_KEY - Google Gemini API密钥（免费）
VISION_PROVIDER gemini gemini 或 ollama
VISION_MODEL gemini-2.0-flash 要使用的视觉模型
BROWSER_HEADLESS true 无头运行浏览器
VIDEO_WIDTH 1280 录制宽度
VIDEO_HEIGHT 720 录音高度
MAX_RECORDING_DURATION 30 最大录制秒数

🏠 100%本地与Olama

要完全在本地运行（无API调用）：

# Install Ollama
brew install ollama
ollama serve

# Pull a vision model
ollama pull qwen2.5-vl:7b

# Configure
export VISION_PROVIDER=ollama
export OLLAMA_MODEL=qwen2.5-vl:7b

备注：Ollama不支持直接视频分析，因此它将分析屏幕截图/帧。

💰 成本

提供商 成本
Gemini（人工智能工作室） 自由 （15次/分钟，100万代币/天）
奥拉马 自由 （在本地运行）

🏗️ 建筑

┌─────────────────────────────────────────────────────────────┐
│                       AnimaWatch                            │
│                    (FastMCP Server)                         │
├─────────────────────────────────────────────────────────────┤
│  Lifespan Context (AppContext)                              │
│  ├── BrowserRecorder (Playwright)                           │
│  ├── VisionProvider (Gemini/Ollama)                         │
│  ├── recordings: dict[id, Path]                             │
│  └── analyses: dict[id, str]                                │
├─────────────────────────────────────────────────────────────┤
│  Tools       │  Resources              │  Prompts           │
│  ─────────   │  ─────────────────────  │  ──────────────    │
│  watch       │  animawatch://recordings│  animation_diagnosis│
│  screenshot  │  animawatch://analyses  │  page_analysis     │
│  record      │  animawatch://config    │  accessibility_check│
│  analyze_video│                        │                    │
│  check_access│                         │                    │
└─────────────────────────────────────────────────────────────┘

📄 许可证

麻省理工学院

相关 MCP