Spaces:

openfree
/

AI

Running

App Files Files Community

openfree commited on Jun 26

Commit

2a1423f

verified ·

1 Parent(s): 3ff99fb

Create index.html

Browse files

Files changed (1) hide show

index.html +311 -19

index.html CHANGED Viewed

@@ -1,19 +1,311 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingFace & Replicate 트렌딩/신규 URL 추출기</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            padding: 40px;
+            max-width: 900px;
+            width: 100%;
+            backdrop-filter: blur(10px);
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 2rem;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .subtitle {
+            text-align: center;
+            color: #666;
+            margin-bottom: 40px;
+            font-size: 1.1rem;
+        }
+        .service-section {
+            margin-bottom: 30px;
+            background: #f8f9fa;
+            padding: 25px;
+            border-radius: 15px;
+            border: 1px solid #e9ecef;
+        }
+        .service-title {
+            font-size: 1.5rem;
+            color: #333;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .service-icon {
+            width: 30px;
+            height: 30px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .url-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+        }
+        .url-card {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            border: 1px solid #e0e0e0;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .url-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            border-color: #667eea;
+        }
+        .url-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            transform: translateX(-100%);
+            transition: transform 0.3s ease;
+        }
+        .url-card:hover::before {
+            transform: translateX(0);
+        }
+        .url-type {
+            font-weight: 600;
+            color: #667eea;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+        }
+        .url-link {
+            color: #666;
+            font-size: 0.9rem;
+            word-break: break-all;
+            display: block;
+            text-decoration: none;
+        }
+        .url-link:hover {
+            color: #667eea;
+        }
+        .copy-btn {
+            margin-top: 10px;
+            padding: 8px 16px;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            transition: all 0.3s ease;
+        }
+        .copy-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        .copy-btn.copied {
+            background: #4caf50;
+        }
+        .date-info {
+            text-align: center;
+            color: #999;
+            font-size: 0.9rem;
+            margin-top: 30px;
+        }
+        .note {
+            background: #fef3c7;
+            border: 1px solid #fbbf24;
+            border-radius: 10px;
+            padding: 15px;
+            margin-top: 20px;
+            color: #92400e;
+            font-size: 0.9rem;
+        }
+        @media (max-width: 600px) {
+            .container {
+                padding: 20px;
+            }
+            h1 {
+                font-size: 1.5rem;
+            }
+            .service-title {
+                font-size: 1.2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚀 AI 모델 허브 URL 추출기</h1>
+        <p class="subtitle">HuggingFace와 Replicate의 트렌딩 및 신규 모델/스페이스 URL</p>
+        <!-- HuggingFace Models -->
+        <div class="service-section">
+            <h2 class="service-title">
+                <span class="service-icon">🤗</span>
+                HuggingFace Models
+            </h2>
+            <div class="url-grid">
+                <div class="url-card" onclick="copyToClipboard(this, 'https://huggingface.co/models?sort=trending')">
+                    <div class="url-type">📈 트렌딩 모델</div>
+                    <a href="https://huggingface.co/models?sort=trending" target="_blank" class="url-link">
+                        https://huggingface.co/models?sort=trending
+                    </a>
+                    <button class="copy-btn">URL 복사</button>
+                </div>
+                <div class="url-card" onclick="copyToClipboard(this, 'https://huggingface.co/models?sort=created')">
+                    <div class="url-type">🆕 신규 모델</div>
+                    <a href="https://huggingface.co/models?sort=created" target="_blank" class="url-link">
+                        https://huggingface.co/models?sort=created
+                    </a>
+                    <button class="copy-btn">URL 복사</button>
+                </div>
+            </div>
+        </div>
+        <!-- HuggingFace Spaces -->
+        <div class="service-section">
+            <h2 class="service-title">
+                <span class="service-icon">🎯</span>
+                HuggingFace Spaces
+            </h2>
+            <div class="url-grid">
+                <div class="url-card" onclick="copyToClipboard(this, 'https://huggingface.co/spaces?sort=trending')">
+                    <div class="url-type">📈 트렌딩 스페이스</div>
+                    <a href="https://huggingface.co/spaces?sort=trending" target="_blank" class="url-link">
+                        https://huggingface.co/spaces?sort=trending
+                    </a>
+                    <button class="copy-btn">URL 복사</button>
+                </div>
+                <div class="url-card" onclick="copyToClipboard(this, 'https://huggingface.co/spaces?sort=created')">
+                    <div class="url-type">🆕 신규 스페이스</div>
+                    <a href="https://huggingface.co/spaces?sort=created" target="_blank" class="url-link">
+                        https://huggingface.co/spaces?sort=created
+                    </a>
+                    <button class="copy-btn">URL 복사</button>
+                </div>
+            </div>
+        </div>
+        <!-- Replicate -->
+        <div class="service-section">
+            <h2 class="service-title">
+                <span class="service-icon">⚡</span>
+                Replicate
+            </h2>
+            <div class="url-grid">
+                <div class="url-card" onclick="copyToClipboard(this, 'https://replicate.com/explore')">
+                    <div class="url-type">🔥 인기 모델 (Explore)</div>
+                    <a href="https://replicate.com/explore" target="_blank" class="url-link">
+                        https://replicate.com/explore
+                    </a>
+                    <button class="copy-btn">URL 복사</button>
+                </div>
+                <div class="url-card" onclick="copyToClipboard(this, 'https://replicate.com/collections')">
+                    <div class="url-type">📚 컬렉션별 모델</div>
+                    <a href="https://replicate.com/collections" target="_blank" class="url-link">
+                        https://replicate.com/collections
+                    </a>
+                    <button class="copy-btn">URL 복사</button>
+                </div>
+            </div>
+        </div>
+        <div class="note">
+            💡 <strong>참고:</strong> Replicate는 별도의 "신규" 정렬 옵션이 없으며, Explore 페이지에서 최신 및 인기 모델을 함께 확인할 수 있습니다.
+        </div>
+        <p class="date-info">최종 업데이트: 2025년 6월 26일</p>
+    </div>
+    <script>
+        function copyToClipboard(card, url) {
+            // 이벤트 버블링 방지
+            event.preventDefault();
+            event.stopPropagation();
+            // 클립보드에 복사
+            navigator.clipboard.writeText(url).then(() => {
+                const btn = card.querySelector('.copy-btn');
+                const originalText = btn.textContent;
+                // 버튼 텍스트 변경
+                btn.textContent = '✓ 복사됨!';
+                btn.classList.add('copied');
+                // 2초 후 원래 상태로 복원
+                setTimeout(() => {
+                    btn.textContent = originalText;
+                    btn.classList.remove('copied');
+                }, 2000);
+            }).catch(err => {
+                console.error('복사 실패:', err);
+                alert('복사에 실패했습니다. 수동으로 복사해주세요.');
+            });
+        }
+        // URL 카드 클릭 시 링크 열기 (복사 버튼 제외)
+        document.querySelectorAll('.url-card').forEach(card => {
+            card.addEventListener('click', (e) => {
+                if (!e.target.classList.contains('copy-btn')) {
+                    const link = card.querySelector('.url-link');
+                    if (link) {
+                        window.open(link.href, '_blank');
+                    }
+                }
+            });
+        });
+    </script>
+</body>
+</html>