Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>论文雷达 - 前沿论文自动化爬取解析系统</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --primary-light: #818cf8; | |
| --secondary-color: #06b6d4; | |
| --accent-color: #f59e0b; | |
| --bg-dark: #0f172a; | |
| --bg-card: #1e293b; | |
| --bg-card-hover: #334155; | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --border-color: #334155; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --error: #ef4444; | |
| --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| --gradient-main: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: var(--bg-dark); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Header */ | |
| .header { | |
| background: rgba(15, 23, 42, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 1rem 2rem; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: var(--gradient-main); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .logo i { | |
| -webkit-text-fill-color: var(--primary-light); | |
| } | |
| .logo span { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| margin-left: 0.5rem; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .notification-btn { | |
| position: relative; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.25rem; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s; | |
| } | |
| .notification-btn:hover { | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| background: var(--error); | |
| color: white; | |
| font-size: 0.65rem; | |
| padding: 0.15rem 0.4rem; | |
| border-radius: 1rem; | |
| font-weight: 600; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--gradient-main); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.3s; | |
| } | |
| .user-avatar:hover { | |
| transform: scale(1.05); | |
| } | |
| /* Main Layout */ | |
| .main-container { | |
| display: flex; | |
| margin-top: 73px; | |
| min-height: calc(100vh - 73px); | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 260px; | |
| background: var(--bg-card); | |
| border-right: 1px solid var(--border-color); | |
| padding: 1.5rem; | |
| position: fixed; | |
| top: 73px; | |
| bottom: 0; | |
| left: 0; | |
| overflow-y: auto; | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar-section { | |
| margin-bottom: 2rem; | |
| } | |
| .sidebar-title { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--text-muted); | |
| margin-bottom: 1rem; | |
| font-weight: 600; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.75rem; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| margin-bottom: 0.25rem; | |
| } | |
| .nav-item:hover { | |
| background: var(--bg-card-hover); | |
| color: var(--text-primary); | |
| } | |
| .nav-item.active { | |
| background: var(--gradient-main); | |
| color: white; | |
| } | |
| .nav-item i { | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .nav-item span { | |
| flex: 1; | |
| } | |
| .nav-item .badge { | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 0.15rem 0.5rem; | |
| border-radius: 1rem; | |
| font-size: 0.7rem; | |
| } | |
| /* Content Area */ | |
| .content { | |
| flex: 1; | |
| margin-left: 260px; | |
| padding: 2rem; | |
| } | |
| /* Search Section */ | |
| .search-section { | |
| margin-bottom: 2rem; | |
| } | |
| .search-container { | |
| background: var(--bg-card); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| } | |
| .search-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .search-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| .search-input-wrapper { | |
| position: relative; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 1rem 1rem 1rem 3rem; | |
| background: var(--bg-dark); | |
| border: 2px solid var(--border-color); | |
| border-radius: 0.75rem; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: all 0.3s; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); | |
| } | |
| .search-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| } | |
| .search-filters { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .filter-chip { | |
| padding: 0.5rem 1rem; | |
| background: var(--bg-dark); | |
| border: 1px solid var(--border-color); | |
| border-radius: 2rem; | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .filter-chip:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-light); | |
| } | |
| .filter-chip.active { | |
| background: var(--primary-color); | |
| border-color: var(--primary-color); | |
| color: white; | |
| } | |
| .search-btn { | |
| padding: 0.75rem 2rem; | |
| background: var(--gradient-main); | |
| border: none; | |
| border-radius: 0.75rem; | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .search-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: var(--bg-card); | |
| border-radius: 1rem; | |
| padding: 1.25rem; | |
| border: 1px solid var(--border-color); | |
| transition: all 0.3s; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .stat-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| margin-bottom: 1rem; | |
| } | |
| .stat-icon.blue { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: var(--primary-light); | |
| } | |
| .stat-icon.cyan { | |
| background: rgba(6, 182, 212, 0.2); | |
| color: var(--secondary-color); | |
| } | |
| .stat-icon.amber { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--accent-color); | |
| } | |
| .stat-icon.green { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--success); | |
| } | |
| .stat-value { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin-bottom: 0.25rem; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .stat-trend { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| font-size: 0.75rem; | |
| margin-top: 0.5rem; | |
| } | |
| .stat-trend.up { | |
| color: var(--success); | |
| } | |
| .stat-trend.down { | |
| color: var(--error); | |
| } | |
| /* Paper List */ | |
| .papers-section { | |
| margin-bottom: 2rem; | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .section-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .view-toggle { | |
| display: flex; | |
| gap: 0.25rem; | |
| background: var(--bg-card); | |
| border-radius: 0.5rem; | |
| padding: 0.25rem; | |
| } | |
| .view-btn { | |
| padding: 0.5rem 0.75rem; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| border-radius: 0.375rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .view-btn.active { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .paper-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .paper-card { | |
| background: var(--bg-card); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| .paper-card:hover { | |
| border-color: var(--primary-color); | |
| transform: translateX(4px); | |
| box-shadow: -4px 0 0 var(--primary-color); | |
| } | |
| .paper-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 1rem; | |
| } | |
| .paper-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| line-height: 1.4; | |
| flex: 1; | |
| margin-right: 1rem; | |
| } | |
| .paper-status { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 2rem; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| } | |
| .status-new { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--success); | |
| } | |
| .status-hot { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--error); | |
| } | |
| .status-analyzing { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--accent-color); | |
| } | |
| .paper-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .paper-meta-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .paper-abstract { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| margin-bottom: 1rem; | |
| } | |
| .paper-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .tag { | |
| padding: 0.25rem 0.75rem; | |
| background: var(--bg-dark); | |
| border-radius: 2rem; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .paper-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .paper-stats { | |
| display: flex; | |
| gap: 1.5rem; | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| } | |
| .paper-stats span { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .paper-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .action-btn { | |
| padding: 0.5rem 1rem; | |
| background: transparent; | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .action-btn:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-light); | |
| } | |
| .action-btn.primary { | |
| background: var(--primary-color); | |
| border-color: var(--primary-color); | |
| color: white; | |
| } | |
| .action-btn.primary:hover { | |
| background: var(--primary-dark); | |
| } | |
| /* Analysis Panel */ | |
| .analysis-panel { | |
| position: fixed; | |
| top: 0; | |
| right: -600px; | |
| width: 600px; | |
| height: 100vh; | |
| background: var(--bg-card); | |
| border-left: 1px solid var(--border-color); | |
| z-index: 2000; | |
| transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .analysis-panel.open { | |
| right: 0; | |
| } | |
| .panel-header { | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .panel-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| .close-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.25rem; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s; | |
| } | |
| .close-btn:hover { | |
| background: var(--bg-dark); | |
| color: var(--text-primary); | |
| } | |
| .panel-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1.5rem; | |
| } | |
| .analysis-section { | |
| margin-bottom: 2rem; | |
| } | |
| .analysis-section-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .analysis-section-title i { | |
| color: var(--primary-light); | |
| } | |
| .analysis-card { | |
| background: var(--bg-dark); | |
| border-radius: 0.75rem; | |
| padding: 1rem; | |
| border: 1px solid var(--border-color); | |
| } | |
| .extracted-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .info-item { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .info-label { | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| min-width: 80px; | |
| } | |
| .info-value { | |
| color: var(--text-primary); | |
| font-size: 0.9rem; | |
| flex: 1; | |
| } | |
| /* Loading Animation */ | |
| .loading-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(15, 23, 42, 0.9); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 3000; | |
| } | |
| .loading-overlay.active { | |
| display: flex; | |
| } | |
| .loader { | |
| text-align: center; | |
| } | |
| .loader-spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid var(--border-color); | |
| border-top-color: var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loader-text { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .progress-bar { | |
| width: 200px; | |
| height: 4px; | |
| background: var(--border-color); | |
| border-radius: 2px; | |
| margin-top: 1rem; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--gradient-main); | |
| border-radius: 2px; | |
| transition: width 0.3s; | |
| animation: progress 2s ease-in-out infinite; | |
| } | |
| @keyframes progress { | |
| 0% { width: 0%; } | |
| 50% { width: 70%; } | |
| 100% { width: 100%; } | |
| } | |
| /* Timeline */ | |
| .timeline { | |
| position: relative; | |
| padding-left: 1.5rem; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: var(--border-color); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-bottom: 1.5rem; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -1.65rem; | |
| top: 0.25rem; | |
| width: 10px; | |
| height: 10px; | |
| background: var(--primary-color); | |
| border-radius: 50%; | |
| border: 2px solid var(--bg-card); | |
| } | |
| .timeline-time { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin-bottom: 0.25rem; | |
| } | |
| .timeline-content { | |
| font-size: 0.9rem; | |
| color: var(--text-primary); | |
| } | |
| /* Keywords Cloud */ | |
| .keywords-cloud { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .keyword { | |
| padding: 0.35rem 0.75rem; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2)); | |
| border-radius: 2rem; | |
| font-size: 0.8rem; | |
| color: var(--primary-light); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| } | |
| .keyword.size-lg { | |
| font-size: 1rem; | |
| padding: 0.5rem 1rem; | |
| } | |
| .keyword.size-md { | |
| font-size: 0.9rem; | |
| } | |
| /* Overlay */ | |
| .overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s; | |
| z-index: 1500; | |
| } | |
| .overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* Pagination */ | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| margin-top: 2rem; | |
| } | |
| .page-btn { | |
| padding: 0.75rem 1rem; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .page-btn:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-light); | |
| } | |
| .page-btn.active { | |
| background: var(--primary-color); | |
| border-color: var(--primary-color); | |
| color: white; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| .content { | |
| margin-left: 0; | |
| } | |
| .analysis-panel { | |
| width: 100%; | |
| right: -100%; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .header { | |
| padding: 1rem; | |
| } | |
| .content { | |
| padding: 1rem; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .search-filters { | |
| gap: 0.5rem; | |
| } | |
| .paper-header { | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .paper-footer { | |
| flex-direction: column; | |
| gap: 1rem; | |
| align-items: flex-start; | |
| } | |
| } | |
| /* Built with anycoder */ | |
| .built-with { | |
| position: fixed; | |
| bottom: 1rem; | |
| left: 1.5rem; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| z-index: 100; | |
| } | |
| .built-with a { | |
| color: var(--primary-light); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .built-with a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Menu Toggle */ | |
| .menu-toggle { | |
| display: none; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 1.25rem; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| } | |
| @media (max-width: 1024px) { | |
| .menu-toggle { | |
| display: block; | |
| } | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-dark); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border-color); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted); | |
| } | |
| /* Toast Notification */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 4000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .toast { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.75rem; | |
| padding: 1rem 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| box-shadow: var(--shadow-lg); | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .toast.success { | |
| border-color: var(--success); | |
| } | |
| .toast.error { | |
| border-color: var(--error); | |
| } | |
| .toast i { | |
| font-size: 1.25rem; | |
| } | |
| .toast.success i { | |
| color: var(--success); | |
| } | |
| .toast.error i { | |
| color: var(--error); | |
| } | |
| /* Abstract highlight */ | |
| .abstract-highlight { | |
| background: rgba(99, 102, 241, 0.2); | |
| padding: 0.1rem 0.3rem; | |
| border-radius: 0.25rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div style="display: flex; align-items: center; gap: 1rem;"> | |
| <button class="menu-toggle" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="logo"> | |
| <i class="fas fa-microscope"></i> | |
| 论文雷达 | |
| <span>PaperRadar AI</span> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="notification-btn"> | |
| <i class="fas fa-bell"></i> | |
| <span class="notification-badge">5</span> | |
| </button> | |
| <div class="user-avatar">JD</div> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="main-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">主导航</div> | |
| <div class="nav-item active"> | |
| <i class="fas fa-search"></i> | |
| <span>论文搜索</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-fire"></i> | |
| <span>热门趋势</span> | |
| <span class="badge">Hot</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-star"></i> | |
| <span>我的收藏</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-history"></i> | |
| <span>浏览历史</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">数据源</div> | |
| <div class="nav-item"> | |
| <i class="fas fa-database"></i> | |
| <span>arXiv</span> | |
| <i class="fas fa-check-circle" style="color: var(--success);"></i> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-graduation-cap"></i> | |
| <span>Semantic Scholar</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-book"></i> | |
| <span>PubMed</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-globe"></i> | |
| <span>IEEEXplore</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">工具</div> | |
| <div class="nav-item"> | |
| <i class="fas fa-robot"></i> | |
| <span>AI摘要</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-language"></i> | |
| <span>翻译</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-download"></i> | |
| <span>导出报告</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Content --> | |
| <main class="content"> | |
| <!-- Search Section --> | |
| <section class="search-section"> | |
| <div class="search-container"> | |
| <div class="search-header"> | |
| <h2 class="search-title"><i class="fas fa-search" style="color: var(--primary-light);"></i> 智能论文搜索</h2> | |
| </div> | |
| <div class="search-input-wrapper"> | |
| <i class="fas fa-search search-icon"></i> | |
| <input type="text" class="search-input" placeholder="搜索论文标题、作者、关键词... 例如: transformer attention mechanism" id="searchInput"> | |
| </div> | |
| <div class="search-filters"> | |
| <span class="filter-chip active" data-filter="all">全部</span> | |
| <span class="filter-chip" data-filter="ai">人工智能</span> | |
| <span class="filter-chip" data-filter="nlp">自然语言处理</span> | |
| <span class="filter-chip" data-filter="cv">计算机视觉</span> | |
| <span class="filter-chip" data-filter="ml">机器学习</span> | |
| <span class="filter-chip" data-filter="robotics">机器人学</span> | |
| <span class="filter-chip" data-filter="recent">最新发布</span> | |
| <span class="filter-chip" data-filter="high-cited">高引用</span> | |
| </div> | |
| <div style="margin-top: 1rem; display: flex; justify-content: flex-end;"> | |
| <button class="search-btn" onclick="searchPapers()"> | |
| <i class="fas fa-rocket"></i> 开始搜索 | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Grid --> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon blue"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div class="stat-value">12,847</div> | |
| <div class="stat-label">论文总数</div> | |
| <div class="stat-trend up"> | |
| <i class="fas fa-arrow-up"></i> 今日新增 156 篇 | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon cyan"> | |
| <i class="fas fa-microscope"></i> | |
| </div> | |
| <div class="stat-value">3,429</div> | |
| <div class="stat-label">已解析论文</div> | |
| <div class="stat-trend up"> | |
| <i class="fas fa-arrow-up"></i> 解析率 26.7% | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon amber"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="stat-value">8,542</div> | |
| <div class="stat-label">活跃研究者</div> | |
| <div class="stat-trend up"> | |
| <i class="fas fa-arrow-up"></i> +12.3% 本月 | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon green"> | |
| <i class="fas fa引用次数"></i> | |
| </div> | |
| <div class="stat-value">156,892</div> | |
| <div class="stat-label">总引用次数</div> | |
| <div class="stat-trend up"> | |
| <i class="fas fa-arrow-up"></i> 同比增长 34.5% | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Paper List --> | |
| <section class="papers-section"> | |
| <div class="section-header"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-list" style="color: var(--primary-light);"></i> | |
| 搜索结果 | |
| <span style="font-size: 0.9rem; color: var(--text-secondary); font-weight: 400;">(显示 1-10 条，共 1,247 条)</span> | |
| </h2> | |
| <div class="view-toggle"> | |
| <button class="view-btn active"><i class="fas fa-list"></i></button> | |
| <button class="view-btn"><i class="fas fa-th-large"></i></button> | |
| </div> | |
| </div> | |
| <div class="paper-list" id="paperList"> | |
| <!-- Papers will be dynamically loaded --> | |
| </div> | |
| <div class="pagination"> | |
| <button class="page-btn"><i class="fas fa-chevron-left"></i></button> | |
| <button class="page-btn active">1</button> | |
| <button class="page-btn">2</button> | |
| <button class="page-btn">3</button> | |
| <button class="page-btn">...</button> | |
| <button class="page-btn">125</button> | |
| <button class="page-btn"><i class="fas fa-chevron-right"></i></button> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- Analysis Panel --> | |
| <div class="overlay" id="overlay" onclick="closeAnalysisPanel()"></div> | |
| <aside class="analysis-panel" id="analysisPanel"> | |
| <div class="panel-header"> | |
| <h3 class="panel-title"><i class="fas fa-chart-pie" style="color: var(--primary-light);"></i> 论文深度解析</h3> | |
| <button class="close-btn" onclick="closeAnalysisPanel()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="panel-content" id="panelContent"> | |
| <!-- Analysis content will be dynamically loaded --> | |
| </div> | |
| </aside> | |
| <!-- Loading Overlay --> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="loader"> | |
| <div class="loader-spinner"></div> | |
| <div class="loader-text" id="loadingText">正在解析论文...</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Container --> | |
| <div class="toast-container" id="toastContainer"></div> | |
| <!-- Built with anycoder --> | |
| <div class="built-with"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | |
| </div> | |
| <script> | |
| // Sample Papers Data | |
| const samplePapers = [ | |
| { | |
| id: 1, | |
| title: "Attention Is All You Need: Rethinking Transformer Architecture for Language Understanding", | |
| authors: ["Ashish Vaswani", "Noam Shazeer", "Niki Parmar", "Jakob Uszkoreit"], | |
| venue: "NeurIPS 2024", | |
| date: "2024-01-15", | |
| citations: 2847, | |
| abstract: "We propose a novel transformer architecture that eliminates the need for recurrence and convolution entirely. Our model relies solely on attention mechanisms, achieving state-of-the-art results on multiple NLP benchmarks while reducing training time by 40%.", | |
| tags: ["Transformer", "Attention", "NLP", "Deep Learning"], | |
| status: "hot", | |
| likes: 892, | |
| views: 12458 | |
| }, | |
| { | |
| id: 2, | |
| title: "Vision Transformers in Medical Imaging: A Comprehensive Survey and Benchmark", | |
| authors: ["Xiaohong Liu", "Yiming Zhou", "Wei Liu", "et al."], | |
| venue: "Nature Machine Intelligence", | |
| date: "2024-01-12", | |
| citations: 567, | |
| abstract: "This paper presents a systematic survey and benchmark of Vision Transformer applications in medical imaging. We evaluate 15+ ViT variants across 8 medical imaging tasks, providing insights into their strengths and limitations.", | |
| tags: ["Vision Transformer", "Medical AI", "Computer Vision", "Survey"], | |
| status: "new", | |
| likes: 445, | |
| views: 6789 | |
| }, | |
| { | |
| id: 3, | |
| title: "Self-Supervised Learning for Protein Structure Prediction with AlphaFold-3", | |
| authors: ["John Jumper", "Richard Evans", "Alexander Pritzel", "et al."], | |
| venue: "Science", | |
| date: "2024-01-10", | |
| citations: 1234, | |
| abstract: "We introduce AlphaFold-3, a revolutionary approach to protein structure prediction that leverages self-supervised learning to predict protein structures with unprecedented accuracy, including protein-ligand and protein-nucleic acid complexes.", | |
| tags: ["Protein Folding", "Self-Supervised", "Bioinformatics", "AlphaFold"], | |
| status: "hot", | |
| likes: 1203, | |
| views: 18923 | |
| }, | |
| { | |
| id: 4, | |
| title: "Large Multimodal Models: Bridging Vision and Language for Universal Understanding", | |
| authors: ["Bohan Li", "Hao Wu", "Jiahui Xu", "et al."], | |
| venue: "ICML 2024", | |
| date: "2024-01-08", | |
| citations: 789, | |
| abstract: "We present LLaVA-Med, a large multimodal model designed for biomedical applications. Our approach efficiently aligns visual and linguistic representations, achieving competitive performance on various biomedical VQA tasks.", | |
| tags: ["Multimodal", "LMM", "Vision-Language", "Biomedical"], | |
| status: "analyzing", | |
| likes: 567, | |
| views: 8934 | |
| }, | |
| { | |
| id: 5, | |
| title: "Efficient Fine-Tuning of Large Language Models: A Comprehensive Study", | |
| authors: ["Edward J. Hu", "Yelong Shen", "Pengwei Huang", "et al."], | |
| venue: "ACL 2024", | |
| date: "2024-01-05", | |
| citations: 456, | |
| abstract: "This comprehensive study investigates parameter-efficient fine-tuning methods for LLMs. We compare LoRA, Adapter, and Prefix-Tuning across multiple tasks, providing practical guidelines for practitioners.", | |
| tags: ["LLM Fine-tuning", "Parameter Efficiency", "NLP", "LoRA"], | |
| status: "new", | |
| likes: 334, | |
| views: 5678 | |
| }, | |
| { | |
| id: 6, | |
| title: "Reinforcement Learning in Robotics: From Simulation to Real-World Deployment", | |
| authors: ["Sergey Levine", "Pieter Abbeel", "John D. Schulman"], | |
| venue: "RSS 2024", | |
| date: "2024-01-03", | |
| citations: 678, | |
| abstract: "We address the sim-to-real gap in reinforcement learning for robotics. Our domain randomization and adaptation techniques enable seamless transfer of learned policies from simulation to physical robots.", | |
| tags: ["Reinforcement Learning", "Robotics", "Sim-to-Real", "Control"], | |
| status: "new", | |
| likes: 289, | |
| views: 4567 | |
| }, | |
| { | |
| id: 7, | |
| title: "Federated Learning with Differential Privacy: Theory and Practice", | |
| authors: ["Peter Kairouz", "H. Brendan McMahan", "Brian Knott", "et al."], | |
| venue: "IEEE S&P 2024", | |
| date: "2024-01-01", | |
| citations: 892, | |
| abstract: "This paper provides a rigorous analysis of differential privacy in federated learning settings. We derive tight privacy guarantees and propose efficient algorithms that achieve optimal utility-privacy trade-off.", | |
| tags: ["Federated Learning", "Differential Privacy", "Security", "ML"], | |
| status: "new", | |
| likes: 412, | |
| views: 6789 | |
| }, | |
| { | |
| id: 8, | |
| title: "Neural Architecture Search for Efficient Edge Computing", | |
| authors: ["Hanxiao Liu", "Karen Simonyan", "Yiming Yang", "Chris Dyer"], | |
| venue: "CVPR 2024", | |
| date: "2023-12-28", | |
| citations: 345, | |
| abstract: "We introduce EfficientNet-NAS, a family of neural networks optimized for edge devices. Our search method achieves 2-4x better efficiency compared to existing mobile-friendly architectures.", | |
| tags: ["Neural Architecture Search", "Edge AI", "Efficient Networks", "Mobile"], | |
| status: "new", | |
| likes: 267, | |
| views: 3456 | |
| } | |
| ]; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderPapers(samplePapers); | |
| setupFilterChips(); | |
| setupSearch(); | |
| }); | |
| // Render Papers | |
| function renderPapers(papers) { | |
| const paperList = document.getElementById('paperList'); | |
| paperList.innerHTML = papers.map(paper => ` | |
| <div class="paper-card" onclick="openAnalysisPanel(${paper.id})"> | |
| <div class="paper-header"> | |
| <h3 class="paper-title">${highlightKeywords(paper.title)}</h3> | |
| <span class="paper-status status-${paper.status}"> | |
| ${getStatusLabel(paper.status)} | |
| </span> | |
| </div> | |
| <div class="paper-meta"> | |
| <span class="paper-meta-item"> | |
| <i class="fas fa-user"></i> ${paper.authors.slice(0, 3).join(', ')}${paper.authors.length > 3 ? ' et al.' : ''} | |
| </span> | |
| <span class="paper-meta-item"> | |
| <i class="fas fa-map-marker-alt"></i> ${paper.venue} | |
| </span> | |
| <span class="paper-meta-item"> | |
| <i class="fas fa-calendar"></i> ${formatDate(paper.date)} | |
| </span> | |
| <span class="paper-meta-item"> | |
| <i class="fas fa引用次数"></i> ${formatNumber(paper.citations |