Spaces:

jonghhhh
/

deliberation_coach

Sleeping

App Files Files Community

deliberation_coach / admin.html

jonghhhh

deploy: AI 숙의코치

445616d verified 23 days ago

Raw

History Blame Contribute Delete

12.8 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>AI 숙의코치 — 관리자</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
	<style>
	:root{
	--ink:#1d2433; --muted:#5b6472; --paper:#f5f6f8; --card:#fff; --line:#e3e6ea;
	--accent:#2f7d78; --danger:#b5832c; --radius:12px;
	}
	*{box-sizing:border-box}
	html,body{margin:0;background:var(--paper);color:var(--ink);
	font-family:Pretendard,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55;}
	.wrap{max-width:1100px;margin:0 auto;padding:18px 18px 80px;}
	h1{font-size:20px;margin:6px 0 2px;}
	h2{font-size:15px;margin:0 0 10px;color:var(--muted);font-weight:600;}
	.sub{color:var(--muted);font-size:13px;margin:0 0 18px;}
	.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
	padding:16px 18px;margin-bottom:16px;}
	.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
	label{font-size:13px;color:var(--muted);display:block;margin:8px 0 3px;}
	input[type=text],input[type=password]{width:100%;padding:9px 11px;border:1px solid var(--line);
	border-radius:9px;font:inherit;background:#fff;}
	.btn{border:0;background:var(--accent);color:#fff;padding:9px 14px;border-radius:9px;
	font:inherit;cursor:pointer;font-weight:600;}
	.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);}
	.btn:disabled{opacity:.5;cursor:default;}
	.btn.small{padding:5px 10px;font-size:13px;}
	table{width:100%;border-collapse:collapse;font-size:13.5px;}
	th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
	th{color:var(--muted);font-weight:600;cursor:pointer;user-select:none;}
	tbody tr{cursor:pointer;}
	tbody tr:hover{background:#f0f4f4;}
	.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;border:1px solid var(--line);}
	.pill.completed{background:#e6f0ef;color:#1f5d58;border-color:#cfe3e1;}
	.pill.aborted{background:#f7e7e7;color:#9a3b3b;border-color:#eccaca;}
	.pill.in_progress{background:#eef0f3;color:#5b6472;}
	.muted{color:var(--muted);}
	.err{color:#9a3b3b;font-size:13px;margin-top:8px;}
	.ok{color:#1f5d58;font-size:13px;margin-top:8px;}
	.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
	@media(max-width:640px){.grid2{grid-template-columns:1fr;}}
	/* 상세 모달 */
	.modal-bg{position:fixed;inset:0;background:rgba(20,24,34,.45);display:flex;
	align-items:flex-start;justify-content:center;padding:24px;overflow:auto;z-index:50;}
	.modal{background:#fff;border-radius:var(--radius);max-width:820px;width:100%;padding:20px 22px;}
	.kv{display:grid;grid-template-columns:140px 1fr;gap:4px 12px;font-size:13.5px;margin-bottom:14px;}
	.kv div:nth-child(odd){color:var(--muted);}
	.turn{border-left:3px solid var(--line);padding:4px 0 4px 10px;margin:6px 0;font-size:13.5px;}
	.turn.ai{border-color:var(--accent);}
	.turn.participant{border-color:var(--danger);}
	.turn .who{font-size:12px;color:var(--muted);}
	pre{background:#f5f6f8;border:1px solid var(--line);border-radius:9px;padding:10px;
	overflow:auto;font-size:12.5px;max-height:280px;}
	.sec{font-weight:600;margin:14px 0 6px;font-size:14px;}
	</style>
	</head>
	<body>
	<div class="wrap">
	<h1>AI 숙의코치 — 관리자</h1>
	<p class="sub">응답자 현황 · 응답 데이터 확인/다운로드 · 운영 설정 관리</p>

	<!-- 로그인 -->
	<div class="card" id="loginCard">
	<h2>관리자 토큰</h2>
	<div class="row" style="align-items:flex-end;">
	<div style="flex:1;min-width:220px;">
	<label>ADMIN_TOKEN (.env 에 설정한 값)</label>
	<input type="password" id="tokenInput" placeholder="토큰 입력" />
	</div>
	<button class="btn" id="loginBtn">접속</button>
	</div>
	<div class="err" id="loginErr"></div>
	</div>

	<!-- 메인(로그인 후) -->
	<div id="main" style="display:none;">
	<!-- 설정 -->
	<div class="card">
	<h2>운영 설정</h2>
	<div class="grid2">
	<div>
	<label>MODEL (Gemini 모델명)</label>
	<input type="text" id="model" />
	</div>
	<div>
	<label>RETURN_URL (종료 후 복귀 URL · 비우면 완료화면만)</label>
	<input type="text" id="returnUrl" />
	</div>
	</div>
	<div class="row" style="margin-top:12px;">
	<button class="btn" id="saveSettings">설정 저장</button>
	<span class="muted" id="keyStatus"></span>
	</div>
	<div class="ok" id="settingsMsg"></div>
	</div>

	<!-- 현황 -->
	<div class="card">
	<div class="row" style="justify-content:space-between;">
	<h2 style="margin:0;">응답자 현황 (<span id="count">0</span>명)</h2>
	<div class="row">
	<button class="btn ghost small" id="refresh">새로고침</button>
	<button class="btn small" id="dlCsv">요약 CSV 다운로드</button>
	</div>
	</div>
	<div style="overflow:auto;margin-top:12px;">
	<table id="tbl">
	<thead><tr>
	<th data-k="pid">pid</th>
	<th data-k="completion">상태</th>
	<th data-k="criteria_done">기준완료</th>
	<th data-k="final_choice">최종선택</th>
	<th data-k="confidence">확신도</th>
	<th data-k="turns">대화수</th>
	<th data-k="duration_sec">소요(초)</th>
	<th data-k="saved_at">저장시각</th>
	<th>다운로드</th>
	</tr></thead>
	<tbody id="tbody"></tbody>
	</table>
	</div>
	<div class="err" id="listErr"></div>
	</div>
	</div>
	</div>

	<div id="modalRoot"></div>

	<script>
	const $ = (id) => document.getElementById(id);
	let TOKEN = "";
	let ROWS = [];
	let sortKey = "saved_at", sortDir = -1;

	const esc = (s) => String(s == null ? "" : s)
	.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");

	async function api(path, opts = {}) {
	const headers = Object.assign({ "X-Admin-Token": TOKEN }, opts.headers \|\| {});
	const r = await fetch(path, Object.assign({}, opts, { headers }));
	if (!r.ok) {
	let msg = "HTTP " + r.status;
	try { const j = await r.json(); if (j.detail) msg = j.detail; } catch (e) {}
	throw new Error(msg);
	}
	return r;
	}

	async function login() {
	TOKEN = $("tokenInput").value.trim();
	$("loginErr").textContent = "";
	if (!TOKEN) { $("loginErr").textContent = "토큰을 입력하세요."; return; }
	try {
	const s = await (await api("/api/admin/settings")).json();
	sessionStorage.setItem("admin_token", TOKEN);
	$("loginCard").style.display = "none";
	$("main").style.display = "block";
	fillSettings(s);
	await loadList();
	} catch (e) {
	$("loginErr").textContent = "접속 실패: " + e.message;
	}
	}

	function fillSettings(s) {
	$("model").value = s.model \|\| "";
	$("returnUrl").value = s.return_url \|\| "";
	$("keyStatus").textContent =
	(s.gemini_key_set ? "✓ GEMINI_API_KEY 설정됨" : "⚠ GEMINI_API_KEY 없음(폴백 동작)")
	+ " · 저장폴더: " + (s.data_dir \|\| "");
	}

	async function saveSettings() {
	$("settingsMsg").textContent = "";
	try {
	const body = { model: $("model").value.trim(), return_url: $("returnUrl").value.trim() };
	await api("/api/admin/settings", {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify(body),
	});
	$("settingsMsg").textContent = "저장되었습니다.";
	setTimeout(() => ($("settingsMsg").textContent = ""), 2500);
	} catch (e) {
	$("settingsMsg").textContent = "";
	$("settingsMsg").className = "err";
	$("settingsMsg").textContent = "저장 실패: " + e.message;
	}
	}

	async function loadList() {
	$("listErr").textContent = "";
	try {
	const j = await (await api("/api/admin/list")).json();
	ROWS = j.rows \|\| [];
	$("count").textContent = j.count \|\| 0;
	renderTable();
	} catch (e) {
	$("listErr").textContent = "목록 로드 실패: " + e.message;
	}
	}

	function renderTable() {
	const rows = ROWS.slice().sort((a, b) => {
	const x = a[sortKey], y = b[sortKey];
	if (x === y) return 0;
	return (x > y ? 1 : -1) * sortDir;
	});
	const tb = $("tbody");
	tb.innerHTML = "";
	for (const r of rows) {
	const tr = document.createElement("tr");
	const st = esc(r.completion \|\| "in_progress");
	tr.innerHTML =
	`<td>${esc(r.pid)}</td>` +
	`<td><span class="pill ${st}">${st}</span></td>` +
	`<td>${r.criteria_done}/${r.criteria_total}</td>` +
	`<td>${esc(r.final_choice)}</td>` +
	`<td>${esc(r.confidence)}</td>` +
	`<td>${r.turns}</td>` +
	`<td>${r.duration_sec}</td>` +
	`<td class="muted">${esc(r.saved_at)}</td>` +
	`<td><button class="btn ghost small" data-dl="${esc(r.pid)}">JSON</button></td>`;
	tr.addEventListener("click", (ev) => {
	if (ev.target.dataset.dl) return; // 다운로드 버튼은 행 클릭과 분리
	showDetail(r.pid);
	});
	tb.appendChild(tr);
	}
	tb.querySelectorAll("[data-dl]").forEach((b) =>
	b.addEventListener("click", () => downloadPid(b.dataset.dl)));
	}

	function downloadPid(pid) {
	// 토큰을 쿼리로 실어 새 탭에서 받기(헤더를 못 쓰는 직접 다운로드용)
	const url = "/api/admin/download/" + encodeURIComponent(pid) + "?token=" + encodeURIComponent(TOKEN);
	window.open(url, "_blank");
	}

	function downloadCsv() {
	window.open("/api/admin/summary.csv?token=" + encodeURIComponent(TOKEN), "_blank");
	}

	async function showDetail(pid) {
	let rec;
	try {
	rec = await (await api("/api/admin/record/" + encodeURIComponent(pid))).json();
	} catch (e) { alert("상세 로드 실패: " + e.message); return; }

	const sess = rec.session \|\| {}, out = rec.output \|\| {};
	const crit = (rec.criteria \|\| []).map((c) =>
	`<tr><td>${esc(c.name)}</td><td>${esc(c.judgment_initial)}</td>` +
	`<td>${esc(c.judgment_final)}</td><td>${esc(c.reason)}</td><td>${esc(c.weighing)}</td></tr>`
	).join("");
	const turns = (rec.transcript \|\| []).map((t) =>
	`<div class="turn ${esc(t.role)}"><div class="who">#${t.turn} · ${esc(t.role)}` +
	`${t.criterion ? " · " + esc(t.criterion) : ""} · ${esc(t.ts)}</div>${esc(t.text)}</div>`
	).join("");

	$("modalRoot").innerHTML =
	`<div class="modal-bg" id="mbg"><div class="modal">
	<div class="row" style="justify-content:space-between;">
	<h2 style="margin:0;">응답자 상세 — ${esc(rec.pid)}</h2>
	<div class="row">
	<button class="btn ghost small" id="mDl">JSON 다운로드</button>
	<button class="btn small" id="mClose">닫기</button>
	</div>
	</div>
	<div class="kv" style="margin-top:14px;">
	<div>상태</div><div>${esc(sess.completion)}</div>
	<div>시작</div><div>${esc(sess.started_at)}</div>
	<div>종료</div><div>${esc(sess.ended_at)}</div>
	<div>소요(초)</div><div>${esc(sess.duration_sec)}</div>
	<div>최종선택</div><div>${esc(out.final_choice)} (확신도 ${esc(out.confidence)})</div>
	</div>
	<div class="sec">기준별 판단</div>
	<table><thead><tr><th>기준</th><th>초기</th><th>재평가</th><th>이유</th><th>저울질</th></tr></thead>
	<tbody>${crit \|\| '<tr><td colspan="5" class="muted">없음</td></tr>'}</tbody></table>
	<div class="sec">대화 메시지 (${(rec.transcript \|\| []).length}턴)</div>
	<div>${turns \|\| '<span class="muted">없음</span>'}</div>
	<div class="sec">전체 원본 JSON</div>
	<pre>${esc(JSON.stringify(rec, null, 2))}</pre>
	</div></div>`;
	$("mClose").addEventListener("click", () => ($("modalRoot").innerHTML = ""));
	$("mbg").addEventListener("click", (e) => { if (e.target.id === "mbg") $("modalRoot").innerHTML = ""; });
	$("mDl").addEventListener("click", () => downloadPid(rec.pid));
	}

	// 이벤트 바인딩
	$("loginBtn").addEventListener("click", login);
	$("tokenInput").addEventListener("keydown", (e) => { if (e.key === "Enter") login(); });
	$("saveSettings").addEventListener("click", saveSettings);
	$("refresh").addEventListener("click", loadList);
	$("dlCsv").addEventListener("click", downloadCsv);
	document.querySelectorAll("th[data-k]").forEach((th) =>
	th.addEventListener("click", () => {
	const k = th.dataset.k;
	if (sortKey === k) sortDir *= -1; else { sortKey = k; sortDir = 1; }
	renderTable();
	}));

	// 세션에 저장된 토큰이 있으면 자동 로그인 시도
	(function () {
	const t = sessionStorage.getItem("admin_token");
	if (t) { $("tokenInput").value = t; login(); }
	})();
	</script>
	</body>
	</html>