Spaces:

youngryong
/

intentfinder-api

Running

App Files Files Community

intentfinder-api / dashboard.html

youngryong

deploy: IntentFinder API (HF Docker Space)

21bdc64 about 1 month ago

Raw

History Blame Contribute Delete

25.9 kB

	<!-- 검색 인텐트 분석 대시보드 — 백엔드 /analyze에 연동되는 React 단일 파일 앱 -->
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>IntentFinder — 검색 인텐트 분석</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&display=swap');
	body { font-family: 'Pretendard', sans-serif; background-color: #f8fafc; }
	</style>
	</head>
	<body class="text-slate-800 antialiased min-h-screen">
	<div id="root"></div>

	<script type="text/babel-app" id="app">
	const { useState, useRef, useEffect } = React;
	const API = "http://127.0.0.1:8000";

	// 의도 코드 → 한글 라벨·색상 매핑
	const INTENT = {
	info: { label: "정보 탐색형", color: "#0ca5e9" },
	transactional: { label: "구매/거래형", color: "#f43f5e" },
	navigational: { label: "브랜드/내비형", color: "#4f46e5" },
	mixed: { label: "혼합형", color: "#f59e0b" },
	};
	const INTENT_BADGE = {
	info: "bg-blue-50 text-blue-600 border-blue-100",
	transactional: "bg-rose-50 text-rose-600 border-rose-100",
	navigational: "bg-indigo-50 text-indigo-600 border-indigo-100",
	mixed: "bg-amber-50 text-amber-600 border-amber-100",
	};
	const fmt = (n) => (n ?? 0).toLocaleString();

	// 검색량 비중 도넛 (의도 분류 결과)
	function IntentDonut({ breakdown }) {
	const ref = useRef(null);
	const chart = useRef(null);
	const entries = Object.entries(breakdown \|\| {});
	useEffect(() => {
	if (chart.current) chart.current.destroy();
	if (!entries.length) return;
	chart.current = new Chart(ref.current.getContext("2d"), {
	type: "doughnut",
	data: {
	labels: entries.map(([k]) => (INTENT[k]?.label \|\| k)),
	datasets: [{
	data: entries.map(([, v]) => v),
	backgroundColor: entries.map(([k]) => (INTENT[k]?.color \|\| "#94a3b8")),
	borderWidth: 2, borderColor: "#fff", hoverOffset: 6,
	}],
	},
	options: {
	responsive: true, maintainAspectRatio: false, cutout: "65%",
	plugins: {
	legend: { position: "bottom", labels: { boxWidth: 12, font: { size: 11, family: "Pretendard" }, padding: 14 } },
	tooltip: { callbacks: { label: (c) => {
	const tot = c.dataset.data.reduce((a, b) => a + b, 0);
	return ` ${c.label}: ${(c.raw / tot * 100).toFixed(1)}%`;
	} } },
	},
	},
	});
	return () => chart.current && chart.current.destroy();
	}, [JSON.stringify(breakdown)]);

	if (!entries.length) {
	return (
	<div className="flex-1 flex flex-col items-center justify-center text-center text-slate-400 text-sm gap-2">
	<i className="fa-solid fa-hourglass-half text-2xl"></i>
	<p>의도 분류 대기 중<br/><span className="text-xs">(Anthropic 크레딧 충전 후 표시)</span></p>
	</div>
	);
	}
	return <div className="flex-1 relative flex items-center justify-center"><canvas ref={ref} className="max-h-[250px]"></canvas></div>;
	}

	// 핵심 요약 카드
	function Card({ title, value, unit, sub, subColor, icon, iconBg }) {
	return (
	<div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
	<div className="space-y-1">
	<p className="text-xs font-medium text-slate-400 uppercase tracking-wider">{title}</p>
	<p className="text-2xl font-bold text-slate-900">{value} <span className="text-sm font-normal text-slate-500">{unit}</span></p>
	<p className={"text-xs font-medium flex items-center gap-1 " + subColor}>{sub}</p>
	</div>
	<div className={"p-3.5 rounded-xl " + iconBg}><i className={"text-2xl " + icon}></i></div>
	</div>
	);
	}

	// 성별×연령 추정 비중 막대그래프 (데이터랩)
	function Demographics({ data }) {
	const ref = useRef(null), chart = useRef(null);
	const AGES = ["20대 이하", "30대", "40대", "50대 이상"];
	useEffect(() => {
	if (chart.current) chart.current.destroy();
	if (!data \|\| !data.cells \|\| !data.cells.length) return;
	const pick = (g) => AGES.map((a) => {
	const c = data.cells.find((x) => x.gender === g && x.age === a);
	return c ? c.pct : 0;
	});
	chart.current = new Chart(ref.current.getContext("2d"), {
	type: "bar",
	data: {
	labels: AGES,
	datasets: [
	{ label: "남성", data: pick("남성"), backgroundColor: "#3b82f6", borderRadius: 6 },
	{ label: "여성", data: pick("여성"), backgroundColor: "#ec4899", borderRadius: 6 },
	],
	},
	options: {
	responsive: true, maintainAspectRatio: false,
	scales: {
	x: { grid: { display: false }, ticks: { font: { size: 11, family: "Pretendard" } } },
	y: { grid: { color: "#f1f5f9" }, beginAtZero: true, ticks: { font: { size: 10 }, callback: (v) => v + "%" } },
	},
	plugins: { legend: { position: "bottom", labels: { boxWidth: 12, font: { size: 11, family: "Pretendard" }, padding: 14 } } },
	},
	});
	return () => chart.current && chart.current.destroy();
	}, [JSON.stringify(data)]);

	if (!data \|\| !data.cells \|\| !data.cells.length) {
	return (
	<div className="flex-1 flex flex-col items-center justify-center text-center text-slate-400 text-sm gap-2">
	<i className="fa-solid fa-database text-2xl"></i>
	<p>데이터랩 키 설정 후 표시<br/><span className="text-xs">(NAVER_CLIENT_ID / SECRET)</span></p>
	</div>
	);
	}
	return (
	<div className="flex-1 flex flex-col">
	<div className="flex-1 relative"><canvas ref={ref}></canvas></div>
	<p className="text-[10px] text-slate-400 text-center mt-1">앵커("{data.anchor}") 정규화 기반 추정 비중 · 절대 비교 아님</p>
	</div>
	);
	}

	// 추정 연관 경로 (시드 중심 트리) SVG 시각화
	function SearchPath({ data }) {
	if (!data \|\| !data.nodes \|\| data.nodes.length < 2)
	return <div className="text-sm text-slate-400 text-center py-8">연관 경로를 만들 데이터가 부족합니다.</div>;
	const { nodes, edges } = data;
	const COL_W = 210, ROW_H = 62, NODE_W = 168, NODE_H = 44, PAD = 18;
	const byDepth = {};
	nodes.forEach((n) => { (byDepth[n.depth] = byDepth[n.depth] \|\| []).push(n); });
	const depths = Object.keys(byDepth).map(Number).sort((a, b) => a - b);
	const pos = {}; let maxCol = 0;
	depths.forEach((d) => {
	byDepth[d].forEach((n, j) => { pos[n.id] = { x: PAD + d * COL_W, y: PAD + j * ROW_H }; });
	maxCol = Math.max(maxCol, byDepth[d].length);
	});
	const maxDepth = depths[depths.length - 1];
	const W = PAD * 2 + maxDepth * COL_W + NODE_W;
	const H = PAD * 2 + (maxCol - 1) * ROW_H + NODE_H;
	const trunc = (s) => (s.length > 11 ? s.slice(0, 11) + "…" : s);
	return (
	<div className="overflow-x-auto">
	<svg width={W} height={H} style={{ minWidth: "100%" }}>
	{edges.map((e, i) => {
	const p = pos[e.source], c = pos[e.target];
	const x1 = p.x + NODE_W, y1 = p.y + NODE_H / 2, x2 = c.x, y2 = c.y + NODE_H / 2;
	const mx = (x1 + x2) / 2;
	return (
	<g key={i}>
	<path d={`M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`} fill="none" stroke="#cbd5e1" strokeWidth="1.5" />
	{e.relation != null && <text x={mx} y={(y1 + y2) / 2 - 4} textAnchor="middle" fontSize="10" fill="#94a3b8">{Math.round(e.relation * 100)}%</text>}
	</g>
	);
	})}
	{nodes.map((n) => {
	const p = pos[n.id], seed = n.depth === 0;
	return (
	<g key={n.id} transform={`translate(${p.x},${p.y})`}>
	<rect width={NODE_W} height={NODE_H} rx="9" fill={seed ? "#eef2ff" : "#fff"} stroke={seed ? "#6366f1" : "#e2e8f0"} strokeWidth={seed ? "2" : "1"} />
	<text x="12" y="19" fontSize="12" fontWeight="700" fontFamily="Pretendard" fill={seed ? "#3730a3" : "#0f172a"}>{trunc(n.keyword)}</text>
	<text x="12" y="34" fontSize="10" fontFamily="Pretendard" fill={seed ? "#6366f1" : "#94a3b8"}>{n.volume != null ? "월 " + fmt(n.volume) : ""}</text>
	</g>
	);
	})}
	</svg>
	</div>
	);
	}

	function App() {
	const [keyword, setKeyword] = useState("캠핑용품");
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState(null);
	const [data, setData] = useState(null);

	const run = async () => {
	const kw = keyword.trim();
	if (!kw) return;
	setLoading(true); setError(null);
	try {
	const res = await fetch(`${API}/analyze?keyword=${encodeURIComponent(kw)}`);
	if (!res.ok) throw new Error((await res.json()).detail \|\| res.statusText);
	setData(await res.json());
	} catch (e) {
	setError(e.message.includes("Failed to fetch")
	? "백엔드(127.0.0.1:8000)에 연결할 수 없습니다. 서버가 켜져 있는지 확인하세요."
	: e.message);
	setData(null);
	} finally { setLoading(false); }
	};

	const comp = data?.competition_breakdown \|\| {};
	const compTotal = Object.values(comp).reduce((a, b) => a + b, 0) \|\| 1;
	const highPct = Math.round((comp["높음"] \|\| 0) / compTotal * 100);

	return (
	<div className="min-h-screen flex flex-col">
	{/* 헤더 + 검색 */}
	<header className="bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm px-6 py-4">
	<div className="max-w-7xl mx-auto flex flex-col md:flex-row md:items-center md:justify-between gap-4">
	<div className="flex items-center gap-3">
	<div className="bg-indigo-600 text-white p-2 rounded-lg shadow-md shadow-indigo-100"><i className="fa-solid fa-magnifying-glass-chart text-xl px-0.5"></i></div>
	<div>
	<h1 className="text-xl font-bold text-slate-900 tracking-tight">IntentFinder <span className="text-xs bg-indigo-50 text-indigo-600 font-semibold px-2 py-0.5 rounded ml-2 border border-indigo-100">SMB MVP</span></h1>
	<p className="text-xs text-slate-500">키워드 입력 → 네이버 실시간 분석 + AI 클러스터링</p>
	</div>
	</div>
	<div className="flex flex-wrap items-center gap-3 bg-slate-50 p-1.5 rounded-xl border border-slate-200 w-full md:w-auto">
	<div className="relative flex-1 md:w-64">
	<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400"><i className="fa-solid fa-magnifying-glass text-sm"></i></span>
	<input value={keyword} onChange={(e) => setKeyword(e.target.value)} onKeyDown={(e) => e.key === "Enter" && run()}
	className="w-full bg-white border border-slate-200 rounded-lg pl-9 pr-4 py-2 text-sm font-medium focus:outline-none focus:border-indigo-500 text-slate-900" placeholder="시드 키워드 입력..." />
	</div>
	<button onClick={run} disabled={loading}
	className="bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white font-medium text-sm px-4 py-2 rounded-lg transition shadow-sm flex items-center gap-2 shrink-0">
	<i className={"text-xs fa-solid " + (loading ? "fa-spinner fa-spin" : "fa-bolt")}></i> {loading ? "분석 중" : "분석 실행"}
	</button>
	</div>
	</div>
	</header>

	<main className="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 space-y-6">
	{error && (
	<div className="bg-rose-50 border border-rose-200 text-rose-700 px-4 py-3 rounded-xl text-sm flex items-center gap-2">
	<i className="fa-solid fa-circle-exclamation"></i> {error}
	</div>
	)}

	{!data && !error && (
	<div className="bg-white border border-dashed border-slate-200 rounded-xl p-12 text-center text-slate-400">
	<i className="fa-solid fa-keyboard text-3xl mb-3"></i>
	<p className="text-sm">키워드를 입력하고 <b>분석 실행</b>을 누르세요.</p>
	</div>
	)}

	{data && (
	<>
	{/* 메타 바 */}
	<div className="bg-white p-3 px-4 rounded-xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-3 text-xs text-slate-500">
	<div className="flex flex-wrap items-center gap-2">
	<span className="font-semibold text-slate-700">"{data.keyword}"</span>
	<span className="bg-slate-100 px-2 py-0.5 rounded-full border border-slate-200">원본 {fmt(data.raw_keyword_count)}개 → 관련 {fmt(data.keyword_count)}개</span>
	<span className="bg-slate-100 px-2 py-0.5 rounded-full border border-slate-200">무관어 {fmt(data.filtered_out)}개 제거</span>
	</div>
	<span className="flex items-center gap-1.5">
	<span className={"inline-block w-2 h-2 rounded-full " + (data.cached ? "bg-amber-400" : "bg-emerald-500")}></span>
	{data.cached ? "캐시 결과" : "실시간 조회"}
	</span>
	</div>

	{/* 카드 3개 */}
	<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
	<Card title="총 검색량 (관련 키워드)" value={fmt(data.total_search_volume)} unit="건"
	sub={<><i className="fa-solid fa-chart-simple"></i> 키워드당 중앙값 {fmt(data.median_volume_per_keyword)}건</>}
	subColor="text-slate-500" icon="fa-solid fa-chart-line text-indigo-600" iconBg="bg-indigo-50" />
	<Card title="경쟁 강도 (높음 비중)" value={highPct} unit="%"
	sub={<><i className="fa-solid fa-layer-group"></i> 높 {fmt(comp["높음"])} · 중 {fmt(comp["중간"])} · 낮 {fmt(comp["낮음"])}</>}
	subColor="text-amber-600" icon="fa-solid fa-gauge-high text-amber-600" iconBg="bg-amber-50" />
	<Card title="AI 인텐트 그룹" value={fmt(data.cluster_count)} unit="개 클러스터"
	sub={<><i className="fa-solid fa-wand-magic-sparkles"></i> {fmt(data.clustered_keyword_count)}개 키워드 군집화</>}
	subColor="text-emerald-600" icon="fa-solid fa-brain text-emerald-600" iconBg="bg-emerald-50" />
	</div>

	{/* 도넛 + 인구통계 자리 */}
	<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
	<div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col h-[360px]">
	<h2 className="text-sm font-bold text-slate-900 flex items-center gap-2 mb-4"><i className="fa-solid fa-chart-pie text-indigo-500"></i> 검색 의도 비중 (검색량 가중)</h2>
	<IntentDonut breakdown={data.intent_breakdown} />
	</div>
	<div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col h-[360px]">
	<h2 className="text-sm font-bold text-slate-900 flex items-center gap-2 mb-4"><i className="fa-solid fa-users text-indigo-500"></i> 핵심 타깃 인구통계 (추정)</h2>
	<Demographics data={data.demographics} />
	</div>
	</div>

	{/* 클러스터 테이블 */}
	<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
	<div className="p-5 border-b border-slate-200 bg-slate-50">
	<h2 className="text-sm font-bold text-slate-900 flex items-center gap-2"><i className="fa-solid fa-layer-group text-indigo-500"></i> 의미 기반 키워드 클러스터링 결과</h2>
	<p className="text-xs text-slate-500 mt-0.5">S-BERT 임베딩 → UMAP → HDBSCAN 군집화 (노이즈 -1 제외)</p>
	</div>
	<div className="overflow-x-auto">
	<table className="w-full text-left text-sm">
	<thead>
	<tr className="bg-slate-100/70 border-b border-slate-200 text-slate-600 font-semibold text-xs uppercase tracking-wider">
	<th className="p-4 pl-6">인텐트 그룹명</th>
	<th className="p-4">주요 포함 키워드</th>
	<th className="p-4 text-right">그룹 검색량</th>
	<th className="p-4 text-center">대표 의도</th>
	</tr>
	</thead>
	<tbody className="divide-y divide-slate-200 text-slate-700">
	{data.clusters.map((c) => (
	<tr key={c.cluster_id} className="hover:bg-slate-50/80 transition-colors">
	<td className="p-4 pl-6 font-semibold text-indigo-600 flex items-center gap-2"><span className="w-2 h-2 rounded-full bg-indigo-500"></span>{c.theme \|\| c.cluster_label}</td>
	<td className="p-4 text-slate-600 font-medium max-w-xs md:max-w-md truncate">{c.top_keywords.join(", ")}</td>
	<td className="p-4 text-right font-mono font-bold text-slate-900">{fmt(c.total_search_volume)}</td>
	<td className="p-4 text-center">
	{c.intent
	? <span className={"text-xs font-semibold px-2 py-0.5 rounded border " + (INTENT_BADGE[c.intent] \|\| "")}>{c.intent_label}</span>
	: <span className="text-xs text-slate-300">—</span>}
	</td>
	</tr>
	))}
	</tbody>
	</table>
	</div>
	</div>

	{/* 추정 연관 검색 경로 */}
	<div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-3">
	<div>
	<h2 className="text-sm font-bold text-slate-900 flex items-center gap-2"><i className="fa-solid fa-diagram-project text-indigo-500"></i> 연관 검색 경로
	<span className={"text-[10px] font-medium px-2 py-0.5 rounded-full border " + (data.search_path?.source === "autocomplete" ? "bg-emerald-50 text-emerald-600 border-emerald-100" : "bg-slate-100 text-slate-500 border-slate-200")}>
	{data.search_path?.source === "autocomplete" ? "네이버 자동완성" : "임베딩 추정"}
	</span>
	</h2>
	<p className="text-xs text-slate-500">{data.search_path?.source === "autocomplete" ? "네이버 자동완성 기반 — 실제 함께 검색되는 키워드 연결망" : "의미 유사도 기반 추정 연결망 (자동완성 데이터 부족 시 대체)"}</p>
	</div>
	<div className="bg-slate-50 border border-dashed border-slate-200 rounded-xl p-4">
	<SearchPath data={data.search_path} />
	</div>
	</div>

	{/* AI 마케팅 액션 제안 */}
	{data.marketing_suggestion && (
	<div className="bg-indigo-50/60 border border-indigo-100 rounded-xl p-4 text-sm text-indigo-900 flex gap-3">
	<i className="fa-solid fa-lightbulb text-indigo-500 mt-0.5"></i>
	<p><strong className="font-semibold">SMB 마케팅 액션 제안:</strong> {data.marketing_suggestion}</p>
	</div>
	)}
	</>
	)}
	</main>

	<footer className="bg-slate-900 text-slate-400 text-xs py-5 px-6 mt-8">
	<div className="max-w-7xl mx-auto">IntentFinder MVP — 네이버 검색광고 API · S-BERT/HDBSCAN · Claude Haiku 4.5</div>
	</footer>
	</div>
	);
	}

	ReactDOM.createRoot(document.getElementById("root")).render(<App />);
	</script>
	<script>
	// JSX를 classic runtime으로 컴파일해 실행 (CDN 환경에서 import 구문 회피)
	(function () {
	var src = document.getElementById("app").textContent;
	var out = Babel.transform(src, { presets: [["react", { runtime: "classic" }]] }).code;
	(0, eval)(out);
	})();
	</script>
	</body>
	</html>