|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>每日AI Paper - 探索人工智能前沿</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'neon-blue': '#00f7ff', |
|
|
'neon-purple': '#bd00ff', |
|
|
'dark-bg': '#0f172a', |
|
|
'card-bg': '#1e293b', |
|
|
}, |
|
|
animation: { |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-10px)' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Exo 2', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: #e2e8f0; |
|
|
overflow-x: hidden; |
|
|
background-image: |
|
|
radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 20%), |
|
|
radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 20%); |
|
|
} |
|
|
|
|
|
.orbitron { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
border: 1px solid rgba(99, 102, 241, 0.2); |
|
|
background: linear-gradient(145deg, #1e293b, #1a2435); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px) scale(1.02); |
|
|
box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.3); |
|
|
border-color: rgba(99, 102, 241, 0.4); |
|
|
} |
|
|
|
|
|
.card-image { |
|
|
transition: all 0.5s ease; |
|
|
filter: grayscale(30%); |
|
|
} |
|
|
|
|
|
.card:hover .card-image { |
|
|
filter: grayscale(0%); |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 5px #00f7ff, 0 0 10px #00f7ff; |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
box-shadow: 0 0 10px #00f7ff, inset 0 0 5px #00f7ff; |
|
|
} |
|
|
|
|
|
.glow { |
|
|
animation: glow 2s ease-in-out infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes glow { |
|
|
from { |
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00f7ff, 0 0 20px #00f7ff; |
|
|
} |
|
|
to { |
|
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00f7ff, 0 0 40px #00f7ff; |
|
|
} |
|
|
} |
|
|
|
|
|
.grid-pattern { |
|
|
background-image: |
|
|
linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px); |
|
|
background-size: 30px 30px; |
|
|
} |
|
|
|
|
|
.detail-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(15, 23, 42, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
z-index: 100; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.detail-overlay.active { |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
|
|
|
.detail-content { |
|
|
transform: scale(0.9); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.detail-overlay.active .detail-content { |
|
|
transform: scale(1); |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #0f172a, #1e293b); |
|
|
} |
|
|
|
|
|
.pulse-dot { |
|
|
animation: pulse-slow 2s infinite; |
|
|
} |
|
|
|
|
|
.tech-border { |
|
|
border: 1px solid; |
|
|
border-image: linear-gradient(45deg, #00f7ff, #bd00ff) 1; |
|
|
} |
|
|
|
|
|
.circuit-pattern { |
|
|
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 12c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-29-7c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z' fill='%233b82f6' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg circuit-pattern"> |
|
|
|
|
|
<nav class="border-b border-gray-700 border-opacity-30 py-4"> |
|
|
<div class="container mx-auto px-4 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-brain text-white text-xl"></i> |
|
|
</div> |
|
|
<h1 class="orbitron text-2xl font-bold text-white">每日<span class="text-neon-blue">AI</span> Paper</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-6"> |
|
|
<a href="#" class="text-gray-300 hover:text-neon-blue transition">首页</a> |
|
|
<a href="#" class="text-gray-300 hover:text-neon-blue transition">分类</a> |
|
|
<a href="#" class="text-gray-300 hover:text-neon-blue transition">收藏</a> |
|
|
<a href="#" class="text-gray-300 hover:text-neon-blue transition">关于</a> |
|
|
<button class="bg-gradient-to-r from-neon-blue to-neon-purple text-white px-4 py-2 rounded-full hover:opacity-90 transition"> |
|
|
<i class="fas fa-user mr-2"></i>登录 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<header class="py-16 text-center relative overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 w-full h-full grid-pattern"></div> |
|
|
<div class="absolute -top-20 -right-20 w-64 h-64 bg-neon-purple rounded-full opacity-10 blur-3xl"></div> |
|
|
<div class="absolute -bottom-20 -left-20 w-64 h-64 bg-neon-blue rounded-full opacity-10 blur-3xl"></div> |
|
|
|
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<h2 class="orbitron text-4xl md:text-6xl font-bold mb-6"> |
|
|
<span class="text-white">探索</span> |
|
|
<span class="text-neon-blue glow">人工智能</span> |
|
|
<span class="text-white">前沿研究</span> |
|
|
</h2> |
|
|
<p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10"> |
|
|
每日精选最新AI论文，涵盖机器学习、计算机视觉、自然语言处理等领域，助您掌握AI研究动态 |
|
|
</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-gradient-to-r from-neon-blue to-neon-purple text-white px-8 py-3 rounded-full hover:opacity-90 transition flex items-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> 订阅更新 |
|
|
</button> |
|
|
<button class="border border-neon-blue text-neon-blue px-8 py-3 rounded-full hover:bg-neon-blue hover:bg-opacity-10 transition flex items-center"> |
|
|
<i class="fas fa-book-open mr-2"></i> 浏览论文 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center mb-10"> |
|
|
<h3 class="orbitron text-3xl text-white">今日精选论文</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-gray-400 mr-3">分类:</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">全部</button> |
|
|
<button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">机器学习</button> |
|
|
<button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">计算机视觉</button> |
|
|
<button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">NLP</button> |
|
|
<button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">强化学习</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(0)"> |
|
|
<div class="relative"> |
|
|
<div class="absolute top-4 right-4 bg-neon-purple text-white text-xs px-3 py-1 rounded-full">新发布</div> |
|
|
<img src="https://images.unsplash.com/photo-1677442135722-5f3df2f67e08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" |
|
|
alt="AI论文" class="w-full h-48 object-cover card-image"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<span class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-2 py-1 rounded mr-3">机器学习</span> |
|
|
<span class="text-gray-400 text-sm"><i class="far fa-calendar mr-1"></i> 2023-10-15</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-3">Transformer-XL：超越固定长度上下文的语言模型</h4> |
|
|
<p class="text-gray-300 mb-4">本文提出了一种新的神经网络架构Transformer-XL，它能够处理长距离依赖关系，同时保持计算效率...</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center"> |
|
|
<span class="text-xs">ZS</span> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-300">作者: Zihang Dai</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-neon-blue hover:text-neon-purple transition"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(1)"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" |
|
|
alt="AI论文" class="w-full h-48 object-cover card-image"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<span class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-2 py-1 rounded mr-3">计算机视觉</span> |
|
|
<span class="text-gray-400 text-sm"><i class="far fa-calendar mr-1"></i> 2023-10-14</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-3">基于自监督学习的3D场景理解新方法</h4> |
|
|
<p class="text-gray-300 mb-4">我们提出了一种创新的自监督学习方法，用于3D场景理解，该方法在多个基准测试中达到了最先进的性能...</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center"> |
|
|
<span class="text-xs">AL</span> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-300">作者: Angela Li</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-neon-blue hover:text-neon-purple transition"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(2)"> |
|
|
<div class="relative"> |
|
|
<div class="absolute top-4 right-4 bg-neon-blue text-white text-xs px-3 py-1 rounded-full">热门</div> |
|
|
<img src="https://images.unsplash.com/photo-1677442135133-33d36439055c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" |
|
|
alt="AI论文" class="w-full h-48 object-cover card-image"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<span class="text-xs bg-gradient-to-r from-neon-blue to-neon-purple text-white px-2 py-1 rounded mr-3">NLP</span> |
|
|
<span class="text-gray-400 text-sm"><i class="far fa-calendar mr-1"></i> 2023-10-13</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-3">BERT：深度双向Transformer的语言理解预训练</h4> |
|
|
<p class="text-gray-300 mb-4">我们介绍了一种新的语言表示模型BERT，它通过在所有层中联合调节左右上下文来预训练深度双向表示...</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center"> |
|
|
<span class="text-xs">JD</span> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-300">作者: Jacob Devlin</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-neon-blue hover:text-neon-purple transition"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(3)"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1677442135133-33d36439055c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" |
|
|
alt="AI论文" class="w-full h-48 object-cover card-image"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<span class="text-xs bg-yellow-500 bg-opacity-20 text-yellow-500 px-2 py-1 rounded mr-3">强化学习</span> |
|
|
<span class="text-gray-400 text-sm"><i class="far fa-calendar mr-1"></i> 2023-10-12</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-3">AlphaZero：从零开始掌握国际象棋和将棋</h4> |
|
|
<p class="text-gray-300 mb-4">AlphaZero是一种通用的强化学习算法，它通过自我对弈从零开始学习，在多个复杂游戏中超越了人类水平...</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center"> |
|
|
<span class="text-xs">DS</span> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-300">作者: David Silver</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-neon-blue hover:text-neon-purple transition"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(4)"> |
|
|
<div class="relative"> |
|
|
<div class="absolute top-4 right-4 bg-neon-purple text-white text-xs px-3 py-1 rounded-full">新发布</div> |
|
|
<img src="https://images.unsplash.com/photo-1677442135722-5f3df2f67e08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" |
|
|
alt="AI论文" class="w-full h-48 object-cover card-image"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<span class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-2 py-1 rounded mr-3">机器学习</span> |
|
|
{"ok":false,"message":"terminated"} |
|
|
</body> |
|
|
</html> |
|
|
|
