Spaces:

jeongsoo
/

RAG6_DockerLLM_API_Service

Paused

App Files Files Community

RAG6_DockerLLM_API_Service / templates /chat.html

jeongsoo

Add application file

babf3f3 10 months ago

raw

history blame contribute delete

9.87 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="/static/css/style.css">
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
	<!-- Highlight.js for code styling -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
	<!-- Markdown parser -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.2.4/marked.min.js"></script>
	<!-- DOMPurify for sanitizing HTML -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.1/purify.min.js"></script>
	</head>
	<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container">
	<a class="navbar-brand" href="/">
	<i class="fas fa-robot me-2"></i>RAG 챗봇
	</a>
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNav">
	<ul class="navbar-nav ms-auto">
	<li class="nav-item">
	<a class="nav-link" href="/"><i class="fas fa-home me-1"></i>홈</a>
	</li>
	<li class="nav-item">
	<a class="nav-link active" href="/chat"><i class="fas fa-comments me-1"></i>채팅</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="/knowledge"><i class="fas fa-database me-1"></i>지식베이스</a>
	</li>
	</ul>
	</div>
	</div>
	</nav>

	<div class="container mt-4">
	<div class="row">
	<!-- 채팅 영역 -->
	<div class="col-md-8">
	<div class="card shadow-sm">
	<div class="card-header bg-primary text-white">
	<div class="d-flex justify-content-between align-items-center">
	<div>
	<i class="fas fa-comments me-2"></i>채팅
	</div>
	<div>
	<button id="clearChat" class="btn btn-sm btn-light">
	<i class="fas fa-trash me-1"></i>대화 지우기
	</button>
	</div>
	</div>
	</div>
	<div class="card-body">
	<div id="chatMessages" class="chat-messages mb-3"></div>

	<div class="alert alert-info d-none" id="recordingAlert">
	<i class="fas fa-microphone-alt me-2"></i>음성 녹음 중... 클릭하여 중지
	</div>

	<div class="alert alert-warning d-none" id="processingAlert">
	<div class="d-flex align-items-center">
	<div class="spinner-border spinner-border-sm me-2" role="status"></div>
	<div>음성을 처리 중입니다. 잠시만 기다려주세요...</div>
	</div>
	</div>

	<div class="alert alert-warning d-none" id="typingAlert">
	<div class="d-flex align-items-center">
	<div class="spinner-border spinner-border-sm me-2" role="status"></div>
	<div>답변을 생성하고 있습니다...</div>
	</div>
	</div>

	<div id="chatForm">
	<div class="input-group">
	<textarea id="userInput" class="form-control" placeholder="질문을 입력하세요..." rows="2"></textarea>
	<button type="button" id="micButton" class="btn btn-danger">
	<i class="fas fa-microphone"></i>
	</button>
	<button type="button" id="sendButton" class="btn btn-primary">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 설정 및 정보 영역 -->
	<div class="col-md-4">
	<div class="card shadow-sm mb-4">
	<div class="card-header bg-dark text-white">
	<i class="fas fa-cog me-2"></i>설정
	</div>
	<div class="card-body">
	<div class="mb-3">
	<label for="retrieverType" class="form-label">검색 엔진</label>
	<select id="retrieverType" class="form-select">
	<option value="reranker" selected>재순위화 검색</option>
	<option value="vector">벡터 검색</option>
	</select>
	</div>
	<div class="mb-3">
	<label for="topK" class="form-label">참고 문서 수 (Top-K)</label>
	<input type="number" class="form-control" id="topK" min="1" max="10" value="3">
	</div>
	<div class="mb-3">
	<label for="temperature" class="form-label">다양성 (Temperature)</label>
	<input type="range" class="form-range" id="temperature" min="0" max="1" step="0.1" value="0.7">
	<div class="d-flex justify-content-between">
	<small>정확</small>
	<small id="temperatureValue">0.7</small>
	<small>창의적</small>
	</div>
	</div>
	</div>
	</div>

	<div class="card shadow-sm mb-4">
	<div class="card-header bg-dark text-white">
	<i class="fas fa-info-circle me-2"></i>정보
	</div>
	<div class="card-body">
	<h5 class="card-title">사용 방법</h5>
	<ul class="mb-0">
	<li>텍스트를 입력하여 질문하거나</li>
	<li>마이크 버튼을 클릭하여 음성으로 질문할 수 있습니다.</li>
	<li>VITO STT로 음성이 텍스트로 변환됩니다.</li>
	<li>문서를 첨부하려면 지식베이스 메뉴를 이용하세요.</li>
	</ul>
	</div>
	</div>

	<div class="card shadow-sm">
	<div class="card-header bg-success text-white">
	<i class="fas fa-book me-2"></i>참고 문서
	</div>
	<div class="card-body p-0">
	<div id="sourceList" class="list-group list-group-flush">
	<div class="list-group-item text-center text-muted">
	<i>참고 문서가 여기에 표시됩니다</i>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<footer class="bg-dark text-white text-center py-3 mt-5">
	<div class="container">
	<p class="mb-0">RAG 챗봇 클라이언트 © 2025</p>
	</div>
	</footer>

	<!-- 메시지 템플릿 -->
	<template id="userMessageTemplate">
	<div class="chat-message user-message mb-3">
	<div class="d-flex">
	<div class="message-avatar bg-primary text-white">
	<i class="fas fa-user"></i>
	</div>
	<div class="message-content">
	<div class="message-text"></div>
	</div>
	</div>
	</div>
	</template>

	<template id="botMessageTemplate">
	<div class="chat-message bot-message mb-3">
	<div class="d-flex">
	<div class="message-avatar bg-success text-white">
	<i class="fas fa-robot"></i>
	</div>
	<div class="message-content">
	<div class="message-text"></div>
	<div class="message-metadata mt-2 text-muted small">
	<span class="message-sources"></span>
	</div>
	</div>
	</div>
	</div>
	</template>

	<!-- Bootstrap JS Bundle with Popper -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
	<!-- Highlight.js for code highlighting -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
	<!-- 채팅 로직 -->
	<script src="/static/js/chat.js"></script>
	</body>
	</html>