Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,570 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #FF9D00;
+    --secondary-color: #FFD21E;
+    --accent-color: #FF6B6B;
+    --dark-bg: #1a1a2e;
+    --card-bg: #16213e;
+    --text-primary: #ffffff;
+    --text-secondary: #e4e4e4;
+    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    min-height: 100vh;
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.header {
+    padding: 1rem;
+    text-align: right;
+}
+
+.built-with {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    color: var(--text-primary);
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.built-with:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+}
+
+.poster-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+
+.poster {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-radius: 30px;
+    padding: 3rem 2rem;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.bg-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.circle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.1;
+    animation: float 20s infinite ease-in-out;
+}
+
+.circle-1 {
+    width: 300px;
+    height: 300px;
+    background: var(--primary-color);
+    top: -100px;
+    right: -100px;
+    animation-delay: 0s;
+}
+
+.circle-2 {
+    width: 200px;
+    height: 200px;
+    background: var(--accent-color);
+    bottom: -50px;
+    left: -50px;
+    animation-delay: 5s;
+}
+
+.circle-3 {
+    width: 150px;
+    height: 150px;
+    background: var(--secondary-color);
+    top: 50%;
+    left: 50%;
+    animation-delay: 10s;
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+    }
+    33% {
+        transform: translate(30px, -30px) scale(1.1);
+    }
+    66% {
+        transform: translate(-30px, 30px) scale(0.9);
+    }
+}
+
+.poster-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    position: relative;
+    z-index: 1;
+}
+
+.logo-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.hf-logo {
+    font-size: 3rem;
+    animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+.main-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.event-title {
+    font-size: 3rem;
+    font-weight: 800;
+    margin: 1rem 0;
+    text-shadow: 0 4px 20px rgba(255, 157, 0, 0.3);
+}
+
+.date-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255, 157, 0, 0.2);
+    padding: 0.75rem 1.5rem;
+    border-radius: 25px;
+    font-size: 1.1rem;
+    border: 2px solid var(--primary-color);
+}
+
+.date-icon {
+    font-size: 1.3rem;
+}
+
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+    position: relative;
+    z-index: 1;
+}
+
+.feature-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    padding: 2rem;
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: var(--gradient-1);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+.card-1::before {
+    background: var(--gradient-1);
+}
+
+.card-2::before {
+    background: var(--gradient-2);
+}
+
+.card-3::before {
+    background: var(--gradient-3);
+}
+
+.card-4::before {
+    background: var(--gradient-4);
+}
+
+.feature-card:hover {
+    transform: translateY(-10px);
+    border-color: var(--primary-color);
+    box-shadow: 0 15px 40px rgba(255, 157, 0, 0.2);
+}
+
+.feature-card:hover::before {
+    transform: scaleX(1);
+}
+
+.card-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    display: inline-block;
+    animation: rotate 3s infinite ease-in-out;
+}
+
+@keyframes rotate {
+    0%, 100% {
+        transform: rotate(0deg);
+    }
+    50% {
+        transform: rotate(10deg);
+    }
+}
+
+.card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: var(--primary-color);
+}
+
+.card-description {
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    font-size: 0.95rem;
+}
+
+.card-list {
+    list-style: none;
+    padding: 0;
+}
+
+.card-list li {
+    padding: 0.5rem 0;
+    padding-left: 1.5rem;
+    position: relative;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.card-list li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--primary-color);
+    font-weight: bold;
+}
+
+.cta-section {
+    text-align: center;
+    margin: 2rem 0;
+    position: relative;
+    z-index: 1;
+}
+
+.cta-content {
+    background: linear-gradient(135deg, rgba(255, 157, 0, 0.2), rgba(255, 210, 30, 0.2));
+    padding: 2rem;
+    border-radius: 20px;
+    border: 2px solid var(--primary-color);
+}
+
+.cta-text {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+}
+
+.cta-button {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: var(--dark-bg);
+    border: none;
+    padding: 1rem 3rem;
+    font-size: 1.2rem;
+    font-weight: 700;
+    border-radius: 30px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 10px 30px rgba(255, 157, 0, 0.3);
+}
+
+.cta-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 40px rgba(255, 157, 0, 0.5);
+}
+
+.poster-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+    position: relative;
+    z-index: 1;
+}
+
+.badge {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.5rem 1.5rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(5px);
+}
+
+.action-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 2rem;
+    flex-wrap: wrap;
+}
+
+.action-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 2rem;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-primary);
+    border-radius: 25px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.action-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+.btn-icon {
+    font-size: 1.2rem;
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+}
+
+.modal-content {
+    background: var(--card-bg);
+    margin: 5% auto;
+    padding: 2rem;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    width: 90%;
+    max-width: 500px;
+    position: relative;
+    animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-50px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.close-btn {
+    color: var(--text-secondary);
+    float: right;
+    font-size: 2rem;
+    font-weight: bold;
+    cursor: pointer;
+    line-height: 1;
+    transition: color 0.3s ease;
+}
+
+.close-btn:hover {
+    color: var(--primary-color);
+}
+
+.modal-content h2 {
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+}
+
+.modal-description {
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+}
+
+.signup-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group label {
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.form-group input,
+.form-group select {
+    padding: 0.75rem;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+    color: var(--text-primary);
+    font-size: 1rem;
+    transition: all 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.submit-btn {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: var(--dark-bg);
+    border: none;
+    padding: 1rem;
+    font-size: 1.1rem;
+    font-weight: 700;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.submit-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(255, 157, 0, 0.3);
+}
+
+/* Footer */
+.site-footer {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.site-footer a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.site-footer a:hover {
+    color: var(--secondary-color);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .main-title {
+        font-size: 1.8rem;
+    }
+
+    .event-title {
+        font-size: 2rem;
+    }
+
+    .poster {
+        padding: 2rem 1.5rem;
+    }
+
+    .content-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .cta-text {
+        font-size: 1.2rem;
+    }
+
+    .modal-content {
+        width: 95%;
+        padding: 1.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hf-logo {
+        font-size: 2rem;
+    }
+
+    .main-title {
+        font-size: 1.5rem;
+    }
+
+    .event-title {
+        font-size: 1.5rem;
+    }
+
+    .date-badge {
+        font-size: 0.9rem;
+        padding: 0.5rem 1rem;
+    }
+
+    .feature-card {
+        padding: 1.5rem;
+    }
+
+    .card-title {
+        font-size: 1.2rem;
+    }
+
+    .action-btn {
+        padding: 0.75rem 1.5rem;
+        font-size: 0.9rem;
+    }
+}

assets/js/script.js

@@ -0,0 +1,138 @@
+// Modal functions
+function showModal() {
+    const modal = document.getElementById('modal');
+    modal.style.display = 'block';
+    document.body.style.overflow = 'hidden';
+}
+
+function closeModal() {
+    const modal = document.getElementById('modal');
+    modal.style.display = 'none';
+    document.body.style.overflow = 'auto';
+}
+
+// Close modal when clicking outside
+window.onclick = function(event) {
+    const modal = document.getElementById('modal');
+    if (event.target === modal) {
+        closeModal();
+    }
+}
+
+// Form submission handler
+function handleSubmit(event) {
+    event.preventDefault();
+    
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const interest = document.getElementById('interest').value;
+    
+    // Simulate form submission
+    alert(`感谢您的报名!\n\n姓名: ${name}\n邮箱: ${email}\n感兴趣的主题: ${getInterestText(interest)}\n\n我们将在活动开始前向您发送详细信息。`);
+    
+    // Reset form and close modal
+    event.target.reset();
+    closeModal();
+}
+
+function getInterestText(value) {
+    const interests = {
+        'papers': '热门论文盘点',
+        'courses': 'AI 课程共学',
+        'models': '模型能力探索',
+        'anycoder': 'AnyCoder 实战'
+    };
+    return interests[value] || '';
+}
+
+// Download poster function
+function downloadPoster() {
+    // In a real implementation, this would generate and download an image
+    alert('海报下载功能已触发！\n\n在实际应用中，这里会将海报转换为图片并下载到您的设备。');
+    
+    // Optional: You could use html2canvas library to convert the poster to image
+    // Example code (requires html2canvas library):
+    // html2canvas(document.querySelector('.poster')).then(canvas => {
+    //     const link = document.createElement('a');
+    //     link.download = 'huggingface-guoqing-poster.png';
+    //     link.href = canvas.toDataURL();
+    //     link.click();
+    // });
+}
+
+// Share poster function
+function sharePoster() {
+    const shareData = {
+        title: 'Hugging Face 国庆 8 日游',
+        text: '第三季度热门论文盘点、AI课程共学、模型能力探索，精彩内容不容错过！',
+        url: window.location.href
+    };
+    
+    // Check if Web Share API is supported
+    if (navigator.share) {
+        navigator.share(shareData)
+            .then(() => console.log('分享成功'))
+            .catch((error) => console.log('分享失败', error));
+    } else {
+        // Fallback: Copy link to clipboard
+        navigator.clipboard.writeText(window.location.href)
+            .then(() => {
+                alert('链接已复制到剪贴板！\n\n您可以将链接分享给朋友。');
+            })
+            .catch(() => {
+                alert('分享链接：\n' + window.location.href);
+            });
+    }
+}
+
+// Add smooth scroll animation for cards
+document.addEventListener('DOMContentLoaded', function() {
+    const cards = document.querySelectorAll('.feature-card');
+    
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '0';
+                entry.target.style.transform = 'translateY(30px)';
+                
+                setTimeout(() => {
+                    entry.target.style.transition = 'all 0.6s ease';
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }, 100);
+                
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    
+    cards.forEach(card => {
+        observer.observe(card);
+    });
+});
+
+// Add keyboard navigation
+document.addEventListener('keydown', function(event) {
+    const modal = document.getElementById('modal');
+    
+    // Close modal on ESC key
+    if (event.key === 'Escape' && modal.style.display === 'block') {
+        closeModal();
+    }
+});
+
+// Add parallax effect to background circles
+window.addEventListener('scroll', function() {
+    const circles = document.querySelectorAll('.circle');
+    const scrolled = window.pageYOffset;
+    
+    circles.forEach((circle, index) => {
+        const speed = 0.5 + (index * 0.2);
+        circle.style.transform = `translateY(${scrolled * speed}px)`;
+    });
+});

index.html

@@ -1,19 +1,159 @@
-<!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="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Hugging Face 国庆 8 日游 - 第三季度热门论文盘点、AI课程共学、模型能力探索">
+    <title>Hugging Face 国庆 8 日游</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+    <header class="header">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
+    </header>
+
+    <main class="poster-container">
+        <div class="poster">
+            <!-- Background decoration -->
+            <div class="bg-decoration">
+                <div class="circle circle-1"></div>
+                <div class="circle circle-2"></div>
+                <div class="circle circle-3"></div>
+            </div>
+
+            <!-- Header Section -->
+            <div class="poster-header">
+                <div class="logo-section">
+                    <div class="hf-logo">🤗</div>
+                    <h1 class="main-title">Hugging Face</h1>
+                </div>
+                <h2 class="event-title">国庆 8 日游</h2>
+                <div class="date-badge">
+                    <span class="date-icon">📅</span>
+                    <span>10月1日 - 10月8日</span>
+                </div>
+            </div>
+
+            <!-- Content Grid -->
+            <div class="content-grid">
+                <!-- Card 1 -->
+                <div class="feature-card card-1">
+                    <div class="card-icon">📚</div>
+                    <h3 class="card-title">Q3 热门论文盘点</h3>
+                    <p class="card-description">第三季度各方向热门论文深度解析</p>
+                    <ul class="card-list">
+                        <li>LLM 最新突破</li>
+                        <li>多模态研究进展</li>
+                        <li>高效训练技术</li>
+                    </ul>
+                </div>
+
+                <!-- Card 2 -->
+                <div class="feature-card card-2">
+                    <div class="card-icon">🎓</div>
+                    <h3 class="card-title">AI 课程共学</h3>
+                    <p class="card-description">多领域课程体系化学习</p>
+                    <ul class="card-list">
+                        <li>Agent 智能体开发</li>
+                        <li>Diffusion 扩散模型</li>
+                        <li>RL 强化学习</li>
+                        <li>MCP 协议实践</li>
+                    </ul>
+                </div>
+
+                <!-- Card 3 -->
+                <div class="feature-card card-3">
+                    <div class="card-icon">🚀</div>
+                    <h3 class="card-title">模型能力探索</h3>
+                    <p class="card-description">最新主流模型边界测试</p>
+                    <ul class="card-list">
+                        <li>GPT-4 系列评测</li>
+                        <li>Claude 能力分析</li>
+                        <li>开源模型对比</li>
+                    </ul>
+                </div>
+
+                <!-- Card 4 -->
+                <div class="feature-card card-4">
+                    <div class="card-icon">💻</div>
+                    <h3 class="card-title">AnyCoder 实战</h3>
+                    <p class="card-description">深入使用 AI 编程助手</p>
+                    <ul class="card-list">
+                        <li>代码生成技巧</li>
+                        <li>项目实战演练</li>
+                        <li>最佳实践分享</li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- CTA Section -->
+            <div class="cta-section">
+                <div class="cta-content">
+                    <p class="cta-text">🎉 8 天精彩旅程，与 AI 同行</p>
+                    <button class="cta-button" onclick="showModal()">立即参与</button>
+                </div>
+            </div>
+
+            <!-- Footer badges -->
+            <div class="poster-footer">
+                <div class="badge">免费参与</div>
+                <div class="badge">在线直播</div>
+                <div class="badge">实战演练</div>
+                <div class="badge">社区交流</div>
+            </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="action-buttons">
+            <button class="action-btn download-btn" onclick="downloadPoster()">
+                <span class="btn-icon">⬇️</span>
+                下载海报
+            </button>
+            <button class="action-btn share-btn" onclick="sharePoster()">
+                <span class="btn-icon">🔗</span>
+                分享海报
+            </button>
+        </div>
+    </main>
+
+    <!-- Modal -->
+    <div id="modal" class="modal">
+        <div class="modal-content">
+            <span class="close-btn" onclick="closeModal()">&times;</span>
+            <h2>🎊 欢迎参与 Hugging Face 国庆 8 日游</h2>
+            <p class="modal-description">填写信息加入我们的学习之旅</p>
+            <form class="signup-form" onsubmit="handleSubmit(event)">
+                <div class="form-group">
+                    <label for="name">姓名</label>
+                    <input type="text" id="name" required placeholder="请输入您的姓名">
+                </div>
+                <div class="form-group">
+                    <label for="email">邮箱</label>
+                    <input type="email" id="email" required placeholder="请输入您的邮箱">
+                </div>
+                <div class="form-group">
+                    <label for="interest">最感兴趣的主题</label>
+                    <select id="interest" required>
+                        <option value="">请选择</option>
+                        <option value="papers">热门论文盘点</option>
+                        <option value="courses">AI 课程共学</option>
+                        <option value="models">模型能力探索</option>
+                        <option value="anycoder">AnyCoder 实战</option>
+                    </select>
+                </div>
+                <button type="submit" class="submit-btn">提交报名</button>
+            </form>
+        </div>
+    </div>
+
+    <footer class="site-footer">
+        <p>&copy; 2024 Hugging Face 国庆 8 日游. All rights reserved.</p>
+        <p>
+            <a href="https://huggingface.co" target="_blank">Hugging Face</a> | 
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">AnyCoder</a>
+        </p>
+    </footer>
+
+    <script src="assets/js/script.js"></script>
+</body>
+</html>