AdinaY's picture
AdinaY HF Staff
做一个更直观的内容 介绍hugging face daily papers的功能
259fdc8 verified
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hugging Papers Daily Digest</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/paper-card.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section class="mb-16 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-indigo-700">Hugging Papers Daily Digest</h1>
<p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto">
Your curated daily dose of the latest AI research papers from Hugging Face
</p>
<div class="mt-8 flex justify-center gap-4">
<a href="#today" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">
Today's Papers
</a>
<a href="#features" class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition-colors">
How It Works
</a>
</div>
</section>
<!-- Today's Papers Section -->
<section id="today" class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-indigo-700 flex items-center gap-2">
<i data-feather="calendar"></i>
<span>Today's Top Papers</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Paper cards will be dynamically inserted here -->
</div>
</section>
<!-- Features Section -->
<section id="features" class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-indigo-700 flex items-center gap-2">
<i data-feather="zap"></i>
<span>Why Use Hugging Papers?</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="clock" class="text-indigo-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Daily Updates</h3>
<p class="text-gray-600">Get the latest papers delivered fresh every day, so you never miss important research.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="filter" class="text-indigo-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Curated Selection</h3>
<p class="text-gray-600">We filter through hundreds of papers to bring you only the most relevant and impactful ones.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="book-open" class="text-indigo-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Easy to Digest</h3>
<p class="text-gray-600">Clear summaries and key insights help you quickly understand each paper's contributions.</p>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-indigo-700 flex items-center gap-2">
<i data-feather="help-circle"></i>
<span>How It Works</span>
</h2>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="md:flex">
<div class="md:w-1/2 p-8 md:p-12">
<h3 class="text-2xl font-semibold mb-4">From Hugging Face to You</h3>
<ol class="space-y-6">
<li class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
<span class="text-indigo-600 font-medium">1</span>
</div>
<div>
<h4 class="font-medium mb-1">Paper Collection</h4>
<p class="text-gray-600">We automatically gather the latest papers from Hugging Face's repositories.</p>
</div>
</li>
<li class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
<span class="text-indigo-600 font-medium">2</span>
</div>
<div>
<h4 class="font-medium mb-1">AI Analysis</h4>
<p class="text-gray-600">Our system analyzes each paper to extract key insights and summaries.</p>
</div>
</li>
<li class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
<span class="text-indigo-600 font-medium">3</span>
</div>
<div>
<h4 class="font-medium mb-1">Human Review</h4>
<p class="text-gray-600">Our team of experts reviews the automated summaries for accuracy.</p>
</div>
</li>
<li class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
<span class="text-indigo-600 font-medium">4</span>
</div>
<div>
<h4 class="font-medium mb-1">Daily Delivery</h4>
<p class="text-gray-600">You receive a curated digest of the most important papers in your inbox.</p>
</div>
</li>
</ol>
</div>
<div class="md:w-1/2 bg-indigo-50 flex items-center justify-center p-8">
<img src="http://static.photos/technology/640x360/1" alt="AI Research Process" class="rounded-lg shadow-md w-full h-auto">
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script>
// Fetch and display papers (mock data for now)
document.addEventListener('DOMContentLoaded', () => {
feather.replace();
// Mock data - in a real app, this would come from an API
const papers = [
{
title: "Efficient Transformers for Long Sequences",
authors: "Smith et al.",
summary: "A novel architecture that reduces the quadratic complexity of attention mechanisms while maintaining performance.",
date: "2023-11-15",
link: "#",
tags: ["NLP", "Efficiency"]
},
{
title: "Multimodal Learning with Limited Data",
authors: "Chen & Lee",
summary: "Techniques for training vision-language models when labeled data is scarce, achieving SOTA on several benchmarks.",
date: "2023-11-15",
link: "#",
tags: ["Multimodal", "Few-shot"]
},
{
title: "Robustness in Diffusion Models",
authors: "Johnson et al.",
summary: "Analysis of failure modes in diffusion models and methods to improve their reliability for critical applications.",
date: "2023-11-14",
link: "#",
tags: ["Generative", "Robustness"]
}
];
const papersContainer = document.querySelector('#today .grid');
papers.forEach(paper => {
const card = document.createElement('paper-card');
card.setAttribute('title', paper.title);
card.setAttribute('authors', paper.authors);
card.setAttribute('summary', paper.summary);
card.setAttribute('date', paper.date);
card.setAttribute('link', paper.link);
card.setAttribute('tags', JSON.stringify(paper.tags));
papersContainer.appendChild(card);
});
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>