File size: 12,650 Bytes
e6a53b7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NotebookLM-Llama 本地部署指南</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: {
primary: '#6e40c9',
secondary: '#5c21b5',
dark: '#121826',
}
}
}
}
</script>
<style>
.terminal {
background-color: #1a1c23;
border-radius: 10px;
font-family: 'Fira Code', monospace;
position: relative;
overflow: hidden;
}
.terminal-header {
background-color: #232732;
padding: 10px 15px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.terminal-buttons span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 5px;
}
.terminal-content {
padding: 15px;
color: #e0e0e0;
font-size: 14px;
}
.glow-card {
box-shadow: 0 0 20px rgba(110, 64, 201, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.glow-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 25px rgba(110, 64, 201, 0.5);
}
.step-card {
border-left: 4px solid #6e40c9;
}
.terminal-content span.prompt { color: #68d391; }
.terminal-content span.command { color: #76daff; }
.terminal-content span.comment { color: #718096; }
.progress-anim {
animation: progress-pulse 2s infinite;
}
@keyframes progress-pulse {
0% { opacity: 0.8; }
50% { opacity: 1; }
100% { opacity: 0.8; }
}
.deploy-badge {
position: relative;
padding: 8px 16px;
border-radius: 30px;
font-size: 14px;
}
</style>
</head>
<body class="bg-dark text-gray-100">
<!-- Navigation -->
<nav class="bg-gray-900 py-4">
<div class="container mx-auto px-4 flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-laptop-code text-primary text-2xl mr-2"></i>
<span class="text-xl font-bold">NotebookLM-Llama</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-primary transition">首页</a>
<a href="#" class="text-primary font-medium">部署指南</a>
<a href="#" class="hover:text-primary transition">文档</a>
<a href="#" class="hover:text-primary transition">社区</a>
<a href="#" class="hover:text-primary transition">资源下载</a>
</div>
<button class="md:hidden text-gray-400">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="py-16 bg-gradient-to-br from-gray-900 to-purple-900">
<div class="container mx-auto px-4 text-center">
<div class="flex justify-center mb-6">
<span class="deploy-badge bg-gray-800 text-green-400">
<i class="fas fa-circle animate-pulse mr-2"></i> 本地部署支持
</span>
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6">
NotebookLM-Llama <span class="text-primary">本地部署</span> 指南
</h1>
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
无需云端依赖，轻松在您的设备上部署和运行强大的NotebookLM-Llama AI模型
</p>
<div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-6 md:p-8 glow-card">
<div class="flex flex-wrap justify-center gap-8 mb-8">
<div class="text-center">
<div class="w-16 h-16 mx-auto bg-secondary rounded-xl flex items-center justify-center mb-3">
<i class="fas fa-microchip text-2xl"></i>
</div>
<p class="font-medium">支持多平台</p>
</div>
<div class="text-center">
<div class="w-16 h-16 mx-auto bg-secondary rounded-xl flex items-center justify-center mb-3">
<i class="fas fa-bolt text-2xl"></i>
</div>
<p class="font-medium">GPU加速</p>
</div>
<div class="text-center">
<div class="w-16 h-16 mx-auto bg-secondary rounded-xl flex items-center justify-center mb-3">
<i class="fas fa-shield-alt text-2xl"></i>
</div>
<p class="font-medium">数据隐私保护</p>
</div>
<div class="text-center">
<div class="w-16 h-16 mx-auto bg-secondary rounded-xl flex items-center justify-center mb-3">
<i class="fas fa-download text-2xl"></i>
</div>
<p class="font-medium">离线运行</p>
</div>
</div>
<div class="bg-gray-700 rounded-lg p-4">
<h3 class="text-primary font-medium mb-3">部署状态</h3>
<div class="flex items-center">
<div class="mr-4">
<div class="relative">
<div class="h-24 w-24 rounded-full flex items-center justify-center progress-anim"
style="background: conic-gradient(#6e40c9 40%, #4b5563 0);">
<div class="h-20 w-20 bg-gray-800 rounded-full flex items-center justify-center">
<span class="text-white">40%</span>
</div>
</div>
<div class="absolute -bottom-2 left-0 right-0 flex justify-center">
<div class="bg-green-500 text-xs rounded px-2 py-1">最新版本</div>
</div>
</div>
</div>
<div>
<p class="text-sm text-gray-300 mb-2">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
Llama 2模型支持
</p>
<p class="text-sm text-gray-300 mb-2">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
Windows 10/11
</p>
<p class="text-sm text-gray-300 mb-2">
<i class="fas fa-check-circle text-yellow-500 mr-2"></i>
macOS测试版可用
</p>
<p class="text-sm text-gray-300">
<i class="fas fa-sync-alt text-blue-500 mr-2"></i>
Linux优化中
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Requirements Section -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">系统<span class="text-primary">要求</span></h2>
<p class="text-gray-400">确保您的系统满足以下最低要求以实现最佳运行效果</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<div class="bg-gray-800 rounded-xl p-6 glow-card">
<div class="w-14 h-14 rounded-xl bg-primary flex items-center justify-center mb-4">
<i class="fas fa-microchip text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">硬件配置</h3>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<i class="fas fa-memory text-primary mt-1 mr-3"></i>
<span>至少 <span class="font-bold">16GB RAM</span> (推荐32GB)</span>
</li>
<li class="flex items-start">
<i class="fas fa-microchip text-primary mt-1 mr-3"></i>
<span>多核CPU (推荐8核以上)</span>
</li>
<li class="flex items-start">
<i class="fas fa-sd-card text-primary mt-1 mr-3"></i>
<span>20GB可用存储空间</span>
</li>
<li class="flex items-start">
<i class="fas fa-video text-primary mt-1 mr-3"></i>
<span>专用GPU (NVIDIA RTX 30系列以上)</span>
</li>
</ul>
</div>
<div class="bg-gray-800 rounded-xl p-6 glow-card">
<div class="w-14 h-14 rounded-xl bg-primary flex items-center justify-center mb-4">
<i class="fab fa-windows text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">操作系统</h3>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<i class="fab fa-windows text-blue-400 mt-1 mr-3"></i>
<span>Windows 10/11 (64位)</span>
</li>
<li class="flex items-start">
<i class="fab fa-linux text-orange-400 mt-1 mr-3"></i>
<span>Ubuntu 20.04 LTS或更新</span>
</li>
<li class="flex items-start">
<i class="fab fa-apple text-gray-300 mt-1 mr-3"></i>
<span>macOS 12 Monterey或更新</span>
</li>
<li class="flex items-start">
<i class="fas fa-code-branch text-primary mt-1 mr-3"></i>
<span>WSL 2 (Windows子系统Linux)</span>
</li>
</ul>
</div>
<div class="bg-gray-800 rounded-xl p-6 glow-card">
<div class="w-14 h-14 rounded-xl bg-primary flex items-center justify-center mb-4">
<i class="fas fa-cubes text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">软件依赖</h3>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<i class="fab fa-python text-green-400 mt-1 mr-3"></i>
<span>Python 3.8或更高</span>
</li>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DeepFount/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |