<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>RAGFlow+Deepseek 知识库系统演示</title> <script src=”https://cdn.tailwindcss.com”></script> <link href=”https://fonts.proxy.ustclug.org/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap” rel=”stylesheet”> <link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/chart.js”></script> <style> :root { –primary: #3B82F6; –secondary: #60A5FA; –accent: #F97316; –background: #F8FAFC; –text: #1E293B; } body h1, h2, h3, h4 .hero-title { font-size: clamp(3rem, 10vw, 5rem); font-weight: 900; line-height: 1; letter-spacing: -0.05em; } .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .feature-icon .step-card { transition: all 0.3s ease; border-left: 4px solid transparent; } .step-card:hover { transform: translateY(-5px); border-left-color: var(–accent); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .architecture-node { position: relative; padding: 1.5rem; background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .architecture-node:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .connector { position: absolute; width: 40px; height: 2px; background: var(–primary); top: 50%; right: -40px; } .connector::after { content: ”; position: absolute; right: -8px; top: -6px; width: 0; height: cursor 教程 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 8px solid var(–primary); } @media (max-width: 768px) { .connector { display: none; } } .demo-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; overflow: hidden; } .chat-message { max-width: 80%; padding: 1rem 1.5rem; border-radius: 18px; margin-bottom: 1rem; animation: fadeIn 0.3s ease; } .user-message { background: var(–primary); color: white; margin-left: auto; border-bottom-right-radius: 4px; } .ai-message { background: white; color: var(–text); margin-right: auto; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .code-block { font-family: ‘Space Grotesk’, monospace; background: #1E293B; color: #E2E8F0; padding: 1.5rem; border-radius: 12px; overflow-x: auto; font-size: 0.9rem; } .highlight { color: var(–accent); font-weight: 600; } </style> </head> <body class=”min-h-screen”> <!– 导航栏 –> <nav class=”fixed top-4 left-4 right-4 z-50 glass-card rounded-2xl py-4 px-6 mx-auto max-w-7xl”> <div class=”flex justify-between items-center”> <div class=”flex items-center space-x-2″> <div class=”w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center”> <i class=”fas fa-brain text-white text-lg”></i> </div> <span class=”text-xl font-bold” style=”font-family: ‘Space Grotesk’, sans-serif;”>RAGFlow<span class=”text-orange-500″>+</span>Deepseek</span> </div> <div class=”hidden md:flex space-x-8″> <a href=https://download.csdn.net/download/cc789/”#overview” class=”font-medium hover:text-blue-600 transition-colors duration-200 cursor-pointer”>概述</a> <a href=https://download.csdn.net/download/cc789/”#features” class=”font-medium hover:text-blue-600 transition-colors duration-200 cursor-pointer”>功能</a> <a href=https://download.csdn.net/download/cc789/”#architecture” class=”font-medium hover:text-blue-600 transition-colors duration-200 cursor-pointer”>架构</a> <a href=https://download.csdn.net/download/cc789/”#demo” class=”font-medium hover:text-blue-600 transition-colors duration-200 cursor-pointer”>演示</a> <a href=https://download.csdn.net/download/cc789/”#setup” class=”font-medium hover:text-blue-600 transition-colors duration-200 cursor-pointer”>部署</a> </div> <button class=”bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-2 rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 transition-all duration-300 shadow-lg hover:shadow-xl cursor-pointer”> 立即体验 </button> </div> </nav> <!– 主内容 –> <main class=”pt-24 pb-20 px-4 md:px-8 max-w-7xl mx-auto”> <!– Hero 部分 –> <section id=”overview” class=”mb-20″> <div class=”text-center mb-16″> <h1 class=”hero-title mb-6″> 构建智能<span class=”text-blue-600″>知识库</span>系统 </h1> <p class=”text-xl text-gray-600 max-w-3xl mx-auto mb-10″> RAGFlow + Deepseek 结合，打造企业级智能问答与文档检索系统。基于检索增强生成技术，实现精准、高效的文档知识提取与问答。 </p> <div class=”flex flex-col sm:flex-row gap-4 justify-center”> <button class=”bg-gradient-to-r from-orange-500 to-orange-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:from-orange-600 hover:to-orange-700 transition-all duration-300 shadow-xl hover:shadow-2xl cursor-pointer”> <i class=”fas fa-play mr-2″></i>快速开始 </button> <button class=”glass-card px-8 py-4 rounded-xl font-bold text-lg border border-gray-200 hover:border-blue-300 transition-all duration-300 cursor-pointer”> <i class=”fas fa-book mr-2″></i>查看文档 </button> </div>
发布者：Ai探索者，转载请注明出处：https://javaforall.net/275795.html原文链接：https://javaforall.net
