0c60369da0
이건 내가 만든 부채를 갚는 커밋이다. 스코어러에 풀 상한(v2/v3)과 신뢰 출처 제외(v4)를 넣으면서 증거 개수와 점수의 간극이 그 어느 때보다 벌어졌는데, 그 이유가 화면 어디에도 없었다. 운영자가 숫자를 믿지 못하면 그 우선순위는 우선순위가 아니고, 그러면 앞의 두 기능이 오히려 불신을 만든다. ScoreResult.breakdown 을 신설했다. reasons 가 "어떤 증거가 말했는가"라면 breakdown 은 "그래서 몇 점인가"다. 지식DB 지문 매칭 80 웹 게시 (google) 60 원래 125 · 상한 60 웹 엔티티 라벨 20 원래 114 · 상한 20 신뢰 출처 posar.info 3행 제외 합계 115점이 상한 100에 걸렸습니다 — 이 구간의 케이스는 서로 구별되지 않습니다 마지막 줄이 특히 중요하다. 100 에 걸린 케이스들은 서로 구별되지 않으므로 우선순위 판단에 쓸 수 없는데, 지금까지는 그 사실이 숨어 있었다. 자리는 증거 요약과 증거 목록 사이다 - "51개 증거"를 읽은 직후, 목록을 훑기 직전이 바로 그 질문이 생기는 지점이다. 점수는 하나도 바뀌지 않는다. 계산 흐름에 기록만 붙였고 기존 스코어러 테스트 31건이 그대로 통과한다. 가중치·버킷·밴드가 불변이므로 SCORER_VERSION 은 v4 를 유지한다(설명을 추가하는 것은 스탬프 규칙의 대상이 아니다). 분해 합계가 항상 점수와 일치하는지를 테스트로 고정했다. 분해가 점수와 다른 이야기를 하면 그건 분해가 아니라 또 하나의 주장이 된다. 실렌더(Playwright 1440x900): 패널이 의도한 자리에 서고 콘솔 에러 0. 검증: ruff clean, pytest 642 passed (스코어러 5건 + 정적 1건 추가). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BStHFrjQj2VypecSG9ex1V
539 lines
18 KiB
JavaScript
539 lines
18 KiB
JavaScript
// Part 6 of 15 of the operator console app script.
|
|
//
|
|
// Evidence grouping, ordering, and the evidence panel markup.
|
|
//
|
|
// Load order is significant: these are classic (non-module) scripts sharing one
|
|
// global scope, and index.html must keep them in the order listed above/below.
|
|
// Splitting is a pure line-range extraction of the former single app.js.
|
|
|
|
function evidenceGroupDefinitions() {
|
|
return [
|
|
{ id: "watchlist", label: "주의 후보 근거", description: "보류/반려 이력에서 생성된 주의 후보 또는 유사 이미지입니다.", tone: "strong" },
|
|
{ id: "face_web", label: "얼굴 영역 웹 근거", description: "얼굴 영역만으로 찾은 웹 검색 결과입니다. 동일 인물 판정은 아닙니다.", tone: "search" },
|
|
{ id: "full", label: "동일 이미지", description: "원본 이미지 직접 매칭", tone: "strong" },
|
|
{ id: "partial", label: "부분 매칭", description: "일부 영역 또는 파생 이미지 매칭", tone: "strong" },
|
|
{ id: "page", label: "출처 페이지", description: "같은 이미지가 포함된 웹페이지", tone: "strong" },
|
|
{ id: "naver", label: "네이버 검색", description: "텍스트 기반 이미지 검색 결과", tone: "search" },
|
|
{ id: "face", label: "얼굴/인물 감지", description: "동일 인물 판정은 아니며 얼굴 또는 사람 존재만 표시합니다.", tone: "local" },
|
|
{ id: "provenance", label: "출처 표기", description: "파일에 들어 있던 권리 표기와 화면 캡처 신호입니다. 자기신고 정보이며 점수에 반영하지 않습니다.", tone: "local" },
|
|
{ id: "visual", label: "유사 이미지", description: "시각적으로 유사한 참고 결과", tone: "weak" },
|
|
{ id: "weak", label: "약한 라벨", description: "점수에 직접 반영하지 않는 힌트", tone: "weak" },
|
|
{ id: "llm", label: "내부 요약", description: "출처 연결 요약 메모", tone: "note" },
|
|
{ id: "internal", label: "내부 지문", description: "로컬 지문 기반 내부 처리 기록", tone: "local" },
|
|
{ id: "failure", label: "실패/건너뜀", description: "외부 검색 도구 실패 또는 정책상 스킵", tone: "failure" },
|
|
];
|
|
}
|
|
|
|
|
|
function evidenceGroupFor(evidence) {
|
|
|
|
if (evidence.knowledgeEntryStatus === "watchlist") return "watchlist";
|
|
|
|
if (evidence.faceCropSearch) return "face_web";
|
|
|
|
if (evidence.source === "google") {
|
|
|
|
if (evidence.matchType === "full") return "full";
|
|
|
|
if (evidence.matchType === "partial") return "partial";
|
|
|
|
if (evidence.matchType === "page") return "page";
|
|
|
|
if (evidence.matchType === "visual") return "visual";
|
|
|
|
if (evidence.matchType === "weak_label" || evidence.status === "weak") return "weak";
|
|
|
|
return "visual";
|
|
|
|
}
|
|
|
|
if (evidence.source === "naver") return "naver";
|
|
|
|
if (evidence.source === "face") return "face";
|
|
|
|
if (evidence.source === "provenance") return "provenance";
|
|
|
|
if (evidence.source === "llm") return "llm";
|
|
|
|
if (evidence.source === "failure") return "failure";
|
|
|
|
return "internal";
|
|
|
|
}
|
|
|
|
|
|
|
|
function groupedEvidence(evidence) {
|
|
|
|
return evidence.reduce((collection, item) => {
|
|
|
|
const group = evidenceGroupFor(item);
|
|
|
|
if (!collection[group]) collection[group] = [];
|
|
|
|
collection[group].push(item);
|
|
|
|
return collection;
|
|
|
|
}, {});
|
|
|
|
}
|
|
|
|
|
|
|
|
function evidencePriorityScore(evidence) {
|
|
|
|
const groupPriority = {
|
|
|
|
full: 100,
|
|
|
|
watchlist: 95,
|
|
|
|
partial: 85,
|
|
|
|
page: 75,
|
|
|
|
naver: 65,
|
|
|
|
face_web: 58,
|
|
|
|
face: 55,
|
|
|
|
visual: 35,
|
|
|
|
weak: 10,
|
|
|
|
llm: 8,
|
|
|
|
internal: 6,
|
|
|
|
failure: 4,
|
|
|
|
};
|
|
|
|
return (groupPriority[evidenceGroupFor(evidence)] || 0) + Number(evidence.confidence || 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
function sortEvidenceItems(items) {
|
|
|
|
return [...items].sort((left, right) => evidencePriorityScore(right) - evidencePriorityScore(left));
|
|
|
|
}
|
|
|
|
|
|
|
|
function renderRerunDiffSummary(diff) {
|
|
const scoreBefore = Number(diff.scoreBefore || 0);
|
|
const scoreAfter = Number(diff.scoreAfter || 0);
|
|
const delta = scoreAfter - scoreBefore;
|
|
const direction = delta > 0 ? `상승 ${delta}` : delta < 0 ? `하락 ${Math.abs(delta)}` : "변동 없음";
|
|
const removedSummaries = diff.removedSummaries || [];
|
|
const removedBlock = removedSummaries.length
|
|
? `
|
|
<details class="rerun-removed">
|
|
<summary>이번 재분석에서 제거됨 · ${removedSummaries.length}개</summary>
|
|
<ul>
|
|
${removedSummaries
|
|
.map((item) => `<li>${escapeHtml(sourceLabels[item.source] || item.source || "내부")} · ${escapeHtml(formatReason(item.reason || ""))}</li>`)
|
|
.join("")}
|
|
</ul>
|
|
</details>
|
|
`
|
|
: "";
|
|
return `
|
|
<section class="rerun-diff-panel" aria-label="재분석 변경 요약">
|
|
<strong>재분석 ${escapeHtml(diff.at || "")}</strong>
|
|
<span>점수 ${escapeHtml(String(scoreBefore))} → ${escapeHtml(String(scoreAfter))} (${escapeHtml(direction)})</span>
|
|
<span>신규 증거 ${(diff.addedEvidenceIds || []).length}개</span>
|
|
${removedBlock}
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
|
|
function renderEvidenceSummary(submission) {
|
|
const groups = groupedEvidence(submission.evidence);
|
|
const count = (group) => (groups[group] || []).length;
|
|
const directCount = count("full") + count("partial") + count("page");
|
|
const searchCount = directCount + count("naver");
|
|
const primaryJudgment = directCount
|
|
? "직접 매칭 우선 확인"
|
|
: count("visual")
|
|
? "유사 이미지 참고 확인"
|
|
: count("face")
|
|
? "인물 신호만 확인됨"
|
|
: "증거 부족";
|
|
const summaryCards = [
|
|
["동일", count("full")],
|
|
["부분", count("partial")],
|
|
["페이지", count("page")],
|
|
["유사", count("visual")],
|
|
["네이버", count("naver")],
|
|
["인물", count("face")],
|
|
];
|
|
|
|
return `
|
|
<section class="evidence-summary-board" aria-label="판단 요약">
|
|
<div class="summary-lead">
|
|
<span class="risk-badge ${riskClass(submission.riskBand)}">${riskLabels[submission.riskBand]} ${submission.riskScore}</span>
|
|
<div>
|
|
<strong>${escapeHtml(primaryJudgment)}</strong>
|
|
<span>${searchCount}개 검색 근거 · 전체 ${submission.evidence.length}개 증거</span>
|
|
</div>
|
|
</div>
|
|
<div class="summary-stat-grid">
|
|
${summaryCards
|
|
.map(
|
|
([label, value]) => `
|
|
<div class="summary-stat ${value ? "has-signal" : ""}">
|
|
<span>${escapeHtml(label)}</span>
|
|
<strong>${value}</strong>
|
|
</div>
|
|
`,
|
|
)
|
|
.join("")}
|
|
</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
|
|
|
|
function renderEvidenceGroups(submission) {
|
|
if (!submission.evidence.length) {
|
|
return `<div class="empty-state">아직 분석 증거가 없습니다. 외부 검색 도구 상태를 확인하고 증거 재수집을 실행하세요.</div>`;
|
|
}
|
|
|
|
const groups = groupedEvidence(submission.evidence);
|
|
return evidenceGroupDefinitions()
|
|
.filter((group) => groups[group.id]?.length)
|
|
.map((group) => renderEvidenceGroup(group, sortEvidenceItems(groups[group.id])))
|
|
.join("");
|
|
}
|
|
|
|
|
|
function renderEvidenceGroup(group, items) {
|
|
|
|
const topItems = items.slice(0, 3);
|
|
|
|
const detailItems = items.slice(3);
|
|
|
|
return `
|
|
|
|
<section class="evidence-group evidence-group-${escapeHtml(group.tone)}" aria-label="${escapeHtml(group.label)} 증거">
|
|
|
|
<div class="evidence-group-head">
|
|
|
|
<div>
|
|
|
|
<h3>${escapeHtml(group.label)}</h3>
|
|
|
|
<span>${escapeHtml(group.description)}</span>
|
|
|
|
</div>
|
|
|
|
<div class="evidence-group-actions">
|
|
|
|
<strong>${items.length}개</strong>
|
|
|
|
<button class="row-action" type="button" data-evidence-group-status="irrelevant" data-evidence-group="${escapeHtml(group.id)}">전부 무관</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="evidence-card-grid">
|
|
|
|
${topItems.map(renderEvidenceRow).join("")}
|
|
|
|
</div>
|
|
|
|
${
|
|
|
|
detailItems.length
|
|
|
|
? `
|
|
|
|
<details class="evidence-details">
|
|
|
|
<summary>자세히 보기 · ${detailItems.length}개</summary>
|
|
|
|
<div class="evidence-card-grid evidence-card-grid-detail">
|
|
|
|
${detailItems.map(renderEvidenceRow).join("")}
|
|
|
|
</div>
|
|
|
|
</details>
|
|
|
|
`
|
|
|
|
: ""
|
|
|
|
}
|
|
|
|
</section>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
function renderEvidenceRow(evidence) {
|
|
const isNewFromRerun = activeRerunAddedIds.has(evidence.id);
|
|
const newChip = isNewFromRerun ? `<span class="evidence-new-chip">신규</span>` : "";
|
|
const sourceEvidenceIds = evidence.sourceEvidenceIds || [];
|
|
const sourceIds = sourceEvidenceIds.length
|
|
? `근거 ID: ${sourceEvidenceIds.join(", ")}`
|
|
: "근거 ID 없음";
|
|
const contribution = evidence.contributed ? "점수 반영" : "참고";
|
|
const normalizedOperatorStatus = normalizeEvidenceOperatorStatus(evidence.operatorStatus);
|
|
const operatorStatus = normalizedOperatorStatus
|
|
? `<span class="evidence-status-chip">${escapeHtml(formatEvidenceStatus(normalizedOperatorStatus))}</span>`
|
|
: "";
|
|
const confidence = typeof evidence.confidence === "number" ? evidence.confidence.toFixed(2) : evidence.confidence;
|
|
const matchType = evidence.matchType ? `<span>${escapeHtml(formatMatchType(evidence.matchType))}</span>` : "";
|
|
const pageTitle = evidence.pageTitle ? `<span>${escapeHtml(evidence.pageTitle)}</span>` : "";
|
|
const faceCropMeta = evidence.faceCropSearch
|
|
? `<span>얼굴 영역 ${escapeHtml(evidence.cropIndex || "")}</span><span>${escapeHtml(evidence.privacyNote || "동일 인물 판정은 아닙니다")}</span>`
|
|
: "";
|
|
const watchlistMeta =
|
|
evidence.knowledgeEntryStatus === "watchlist"
|
|
? `<span>주의 후보: ${escapeHtml(evidence.knowledgeEntryName || evidence.knowledgeEntryId || "-")}</span><span>원 케이스 ${escapeHtml(evidence.sourceSubmissionId || "-")}</span>`
|
|
: "";
|
|
const providerScore =
|
|
evidence.providerScore !== undefined && evidence.providerScore !== null && evidence.providerScore !== "" ? `<span>검색 도구 점수 ${escapeHtml(evidence.providerScore)}</span>` : "";
|
|
const similarity =
|
|
evidence.similarity !== undefined && evidence.similarity !== ""
|
|
? `<span>이미지 유사도 ${escapeHtml(Number(evidence.similarity).toFixed(2))}</span>`
|
|
: "";
|
|
const queryStrategy = evidence.queryStrategy ? `<span>${escapeHtml(formatQueryStrategy(evidence.queryStrategy))}</span>` : "";
|
|
const searchTypeLabels = { image: "이미지 검색", blog: "블로그 페이지", web: "웹문서 페이지" };
|
|
const searchType = evidence.searchType ? `<span>${escapeHtml(searchTypeLabels[evidence.searchType] || evidence.searchType)}</span>` : "";
|
|
// Where the match is published. Read before the title in a rights review: a
|
|
// copy on the licensor's own site and one on a scraper blog are not the same
|
|
// finding. Kept out of last-child position so the title keeps its wrap rule.
|
|
const hostName = evidenceHost(evidence);
|
|
// The full host goes in the tooltip because the chip is capped at 20ch: two
|
|
// CDN hosts sharing a 20-character prefix are otherwise indistinguishable
|
|
// without opening the link, which is the discrimination the monospace font
|
|
// was chosen for.
|
|
const host = hostName
|
|
? `<span class="host-chip" title="게시 호스트 ${escapeHtml(hostName)}">${escapeHtml(hostName)}</span>`
|
|
: "";
|
|
const hasPreview = Boolean(evidence.thumbnailUrl || evidence.imageUrl);
|
|
const preview = renderEvidencePreview(evidence);
|
|
const link = renderEvidenceLink(evidence);
|
|
const statusButtons = [
|
|
["used_for_judgment", "사용"],
|
|
["ignored", "미사용"],
|
|
]
|
|
.map(
|
|
([status, label]) => `
|
|
<button class="row-action ${normalizedOperatorStatus === status ? "active" : ""}" type="button" data-evidence-status="${status}" data-evidence-id="${escapeHtml(evidence.id)}">
|
|
${label}
|
|
</button>
|
|
`,
|
|
)
|
|
.join("");
|
|
|
|
return `
|
|
<article class="evidence-row ${hasPreview ? "" : "no-preview"} ${isNewFromRerun ? "evidence-row-new" : ""}" data-evidence-id="${escapeHtml(evidence.id)}">
|
|
${preview}
|
|
<div class="evidence-main">
|
|
<div class="evidence-title">
|
|
<span class="source-chip ${sourceClass(evidence.source)}">${escapeHtml(sourceLabels[evidence.source] || evidence.source)}</span>
|
|
${newChip}
|
|
${host}
|
|
<span>${escapeHtml(formatEvidenceTitle(evidence))}</span>
|
|
</div>
|
|
<div class="evidence-meta">
|
|
<span>신뢰도 ${escapeHtml(confidence)}</span>
|
|
<span>${escapeHtml(contribution)}</span>
|
|
${operatorStatus}
|
|
${matchType}
|
|
${faceCropMeta}
|
|
${watchlistMeta}
|
|
${providerScore}
|
|
${similarity}
|
|
${queryStrategy}
|
|
${searchType}
|
|
${pageTitle}
|
|
<span>${escapeHtml(evidence.query || "쿼리 없음")}</span>
|
|
<span>${escapeHtml(formatDomain(evidence.domain))}</span>
|
|
<span>${escapeHtml(evidence.retrievedAt)}</span>
|
|
<span>${escapeHtml(sourceIds)}</span>
|
|
</div>
|
|
${link}
|
|
</div>
|
|
<div class="evidence-actions">
|
|
${statusButtons}
|
|
</div>
|
|
</article>
|
|
`;
|
|
}
|
|
|
|
|
|
function renderEvidencePreview(evidence) {
|
|
|
|
const previewUrl = evidence.thumbnailUrl || evidence.imageUrl;
|
|
|
|
const targetUrl = evidence.imageUrl || evidence.url || previewUrl;
|
|
|
|
if (!previewUrl) return `<div class="evidence-preview evidence-preview-empty" aria-hidden="true"></div>`;
|
|
|
|
return `
|
|
|
|
<a class="evidence-preview" href="${escapeHtml(safeUrl(targetUrl))}" target="_blank" rel="noreferrer" aria-label="검색 이미지 열기">
|
|
|
|
<img src="${escapeHtml(safeUrl(previewUrl))}" alt="" onerror="this.style.display='none'">
|
|
|
|
</a>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
function renderEvidenceLink(evidence) {
|
|
|
|
const url = evidence.url || evidence.imageUrl || "";
|
|
|
|
if (!url) return "";
|
|
|
|
const label = evidence.pageTitle || evidence.url || evidence.imageUrl;
|
|
|
|
return `
|
|
|
|
<a class="evidence-link" href="${escapeHtml(safeUrl(url))}" target="_blank" rel="noreferrer">
|
|
|
|
${escapeHtml(label)}
|
|
|
|
</a>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
function renderEvidenceSearch() {
|
|
const submission = getSelectedCase();
|
|
const queryHistory = document.getElementById("query-history");
|
|
const results = document.getElementById("search-results");
|
|
|
|
if (!submission) {
|
|
document.getElementById("query-case-label").textContent = "-";
|
|
queryHistory.innerHTML = `<div class="empty-state">표시할 케이스가 없습니다.</div>`;
|
|
results.innerHTML = `<div class="empty-state">API 연결 후 검색 근거를 확인할 수 있습니다.</div>`;
|
|
return;
|
|
}
|
|
|
|
document.getElementById("query-case-label").textContent = submission.id;
|
|
queryHistory.innerHTML = submission.queryHistory.length
|
|
? submission.queryHistory
|
|
.map(
|
|
(query) => `
|
|
<article class="query-row">
|
|
<div class="row-title">
|
|
<span class="source-chip ${sourceClass(query.provider)}">${escapeHtml(providerLabels[query.provider] || query.provider)}</span>
|
|
<span>${escapeHtml(query.query)}</span>
|
|
</div>
|
|
<div class="row-meta">
|
|
<span>${escapeHtml(formatQueryStatus(query.status))}</span>
|
|
${query.strategy ? `<span>${escapeHtml(formatQueryStrategy(query.strategy))}</span>` : ""}
|
|
${query.source ? `<span>출처 ${escapeHtml(query.source)}</span>` : ""}
|
|
<span>${escapeHtml(query.timestamp)}</span>
|
|
<span>${query.count}건</span>
|
|
</div>
|
|
<button class="row-action" type="button" data-rerun-query="${escapeHtml(query.query)}" data-rerun-provider="${escapeHtml(query.provider || "")}">쿼리 재실행</button>
|
|
</article>
|
|
`,
|
|
)
|
|
.join("")
|
|
: `<div class="empty-state">아직 실행한 검색 쿼리가 없습니다.</div>`;
|
|
|
|
activeRerunAddedIds = new Set(submission.lastRerunDiff?.addedEvidenceIds || []);
|
|
const searchableEvidence = searchableEvidenceItems(submission);
|
|
results.innerHTML = searchableEvidence.length
|
|
? renderEvidenceGroups({ ...submission, evidence: searchableEvidence })
|
|
: `<div class="empty-state">현재 케이스에는 검색 결과가 없습니다.</div>`;
|
|
}
|
|
|
|
|
|
// 점수 분해. reasons 는 "어떤 증거가 말했는가"를, 이건 "그래서 몇 점인가"를
|
|
// 말한다.
|
|
//
|
|
// 이 패널이 필요해진 것은 스코어러가 풀 상한(v2/v3)과 신뢰 출처 제외(v4)를
|
|
// 갖게 되면서다. 증거 51행이 35점이 되는 이유가 화면 어디에도 없으면 운영자는
|
|
// 숫자를 믿을 수 없고, 믿지 못하는 우선순위는 우선순위가 아니다.
|
|
function setScoreBreakdown(submission) {
|
|
|
|
const box = document.getElementById("score-breakdown");
|
|
|
|
if (!box) return;
|
|
|
|
const breakdown = submission && submission.riskBreakdown;
|
|
|
|
const components = (breakdown && breakdown.components) || [];
|
|
|
|
const excluded = (breakdown && breakdown.excluded) || [];
|
|
|
|
if (!components.length && !excluded.length) {
|
|
|
|
// 이 필드가 생기기 전에 저장된 케이스. 빈 패널보다 없는 편이 낫다.
|
|
box.innerHTML = "";
|
|
|
|
box.hidden = true;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const rows = components
|
|
|
|
.map((item) => {
|
|
|
|
// 풀 상한에 걸린 항목은 원래 몇 점이었는지가 핵심 정보다.
|
|
const capped = item.raw !== undefined && item.raw > item.points
|
|
|
|
? `<span class="muted">원래 ${item.raw} · 상한 ${item.cap}</span>`
|
|
|
|
: "";
|
|
|
|
return `<li><span>${escapeHtml(item.label)}</span><strong>${item.points}</strong>${capped}</li>`;
|
|
|
|
})
|
|
|
|
.join("");
|
|
|
|
const excludedRows = excluded
|
|
|
|
.map((item) => `<li class="score-breakdown-excluded"><span>${escapeHtml(item.label)}</span><strong>${item.rows}행 제외</strong></li>`)
|
|
|
|
.join("");
|
|
|
|
const clamped = breakdown.clamped
|
|
|
|
? `<p class="score-breakdown-clamped">합계 ${breakdown.total}점이 상한 100에 걸렸습니다 — 이 구간의 케이스는 서로 구별되지 않습니다.</p>`
|
|
|
|
: "";
|
|
|
|
box.innerHTML = `
|
|
|
|
<h4>점수 구성 <strong>${breakdown.final}</strong></h4>
|
|
|
|
<ul>${rows}${excludedRows}</ul>
|
|
|
|
${clamped}
|
|
|
|
`;
|
|
|
|
box.hidden = false;
|
|
|
|
}
|