Spaces:

jonghhhh
/

persona_survey

Sleeping

App Files Files Community

persona_survey / index.html

jonghhhh

Initial commit: NBS Persona Survey System

62b1578 4 months ago

raw

history blame contribute delete

25.5 kB

	<!DOCTYPE html>
	<html lang="ko">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Persona Issue Survey(Beta version) - NBS Avatar System</title>
	<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;700&display=swap" rel="stylesheet">
	<style>
	:root {
	--primary: #6366f1;
	--primary-dark: #4f46e5;
	--secondary: #ec4899;
	--bg: #f8fafc;
	--sidebar-bg: #0f172a;
	--card-bg: #ffffff;
	--text-main: #1e293b;
	--text-muted: #64748b;
	--glass: rgba(255, 255, 255, 0.7);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Pretendard', sans-serif;
	}

	body {
	background-color: var(--bg);
	color: var(--text-main);
	display: flex;
	min-height: 100vh;
	}

	/* Sidebar Styling */
	.sidebar {
	width: 320px;
	background-color: var(--sidebar-bg);
	color: white;
	padding: 2.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	position: fixed;
	height: 100vh;
	left: 0;
	top: 0;
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
	z-index: 100;
	}

	.logo {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 3rem;
	background: linear-gradient(to right, #818cf8, #f472b6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.menu-item {
	padding: 1rem 1.25rem;
	border-radius: 12px;
	margin-bottom: 0.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #94a3b8;
	font-weight: 500;
	}

	.menu-item:hover {
	background: rgba(255, 255, 255, 0.05);
	color: white;
	}

	.menu-item.active {
	background: var(--primary);
	color: white;
	}

	.api-key-section {
	margin-top: auto;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	font-size: 0.875rem;
	}

	.api-key-label {
	display: block;
	margin-bottom: 0.75rem;
	font-weight: 500;
	color: #e2e8f0;
	}

	.api-key-container {
	position: relative;
	width: 100%;
	margin-bottom: 1rem;
	}

	.api-key-input {
	width: 100%;
	padding: 0.75rem;
	padding-right: 2.5rem;
	/* Space for toggle icon */
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.05);
	color: #f8fafc;
	font-size: 0.85rem;
	transition: all 0.2s;
	}

	.api-key-input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
	}

	.toggle-password {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #94a3b8;
	font-size: 0.9rem;
	user-select: none;
	}

	.toggle-password:hover {
	color: white;
	}

	.key-guide {
	color: #94a3b8;
	font-size: 0.75rem;
	line-height: 1.5;
	}

	.key-guide a {
	color: #818cf8;
	text-decoration: none;
	}

	/* Main Content Styling */
	.main-content {
	flex: 1;
	margin-left: 320px;
	padding: 3rem;
	max-width: 1200px;
	}

	.header-box {
	margin-bottom: 3rem;
	}

	.title {
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: #0f172a;
	}

	.description {
	color: var(--text-muted);
	line-height: 1.6;
	font-size: 1.1rem;
	}

	.system-info {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
	}

	.info-card {
	background: white;
	padding: 1.5rem;
	border-radius: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	border: 1px solid #f1f5f9;
	}

	.info-card h4 {
	margin-bottom: 0.5rem;
	color: var(--primary);
	}

	.info-card p {
	font-size: 0.9rem;
	color: var(--text-muted);
	line-height: 1.5;
	}

	/* Form Styling */
	.survey-form {
	background: white;
	padding: 2.5rem;
	border-radius: 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
	margin-bottom: 3rem;
	border: 1px solid #f1f5f9;
	}

	.form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
	}

	.input-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	}

	.input-group.full {
	grid-column: span 2;
	}

	label {
	font-weight: 600;
	font-size: 0.9rem;
	color: #475569;
	}

	select,
	input[type="text"],
	input[type="number"],
	textarea {
	padding: 0.875rem;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	font-size: 1rem;
	transition: all 0.2s;
	}

	select:focus,
	input:focus,
	textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
	background: white;
	}

	textarea {
	resize: vertical;
	min-height: 100px;
	}

	.btn-submit {
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	color: white;
	padding: 1rem 2rem;
	border-radius: 14px;
	border: none;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	width: 100%;
	transition: all 0.3s;
	box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
	}

	.btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
	}

	.btn-submit:active {
	transform: translateY(0);
	}

	.btn-submit:disabled {
	background: #cbd5e1;
	box-shadow: none;
	cursor: not-allowed;
	}

	.btn-reset {
	background: white;
	color: #64748b;
	padding: 1rem 1.5rem;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.2s;
	}

	.btn-reset:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #1e293b;
	}

	.button-row {
	display: flex;
	gap: 1rem;
	}

	/* Results Styling */
	.results-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	}

	.result-card {
	background: white;
	padding: 2rem;
	border-radius: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	border: 1px solid #f1f5f9;
	animation: slideIn 0.5s ease forwards;
	opacity: 0;
	}

	@keyframes slideIn {
	from {
	opacity: 0;
	transform: translateY(20px);
	}

	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.avatar-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #f1f5f9;
	}

	.avatar-icon {
	width: 48px;
	height: 48px;
	background: #e0e7ff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	font-weight: 700;
	}

	.avatar-meta {
	font-size: 0.85rem;
	color: var(--text-muted);
	}

	.response-text {
	line-height: 1.8;
	font-size: 1.05rem;
	color: #334155;
	white-space: pre-wrap;
	}

	.context-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
	}

	.chip {
	padding: 0.25rem 0.75rem;
	background: #f1f5f9;
	border-radius: 20px;
	font-size: 0.75rem;
	color: var(--text-muted);
	}

	.loader {
	display: none;
	text-align: center;
	padding: 2rem;
	}

	.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid var(--primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 1rem;
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}

	.notice-label {
	font-size: 0.8rem;
	color: var(--secondary);
	font-weight: 500;
	margin-top: 0.5rem;
	}
	</style>
	</head>

	<body>

	<aside class="sidebar">
	<div class="logo">
	<span>✨</span> Issue Survey (Beta)
	</div>

	<div class="menu-item active" id="menu-actual" onclick="switchMode('actual')">
	<span>👤</span> Actual Respondent
	</div>
	<div class="menu-item" id="menu-synthetic" onclick="switchMode('synthetic')">
	<span>📊</span> Statistical Synthetic
	</div>

	<div class="api-key-section">
	<label class="api-key-label">Gemini API Key</label>
	<div class="api-key-container">
	<input type="password" id="api-key" class="api-key-input" placeholder="여기에 API 키 입력">
	<span class="toggle-password" id="toggle-key" onclick="toggleKeyVisibility()">👁️</span>
	</div>
	<div class="key-guide">
	<p>Gemini API 키가 없으신가요?</p>
	<p><a href="https://aistudio.google.com/app/apikey" target="_blank">Google AI Studio</a>에서 무료로 발급받으실 수
	있습니다.</p>
	</div>
	</div>
	</aside>

	<main class="main-content">
	<div class="header-box">
	<h1 class="title">Persona Issue Survey (Beta version)</h1>
	<p class="description">2020년 7월(1차)부터 2025년 9월(164차)까지 수행된 <b>전국지표조사(NBS)</b> 데이터를 바탕으로 특정 계층의 목소리를
	시뮬레이션합니다.</p>
	<p style="margin-top: 0.5rem; font-size: 0.85rem; color: #f43f5e; font-weight: 500;">⚠️ 본 시스템은 사회적 이슈 분석용이며
	인물 평가에는 부적합합니다. 시뮬레이션 결과는 참고용으로만 사용하십시오.</p>

	<div class="system-info">
	<div class="info-card">
	<h4>👤 Actual vs 📊 Synthetic</h4>
	<p><b>Actual</b>: 실제 개별 응답자의 이력과 가치관을 추적하여 생생한 개인의 목소리를 시나리오화 합니다. (심층 인터뷰 대용)<br>
	<b>Synthetic</b>: 그룹 전체의 통계적 답변 분포를 요약하여 집단의 평균적이고 전형적인 경향성을 도출합니다. (여론 지형 분석용)
	</p>
	</div>
	<div class="info-card">
	<h4>🛠 구현 과정</h4>
	<p>163회의 NBS 설문(16만명)을 통합 전처리하고, SBERT 의미론적 검색을 통해 아바타의 '기억'을 AI에게 주입합니다.</p>
	</div>
	<div class="info-card">
	<h4>💡 사용법</h4>
	<p>1. <b>API 키를 먼저 입력</b>하세요. 2. 인구통계 조건을 설정하고 이슈 질문을 입력(최저임금 사례 등 구체적 배경 권장) 후 시작하세요.</p>
	</div>
	</div>
	</div>

	<div class="survey-form">
	<div class="form-grid">
	<div class="input-group">
	<label>지역</label>
	<select id="region">
	<option value="">전체 (전국)</option>
	<option value="서울">서울</option>
	<option value="경기">경기</option>
	<option value="인천">인천</option>
	<option value="부산">부산</option>
	<option value="대구">대구</option>
	<option value="광주">광주</option>
	<option value="대전">대전</option>
	<option value="울산">울산</option>
	<option value="세종">세종</option>
	<option value="충북">충북</option>
	<option value="충남">충남</option>
	<option value="전북">전북</option>
	<option value="전남">전남</option>
	<option value="경북">경북</option>
	<option value="경남">경남</option>
	<option value="제주">제주</option>
	<option value="강원">강원</option>
	</select>
	</div>
	<div class="input-group">
	<label>성별</label>
	<select id="gender">
	<option value="">전체 (성별무관)</option>
	<option value="남자">남자</option>
	<option value="여자">여자</option>
	</select>
	</div>
	<div class="input-group">
	<label>연령대</label>
	<select id="age">
	<option value="">전체 (연령무관)</option>
	<option value="18~29">20대 (18~29)</option>
	<option value="30~39">30대 (30~39)</option>
	<option value="40~49">40대 (40~49)</option>
	<option value="50~59">50대 (50~59)</option>
	<option value="60~69">60대 (60~69)</option>
	<option value="70~99">70대 이상</option>
	</select>
	</div>
	<div class="input-group">
	<label>구체적 연령 (선택)</label>
	<input type="number" id="age-specific" placeholder="예: 32">
	</div>
	<div class="input-group">
	<label>직업</label>
	<select id="job">
	<option value="">전체 (직업무관)</option>
	<option value="학생">학생</option>
	<option value="사무/기술직">사무/기술직</option>
	<option value="자영업">자영업</option>
	<option value="주부">주부</option>
	<option value="경영/관리/전문직">경영/관리/전문직</option>
	<option value="생산/기능/노무직">생산/기능/노무직</option>
	<option value="농/림/수산업">농/림/수산업</option>
	<option value="무직/퇴직/기타">무직/퇴직/기타</option>
	</select>
	</div>
	<div class="input-group full">
	<label>분석 이슈 (질문)</label>
	<textarea id="question"
	placeholder="예: 최근 고물가 상황에서 서민 경제 안정을 위해 최저임금을 인상해야 한다는 주장에 얼마나 동의하십니까? (1: 전혀 동의 안함 ~ 5: 매우 동의)"></textarea>
	</div>
	<div class="input-group" id="sample-group">
	<label>생성할 아바타(응답) 수</label>
	<input type="number" id="sample" value="3" min="1" max="10">
	<div id="sample-notice" class="notice-label">Actual 모드는 최대 10명으로 제한됩니다.</div>
	</div>
	</div>
	<div class="button-row">
	<button class="btn-submit" id="btn-submit" onclick="runSimulation()">시뮬레이션 시작</button>
	<button class="btn-reset" id="btn-reset" onclick="resetForm()">초기화</button>
	</div>
	</div>

	<div class="loader" id="loader">
	<div class="spinner"></div>
	<p>데이터에서 페르소나를 추출하고 AI 답변을 생성하고 있습니다...</p>
	</div>

	<div class="results-container" id="results">
	<!-- Results will be injected here -->
	</div>
	</main>

	<script>
	let currentMode = 'actual';

	function toggleKeyVisibility() {
	const keyInput = document.getElementById('api-key');
	const toggleIcon = document.getElementById('toggle-key');
	if (keyInput.type === 'password') {
	keyInput.type = 'text';
	toggleIcon.innerText = '🙈';
	} else {
	keyInput.type = 'password';
	toggleIcon.innerText = '👁️';
	}
	}

	function switchMode(mode) {
	currentMode = mode;
	document.querySelectorAll('.menu-item').forEach(el => el.classList.remove('active'));
	document.getElementById(`menu-${mode}`).classList.add('active');

	const sampleGroup = document.getElementById('sample-group');
	const sampleInput = document.getElementById('sample');
	const notice = document.getElementById('sample-notice');

	if (mode === 'actual') {
	sampleGroup.style.display = "flex";
	sampleInput.max = 10;
	if (sampleInput.value > 10) sampleInput.value = 10;
	notice.innerText = "Actual 모드는 최대 10명으로 제한됩니다. (대규모 분석은 Synthetic 추천)";
	notice.style.color = "#ec4899";
	} else {
	// Synthetic is always 1 summarized avatar per request in current implementation
	sampleGroup.style.display = "none";
	sampleInput.value = 1;
	}
	}

	function resetForm() {
	document.getElementById('question').value = "";
	document.getElementById('region').value = "";
	document.getElementById('gender').value = "";
	document.getElementById('age').value = "";
	document.getElementById('age-specific').value = "";
	document.getElementById('job').value = "";
	document.getElementById('sample').value = (currentMode === 'actual' ? "3" : "1");
	document.getElementById('results').innerHTML = "";
	}

	async function runSimulation() {
	const apiKey = document.getElementById('api-key').value.trim();
	const question = document.getElementById('question').value.trim();
	const region = document.getElementById('region').value;
	const gender = document.getElementById('gender').value;

	// Priority: specific age > age range
	const ageSpecific = document.getElementById('age-specific').value.trim();
	const ageRange = document.getElementById('age').value;
	const age = ageSpecific \|\| ageRange;

	const job = document.getElementById('job').value;
	const sample = parseInt(document.getElementById('sample').value);

	if (!apiKey) {
	alert("시작하려면 Gemini API 키를 입력해 주세요 (사이드바 하단).");
	return;
	}

	if (!question) {
	alert("질문을 입력해 주세요.");
	return;
	}

	const resultsDiv = document.getElementById('results');
	const loader = document.getElementById('loader');
	const btn = document.getElementById('btn-submit');

	resultsDiv.innerHTML = "";
	loader.style.display = "block";
	btn.disabled = true;

	const payload = {
	question,
	region: region \|\| null,
	gender: gender \|\| null,
	age: age \|\| null,
	job: job \|\| null,
	sample
	};

	const endpoint = `/simulate/${currentMode}`;

	try {
	const response = await fetch(endpoint, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	'X-API-Key': apiKey \|\| ""
	},
	body: JSON.stringify(payload)
	});

	if (!response.ok) {
	const err = await response.json();
	throw new Error(err.detail \|\| "시뮬레이션 중 오류가 발생했습니다.");
	}

	const data = await response.json();
	renderResults(data);
	} catch (error) {
	alert(error.message);
	} finally {
	loader.style.display = "none";
	btn.disabled = false;
	}
	}

	function renderResults(data) {
	const resultsDiv = document.getElementById('results');

	if (currentMode === 'synthetic') {
	resultsDiv.innerHTML = `<h2 style="margin-bottom: 1.5rem;">집단 대표(Representative) 분석 결과</h2>`;
	} else {
	resultsDiv.innerHTML = `<h2 style="margin-bottom: 1.5rem;">총 ${data.length}명의 답변 결과</h2>`;
	}

	data.forEach((item, index) => {
	const card = document.createElement('div');
	card.className = "result-card";
	card.style.animationDelay = `${index * 0.1}s`;

	const isSynthetic = !item.respondent_id;
	const idLabel = item.respondent_id ? `ID: ${item.respondent_id}` : `Group Representative (Representative)`;
	const roundLabel = item.survey_round ? ` \| Survey Round: ${item.survey_round}` : "";

	let demographicsStr = "";
	if (item.demographics) {
	const d = item.demographics;
	demographicsStr = `${d.region \|\| '전국'} / ${d.age \|\| '연령대'} / ${d.gender \|\| '성별'} / ${d.job \|\| '직업'}`;
	}

	const contextHtml = (item.referenced_context \|\| item.referenced_stat_context \|\| [])
	.map(c => `<span class="chip">${c.split('\n')[0].replace('Q: ', '')}</span>`)
	.join('');

	card.innerHTML = `
	<div class="avatar-info">
	<div class="avatar-icon">${item.respondent_id ? 'P' : 'S'}</div>
	<div>
	<div style="font-weight: 700; color: #0f172a;">${idLabel}${roundLabel}</div>
	<div class="avatar-meta">${demographicsStr}</div>
	</div>
	</div>
	<div class="response-text">${item.response}</div>
	<div class="api-key-label" style="margin-top: 1.5rem; font-size: 0.75rem; color: #94a3b8;">참조된 과거 데이터 필드:</div>
	<div class="context-chips">
	${contextHtml}
	</div>
	`;
	resultsDiv.appendChild(card);
	});
	}
	</script>
	</body>

	</html>