Spaces:

rorshi
/

autonomous-ai-agent-sim

Sleeping

autonomous-ai-agent-sim / templates /dashboard.html

humanda5

api key 변경 ui 추가

00b7ce9 30 days ago

30.1 kB


	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>월드 관찰자 대시보드</title>
	<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
	<style>
	/* 기본 스타일 및 변수 */
	:root { --bg-color: #f0f2f5; --panel-bg-color: #ffffff; --border-color: #2c3e50; --border-color: #dee2e6; --shadow: 0 4px 6px rgba(0,0,0,0.05); --primary-color: #007bff; --success-color: #28a745; --info-color: #17a2b8; --secondary-color: #6c757d; }
	body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; height: 100vh; margin: 0; background-color: var(--bg-color); }
	#main-container { display: flex; flex: 1; padding: 15px; gap: 15px; min-height: 0;}
	#network-panel { flex: 3; display: flex; flex-direction: column; background: var(--panel-bg-color); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; }
	#network { width: 100%; flex: 1; border-bottom: 1px solid var(--border-color); min-height: 0; }

	/* 플레이어 대화 */
	#player-input-area { padding: 10px; background-color: #eefc2a; border-top: 2px solid #ffeeba; }
	#player-input-area p { margin: 0 0 10px 0; font-weight: 500; font-size: 14px; }
	.player-input-wrapper { display: flex; gap: 10px }
	#player-input-text { flex: 1; padding: 8px 12px; border-radius: 6px; border: 1px solid #ddd; }
	#player-send-btn { padding: 8px 15px; border-radius: 6px; border: none; cursor: pointer; color: white; background-color: var(--primary-color); }

	/* API 설정 */
	#api-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
	#api-modal-content { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 400px; text-align: center; }
	#api-modal-content h2 { margin-top: 0; }
	#api-modal-content select, #api-modal-content input, #api-modal-content button { width: 100%; padding: 12px; margin-top: 10px; box-sizing: border-box; border-radius: 6px; border: 1px solid #ccc; }
	#api-modal-content button { background: var(--primary-color); color: white; cursor: pointer; font-weight: bold; }
	.hidden { display: none !important; }

	/* 전체 컨트롤 패널 (가장 바깥쪽) */
	#controls { flex-shrink: 0; padding: 12px; display: flex; flex-direction: column; gap: 15px; background-color: #3e3f41; border-radius: 0 0 12px 12px;}

	/* 메인 컨트롤 버튼 */
	#main-controls { display: flex; gap: 10px; justify-content: flex-start;}
	#main-controls button { padding: 8px 15px; border-radius: 6px; border: none; cursor: pointer; color: rgb(0, 0, 0); font-size: 14px; font-weight: 500; transition: background-color 0.2s;}
	#play-pause-btn.playing { background-color: var(--primary-color); }
	#play-pause-btn.paused { background-color: var(--success-color); }
	#tick-btn { background-color: var(--secondary-color); }

	/* 개입 기능 선택 탭*/
	#intervention-area { display: flex; gap: 15px; align-items: flex-start;}
	#intervention-tabs { display: flex; flex-direction: column; gap: 10px;}
	.tab-btn { padding: 8px 15px; border-radius: 6px; border: 1px solid var(--border-color); cursor: pointer; font-weight: 500; color: #495057; text-align: center;}
	.tab-btn.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color);}

	/* 개입 기능 패널 */
	#intervention-panels { flex: 1; }
	.control-panel { display: none; flex-direction: column; gap: 10px; height: 100%; }
	.control-panel.active { display: flex; }
	.control-panel select, .control-panel input, .control-panel button { padding: 8px 12px; border-radius: 6px; border: 1px solid #ddd; font-size: 14px; width: 100%; box-sizing: border-box; }
	.control-panel button { background-color: var(--info-color); color: white; cursor: pointer; }
	#force-relationship-btn { background-color: var(--success-color); }

	/* 사이드 패널 등 */
	#side-panel { flex: 1; display: flex; flex-direction: column; gap: 15px; min-width: 300px; max-width: 400px; }
	.info-panel { background: var(--panel-bg-color); padding: 20px; border-radius: 12px; box-shadow: var(--shadow); overflow-y: auto; }
	#npc-details { flex-basis: 45%; }
	#log-panel { flex-basis: 55%; display: flex; flex-direction: column; }
	#log-container { flex: 1; overflow-y: auto; font-size: 13px; line-height: 1.6; color: #495057; white-space: pre-wrap; }
	h2 { margin-top: 0; margin-bottom: 15px; font-size: 18px; color: #343a40; }
	</style>
	</head>
	<body>
	<div id="api-modal-overlay">
	<!-- API 키 입력_1 -->
	<div id="api-modal-content">
	<h2>시뮬레이션 시작</h2>
	<p>사용할 LLM 모델과 API 키를 입력해주세요.</p>
	<select id="llm-model-select">
	<option value="gemini-2.0-flash">[추천] Gemini 2.0 Flash</option>
	<option value="gemini-2.5-flash">Gemini 2.5 Flash</option>
	<option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
	</select>
	<input type="password" id="api-key-input" placeholder="API Key를 여기에 입력하세요">
	<button id="start-simulation-btn">시작하기</button>
	<p id="api-modal-message" style="color: red; margin-top: 10px;"></p>
	</div>
	</div>
	<div id="main-container">
	<div id="network-panel">
	<div id="network"></div>
	<div id="player-input-area" style="display: none;">
	<p id="player-prompt-text"></p>
	<div class="player-input-wrapper">
	<input type="text" id="player-input-text" placeholder="대사를 입력하세요...">
	<button id="player-send-btn">전송</button>
	</div>
	</div>
	<div id="controls" style="flex-direction: column; align-items: stretch;">
	<!-- 메인 컨트롤 -->
	<div id="main-controls" style="display: flex; gap: 10px; justify-content: flex-start;">
	<button id="play-pause-btn">Play / Pause</button>
	<button id="tick-btn">Next Tick</button>
	<button id="player-toggle-btn">플레이어 상태: 비활성화</button>
	<button id="fit-btn">관계도 보기</button>
	<button id="api-settings-toggle-btn" style="margin-left: auto;">API 설정</button>
	</div>
	<!-- API 키 입력_2 -->
	<div id="ingame-api-panel" class="control-panel" style="display: none; flex-direction: row; gap: 10px; background-color: #e9ecef; padding: 10px; border-radius: 8px;">
	<select id="ingame-llm-model-select" style="flex: 1;">
	<option value="gemini-2.0-flash">[추천] Gemini 2.0 Flash</option>
	<option value="gemini-2.5-flash">Gemini 2.5 Flash</option>
	<option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
	</select>
	<input type="password" id="ingame-api-key-input" placeholder="API Key를 여기에 입력하세요" style="flex: 2;">
	<button id="ingame-api-key-save-btn" style="flex: 1;">API 변경</button>
	</div>
	<!-- 개입 기능 선택 -->
	<div id="intervention-area" style="display: flex; gap: 15px; align-items: flex-start;">
	<div id="intervention-tabs">
	<button id="tab-event" class="tab-btn active">이벤트 주입</button>
	<button id="tab-relation" class="tab-btn">관계 설정</button>
	<button id="tab-orchestrate" class="tab-btn">상황 연출</button>
	</div>
	<!-- 개입 기능 패널 -->
	<div id="intervention-panels">
	<div id="panel-event" class="control-panel active">
	<select id="event-npc-select"></select>
	<input type="text" id="event-text-input" placeholder="이벤트 내용">
	<button id="inject-event-btn">이벤트 주입</button>
	</div>
	<div id="panel-relation" class="control-panel">
	<select id="relation-npc1-select"></select>
	<select id="relation-npc2-select"></select>
	<select id="relationship-type-select">
	<option value="best friend">매우 친한 친구</option>
	<option value="friend">친구</option>
	<option value="acquaintance">지인</option>
	<option value="stranger">낯선 사람</option>
	<option value="nuisance">불편한 사람</option>
	<option value="rival">싫은 사람</option>
	<option value="enemy">적</option>
	</select>
	<button id="force-relationship-btn">관계 설정</button>
	</div>
	<div id="panel-orchestrate" class="control-panel">
	<select id="orch-npc1-select" title="대화를 시작할 NPC"></select>
	<select id="orch-npc2-select" title="대화 상대 NPC"></select>
	<input type="text" id="situation-text-input" placeholder="대화 주제 또는 상황">
	<button id="orchestrate-btn">대화 시작</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div id="side-panel">
	<div id="npc-details" class="info-panel">
	<h2>NPC 상세 정보</h2>
	<div id="npc-details-content">관계도에서 NPC를 선택하세요.</div>
	</div>
	<div id="log-panel" class="info-panel">
	<h2>이벤트 로그</h2>
	<div id="log-container">(로그 로딩 중...)</div>
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', async function () {
	// API 입력
	const apiModalOverlay = document.getElementById('api-modal-overlay');
	const llmModelSelect = document.getElementById('llm-model-select');
	const apiKeyInput = document.getElementById('api-key-input');
	const startSimBtn = document.getElementById('start-simulation-btn');
	const apiModalMsg = document.getElementById('api-modal-message');
	// API 입력 2
	const apiSettingsToggleBtn = document.getElementById('api-settings-toggle-btn');
	const ingameApiPanel = document.getElementById('ingame-api-panel');
	const ingameLlmModelSelect = document.getElementById('ingame-llm-model-select');
	const ingameApiKeyInput = document.getElementById('ingame-api-key-input');
	const ingameApiKeySaveBtn = document.getElementById('ingame-api-key-save-btn');
	// UI 요소 가져오기
	const networkContainer = document.getElementById('network');
	const logContainer = document.getElementById('log-container');
	const detailsContainer = document.getElementById('npc-details-content');
	// 메인 컨트롤
	const playPauseBtn = document.getElementById('play-pause-btn');
	const tickBtn = document.getElementById('tick-btn');
	const playerToggleBtn = document.getElementById('player-toggle-btn');
	const fitBtn = document.getElementById('fit-btn')
	// player 대사 입력
	const playerInputArea = document.getElementById('player-input-area');
	const playerPromptText = document.getElementById('player-prompt-text');
	const playerInputText = document.getElementById('player-input-text');
	const playerSendBtn = document.getElementById('player-send-btn');
	// 개입 기능 선택
	const tabEvent = document.getElementById('tab-event');
	const tabRelation = document.getElementById('tab-relation');
	const panelEvent = document.getElementById('panel-event');
	const panelRelation = document.getElementById('panel-relation');
	// 이벤트 주입
	const injectEventBtn = document.getElementById('inject-event-btn');
	const eventNpcSelect = document.getElementById('event-npc-select');
	const eventTextInput = document.getElementById('event-text-input');
	// 관계 설정
	const relationNpc1Select = document.getElementById('relation-npc1-select');
	const relationNpc2Select = document.getElementById('relation-npc2-select');
	const relationshipTypeSelect = document.getElementById('relationship-type-select');
	const forceRelationshipBtn = document.getElementById('force-relationship-btn');
	// 대화 시작하기
	const tabOrchestrate = document.getElementById('tab-orchestrate');
	const panelOrchestrate = document.getElementById('panel-orchestrate');
	const orchNpc1Select = document.getElementById('orch-npc1-select');
	const orchNpc2Select = document.getElementById('orch-npc2-select');
	const situationTextInput = document.getElementById('situation-text-input');
	const orchestrateBtn = document.getElementById('orchestrate-btn');

	let network = null;
	let nodesDataSet = new vis.DataSet([]);
	let edgesDataSet = new vis.DataSet([]);
	let autoUpdateInterval = null;

	const options = {
	physics: { stabilization: {iterations: 1000}, solver: 'forceAtlas2Based', forceAtlas2Based: { gravitationalConstant: -80, springLength: 150, springConstant: 0.08 } },
	nodes: { borderWidth: 2, shape: 'circularImage', size: 30, font: { size: 14, color: '#333' } },
	edges: { width: 2, font: { align: 'top', size: 11, strokeWidth: 3, strokeColor: 'white' }, smooth: { type: 'cubicBezier' } },
	interaction: { hover: true, zoomView: true, dragView: true, minZoom: 0.2, maxZoom: 4.0 }
	};

	// 시작 버튼 이벤트
	startSimBtn.addEventListener('click', async () => {
	const model_name = llmModelSelect.value;
	const api_key = apiKeyInput.value;

	if (!api_key) {
	apiModalMsg.textContent = 'API 키를 입력해주세요.';
	return;
	}

	startSimBtn.textContent = '인증 중...';
	startSimBtn.disabled = true;
	apiModalMsg.textContent = '';

	const response = await fetch('/api/initialize_simulation', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ model_name, api_key })
	});
	const data = await response.json();

	if (data.success) {
	apiModalOverlay.classList.add('hidden'); // 모달 숨기기
	// 시뮬레이션이 성공적으로 시작되었으므로, 이제부터 월드 상태를 주기적으로 업데이트합니다.
	await updateWorld();
	if (!autoUpdateInterval) { // 중복 실행 방지
	autoUpdateInterval = setInterval(updateWorld, 5000);
	}
	} else {
	apiModalMsg.textContent = `오류: ${data.error}`;
	startSimBtn.textContent = '시작하기';
	startSimBtn.disabled = false;
	}
	});

	fitBtn.addEventListener('click', () => {
	if (network) {
	network.fit();
	}
	});
	// 탭 버튼 클릭 이벤트
	tabEvent.addEventListener('click', () =>{
	tabEvent.classList.add('active');
	panelEvent.classList.add('active');
	tabRelation.classList.remove('active');
	panelRelation.classList.remove('active');
	tabOrchestrate.classList.remove('active');
	panelOrchestrate.classList.remove('active');
	});
	tabRelation.addEventListener('click', () => {
	tabEvent.classList.remove('active');
	panelEvent.classList.remove('active');
	tabRelation.classList.add('active');
	panelRelation.classList.add('active');
	tabOrchestrate.classList.remove('active');
	panelOrchestrate.classList.remove('active');
	});
	// 상황 연출 탭 클릭 이벤트
	tabOrchestrate.addEventListener('click', () => {
	tabEvent.classList.remove('active');
	panelEvent.classList.remove('active');
	tabRelation.classList.remove('active');
	panelRelation.classList.remove('active');
	tabOrchestrate.classList.add('active');
	panelOrchestrate.classList.add('active');
	});

	// 대화 시작 버튼 이벤트 리스너 추가
	orchestrateBtn.addEventListener('click', async () => {
	const npc1_name = orchNpc1Select.value;
	const npc2_name = orchNpc2Select.value;
	const situation = situationTextInput.value;
	if (!npc1_name \|\| !npc2_name \|\| !situation \|\| npc1_name === npc2_name) {
	return alert ('서로 다른 두 NPC와 상황을 모두 입력해주세요.');
	}
	await fetch('/api/orchestrate_conversation', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ npc1_name, npc2_name, situation })
	});
	await updateWorld();
	});

	async function updateWorld() {
	try {
	const response = await fetch('/api/world_state');
	const data = await response.json();
	// 서버가 아직 준비되지 않았음을 확인하고 대기
	if (data.status === 'needs_initialization') {
	console.log("시뮬레이션 초기화 대기 중...");
	updateLog(data.log); // 초기 로그는 표시
	return;
	}
	if (data.error) throw new Error(data.error);

	// 데이터셋을 직접 업데이트하면 vis-network가 알아서 변경사항을 감지하고 다시 그립니다.
	nodesDataSet.update(data.nodes);
	edgesDataSet.update(data.edges);

	// 플레이어 입력 대기 상태에 따라 UI 변경
	if (data.waiting_for_player) {
	playerInputArea.style.display = 'block';
	const info = data.player_conversation;
	// 상대방의 마지막 말을 프롬프트로 표시
	playerPromptText.textContent = `${info.last_utterance}`;
	playerPauseBtn.disabled = true;
	} else {
	playerInputArea.style.display = 'none';
	playPauseBtn.disabled = false;
	}

	if (!network) {
	const networkData = { nodes: nodesDataSet, edges: edgesDataSet };
	network = new vis.Network(networkContainer, networkData, options);
	network.on('click', onNodeClick);

	// 물리 시뮬레이션이 안정화되면 물리 효과를 비활성화하여 노드 움직임을 멈춥니다.
	network.on("stabilizationIterationsDone", function () {
	network.setOptions({ physics: false, interaction: { hover: true, zoomView: true, dragView: true, minZoom: 0.5, maxZoom: 2.0 }});
	});
	} else {
	nodesDataSet.update(data.nodes);
	edgesDataSet.update(data.edges);

	// 데이터 업데이트 후, 네트워크를 다시 안정화시키고 물리 효과 종료
	network.stabilize();
	network.setOptions({ physics: false });
	}

	updateNpcSelect(data.nodes);
	updateLog(data.log);
	updatePlayPauseButton(data.paused);
	} catch (error) { console.error("월드 업데이트 중 에러 발생:", error); }
	}

	async function onNodeClick(params) {
	if (params.nodes.length > 0) {
	const selectedNodeId = params.nodes[0];
	// vis.DataSet에서 노드 객체를 가져와 한글 라벨을 찾습니다.
	const selectedNodeObject = nodesDataSet.get(selectedNodeId);

	if (!selectedNodeObject) {
	console.error("클릭된 노드를 찾을 수 없습니다:", selectedNodeId);
	return;
	}
	const npcName = selectedNodeObject.label; // 영어 ID가 아닌 한글 라벨로 요청

	try {
	const response = await fetch(`/api/npc_details/${npcName}`);
	const details = await response.json();
	let detailsHtml = `<h3>${details.name} (${details.job}, ${details.age}세)</h3>`;
	detailsHtml += `<p><strong>성격:</strong> ${details.personality_summary}</p>`;
	detailsHtml += `<p><strong>목표:</strong> ${details.goals}</p>`;
	detailsHtml += `<strong>감정:</strong><ul>${details.emotions.length > 0 ? details.emotions.map(e => `<li>${e[0]}: ${e[1].toFixed(1)}</li>`).join('') : '<li>평온함</li>'}</ul>`;
	detailsHtml += `<strong>최근 기억:</strong><ul>${details.memories.length > 0 ? details.memories.map(m => `<li>${m.substring(0, 80)}...</li>`).join('') : '<li>기억 없음</li>'}</ul>`;
	detailsContainer.innerHTML = detailsHtml;
	} catch (error) {
	detailsContainer.innerHTML = `${npcName}의 정보를 불러오는 데 실패했습니다.`;
	}
	}
	}

	function updateNpcSelect(npcNodes) {
	const selections = [eventNpcSelect, relationNpc1Select, relationNpc2Select, orchNpc1Select, orchNpc2Select];
	selections.forEach(select => {
	const currentVal = select.value;
	select.innerHTML = '';
	npcNodes.forEach(node => {
	const option = document.createElement('option');
	option.value = node.label;
	option.textContent = node.label;
	select.appendChild(option);
	});
	if (currentVal) select.value = currentVal;
	})
	}

	function updateLog(logMessages) {
	logContainer.textContent = logMessages.join('\n');
	logContainer.scrollTop = logContainer.scrollHeight;
	}

	function updatePlayPauseButton(isPaused) {
	playPauseBtn.textContent = isPaused ? '▶ Play' : '❚❚ Pause';
	playPauseBtn.className = isPaused ? 'paused' : 'playing';
	// 자동 업데이트 로직 복구
	if (!isPaused && !autoUpdateInterval) {
	autoUpdateInterval = setInterval(updateWorld, 5000);
	} else if (isPaused && autoUpdateInterval) {
	clearInterval(autoUpdateInterval);
	autoUpdateInterval = null;
	}
	}

	forceRelationshipBtn.addEventListener('click', async () => {
	const npc1_name = relationNpc1Select.value;
	const npc2_name = relationNpc2Select.value;
	const relationship_type = relationshipTypeSelect.value;
	if (!npc1_name \|\| !npc2_name \|\| npc1_name === npc2_name) {
	return alert('서로 다른 두 명의 NPC를 선택해주세요.');
	}
	await fetch('/api/force_relationship', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ npc1_name, npc2_name, relationship_type })
	});
	await updateWorld();
	});
	// 인게임 API 설정 패널 토글 이벤트
	apiSettingsToggleBtn.addEventListener('click', () => {
	const isHidden = ingameApiPanel.style.display === 'none';
	ingameApiPanel.style.display = isHidden ? 'flex' : 'none';
	});
	// 인게임 'API 변경' 버튼 이벤트 리스너
	ingameApiKeySaveBtn.addEventListener('click', async () => {
	const model_name = ingameLlmModelSelect.value;
	const api_key = ingameApiKeyInput.value;

	if (!api_key) {
	return alert('새로운 API 키를 입력해주세요.');
	}

	ingameApiKeySaveBtn.textContent = '변경 중...';
	const response = await fetch('/api/set_llm_config', { // 2단계에서 만들 API
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ model_name, api_key })
	});

	const data = await response.json();
	if (data.success) {
	alert(`API 설정이 변경되었습니다. 이제부터 [${model_name}] 모델을 사용합니다.`);
	ingameApiKeyInput.value = ''; // 입력창 비우기
	} else {
	alert(`API 변경 실패: ${data.error}`);
	}
	ingameApiKeySaveBtn.textContent = 'API 변경';
	});

	// 모든 이벤트 리스너 복구
	playPauseBtn.addEventListener('click', async () => {
	const response = await fetch('/api/toggle_simulation', { method: 'POST' });
	const data = await response.json();
	updatePlayPauseButton(data.paused);
	});
	tickBtn.addEventListener('click', async () => { await fetch('/api/manual_tick', { method: 'POST' }); await updateWorld(); });
	injectEventBtn.addEventListener('click', async () => {
	const npc_name = eventNpcSelect.value; // 이제 한글 이름이 전송됩니다.
	const event_text = eventTextInput.value;
	if (!npc_name \|\| !event_text) return alert('NPC와 이벤트 내용을 모두 입력해주세요.');
	await fetch('/api/inject_event', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ npc_name, event_text })
	});
	eventTextInput.value = '';
	await updateWorld();
	});
	playerToggleBtn.addEventListener('click', async () => {
	const response = await fetch('/api/toggle_player', {method: 'POST'});
	const data = await response.json();
	// 버튼 텍스트 업데이트
	playerToggleBtn.textContent = data.player_is_active ? '플레이어 상태: 활성화' : '플레이어 상태: 비활성화';
	});
	// '전송' 버튼 이벤트 리스너
	playerSendBtn.addEventListener('click', async () => {
	const utterance = playerInputText.value;
	if (!utterance) return;

	playerSendBtn.disabled = true;
	await fetch('/api/player_response', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ utterance })
	});
	playerInputText.value = '';
	playerSendBtn.disabled = false;
	await updateWorld(); // 상태 즉시 업데이트
	});

	// 엔터키로 대화 전송
	playerInputText.addEventListener('keydown', function(event) {
	if (event.key == 'Enter' && !event.shiftKey) {
	event.preventDefault();
	playerSendBtn.click();
	}
	});

	// 초기 로드
	await updateWorld();
	setInterval(updateWorld, 5000);
	});
	</script>
	</body>
	</html>