Spaces:

tekville
/

demo

Sleeping

App Files Files Community

demo / app /templates /search.html

tekville

Initial commit

ff72db3 4 months ago

raw

history blame contribute delete

6.06 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>문서 검색</title>
	<style>
	.container {
	width: 50%;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #f9f9f9;
	}
	.search-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	}
	input[type="text"], select {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	}
	input[type="text"] {
	flex: 1;
	}
	select {
	flex: 0.5;
	}
	button {
	padding: 10px 20px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	}
	button:hover {
	background-color: #0056b3;
	}
	.results, .evaluation, .stream-output {
	margin-top: 5px;
	}
	.stream-output {
	text-align: left;
	white-space: pre-wrap;
	border: 1px solid #ccc;
	padding: 10px;
	height: 500px;
	overflow-y: scroll;
	}
	nav {
	background-color: #333;
	padding: 10px;
	text-align: center;
	}
	nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	}
	nav ul li {
	display: inline;
	margin: 0 15px;
	}
	nav ul li a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	}
	nav ul li a:hover {
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li><a href="/search">문서 검색</a></li>
	<li><a href="/">파일 업로드</a></li>
	</ul>
	</nav>
	</header>
	<div class="container">
	<h2>문서 검색</h2>
	<form id="search-form" class="search-bar">
	<input type="text" id="query" name="query" placeholder="검색어를 입력하세요..." required>
	<select id="model" name="model">
	<option value="Qwen/Qwen2.5-72B-Instruct">Qwen/Qwen2.5-72B-Instruct</option>
	<option value="meta-llama/Llama-3.3-70B-Instruct">meta-llama/Llama-3.3-70B-Instruct</option>
	<option value="CohereForAI/c4ai-command-r-plus-08-2024">CohereForAI/c4ai-command-r-plus-08-2024</option>
	<option value="Qwen/QwQ-32B-Preview">Qwen/QwQ-32B-Preview</option>
	<option value="nvidia/Llama-3.1-Nemotron-70B-Instruct-HF">nvidia/Llama-3.1-Nemotron-70B-Instruct-HF</option>
	<option value="Qwen/Qwen2.5-Coder-32B-Instruct">Qwen/Qwen2.5-Coder-32B-Instruct</option>
	<option value="meta-llama/Llama-3.2-11B-Vision-Instruct">meta-llama/Llama-3.2-11B-Vision-Instruct</option>
	<option value="NousResearch/Hermes-3-Llama-3.1-8B">NousResearch/Hermes-3-Llama-3.1-8B</option>
	<option value="mistralai/Mistral-Nemo-Instruct-2407">mistralai/Mistral-Nemo-Instruct-2407</option>
	<option value="microsoft/Phi-3.5-mini-instruct">microsoft/Phi-3.5-mini-instruct</option>
	</select>
	<button type="submit">검색</button>
	</form>
	<h3>실시간 결과</h3>
	<div id="stream-output" class="stream-output">

	<div id="stream-content">
	<!-- 실시간 데이터가 여기에 표시됩니다 -->
	</div>
	</div>
	</div>

	<script>
	let currentController = null; // 현재 요청을 제어할 AbortController

	document.getElementById("search-form").addEventListener("submit", async (event) => {
	event.preventDefault(); // 기본 폼 제출 방지
	const query = document.getElementById("query").value;
	const model = document.getElementById("model").value;
	const outputContainer = document.getElementById("stream-content");

	// 이전 요청 중단
	if (currentController) {
	currentController.abort();
	}
	currentController = new AbortController();
	const signal = currentController.signal;

	// 출력 초기화
	outputContainer.textContent = "검색 중...\n";

	try {
	const response = await fetch("/search/stream", {
	method: "POST",
	headers: {
	"Content-Type": "application/x-www-form-urlencoded"
	},
	body: new URLSearchParams({ query, model }),
	signal, // AbortController의 signal 전달
	});

	const reader = response.body.getReader();
	const decoder = new TextDecoder("utf-8");

	while (true) {
	const { value, done } = await reader.read();
	if (done) break;
	outputContainer.textContent += decoder.decode(value);
	outputContainer.scrollTop = outputContainer.scrollHeight; // 스크롤 자동 이동
	}
	} catch (error) {
	if (error.name === "AbortError") {
	outputContainer.textContent += "\n요청이 취소되었습니다.\n";
	} else {
	outputContainer.textContent = `오류 발생: ${error.message}`;
	}
	} finally {
	currentController = null; // 현재 요청 완료 후 초기화
	}
	});
	</script>
	</body>
	</html>