sauravbhattacharya001/gif-captcha

## 📖 概述 本案例研究测试了基于 GIF 的 CAPTCHA —— 特别是那些需要理解动画序列中意外事件的能力 —— 是否能作为抵御 LLM 的有效人机验证机制。 研究向 GPT-4 提供了 10 个 GIF，每个 GIF 都包含情节反转或意外事件，并要求其“描述这个意外事件”。同时收集了人类的回答作为基准。 ## 🔬 研究方法 | 组件 | 详情 | |-----------|---------| | **测试模型** | GPT-4 (纯文本, 视觉功能前版本) | | **测试集** | 10 个带有意外情节反转的动画 GIF | | **提示词** | *"描述这个意外事件"* | | **基准** | 针对每个 GIF 收集的人类描述 | | **成功标准** | AI 必须生成语义准确的动画事件描述 | ## 📊 结果 **得分：10/10 CAPTCHA 成功拦截 GPT-4** | # | GIF | 人类能描述吗？ | GPT-4 能描述吗？ | |---|-----|:---:|:---:| | 1 | 决斗情节反转 | ✅ | ❌ | | 2 | 说唱歌手滑旱冰 | ✅ | ❌ | | 3 | 飞行的滑板手 | ✅ | ❌ | | 4 | 香蕉吉祥物斗舞 | ✅ | ❌ | | 5 | 井字棋狗 | ✅ | ❌ | | 6 | 父母狗的牺牲 | ✅ | ❌ | | 7 | 镜子手错觉 | ✅ | ❌ | | 8 | 公路 180° 漂移 | ✅ | ❌ | | 9 | 路怒症拥抱 | ✅ | ❌ | | 10 | 生日蛋糕糊脸 | ✅ | ❌ | GPT-4 对每个测试的回应完全相同： ## 🔑 关键发现 ### 2023年：GIF CAPTCHA 是有效的 纯文本 LLM 完全无法处理动态视觉内容。需要理解动画序列叙事的 GIF CAPTCHA 是一种 **100% 有效** 的人机验证机制。 ### 2025年更新：格局已变 多模态 LLM (GPT-4V, GPT-4o, Claude 3.5, Gemini 1.5 Pro) 现在可以： - 描述从 GIF 中提取的静态帧 - 从视觉上下文线索推断可能的动作 - 识别物体、人物和场景 **简单的视觉识别 CAPTCHA 已不再足够。** 然而，那些需要理解**时机**、**叙事惊喜**和**喜剧反转**的 CAPTCHA 可能仍然会给那些独立处理帧而非将其视为连续序列的 AI 系统带来挑战。 ## 🚀 在线演示 该互动案例研究已部署为静态页面： **[sauravbhattacharya001.github.io/gif-captcha](https://sauravbhattacharya001.github.io/gif-captcha/)** ### 🎮 互动 CAPTCHA 演示 **[尝试演示 →](https://sauravbhattacharya001.github.io/gif-captcha/demo.html)** 亲自接受 GIF CAPTCHA 挑战！该互动演示： - 向你展示 10 个带有意外反转的 GIF - 让你输入自己对意外事件的描述 - 在你提交后揭示人类和 GPT-4 的回答 - 跟踪你在所有挑战中的“人类得分” - 提供详细的结果摘要，将你与 GPT-4 的 0/10 得分进行比较 ### 📊 研究分析仪表板 **[查看分析 →](https://sauravbhattacharya001.github.io/gif-captcha/analysis.html)** 通过交互式可视化深入研究研究数据： - **CAPTCHA 分类体系** — 6 个认知类别（叙事反转、肢体喜剧、动物行为、视觉戏法、社会反转、视错觉），带筛选标签 - **类别与难度图表** — Canvas 渲染的条形图，显示分布和 AI 难度评级（2023 年与 2025 年估算值） - **人类 vs AI 雷达图** — 6 轴认知能力比较（时序排列、叙事惊喜、文化语境、运动追踪、幽默检测、物体识别） - **多模型比较** — GPT-4、GPT-4o、Claude 3.5 和 Gemini 1.5 Pro 在各类别中的估算得分 - **AI 能力时间线** — 从 0/10 (2023) 到预计未来表现的演变 - **单 GIF 分析卡片** — 可展开的详细分类，包含难度计、认知技能以及每个 CAPTCHA 生效原因的解释 ### 🛠️ CAPTCHA 工作坊 **[打开工作坊 →](https://sauravbhattacharya001.github.io/gif-captcha/generator.html)** 创建你自己的自定义 GIF CAPTCHA 挑战集： - **构建** — 添加 GIF 挑战，包括标题、URL、预期答案、类别和难度评级 - **预览** — 像用户体验那样测试你的 CAPTCHA 集，包含答案提交和揭示过程 - **导出/导入** — 导出为 JSON，下载为文件，或生成可分享的 URL 链接 - **本地存储** — 在浏览器中自动保存你的工作，永不丢失进度 - **示例集** — 加载预置的 5 个挑战集以快速入门 ### 🤖 AI 响应模拟器 **[尝试模拟器 →](https://sauravbhattacharya001.github.io/gif-captcha/simulator.html)** 探索不同的 AI 模型如何响应每个 GIF CAPTCHA： - **5 种 AI 模型** — GPT-4 (2023)、GPT-4V (2023 Q4)、GPT-4o (2024)、Claude 3.5 (2024)、Gemini 1.5 Pro (2024) - **模拟响应** — 查看每个模型对每个 CAPTCHA 的具体回答 - **能力分解** — 针对每个 CAPTCHA 分析模型能力与要求（帧分析、运动追踪、叙事理解、文化语境、幽默检测、物体识别）的对比 - **推理说明** — 解释为什么每个模型会成功、部分成功或失败 - **模型 × CAPTCHA 热力图** — 所有模型和 CAPTCHA 的通过/未通过矩阵 - **比较图表** — 堆叠有效性条形图和能力雷达叠加图 - **交互式模型切换** — 点击任意模型查看其完整响应集 ### ⏱️ 时序挑战 **[尝试时序挑战 →](https://sauravbhattacharya001.github.io/gif-captcha/temporal.html)** 一种更难的 CAPTCHA 格式，用于测试时序事件排序： - **事件排序** — 观看每个 GIF 并按正确的时间顺序排列 4 个事件 - **拖放 + 按钮** — 通过拖动或使用箭头按钮重新排序事件（适配移动端） - **Kendall Tau 评分** — 成对一致性评分 (0–100%)，为接近正确的排序提供部分分数 - **单挑战 AI 分析** — 解释为什么逐帧 AI 处理在时序排列上会失败 - **研究背景** — 探索时序 CAPTCHA 作为下一代人机验证方法 - **结果仪表板** — 总分、单挑战细分带评分条、研究意义 ### 案例研究页面 具有深色主题 UI，特点包括： - 带有 CAPTCHA 通过/未通过徽章的完整结果表 - 链接到 GIF 源以便手动验证 - 带有视觉标注的关键发现 ## 🛠️ 技术栈 | 技术 | 用途 | |-----------|---------| | HTML5 | 页面结构 | | CSS3 (自定义属性) | 深色主题，响应式设计 | | JavaScript | 核心 CAPTCHA 库 (UMD, 浏览器 + Node.js) | | GitHub Pages | 托管 | | npm | 包分发 | ## 📦 安装 作为 npm 包安装，以编程方式访问 CAPTCHA 工具： ``` npm install gif-captcha ``` ``` const gifCaptcha = require("gif-captcha"); // Create a challenge const challenge = gifCaptcha.createChallenge({ id: 1, title: "Surprise Ending", gifUrl: "https://example.com/twist.gif", humanAnswer: "The cat fell off the table unexpectedly", }); // Pick 5 random challenges from a pool const selected = gifCaptcha.pickChallenges(challengePool, 5); // Validate a user's answer (fuzzy matching with Jaccard similarity) const result = gifCaptcha.validateAnswer( userAnswer, challenge.humanAnswer, { threshold: 0.3, requiredKeywords: ["cat", "fell"] } ); console.log(result); // { passed: true, score: 0.75, hasKeywords: true } // Sanitize untrusted input for safe HTML rendering const safe = gifCaptcha.sanitize(''); ``` 或在浏览器中通过 CDN 使用： ``` ``` ## 📂 项目结构 ``` gif-captcha/ ├── src/ │ └── index.js # Core library (UMD — browser + Node.js) ├── index.html # Interactive case study page ├── demo.html # Interactive CAPTCHA demo (try it yourself!) ├── analysis.html # Research analysis dashboard with charts & taxonomy ├── generator.html # CAPTCHA Workshop — create custom challenge sets ├── simulator.html # AI Response Simulator — model comparison & capability analysis ├── temporal.html # Temporal Sequence Challenge — event ordering CAPTCHA format ├── shared.js # Browser-specific shared utilities ├── shared.css # Shared dark theme styles ├── tests/ # Test suite (Node.js built-in test runner) ├── README.md # This file └── LICENSE # MIT License ``` ## 🔮 未来研究方向 - **时序 CAPTCHA** — 需要理解跨帧的事件顺序 - **叙事惊喜检测** — 测试 AI 能否识别某事*为何*意外，而不仅仅是发生了*什么* - **多模型基准测试** — 将测试扩展到支持视频输入的 GPT-4o、Claude 3.5 Opus、Gemini 2.0 - **对抗性 GIF 生成** — 创建专门设计用于利用逐帧处理与连续处理差异的 GIF ## 📄 许可证 [MIT](LICENSE) — Saurav Bhattacharya ## 👤 作者 **Saurav Bhattacharya** - GitHub: [@sauravbhattacharya001](https://github.com/sauravbhattacharya001)

标签：AI安全, CAPTCHA, Chat Copilot, CMS安全, CSS3, DLL 劫持, DNS解析, Docker, GIF验证码, GitHub Actions, GNU通用公共许可证, GPT-4, HTML5, JavaScript, LLM, MITM代理, Node.js, npm, Unmanaged PE, Web安全, 人工智能, 人机交互, 人机验证, 后端开发, 后端开发, 后端开发, 图像识别, 图灵测试, 大语言模型, 安全防御评估, 对抗攻击, 开源项目, 敏感信息检测, 数据可视化, 暗色界面, 机器人识别, 案例研究, 深度学习, 用户体验, 用户模式Hook绕过, 网络安全, 自动笔记, 蓝队分析, 隐私保护, 验证码