Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SEER - Advanced Academic Search</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%); | |
| } | |
| .paper-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .search-highlight { | |
| background-color: rgba(253, 224, 71, 0.3); | |
| padding: 0 2px; | |
| border-radius: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-search-location text-3xl mr-3"></i> | |
| <h1 class="text-2xl md:text-3xl font-bold">SEER</h1> | |
| <span class="ml-2 px-2 py-1 bg-purple-800 rounded-full text-xs md:text-sm">Beta</span> | |
| </div> | |
| <nav class="flex space-x-1 md:space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-lg hover:bg-purple-600 transition">Home</a> | |
| <a href="#" class="px-3 py-2 rounded-lg hover:bg-purple-600 transition">Features</a> | |
| <a href="#" class="px-3 py-2 rounded-lg hover:bg-purple-600 transition">Research</a> | |
| <a href="#" class="px-3 py-2 rounded-lg hover:bg-purple-600 transition">About</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Hero Section --> | |
| <section class="mb-12 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Next-Generation Academic Search</h2> | |
| <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto"> | |
| SEER combines semantic retrieval, task-aware parsing, and explainable AI to revolutionize how you discover research. | |
| </p> | |
| </section> | |
| <!-- Search Section --> | |
| <section class="mb-12"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto"> | |
| <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4"> | |
| <div class="flex-grow relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" id="search-input" placeholder="Search papers by concept, task, or dataset..." | |
| class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| <button id="search-button" class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center justify-center"> | |
| <i class="fas fa-bolt mr-2"></i> Search | |
| </button> | |
| </div> | |
| <!-- Advanced Search Toggle --> | |
| <div class="mt-4"> | |
| <button id="advanced-toggle" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center"> | |
| <span>Advanced Search</span> | |
| <i class="fas fa-chevron-down ml-1 text-xs transition-transform duration-200"></i> | |
| </button> | |
| <!-- Advanced Search Panel --> | |
| <div id="advanced-panel" class="hidden mt-4 p-4 bg-gray-50 rounded-lg"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Task/Intent</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">Any task</option> | |
| <option value="classification">Classification</option> | |
| <option value="generation">Text Generation</option> | |
| <option value="qa">Question Answering</option> | |
| <option value="summarization">Summarization</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Dataset/Model</label> | |
| <input type="text" placeholder="E.g. GLUE, BERT, GPT-3" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Publication Year</label> | |
| <div class="flex space-x-2"> | |
| <input type="number" placeholder="From" class="w-1/2 border border-gray-300 rounded-lg px-3 py-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <input type="number" placeholder="To" class="w-1/2 border border-gray-300 rounded-lg px-3 py-2 focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Citation Count</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">Any</option> | |
| <option value="100+">100+ citations</option> | |
| <option value="50+">50+ citations</option> | |
| <option value="10+">10+ citations</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="results-section" class="hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Search Results</h3> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-gray-600 mr-2">Sort by:</span> | |
| <select class="text-sm border border-gray-300 rounded-lg px-2 py-1 focus:ring-purple-500 focus:border-purple-500"> | |
| <option>Relevance</option> | |
| <option>Citations</option> | |
| <option>Newest</option> | |
| <option>User Feedback</option> | |
| </select> | |
| </div> | |
| <button class="text-sm text-purple-600 hover:text-purple-800 flex items-center"> | |
| <i class="fas fa-sliders-h mr-1"></i> Filters | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results List --> | |
| <div id="results-list" class="space-y-6"> | |
| <!-- Sample Result Item 1 --> | |
| <div class="paper-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-1"> | |
| <a href="#" class="hover:text-purple-600">BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding</a> | |
| </h4> | |
| <p class="text-sm text-gray-600 mb-2">Jacob Devlin, Ming-Wei Chang, Kenton Lee, Kristina Toutanova • 2019</p> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Transformers</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Pre-training</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">NLP</span> | |
| </div> | |
| <p class="text-gray-700 mb-3"> | |
| We introduce a new language representation model called BERT, which stands for Bidirectional Encoder Representations from Transformers. Unlike recent language representation models, BERT is designed to pre-train deep bidirectional representations by jointly conditioning on both left and right context in all layers. As a result, the pre-trained BERT representations can be fine-tuned with just one additional output layer to create state-of-the-art models for a wide range of tasks, such as question answering and language inference, without substantial task-specific architecture modifications. | |
| </p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="mr-4"><i class="fas fa-quote-right mr-1"></i> 12,540 citations</span> | |
| <span class="mr-4"><i class="fas fa-database mr-1"></i> GLUE, SQuAD</span> | |
| <span><i class="fas fa-tasks mr-1"></i> Classification, QA</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex flex-col items-center"> | |
| <div class="bg-purple-100 text-purple-800 rounded-lg px-3 py-1 mb-2 text-sm font-medium"> | |
| 98% Match | |
| </div> | |
| <button class="p-2 text-gray-400 hover:text-purple-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Explanation and Feedback --> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="mb-3"> | |
| <h5 class="text-sm font-medium text-gray-700 mb-1 flex items-center"> | |
| <i class="fas fa-lightbulb mr-1 text-yellow-500"></i> Why this matches your search | |
| </h5> | |
| <p class="text-sm text-gray-600"> | |
| This paper matches your search for <span class="search-highlight">"transformer models for NLP tasks"</span> because it introduces BERT, a transformer-based architecture that achieves state-of-the-art results on multiple NLP benchmarks. The paper specifically addresses <span class="search-highlight">question answering</span> and <span class="search-highlight">text classification</span> tasks you mentioned. | |
| </p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100 flex items-center"> | |
| <i class="fas fa-thumbs-up mr-1"></i> Relevant | |
| </button> | |
| <button class="px-3 py-1 bg-red-50 text-red-600 rounded-full text-sm hover:bg-red-100 flex items-center"> | |
| <i class="fas fa-thumbs-down mr-1"></i> Not Relevant | |
| </button> | |
| </div> | |
| <button class="text-sm text-purple-600 hover:text-purple-800 flex items-center"> | |
| <i class="fas fa-robot mr-1"></i> Ask SEER to refine | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Result Item 2 --> | |
| <div class="paper-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-1"> | |
| <a href="#" class="hover:text-purple-600">Attention Is All You Need</a> | |
| </h4> | |
| <p class="text-sm text-gray-600 mb-2">Ashish Vaswani, Noam Shazeer, Niki Parmar, et al. • 2017</p> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Attention</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Sequence Models</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Machine Translation</span> | |
| </div> | |
| <p class="text-gray-700 mb-3"> | |
| The dominant sequence transduction models are based on complex recurrent or convolutional neural networks that include an encoder and a decoder. The best performing models also connect the encoder and decoder through an attention mechanism. We propose a new simple network architecture, the Transformer, based solely on attention mechanisms, dispensing with recurrence and convolutions entirely. Experiments on two machine translation tasks show these models to be superior in quality while being more parallelizable and requiring significantly less time to train. | |
| </p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="mr-4"><i class="fas fa-quote-right mr-1"></i> 45,320 citations</span> | |
| <span class="mr-4"><i class="fas fa-database mr-1"></i> WMT 2014</span> | |
| <span><i class="fas fa-tasks mr-1"></i> Machine Translation</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex flex-col items-center"> | |
| <div class="bg-purple-100 text-purple-800 rounded-lg px-3 py-1 mb-2 text-sm font-medium"> | |
| 92% Match | |
| </div> | |
| <button class="p-2 text-gray-400 hover:text-purple-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Explanation and Feedback --> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="mb-3"> | |
| <h5 class="text-sm font-medium text-gray-700 mb-1 flex items-center"> | |
| <i class="fas fa-lightbulb mr-1 text-yellow-500"></i> Why this matches your search | |
| </h5> | |
| <p class="text-sm text-gray-600"> | |
| This foundational paper matches your interest in <span class="search-highlight">"transformer architectures"</span> as it introduces the original Transformer model. While focused on machine translation, the architecture has become fundamental to <span class="search-highlight">NLP tasks</span> like those you're researching. | |
| </p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100 flex items-center"> | |
| <i class="fas fa-thumbs-up mr-1"></i> Relevant | |
| </button> | |
| <button class="px-3 py-1 bg-red-50 text-red-600 rounded-full text-sm hover:bg-red-100 flex items-center"> | |
| <i class="fas fa-thumbs-down mr-1"></i> Not Relevant | |
| </button> | |
| </div> | |
| <button class="text-sm text-purple-600 hover:text-purple-800 flex items-center"> | |
| <i class="fas fa-robot mr-1"></i> Ask SEER to refine | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="mt-8 flex justify-center"> | |
| <nav class="flex items-center space-x-2"> | |
| <button class="px-3 py-1 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 rounded-lg bg-purple-600 text-white">1</button> | |
| <button class="px-3 py-1 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100">2</button> | |
| <button class="px-3 py-1 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100">3</button> | |
| <span class="px-2 text-gray-500">...</span> | |
| <button class="px-3 py-1 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100">10</button> | |
| <button class="px-3 py-1 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="my-16"> | |
| <h3 class="text-2xl font-bold text-center text-gray-800 mb-8">SEER's Unique Capabilities</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-brain text-3xl"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">Semantic Understanding</h4> | |
| <p class="text-gray-600"> | |
| SEER goes beyond keywords to understand research concepts, methodologies, and findings at a deeper level. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-filter text-3xl"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">Task-Aware Filtering</h4> | |
| <p class="text-gray-600"> | |
| Find papers relevant to your specific research task, whether it's classification, generation, or QA. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-database text-3xl"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">Dataset/Model Search</h4> | |
| <p class="text-gray-600"> | |
| Search for papers that use specific datasets or model architectures like BERT or GPT-3. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-comment-alt text-3xl"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">Explainable Matches</h4> | |
| <p class="text-gray-600"> | |
| Understand why each paper was matched to your query with clear, interpretable explanations. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-chart-line text-3xl"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">Dynamic Reranking</h4> | |
| <p class="text-gray-600"> | |
| Results improve as you provide feedback, learning your preferences over time. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-project-diagram text-3xl"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">Research Graph</h4> | |
| <p class="text-gray-600"> | |
| Visualize connections between papers, datasets, and methodologies in your field. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h5 class="text-lg font-semibold mb-4">SEER</h5> | |
| <p class="text-gray-400"> | |
| Next-generation academic search powered by semantic AI and researcher feedback. | |
| </p> | |
| </div> | |
| <div> | |
| <h6 class="font-medium mb-4">Product</h6> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h6 class="font-medium mb-4">Resources</h6> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Research</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h6 class="font-medium mb-4">Connect</h6> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| <p class="text-gray-400">contact@seerresearch.ai</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 SEER Research. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Loading Indicator --> | |
| <div id="loading-indicator" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white p-8 rounded-xl text-center max-w-md"> | |
| <div class="animate-pulse-slow text-purple-600 mb-4"> | |
| <i class="fas fa-atom fa-spin text-4xl"></i> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-2">Analyzing Your Query</h4> | |
| <p class="text-gray-600 mb-4">SEER is parsing your intent, searching semantic embeddings, and applying task-specific filters...</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // API Configuration | |
| const API_CONFIG = { | |
| BASE_URL: 'https://api.seerresearch.ai/v1', | |
| ENDPOINTS: { | |
| SEARCH: '/search', | |
| FEEDBACK: '/feedback', | |
| REFINE: '/refine' | |
| } | |
| }; | |
| // Toggle advanced search panel | |
| document.getElementById('advanced-toggle').addEventListener('click', function() { | |
| const panel = document.getElementById('advanced-panel'); | |
| const icon = this.querySelector('i'); | |
| panel.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| // Perform search | |
| document.getElementById('search-button').addEventListener('click', async function() { | |
| const searchInput = document.getElementById('search-input').value.trim(); | |
| const advancedPanel = document.getElementById('advanced-panel'); | |
| if (searchInput) { | |
| try { | |
| // Show loading indicator | |
| document.getElementById('loading-indicator').classList.remove('hidden'); | |
| // Prepare search payload | |
| const payload = { | |
| query: searchInput, | |
| filters: {} | |
| }; | |
| // Add advanced filters if panel is visible | |
| if (!advancedPanel.classList.contains('hidden')) { | |
| payload.filters = { | |
| task: document.querySelector('#advanced-panel select:nth-of-type(1)').value, | |
| dataset: document.querySelector('#advanced-panel input[type="text"]').value, | |
| yearFrom: document.querySelector('#advanced-panel input[type="number"]:nth-of-type(1)').value, | |
| yearTo: document.querySelector('#advanced-panel input[type="number"]:nth-of-type(2)').value, | |
| citations: document.querySelector('#advanced-panel select:nth-of-type(2)').value | |
| }; | |
| } | |
| // Call search API | |
| const response = await fetch(`${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.SEARCH}`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${localStorage.getItem('seer_token')}` | |
| }, | |
| body: JSON.stringify(payload) | |
| }); | |
| if (!response.ok) throw new Error('Search failed'); | |
| const results = await response.json(); | |
| displayResults(results); | |
| // Hide loading and show results | |
| document.getElementById('loading-indicator').classList.add('hidden'); | |
| document.getElementById('results-section').classList.remove('hidden'); | |
| // Scroll to results | |
| document.getElementById('results-section').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } catch (error) { | |
| console.error('Search error:', error); | |
| document.getElementById('loading-indicator').classList.add('hidden'); | |
| alert('Search failed. Please try again.'); | |
| } | |
| } else { | |
| alert('Please enter a search term'); | |
| } | |
| }); | |
| // Display search results | |
| function displayResults(results) { | |
| const resultsContainer = document.getElementById('results-list'); | |
| resultsContainer.innerHTML = ''; | |
| results.forEach(paper => { | |
| const paperElement = document.createElement('div'); | |
| paperElement.className = 'paper-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300'; | |
| paperElement.innerHTML = ` | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-1"> | |
| <a href="${paper.url}" target="_blank" class="hover:text-purple-600">${paper.title}</a> | |
| </h4> | |
| <p class="text-sm text-gray-600 mb-2">${paper.authors} • ${paper.year}</p> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| ${paper.tags.map(tag => | |
| `<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">${tag}</span>` | |
| ).join('')} | |
| </div> | |
| <p class="text-gray-700 mb-3">${paper.abstract}</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="mr-4"><i class="fas fa-quote-right mr-1"></i> ${paper.citations} citations</span> | |
| <span class="mr-4"><i class="fas fa-database mr-1"></i> ${paper.datasets.join(', ')}</span> | |
| <span><i class="fas fa-tasks mr-1"></i> ${paper.tasks.join(', ')}</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex flex-col items-center"> | |
| <div class="bg-purple-100 text-purple-800 rounded-lg px-3 py-1 mb-2 text-sm font-medium"> | |
| ${Math.round(paper.relevance * 100)}% Match | |
| </div> | |
| <button class="p-2 text-gray-400 hover:text-purple-600" onclick="savePaper('${paper.id}')"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="mb-3"> | |
| <h5 class="text-sm font-medium text-gray-700 mb-1 flex items-center"> | |
| <i class="fas fa-lightbulb mr-1 text-yellow-500"></i> Why this matches your search | |
| </h5> | |
| <p class="text-sm text-gray-600"> | |
| ${paper.explanation} | |
| </p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100 flex items-center" | |
| onclick="submitFeedback('${paper.id}', 'positive')"> | |
| <i class="fas fa-thumbs-up mr-1"></i> Relevant | |
| </button> | |
| <button class="px-3 py-1 bg-red-50 text-red-600 rounded-full text-sm hover:bg-red-100 flex items-center" | |
| onclick="submitFeedback('${paper.id}', 'negative')"> | |
| <i class="fas fa-thumbs-down mr-1"></i> Not Relevant | |
| </button> | |
| </div> | |
| <button class="text-sm text-purple-600 hover:text-purple-800 flex items-center" | |
| onclick="refineSearch('${paper.id}')"> | |
| <i class="fas fa-robot mr-1"></i> Ask SEER to refine | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| resultsContainer.appendChild(paperElement); | |
| }); | |
| } | |
| // Save paper to user library | |
| async function savePaper(paperId) { | |
| try { | |
| const response = await fetch(`${API_CONFIG.BASE_URL}/user/library`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${localStorage.getItem('seer_token')}` | |
| }, | |
| body: JSON.stringify({ paperId }) | |
| }); | |
| if (response.ok) { | |
| alert('Paper saved to your library'); | |
| } | |
| } catch (error) { | |
| console.error('Save error:', error); | |
| } | |
| } | |
| // Submit feedback about search result | |
| async function submitFeedback(paperId, feedbackType) { | |
| try { | |
| const response = await fetch(`${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.FEEDBACK}`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${localStorage.getItem('seer_token')}` | |
| }, | |
| body: JSON.stringify({ | |
| paperId, | |
| feedbackType, | |
| query: document.getElementById('search-input').value.trim() | |
| }) | |
| }); | |
| if (response.ok) { | |
| alert('Thanks for your feedback! Results will improve over time.'); | |
| } | |
| } catch (error) { | |
| console.error('Feedback error:', error); | |
| } | |
| } | |
| // Request search refinement based on specific paper | |
| async function refineSearch(paperId) { | |
| try { | |
| document.getElementById('loading-indicator').classList.remove('hidden'); | |
| const response = await fetch(`${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.REFINE}`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${localStorage.getItem('seer_token')}` | |
| }, | |
| body: JSON.stringify({ | |
| paperId, | |
| originalQuery: document.getElementById('search-input').value.trim() | |
| }) | |
| }); | |
| if (!response.ok) throw new Error('Refinement failed'); | |
| const refinedResults = await response.json(); | |
| displayResults(refinedResults); | |
| document.getElementById('loading-indicator').classList.add('hidden'); | |
| } catch (error) { | |
| console.error('Refinement error:', error); | |
| document.getElementById('loading-indicator').classList.add('hidden'); | |
| alert('Refinement failed. Please try again.'); | |
| } | |
| } | |
| // Highlight search terms in results | |
| function highlightSearchTerms() { | |
| const searchInput = document.getElementById('search-input').value.toLowerCase(); | |
| if (!searchInput) return; | |
| const terms = searchInput.split(' '); | |
| const highlights = document.querySelectorAll('.search-highlight'); | |
| highlights.forEach(span => { | |
| let newHTML = span.textContent; | |
| terms.forEach(term => { | |
| if (term.length > 3) { // Only highlight longer terms | |
| const regex = new RegExp(term, 'gi'); | |
| newHTML = newHTML.replace(regex, match => | |
| `<span class="search-highlight">${match}</span>` | |
| ); | |
| } | |
| }); | |
| span.innerHTML = newHTML; | |
| }); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // You could add more interactive elements here | |
| }); | |
| </script> | |
| <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=snigenigmatic/hi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |