动漫角色识别网站

这是一个基于 animeTrace API 的动漫角色识别网站，可以上传图片并识别其中的动漫角色。

功能特性

• 📁 图片上传：支持 JPG、PNG、GIF 格式，最大支持 5MB
• 🔗 URL上传：支持通过图片URL链接进行识别
• 👥 多角色识别：可识别图片中的多个动漫角色
• 🎯 详细识别结果：显示角色名称、作品、置信度等信息
• 🎲 随机emoji：每个识别结果卡片显示不同的随机emoji
• 🔍 Bangumi搜索：点击角色名称可在新标签页中打开Bangumi人物搜索结果
• 🛑 智能搜索控制：未知角色或作品不可点击搜索
• 🌅 背景轮播：10秒自动切换背景图片
• 💫 3D卡片效果：图片预览和结果卡片都有精美的3D效果
• 🎨 响应式设计：适配不同屏幕尺寸
• 📋 模型选择：支持选择不同的识别模型
• 🤖 AI检测：可开启或关闭AI检测功能
• 🔄 标签页切换：本地上传和URL链接上传方式可平滑切换
• 🎵 音效反馈：操作和错误提示都有音效反馈
• 🔔 通知系统：识别成功、失败等状态都有通知弹窗

技术栈

• 前端：HTML, CSS, JavaScript
• 后端：Node.js, Express
• API：animeTrace 识别API (https://api.animetrace.com/v1/search)
• 依赖：axios, cors, express, form-data, multer

安装与运行

环境要求

• Node.js 10.16.2

安装步骤

1. 克隆项目到本地

   git clone <项目地址>
   cd animeTest

2. 安装依赖：

   npm install

3. 启动服务：

   npm start

4. 访问网站： 打开浏览器访问 http://localhost:3000

使用方法

1. 选择上传方式：
   • 本地上传：点击选择图片或拖拽图片到上传区域
   • URL链接：输入图片URL地址并点击识别
2. 配置识别选项：
   • 识别模型：选择适合的识别模型
   • AI检测：开启或关闭AI检测功能
3. 查看预览：上传后会显示3D卡片效果的图片预览
4. 等待识别：系统会自动调用animeTrace API进行识别
5. 查看结果：识别完成后会显示结果卡片，每张卡片包含：
   • 随机emoji图标
   • 角色名称（可点击打开Bangumi人物搜索）
   • 作品名称（可点击搜索）
   • 置信度百分比和进度条
   • 候选结果（展开详情查看）
6. 搜索信息：
   • 点击角色名称：在新标签页中打开Bangumi人物搜索结果
   • 点击作品名称：在新标签页中打开相关搜索结果
7. 更换图片：点击已选择的图片可重新上传

界面特色

• 樱花色主题：温馨的粉色系配色方案
• 渐变效果：按钮和卡片都有精美的渐变效果
• 动画过渡：所有元素都有平滑的动画过渡效果
• 鼠标跟随：3D卡片会跟随鼠标移动产生立体效果
• 实时反馈：加载状态和错误信息都有明确的视觉反馈
• 智能布局：选项栏紧凑美观，上传区域居中显示
• 下拉菜单：自定义下拉菜单，支持鼠标悬停自动打开
• 滑块动画：标签页切换时的平滑滑块动画

注意事项

• 图片大小不要超过5MB
• 图片中应包含清晰的动漫角色面部
• 识别结果的准确性取决于animeTrace API的识别能力
• 未知角色或作品名称不可点击搜索
• 识别速度可能受网络状况和服务器负载影响
• 部分高级模型可能需要更长的识别时间
• 请遵守API使用规范，避免过度请求

许可证

MIT License