基础打标控制台
This commit is contained in:
yml2213
@@ -0,0 +1,493 @@
|
||||
"""
|
||||
极简本地 Web 点选验证码打标工具
|
||||
启动方式: uv run python tcaptcha/web_labeler.py --port 8765
|
||||
访问地址: http://127.0.0.1:8765
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import base64
|
||||
import json
|
||||
import logging
|
||||
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
|
||||
from io import BytesIO
|
||||
from pathlib import Path
|
||||
from urllib.parse import parse_qs, urlparse
|
||||
|
||||
from PIL import Image
|
||||
|
||||
try:
|
||||
from tcaptcha.slicer import slice_prompt_image
|
||||
except ImportError:
|
||||
from slicer import slice_prompt_image
|
||||
|
||||
logging.basicConfig(level=logging.INFO, format="%(asctime)s [%(levelname)s] %(message)s")
|
||||
logger = logging.getLogger("web_labeler")
|
||||
|
||||
RAW_DIR = Path("tcaptcha/data/raw")
|
||||
LABEL_FILE = Path("tcaptcha/data/labels.jsonl")
|
||||
CROPS_DIR = Path("tcaptcha/data/crops")
|
||||
|
||||
|
||||
def get_labeled_sample_ids() -> set:
|
||||
if not LABEL_FILE.exists():
|
||||
return set()
|
||||
labeled = set()
|
||||
with open(LABEL_FILE, "r", encoding="utf-8") as f:
|
||||
for line in f:
|
||||
line = line.strip()
|
||||
if line:
|
||||
try:
|
||||
record = json.loads(line)
|
||||
labeled.add(record.get("sample_id"))
|
||||
except Exception:
|
||||
pass
|
||||
return labeled
|
||||
|
||||
|
||||
def get_all_samples() -> list:
|
||||
if not RAW_DIR.exists():
|
||||
return []
|
||||
meta_files = sorted(RAW_DIR.glob("*_meta.json"))
|
||||
samples = []
|
||||
for mf in meta_files:
|
||||
try:
|
||||
meta = json.loads(mf.read_text(encoding="utf-8"))
|
||||
samples.append(meta)
|
||||
except Exception:
|
||||
pass
|
||||
return samples
|
||||
|
||||
|
||||
def get_sample_data(sample_id: str):
|
||||
bg_path = RAW_DIR / f"{sample_id}_bg.png"
|
||||
prompt_path = RAW_DIR / f"{sample_id}_prompt.png"
|
||||
meta_path = RAW_DIR / f"{sample_id}_meta.json"
|
||||
|
||||
if not bg_path.exists() or not prompt_path.exists() or not meta_path.exists():
|
||||
return None
|
||||
|
||||
meta = json.loads(meta_path.read_text(encoding="utf-8"))
|
||||
|
||||
# 切割提示图标
|
||||
crops = slice_prompt_image(prompt_path)
|
||||
sliced_b64 = []
|
||||
for idx, (crop_img, _) in enumerate(crops):
|
||||
buf = BytesIO()
|
||||
crop_img.save(buf, format="PNG")
|
||||
b64 = base64.b64encode(buf.getvalue()).decode("utf-8")
|
||||
sliced_b64.append(f"data:image/png;base64,{b64}")
|
||||
|
||||
bg_b64 = base64.b64encode(bg_path.read_bytes()).decode("utf-8")
|
||||
prompt_b64 = base64.b64encode(prompt_path.read_bytes()).decode("utf-8")
|
||||
|
||||
return {
|
||||
"sample_id": sample_id,
|
||||
"instruction": meta.get("instruction", "请依次点击："),
|
||||
"bg_b64": f"data:image/png;base64,{bg_b64}",
|
||||
"prompt_b64": f"data:image/png;base64,{prompt_b64}",
|
||||
"sliced_prompts": sliced_b64,
|
||||
}
|
||||
|
||||
|
||||
HTML_TEMPLATE = """<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>腾讯天御点选验证码 - 标注工作台</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--card: #1e293b;
|
||||
--border: #334155;
|
||||
--text: #f8fafc;
|
||||
--muted: #94a3b8;
|
||||
--accent: #38bdf8;
|
||||
--success: #22c55e;
|
||||
--warning: #f59e0b;
|
||||
--danger: #ef4444;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.header {
|
||||
width: 720px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.title { font-size: 20px; font-weight: 700; color: var(--accent); }
|
||||
.stats { font-size: 14px; color: var(--muted); }
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
width: 720px;
|
||||
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
|
||||
}
|
||||
.prompt-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #090d16;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.prompt-label { font-size: 15px; font-weight: 600; color: #e2e8f0; }
|
||||
.targets-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.target-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.target-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: #334155;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
.target-item:nth-child(1) .target-badge { background: #0284c7; color: #fff; }
|
||||
.target-item:nth-child(2) .target-badge { background: #16a34a; color: #fff; }
|
||||
.target-item:nth-child(3) .target-badge { background: #d97706; color: #fff; }
|
||||
.target-img {
|
||||
height: 48px;
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
.canvas-wrapper {
|
||||
position: relative;
|
||||
width: 672px;
|
||||
height: 480px;
|
||||
margin: 0 auto;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
#bgCanvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 672px;
|
||||
height: 480px;
|
||||
}
|
||||
.toolbar {
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-group { display: flex; gap: 10px; }
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.btn-primary { background: #0284c7; color: white; }
|
||||
.btn-primary:hover { background: #0369a1; }
|
||||
.btn-primary:disabled { background: #334155; cursor: not-allowed; opacity: 0.6; }
|
||||
.btn-secondary { background: #334155; color: #cbd5e1; }
|
||||
.btn-secondary:hover { background: #475569; }
|
||||
.btn-danger { background: #dc2626; color: white; }
|
||||
.btn-danger:hover { background: #b91c1c; }
|
||||
.points-display {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
.shortcut-tip {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="title">🎯 腾讯天御点选验证码 · 标注工具</div>
|
||||
<div class="stats" id="statsInfo">加载中...</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="mainCard">
|
||||
<div class="prompt-section">
|
||||
<div class="prompt-label" id="instructionText">请依次点击：</div>
|
||||
<div class="targets-container" id="targetsBox"></div>
|
||||
</div>
|
||||
|
||||
<div class="canvas-wrapper" id="canvasWrapper">
|
||||
<canvas id="bgCanvas" width="672" height="480"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="points-display" id="pointsText">已标记: 0 / 3 点</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn-secondary" onclick="undoPoint()">撤销 (Z)</button>
|
||||
<button class="btn-secondary" onclick="resetPoints()">重选 (R)</button>
|
||||
<button class="btn-secondary" onclick="skipSample()">跳过 (S)</button>
|
||||
<button class="btn-primary" id="saveBtn" onclick="submitLabel()" disabled>保存并下一题 (Enter)</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcut-tip">快捷键: 点击大图标记坐标 | [Z] 撤销 | [R] 重置 | [S] 跳过 | [Enter/Space] 保存</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentSample = null;
|
||||
let clickedPoints = [];
|
||||
const canvas = document.getElementById("bgCanvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
let bgImage = new Image();
|
||||
|
||||
const COLORS = ["#0284c7", "#16a34a", "#d97706"];
|
||||
|
||||
async function loadNext() {
|
||||
const res = await fetch("/api/next");
|
||||
const data = await res.json();
|
||||
if (data.finished) {
|
||||
alert("🎉 所有已采集样本标注完成！");
|
||||
return;
|
||||
}
|
||||
currentSample = data.sample;
|
||||
document.getElementById("statsInfo").innerText = `已标注: ${data.stats.labeled} / 总样本: ${data.stats.total}`;
|
||||
document.getElementById("instructionText").innerText = currentSample.instruction || "请依次点击：";
|
||||
|
||||
// 渲染提示图标
|
||||
const container = document.getElementById("targetsBox");
|
||||
container.innerHTML = "";
|
||||
currentSample.sliced_prompts.forEach((src, i) => {
|
||||
const item = document.createElement("div");
|
||||
item.className = "target-item";
|
||||
item.innerHTML = `
|
||||
<span class="target-badge">目标 ${i+1}</span>
|
||||
<img class="target-img" src="${src}">
|
||||
`;
|
||||
container.appendChild(item);
|
||||
});
|
||||
|
||||
// 渲染背景图
|
||||
clickedPoints = [];
|
||||
updateDisplay();
|
||||
bgImage.onload = () => drawCanvas();
|
||||
bgImage.src = currentSample.bg_b64;
|
||||
}
|
||||
|
||||
function drawCanvas() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 绘制点击点
|
||||
clickedPoints.forEach((pt, i) => {
|
||||
const color = COLORS[i] || "#ef4444";
|
||||
// 外圆
|
||||
ctx.beginPath();
|
||||
ctx.arc(pt.x, pt.y, 16, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = "#ffffff";
|
||||
ctx.stroke();
|
||||
|
||||
// 内部数字
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = "bold 13px sans-serif";
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText(`${i+1}`, pt.x, pt.y);
|
||||
});
|
||||
}
|
||||
|
||||
canvas.addEventListener("click", (e) => {
|
||||
if (!currentSample || clickedPoints.length >= 3) return;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const scaleX = canvas.width / rect.width;
|
||||
const scaleY = canvas.height / rect.height;
|
||||
const x = Math.round((e.clientX - rect.left) * scaleX);
|
||||
const y = Math.round((e.clientY - rect.top) * scaleY);
|
||||
|
||||
clickedPoints.push({ x, y });
|
||||
drawCanvas();
|
||||
updateDisplay();
|
||||
});
|
||||
|
||||
function updateDisplay() {
|
||||
const saveBtn = document.getElementById("saveBtn");
|
||||
document.getElementById("pointsText").innerText = `已标记: ${clickedPoints.length} / 3 点 ${JSON.stringify(clickedPoints.map(p => [p.x, p.y]))}`;
|
||||
saveBtn.disabled = clickedPoints.length !== 3;
|
||||
}
|
||||
|
||||
function undoPoint() {
|
||||
if (clickedPoints.length > 0) {
|
||||
clickedPoints.pop();
|
||||
drawCanvas();
|
||||
updateDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
function resetPoints() {
|
||||
clickedPoints = [];
|
||||
drawCanvas();
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
function skipSample() {
|
||||
loadNext();
|
||||
}
|
||||
|
||||
async function submitLabel() {
|
||||
if (clickedPoints.length !== 3) return;
|
||||
const payload = {
|
||||
sample_id: currentSample.sample_id,
|
||||
points: clickedPoints,
|
||||
};
|
||||
const res = await fetch("/api/save", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
if (res.ok) {
|
||||
loadNext();
|
||||
} else {
|
||||
alert("保存失败，请检查终端日志");
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (e.key === "z" || e.key === "Z") undoPoint();
|
||||
if (e.key === "r" || e.key === "R") resetPoints();
|
||||
if (e.key === "s" || e.key === "S") skipSample();
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
if (clickedPoints.length === 3) submitLabel();
|
||||
}
|
||||
});
|
||||
|
||||
loadNext();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
|
||||
|
||||
class LabelHandler(BaseHTTPRequestHandler):
|
||||
def do_GET(self):
|
||||
url = urlparse(self.path)
|
||||
if url.path in ["/", "/index.html"]:
|
||||
self.send_response(200)
|
||||
self.send_header("Content-Type", "text/html; charset=utf-8")
|
||||
self.end_headers()
|
||||
self.wfile.write(HTML_TEMPLATE.encode("utf-8"))
|
||||
return
|
||||
|
||||
if url.path == "/api/next":
|
||||
all_samples = get_all_samples()
|
||||
labeled_ids = get_labeled_sample_ids()
|
||||
|
||||
unlabeled = [s for s in all_samples if s.get("sample_id") not in labeled_ids]
|
||||
if not unlabeled:
|
||||
resp_data = {"finished": True, "stats": {"total": len(all_samples), "labeled": len(labeled_ids)}}
|
||||
else:
|
||||
next_sample = unlabeled[0]
|
||||
sample_data = get_sample_data(next_sample["sample_id"])
|
||||
resp_data = {
|
||||
"finished": False,
|
||||
"sample": sample_data,
|
||||
"stats": {"total": len(all_samples), "labeled": len(labeled_ids)},
|
||||
}
|
||||
|
||||
self.send_response(200)
|
||||
self.send_header("Content-Type", "application/json; charset=utf-8")
|
||||
self.end_headers()
|
||||
self.wfile.write(json.dumps(resp_data).encode("utf-8"))
|
||||
return
|
||||
|
||||
self.send_response(404)
|
||||
self.end_headers()
|
||||
|
||||
def do_POST(self):
|
||||
url = urlparse(self.path)
|
||||
if url.path == "/api/save":
|
||||
content_len = int(self.headers.get("Content-Length", 0))
|
||||
body = self.rfile.read(content_len).decode("utf-8")
|
||||
data = json.loads(body)
|
||||
sample_id = data.get("sample_id")
|
||||
points = data.get("points", [])
|
||||
|
||||
if not sample_id or len(points) != 3:
|
||||
self.send_response(400)
|
||||
self.end_headers()
|
||||
return
|
||||
|
||||
LABEL_FILE.parent.mkdir(parents=True, exist_ok=True)
|
||||
CROPS_DIR.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
# 保存切片作为正样本
|
||||
bg_path = RAW_DIR / f"{sample_id}_bg.png"
|
||||
if bg_path.exists():
|
||||
bg_img = Image.open(bg_path).convert("RGBA")
|
||||
for i, pt in enumerate(points):
|
||||
cx, cy = pt["x"], pt["y"]
|
||||
# 裁剪 54x54 小图块
|
||||
crop_box = (max(0, cx - 27), max(0, cy - 27), min(672, cx + 27), min(480, cy + 27))
|
||||
crop_patch = bg_img.crop(crop_box)
|
||||
crop_patch.save(CROPS_DIR / f"{sample_id}_target_{i+1}.png")
|
||||
|
||||
# 写入 labels.jsonl
|
||||
record = {
|
||||
"sample_id": sample_id,
|
||||
"points": points,
|
||||
"ans_format": [{"elem_id": i + 1, "type": "DynAnswerType_POS", "data": f"{p['x']},{p['y']}"} for i, p in enumerate(points)],
|
||||
}
|
||||
with open(LABEL_FILE, "a", encoding="utf-8") as f:
|
||||
f.write(json.dumps(record, ensure_ascii=False) + "\n")
|
||||
|
||||
logger.info("✓ 成功保存样本标注: %s -> %s", sample_id, points)
|
||||
self.send_response(200)
|
||||
self.send_header("Content-Type", "application/json")
|
||||
self.end_headers()
|
||||
self.wfile.write(b'{"status":"ok"}')
|
||||
return
|
||||
|
||||
self.send_response(404)
|
||||
self.end_headers()
|
||||
|
||||
|
||||
def main():
|
||||
parser = argparse.ArgumentParser(description="腾讯点选验证码轻量 Web 打标工具")
|
||||
parser.add_argument("--port", type=int, default=8765, help="本地服务端口 (默认: 8765)")
|
||||
args = parser.parse_args()
|
||||
|
||||
server = ThreadingHTTPServer(("127.0.0.1", args.port), LabelHandler)
|
||||
logger.info("🚀 打标工作台已启动: http://127.0.0.1:%d", args.port)
|
||||
logger.info("在浏览器打开上述地址即可开始打标，按 Ctrl+C 停止")
|
||||
try:
|
||||
server.serve_forever()
|
||||
except KeyboardInterrupt:
|
||||
logger.info("打标服务已停止")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
Reference in New Issue
Block a user