图片 Excel 浏览与分析（EdgeOne Pages 版本）

这是一个为 EdgeOne Pages（或其他静态托管 + 函数计算环境）设计的重构版本，功能参考原有的 search_images 项目，但不依赖 Flask，可直接作为 纯前端静态站点 + Edge Functions 部署。

功能概览

• Excel 上传与解析
  • 支持上传 .xlsx 文件
  • 从 第一列 提取图片 URL（支持单元格中多个链接）
  • 正则匹配图片链接，支持 http/https，并进行 去重
• 图片浏览
  • 分页展示（默认每页 50 行）
  • 单张大图浏览，上/下一张按钮与键盘方向键
  • 显示当前图片的来源行号与 URL
• 图片放大与操作
  • 点击图片全屏放大
  • 支持滚轮/按钮缩放、拖拽查看局部
• 链接保存与导出
  • 浏览时可以将感兴趣的图片链接加入“已保存”
  • 支持导出为 Excel 文件（包含行号和链接）
  • 使用浏览器本地内存与 localStorage 保存进度
• Excel 拆分
  • 上传一个 Excel，指定“每份多少行”
  • 在浏览器中将数据拆成多份 Excel 文件供下载
• Excel 合并
  • 选择多个 Excel 文件
  • 合并为一个 Excel，并按“图片链接”列去重
• 图片识别（可选：需要 Edge Function 代理）
  • 通过 Edge Function 调用现有的识别 API：/api/goods_shelves
  • 在页面中展示返回的 vis_image 结果

---

项目结构

image_analysis_gain/
├── README.md
├── DEPLOY.md               # EdgeOne Pages 部署指南（详细）
├── index.html              # 主页面（静态）
├── local_proxy.py          # 本地开发用的图片代理服务器
├── assets/
│   ├── css/
│   │   └── style.css       # 页面样式
│   └── js/
│       ├── app.js          # 主逻辑
│       └── libs/           # 第三方库
│           ├── jszip.min.js
│           └── xlsx.full.min.js
├── functions/              # EdgeOne Pages Edge Functions（部署用）
│   └── api/
│       ├── proxy_image.js      # 图片代理函数（/api/proxy_image）
│       └── recognize_image.js  # 图片识别函数（/api/recognize_image）
└── backend/                # 原始函数代码（已迁移到 functions/）
    ├── proxy_image.js
    └── recognize_image.js

---

本地开发与预览

本项目是 纯静态前端，你可以使用任意静态服务器本地预览，例如 Python 或 Node：

cd /Users/yuguoq/Desktop/CursorProject/image_analysis_gain

# 方式一：使用 Python 简单服务器
python3 -m http.server 8000
# 然后访问 http://127.0.0.1:8000

# 方式二：使用 Node（例如 serve）
npx serve .

说明：识别功能如果走 Edge Function，需要在实际部署环境中配置函数路由，本地可以暂时关闭或直接访问真实接口调试。

---

🚀 部署到 EdgeOne Pages

详细部署指南请查看 DEPLOY.md

快速开始

1. 准备代码

   • 确保代码已推送到 Git 仓库（GitHub/GitLab/Bitbucket）

2. 在 EdgeOne Pages 创建项目

   • 访问 EdgeOne Pages 控制台
   • 选择"导入 Git 仓库"
   • 连接你的仓库

3. 配置构建设置

   • 框架预设：其他 或 静态网站
   • 根目录：./
   • 输出目录：./
   • 构建命令：留空（纯静态网站，无需构建）

4. Edge Functions 自动识别

   • EdgeOne Pages 会自动识别 functions/ 目录下的函数
   • 路由映射：
     • functions/api/proxy_image.js → /api/proxy_image
     • functions/api/recognize_image.js → /api/recognize_image

5. 部署

   • 推送代码到主分支自动触发部署
   • 或在控制台手动触发部署

项目已包含

✅ Edge Functions 代码（functions/ 目录）
✅ 部署配置文件
✅ 详细的部署文档（DEPLOY.md）

---

使用说明（前端页面）

打开 index.html 后，可以看到几个主要区域/标签页：

1. 图片浏览
   • 上传 Excel：选择包含图片链接的 Excel（第一列）
   • 数据加载完成后，左侧为列表，右侧为大图区域
   • 使用“上一张 / 下一张”按钮或键盘 ←/→ 浏览
   • 点击大图可以进入放大模式，Esc 退出
   • 点击“保存当前图片链接”将当前图片加入“已保存列表”
2. Excel 拆分
   • 选择一个 Excel 文件
   • 输入“每份行数”
   • 点击“开始拆分”后，浏览器会自动触发多个 Excel 文件下载
3. Excel 合并
   • 选择多个 Excel 文件
   • 点击“开始合并”
   • 浏览器会生成一个 merged_result.xlsx 下载
4. 图片识别
   • 输入/选择图片 URL
   • 点击“识别”调用后端 Edge Function
   • 显示识别返回的 vis_image（如果有）

---

后端 Edge Function 说明

Edge Functions 已配置在 functions/ 目录，可直接部署到 EdgeOne Pages：

functions/api/proxy_image.js

• 路由：/api/proxy_image
• 方法：GET
• 功能：代理图片请求，解决跨域问题（ERR_BLOCKED_BY_ORB）
• 参数：url (query string) - 要代理的图片 URL

functions/api/recognize_image.js

• 路由：/api/recognize_image
• 方法：POST
• 功能：代理图片识别 API 请求
• 请求体：{ "url": "图片URL" }
• 转发目标：http://223.109.239.30:18498/api/goods_shelves
• 返回：{ success: true, vis_image: "...", raw: {...} }

注意：函数代码已按照 EdgeOne Pages 标准格式编写，使用 export async function onRequestGet/Post() 导出。

---

后续可扩展点

• 将 UI 用 Vue/React 重写，便于维护复杂交互
• 增加国际化（中英文界面） -.Excel 解析/导出目前使用前端库（如 SheetJS），后续可根据性能需求替换或优化