fc4e04f65c
단일 파일이 프로젝트 상한(800줄)의 6.8배였다. 분할은 순수 라인범위 추출이며 어떤 구문도 수정·재배치·재포맷하지 않았다 — 15개 파트의 연결 결과가 원본 app.js 와 바이트 단위로 동일함을 확인하고 나눴다(125,689B). 클래식 스크립트(모듈 아님)라 하나의 전역 스코프를 공유하므로 로드 순서가 곧 계약이다. 원본에서 로드 시점에 실행되는 최상위 구문은 파일 끝의 리스너 등록 2개뿐이었고(DOMContentLoaded/hashchange), 나머지 참조는 전부 함수 본문 안이라 순서만 지키면 의미가 보존된다. 그 순서를 index.html 에 명시하고 테스트로 고정: - test_index_loads_every_app_part_exactly_once_in_declared_order 각 파트가 정확히 1회, 선언 순서대로 로드되는지 + 디스크의 app-*.js 가 전부 배선됐는지 + 구 app.js 가 남아있지 않은지 - test_app_parts_stay_within_the_file_size_budget (800줄 상한) 정적 스펙 31곳은 app.js 본문을 문자열로 검사하고 있었다. 이 스펙들의 관심사는 '어느 파일에 있는가'가 아니라 '콘솔에 그 동작이 있는가'이므로, 파트를 로드 순서대로 이어붙여 읽는 _read_app() 으로 바꿨다. 검증: Playwright E2E 6건이 실브라우저에서 통과(콘솔 에러 0 단언 포함). 운영 콘솔 실렌더 확인 — 큐/케이스 심사 정상, 스크립트 15개 전부 200, 새로고침 후 콘솔 메시지 0건.
449 lines
15 KiB
JavaScript
449 lines
15 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>
|
|
|
|
<strong>${items.length}개</strong>
|
|
|
|
</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>` : "";
|
|
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}
|
|
<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>`;
|
|
}
|
|
|