Spaces:

cutechicken
/

good

Running

App Files Files Community

good / index.html

cutechicken

Update index.html

eb62174 verified 3 months ago

raw

history blame contribute delete

15.3 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<title>Hugging Face URL 카드 리스트</title>
	<style>
	/* 카드들을 담을 컨테이너 */
	.container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem;
	}
	/* 각 카드 스타일 */
	.card {
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 1rem;
	width: 300px;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
	position: relative;
	background-color: #f9f9f9;
	}
	/* 카드 내부 링크 스타일 */
	.card a {
	text-decoration: none;
	color: #333;
	word-break: break-all;
	}
	/* 좋아요 버튼 기본 스타일 */
	.like-button {
	position: absolute;
	top: 1rem;
	right: 1rem;
	border: none;
	background: transparent;
	font-size: 1.5rem;
	cursor: pointer;
	transition: color 0.2s;
	}
	/* 좋아요 한 상태: 빨간색 */
	.like-button.liked {
	color: red;
	}
	/* 좋아요 안한 상태: 흰색 (테두리 효과) */
	.like-button.not-liked {
	color: white;
	-webkit-text-stroke: 1px #333;
	}
	/* 토큰 입력 및 상태 표시 영역 */
	.auth-controls {
	padding: 1rem;
	margin-bottom: 1rem;
	background-color: #f0f0f0;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	.auth-controls input {
	padding: 0.5rem;
	width: 300px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}
	.auth-controls button {
	padding: 0.5rem 1rem;
	margin-left: 0.5rem;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}
	.auth-controls button:hover {
	background-color: #45a049;
	}
	/* 로딩 표시 */
	.loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	font-size: 1.5rem;
	}
	/* 상태 메시지 */
	.status-message {
	margin: 1rem;
	padding: 1rem;
	border-radius: 4px;
	}
	.success {
	background-color: #dff0d8;
	color: #3c763d;
	}
	.error {
	background-color: #f2dede;
	color: #a94442;
	}
	</style>
	</head>
	<body>
	<!-- 토큰 입력 및 인증 컨트롤 -->
	<div class="auth-controls" id="authControls">
	<div>
	<span>Hugging Face 인증: </span>
	<span id="authStatus">인증되지 않음</span>
	</div>
	<div>
	<input type="password" id="tokenInput" placeholder="Hugging Face API 토큰 입력" />
	<button id="authButton">인증하기</button>
	<button id="logoutButton" style="display: none; background-color: #f44336;">로그아웃</button>
	</div>
	</div>

	<!-- 상태 메시지 -->
	<div id="statusMessage" class="status-message" style="display: none;"></div>

	<!-- 로딩 표시 -->
	<div class="loading" id="loadingIndicator" style="display: none;">
	데이터를 불러오는 중...
	</div>

	<!-- 카드 컨테이너 -->
	<div class="container" id="cardsContainer"></div>

	<script>
	// API 엔드포인트
	const HF_API_BASE = 'https://huggingface.co';

	// 상태 관리
	const state = {
	token: null,
	username: null,
	likedModels: {},
	isLoading: false
	};

	// DOM 요소 참조
	const elements = {
	tokenInput: document.getElementById('tokenInput'),
	authButton: document.getElementById('authButton'),
	logoutButton: document.getElementById('logoutButton'),
	authStatus: document.getElementById('authStatus'),
	cardsContainer: document.getElementById('cardsContainer'),
	loadingIndicator: document.getElementById('loadingIndicator'),
	statusMessage: document.getElementById('statusMessage')
	};

	// Hugging Face의 spaces/models URL 목록
	const urls = [
	"https://huggingface.co/spaces/ginipick/Tech_Hangman_Game",
	"https://huggingface.co/spaces/openfree/deepseek_r1_API",
	"https://huggingface.co/spaces/ginipick/open_Deep-Research",
	"https://huggingface.co/spaces/aiqmaster/open-deep-research",
	"https://huggingface.co/spaces/seawolf2357/DeepSeek-R1-32b-search",
	"https://huggingface.co/spaces/ginigen/LLaDA",
	"https://huggingface.co/spaces/VIDraft/PHI4-Multimodal",
	"https://huggingface.co/spaces/ginigen/Ovis2-8B",
	"https://huggingface.co/spaces/ginigen/Graph-Mind",
	// 나머지 URL 목록... 실제로는 모든 URL을 포함해야 함
	];

	// URL에서 모델/스페이스 ID 추출
	function extractModelInfo(url) {
	try {
	const parts = url.split('/');
	let type, owner, repo;

	// URL 형식에 따라 다른 처리
	if (parts[3] === 'spaces' \|\| parts[3] === 'models') {
	type = parts[3];
	owner = parts[4];
	repo = parts[5];
	} else {
	// 형식이 다른 경우 (예: https://huggingface.co/deepseek/deepseek-ai)
	type = 'models'; // 기본값으로 models 사용
	owner = parts[3];
	repo = parts[4];
	}

	// 없는 값이 있으면 기본값 설정
	type = type \|\| 'models';
	owner = owner \|\| '';
	repo = repo \|\| '';

	return { type, owner, repo, fullId: `${owner}/${repo}` };
	} catch (e) {
	console.error('URL 파싱 오류:', e, url);
	return { type: 'models', owner: '', repo: '', fullId: '' };
	}
	}

	// URL의 마지막 부분을 제목으로 추출 (언더바, 하이픈을 공백으로 변환)
	function extractTitle(url) {
	const parts = url.split("/");
	let title = parts[parts.length - 1];
	return title.replace(/[_-]/g, " ");
	}

	// 로딩 상태 표시 함수
	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);
	}

	// Hugging Face API 호출 함수
	async function fetchWithToken(endpoint, options = {}) {
	if (!state.token) {
	throw new Error('인증 토큰이 없습니다.');
	}

	const url = `${HF_API_BASE}${endpoint}`;
	console.log('API 호출:', url, options.method \|\| 'GET');

	const headers = {
	'Authorization': `Bearer ${state.token}`,
	'Content-Type': 'application/json',
	...options.headers
	};

	try {
	const response = await fetch(url, {
	...options,
	headers
	});

	// 디버깅을 위한 응답 정보 출력
	console.log('API 응답 상태:', response.status, response.statusText);
	return response;
	} catch (error) {
	console.error('API 호출 오류:', error);
	throw error;
	}
	}

	// 사용자 정보 가져오기
	async function fetchUserInfo() {
	const response = await fetchWithToken('/api/whoami-v2');
	if (!response.ok) {
	throw new Error('사용자 정보를 가져오는데 실패했습니다. 상태 코드: ' + response.status);
	}
	return response.json();
	}

	// 사용자가 좋아요한 모델/스페이스 목록 가져오기
	async function fetchLikedRepos() {
	try {
	// 좋아요한 모델 가져오기
	const modelsResponse = await fetchWithToken('/api/me/likes');

	if (!modelsResponse.ok) {
	console.error('좋아요 목록 가져오기 응답:', modelsResponse.status, modelsResponse.statusText);
	throw new Error('좋아요 목록을 가져오는데 실패했습니다. 상태 코드: ' + modelsResponse.status);
	}

	const likedModels = await modelsResponse.json();
	console.log('가져온 좋아요 목록:', likedModels);

	// 결과를 객체로 변환 (빠른 검색을 위해)
	const likedMap = {};
	likedModels.forEach(model => {
	likedMap[`${model.owner}/${model.name}`] = true;
	});

	return likedMap;
	} catch (error) {
	console.error('좋아요 목록 가져오기 오류:', error);
	throw error;
	}
	}

	// 좋아요 토글 API 호출
	async function toggleLikeAPI(type, owner, repo, isLiked) {
	try {
	const method = isLiked ? 'DELETE' : 'POST';
	const response = await fetchWithToken(`/api/${type}/${owner}/${repo}/like`, {
	method
	});

	if (!response.ok) {
	console.error('좋아요 토글 응답:', response.status, response.statusText);
	throw new Error(`좋아요 ${isLiked ? '취소' : '추가'} 실패. 상태 코드: ${response.status}`);
	}

	return response.ok;
	} catch (error) {
	console.error('좋아요 토글 API 오류:', error);
	throw error;
	}
	}

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

	setLoading(true);

	try {
	// 토큰 저장
	state.token = token;
	console.log('인증 시도 (토큰 일부):', token.substring(0, 4) + '...');

	// 사용자 정보 가져오기
	const userInfo = await fetchUserInfo();
	console.log('사용자 정보:', userInfo);

	// 사용자 이름 추출 (API 응답 구조에 따라 다를 수 있음)
	if (userInfo.name) {
	state.username = userInfo.name;
	} else if (userInfo.user && userInfo.user.username) {
	state.username = userInfo.user.username;
	} else if (userInfo.username) {
	state.username = userInfo.username;
	} else {
	state.username = '인증된 사용자';
	}

	// 실제 좋아요 목록 가져오기
	state.likedModels = await fetchLikedRepos();

	// UI 업데이트
	elements.authStatus.textContent = `${state.username}님으로 인증됨`;
	elements.tokenInput.style.display = 'none';
	elements.authButton.style.display = 'none';
	elements.logoutButton.style.display = 'inline-block';

	showMessage('인증 성공! 좋아요 정보를 불러왔습니다.');

	// 카드 다시 렌더링
	renderCards();
	} catch (error) {
	console.error('인증 오류:', error);
	showMessage(`인증에 실패했습니다: ${error.message}`, true);
	state.token = null;
	} finally {
	setLoading(false);
	}
	}

	// 로그아웃 처리
	function logout() {
	// 상태 초기화
	state.token = null;
	state.username = null;
	state.likedModels = {};

	// UI 업데이트
	elements.authStatus.textContent = '인증되지 않음';
	elements.tokenInput.style.display = 'inline-block';
	elements.tokenInput.value = '';
	elements.authButton.style.display = 'inline-block';
	elements.logoutButton.style.display = 'none';

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

	// 카드 다시 렌더링
	renderCards();
	}

	// 좋아요 토글 처리
	async function toggleLike(url, button) {
	if (!state.token) {
	showMessage('좋아요를 하려면 HF 토큰으로 인증이 필요합니다.', true);
	return;
	}

	const modelInfo = extractModelInfo(url);
	const modelId = modelInfo.fullId;
	const isCurrentlyLiked = state.likedModels[modelId] \|\| false;

	setLoading(true);

	try {
	// 실제 API 호출로 좋아요 상태 토글
	await toggleLikeAPI(modelInfo.type, modelInfo.owner, modelInfo.repo, isCurrentlyLiked);

	// 상태 업데이트
	if (isCurrentlyLiked) {
	delete state.likedModels[modelId];
	button.classList.remove("liked");
	button.classList.add("not-liked");
	showMessage(`${modelInfo.repo}에 대한 좋아요를 취소했습니다.`);
	} else {
	state.likedModels[modelId] = true;
	button.classList.add("liked");
	button.classList.remove("not-liked");
	showMessage(`${modelInfo.repo}를 좋아요 했습니다.`);
	}
	} catch (error) {
	showMessage('좋아요 처리 중 오류가 발생했습니다.', true);
	console.error('좋아요 오류:', error);
	} finally {
	setLoading(false);
	}
	}

	// 카드 렌더링
	function renderCards() {
	// 카드 컨테이너 초기화
	elements.cardsContainer.innerHTML = '';

	// 각 URL에 대해 카드 생성
	urls.forEach(url => {
	const card = document.createElement("div");
	card.className = "card";

	// 제목
	const titleEl = document.createElement("h3");
	titleEl.textContent = extractTitle(url);
	card.appendChild(titleEl);

	// URL 링크
	const linkEl = document.createElement("a");
	linkEl.href = url;
	linkEl.textContent = url;
	linkEl.target = "_blank";
	card.appendChild(linkEl);

	// 좋아요 버튼 (♥ 아이콘)
	const likeBtn = document.createElement("button");
	likeBtn.className = "like-button";
	likeBtn.textContent = "♥";

	// 좋아요 상태 설정
	try {
	const modelInfo = extractModelInfo(url);
	const isLiked = state.token && state.likedModels[modelInfo.fullId];

	if (isLiked) {
	likeBtn.classList.add("liked");
	} else {
	likeBtn.classList.add("not-liked");
	}
	} catch (e) {
	// URL 파싱 오류 등 예외 처리
	likeBtn.classList.add("not-liked");
	}

	likeBtn.addEventListener("click", function(e) {
	e.preventDefault(); // 링크 클릭 방지
	toggleLike(url, likeBtn);
	});
	card.appendChild(likeBtn);

	elements.cardsContainer.appendChild(card);
	});
	}

	// 이벤트 리스너 설정
	elements.authButton.addEventListener('click', () => {
	authenticate(elements.tokenInput.value);
	});

	elements.logoutButton.addEventListener('click', logout);

	// 엔터 키로 인증 가능하게
	elements.tokenInput.addEventListener('keypress', (event) => {
	if (event.key === 'Enter') {
	authenticate(elements.tokenInput.value);
	}
	});

	// 초기 렌더링
	renderCards();
	</script>
	</body>
	</html>