Files
vision-tool/web/index.html
Geliebte f9cdeb5d64 feat: 认证简化为固定进入密钥 + 页面增强(API 文档/主题切换/版权署名)
- 移除管理员初始化/登录/JWT 流程,改为固定进入密钥(19735500),
  首次启动自动初始化到数据库 settings 表(可改库更新)
- analyze 接口支持可选密钥鉴权:X-Access-Key 请求头或 access_key 字段,
  带密钥强制校验(错误 401),不带密钥保持免鉴权
- 解锁后顶栏"复制 API 文档"按钮:以当前访问 URL 为基础地址动态生成
  Markdown 文档(免鉴权/带密钥两种 curl 示例,供智能体直接调用)
- 白昼/黑夜主题切换:CSS 变量驱动,localStorage 持久化,默认跟随系统
- 修复 hidden 属性被 display:flex 覆盖导致解锁层无法隐藏的问题
- 页面去除"免费/Agnes"文案,页脚署名青梧映星软件开发工作室
- build.bat/build.sh 简化为 Linux 交叉编译(CGO_ENABLED=0)
- 依赖精简:移除 golang-jwt/bcrypt,直接依赖仅 gin/sqlite/gorm/yaml

Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-13 01:21:18 +08:00

70 lines
2.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vision Tool — 在线图片识别</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header class="topbar">
<div class="brand">
<span class="logo">👁️</span>
<div>
<h1>Vision Tool</h1>
<p>在线图片识别</p>
</div>
</div>
<div class="account" id="accountArea">
<button class="btn btn-ghost" id="themeBtn" title="切换白昼/黑夜">🌙</button>
<!-- 解锁状态由 JS 渲染 -->
</div>
</header>
<main class="container">
<section class="card upload-card">
<div class="dropzone" id="dropzone">
<input type="file" id="fileInput" accept="image/png,image/jpeg,image/gif,image/webp,image/bmp,image/tiff" multiple hidden>
<div class="dropzone-icon">🖼️</div>
<p class="dropzone-title">点击选择或拖拽图片到这里</p>
<p class="dropzone-hint">支持 PNG / JPG / GIF / WebP / BMP,可多张同时识别(对比异同)</p>
</div>
<div class="preview-list" id="previewList"></div>
<div class="prompt-row">
<input type="text" id="promptInput" class="prompt-input"
placeholder="可选:自定义分析提问,例如「提取图中所有文字」「分析这个 UI 的布局结构」">
<button class="btn btn-primary" id="analyzeBtn" disabled>开始识别</button>
</div>
</section>
<section class="card result-card" id="resultCard" hidden>
<div class="result-head">
<h2>识别结果</h2>
<div class="result-actions">
<button class="btn btn-ghost" id="copyBtn">复制</button>
</div>
</div>
<pre class="result-body" id="resultBody"></pre>
<p class="result-meta" id="resultMeta"></p>
</section>
</main>
<!-- 进入密钥解锁层 -->
<div class="unlock-mask" id="unlockLayer">
<div class="unlock-card">
<div class="unlock-icon">🔐</div>
<h2>Vision Tool</h2>
<p class="unlock-desc">请输入进入密钥</p>
<input type="password" id="unlockKey" class="unlock-input" placeholder="进入密钥" autofocus>
<div class="modal-error" id="unlockError"></div>
<button class="btn btn-primary btn-block" id="unlockBtn">进入</button>
</div>
</div>
<footer class="footer">在线图片识别 · 识别接口支持 API 直接调用<br>© 青梧映星软件开发工作室 版权所有</footer>
<script src="/js/app.js"></script>
</body>
</html>