Spaces:

jeongsoo
/

ObsidianStyleGraphViewer

Sleeping

App Files Files Community

ObsidianStyleGraphViewer / templates /index.html

jeongsoo

Initial commit

5ccf0d4 10 months ago

raw

history blame contribute delete

8.18 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>한국어 단어 의미 네트워크 시각화</title>
	<!-- Plotly.js -->
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body {
	font-family: 'Malgun Gothic', 'Apple Gothic', 'NanumGothic', sans-serif;
	padding: 20px;
	background-color: #f8f9fa;
	}
	#graphContainer {
	height: 80vh;
	width: 100%;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	}
	.controls-container {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	}
	.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	}
	.info-section {
	margin-top: 20px;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}
	h1, h3 {
	color: #343a40;
	}
	.btn-primary {
	background-color: #5a67d8;
	border-color: #5a67d8;
	}
	.btn-primary:hover {
	background-color: #4c51bf;
	border-color: #4c51bf;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row mb-4">
	<div class="col-12">
	<h1 class="text-center my-4">한국어 단어 의미 네트워크 시각화</h1>
	<div class="alert alert-info" role="alert">
	이 도구는 한국어 단어들 간의 의미적 관계를 3D 공간에서 시각화합니다. BGE-M3 다국어 임베딩 모델을 사용하여 단어 간 의미적 유사성을 분석합니다.
	</div>
	</div>
	</div>

	<div class="row">
	<div class="col-md-3">
	<div class="controls-container">
	<h3>설정</h3>
	<div class="mb-3">
	<label for="thresholdSlider" class="form-label">유사도 임계값 ({{ threshold }})</label>
	<input type="range" class="form-range" id="thresholdSlider" min="0.1" max="0.9" step="0.05" v-model="threshold">
	<div class="form-text">높은 값 = 더 엄격한 연결 기준 (적은 엣지)</div>
	</div>

	<div class="d-grid gap-2">
	<button class="btn btn-primary" @click="generateGraph" :disabled="isLoading">
	그래프 생성
	</button>
	</div>

	<div class="info-section">
	<h3>데이터 정보</h3>
	<div v-if="dataInfo">
	<p><strong>단어 수:</strong> {{ dataInfo.wordCount }}</p>
	<p><strong>샘플 단어:</strong></p>
	<div class="text-muted">{{ dataInfo.sampleWords.join(', ') }}</div>
	</div>
	<div v-else>
	<p class="text-muted">데이터 정보를 로드 중입니다...</p>
	</div>
	</div>
	</div>
	</div>

	<div class="col-md-9">
	<div id="graphContainer" style="position: relative;">
	<div class="spinner" v-if="isLoading">
	<div class="spinner-border text-primary" role="status">
	<span class="visually-hidden">로딩 중...</span>
	</div>
	</div>
	</div>

	<div class="alert alert-secondary">
	<h5>조작 방법:</h5>
	<ul>
	<li>마우스 휠: 확대/축소</li>
	<li>마우스 드래그: 회전</li>
	<li>마우스 오른쪽 버튼 드래그: 이동</li>
	<li>단어에 마우스 오버: 상세 정보 확인</li>
	</ul>
	</div>
	</div>
	</div>

	<div class="row mt-4">
	<div class="col-12">
	<div class="card">
	<div class="card-body">
	<h3 class="card-title">이 시각화에 대해</h3>
	<p class="card-text">
	이 도구는 다음과 같은 기술을 사용하여 한국어 단어 네트워크를 시각화합니다:
	</p>
	<ul>
	<li><strong>BAAI/bge-m3 임베딩:</strong> 다양한 언어에 최적화된 최신 임베딩 모델로, 한국어에서도 우수한 성능을 보입니다.</li>
	<li><strong>t-SNE 차원 축소:</strong> 복잡한 고차원 벡터를 3D 공간에 투영하여 의미적 관계를 시각화합니다.</li>
	<li><strong>코사인 유사도:</strong> 단어 벡터 간 각도를 기반으로 의미적 유사성을 측정합니다.</li>
	<li><strong>Plotly 시각화:</strong> 인터랙티브한 3D 시각화를 제공합니다.</li>
	</ul>
	<p class="card-text">
	각 단어는 3D 공간의 점으로 표시되며, 유사도가 높은 단어들은 연결선(엣지)으로 연결됩니다. 색상은 z축 값에 따라 다르게 표시됩니다.
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Vue.js -->
	<script src="https://cdn.jsdelivr.net/npm/vue@3.2.36/dist/vue.global.prod.js"></script>
	<!-- Axios -->
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
	const app = Vue.createApp({
	data() {
	return {
	threshold: 0.7,
	isLoading: false,
	dataInfo: null,
	errorMessage: ''
	}
	},
	mounted() {
	this.loadDataInfo();
	this.generateGraph();
	},
	methods: {
	loadDataInfo() {
	axios.get('/data-info')
	.then(response => {
	this.dataInfo = response.data;
	})
	.catch(error => {
	console.error('데이터 정보 로드 오류:', error);
	});
	},
	generateGraph() {
	this.isLoading = true;
	this.errorMessage = '';

	axios.post('/generate-graph', {
	threshold: this.threshold,
	use_default_data: true
	})
	.then(response => {
	const graphData = response.data;
	Plotly.newPlot('graphContainer', JSON.parse(graphData));
	this.isLoading = false;
	})
	.catch(error => {
	console.error('그래프 생성 오류:', error);
	this.errorMessage = '그래프 생성 중 오류가 발생했습니다.';
	this.isLoading = false;
	});
	}
	}
	});

	app.mount('.container');
	</script>
	</body>
	</html>