Spaces:

jeongsoo
/

RAG_AgenticServer_Small

Sleeping

App Files Files Community

RAG_AgenticServer_Small / templates /index.html

jeongsoo

init

6575706 3 months ago

raw

history blame contribute delete

9.46 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>RAG 검색 챗봇</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/device-style.css') }}">
	</head>
	<body>
	<div class="container">
	<header>
	<h1>RAG 검색 챗봇</h1>
	<div class="header-actions">
	<div class="llm-selector">
	<label for="llmSelect">LLM 선택:</label>
	<select id="llmSelect">
	<!-- 옵션은 JavaScript에서 동적으로 로드됩니다 -->
	</select>
	</div>
	<div class="user-info">
	<span>사용자: {% if session.username %}{{ session.username }}{% else %}손님{% endif %}</span>
	<a href="{{ url_for('logout') }}" class="logout-button">
	<i class="fas fa-sign-out-alt"></i> 로그아웃
	</a>
	</div>
	</div>
	<div class="tabs">
	<button id="chatTab" class="tab active">대화</button>
	<button id="docsTab" class="tab">문서관리</button>
	<button id="deviceTab" class="tab">장치제어</button>
	</div>
	</header>

	<main>
	<!-- 대화 탭 -->
	<section id="chatSection" class="tab-content active">
	<div class="chat-container">
	<div class="chat-messages" id="chatMessages">
	<div class="message system">
	<div class="message-content">
	<p>안녕하세요! 지식베이스에 대해 궁금한 점을 물어보세요. 음성으로 질문하시려면 마이크 버튼을 누르세요.</p>
	</div>
	</div>
	</div>

	<div class="chat-input-container">
	<textarea id="userInput" placeholder="메시지를 입력하세요..." rows="1"></textarea>
	<button id="micButton" class="mic-button">
	<i class="fas fa-microphone"></i>
	</button>
	<button id="sendButton" class="send-button">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>

	<div id="recordingStatus" class="recording-status hidden">
	<div class="recording-indicator">
	<div class="recording-pulse"></div>
	</div>
	<span>녹음 중...</span>
	<button id="stopRecordingButton" class="stop-recording-button">
	<i class="fas fa-stop"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- 문서관리 탭 -->
	<section id="docsSection" class="tab-content">
	<div class="docs-container">
	<div class="upload-section">
	<h2>문서 업로드</h2>
	<p>지식베이스에 추가할 문서를 업로드하세요. (지원 형식: .txt, .md, .csv)</p>

	<form id="uploadForm" enctype="multipart/form-data">
	<div class="file-upload">
	<input type="file" id="documentFile" name="document" accept=".txt,.md,.csv">
	<label for="documentFile">파일 선택</label>
	<span id="fileName">선택된 파일 없음</span>
	</div>

	<button type="submit" id="uploadButton" class="upload-button">
	<i class="fas fa-upload"></i> 업로드
	</button>
	</form>

	<div id="uploadStatus" class="upload-status hidden"></div>
	</div>

	<div class="docs-list-section">
	<h2>문서 목록</h2>
	<button id="refreshDocsButton" class="refresh-button">
	<i class="fas fa-sync-alt"></i> 새로고침
	</button>

	<div class="docs-list-container">
	<table id="docsList" class="docs-list">
	<thead>
	<tr>
	<th>파일명</th>
	<th>청크 수</th>
	<th>유형</th>
	</tr>
	</thead>
	<tbody>
	<!-- 문서 목록이 여기에 동적으로 추가됩니다 -->
	</tbody>
	</table>

	<div id="docsLoading" class="loading-indicator">
	<div class="spinner"></div>
	<p>문서 로딩 중...</p>
	</div>

	<div id="noDocsMessage" class="no-docs-message hidden">
	<p>지식베이스에 등록된 문서가 없습니다. 문서를 업로드해 주세요.</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- 장치 제어 탭 -->
	<section id="deviceSection" class="tab-content">
	<div class="device-connection">
	<h3>1. 장치 서버 연결</h3>
	<div class="device-connection-form">
	<input type="text" id="deviceServerUrlInput" placeholder="LocalPCAgent Ngrok URL 입력 (https://xxxx-xx-xxx-xxx.ngrok-free.app 형식)">
	<button id="connectDeviceServerBtn">연결</button>
	</div>
	<div id="deviceConnectionStatus" class="connection-status disconnected">연결 상태: 연결되지 않음</div>
	</div>

	<div id="deviceBasicFunctions" class="device-functions">
	<h3>2. 기본 기능</h3>
	<div class="function-buttons">
	<button id="checkDeviceStatusBtn">장치 상태 확인</button>
	</div>
	<textarea id="deviceStatusResult" class="device-status-result" readonly></textarea>
	</div>

	<div id="deviceProgramControl" class="program-control">
	<h3>3. 프로그램 실행</h3>
	<div class="function-buttons">
	<button id="getProgramsBtn">프로그램 목록 새로고침</button>
	</div>
	<div id="programsList" class="program-list-container">
	<div class="no-programs-message">프로그램 목록이 여기에 표시됩니다.</div>
	</div>
	<div class="program-select-container">
	<select id="programSelectDropdown">
	<option value="">-- 목록 새로고침 후 선택 --</option>
	</select>
	</div>
	<button id="executeProgramBtn" class="execute-btn" disabled>선택한 프로그램 실행</button>
	<div id="executeResult" class="execute-result"></div>
	</div>

	<!-- 사용자 정의 프로그램 실행 섹션 추가 -->
	<div id="deviceCustomControl" class="program-control">
	<h3>4. 사용자 정의 프로그램 실행</h3>
	<div class="custom-command-container">
	<input type="text" id="customCommandInput" placeholder="실행할 명령어 또는 프로그램 경로 입력">
	<button id="executeCustomBtn">실행</button>
	</div>
	<div id="customExecuteResult" class="execute-result"></div>
	</div>
	</section>
	</main>

	<footer>
	<p>© 2025 RAG 검색 챗봇 \| OpenAI/DeepSeek LLM & VITO STT 활용</p>
	<div class="current-llm">
	<span>Current LLM: </span>
	<span id="currentLLMInfo">-</span>
	</div>
	</footer>
	</div>

	<script src="{{ url_for('static', filename='js/app-core.js') }}"></script>
	<script src="{{ url_for('static', filename='js/app-device.js') }}"></script>
	<script src="{{ url_for('static', filename='js/app.js') }}"></script>
	</body>
	</html>