rag-knowledge-lab / index.html
LukasBe's picture
Add 3 files
e89eef9 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Knowledge Lab Blend | RAG × Lab Notebook × Version Control</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>
.diff-added {
background-color: rgba(134, 239, 172, 0.3);
border-left: 3px solid rgba(74, 222, 128, 1);
}
.diff-removed {
background-color: rgba(252, 165, 165, 0.3);
border-left: 3px solid rgba(239, 68, 68, 1);
text-decoration: line-through;
}
.diff-changed {
background-color: rgba(253, 230, 138, 0.3);
border-left: 3px solid rgba(234, 179, 8, 1);
}
.timeline-item:not(:last-child)::after {
content: '';
position: absolute;
left: 24px;
top: 32px;
height: calc(100% - 32px);
width: 2px;
background-color: #e5e7eb;
}
.markdown-content h1 {
font-size: 1.5rem;
font-weight: 600;
margin: 1rem 0;
}
.markdown-content h2 {
font-size: 1.25rem;
font-weight: 600;
margin: 0.75rem 0;
}
.markdown-content p {
margin: 0.5rem 0;
}
.markdown-content ul, .markdown-content ol {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
.markdown-content pre {
background-color: #f3f4f6;
padding: 0.75rem;
border-radius: 0.375rem;
overflow-x: auto;
margin: 0.75rem 0;
}
.markdown-content code {
background-color: #f3f4f6;
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: monospace;
}
.sidebar {
scrollbar-width: thin;
scrollbar-color: #9ca3af #f3f4f6;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: #f3f4f6;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: #9ca3af;
border-radius: 3px;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 border-r border-gray-200 bg-white">
<div class="h-16 flex items-center px-4 border-b border-gray-200">
<div class="flex items-center">
<i class="fas fa-flask text-indigo-600 text-xl mr-2"></i>
<span class="text-xl font-semibold">Knowledge Lab</span>
</div>
</div>
<div class="flex flex-col flex-grow overflow-y-auto sidebar">
<div class="px-4 py-4">
<button id="newNotebookBtn" class="w-full flex items-center justify-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors">
<i class="fas fa-plus mr-2"></i> New Notebook
</button>
</div>
<div class="px-4">
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Recent Notebooks</div>
<ul class="space-y-1">
<li>
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium text-gray-900 rounded-md bg-gray-100">
<i class="fas fa-book mr-3 text-gray-500"></i>
Quantum Computing Basics
</a>
</li>
<li>
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i class="fas fa-book mr-3 text-gray-400"></i>
Climate Change Models
</a>
</li>
<li>
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i class="fas fa-book mr-3 text-gray-400"></i>
Neural Network Architectures
</a>
</li>
<li>
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i class="fas fa-book mr-3 text-gray-400"></i>
CRISPR Technology Review
</a>
</li>
</ul>
</div>
<div class="px-4 mt-4">
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Shared With Me</div>
<ul class="space-y-1">
<li>
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i class="fas fa-users mr-3 text-gray-400"></i>
Team Project - BioTech
</a>
</li>
<li>
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i class="fas fa-users mr-3 text-gray-400"></i>
Research Collab - AI Ethics
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Top Navigation -->
<div class="h-16 flex items-center justify-between border-b border-gray-200 bg-white px-4">
<div class="flex items-center">
<button class="md:hidden mr-2 text-gray-500">
<i class="fas fa-bars"></i>
</button>
<div class="text-lg font-medium">Quantum Computing Basics</div>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button id="versionDropdownBtn" class="flex items-center text-gray-600 hover:text-gray-900">
<span class="mr-1">Version 1.2</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div id="versionDropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg z-10 border border-gray-200">
<div class="py-1">
<div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-100">Current Branch</div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">main</a>
<div class="px-4 py-2 text-xs text-gray-500 border-t border-b border-gray-100">Branches</div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">experiment/new-models</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">fix/error-calculation</a>
<div class="px-4 py-2 text-xs text-gray-500 border-t border-b border-gray-100">Actions</div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">New Branch</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Merge Changes</a>
</div>
</div>
</div>
<button class="flex items-center text-gray-600 hover:text-gray-900">
<i class="fas fa-share-alt mr-1"></i>
<span>Share</span>
</button>
<div class="flex items-center">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
</div>
</div>
<!-- Notebook Content -->
<div class="flex flex-1 overflow-hidden">
<!-- Left Panel - Notebook Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<div class="flex-1 overflow-y-auto p-6">
<!-- Experiment Setup -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold">Experiment Setup</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Hypothesis</label>
<div class="bg-gray-50 p-3 rounded border border-gray-200">
Quantum computers can solve optimization problems faster than classical computers for certain problem classes, specifically in combinatorial optimization.
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Background</label>
<div class="bg-gray-50 p-3 rounded border border-gray-200">
Recent advances in quantum annealing and gate-model quantum computers show promise for optimization. Need to understand the specific problem classes where quantum advantage is provable.
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Answer Format</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md border bg-gray-50">
<option>Comparative Analysis</option>
<option>Technical Explanation</option>
<option>Literature Review</option>
<option>Mathematical Proof</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Output Fidelity</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md border bg-gray-50">
<option>Analytical</option>
<option>Comparative</option>
<option>Shallow</option>
<option>In-depth</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Sources</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md border bg-gray-50">
<option>Peer-reviewed Only</option>
<option>Preprints Included</option>
<option>Technical Reports</option>
<option>All Sources</option>
</select>
</div>
</div>
</div>
</div>
<!-- Results Section -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h2 class="text-lg font-semibold">Results</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700">
<i class="fas fa-sync-alt mr-1"></i> Rerun
</button>
<button class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-code-branch mr-1"></i> Fork
</button>
</div>
</div>
<div class="p-6">
<!-- Retrieval Steps -->
<div class="mb-8">
<h3 class="text-md font-medium mb-3 flex items-center">
<i class="fas fa-search mr-2 text-indigo-500"></i> Retrieval Steps
</h3>
<div class="bg-gray-50 p-4 rounded border border-gray-200">
<div class="flex items-start mb-3">
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-indigo-100 flex items-center justify-center mt-1">
<i class="fas fa-check text-indigo-600 text-xs"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium">Retrieved 12 papers from arXiv</p>
<p class="text-xs text-gray-500">Query: "quantum optimization speedup combinatorial"</p>
</div>
</div>
<div class="flex items-start mb-3">
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-indigo-100 flex items-center justify-center mt-1">
<i class="fas fa-check text-indigo-600 text-xs"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium">Filtered to 5 relevant papers</p>
<p class="text-xs text-gray-500">Criteria: published in last 5 years, citation count > 50</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-indigo-100 flex items-center justify-center mt-1">
<i class="fas fa-check text-indigo-600 text-xs"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium">Extracted key sections</p>
<p class="text-xs text-gray-500">Focus on methods and results sections</p>
</div>
</div>
</div>
</div>
<!-- Generated Answer -->
<div class="mb-8">
<h3 class="text-md font-medium mb-3 flex items-center">
<i class="fas fa-robot mr-2 text-indigo-500"></i> Generated Answer
</h3>
<div class="bg-gray-50 p-4 rounded border border-gray-200 markdown-content">
<h1>Quantum Speedup in Combinatorial Optimization</h1>
<p>Current evidence suggests quantum computers can provide polynomial to exponential speedups for certain combinatorial optimization problems, but with important caveats:</p>
<h2>Problem Classes with Proven Speedups</h2>
<ul>
<li><strong>Quadratic Unconstrained Binary Optimization (QUBO)</strong>: Quantum annealing shows 2-5x speedup on D-Wave for specific instances</li>
<li><strong>Graph Isomorphism</strong>: Theoretical speedup possible with Grover's algorithm (√N vs N)</li>
<li><strong>Traveling Salesman</strong>: Hybrid quantum-classical approaches show promise for medium-sized problems</li>
</ul>
<h2>Limitations</h2>
<p>The speedups are highly dependent on:</p>
<ol>
<li>Problem encoding efficiency</li>
<li>Noise levels in current quantum hardware</li>
<li>Comparison to highly optimized classical algorithms</li>
</ol>
<h2>Comparative Analysis</h2>
<pre>
Problem Classical Time Quantum Time Speedup
-------------------------------------------------------
Graph Partition O(2^n) O(√(2^n)) Exponential
MaxCut O(n^3) O(n^2) Polynomial
TSP O(n!) O(√(n!)) Exponential
</pre>
</div>
</div>
<!-- Sources -->
<div>
<h3 class="text-md font-medium mb-3 flex items-center">
<i class="fas fa-book-open mr-2 text-indigo-500"></i> Sources
</h3>
<div class="space-y-3">
<div class="flex items-start p-3 bg-gray-50 rounded border border-gray-200">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-file-alt text-gray-400"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium">"Quantum Algorithms for Combinatorial Optimization" - Nature (2021)</p>
<p class="text-xs text-gray-500">DOI: 10.1038/s41586-021-03222-x | Cited by 142</p>
</div>
</div>
<div class="flex items-start p-3 bg-gray-50 rounded border border-gray-200">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-file-alt text-gray-400"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium">"Practical Quantum Speedups for Optimization" - PRX Quantum (2022)</p>
<p class="text-xs text-gray-500">DOI: 10.1103/PRXQuantum.3.020304 | Cited by 87</p>
</div>
</div>
<div class="flex items-start p-3 bg-gray-50 rounded border border-gray-200">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-file-alt text-gray-400"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium">"Limits of Quantum Speedup in Optimization" - Quantum (2020)</p>
<p class="text-xs text-gray-500">DOI: 10.22331/q-2020-10-12-342 | Cited by 203</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Version History -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold">Version History</h2>
</div>
<div class="p-6">
<div class="space-y-6">
<!-- Version Item -->
<div class="relative pl-10 timeline-item">
<div class="absolute left-0 top-0 h-6 w-6 rounded-full bg-indigo-100 flex items-center justify-center">
<i class="fas fa-code-commit text-indigo-600 text-xs"></i>
</div>
<div class="bg-gray-50 p-4 rounded border border-gray-200">
<div class="flex justify-between items-start mb-2">
<div>
<span class="text-sm font-medium">Version 1.2</span>
<span class="ml-2 px-2 py-1 text-xs bg-indigo-100 text-indigo-800 rounded-full">Current</span>
</div>
<div class="text-xs text-gray-500">2 hours ago</div>
</div>
<div class="text-sm mb-2">Refined hypothesis and added comparative analysis table</div>
<div class="text-xs text-gray-500">Commit by Dr. Alice Chen</div>
</div>
</div>
<!-- Version Item -->
<div class="relative pl-10 timeline-item">
<div class="absolute left-0 top-0 h-6 w-6 rounded-full bg-gray-100 flex items-center justify-center">
<i class="fas fa-code-commit text-gray-600 text-xs"></i>
</div>
<div class="bg-gray-50 p-4 rounded border border-gray-200">
<div class="flex justify-between items-start mb-2">
<div>
<span class="text-sm font-medium">Version 1.1</span>
</div>
<div class="text-xs text-gray-500">1 day ago</div>
</div>
<div class="text-sm mb-2">Added limitations section based on peer feedback</div>
<div class="text-xs text-gray-500">Commit by Dr. Bob Johnson</div>
</div>
</div>
<!-- Version Item -->
<div class="relative pl-10 timeline-item">
<div class="absolute left-0 top-0 h-6 w-6 rounded-full bg-gray-100 flex items-center justify-center">
<i class="fas fa-code-commit text-gray-600 text-xs"></i>
</div>
<div class="bg-gray-50 p-4 rounded border border-gray-200">
<div class="flex justify-between items-start mb-2">
<div>
<span class="text-sm font-medium">Version 1.0</span>
</div>
<div class="text-xs text-gray-500">3 days ago</div>
</div>
<div class="text-sm mb-2">Initial experiment setup and first results</div>
<div class="text-xs text-gray-500">Commit by Dr. Alice Chen</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Panel - Diff Viewer -->
<div class="hidden lg:flex lg:w-96 flex-shrink-0 border-l border-gray-200 bg-white overflow-y-auto">
<div class="w-full p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Version Comparison</h2>
<div class="flex space-x-2">
<select class="text-sm border-gray-300 rounded-md bg-gray-50">
<option>v1.2 (Current)</option>
<option>v1.1</option>
<option>v1.0</option>
</select>
<select class="text-sm border-gray-300 rounded-md bg-gray-50">
<option>v1.1</option>
<option>v1.0</option>
</select>
</div>
</div>
<div class="space-y-4">
<div>
<div class="text-sm font-medium mb-2">Hypothesis Changes</div>
<div class="text-sm p-3 rounded diff-added">
<p>Quantum computers can solve optimization problems faster than classical computers for certain problem classes, specifically in combinatorial optimization.</p>
</div>
<div class="text-sm p-3 rounded diff-removed mt-1">
<p>Quantum computers are faster than classical computers for optimization problems.</p>
</div>
</div>
<div>
<div class="text-sm font-medium mb-2">Added Content</div>
<div class="text-sm p-3 rounded diff-added">
<h3>Comparative Analysis</h3>
<pre>
Problem Classical Time Quantum Time Speedup
-------------------------------------------------------
Graph Partition O(2^n) O(√(2^n)) Exponential
MaxCut O(n^3) O(n^2) Polynomial
TSP O(n!) O(√(n!)) Exponential
</pre>
</div>
</div>
<div>
<div class="text-sm font-medium mb-2">Modified Content</div>
<div class="text-sm p-3 rounded diff-changed">
<p>The speedups are highly dependent on:</p>
<ol>
<li>Problem encoding efficiency</li>
<li class="diff-added">Noise levels in current quantum hardware</li>
<li>Comparison to highly optimized classical algorithms</li>
</ol>
</div>
</div>
<div>
<div class="text-sm font-medium mb-2">Peer Feedback</div>
<div class="bg-blue-50 p-3 rounded border border-blue-200">
<div class="flex items-start">
<img class="h-6 w-6 rounded-full mr-2" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div>
<p class="text-sm font-medium">Dr. Sarah Williams</p>
<p class="text-xs text-gray-600">"Consider adding more quantitative comparisons between quantum and classical approaches."</p>
<div class="flex items-center mt-1 text-xs text-gray-500">
<i class="fas fa-thumbs-up text-blue-500 mr-1"></i> 3
<i class="fas fa-thumbs-down text-gray-400 ml-2 mr-1"></i> 0
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Toggle version dropdown
document.getElementById('versionDropdownBtn').addEventListener('click', function() {
const dropdown = document.getElementById('versionDropdown');
dropdown.classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
const dropdownBtn = document.getElementById('versionDropdownBtn');
const dropdown = document.getElementById('versionDropdown');
if (!dropdownBtn.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.classList.add('hidden');
}
});
// New notebook button
document.getElementById('newNotebookBtn').addEventListener('click', function() {
alert('Opening new notebook session...');
// In a real app, this would open a modal or new page for experiment setup
});
// Simulate markdown rendering (in a real app, you'd use a proper markdown renderer)
document.querySelectorAll('.markdown-content').forEach(el => {
// This is just a placeholder - in reality you'd use a library like marked.js
// Here we're just demonstrating the styled output
});
</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=LukasBe/rag-knowledge-lab" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>