Hugging Face's logo

Spaces:
VinitT
/
ResearchRadar.AI
Sleeping

App Files Community
ResearchRadar.AI / templates /index.html
“vinit5112”
add all files
5672ed8
raw
history blame contribute delete
54.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Research Radar - AI-Powered Paper Analysis</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<meta name="description" content="AI-powered research paper analysis tool for searching, uploading, and chatting with academic documents">
</head>
<body>
<!-- Landing Page -->
<div id="landingPage" class="page active">
<!-- Navigation for Landing -->
<nav class="navbar landing-nav">
<div class="nav-container">
<div class="nav-brand">
<div class="brand-icon">
<i class="fas fa-brain"></i>
</div>
<div class="brand-text">
<span class="brand-name">Research Radar</span>
<span class="brand-tagline">AI Research Assistant</span>
</div>
</div>
<button class="mobile-nav-toggle" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="landing-nav-links">
<a href="#features" class="nav-link">
<i class="fas fa-star"></i>
<span>Features</span>
</a>
<a href="#about" class="nav-link">
<i class="fas fa-info-circle"></i>
<span>About</span>
</a>
<button class="nav-cta-btn" onclick="navigateToApp()">
<i class="fas fa-rocket"></i>
<span>Get Started</span>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="hero-background">
<div class="floating-shapes">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
</div>
</div>
<div class="hero-content">
<div class="hero-badge">
<i class="fas fa-sparkles"></i>
<span>Powered by AI</span>
</div>
<h1 class="hero-title">
<span class="gradient-text">Research Radar</span>
</h1>
<p class="hero-subtitle">
Discover, analyze, and understand research papers with our AI-powered assistant.
Search arXiv, upload documents, and get intelligent insights instantly.
</p>
<div class="hero-cta">
<button class="cta-button primary" onclick="navigateToApp('search')">
<i class="fas fa-rocket"></i>
Start Exploring
</button>
<button class="cta-button secondary" onclick="navigateToApp('upload')">
<i class="fas fa-upload"></i>
Upload Paper
</button>
</div>
<div class="hero-features">
<div class="feature-item" data-aos="fade-up" data-aos-delay="100">
<div class="feature-icon">
<i class="fas fa-search"></i>
</div>
<div class="feature-content">
<h3>Smart Search</h3>
<p>Search millions of papers from arXiv</p>
</div>
</div>
<div class="feature-item" data-aos="fade-up" data-aos-delay="200">
<div class="feature-icon">
<i class="fas fa-file-upload"></i>
</div>
<div class="feature-content">
<h3>Document Upload</h3>
<p>Upload PDFs, DOCX, and TXT files</p>
</div>
</div>
<div class="feature-item" data-aos="fade-up" data-aos-delay="300">
<div class="feature-icon">
<i class="fas fa-brain"></i>
</div>
<div class="feature-content">
<h3>AI Summaries</h3>
<p>Get intelligent paper summaries</p>
</div>
</div>
<div class="feature-item" data-aos="fade-up" data-aos-delay="400">
<div class="feature-icon">
<i class="fas fa-robot"></i>
</div>
<div class="feature-content">
<h3>Smart Chat</h3>
<p>Ask questions about your documents</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features-section">
<div class="features-container">
<div class="features-header">
<h2>Why Choose Research Radar?</h2>
<p>Powerful AI tools designed for researchers, students, and academics</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="card-icon">
<i class="fas fa-lightning-bolt"></i>
</div>
<h3>Lightning Fast</h3>
<p>Get instant AI-powered summaries and insights from research papers in seconds</p>
</div>
<div class="feature-card">
<div class="card-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Secure & Private</h3>
<p>Your documents are processed securely with enterprise-grade privacy protection</p>
</div>
<div class="feature-card">
<div class="card-icon">
<i class="fas fa-globe"></i>
</div>
<h3>Comprehensive</h3>
<p>Access millions of papers from arXiv and upload your own documents for analysis</p>
</div>
<div class="feature-card">
<div class="card-icon">
<i class="fas fa-comments"></i>
</div>
<h3>Interactive Chat</h3>
<p>Ask questions and get detailed explanations about any aspect of your papers</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="about-container">
<div class="about-content">
<h2>About Research Radar</h2>
<p>Research Radar is an AI-powered research assistant that helps you discover, analyze, and understand academic papers more efficiently. Whether you're a student working on assignments, a researcher exploring new topics, or an academic keeping up with the latest developments in your field, Research Radar makes it easy to extract insights from complex research papers.</p>
<div class="about-stats">
<div class="stat-item">
<div class="stat-number">2M+</div>
<div class="stat-label">Papers Analyzed</div>
</div>
<div class="stat-item">
<div class="stat-number">50K+</div>
<div class="stat-label">Active Users</div>
</div>
<div class="stat-item">
<div class="stat-number">99.9%</div>
<div class="stat-label">Uptime</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="landing-footer">
<div class="footer-container">
<div class="footer-content">
<div class="footer-brand">
<div class="brand-icon">
<i class="fas fa-brain"></i>
</div>
<span class="brand-name">Research Radar</span>
</div>
<p>&copy; 2024 Research Radar. Empowering research with AI.</p>
</div>
</div>
</footer>
</div>
<!-- Application Page -->
<div id="appPage" class="page">
<!-- Navigation for App -->
<nav class="navbar app-nav">
<div class="nav-container">
<div class="nav-brand" onclick="navigateToLanding()">
<div class="brand-icon">
<i class="fas fa-brain"></i>
</div>
<div class="brand-text">
<span class="brand-name">Research Radar</span>
<span class="brand-tagline">AI Research Assistant</span>
</div>
</div>
<button class="mobile-nav-toggle" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="nav-links">
<a href="#search" class="nav-link active" data-section="search">
<i class="fas fa-search"></i>
<span>Search</span>
</a>
<a href="#upload" class="nav-link" data-section="upload">
<i class="fas fa-upload"></i>
<span>Upload</span>
</a>
<a href="#mypapers" class="nav-link" data-section="mypapers">
<i class="fas fa-folder-open"></i>
<span>My Papers</span>
</a>
</div>
<!-- Status Indicator -->
<div class="status-indicator" id="statusIndicator">
<div class="status-dot"></div>
<span class="status-text">Ready</span>
</div>
<!-- Back to Landing -->
<button class="back-to-landing" onclick="navigateToLanding()" title="Back to Home">
<i class="fas fa-home"></i>
</button>
</div>
</nav>
<!-- Main Container -->
<div class="main-container">
<!-- Search Section -->
<section id="search" class="section active">
<div class="search-hero">
<div class="search-hero-content">
<div class="search-title-area">
<div class="search-icon-large">
<i class="fas fa-search"></i>
</div>
<h1>Discover Research Papers</h1>
<p>Search through millions of academic papers from arXiv and get AI-powered insights</p>
</div>
<!-- Enhanced Search Box -->
<div class="search-box-enhanced">
<div class="search-input-container">
<div class="search-input-wrapper">
<i class="fas fa-search search-icon"></i>
<input type="text" id="searchInput" placeholder="What are you researching today?" autocomplete="off">
<button id="searchBtn" class="search-submit-btn">
<i class="fas fa-arrow-right"></i>
<span>Search</span>
</button>
</div>
<div class="search-actions">
<button class="voice-search-btn" title="Voice Search">
<i class="fas fa-microphone"></i>
</button>
<button class="advanced-search-btn" title="Advanced Search" onclick="toggleAdvancedSearch()">
<i class="fas fa-sliders-h"></i>
</button>
</div>
</div>
<!-- Advanced Filters -->
<div class="advanced-filters" id="advancedFilters">
<div class="filters-row">
<div class="filter-group">
<label class="filter-label">
<i class="fas fa-calendar"></i>
Time Range
</label>
<select id="timeFilter" class="filter-select">
<option value="all">All Time</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="recent">Last 6 months</option>
<option value="month">Last month</option>
</select>
</div>
<div class="filter-group">
<label class="filter-label">
<i class="fas fa-tag"></i>
Category
</label>
<select id="categoryFilter" class="filter-select">
<option value="all">All Categories</option>
<option value="cs">Computer Science</option>
<option value="math">Mathematics</option>
<option value="physics">Physics</option>
<option value="stat">Statistics</option>
<option value="bio">Biology</option>
<option value="econ">Economics</option>
</select>
</div>
<div class="filter-group">
<label class="filter-label">
<i class="fas fa-sort"></i>
Sort By
</label>
<select id="sortFilter" class="filter-select">
<option value="relevance">Relevance</option>
<option value="date">Latest First</option>
<option value="citations">Most Cited</option>
<option value="title">Title A-Z</option>
</select>
</div>
</div>
</div>
</div>
<!-- Quick Search Categories -->
<div class="quick-search-section">
<h3>Popular Research Areas</h3>
<div class="quick-search-grid">
<button class="quick-search-card" data-query="machine learning">
<div class="card-icon">
<i class="fas fa-robot"></i>
</div>
<div class="card-content">
<h4>Machine Learning</h4>
<span>12,847 papers</span>
</div>
</button>
<button class="quick-search-card" data-query="artificial intelligence">
<div class="card-icon">
<i class="fas fa-brain"></i>
</div>
<div class="card-content">
<h4>Artificial Intelligence</h4>
<span>8,932 papers</span>
</div>
</button>
<button class="quick-search-card" data-query="quantum computing">
<div class="card-icon">
<i class="fas fa-atom"></i>
</div>
<div class="card-content">
<h4>Quantum Computing</h4>
<span>3,456 papers</span>
</div>
</button>
<button class="quick-search-card" data-query="deep learning">
<div class="card-icon">
<i class="fas fa-network-wired"></i>
</div>
<div class="card-content">
<h4>Deep Learning</h4>
<span>15,234 papers</span>
</div>
</button>
<button class="quick-search-card" data-query="computer vision">
<div class="card-icon">
<i class="fas fa-eye"></i>
</div>
<div class="card-content">
<h4>Computer Vision</h4>
<span>9,876 papers</span>
</div>
</button>
<button class="quick-search-card" data-query="natural language processing">
<div class="card-icon">
<i class="fas fa-comments"></i>
</div>
<div class="card-content">
<h4>NLP</h4>
<span>7,543 papers</span>
</div>
</button>
</div>
</div>
</div>
</div>
<!-- Search Tips -->
<div class="search-tips" id="searchTips">
<div class="tips-header">
<h3><i class="fas fa-lightbulb"></i> Search Tips</h3>
<button class="tips-toggle" onclick="toggleSearchTips()">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div class="tips-content">
<div class="tips-grid">
<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-quotes-left"></i>
</div>
<div class="tip-content">
<h4>Use Quotes</h4>
<p>Search for exact phrases like <code>"neural networks"</code></p>
</div>
</div>
<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-plus"></i>
</div>
<div class="tip-content">
<h4>Combine Terms</h4>
<p>Use AND, OR like <code>machine learning AND ethics</code></p>
</div>
</div>
<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-user"></i>
</div>
<div class="tip-content">
<h4>Search Authors</h4>
<p>Find papers by author <code>author:smith</code></p>
</div>
</div>
<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-asterisk"></i>
</div>
<div class="tip-content">
<h4>Use Wildcards</h4>
<p>Use * for variations like <code>neural*</code></p>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Searches -->
<div class="recent-searches" id="recentSearches" style="display: none;">
<div class="recent-header">
<h3><i class="fas fa-history"></i> Recent Searches</h3>
<button class="clear-history" onclick="clearSearchHistory()">
<i class="fas fa-trash"></i> Clear
</button>
</div>
<div class="recent-items" id="recentSearchItems">
<!-- Dynamic content -->
</div>
</div>
<!-- Search Results -->
<div id="searchResults" class="results-container">
<div class="search-placeholder-enhanced">
<div class="placeholder-animation">
<div class="floating-papers">
<div class="paper-icon">📄</div>
<div class="paper-icon">📊</div>
<div class="paper-icon">🔬</div>
</div>
</div>
<h3>Ready to explore the world of research?</h3>
<p>Start by typing a topic above or click on one of the popular research areas</p>
<div class="placeholder-stats">
<div class="stat">
<strong>2.3M+</strong>
<span>Papers Available</span>
</div>
<div class="stat">
<strong>50+</strong>
<span>Research Fields</span>
</div>
<div class="stat">
<strong>24/7</strong>
<span>Updated</span>
</div>
</div>
</div>
</div>
<!-- Search Suggestions Dropdown -->
<div class="search-suggestions-dropdown" id="searchSuggestions">
<div class="suggestions-section">
<h4>Suggestions</h4>
<div class="suggestion-item" data-query="machine learning">
<i class="fas fa-search"></i>
<span>machine learning</span>
<small>12.8k papers</small>
</div>
<div class="suggestion-item" data-query="neural networks">
<i class="fas fa-search"></i>
<span>neural networks</span>
<small>8.3k papers</small>
</div>
<div class="suggestion-item" data-query="quantum computing">
<i class="fas fa-search"></i>
<span>quantum computing</span>
<small>3.4k papers</small>
</div>
</div>
<div class="suggestions-section">
<h4>Trending Today</h4>
<div class="suggestion-item trending" data-query="large language models">
<i class="fas fa-fire"></i>
<span>large language models</span>
<small class="trending-badge">Hot</small>
</div>
<div class="suggestion-item trending" data-query="transformer architecture">
<i class="fas fa-fire"></i>
<span>transformer architecture</span>
<small class="trending-badge">Hot</small>
</div>
</div>
</div>
</section>
<!-- Upload Section -->
<section id="upload" class="section">
<div class="upload-hero">
<div class="upload-hero-content">
<div class="upload-title-area">
<div class="upload-icon-large">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<h1>Upload & Analyze Documents</h1>
<p>Upload research papers, documents, or analyze from URLs to get AI-powered insights and summaries</p>
</div>
<!-- Enhanced Upload Methods -->
<div class="upload-methods-enhanced">
<!-- File Upload Zone -->
<div class="upload-method-card primary-upload" id="uploadZone">
<div class="upload-card-header">
<div class="upload-card-icon">
<i class="fas fa-file-upload"></i>
</div>
<div class="upload-card-title">
<h3>Upload Document</h3>
<p>Drag & drop or browse files</p>
</div>
</div>
<div class="upload-drop-zone">
<div class="drop-zone-content">
<div class="upload-animation">
<div class="upload-cloud">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div class="upload-arrow">↑</div>
</div>
<h4>Drop files here</h4>
<p>or click to browse</p>
<div class="supported-formats">
<div class="format-badge pdf">
<i class="fas fa-file-pdf"></i>
<span>PDF</span>
</div>
<div class="format-badge docx">
<i class="fas fa-file-word"></i>
<span>DOCX</span>
</div>
<div class="format-badge txt">
<i class="fas fa-file-alt"></i>
<span>TXT</span>
</div>
</div>
<div class="upload-specs">
<span><i class="fas fa-info-circle"></i> Max size: 16MB</span>
<span><i class="fas fa-shield-alt"></i> Secure upload</span>
</div>
</div>
<input type="file" id="fileInput" accept=".pdf,.txt,.docx" hidden>
</div>
<div class="upload-actions">
<button class="browse-btn" onclick="document.getElementById('fileInput').click()">
<i class="fas fa-folder-open"></i>
<span>Browse Files</span>
</button>
</div>
</div>
<!-- URL Analysis -->
<div class="upload-method-card secondary-upload">
<div class="upload-card-header">
<div class="upload-card-icon">
<i class="fas fa-link"></i>
</div>
<div class="upload-card-title">
<h3>Analyze from URL</h3>
<p>Paste arXiv or research paper URLs</p>
</div>
</div>
<div class="url-input-enhanced">
<div class="url-input-wrapper">
<i class="fas fa-link url-icon"></i>
<input type="text" id="paperUrl" placeholder="https://arxiv.org/abs/2301.00001" autocomplete="off">
<button id="analyzeUrlBtn" class="analyze-btn">
<i class="fas fa-search"></i>
<span>Analyze</span>
</button>
</div>
</div>
<div class="url-suggestions">
<h4>Popular Sources</h4>
<div class="source-buttons">
<button class="source-btn" data-source="arxiv">
<i class="fas fa-graduation-cap"></i>
<span>arXiv</span>
</button>
<button class="source-btn" data-source="pubmed">
<i class="fas fa-microscope"></i>
<span>PubMed</span>
</button>
<button class="source-btn" data-source="ieee">
<i class="fas fa-microchip"></i>
<span>IEEE</span>
</button>
<button class="source-btn" data-source="acm">
<i class="fas fa-code"></i>
<span>ACM</span>
</button>
</div>
</div>
<div class="example-urls">
<details class="url-examples-details">
<summary>
<i class="fas fa-lightbulb"></i>
Example URLs
</summary>
<div class="example-list">
<button class="example-url" data-url="https://arxiv.org/abs/2301.00001">
<i class="fas fa-external-link-alt"></i>
<span>https://arxiv.org/abs/2301.00001</span>
<small>Machine Learning Paper</small>
</button>
<button class="example-url" data-url="https://arxiv.org/abs/2205.11487">
<i class="fas fa-external-link-alt"></i>
<span>https://arxiv.org/abs/2205.11487</span>
<small>PaLM Language Model</small>
</button>
<button class="example-url" data-url="https://arxiv.org/abs/2203.02155">
<i class="fas fa-external-link-alt"></i>
<span>https://arxiv.org/abs/2203.02155</span>
<small>Training Language Models</small>
</button>
</div>
</details>
</div>
</div>
</div>
<!-- Upload Tips -->
<div class="upload-tips">
<div class="tips-header">
<h3><i class="fas fa-lightbulb"></i> Upload Tips</h3>
<button class="tips-toggle" onclick="toggleUploadTips()">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div class="tips-content" id="uploadTipsContent">
<div class="tips-grid">
<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-file-pdf"></i>
</div>
<div class="tip-content">
<h4>Best Format</h4>
<p>PDF files work best for accurate text extraction</p>
</div>
</div>
<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-compress-alt"></i>
</div>
<div class="tip-content">
<h4>File Size</h4>
<p>Keep files under 16MB for faster processing</p>
</div>
</div>
<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-language"></i>
</div>
<div class="tip-content">
<h4>Language</h4>
<p>English documents get the best analysis results</p>
</div>
</div>
<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="tip-content">
<h4>Privacy</h4>
<p>Your documents are processed securely and privately</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Enhanced Upload Progress -->
<div class="upload-progress-enhanced" id="uploadProgress" style="display: none;">
<div class="progress-container">
<div class="progress-header">
<div class="progress-title">
<h3>Processing Document</h3>
<p id="progressSubtitle">Preparing your document for analysis...</p>
</div>
<div class="progress-stats">
<span class="progress-percentage" id="progressPercentage">0%</span>
<span class="progress-time" id="progressTime">Estimating...</span>
</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
<div class="progress-glow"></div>
</div>
</div>
<div class="progress-steps-enhanced">
<div class="progress-step active" data-step="1">
<div class="step-icon">
<i class="fas fa-upload"></i>
</div>
<div class="step-content">
<h4>Uploading</h4>
<p>Transferring your document</p>
</div>
</div>
<div class="progress-step" data-step="2">
<div class="step-icon">
<i class="fas fa-file-text"></i>
</div>
<div class="step-content">
<h4>Extracting</h4>
<p>Reading document content</p>
</div>
</div>
<div class="progress-step" data-step="3">
<div class="step-icon">
<i class="fas fa-brain"></i>
</div>
<div class="step-content">
<h4>Analyzing</h4>
<p>AI processing in progress</p>
</div>
</div>
<div class="progress-step" data-step="4">
<div class="step-icon">
<i class="fas fa-check-circle"></i>
</div>
<div class="step-content">
<h4>Complete</h4>
<p>Ready for questions</p>
</div>
</div>
</div>
</div>
</div>
<!-- Enhanced Results -->
<div id="uploadResults" class="results-container">
<div class="upload-placeholder-enhanced">
<div class="placeholder-animation">
<div class="floating-documents">
<div class="doc-icon">📄</div>
<div class="doc-icon">📊</div>
<div class="doc-icon">📋</div>
</div>
</div>
<h3>Ready to analyze your documents?</h3>
<p>Upload a file or paste a URL to get started with AI-powered analysis</p>
<div class="placeholder-features">
<div class="feature">
<i class="fas fa-magic"></i>
<span>AI Summaries</span>
</div>
<div class="feature">
<i class="fas fa-question-circle"></i>
<span>Q&A Chat</span>
</div>
<div class="feature">
<i class="fas fa-key"></i>
<span>Key Insights</span>
</div>
</div>
</div>
</div>
</section>
<!-- My Papers Section -->
<section id="mypapers" class="section">
<div class="mypapers-hero">
<div class="mypapers-hero-content">
<div class="mypapers-title-area">
<div class="mypapers-icon-large">
<i class="fas fa-folder-open"></i>
</div>
<h1>My Papers</h1>
<p>Access and manage all your uploaded and analyzed research papers</p>
</div>
<div class="mypapers-actions">
<button class="refresh-papers-btn" onclick="researchRadar.loadMyPapers()">
<i class="fas fa-sync-alt"></i>
<span>Refresh</span>
</button>
<button class="clear-all-btn" onclick="researchRadar.clearAllPapers()">
<i class="fas fa-trash"></i>
<span>Clear All</span>
</button>
</div>
</div>
</div>
<div class="mypapers-content">
<div class="mypapers-loading" id="mypapersLoading" style="display: none;">
<div class="loading-spinner"></div>
<p>Loading your papers...</p>
</div>
<div class="mypapers-empty" id="mypapersEmpty" style="display: none;">
<div class="empty-state">
<div class="empty-icon">
<i class="fas fa-folder-open"></i>
</div>
<h3>No Papers Yet</h3>
<p>Upload documents or search for papers to get started</p>
<div class="empty-actions">
<button class="btn-primary" onclick="researchRadar.switchSection('upload')">
<i class="fas fa-upload"></i>
<span>Upload Document</span>
</button>
<button class="btn-secondary" onclick="researchRadar.switchSection('search')">
<i class="fas fa-search"></i>
<span>Search Papers</span>
</button>
</div>
</div>
</div>
<div class="papers-grid" id="papersGrid">
<!-- Papers will be loaded here dynamically -->
</div>
</div>
</section>
<!-- Summary + Chat Section -->
<section id="summary-chat" class="section" style="display: none;">
<div class="summary-chat-header">
<div class="header-content">
<button class="back-btn" onclick="goBackToSearch()">
<i class="fas fa-arrow-left"></i>
<span>Back to Search</span>
</button>
<div class="paper-info" id="paperInfo">
<h2 id="paperTitle">Paper Title</h2>
<div class="paper-meta">
<span class="author" id="paperAuthor">Author Name</span>
<span class="date" id="paperDate">2024</span>
<span class="category" id="paperCategory">cs.LG</span>
</div>
</div>
</div>
</div>
<!-- Tab Navigation -->
<div class="tab-navigation">
<div class="tab-nav-container">
<button class="tab-btn active" data-tab="summary" onclick="switchTab('summary')">
<i class="fas fa-file-text"></i>
<span>AI Summary</span>
<div class="tab-indicator"></div>
</button>
<button class="tab-btn" data-tab="chat" onclick="switchTab('chat')">
<i class="fas fa-comments"></i>
<span>Ask Questions</span>
<div class="tab-indicator"></div>
</button>
</div>
</div>
<!-- Tab Content -->
<div class="tab-content-container">
<!-- Summary Tab -->
<div id="summary-tab" class="tab-content active">
<div class="summary-container">
<div class="summary-header">
<div class="summary-title">
<div class="summary-icon">
<i class="fas fa-brain"></i>
</div>
<div class="summary-title-text">
<h3>AI-Generated Summary</h3>
<p>Comprehensive analysis of the research paper</p>
</div>
</div>
</div>
<div class="summary-main-content">
<div class="summary-content" id="summaryContent">
<div class="summary-loading" id="summaryLoading">
<div class="loading-spinner"></div>
<div class="loading-text">
<h4>Analyzing paper...</h4>
<p>Our AI is reading the document to generate a comprehensive summary.</p>
</div>
</div>
<div class="summary-text" id="summaryText" style="display: none;">
<!-- Summary will be loaded here -->
</div>
</div>
</div>
</div>
</div>
<!-- Chat Tab -->
<div id="chat-tab" class="tab-content">
<div class="chat-container">
<div class="chat-header">
<div class="chat-title">
<div class="chat-icon">
<i class="fas fa-robot"></i>
</div>
<div class="chat-title-text">
<h3>Interactive Q&A</h3>
<p>Ask me anything about this paper</p>
</div>
</div>
<div class="chat-status">
<div class="status-indicator online">
<div class="status-dot"></div>
<span>AI Ready</span>
</div>
</div>
</div>
<div class="chat-messages-container" id="chatMessagesPanel">
<div class="chat-welcome">
<div class="welcome-avatar">
<div class="avatar-icon">
<i class="fas fa-robot"></i>
</div>
<div class="avatar-status"></div>
</div>
<div class="welcome-content">
<h4>👋 Welcome! I'm ready to help</h4>
<p>I've thoroughly analyzed this research paper. Ask me about its contributions, methodology, or any other details.</p>
</div>
</div>
<!-- Chat messages will be dynamically added here -->
</div>
<div class="chat-input-area">
<!-- Quick Questions -->
<div class="quick-questions-chips" id="quickQuestionsChips">
<button class="quick-question-chip" onclick="askQuickQuestion('Main contribution?')">Main contribution?</button>
<button class="quick-question-chip" onclick="askQuickQuestion('Methodology?')">Methodology?</button>
<button class="quick-question-chip" onclick="askQuickQuestion('Key findings?')">Key findings?</button>
<button class="quick-question-chip" onclick="askQuickQuestion('Limitations?')">Limitations?</button>
</div>
<!-- Chat Input -->
<div class="chat-input-container">
<div class="input-wrapper">
<textarea id="chatInputPanel" placeholder="Ask a follow-up question..." rows="1"></textarea>
<button id="chatSendBtnPanel" class="send-btn-panel" title="Send Message">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
<div class="loading-content">
<div class="loading-animation">
<div class="loading-spinner"></div>
<div class="loading-dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<h3 id="loadingTitle">Processing your request...</h3>
<p id="loadingSubtitle">This may take a few moments</p>
</div>
</div>
<!-- Toast Notifications -->
<div id="toastContainer" class="toast-container"></div>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>