Spaces:

wiizm
/

soyailabs

Running on CPU Upgrade

soyailabs / templates /admin_files.html

SOY NV AI

Add Hugging Face Spaces deployment support and file public/private feature

ae31891 4 days ago

85.1 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>파일 목록 - SOY NV AI</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #f8f9fa;
	color: #202124;
	}

	.header {
	background: white;
	border-bottom: 1px solid #dadce0;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.header-title {
	font-size: 20px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.header-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	}

	.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	padding: 8px;
	color: #202124;
	}

	.mobile-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	}

	.mobile-menu.active {
	display: block;
	}

	.mobile-menu-content {
	position: fixed;
	top: 0;
	right: -100%;
	width: 280px;
	max-width: 80%;
	height: 100%;
	background: white;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
	transition: right 0.3s ease;
	overflow-y: auto;
	z-index: 1001;
	}

	.mobile-menu.active .mobile-menu-content {
	right: 0;
	}

	.mobile-menu-header {
	padding: 16px 20px;
	border-bottom: 1px solid #dadce0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: white;
	position: sticky;
	top: 0;
	z-index: 10;
	}

	.mobile-menu-title {
	font-size: 18px;
	font-weight: 500;
	}

	.mobile-menu-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #202124;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.mobile-menu-items {
	padding: 8px 0;
	}

	.mobile-menu-item {
	display: block;
	padding: 12px 20px;
	color: #202124;
	text-decoration: none;
	border-bottom: 1px solid #f1f3f4;
	transition: background 0.2s;
	}

	.mobile-menu-item:hover {
	background: #f8f9fa;
	}

	.mobile-menu-user {
	padding: 16px 20px;
	border-bottom: 1px solid #dadce0;
	color: #5f6368;
	font-size: 14px;
	}

	@media (max-width: 768px) {
	.header {
	padding: 12px 16px;
	}

	.header-title {
	font-size: 18px;
	}

	.header-title span:first-child {
	display: none;
	}

	.menu-toggle {
	display: block;
	}

	.header-actions {
	display: none;
	}
	}

	.btn {
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
	display: inline-block;
	}

	.btn-primary {
	background: #1a73e8;
	color: white;
	}

	.btn-primary:hover {
	background: #1557b0;
	}

	.btn-secondary {
	background: #f1f3f4;
	color: #202124;
	}

	.btn-secondary:hover {
	background: #e8eaed;
	}

	.btn-info {
	background: #17a2b8;
	color: white;
	}

	.btn-info:hover {
	background: #138496;
	}

	.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px;
	}

	.page-header {
	margin-bottom: 24px;
	}

	.page-header h1 {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 8px;
	}

	.page-header p {
	color: #5f6368;
	}

	.card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	padding: 24px;
	margin-bottom: 24px;
	}

	.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	}

	.card-title {
	font-size: 18px;
	font-weight: 500;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	}

	thead {
	background: #f8f9fa;
	}

	th, td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid #e8eaed;
	}

	th {
	font-weight: 500;
	font-size: 14px;
	color: #5f6368;
	}

	td {
	font-size: 14px;
	}

	.file-actions {
	display: flex;
	gap: 4px;
	}

	.badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	}

	.badge-success {
	background: #e8f5e9;
	color: #137333;
	}

	.badge-info {
	background: #e8f0fe;
	color: #1967d2;
	}

	.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	}

	.modal.active {
	display: flex;
	}

	.modal-content {
	background: white;
	border-radius: 8px;
	padding: 24px;
	width: 90%;
	max-width: 1200px;
	max-height: 90vh;
	overflow-y: auto;
	}

	.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	border-bottom: 1px solid #e8eaed;
	padding-bottom: 16px;
	}

	.modal-title {
	font-size: 20px;
	font-weight: 500;
	}

	.modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #5f6368;
	}

	.chunk-list {
	max-height: 60vh;
	overflow-y: auto;
	border: 1px solid #e8eaed;
	border-radius: 6px;
	padding: 12px;
	}

	.chunk-item {
	padding: 12px;
	margin-bottom: 12px;
	border: 1px solid #e8eaed;
	border-radius: 6px;
	background: #f8f9fa;
	cursor: pointer;
	transition: all 0.2s;
	}

	.chunk-item:hover {
	background: #e8f0fe;
	border-color: #1a73e8;
	}

	.chunk-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	}

	.chunk-item-index {
	font-weight: 600;
	color: #1a73e8;
	}

	.chunk-item-preview {
	color: #5f6368;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.chunk-content-modal {
	max-width: 1000px;
	}

	.chunk-content {
	white-space: pre-wrap;
	font-family: inherit;
	line-height: 1.6;
	color: #202124;
	padding: 16px;
	background: #f8f9fa;
	border-radius: 6px;
	max-height: 70vh;
	overflow-y: auto;
	}

	.chunk-metadata {
	margin-top: 16px;
	padding: 12px;
	background: #e8f0fe;
	border-radius: 6px;
	font-size: 13px;
	}

	.chunk-metadata-title {
	font-weight: 600;
	margin-bottom: 8px;
	color: #1967d2;
	}

	.chunk-metadata-item {
	margin-bottom: 4px;
	}

	.filter-section {
	margin-bottom: 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	}

	.filter-section select {
	padding: 8px 12px;
	border: 1px solid #dadce0;
	border-radius: 6px;
	font-size: 14px;
	background: white;
	}

	/* GraphRAG 사이드바 스타일 */
	.episode-sidebar-item {
	padding: 10px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 14px;
	color: #202124;
	margin-bottom: 4px;
	border: 1px solid transparent;
	}

	.episode-sidebar-item:hover {
	background: #e8f0fe;
	border-color: #1a73e8;
	}

	.episode-sidebar-item.active {
	background: #1a73e8;
	color: white;
	font-weight: 500;
	}

	.episode-sidebar-item.active:hover {
	background: #1557b0;
	}
	</style>
	</head>
	<body>
	<div class="header">
	<div class="header-title">
	<span>🤖</span>
	<span>SOY NV AI 관리자 페이지</span>
	</div>
	<button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
	<div class="header-actions">
	<span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
	<a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
	<a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
	<a href="{{ url_for('main.admin_messages') }}" class="btn btn-secondary">메시지 확인</a>
	<a href="{{ url_for('main.admin_prompts') }}" class="btn btn-secondary">프롬프트 관리</a>
	<a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
	<a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
	<a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
	</div>
	</div>

	<!-- 모바일 메뉴 -->
	<div class="mobile-menu" id="mobileMenu" onclick="closeMobileMenuOnBackdrop(event)">
	<div class="mobile-menu-content" onclick="event.stopPropagation()">
	<div class="mobile-menu-header">
	<div class="mobile-menu-title">메뉴</div>
	<button class="mobile-menu-close" onclick="toggleMobileMenu()" aria-label="메뉴 닫기">×</button>
	</div>
	<div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
	<div class="mobile-menu-items">
	<a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
	<a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 관리</a>
	<a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
	<a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
	<a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
	<a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
	<a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
	</div>
	</div>
	</div>

	<div class="container">
	<div class="page-header">
	<h1>파일 목록</h1>
	<p>업로드된 파일과 생성된 청크를 확인할 수 있습니다.</p>
	</div>

	<div id="alertContainer"></div>

	<div class="card">
	<div class="card-header">
	<div class="card-title">파일 목록</div>
	<div class="filter-section">
	<select id="modelFilter" onchange="loadFiles()">
	<option value="">모든 모델</option>
	</select>
	</div>
	</div>

	<div id="filesTableContainer">
	<table>
	<thead>
	<tr>
	<th>ID</th>
	<th>파일명</th>
	<th>모델</th>
	<th>청크 수</th>
	<th>파일 크기</th>
	<th>업로드일</th>
	<th>작업</th>
	</tr>
	</thead>
	<tbody id="filesTableBody">
	<tr>
	<td colspan="7" style="text-align: center; padding: 24px; color: #5f6368;">
	파일 목록을 불러오는 중...
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- 청크 목록 모달 -->
	<div id="chunksModal" class="modal">
	<div class="modal-content">
	<div class="modal-header">
	<div class="modal-title" id="chunksModalTitle">청크 목록</div>
	<button class="modal-close" onclick="closeChunksModal()">×</button>
	</div>
	<div id="chunksList" class="chunk-list">
	<div style="text-align: center; padding: 24px; color: #5f6368;">
	청크 목록을 불러오는 중...
	</div>
	</div>
	</div>
	</div>

	<!-- 요약 내용 모달 -->
	<div id="summaryModal" class="modal">
	<div class="modal-content chunk-content-modal">
	<div class="modal-header">
	<div class="modal-title" id="summaryModalTitle">요약 내용</div>
	<button class="modal-close" onclick="closeSummaryModal()">×</button>
	</div>
	<div id="summaryContent" class="chunk-content">
	내용을 불러오는 중...
	</div>
	</div>
	</div>

	<!-- 청크 내용 모달 -->
	<div id="chunkContentModal" class="modal">
	<div class="modal-content chunk-content-modal">
	<div class="modal-header">
	<div class="modal-title" id="chunkContentModalTitle">청크 내용</div>
	<button class="modal-close" onclick="closeChunkContentModal()">×</button>
	</div>
	<div id="chunkContent" class="chunk-content">
	내용을 불러오는 중...
	</div>
	</div>
	</div>

	<!-- GraphRAG 모달 -->
	<div id="graphRAGModal" class="modal">
	<div class="modal-content" style="max-width: 1600px; width: 95%; height: 90vh; display: flex; flex-direction: column; padding: 0;">
	<div class="modal-header" style="flex-shrink: 0; padding: 24px 24px 16px 24px; margin-bottom: 0;">
	<div class="modal-title" id="graphRAGModalTitle">GraphRAG 데이터</div>
	<button class="modal-close" onclick="closeGraphRAGModal()">×</button>
	</div>
	<div style="display: flex; flex: 1; overflow: hidden;">
	<!-- 좌측 사이드바 (회차 목록) -->
	<div id="graphRAGSidebar" style="width: 250px; background: #f8f9fa; border-right: 1px solid #e8eaed; overflow-y: auto; flex-shrink: 0; padding: 16px;">
	<div style="font-size: 14px; font-weight: 600; color: #5f6368; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e8eaed;">
	회차 목록
	</div>
	<div id="graphRAGEpisodeList" style="display: flex; flex-direction: column; gap: 4px;">
	<div style="text-align: center; padding: 24px; color: #5f6368; font-size: 13px;">
	회차 목록을 불러오는 중...
	</div>
	</div>
	</div>
	<!-- 우측 콘텐츠 영역 -->
	<div id="graphRAGContent" style="flex: 1; overflow-y: auto; padding: 24px;">
	<div style="text-align: center; padding: 24px; color: #5f6368;">
	GraphRAG 데이터를 불러오는 중...
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- GraphRAG 그래프 시각화 모달 -->
	<div id="graphRAGVisualizationModal" class="modal">
	<div class="modal-content" style="max-width: 1600px; width: 95%; height: 90vh;">
	<div class="modal-header">
	<div class="modal-title" id="graphRAGVisualizationModalTitle">GraphRAG 그래프 시각화</div>
	<button class="modal-close" onclick="closeGraphRAGVisualizationModal()">×</button>
	</div>
	<div style="padding: 16px; border-bottom: 1px solid #dadce0; background: #f8f9fa; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
	<div style="position: relative;">
	<button id="episodeFilterToggle" onclick="toggleEpisodeFilter()" style="padding: 8px 16px; background: white; border: 1px solid #dadce0; border-radius: 6px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #202124; font-weight: 500;">
	<span>회차 필터</span>
	<span id="episodeFilterToggleIcon" style="font-size: 12px; transition: transform 0.2s;">▼</span>
	</button>
	<div id="episodeFilterDropdown" style="display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; background: white; border: 1px solid #dadce0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 250px; max-width: 400px; max-height: 400px; overflow-y: auto;">
	<div style="padding: 12px; border-bottom: 1px solid #e8eaed;">
	<label style="font-size: 13px; cursor: pointer; padding: 6px 8px; border-radius: 4px; display: flex; align-items: center; transition: background 0.2s;" onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='transparent'">
	<input type="checkbox" id="episodeFilterAll" onchange="handleEpisodeFilterAllChange()" style="margin-right: 8px;">
	<span style="font-weight: 500;">전체 회차</span>
	</label>
	</div>
	<div id="episodeFilterList" style="padding: 8px; display: flex; flex-direction: column; gap: 2px;">
	<!-- 회차 체크박스 목록이 여기에 동적으로 추가됩니다 -->
	</div>
	</div>
	</div>
	<label style="font-size: 14px; font-weight: 500; margin-left: 16px;">노드 타입:</label>
	<label style="font-size: 13px; margin-left: 8px;">
	<input type="checkbox" id="showCharacters" checked onchange="updateGraphVisualization()" style="margin-right: 4px;">
	인물
	</label>
	<label style="font-size: 13px; margin-left: 8px;">
	<input type="checkbox" id="showLocations" checked onchange="updateGraphVisualization()" style="margin-right: 4px;">
	장소
	</label>
	<label style="font-size: 13px; margin-left: 8px;">
	<input type="checkbox" id="showEvents" checked onchange="updateGraphVisualization()" style="margin-right: 4px;">
	사건
	</label>
	<button onclick="resetGraphView()" style="padding: 6px 16px; background: #1a73e8; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; margin-left: auto;">
	뷰 리셋
	</button>
	</div>
	<div id="graphRAGVisualizationContent" style="height: calc(90vh - 120px); position: relative; background: #ffffff;">
	<div style="text-align: center; padding: 24px; color: #5f6368; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
	그래프를 불러오는 중...
	</div>
	</div>
	</div>
	</div>

	<!-- vis-network 라이브러리 -->
	<script type="text/javascript" src="https://unpkg.com/vis-network@latest/standalone/umd/vis-network.min.js"></script>

	<script>
	function toggleMobileMenu() {
	const menu = document.getElementById('mobileMenu');
	menu.classList.toggle('active');
	document.body.style.overflow = menu.classList.contains('active') ? 'hidden' : '';
	}

	function closeMobileMenu() {
	const menu = document.getElementById('mobileMenu');
	menu.classList.remove('active');
	document.body.style.overflow = '';
	}

	function closeMobileMenuOnBackdrop(event) {
	if (event.target.id === 'mobileMenu') {
	closeMobileMenu();
	}
	}

	function escapeHtml(text) {
	const div = document.createElement('div');
	div.textContent = text;
	return div.innerHTML;
	}

	function formatFileSize(bytes) {
	if (bytes === 0) return '0 Bytes';
	const k = 1024;
	const sizes = ['Bytes', 'KB', 'MB', 'GB'];
	const i = Math.floor(Math.log(bytes) / Math.log(k));
	return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
	}

	function formatDate(dateString) {
	const date = new Date(dateString);
	return date.toLocaleDateString('ko-KR', {
	year: 'numeric',
	month: 'long',
	day: 'numeric',
	hour: '2-digit',
	minute: '2-digit'
	});
	}

	function showAlert(message, type = 'success') {
	const container = document.getElementById('alertContainer');
	container.innerHTML = `<div class="alert ${type}" style="padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; background: ${type === 'success' ? '#e8f5e9' : '#fce8e6'}; color: ${type === 'success' ? '#137333' : '#c5221f'};">${message}</div>`;
	setTimeout(() => {
	container.innerHTML = '';
	}, 5000);
	}

	async function loadModelFilter() {
	try {
	const response = await fetch('/api/ollama/models');
	if (!response.ok) throw new Error('모델 목록을 불러올 수 없습니다.');
	const data = await response.json();
	const models = data.models \|\| [];

	const filter = document.getElementById('modelFilter');
	filter.innerHTML = '<option value="">모든 모델</option>';
	models.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	option.textContent = model.name;
	filter.appendChild(option);
	});
	} catch (error) {
	console.error('모델 필터 로드 오류:', error);
	}
	}

	async function loadFiles() {
	const tbody = document.getElementById('filesTableBody');
	const modelFilter = document.getElementById('modelFilter');
	const modelName = modelFilter ? modelFilter.value : '';

	tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 24px; color: #5f6368;">파일 목록을 불러오는 중...</td></tr>';

	try {
	const url = modelName ? `/api/files?model_name=${encodeURIComponent(modelName)}` : '/api/files';
	console.log('[파일 목록] API 요청:', url);
	const response = await fetch(url, {
	credentials: 'include'
	});

	console.log('[파일 목록] 응답 상태:', response.status, response.statusText);

	if (!response.ok) {
	const errorText = await response.text();
	console.error('[파일 목록] 응답 오류:', errorText);
	throw new Error(`파일 목록을 불러올 수 없습니다. (${response.status})`);
	}

	const data = await response.json();
	console.log('[파일 목록] 응답 데이터:', data);
	console.log('[파일 목록] files 배열:', data.files);

	const files = data.files \|\| [];
	console.log('[파일 목록] 파일 개수:', files.length);

	if (files.length === 0) {
	tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 24px; color: #5f6368;">업로드된 파일이 없습니다.</td></tr>';
	return;
	}

	tbody.innerHTML = '';
	files.forEach(file => {
	console.log('[파일 목록] 파일 처리:', file);
	const row = document.createElement('tr');
	row.innerHTML = `
	<td>${file.id}</td>
	<td>${escapeHtml(file.original_filename)}</td>
	<td>${escapeHtml(file.model_name \|\| '미지정')}</td>
	<td><span class="badge badge-info">${file.chunk_count \|\| 0}개</span></td>
	<td>${formatFileSize(file.file_size \|\| 0)}</td>
	<td>${formatDate(file.uploaded_at)}</td>
	<td>
	<div class="file-actions">
	<button class="btn btn-secondary" onclick="viewSummary(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">요약 내용 보기</button>
	<button class="btn btn-info" onclick="viewChunks(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">청크 보기</button>
	<button class="btn btn-primary" onclick="viewGraphRAG(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">GraphRAG 보기</button>
	<button class="btn btn-success" onclick="viewGraphRAGVisualization(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px;">그래프 시각화</button>
	</div>
	</td>
	`;
	tbody.appendChild(row);
	});
	} catch (error) {
	console.error('[파일 목록] 로드 오류:', error);
	tbody.innerHTML = `<tr><td colspan="7" style="text-align: center; padding: 24px; color: #c5221f;">파일 목록을 불러오는 중 오류가 발생했습니다.<br><small>${escapeHtml(error.message)}</small></td></tr>`;
	showAlert(`파일 목록을 불러오는 중 오류가 발생했습니다: ${error.message}`, 'error');
	}
	}

	async function viewChunks(fileId, fileName) {
	const modal = document.getElementById('chunksModal');
	const title = document.getElementById('chunksModalTitle');
	const list = document.getElementById('chunksList');

	title.textContent = `청크 목록 - ${fileName}`;
	list.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368;">청크 목록을 불러오는 중...</div>';
	modal.classList.add('active');

	try {
	const response = await fetch(`/api/files/${fileId}/chunks/all`);
	if (!response.ok) throw new Error('청크 목록을 불러올 수 없습니다.');

	const data = await response.json();
	const chunks = data.chunks \|\| [];

	if (chunks.length === 0) {
	list.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368;">생성된 청크가 없습니다.</div>';
	return;
	}

	list.innerHTML = '';
	chunks.forEach(chunk => {
	const chunkItem = document.createElement('div');
	chunkItem.className = 'chunk-item';
	chunkItem.onclick = () => viewChunkContent(chunk, fileName);

	const preview = chunk.content.length > 150
	? chunk.content.substring(0, 150) + '...'
	: chunk.content;

	chunkItem.innerHTML = `
	<div class="chunk-item-header">
	<span class="chunk-item-index">청크 #${chunk.chunk_index}</span>
	<span style="font-size: 12px; color: #5f6368;">${chunk.content_length}자</span>
	</div>
	<div class="chunk-item-preview">${escapeHtml(preview)}</div>
	`;
	list.appendChild(chunkItem);
	});
	} catch (error) {
	console.error('청크 목록 로드 오류:', error);
	list.innerHTML = '<div style="text-align: center; padding: 24px; color: #c5221f;">청크 목록을 불러오는 중 오류가 발생했습니다.</div>';
	showAlert('청크 목록을 불러오는 중 오류가 발생했습니다.', 'error');
	}
	}

	function closeChunksModal() {
	document.getElementById('chunksModal').classList.remove('active');
	}

	function viewChunkContent(chunk, fileName) {
	const modal = document.getElementById('chunkContentModal');
	const title = document.getElementById('chunkContentModalTitle');
	const content = document.getElementById('chunkContent');

	title.textContent = `${fileName} - 청크 #${chunk.chunk_index}`;

	let contentHtml = `<div style="white-space: pre-wrap; font-family: inherit; line-height: 1.6; color: #202124; margin-bottom: 16px;">${escapeHtml(chunk.content)}</div>`;

	if (chunk.metadata) {
	contentHtml += '<div class="chunk-metadata">';
	contentHtml += '<div class="chunk-metadata-title">메타데이터</div>';

	if (chunk.metadata.chapter) {
	contentHtml += `<div class="chunk-metadata-item"><strong>챕터:</strong> ${escapeHtml(chunk.metadata.chapter)}</div>`;
	}
	if (chunk.metadata.pov) {
	contentHtml += `<div class="chunk-metadata-item"><strong>시점:</strong> ${escapeHtml(chunk.metadata.pov)}</div>`;
	}
	if (chunk.metadata.characters && chunk.metadata.characters.length > 0) {
	contentHtml += `<div class="chunk-metadata-item"><strong>등장 인물:</strong> ${escapeHtml(chunk.metadata.characters.join(', '))}</div>`;
	}
	if (chunk.metadata.time_background) {
	contentHtml += `<div class="chunk-metadata-item"><strong>시간 배경:</strong> ${escapeHtml(chunk.metadata.time_background)}</div>`;
	}
	if (chunk.metadata.character_relationships && chunk.metadata.character_relationships.length > 0) {
	contentHtml += `<div class="chunk-metadata-item"><strong>인물 관계:</strong> ${escapeHtml(JSON.stringify(chunk.metadata.character_relationships, null, 2))}</div>`;
	}

	contentHtml += '</div>';
	}

	content.innerHTML = contentHtml;
	modal.classList.add('active');
	}

	async function viewSummary(fileId, fileName) {
	const modal = document.getElementById('summaryModal');
	const title = document.getElementById('summaryModalTitle');
	const content = document.getElementById('summaryContent');

	title.textContent = `요약 내용 - ${fileName}`;
	content.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368;">요약 내용을 불러오는 중...</div>';
	modal.classList.add('active');

	try {
	const response = await fetch(`/api/files/${fileId}/summary`, {
	credentials: 'include'
	});
	if (!response.ok) throw new Error('요약 내용을 불러올 수 없습니다.');

	const data = await response.json();

	let contentHtml = '';

	// Parent Chunk 내용
	if (data.parent_chunk) {
	contentHtml += '<div style="margin-bottom: 32px;">';
	contentHtml += '<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #1a73e8; border-bottom: 2px solid #1a73e8; padding-bottom: 8px;">Parent Chunk (작품 전체 요약)</h3>';

	if (data.parent_chunk.world_view) {
	contentHtml += '<div style="margin-bottom: 16px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1967d2;">세계관</h4>';
	contentHtml += `<div style="white-space: pre-wrap; line-height: 1.6; padding: 12px; background: #f8f9fa; border-radius: 6px;">${escapeHtml(data.parent_chunk.world_view)}</div>`;
	contentHtml += '</div>';
	}

	if (data.parent_chunk.characters) {
	contentHtml += '<div style="margin-bottom: 16px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1967d2;">주요 캐릭터</h4>';
	contentHtml += `<div style="white-space: pre-wrap; line-height: 1.6; padding: 12px; background: #f8f9fa; border-radius: 6px;">${escapeHtml(data.parent_chunk.characters)}</div>`;
	contentHtml += '</div>';
	}

	if (data.parent_chunk.story) {
	contentHtml += '<div style="margin-bottom: 16px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1967d2;">주요 스토리</h4>';
	contentHtml += `<div style="white-space: pre-wrap; line-height: 1.6; padding: 12px; background: #f8f9fa; border-radius: 6px;">${escapeHtml(data.parent_chunk.story)}</div>`;
	contentHtml += '</div>';
	}

	if (data.parent_chunk.episodes) {
	contentHtml += '<div style="margin-bottom: 16px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1967d2;">주요 에피소드</h4>';
	contentHtml += `<div style="white-space: pre-wrap; line-height: 1.6; padding: 12px; background: #f8f9fa; border-radius: 6px;">${escapeHtml(data.parent_chunk.episodes)}</div>`;
	contentHtml += '</div>';
	}

	if (data.parent_chunk.others) {
	contentHtml += '<div style="margin-bottom: 16px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1967d2;">기타</h4>';
	contentHtml += `<div style="white-space: pre-wrap; line-height: 1.6; padding: 12px; background: #f8f9fa; border-radius: 6px;">${escapeHtml(data.parent_chunk.others)}</div>`;
	contentHtml += '</div>';
	}

	contentHtml += '</div>';
	} else {
	contentHtml += '<div style="margin-bottom: 32px; padding: 16px; background: #fff3cd; border-radius: 6px; color: #856404;">Parent Chunk가 생성되지 않았습니다.</div>';
	}

	// Episode Analysis 내용
	if (data.episode_analysis) {
	contentHtml += '<div style="margin-top: 32px; border-top: 2px solid #e8eaed; padding-top: 24px;">';
	contentHtml += '<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #1a73e8; border-bottom: 2px solid #1a73e8; padding-bottom: 8px;">회차별 분석</h3>';
	contentHtml += `<div style="white-space: pre-wrap; line-height: 1.6; padding: 12px; background: #f8f9fa; border-radius: 6px;">${escapeHtml(data.episode_analysis.analysis_content)}</div>`;
	contentHtml += '</div>';
	} else {
	contentHtml += '<div style="margin-top: 32px; padding: 16px; background: #fff3cd; border-radius: 6px; color: #856404;">회차별 분석이 생성되지 않았습니다.</div>';
	}

	if (!data.parent_chunk && !data.episode_analysis) {
	contentHtml = '<div style="text-align: center; padding: 24px; color: #5f6368;">요약 내용이 없습니다.</div>';
	}

	content.innerHTML = contentHtml;
	} catch (error) {
	console.error('요약 내용 로드 오류:', error);
	content.innerHTML = '<div style="text-align: center; padding: 24px; color: #c5221f;">요약 내용을 불러오는 중 오류가 발생했습니다.</div>';
	showAlert('요약 내용을 불러오는 중 오류가 발생했습니다.', 'error');
	}
	}

	function closeSummaryModal() {
	document.getElementById('summaryModal').classList.remove('active');
	}

	function closeChunkContentModal() {
	document.getElementById('chunkContentModal').classList.remove('active');
	}

	// 회차를 숫자 순서로 정렬하는 함수 (1화, 2화... 99화, 100화, 101화)
	function sortEpisodesByNumber(episodes) {
	return episodes.slice().sort((a, b) => {
	// 숫자 추출 (예: "1화" -> 1, "100화" -> 100)
	const numA = parseInt(a.match(/\d+/)?.[0] \|\| '0');
	const numB = parseInt(b.match(/\d+/)?.[0] \|\| '0');
	return numA - numB;
	});
	}

	async function viewGraphRAG(fileId, fileName) {
	const modal = document.getElementById('graphRAGModal');
	const title = document.getElementById('graphRAGModalTitle');
	const content = document.getElementById('graphRAGContent');
	const sidebar = document.getElementById('graphRAGEpisodeList');

	title.textContent = `GraphRAG 데이터 - ${fileName}`;
	content.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368;">GraphRAG 데이터를 불러오는 중...</div>';
	sidebar.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368; font-size: 13px;">회차 목록을 불러오는 중...</div>';
	modal.classList.add('active');

	try {
	const response = await fetch(`/api/files/${fileId}/graph`, {
	credentials: 'include'
	});
	if (!response.ok) throw new Error('GraphRAG 데이터를 불러올 수 없습니다.');

	const data = await response.json();

	// 회차별 데이터 표시 (숫자 순서로 정렬)
	const episodes = sortEpisodesByNumber(data.episodes \|\| []);

	// 사이드바에 회차 목록 표시
	sidebar.innerHTML = '';
	if (episodes.length === 0) {
	sidebar.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368; font-size: 13px;">회차가 없습니다.</div>';
	} else {
	episodes.forEach((episode, index) => {
	const episodeId = `episode-${episode.replace(/[^a-zA-Z0-9]/g, '-')}`;
	const item = document.createElement('div');
	item.className = 'episode-sidebar-item';
	item.textContent = episode;
	item.onclick = () => scrollToEpisode(episodeId);
	if (index === 0) {
	item.classList.add('active');
	}
	sidebar.appendChild(item);
	});
	}

	let contentHtml = '';

	// 통계 정보
	if (data.statistics) {
	contentHtml += '<div style="margin-bottom: 32px; padding: 16px; background: #e8f0fe; border-radius: 6px;">';
	contentHtml += '<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #1a73e8;">통계 정보</h3>';
	contentHtml += '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">';
	contentHtml += `<div style="padding: 12px; background: white; border-radius: 6px;"><strong>엔티티:</strong> ${data.statistics.total_entities}개</div>`;
	contentHtml += `<div style="padding: 12px; background: white; border-radius: 6px;"><strong>관계:</strong> ${data.statistics.total_relationships}개</div>`;
	contentHtml += `<div style="padding: 12px; background: white; border-radius: 6px;"><strong>사건:</strong> ${data.statistics.total_events}개</div>`;
	contentHtml += `<div style="padding: 12px; background: white; border-radius: 6px;"><strong>회차 수:</strong> ${data.statistics.episodes_count}개</div>`;
	contentHtml += '</div>';
	contentHtml += '</div>';
	}

	if (episodes.length === 0) {
	contentHtml += '<div style="text-align: center; padding: 24px; color: #5f6368;">GraphRAG 데이터가 없습니다.</div>';
	} else {
	episodes.forEach(episode => {
	const episodeId = `episode-${episode.replace(/[^a-zA-Z0-9]/g, '-')}`;
	contentHtml += `<div id="${episodeId}" style="margin-bottom: 32px; padding: 20px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #1a73e8; scroll-margin-top: 20px;">`;
	contentHtml += `<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #1a73e8;">${escapeHtml(episode)}</h3>`;

	// 엔티티 (인물)
	const characters = data.entities_by_episode[episode]?.characters \|\| [];
	if (characters.length > 0) {
	contentHtml += '<div style="margin-bottom: 20px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1967d2;">인물</h4>';
	contentHtml += '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px;">';
	characters.forEach(char => {
	contentHtml += '<div style="padding: 12px; background: white; border-radius: 6px; border: 1px solid #e8eaed;">';
	contentHtml += `<div style="font-weight: 600; margin-bottom: 8px; color: #1a73e8;">${escapeHtml(char.entity_name)}</div>`;
	if (char.role) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368; margin-bottom: 4px;"><strong>역할:</strong> ${escapeHtml(char.role)}</div>`;
	}
	if (char.description) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368;">${escapeHtml(char.description)}</div>`;
	}
	contentHtml += '</div>';
	});
	contentHtml += '</div>';
	contentHtml += '</div>';
	}

	// 엔티티 (장소)
	const locations = data.entities_by_episode[episode]?.locations \|\| [];
	if (locations.length > 0) {
	contentHtml += '<div style="margin-bottom: 20px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1967d2;">장소</h4>';
	contentHtml += '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px;">';
	locations.forEach(loc => {
	contentHtml += '<div style="padding: 12px; background: white; border-radius: 6px; border: 1px solid #e8eaed;">';
	contentHtml += `<div style="font-weight: 600; margin-bottom: 8px; color: #1a73e8;">${escapeHtml(loc.entity_name)}</div>`;
	if (loc.category) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368; margin-bottom: 4px;"><strong>유형:</strong> ${escapeHtml(loc.category)}</div>`;
	}
	if (loc.description) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368;">${escapeHtml(loc.description)}</div>`;
	}
	contentHtml += '</div>';
	});
	contentHtml += '</div>';
	contentHtml += '</div>';
	}

	// 관계
	const relationships = data.relationships_by_episode[episode] \|\| [];
	if (relationships.length > 0) {
	contentHtml += '<div style="margin-bottom: 20px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1967d2;">관계</h4>';
	contentHtml += '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px;">';
	relationships.forEach(rel => {
	contentHtml += '<div style="padding: 12px; background: white; border-radius: 6px; border: 1px solid #e8eaed;">';
	contentHtml += `<div style="margin-bottom: 8px;">`;
	contentHtml += `<span style="font-weight: 600; color: #1a73e8;">${escapeHtml(rel.source)}</span>`;
	contentHtml += `<span style="margin: 0 8px; color: #5f6368;">→</span>`;
	contentHtml += `<span style="font-weight: 600; color: #1a73e8;">${escapeHtml(rel.target)}</span>`;
	contentHtml += '</div>';
	if (rel.relationship_type) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368; margin-bottom: 4px;"><strong>관계 유형:</strong> ${escapeHtml(rel.relationship_type)}</div>`;
	}
	if (rel.description) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368; margin-bottom: 4px;">${escapeHtml(rel.description)}</div>`;
	}
	if (rel.event) {
	contentHtml += `<div style="font-size: 12px; color: #856404; padding: 8px; background: #fff3cd; border-radius: 4px; margin-top: 8px;"><strong>관련 사건:</strong> ${escapeHtml(rel.event)}</div>`;
	}
	contentHtml += '</div>';
	});
	contentHtml += '</div>';
	contentHtml += '</div>';
	}

	// 사건
	const events = data.events_by_episode[episode] \|\| [];
	if (events.length > 0) {
	contentHtml += '<div style="margin-bottom: 20px;">';
	contentHtml += '<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1967d2;">사건</h4>';
	contentHtml += '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px;">';
	events.forEach(event => {
	contentHtml += '<div style="padding: 12px; background: white; border-radius: 6px; border: 1px solid #e8eaed;">';
	if (event.event_name) {
	contentHtml += `<div style="font-weight: 600; margin-bottom: 8px; color: #1a73e8;">${escapeHtml(event.event_name)}</div>`;
	}
	if (event.description) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368; margin-bottom: 8px; line-height: 1.6;">${escapeHtml(event.description)}</div>`;
	}
	if (event.participants && event.participants.length > 0) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368; margin-bottom: 4px;"><strong>관련 인물:</strong> ${escapeHtml(event.participants.join(', '))}</div>`;
	}
	if (event.location) {
	contentHtml += `<div style="font-size: 13px; color: #5f6368; margin-bottom: 4px;"><strong>장소:</strong> ${escapeHtml(event.location)}</div>`;
	}
	if (event.significance) {
	contentHtml += `<div style="font-size: 12px; color: #137333; padding: 6px; background: #e8f5e9; border-radius: 4px; margin-top: 8px; display: inline-block;"><strong>중요도:</strong> ${escapeHtml(event.significance)}</div>`;
	}
	contentHtml += '</div>';
	});
	contentHtml += '</div>';
	contentHtml += '</div>';
	}

	contentHtml += '</div>';
	});
	}

	content.innerHTML = contentHtml;

	// 스크롤 이벤트 리스너 추가 (현재 보이는 회차 하이라이트)
	const contentElement = document.getElementById('graphRAGContent');
	contentElement.addEventListener('scroll', () => updateActiveEpisode(episodes));

	// 초기 활성 회차 설정
	updateActiveEpisode(episodes);
	} catch (error) {
	console.error('GraphRAG 데이터 로드 오류:', error);
	content.innerHTML = '<div style="text-align: center; padding: 24px; color: #c5221f;">GraphRAG 데이터를 불러오는 중 오류가 발생했습니다.</div>';
	showAlert('GraphRAG 데이터를 불러오는 중 오류가 발생했습니다.', 'error');
	}
	}

	// 특정 회차로 스크롤
	function scrollToEpisode(episodeId) {
	const element = document.getElementById(episodeId);
	if (element) {
	element.scrollIntoView({ behavior: 'smooth', block: 'start' });

	// 사이드바에서 활성 상태 업데이트
	const sidebarItems = document.querySelectorAll('.episode-sidebar-item');
	sidebarItems.forEach(item => item.classList.remove('active'));

	// 클릭한 아이템 활성화
	const clickedItem = Array.from(sidebarItems).find(item => {
	const itemEpisodeId = `episode-${item.textContent.replace(/[^a-zA-Z0-9]/g, '-')}`;
	return itemEpisodeId === episodeId;
	});
	if (clickedItem) {
	clickedItem.classList.add('active');
	}
	}
	}

	// 현재 보이는 회차를 하이라이트
	function updateActiveEpisode(episodes) {
	const contentElement = document.getElementById('graphRAGContent');
	const sidebarItems = document.querySelectorAll('.episode-sidebar-item');

	if (!contentElement \|\| sidebarItems.length === 0) return;

	const scrollTop = contentElement.scrollTop;
	const viewportHeight = contentElement.clientHeight;
	const scrollBottom = scrollTop + viewportHeight;

	// 통계 정보 섹션 높이 고려 (대략 150px)
	const statsOffset = 150;

	let activeEpisode = null;
	let activeElement = null;

	episodes.forEach(episode => {
	const episodeId = `episode-${episode.replace(/[^a-zA-Z0-9]/g, '-')}`;
	const element = document.getElementById(episodeId);

	if (element) {
	const elementTop = element.offsetTop - statsOffset;
	const elementBottom = elementTop + element.offsetHeight;

	// 요소가 뷰포트 상단 근처에 있으면 활성화
	if (elementTop <= scrollTop + 100 && elementBottom > scrollTop) {
	activeEpisode = episode;
	activeElement = element;
	}
	}
	});

	// 첫 번째 회차가 보이지 않으면 첫 번째 회차를 활성화
	if (!activeEpisode && episodes.length > 0) {
	const firstEpisode = episodes[0];
	const firstElement = document.getElementById(`episode-${firstEpisode.replace(/[^a-zA-Z0-9]/g, '-')}`);
	if (firstElement && firstElement.offsetTop - 150 > scrollTop + viewportHeight) {
	activeEpisode = firstEpisode;
	}
	}

	// 사이드바 아이템 활성 상태 업데이트
	sidebarItems.forEach(item => {
	item.classList.remove('active');
	if (activeEpisode && item.textContent === activeEpisode) {
	item.classList.add('active');
	}
	});
	}

	function closeGraphRAGModal() {
	document.getElementById('graphRAGModal').classList.remove('active');
	}

	// GraphRAG 그래프 시각화 관련 변수
	let graphData = null;
	let graphNetwork = null;
	let allGraphData = null;

	async function viewGraphRAGVisualization(fileId, fileName) {
	const modal = document.getElementById('graphRAGVisualizationModal');
	const title = document.getElementById('graphRAGVisualizationModalTitle');
	const content = document.getElementById('graphRAGVisualizationContent');

	title.textContent = `GraphRAG 그래프 시각화 - ${fileName}`;
	content.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">회차와 노드 타입을 선택하여 그래프를 확인하세요.</div>';
	modal.classList.add('active');

	// 기존 네트워크 제거
	if (graphNetwork) {
	graphNetwork.destroy();
	graphNetwork = null;
	}

	// 체크박스 초기화
	document.getElementById('showCharacters').checked = false;
	document.getElementById('showLocations').checked = false;
	document.getElementById('showEvents').checked = false;

	try {
	const response = await fetch(`/api/files/${fileId}/graph`, {
	credentials: 'include'
	});
	if (!response.ok) throw new Error('GraphRAG 데이터를 불러올 수 없습니다.');

	const data = await response.json();
	allGraphData = data;

	// 회차 필터 체크박스 생성 (숫자 순서로 정렬)
	const episodeFilterList = document.getElementById('episodeFilterList');
	episodeFilterList.innerHTML = '';
	const episodeFilterAll = document.getElementById('episodeFilterAll');
	episodeFilterAll.checked = false;

	if (data.episodes && data.episodes.length > 0) {
	const sortedEpisodes = sortEpisodesByNumber(data.episodes);
	sortedEpisodes.forEach(episode => {
	const label = document.createElement('label');
	label.style.cssText = 'font-size: 13px; cursor: pointer; padding: 6px 12px; border-radius: 4px; display: flex; align-items: center; transition: background 0.2s;';
	label.onmouseover = function() { this.style.background = '#f8f9fa'; };
	label.onmouseout = function() { this.style.background = 'transparent'; };

	const checkbox = document.createElement('input');
	checkbox.type = 'checkbox';
	checkbox.value = episode;
	checkbox.id = `episodeFilter_${episode.replace(/[^a-zA-Z0-9]/g, '_')}`;
	checkbox.onchange = handleIndividualEpisodeChange;
	checkbox.style.marginRight = '8px';
	checkbox.style.cursor = 'pointer';

	const span = document.createElement('span');
	span.textContent = episode;
	span.style.flex = '1';

	label.appendChild(checkbox);
	label.appendChild(span);
	episodeFilterList.appendChild(label);
	});
	}

	// 버튼 텍스트 초기화
	updateEpisodeFilterButtonText();

	// 초기에는 그래프를 생성하지 않음 (빈 화면)
	// 사용자가 필터나 체크박스를 선택하면 그래프가 생성됨
	} catch (error) {
	console.error('GraphRAG 그래프 로드 오류:', error);
	content.innerHTML = '<div style="text-align: center; padding: 24px; color: #c5221f; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">그래프를 불러오는 중 오류가 발생했습니다.</div>';
	}
	}

	function createGraphVisualization(data, episodeFilter = 'all') {
	const content = document.getElementById('graphRAGVisualizationContent');

	// 필터가 선택되지 않았거나 빈 배열인 경우 빈 화면 표시
	if (!episodeFilter \|\| (Array.isArray(episodeFilter) && episodeFilter.length === 0)) {
	content.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">회차를 선택하여 그래프를 확인하세요.</div>';
	return;
	}

	const showCharacters = document.getElementById('showCharacters').checked;
	const showLocations = document.getElementById('showLocations').checked;
	const showEvents = document.getElementById('showEvents').checked;

	// 체크박스가 모두 해제된 경우 빈 화면 표시
	if (!showCharacters && !showLocations && !showEvents) {
	content.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">노드 타입(인물, 장소, 사건)을 하나 이상 선택하여 그래프를 확인하세요.</div>';
	return;
	}

	content.innerHTML = ''; // 기존 내용 제거

	// 노드와 엣지 데이터 생성
	const nodes = new vis.DataSet([]);
	const edges = new vis.DataSet([]);

	const nodeMap = new Map(); // 노드 ID 매핑
	let nodeIdCounter = 1;

	// 필터링할 회차 목록 (다중 선택 지원)
	const episodes = episodeFilter === 'all'
	? (data.episodes \|\| [])
	: (Array.isArray(episodeFilter) ? episodeFilter : [episodeFilter]);

	// 엔티티 추가 (인물, 장소)
	episodes.forEach(episode => {
	const entities = data.entities_by_episode?.[episode] \|\| {};

	// 인물 추가
	if (showCharacters && entities.characters) {
	entities.characters.forEach(char => {
	const nodeId = `char_${char.entity_name}`;
	if (!nodeMap.has(nodeId)) {
	const id = nodeIdCounter++;
	nodeMap.set(nodeId, id);
	nodes.add({
	id: id,
	label: char.entity_name,
	title: `인물: ${char.entity_name}\n역할: ${char.role \|\| '없음'}\n설명: ${char.description \|\| '없음'}`,
	color: {
	background: '#4285f4',
	border: '#1967d2',
	highlight: { background: '#1a73e8', border: '#1557b0' }
	},
	shape: 'ellipse',
	font: { size: 14, face: 'Inter' },
	size: 20
	});
	}
	});
	}

	// 장소 추가
	if (showLocations && entities.locations) {
	entities.locations.forEach(loc => {
	const nodeId = `loc_${loc.entity_name}`;
	if (!nodeMap.has(nodeId)) {
	const id = nodeIdCounter++;
	nodeMap.set(nodeId, id);
	nodes.add({
	id: id,
	label: loc.entity_name,
	title: `장소: ${loc.entity_name}\n유형: ${loc.category \|\| '없음'}\n설명: ${loc.description \|\| '없음'}`,
	color: {
	background: '#34a853',
	border: '#137333',
	highlight: { background: '#2e7d32', border: '#1b5e20' }
	},
	shape: 'box',
	font: { size: 14, face: 'Inter' },
	size: 20
	});
	}
	});
	}
	});

	// 사건 추가
	if (showEvents) {
	episodes.forEach(episode => {
	const events = data.events_by_episode?.[episode] \|\| [];
	events.forEach(event => {
	const eventName = event.event_name \|\| `사건_${episode}_${events.indexOf(event)}`;
	const nodeId = `event_${eventName}`;
	if (!nodeMap.has(nodeId)) {
	const id = nodeIdCounter++;
	nodeMap.set(nodeId, id);
	nodes.add({
	id: id,
	label: eventName,
	title: `사건: ${eventName}\n설명: ${event.description \|\| '없음'}\n관련 인물: ${event.participants ? event.participants.join(', ') : '없음'}\n장소: ${event.location \|\| '없음'}\n중요도: ${event.significance \|\| '없음'}`,
	color: {
	background: '#ff9800',
	border: '#f57c00',
	highlight: { background: '#fb8c00', border: '#e65100' }
	},
	shape: 'diamond',
	font: { size: 13, face: 'Inter' },
	size: 25
	});

	// 사건과 관련 인물 연결
	if (event.participants && Array.isArray(event.participants)) {
	event.participants.forEach(participant => {
	const participantNodeId = `char_${participant}`;
	const participantId = nodeMap.get(participantNodeId);
	if (participantId) {
	edges.add({
	from: participantId,
	to: id,
	label: '참여',
	title: `${participant}이(가) ${eventName}에 참여`,
	color: {
	color: '#ff9800',
	highlight: '#f57c00'
	},
	arrows: 'to',
	font: { size: 11, align: 'middle' },
	dashes: true,
	smooth: {
	type: 'curvedCW',
	roundness: 0.3
	}
	});
	}
	});
	}

	// 사건과 장소 연결
	if (event.location) {
	const locationNodeId = `loc_${event.location}`;
	const locationId = nodeMap.get(locationNodeId);
	if (locationId) {
	edges.add({
	from: locationId,
	to: id,
	label: '발생',
	title: `${eventName}이(가) ${event.location}에서 발생`,
	color: {
	color: '#ff9800',
	highlight: '#f57c00'
	},
	arrows: 'to',
	font: { size: 11, align: 'middle' },
	dashes: [5, 5],
	smooth: {
	type: 'curvedCW',
	roundness: 0.3
	}
	});
	}
	}
	}
	});
	});
	}

	// 관계 추가
	episodes.forEach(episode => {
	const relationships = data.relationships_by_episode?.[episode] \|\| [];
	relationships.forEach(rel => {
	// 소스와 타겟이 인물인지 장소인지 확인
	let sourceNodeId = null;
	let targetNodeId = null;

	// 소스 노드 찾기
	if (nodeMap.has(`char_${rel.source}`)) {
	sourceNodeId = nodeMap.get(`char_${rel.source}`);
	} else if (nodeMap.has(`loc_${rel.source}`)) {
	sourceNodeId = nodeMap.get(`loc_${rel.source}`);
	}

	// 타겟 노드 찾기
	if (nodeMap.has(`char_${rel.target}`)) {
	targetNodeId = nodeMap.get(`char_${rel.target}`);
	} else if (nodeMap.has(`loc_${rel.target}`)) {
	targetNodeId = nodeMap.get(`loc_${rel.target}`);
	}

	if (sourceNodeId && targetNodeId) {
	edges.add({
	from: sourceNodeId,
	to: targetNodeId,
	label: rel.relationship_type \|\| '',
	title: `관계: ${rel.relationship_type \|\| '없음'}\n설명: ${rel.description \|\| '없음'}${rel.event ? `\n관련 사건: ${rel.event}` : ''}`,
	color: {
	color: '#ea4335',
	highlight: '#c5221f'
	},
	arrows: 'to',
	font: { size: 12, align: 'middle' },
	smooth: {
	type: 'curvedCW',
	roundness: 0.2
	}
	});
	}
	});
	});

	// 네트워크 생성
	const container = document.createElement('div');
	container.id = 'graphNetworkContainer';
	container.style.width = '100%';
	container.style.height = '100%';
	content.appendChild(container);

	const graphData = {
	nodes: nodes,
	edges: edges
	};

	const options = {
	nodes: {
	borderWidth: 2,
	shadow: true,
	font: {
	size: 14,
	face: 'Inter'
	}
	},
	edges: {
	width: 2,
	shadow: true,
	font: {
	size: 12,
	align: 'middle'
	},
	arrows: {
	to: {
	enabled: true,
	scaleFactor: 0.8
	}
	}
	},
	physics: {
	enabled: true,
	stabilization: {
	enabled: true,
	iterations: 200
	},
	barnesHut: {
	gravitationalConstant: -2000,
	centralGravity: 0.1,
	springLength: 200,
	springConstant: 0.04,
	damping: 0.09
	}
	},
	interaction: {
	hover: true,
	tooltipDelay: 200,
	zoomView: true,
	dragView: true
	},
	layout: {
	improvedLayout: true
	}
	};

	graphNetwork = new vis.Network(container, graphData, options);

	// 네트워크 이벤트 리스너
	graphNetwork.on('click', function(params) {
	if (params.nodes.length > 0) {
	const nodeId = params.nodes[0];
	const node = nodes.get(nodeId);
	if (node) {
	console.log('선택된 노드:', node);
	}
	}
	});

	// stabilization 완료 후 자동으로 fit() 호출
	graphNetwork.on('stabilizationEnd', function() {
	try {
	graphNetwork.fit({
	animation: {
	duration: 500,
	easingFunction: 'easeInOutQuad'
	}
	});
	} catch (error) {
	console.error('자동 fit() 오류:', error);
	}
	});

	// stabilization이 비활성화된 경우를 대비해 짧은 지연 후에도 fit() 호출
	setTimeout(() => {
	if (graphNetwork && nodes.length() > 0) {
	try {
	graphNetwork.fit({
	animation: {
	duration: 500,
	easingFunction: 'easeInOutQuad'
	}
	});
	} catch (error) {
	console.error('지연 fit() 오류:', error);
	}
	}
	}, 500);
	}

	// 회차 필터 토글 함수
	function toggleEpisodeFilter() {
	const dropdown = document.getElementById('episodeFilterDropdown');
	const icon = document.getElementById('episodeFilterToggleIcon');
	const isVisible = dropdown.style.display !== 'none';

	if (isVisible) {
	dropdown.style.display = 'none';
	icon.style.transform = 'rotate(0deg)';
	} else {
	dropdown.style.display = 'block';
	icon.style.transform = 'rotate(180deg)';
	}
	}

	// 외부 클릭 시 회차 필터 드롭다운 닫기
	document.addEventListener('click', function(event) {
	const dropdown = document.getElementById('episodeFilterDropdown');
	const toggle = document.getElementById('episodeFilterToggle');

	if (dropdown && toggle && !dropdown.contains(event.target) && !toggle.contains(event.target)) {
	dropdown.style.display = 'none';
	document.getElementById('episodeFilterToggleIcon').style.transform = 'rotate(0deg)';
	}
	});

	// 선택된 회차 수 업데이트
	function updateEpisodeFilterButtonText() {
	const toggle = document.getElementById('episodeFilterToggle');
	const episodeFilterAll = document.getElementById('episodeFilterAll');
	const episodeFilterList = document.getElementById('episodeFilterList');

	if (!toggle \|\| !episodeFilterList) return;

	let selectedCount = 0;
	let buttonText = '회차 필터';

	if (episodeFilterAll && episodeFilterAll.checked) {
	buttonText = '회차 필터 (전체)';
	} else {
	const checkboxes = episodeFilterList.querySelectorAll('input[type="checkbox"]:checked');
	selectedCount = checkboxes.length;
	if (selectedCount > 0) {
	buttonText = `회차 필터 (${selectedCount}개 선택)`;
	}
	}

	toggle.querySelector('span:first-child').textContent = buttonText;
	}

	// 전체 회차 체크박스 변경 핸들러
	function handleEpisodeFilterAllChange() {
	const episodeFilterAll = document.getElementById('episodeFilterAll');
	const episodeFilterList = document.getElementById('episodeFilterList');
	const checkboxes = episodeFilterList.querySelectorAll('input[type="checkbox"]');

	// 전체 회차가 체크되면 모든 개별 회차 체크 해제
	if (episodeFilterAll.checked) {
	checkboxes.forEach(checkbox => {
	checkbox.checked = false;
	});
	}

	updateEpisodeFilterButtonText();
	updateGraphVisualization();
	}

	// 개별 회차 체크박스 변경 핸들러 (전체 회차 자동 해제)
	function handleIndividualEpisodeChange() {
	const episodeFilterAll = document.getElementById('episodeFilterAll');
	const episodeFilterList = document.getElementById('episodeFilterList');
	const checkboxes = episodeFilterList.querySelectorAll('input[type="checkbox"]');
	const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;

	// 개별 회차가 하나라도 체크되면 전체 회차 체크 해제
	if (checkedCount > 0) {
	episodeFilterAll.checked = false;
	}

	updateEpisodeFilterButtonText();
	updateGraphVisualization();
	}

	function updateGraphVisualization() {
	if (!allGraphData) return;

	// 선택된 회차들 가져오기
	const episodeFilterAll = document.getElementById('episodeFilterAll');
	let selectedEpisodes = [];

	if (episodeFilterAll.checked) {
	// 전체 회차 선택
	selectedEpisodes = 'all';
	} else {
	// 개별 회차 체크박스에서 선택된 것들 가져오기
	const episodeFilterList = document.getElementById('episodeFilterList');
	const checkboxes = episodeFilterList.querySelectorAll('input[type="checkbox"]:checked');
	selectedEpisodes = Array.from(checkboxes).map(cb => cb.value);
	}

	// 기존 네트워크 제거
	if (graphNetwork) {
	graphNetwork.destroy();
	graphNetwork = null;
	}

	// 새 그래프 생성
	createGraphVisualization(allGraphData, selectedEpisodes);
	}

	function resetGraphView() {
	if (!graphNetwork) {
	console.warn('그래프 네트워크가 아직 생성되지 않았습니다.');
	return;
	}

	try {
	// 그래프를 초기 뷰로 리셋 (모든 노드가 보이도록)
	// vis-network의 fit() 메서드 호출
	if (typeof graphNetwork.fit === 'function') {
	// 옵션 객체를 사용한 fit() 호출
	graphNetwork.fit({
	animation: {
	duration: 1000,
	easingFunction: 'easeInOutQuad'
	}
	});
	} else {
	// fit() 메서드가 없는 경우 (이론적으로는 발생하지 않아야 함)
	console.warn('fit() 메서드를 찾을 수 없습니다.');
	}
	} catch (error) {
	console.error('뷰 리셋 오류:', error);
	// 에러 발생 시 옵션 없이 fit() 호출로 재시도
	try {
	if (typeof graphNetwork.fit === 'function') {
	graphNetwork.fit();
	}
	} catch (e) {
	console.error('뷰 리셋 실패:', e);
	}
	}
	}

	function closeGraphRAGVisualizationModal() {
	document.getElementById('graphRAGVisualizationModal').classList.remove('active');
	if (graphNetwork) {
	graphNetwork.destroy();
	graphNetwork = null;
	}
	graphData = null;
	allGraphData = null;
	}

	// 모달 외부 클릭 시 닫기
	document.getElementById('chunksModal').addEventListener('click', function(e) {
	if (e.target === this) {
	closeChunksModal();
	}
	});

	document.getElementById('summaryModal').addEventListener('click', function(e) {
	if (e.target === this) {
	closeSummaryModal();
	}
	});

	document.getElementById('chunkContentModal').addEventListener('click', function(e) {
	if (e.target === this) {
	closeChunkContentModal();
	}
	});

	document.getElementById('graphRAGModal').addEventListener('click', function(e) {
	if (e.target === this) {
	closeGraphRAGModal();
	}
	});

	document.getElementById('graphRAGVisualizationModal').addEventListener('click', function(e) {
	if (e.target === this) {
	closeGraphRAGVisualizationModal();
	}
	});

	// 페이지 로드 시 초기화
	window.addEventListener('load', () => {
	loadModelFilter();
	loadFiles();
	});
	</script>
	</body>
	</html>