xsl/hair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整 baseline 关键点 + 新增极简测试页

Browse Source 
- head_mask.py: BASELINE_IDX 改为 [162,71,68,104,69,108,151,337,299,333,298,301,389]，
  左端点 21→162、右端点 251→389，新增 71/301 两点；同步更新注释
- static/test_simple.html: 极简测试页，仅需选图片+发型，原图与结果左右并排对比
- .gitignore: 忽略 report_hairline_v2.zip
This commit is contained in:
xsl
2026-07-12 22:27:02 +08:00
parent 5d9d91bc82
commit b163a3f34a
3 changed files with 138 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -1
View File
@@ -46,5 +46,6 @@ _grow*_resp.json
# 测试素材图（体积大，不入 git） # 测试素材图（体积大，不入 git）
image/test/ image/test/
# 批量报告输出（200张生成图+原图，体积大，不入 git） # 批量报告输出（生成图+原图，体积大，不入 git）
static/report_hairline_v2/ static/report_hairline_v2/
static/report_hairline_v2.zip
face_analysis/head_mask.py
+13 -12
View File
@@ -2,8 +2,8 @@
流程（详见需求讨论）： 流程（详见需求讨论）：
1. MediaPipe 关键点检测。 1. MediaPipe 关键点检测。
2. 底部分割线 = 关键点 [21,68,104,69,108,151,337,299,333,298,251] 的连线（左端21→中心151→右端251）， 2. 底部分割线 = 关键点 [162,71,68,104,69,108,151,337,299,333,298,301,389] 的连线（左端162→中心151→右端389），
再把左端点 21 水平延伸到图片最左边、右端点 251 水平延伸到图片最右边。 再把左端点 162 水平延伸到图片最左边、右端点 389 水平延伸到图片最右边。
3. 上半区 = 分割线以上区域（多边形填充：左边缘→弧线→右边缘→上边缘闭合）。 3. 上半区 = 分割线以上区域（多边形填充：左边缘→弧线→右边缘→上边缘闭合）。
4. 头发分割：BiSeNet 与 SegFormer 各出一张 hair_mask（两套供对比）。 4. 头发分割：BiSeNet 与 SegFormer 各出一张 hair_mask（两套供对比）。
5. 闭合区域（含额头）：每列从最顶端头发像素向下填充到分割线，把头发与画线之间的额头皮肤 5. 闭合区域（含额头）：每列从最顶端头发像素向下填充到分割线，把头发与画线之间的额头皮肤
@@ -22,8 +22,9 @@ import numpy as np
from face_analysis.detector import detector from face_analysis.detector import detector
from face_analysis.calibration import estimate_scale_factor, normalized_to_pixel from face_analysis.calibration import estimate_scale_factor, normalized_to_pixel
# 底部额头弧线关键点（图像上从左到右：左端 21 → 中心 151 → 右端 251） # 底部分割线关键点（图像上从左到右：左端 162 → 中心 151 → 右端 389）
BASELINE_IDX = [21, 68, 104, 69, 108, 151, 337, 299, 333, 298, 251] # 162/389 为左右最外侧端点（向图片左右边缘水平延长）；中间含 71/301 等点构成弧线
BASELINE_IDX = [162, 71, 68, 104, 69, 108, 151, 337, 299, 333, 298, 301, 389]
CENTER_IDX = 151 # 内缩方向的目标点（额头中心） CENTER_IDX = 151 # 内缩方向的目标点（额头中心）
ERODE_CM = 1.2 # 外缘内缩距离（厘米，默认；可由入参覆盖） ERODE_CM = 1.2 # 外缘内缩距离（厘米，默认；可由入参覆盖）
SEGFORMER_HAIR = 13 # jonathandinu/face-parsing 中 hair 类索引 SEGFORMER_HAIR = 13 # jonathandinu/face-parsing 中 hair 类索引
@@ -50,12 +51,12 @@ def _baseline_points(landmarks, w, h):
def _upper_region_mask(baseline_pts, w, h): def _upper_region_mask(baseline_pts, w, h):
"""分割线以上区域（bool，H×W）。 """分割线以上区域（bool，H×W）。
多边形顶点：左上角 →（0, y54）→ 弧线各点 →（w-1, y284）→ 右上角，闭合后填充。 多边形顶点：左上角 →（0, y左端）→ 弧线各点 →（w-1, y右端）→ 右上角，闭合后填充。
其中 54→左边缘、284→右边缘为两段水平延长线。 左端/右端为两段水平延长线（向图片左右边缘延伸）。
""" """
x54, y54 = baseline_pts[0] x0, y0 = baseline_pts[0]
x284, y284 = baseline_pts[-1] x1, y1 = baseline_pts[-1]
poly = [(0, 0), (0, y54)] + baseline_pts + [(w - 1, y284), (w - 1, 0)] poly = [(0, 0), (0, y0)] + baseline_pts + [(w - 1, y1), (w - 1, 0)]
mask = np.zeros((h, w), np.uint8) mask = np.zeros((h, w), np.uint8)
cv2.fillPoly(mask, [np.array(poly, np.int32)], 1) cv2.fillPoly(mask, [np.array(poly, np.int32)], 1)
return mask.astype(bool) return mask.astype(bool)
@@ -108,9 +109,9 @@ def _overlay(image, mask_bool, color, alpha=0.45):
def _draw_baseline(image, baseline_pts, w): def _draw_baseline(image, baseline_pts, w):
"""画分割线（含左右水平延长线）+ 关键点，中心点 151 标红。""" """画分割线（含左右水平延长线）+ 关键点，中心点 151 标红。"""
out = image.copy() out = image.copy()
y54 = baseline_pts[0][1] y0 = baseline_pts[0][1]
y284 = baseline_pts[-1][1] y1 = baseline_pts[-1][1]
chain = [(0, y54)] + baseline_pts + [(w - 1, y284)] chain = [(0, y0)] + baseline_pts + [(w - 1, y1)]
for a, b in zip(chain[:-1], chain[1:]): for a, b in zip(chain[:-1], chain[1:]):
cv2.line(out, a, b, (0, 255, 255), 2, cv2.LINE_AA) cv2.line(out, a, b, (0, 255, 255), 2, cv2.LINE_AA)
for idx, p in zip(BASELINE_IDX, baseline_pts): for idx, p in zip(BASELINE_IDX, baseline_pts):
static/test_simple.html
+123
View File
@@ -0,0 +1,123 @@
<!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>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; color: #333; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wrap { max-width: 720px; width: 100%; }
h1 { font-size: 20px; margin-bottom: 16px; text-align: center; }
.card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 20px; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
label { font-size: 13px; font-weight: 600; color: #555; }
input[type=file] { padding: 8px; border: 2px dashed #ddd; border-radius: 8px; font-size: 14px; cursor: pointer; }
select { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #fff; }
.btn { padding: 10px 28px; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; background: #2563eb; color: #fff; white-space: nowrap; }
.btn:disabled { background: #93c5fd; cursor: not-allowed; }
.status { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; display: none; }
.status.info { background: #dbeafe; color: #1e40af; display: block; }
.status.error { background: #fee2e2; color: #991b1b; display: block; }
.status.success { background: #d1fae5; color: #065f46; display: block; }
.result { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.result .col { text-align: center; }
.result .col .cap { font-size: 13px; color: #888; margin-bottom: 8px; font-weight: 600; }
.result img { width: 100%; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.12); cursor: zoom-in; display: block; }
.result .empty { color: #bbb; padding: 60px 0; font-size: 14px; grid-column: 1 / -1; text-align: center; }
.hint { font-size: 12px; color: #999; margin-top: 8px; text-align: center; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; padding: 24px; }
.lightbox img { max-width: 100%; max-height: 100%; }
</style>
</head>
<body>
<div class="wrap">
<h1>发际线生发</h1>
<div class="card">
<div class="row">
<div class="field">
<label>选择图片</label>
<input type="file" id="imageFile" accept="image/*">
</div>
<div class="field">
<label>发型</label>
<select id="hairlineId">
<option value="chang_zhixian">直线</option>
<option value="chang_tuoyuan">椭圆</option>
<option value="chang_bolang">波浪</option>
<option value="chang_xinxing">心形</option>
<option value="chang_huaban">花瓣</option>
</select>
</div>
<button class="btn" id="submitBtn" onclick="submit()">生成</button>
</div>
<div class="hint">其余参数走默认值（pushed 遮罩 + multiband 融合）</div>
</div>
<div class="status hidden" id="statusBar"></div>
<div class="card">
<div class="result" id="resultArea">
<div class="empty">上传图片、选发型、点生成</div>
</div>
</div>
</div>
<div class="lightbox" id="lightbox" onclick="this.style.display='none'"><img id="lightboxImg"></div>
<script>
const API = window.location.origin + '/api/v1/hairline/grow_v2';
const TOKEN = 'dev-shared-secret-2026';
function $(id) { return document.getElementById(id); }
function setStatus(text, type) { const b = $('statusBar'); b.textContent = text; b.className = 'status ' + type; }
function zoom(src) { $('lightboxImg').src = src; $('lightbox').style.display = 'flex'; }
async function submit() {
const file = $('imageFile').files[0];
if (!file) { setStatus('请先选择图片', 'error'); return; }
const btn = $('submitBtn');
btn.disabled = true; btn.textContent = '生成中...';
setStatus('正在生成（约 5~15 秒）...', 'info');
// 先读原图用于对比
const origSrc = await new Promise(r => { const fr = new FileReader(); fr.onload = () => r(fr.result); fr.readAsDataURL(file); });
$('resultArea').innerHTML =
'<div class="col"><div class="cap">原图</div><img src="' + origSrc + '"></div>'
+ '<div class="col"><div class="cap">⏳ 生成中...</div><div class="empty" style="padding:40px 0">处理中</div></div>';
const form = new FormData();
form.append('image_file', file);
form.append('hairline_id', $('hairlineId').value);
try {
const resp = await fetch(API, {
method: 'POST',
headers: { 'X-Internal-Token': TOKEN },
body: form,
});
const json = await resp.json();
if (json.code === 0 && json.data && json.data.final_base64) {
const src = json.data.final_base64;
setStatus('✅ 生成成功', 'success');
$('resultArea').innerHTML =
'<div class="col"><div class="cap">原图</div><img src="' + origSrc + '" onclick="zoom(this.src)"></div>'
+ '<div class="col"><div class="cap">生成结果</div><img src="' + src + '" onclick="zoom(this.src)"></div>';
} else {
setStatus('❌ 失败：' + (json.message || '未知错误'), 'error');
$('resultArea').innerHTML = '<div class="empty">生成失败：' + (json.message||'') + '</div>';
}
} catch (err) {
setStatus('❌ 网络错误：' + err.message, 'error');
$('resultArea').innerHTML = '<div class="empty">请求失败</div>';
} finally {
btn.disabled = false; btn.textContent = '生成';
}
}
$('imageFile').addEventListener('change', function() {
if (this.files.length) setStatus('已选择：' + this.files[0].name, 'info');
});
</script>
</body>
</html>