Space-Leaderboard

Running

App Files Files Community

Space-Leaderboard / templates /index.html

seawolf2357

Create templates/index.html

1bba99b verified 10 days ago

raw

history blame contribute delete

23.1 kB

	# app.py의 __main__ 부분 수정 (index.html 템플릿 생성 부분)

	if __name__ == '__main__':
	os.makedirs('templates', exist_ok=True)

	with open('templates/index.html', 'w', encoding='utf-8') as f:
	f.write('''
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hugging Face URL 그리드</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #f4f5f7;
	}

	.container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 1rem;
	}

	.header {
	background-color: #fff;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.user-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	}

	.filter-controls {
	background-color: #fff;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	input[type="password"],
	input[type="text"] {
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-right: 5px;
	}

	button {
	padding: 0.5rem 1rem;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s;
	}

	button:hover {
	background-color: #45a049;
	}

	button.refresh {
	background-color: #2196F3;
	}

	button.refresh:hover {
	background-color: #0b7dda;
	}

	button.logout {
	background-color: #f44336;
	}

	button.logout:hover {
	background-color: #d32f2f;
	}

	.token-help {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: #666;
	}

	.token-help a {
	color: #4CAF50;
	text-decoration: none;
	}

	.token-help a:hover {
	text-decoration: underline;
	}

	/* 그리드 레이아웃 스타일 */
	.grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	}

	.grid-item {
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	}

	.grid-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	}

	.grid-item.liked {
	border-color: #ff4757;
	background-color: #ffebee;
	}

	.grid-header {
	padding: 0.5rem 1rem;
	border-bottom: 1px solid #eee;
	position: relative;
	}

	.grid-title {
	font-size: 1rem;
	margin: 0;
	padding-right: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.grid-content {
	flex: 1;
	position: relative;
	height: 300px;
	}

	.iframe-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	.iframe-container iframe {
	width: 100%;
	height: 100%;
	border: none;
	}

	.like-button {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: transparent;
	font-size: 1.2rem;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #ddd;
	padding: 0;
	}

	.like-button:hover {
	transform: scale(1.2);
	}

	.like-button.liked {
	color: #ff4757;
	}

	.like-badge {
	position: absolute;
	top: -5px;
	left: -5px;
	background-color: #ff4757;
	color: white;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: bold;
	z-index: 10;
	}

	.like-status {
	background-color: #fff;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	display: none;
	}

	.like-status strong {
	color: #ff4757;
	}

	.status-message {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 1rem;
	border-radius: 8px;
	display: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 1000;
	max-width: 300px;
	}

	.success {
	background-color: #4CAF50;
	color: white;
	}

	.error {
	background-color: #f44336;
	color: white;
	}

	.loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	}

	.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	.filter-toggle {
	display: flex;
	}

	.filter-toggle button {
	margin-right: 0.5rem;
	background-color: #f0f0f0;
	color: #333;
	}

	.filter-toggle button.active {
	background-color: #4CAF50;
	color: white;
	}

	.login-section {
	margin-top: 1rem;
	}

	.logged-in-section {
	display: none;
	margin-top: 1rem;
	}

	.note {
	padding: 0.5rem;
	background-color: #fffde7;
	border-left: 3px solid #ffd600;
	margin-bottom: 1rem;
	font-size: 0.9rem;
	}

	.view-toggle {
	margin-top: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.view-toggle button {
	margin-left: 0.5rem;
	}

	/* 반응형 설정 */
	@media (max-width: 1400px) {
	.grid-container {
	grid-template-columns: repeat(3, 1fr);
	}
	}

	@media (max-width: 1024px) {
	.grid-container {
	grid-template-columns: repeat(2, 1fr);
	}
	}

	@media (max-width: 768px) {
	.user-controls {
	flex-direction: column;
	align-items: flex-start;
	}

	.user-controls > div {
	margin-bottom: 1rem;
	}

	.filter-controls {
	flex-direction: column;
	}

	.filter-controls > div {
	margin-bottom: 0.5rem;
	}

	.grid-container {
	grid-template-columns: 1fr;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<div class="user-controls">
	<div>
	<span>허깅페이스 계정: </span>
	<span id="currentUser">로그인되지 않음</span>
	</div>

	<div id="loginSection" class="login-section">
	<input type="password" id="tokenInput" placeholder="허깅페이스 API 토큰 입력" />
	<button id="loginButton">인증하기</button>
	<div class="token-help">
	API 토큰은 <a href="https://huggingface.co/settings/tokens" target="_blank">허깅페이스 토큰 페이지</a>에서 생성할 수 있습니다.
	</div>
	</div>

	<div id="loggedInSection" class="logged-in-section">
	<button id="refreshButton" class="refresh">새로고침</button>
	<button id="logoutButton" class="logout">로그아웃</button>
	</div>
	</div>
	</div>

	<div class="note">
	<p><strong>참고:</strong> 이 페이지는 웹 스크래핑 방식으로 좋아요 상태를 가져옵니다. 좋아요 상태가 정확하지 않거나 지연될 수 있습니다. '새로고침' 버튼을 클릭하여 최신 상태를 가져올 수 있습니다.</p>
	</div>

	<div id="likeStatus" class="like-status">
	<div id="likeStatsText">총 <span id="totalUrlCount">0</span>개 중 <strong><span id="likedUrlCount">0</span>개</strong>의 URL을 좋아요 했습니다.</div>
	</div>

	<div class="filter-controls">
	<div>
	<input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" style="width: 300px;" />
	</div>
	<div class="filter-toggle">
	<button id="allUrlsBtn" class="active">전체 보기</button>
	<button id="likedUrlsBtn">좋아요만 보기</button>
	</div>
	</div>

	<div class="view-toggle">
	<div>
	<input type="checkbox" id="embedToggle" checked />
	<label for="embedToggle">URL 임베딩 보기</label>
	</div>
	</div>

	<div id="statusMessage" class="status-message"></div>

	<div id="loadingIndicator" class="loading">
	<div class="spinner"></div>
	</div>

	<div id="gridContainer" class="grid-container"></div>
	</div>

	<script>
	// DOM 요소 참조
	const elements = {
	tokenInput: document.getElementById('tokenInput'),
	loginButton: document.getElementById('loginButton'),
	logoutButton: document.getElementById('logoutButton'),
	refreshButton: document.getElementById('refreshButton'),
	currentUser: document.getElementById('currentUser'),
	gridContainer: document.getElementById('gridContainer'),
	loadingIndicator: document.getElementById('loadingIndicator'),
	statusMessage: document.getElementById('statusMessage'),
	searchInput: document.getElementById('searchInput'),
	loginSection: document.getElementById('loginSection'),
	loggedInSection: document.getElementById('loggedInSection'),
	likeStatus: document.getElementById('likeStatus'),
	totalUrlCount: document.getElementById('totalUrlCount'),
	likedUrlCount: document.getElementById('likedUrlCount'),
	allUrlsBtn: document.getElementById('allUrlsBtn'),
	likedUrlsBtn: document.getElementById('likedUrlsBtn'),
	embedToggle: document.getElementById('embedToggle')
	};

	// 애플리케이션 상태
	const state = {
	username: null,
	allURLs: [],
	isLoading: false,
	viewMode: 'all', // 'all' 또는 'liked'
	embedView: true // iframe 임베딩 여부
	};

	// 로딩 상태 표시 함수
	function setLoading(isLoading) {
	state.isLoading = isLoading;
	elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
	}

	// 상태 메시지 표시 함수
	function showMessage(message, isError = false) {
	elements.statusMessage.textContent = message;
	elements.statusMessage.className = `status-message ${isError ? 'error' : 'success'}`;
	elements.statusMessage.style.display = 'block';

	// 3초 후 메시지 사라짐
	setTimeout(() => {
	elements.statusMessage.style.display = 'none';
	}, 3000);
	}

	// API 오류 처리 함수
	async function handleApiResponse(response) {
	if (!response.ok) {
	const errorText = await response.text();
	throw new Error(`API 오류 (${response.status}): ${errorText}`);
	}
	return response.json();
	}

	// 좋아요 통계 업데이트
	function updateLikeStats() {
	const totalCount = state.allURLs.length;
	const likedCount = state.allURLs.filter(item => item.is_liked).length;

	elements.totalUrlCount.textContent = totalCount;
	elements.likedUrlCount.textContent = likedCount;
	}

	// 세션 상태 확인
	async function checkSessionStatus() {
	try {
	const response = await fetch('/api/session-status');
	const data = await handleApiResponse(response);

	if (data.logged_in) {
	state.username = data.username;
	elements.currentUser.textContent = data.username;
	elements.loginSection.style.display = 'none';
	elements.loggedInSection.style.display = 'block';
	elements.likeStatus.style.display = 'block';

	// URL 목록 로드
	loadUrls();
	}
	} catch (error) {
	console.error('세션 상태 확인 오류:', error);
	}
	}

	// 로그인 처리
	async function login(token) {
	if (!token.trim()) {
	showMessage('토큰을 입력해주세요.', true);
	return;
	}

	setLoading(true);

	try {
	const formData = new FormData();
	formData.append('token', token);

	const response = await fetch('/api/login', {
	method: 'POST',
	body: formData
	});

	const data = await handleApiResponse(response);

	if (data.success) {
	state.username = data.username;

	elements.currentUser.textContent = state.username;
	elements.loginSection.style.display = 'none';
	elements.loggedInSection.style.display = 'block';
	elements.likeStatus.style.display = 'block';

	showMessage(`${state.username}님으로 로그인되었습니다.`);

	// URL 목록 로드
	loadUrls();
	} else {
	showMessage(data.message \|\| '로그인에 실패했습니다.', true);
	}
	} catch (error) {
	console.error('로그인 오류:', error);
	showMessage(`로그인 오류: ${error.message}`, true);
	} finally {
	setLoading(false);
	}
	}

	// 로그아웃 처리
	async function logout() {
	setLoading(true);

	try {
	const response = await fetch('/api/logout', {
	method: 'POST'
	});

	const data = await handleApiResponse(response);

	if (data.success) {
	state.username = null;
	state.allURLs = [];

	elements.currentUser.textContent = '로그인되지 않음';
	elements.tokenInput.value = '';
	elements.loginSection.style.display = 'block';
	elements.loggedInSection.style.display = 'none';
	elements.likeStatus.style.display = 'none';

	showMessage('로그아웃되었습니다.');

	// 그리드 초기화
	elements.gridContainer.innerHTML = '';
	}
	} catch (error) {
	console.error('로그아웃 오류:', error);
	showMessage(`로그아웃 오류: ${error.message}`, true);
	} finally {
	setLoading(false);
	}
	}

	// 좋아요 상태 새로고침
	async function refreshLikes() {
	setLoading(true);

	try {
	const response = await fetch('/api/refresh-likes', {
	method: 'POST'
	});

	const data = await handleApiResponse(response);

	if (data.success) {
	// URL 목록 다시 로드
	loadUrls();
	showMessage('좋아요 상태가 새로고침되었습니다.');
	} else {
	showMessage(data.message \|\| '좋아요 상태 새로고침에 실패했습니다.', true);
	}
	} catch (error) {
	console.error('좋아요 상태 새로고침 오류:', error);
	showMessage(`좋아요 상태 새로고침 오류: ${error.message}`, true);
	} finally {
	setLoading(false);
	}
	}

	// URL 목록 로드
	async function loadUrls() {
	setLoading(true);

	try {
	const response = await fetch('/api/urls');
	const data = await handleApiResponse(response);

	state.allURLs = data;
	updateLikeStats();
	renderGrid();
	} catch (error) {
	console.error('URL 목록 로드 오류:', error);
	showMessage(`URL 목록 로드 오류: ${error.message}`, true);
	} finally {
	setLoading(false);
	}
	}

	// 좋아요 토글
	async function toggleLike(url) {
	try {
	const response = await fetch('/api/toggle-like', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({ url })
	});

	const data = await handleApiResponse(response);

	if (data.success) {
	// URL 객체 찾기
	const urlObj = state.allURLs.find(item => item.url === url);
	if (urlObj) {
	urlObj.is_liked = data.is_liked;
	updateLikeStats();
	renderGrid();
	}

	showMessage(data.message);
	} else {
	showMessage(data.message \|\| '좋아요 상태 변경에 실패했습니다.', true);
	}
	} catch (error) {
	console.error('좋아요 토글 오류:', error);
	showMessage(`좋아요 토글 오류: ${error.message}`, true);
	}
	}

	// 그리드 렌더링
	function renderGrid() {
	elements.gridContainer.innerHTML = '';

	let urlsToShow = state.allURLs;

	// 검색어로 필터링
	const searchTerm = elements.searchInput.value.trim().toLowerCase();
	if (searchTerm) {
	urlsToShow = urlsToShow.filter(item =>
	item.url.toLowerCase().includes(searchTerm) \|\|
	item.title.toLowerCase().includes(searchTerm)
	);
	}

	// 보기 모드로 필터링 (전체 또는 좋아요만)
	if (state.viewMode === 'liked') {
	urlsToShow = urlsToShow.filter(item => item.is_liked);
	}

	if (urlsToShow.length === 0) {
	const emptyMessage = document.createElement('div');
	emptyMessage.textContent = '표시할 URL이 없습니다.';
	emptyMessage.style.padding = '1rem';
	emptyMessage.style.width = '100%';
	emptyMessage.style.textAlign = 'center';
	elements.gridContainer.appendChild(emptyMessage);
	return;
	}

	// 그리드 아이템 생성
	urlsToShow.forEach(item => {
	const gridItem = document.createElement('div');
	gridItem.className = `grid-item ${item.is_liked ? 'liked' : ''}`;

	if (item.is_liked) {
	const badge = document.createElement('div');
	badge.className = 'like-badge';
	badge.textContent = '좋아요';
	gridItem.appendChild(badge);
	}

	// 헤더 부분
	const header = document.createElement('div');
	header.className = 'grid-header';

	const title = document.createElement('h3');
	title.className = 'grid-title';
	title.textContent = item.title;

	const likeButton = document.createElement('button');
	likeButton.className = `like-button ${item.is_liked ? 'liked' : ''}`;
	likeButton.innerHTML = '❤';
	likeButton.dataset.url = item.url;
	likeButton.addEventListener('click', (e) => {
	e.preventDefault();
	toggleLike(item.url);
	});

	header.appendChild(title);
	header.appendChild(likeButton);

	// 컨텐츠 부분 (iframe 임베딩)
	const content = document.createElement('div');
	content.className = 'grid-content';

	if (state.embedView) {
	const iframeContainer = document.createElement('div');
	iframeContainer.className = 'iframe-container';

	const iframe = document.createElement('iframe');
	iframe.src = item.url;
	iframe.title = item.title;
	iframe.sandbox = 'allow-scripts allow-same-origin allow-forms';
	iframe.loading = 'lazy';

	iframeContainer.appendChild(iframe);
	content.appendChild(iframeContainer);
	} else {
	// 임베딩 없는 경우 링크만 표시
	const linkContainer = document.createElement('div');
	linkContainer.style.padding = '1rem';

	const link = document.createElement('a');
	link.href = item.url;
	link.textContent = item.url;
	link.target = '_blank';

	const owner = document.createElement('div');
	owner.textContent = `소유자: ${item.model_info.owner}`;
	owner.style.marginTop = '0.5rem';

	const repo = document.createElement('div');
	repo.textContent = `저장소: ${item.model_info.repo}`;

	const type = document.createElement('div');
	type.textContent = `유형: ${item.model_info.type}`;

	linkContainer.appendChild(link);
	linkContainer.appendChild(owner);
	linkContainer.appendChild(repo);
	linkContainer.appendChild(type);

	content.appendChild(linkContainer);
	}

	// 그리드 아이템에 추가
	gridItem.appendChild(header);
	gridItem.appendChild(content);

	elements.gridContainer.appendChild(gridItem);
	});
	}

	// 이벤트 리스너 등록
	function registerEventListeners() {
	// 로그인 버튼
	elements.loginButton.addEventListener('click', () => {
	login(elements.tokenInput.value);
	});

	// 엔터 키로 로그인
	elements.tokenInput.addEventListener('keydown', (e) => {
	if (e.key === 'Enter') {
	login(elements.tokenInput.value);
	}
	});

	// 로그아웃 버튼
	elements.logoutButton.addEventListener('click', logout);

	// 새로고침 버튼
	elements.refreshButton.addEventListener('click', refreshLikes);

	// 검색 입력 필드
	elements.searchInput.addEventListener('input', renderGrid);

	// 필터 버튼 - 전체 보기
	elements.allUrlsBtn.addEventListener('click', () => {
	elements.allUrlsBtn.classList.add('active');
	elements.likedUrlsBtn.classList.remove('active');
	state.viewMode = 'all';
	renderGrid();
	});

	// 필터 버튼 - 좋아요만 보기
	elements.likedUrlsBtn.addEventListener('click', () => {
	elements.likedUrlsBtn.classList.add('active');
	elements.allUrlsBtn.classList.remove('active');
	state.viewMode = 'liked';
	renderGrid();
	});

	// 임베딩 토글
	elements.embedToggle.addEventListener('change', () => {
	state.embedView = elements.embedToggle.checked;
	renderGrid();
	});
	}

	// 초기화 함수
	function init() {
	registerEventListeners();
	checkSessionStatus();
	}

	// 애플리케이션 초기화
	init();
	</script>
	</body>
	</html>
	''')

	app.run(debug=True, host='0.0.0.0', port=5000)