Spaces:

wiizm
/

soyailabs

Running on CPU Upgrade

soyailabs / templates /admin_settings.html

GitHub Actions

Auto-deploy from GitHub Actions - 2025-12-12 13:10:39

8d65b61 5 minutes ago

54 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<script type="text/javascript">
	(function(c,l,a,r,i,t,y){
	c[a]=c[a]\|\|function(){(c[a].q=c[a].q\|\|[]).push(arguments)};
	t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
	y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
	})(window, document, "clarity", "script", "ujskfvh0bu");
	</script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI 설정 관리 - 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: 8px;
	align-items: center;
	flex-wrap: wrap;
	}

	/* 드롭다운 메뉴 스타일 */
	.dropdown {
	position: relative;
	display: inline-block;
	}

	/* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
	.dropdown::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 8px;
	}

	.dropdown-toggle {
	padding: 8px 16px;
	background: #f1f3f4;
	color: #202124;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 6px;
	}

	.dropdown-toggle:hover {
	background: #e8eaed;
	}

	.dropdown-toggle::after {
	content: '▼';
	font-size: 10px;
	transition: transform 0.2s;
	}

	.dropdown:hover .dropdown-toggle::after {
	transform: rotate(180deg);
	}

	.dropdown-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	margin-top: 0;
	background: white;
	border: 1px solid #dadce0;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.2s ease;
	z-index: 10000;
	padding: 4px 0;
	pointer-events: none;
	}

	.dropdown:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	}



	.dropdown-item {
	display: block;
	padding: 10px 16px;
	color: #202124;
	text-decoration: none;
	font-size: 14px;
	transition: background 0.2s;
	}

	.dropdown-item:hover {
	background: #f8f9fa;
	}

	.dropdown-item:first-child {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	}

	.dropdown-item:last-child {
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	}

	.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;
	}

	.container {
	max-width: 1200px;
	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;
	}

	.form-group {
	margin-bottom: 16px;
	}

	.form-group label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
	}

	.form-group input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #dadce0;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	}

	.form-group input:focus {
	outline: none;
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
	}

	.alert {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
	}

	.alert.error {
	background: #fce8e6;
	color: #c5221f;
	}

	.alert.success {
	background: #e8f5e9;
	color: #137333;
	}
	</style>
	</head>
	<body>
	<div class="header">
	<div class="header-title">
	<span>⚙️</span>
	<span>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>

	{# 사이트 관리 #}
	<div class="dropdown">
	<button type="button" class="dropdown-toggle">사이트 관리</button>
	<div class="dropdown-menu">
	<a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
	<a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
	</div>
	</div>

	{# 웹소설 관리 #}
	<div class="dropdown">
	<button type="button" class="dropdown-toggle">웹소설 관리</button>
	<div class="dropdown-menu">
	<a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
	<a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
	</div>
	</div>

	{# AI 설정 #}
	<div class="dropdown">
	<button type="button" class="dropdown-toggle">AI 설정</button>
	<div class="dropdown-menu">
	<a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
	<a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
	</div>
	</div>

	{# 챗봇 #}
	<div class="dropdown">
	<button type="button" class="dropdown-toggle">챗봇</button>
	<div class="dropdown-menu">
	<a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
	</div>
	</div>

	{# 편의기능 #}
	<div class="dropdown">
	<button type="button" class="dropdown-toggle">편의기능</button>
	<div class="dropdown-menu">
	<a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
	</div>
	</div>

	{# 메인으로 #}
	<a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
	<a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</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">
	<div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
	<a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
	<a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>

	<div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
	<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>

	<div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
	<a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
	<a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>

	<div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
	<a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>

	<div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
	<a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>

	<div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
	<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>AI 설정 관리</h1>
	<p>Gemini API 키와 AI 모델별 토큰 수를 관리할 수 있습니다.</p>
	</div>

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

	<!-- Gemini API 키 설정 섹션 -->
	<div class="card">
	<div class="card-header">
	<div class="card-title">Gemini API 키 설정</div>
	</div>
	<div style="padding: 16px 0;">
	<div class="form-group">
	<label for="geminiApiKey">Gemini API 키</label>
	<div style="display: flex; gap: 8px;">
	<input type="password" id="geminiApiKey" placeholder="Gemini API 키를 입력하세요" style="flex: 1; padding: 8px 12px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px;">
	<button class="btn btn-primary" onclick="saveGeminiApiKey()">저장</button>
	<button class="btn btn-secondary" onclick="loadGeminiApiKey()">현재 상태 확인</button>
	</div>
	<small style="color: #5f6368; font-size: 12px; display: block; margin-top: 4px;">
	Google AI Studio(<a href="https://aistudio.google.com/app/apikey" target="_blank">https://aistudio.google.com/app/apikey</a>)에서 API 키를 발급받을 수 있습니다.
	</small>
	<div id="geminiApiKeyStatus" style="margin-top: 8px; font-size: 13px;"></div>
	</div>
	</div>
	</div>

	<!-- Hugging Face 토큰 설정 섹션 -->
	<div class="card">
	<div class="card-header">
	<div class="card-title">Hugging Face 토큰 설정</div>
	</div>
	<div style="padding: 16px 0;">
	<div class="form-group">
	<label for="huggingfaceToken">Hugging Face 토큰</label>
	<div style="display: flex; gap: 8px;">
	<input type="password" id="huggingfaceToken" placeholder="Hugging Face 토큰을 입력하세요" style="flex: 1; padding: 8px 12px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px;">
	<button class="btn btn-primary" onclick="saveHuggingFaceToken()">저장</button>
	<button class="btn btn-secondary" onclick="loadHuggingFaceToken()">현재 상태 확인</button>
	</div>
	<small style="color: #5f6368; font-size: 12px; display: block; margin-top: 4px;">
	Hugging Face(<a href="https://huggingface.co/settings/tokens" target="_blank">https://huggingface.co/settings/tokens</a>)에서 토큰을 발급받을 수 있습니다.
	</small>
	<div id="huggingfaceTokenStatus" style="margin-top: 8px; font-size: 13px;"></div>
	</div>
	</div>
	</div>

	<!-- 기본 AI 모델 설정 섹션 -->
	<div class="card">
	<div class="card-header">
	<div class="card-title">기본 AI 모델 설정</div>
	<button class="btn btn-secondary" onclick="loadDefaultModels()">새로고침</button>
	</div>
	<div style="padding: 16px 0;">
	<div id="defaultModelsStatus" style="margin-bottom: 16px; font-size: 13px;"></div>
	<div style="display: grid; gap: 16px;">
	<div class="form-group">
	<label for="defaultAnalysisModel">기본 질문 분석용 AI 모델 (AI 모델 선택)</label>
	<div style="display: flex; gap: 8px;">
	<select id="defaultAnalysisModel" style="flex: 1; padding: 8px 12px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px;">
	<option value="">기본값 없음</option>
	</select>
	<button class="btn btn-primary" onclick="saveDefaultModels()">저장</button>
	</div>
	<small style="color: #5f6368; font-size: 12px; display: block; margin-top: 4px;">
	사용자 화면의 "AI 모델 선택" 드롭다운에서 기본으로 선택될 모델입니다.
	</small>
	</div>
	<div class="form-group">
	<label for="defaultAnswerModel">기본 답변 생성용 AI 모델 (사용 가능한 AI 목록)</label>
	<div style="display: flex; gap: 8px;">
	<select id="defaultAnswerModel" style="flex: 1; padding: 8px 12px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px;">
	<option value="">기본값 없음</option>
	</select>
	<button class="btn btn-primary" onclick="saveDefaultModels()">저장</button>
	</div>
	<small style="color: #5f6368; font-size: 12px; display: block; margin-top: 4px;">
	사용자 화면의 "사용 가능한 AI 목록" 드롭다운에서 기본으로 선택될 모델입니다.
	</small>
	</div>
	</div>
	</div>
	</div>

	<!-- AI 모델별 토큰 수 관리 섹션 -->
	<div class="card">
	<div class="card-header">
	<div class="card-title">AI 모델별 토큰 수 관리</div>
	<button class="btn btn-secondary" onclick="loadModelTokens()">새로고침</button>
	</div>
	<div style="padding: 16px 0;">
	<div id="modelTokensStatus" style="margin-bottom: 16px; font-size: 13px;"></div>
	<div id="modelTokensList" style="display: grid; gap: 12px;">
	<div style="text-align: center; padding: 20px; color: #5f6368;">로딩 중...</div>
	</div>
	</div>
	</div>
	</div>

	<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 showAlert(message, type = 'success') {
	const container = document.getElementById('alertContainer');
	container.innerHTML = `<div class="alert ${type}">${message}</div>`;
	setTimeout(() => {
	container.innerHTML = '';
	}, 5000);
	}

	// Gemini API 키 관련 함수
	async function loadGeminiApiKey() {
	try {
	const response = await fetch('/api/admin/gemini-api-key', {
	credentials: 'include'
	});

	// 응답이 JSON인지 확인
	const contentType = response.headers.get('content-type');
	if (!contentType \|\| !contentType.includes('application/json')) {
	const text = await response.text();
	console.error('Non-JSON response:', text.substring(0, 200));
	const statusDiv = document.getElementById('geminiApiKeyStatus');
	statusDiv.innerHTML = `<span style="color: #ea4335;">서버 오류: 응답 형식이 올바르지 않습니다.</span>`;
	return;
	}

	const data = await response.json();

	const statusDiv = document.getElementById('geminiApiKeyStatus');
	if (!response.ok) {
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${data.error \|\| '알 수 없는 오류'}</span>`;
	return;
	}

	if (data.has_api_key) {
	statusDiv.innerHTML = `<span style="color: #137333;">✓ API 키가 설정되어 있습니다 (${data.masked_key})</span>`;
	} else {
	statusDiv.innerHTML = `<span style="color: #ea4335;">⚠ API 키가 설정되지 않았습니다</span>`;
	}
	} catch (error) {
	console.error('Gemini API 키 로드 오류:', error);
	const statusDiv = document.getElementById('geminiApiKeyStatus');
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${error.message}</span>`;
	}
	}

	async function saveGeminiApiKey() {
	const apiKeyInput = document.getElementById('geminiApiKey');
	const apiKey = apiKeyInput.value.trim();

	if (!apiKey) {
	showAlert('API 키를 입력해주세요.', 'error');
	return;
	}

	try {
	const response = await fetch('/api/admin/gemini-api-key', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	credentials: 'include',
	body: JSON.stringify({ api_key: apiKey })
	});

	// 응답이 JSON인지 확인
	const contentType = response.headers.get('content-type');
	if (!contentType \|\| !contentType.includes('application/json')) {
	const text = await response.text();
	console.error('Non-JSON response:', text.substring(0, 200));
	showAlert('서버 오류: 응답 형식이 올바르지 않습니다.', 'error');
	return;
	}

	const data = await response.json();

	if (response.ok) {
	showAlert(data.message, 'success');
	apiKeyInput.value = ''; // 보안을 위해 입력 필드 초기화
	loadGeminiApiKey(); // 상태 업데이트
	} else {
	showAlert(data.error \|\| 'API 키 저장 중 오류가 발생했습니다.', 'error');
	}
	} catch (error) {
	console.error('Gemini API 키 저장 오류:', error);
	showAlert(`오류: ${error.message}`, 'error');
	}
	}

	// Hugging Face 토큰 관련 함수
	async function loadHuggingFaceToken() {
	try {
	const response = await fetch('/api/admin/huggingface-token', {
	credentials: 'include'
	});

	// 응답이 JSON인지 확인
	const contentType = response.headers.get('content-type');
	if (!contentType \|\| !contentType.includes('application/json')) {
	const text = await response.text();
	console.error('Non-JSON response:', text.substring(0, 200));
	const statusDiv = document.getElementById('huggingfaceTokenStatus');
	statusDiv.innerHTML = `<span style="color: #ea4335;">서버 오류: 응답 형식이 올바르지 않습니다.</span>`;
	return;
	}

	const data = await response.json();

	const statusDiv = document.getElementById('huggingfaceTokenStatus');
	if (!response.ok) {
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${data.error \|\| '알 수 없는 오류'}</span>`;
	return;
	}

	if (data.has_token) {
	statusDiv.innerHTML = `<span style="color: #137333;">✓ 토큰이 설정되어 있습니다 (${data.masked_token})</span>`;
	} else {
	statusDiv.innerHTML = `<span style="color: #ea4335;">⚠ 토큰이 설정되지 않았습니다</span>`;
	}
	} catch (error) {
	console.error('Hugging Face 토큰 로드 오류:', error);
	const statusDiv = document.getElementById('huggingfaceTokenStatus');
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${error.message}</span>`;
	}
	}

	async function saveHuggingFaceToken() {
	const tokenInput = document.getElementById('huggingfaceToken');
	const token = tokenInput.value.trim();

	if (!token) {
	showAlert('토큰을 입력해주세요.', 'error');
	return;
	}

	try {
	const response = await fetch('/api/admin/huggingface-token', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	credentials: 'include',
	body: JSON.stringify({ token: token })
	});

	// 응답이 JSON인지 확인
	const contentType = response.headers.get('content-type');
	if (!contentType \|\| !contentType.includes('application/json')) {
	const text = await response.text();
	console.error('Non-JSON response:', text.substring(0, 200));
	showAlert('서버 오류: 응답 형식이 올바르지 않습니다.', 'error');
	return;
	}

	const data = await response.json();

	if (response.ok) {
	showAlert(data.message, 'success');
	tokenInput.value = ''; // 보안을 위해 입력 필드 초기화
	loadHuggingFaceToken(); // 상태 업데이트
	} else {
	showAlert(data.error \|\| '토큰 저장 중 오류가 발생했습니다.', 'error');
	}
	} catch (error) {
	console.error('Hugging Face 토큰 저장 오류:', error);
	showAlert(`오류: ${error.message}`, 'error');
	}
	}

	// AI 모델별 토큰 수 관리 (입력/출력 분리)
	async function loadModelTokens() {
	const statusDiv = document.getElementById('modelTokensStatus');
	const listDiv = document.getElementById('modelTokensList');

	try {
	statusDiv.innerHTML = '<span style="color: #1a73e8;">토큰 수 설정을 불러오는 중...</span>';
	listDiv.innerHTML = '<div style="text-align: center; padding: 20px; color: #5f6368;">로딩 중...</div>';

	const response = await fetch('/api/admin/model-tokens', {
	credentials: 'include'
	});

	if (!response.ok) {
	const error = await response.json().catch(() => ({ error: '서버 오류' }));
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${error.error \|\| '토큰 수 설정을 불러올 수 없습니다'}</span>`;
	listDiv.innerHTML = '<div style="text-align: center; padding: 20px; color: #ea4335;">토큰 수 설정을 불러올 수 없습니다.</div>';
	return;
	}

	const data = await response.json();

	if (!data.models \|\| data.models.length === 0) {
	statusDiv.innerHTML = '<span style="color: #5f6368;">사용 가능한 AI 모델이 없습니다.</span>';
	listDiv.innerHTML = '<div style="text-align: center; padding: 20px; color: #5f6368;">사용 가능한 AI 모델이 없습니다.</div>';
	return;
	}

	statusDiv.innerHTML = `<span style="color: #137333;">✓ ${data.models.length}개 모델 발견</span>`;

	let html = '';
	data.models.forEach(modelName => {
	// 안전하게 토큰 데이터 접근 (undefined 체크)
	const inputTokens = data.input_tokens \|\| {};
	const outputTokens = data.output_tokens \|\| {};
	const parentChunkTokens = data.parent_chunk_tokens \|\| {};
	const defaultInputTokens = data.default_input_tokens \|\| {};
	const defaultOutputTokens = data.default_output_tokens \|\| {};
	const defaultParentChunkTokens = data.default_parent_chunk_tokens \|\| {};

	const currentInputTokens = inputTokens[modelName] \|\| '';
	const currentOutputTokens = outputTokens[modelName] \|\| '';
	const currentParentChunkTokens = parentChunkTokens[modelName] \|\| '';
	const defaultInputToken = defaultInputTokens[modelName] \|\| 100000;
	const defaultOutputToken = defaultOutputTokens[modelName] \|\| 2000;
	const defaultParentChunkToken = defaultParentChunkTokens[modelName] \|\| 8192;
	const modelType = modelName.startsWith('gemini:') ? 'Gemini' : 'Ollama';
	const displayName = modelName.startsWith('gemini:') ? modelName.replace('gemini:', '') : modelName;

	// 실제 사용 중인 값 계산
	const actualInputToken = currentInputTokens ? parseInt(currentInputTokens) : defaultInputToken;
	const actualOutputToken = currentOutputTokens ? parseInt(currentOutputTokens) : defaultOutputToken;
	const actualParentChunkToken = currentParentChunkTokens ? parseInt(currentParentChunkTokens) : defaultParentChunkToken;

	// 사용 중인 값 표시 텍스트 생성
	const getTokenStatusText = (actual, defaultVal, isUsingDefault) => {
	if (isUsingDefault) {
	return `실제 사용: ${actual.toLocaleString()} (기본값)`;
	} else {
	return `실제 사용: ${actual.toLocaleString()} (설정값)`;
	}
	};

	const inputStatusText = getTokenStatusText(actualInputToken, defaultInputToken, !currentInputTokens);
	const outputStatusText = getTokenStatusText(actualOutputToken, defaultOutputToken, !currentOutputTokens);
	const parentChunkStatusText = getTokenStatusText(actualParentChunkToken, defaultParentChunkToken, !currentParentChunkTokens);

	// 안전한 ID 생성 (특수문자 처리)
	const safeId = modelNameToId(modelName);

	html += `
	<div style="padding: 16px; background: #f8f9fa; border-radius: 6px; border: 1px solid #dadce0; margin-bottom: 12px;" data-model-name="${escapeHtml(modelName)}">
	<div style="margin-bottom: 12px;">
	<div style="font-weight: 500; margin-bottom: 4px; font-size: 15px;">${escapeHtml(displayName)}</div>
	<div style="font-size: 12px; color: #5f6368; line-height: 1.6;">
	<div><strong>타입:</strong> ${modelType}</div>
	<div><strong>입력 토큰:</strong> ${inputStatusText}</div>
	<div><strong>출력 토큰:</strong> ${outputStatusText}</div>
	<div><strong>Parent Chunk 토큰:</strong> ${parentChunkStatusText}</div>
	</div>
	</div>
	<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;">
	<div>
	<label style="display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #202124;">입력 토큰</label>
	<div style="display: flex; gap: 8px;">
	<input
	type="number"
	id="input_tokens_${safeId}"
	data-model-name="${escapeHtml(modelName)}"
	value="${currentInputTokens \|\| ''}"
	placeholder="기본값: ${defaultInputToken.toLocaleString()}"
	min="1"
	style="flex: 1; padding: 6px 10px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px;"
	>
	<button
	class="btn btn-primary"
	onclick="saveModelTokens('${escapeHtml(modelName)}', 'input')"
	style="padding: 6px 12px; font-size: 13px; white-space: nowrap;"
	>
	저장
	</button>
	</div>
	</div>
	<div>
	<label style="display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #202124;">출력 토큰</label>
	<div style="display: flex; gap: 8px;">
	<input
	type="number"
	id="output_tokens_${safeId}"
	data-model-name="${escapeHtml(modelName)}"
	value="${currentOutputTokens \|\| ''}"
	placeholder="기본값: ${defaultOutputToken.toLocaleString()}"
	min="1"
	style="flex: 1; padding: 6px 10px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px;"
	>
	<button
	class="btn btn-primary"
	onclick="saveModelTokens('${escapeHtml(modelName)}', 'output')"
	style="padding: 6px 12px; font-size: 13px; white-space: nowrap;"
	>
	저장
	</button>
	</div>
	</div>
	<div>
	<label style="display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #202124;">Parent Chunk 토큰</label>
	<div style="display: flex; gap: 8px;">
	<input
	type="number"
	id="parent_chunk_tokens_${safeId}"
	data-model-name="${escapeHtml(modelName)}"
	value="${currentParentChunkTokens \|\| ''}"
	placeholder="기본값: ${defaultParentChunkToken.toLocaleString()}"
	min="1"
	style="flex: 1; padding: 6px 10px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px;"
	>
	<button
	class="btn btn-primary"
	onclick="saveModelTokens('${escapeHtml(modelName)}', 'parent_chunk')"
	style="padding: 6px 12px; font-size: 13px; white-space: nowrap;"
	>
	저장
	</button>
	</div>
	</div>
	</div>
	</div>
	`;
	});

	listDiv.innerHTML = html;

	} catch (error) {
	console.error('토큰 수 설정 로드 오류:', error);
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${error.message}</span>`;
	listDiv.innerHTML = '<div style="text-align: center; padding: 20px; color: #ea4335;">토큰 수 설정을 불러오는 중 오류가 발생했습니다.</div>';
	}
	}

	async function saveModelTokens(modelName, tokenType) {
	// tokenType에 따라 input ID 결정 (안전한 ID 사용)
	const safeId = modelNameToId(modelName);
	let inputId;
	if (tokenType === 'input') {
	inputId = `input_tokens_${safeId}`;
	} else if (tokenType === 'output') {
	inputId = `output_tokens_${safeId}`;
	} else if (tokenType === 'parent_chunk') {
	inputId = `parent_chunk_tokens_${safeId}`;
	} else {
	showAlert('잘못된 토큰 타입입니다.', 'error');
	return;
	}

	const input = document.getElementById(inputId);
	if (!input) {
	console.error(`Input element not found: ${inputId}`);
	showAlert('입력 필드를 찾을 수 없습니다. 페이지를 새로고침해주세요.', 'error');
	return;
	}

	const tokens = input.value.trim();
	console.log(`[토큰 저장] 모델: ${modelName}, 타입: ${tokenType}, 값: ${tokens}`);

	// 빈 값이면 기본값으로 되돌리기 (설정 삭제)
	if (!tokens) {
	if (!confirm('입력값이 비어있습니다. 기본값으로 되돌리시겠습니까?')) {
	return;
	}

	try {
	const response = await fetch('/api/admin/model-tokens', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	credentials: 'include',
	body: JSON.stringify({
	model_name: modelName,
	token_type: tokenType,
	tokens: null // null을 보내면 삭제
	})
	});

	const data = await response.json();

	if (response.ok) {
	showAlert('기본값으로 되돌렸습니다.', 'success');
	loadModelTokens(); // 목록 새로고침
	} else {
	showAlert(data.error \|\| '설정 삭제 중 오류가 발생했습니다.', 'error');
	}
	} catch (error) {
	console.error('설정 삭제 오류:', error);
	showAlert(`오류: ${error.message}`, 'error');
	}
	return;
	}

	try {
	const tokensNum = parseInt(tokens);
	if (isNaN(tokensNum) \|\| tokensNum < 1) {
	showAlert('토큰 수는 1 이상의 정수여야 합니다.', 'error');
	return;
	}

	const response = await fetch('/api/admin/model-tokens', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	credentials: 'include',
	body: JSON.stringify({
	model_name: modelName,
	token_type: tokenType,
	tokens: tokensNum
	})
	});

	const data = await response.json();
	console.log(`[토큰 저장 응답]`, data);

	if (response.ok) {
	showAlert(data.message \|\| '토큰 수가 저장되었습니다.', 'success');
	// 약간의 지연 후 목록 새로고침 (서버 반영 시간 고려)
	setTimeout(() => {
	loadModelTokens(); // 목록 새로고침
	}, 300);
	} else {
	console.error(`[토큰 저장 실패]`, data);
	showAlert(data.error \|\| '토큰 수 저장 중 오류가 발생했습니다.', 'error');
	}
	} catch (error) {
	console.error('토큰 수 저장 오류:', error);
	showAlert(`오류: ${error.message}`, 'error');
	}
	}

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

	// 모델명을 안전한 ID로 변환 (특수문자 처리)
	function modelNameToId(modelName) {
	// 특수문자를 언더스코어로 변환
	return modelName.replace(/[^a-zA-Z0-9]/g, '_');
	}

	// ID를 모델명으로 역변환 (언더스코어를 원래 특수문자로 복원)
	// 주의: 이 방법은 완벽하지 않으므로, 대신 data 속성을 사용하는 것이 더 안전합니다
	function idToModelName(id) {
	// 이 함수는 사용하지 않음 - data 속성 사용
	return id;
	}

	// 기본 AI 모델 설정 관련 함수
	async function loadDefaultModels() {
	const statusDiv = document.getElementById('defaultModelsStatus');
	const analysisSelect = document.getElementById('defaultAnalysisModel');
	const answerSelect = document.getElementById('defaultAnswerModel');

	try {
	statusDiv.innerHTML = '<span style="color: #1a73e8;">기본 모델 설정을 불러오는 중...</span>';

	// 모델 목록 가져오기
	const modelsResponse = await fetch('/api/admin/ollama/models', {
	credentials: 'include'
	});

	if (!modelsResponse.ok) {
	throw new Error('모델 목록을 불러올 수 없습니다.');
	}

	const modelsData = await modelsResponse.json();

	// 드롭다운 초기화
	analysisSelect.innerHTML = '<option value="">기본값 없음</option>';
	answerSelect.innerHTML = '<option value="">기본값 없음</option>';

	// 모델을 타입별로 그룹화
	const ollamaModels = [];
	const geminiModels = [];

	if (modelsData.models && modelsData.models.length > 0) {
	modelsData.models.forEach(model => {
	if (model.type === 'ollama') {
	ollamaModels.push(model);
	} else if (model.type === 'gemini') {
	geminiModels.push(model);
	}
	});
	}

	// Ollama 모델 추가
	if (ollamaModels.length > 0) {
	const optgroup1 = document.createElement('optgroup');
	optgroup1.label = 'Ollama 모델';
	ollamaModels.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	option.textContent = model.name;
	optgroup1.appendChild(option);
	});
	analysisSelect.appendChild(optgroup1);

	const optgroup2 = document.createElement('optgroup');
	optgroup2.label = 'Ollama 모델';
	ollamaModels.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	option.textContent = model.name;
	optgroup2.appendChild(option);
	});
	answerSelect.appendChild(optgroup2);
	}

	// Gemini 모델 추가
	if (geminiModels.length > 0) {
	const optgroup1 = document.createElement('optgroup');
	optgroup1.label = 'Gemini 모델';
	geminiModels.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	option.textContent = model.name.replace('gemini:', '');
	optgroup1.appendChild(option);
	});
	analysisSelect.appendChild(optgroup1);

	const optgroup2 = document.createElement('optgroup');
	optgroup2.label = 'Gemini 모델';
	geminiModels.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	option.textContent = model.name.replace('gemini:', '');
	optgroup2.appendChild(option);
	});
	answerSelect.appendChild(optgroup2);
	}

	// 현재 설정된 기본 모델 가져오기
	const defaultResponse = await fetch('/api/admin/default-models', {
	credentials: 'include'
	});

	if (defaultResponse.ok) {
	const defaultData = await defaultResponse.json();
	if (defaultData.default_analysis_model) {
	analysisSelect.value = defaultData.default_analysis_model;
	}
	if (defaultData.default_answer_model) {
	answerSelect.value = defaultData.default_answer_model;
	}
	statusDiv.innerHTML = '<span style="color: #137333;">✓ 기본 모델 설정을 불러왔습니다.</span>';
	} else {
	statusDiv.innerHTML = '<span style="color: #ea4335;">기본 모델 설정을 불러올 수 없습니다.</span>';
	}
	} catch (error) {
	console.error('기본 모델 설정 로드 오류:', error);
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${error.message}</span>`;
	}
	}

	async function saveDefaultModels() {
	const analysisSelect = document.getElementById('defaultAnalysisModel');
	const answerSelect = document.getElementById('defaultAnswerModel');
	const statusDiv = document.getElementById('defaultModelsStatus');

	const defaultAnalysisModel = analysisSelect.value;
	const defaultAnswerModel = answerSelect.value;

	try {
	statusDiv.innerHTML = '<span style="color: #1a73e8;">저장 중...</span>';

	const response = await fetch('/api/admin/default-models', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	credentials: 'include',
	body: JSON.stringify({
	default_analysis_model: defaultAnalysisModel,
	default_answer_model: defaultAnswerModel
	})
	});

	const data = await response.json();

	if (response.ok) {
	showAlert(data.message \|\| '기본 AI 모델이 저장되었습니다.', 'success');
	statusDiv.innerHTML = '<span style="color: #137333;">✓ 기본 모델 설정이 저장되었습니다.</span>';
	} else {
	showAlert(data.error \|\| '기본 모델 설정 저장 중 오류가 발생했습니다.', 'error');
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${data.error \|\| '알 수 없는 오류'}</span>`;
	}
	} catch (error) {
	console.error('기본 모델 설정 저장 오류:', error);
	showAlert(`오류: ${error.message}`, 'error');
	statusDiv.innerHTML = `<span style="color: #ea4335;">오류: ${error.message}</span>`;
	}
	}

	// 페이지 로드 시 API 키 상태 확인 및 토큰 수 설정 로드
	window.addEventListener('load', () => {
	loadGeminiApiKey();
	loadHuggingFaceToken();
	loadModelTokens();
	loadDefaultModels();
	});
	</script>
	</body>
	</html>