rag-answer-forge / index.html
LukasBe's picture
Add 3 files
ca88221 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Answer Forge - Craft Perfect Responses</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>
.answer-section {
transition: all 0.3s ease;
}
.answer-section:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.template-card {
transition: all 0.2s ease;
}
.template-card:hover {
transform: scale(1.02);
}
.progress-step {
position: relative;
}
.progress-step:not(:last-child):after {
content: '';
position: absolute;
top: 20px;
left: 20px;
height: 100%;
width: 2px;
background-color: #e5e7eb;
}
.markdown-preview h2 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.markdown-preview p {
margin-bottom: 1rem;
}
.markdown-preview ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="mb-10">
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-hammer text-indigo-600 text-3xl mr-3"></i>
<h1 class="text-3xl font-bold text-gray-800">Answer Forge</h1>
</div>
<div class="flex space-x-4">
<button class="px-4 py-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition">
<i class="fas fa-history mr-2"></i>History
</button>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
<i class="fas fa-user mr-2"></i>My Profile
</button>
</div>
</div>
<p class="text-gray-600 mt-2">Craft hand-tuned, explainable answers with AI assistance</p>
</header>
<!-- Main Content -->
<div class="flex flex-col lg:flex-row gap-8">
<!-- Left Panel - Answer Structure -->
<div class="lg:w-1/3">
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<h2 class="text-xl font-semibold mb-4 text-gray-800">1. Define Answer Shape</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">What's your question?</label>
<textarea
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
rows="2"
placeholder="Enter your question here..."></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Answer Structure</label>
<div class="grid grid-cols-2 gap-3">
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
<i class="fas fa-book-open text-indigo-500 mb-1"></i>
<p class="text-sm">Narrative</p>
</button>
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
<i class="fas fa-list-ol text-indigo-500 mb-1"></i>
<p class="text-sm">Step-by-Step</p>
</button>
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
<i class="fas fa-balance-scale text-indigo-500 mb-1"></i>
<p class="text-sm">Pros & Cons</p>
</button>
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
<i class="fas fa-table text-indigo-500 mb-1"></i>
<p class="text-sm">Table Format</p>
</button>
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
<i class="fas fa-image text-indigo-500 mb-1"></i>
<p class="text-sm">Visual</p>
</button>
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
<i class="fas fa-random text-indigo-500 mb-1"></i>
<p class="text-sm">Compare</p>
</button>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<h2 class="text-xl font-semibold mb-4 text-gray-800">2. Knowledge Tags</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">What do you already know?</label>
<div class="flex flex-wrap gap-2 mb-2" id="known-tags">
<!-- Tags will be added here -->
</div>
<div class="flex">
<input type="text" class="flex-grow px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Add known concept...">
<button class="px-3 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">What confuses you?</label>
<div class="flex flex-wrap gap-2 mb-2" id="confused-tags">
<!-- Tags will be added here -->
</div>
<div class="flex">
<input type="text" class="flex-grow px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Add confusing concept...">
<button class="px-3 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-xl font-semibold mb-4 text-gray-800">3. Source Materials</h2>
<div class="space-y-3">
<div class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
<i class="fas fa-file-alt text-gray-400 mr-3"></i>
<div>
<p class="text-sm font-medium">Chapter 3: Advanced Concepts</p>
<p class="text-xs text-gray-500">From "Machine Learning Basics"</p>
</div>
</div>
<div class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
<i class="fas fa-link text-gray-400 mr-3"></i>
<div>
<p class="text-sm font-medium">Wikipedia: Neural Networks</p>
<p class="text-xs text-gray-500">https://en.wikipedia.org</p>
</div>
</div>
<div class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
<i class="fas fa-video text-gray-400 mr-3"></i>
<div>
<p class="text-sm font-medium">Lecture 5: Backpropagation</p>
<p class="text-xs text-gray-500">MIT OpenCourseWare</p>
</div>
</div>
<button class="w-full mt-2 px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-indigo-400 hover:text-indigo-600">
<i class="fas fa-plus mr-2"></i>Add Reference
</button>
</div>
</div>
</div>
<!-- Right Panel - Answer Crafting -->
<div class="lg:w-2/3">
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-gray-800">Answer Crafting</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
<i class="fas fa-undo-alt"></i>
</button>
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
<i class="fas fa-redo-alt"></i>
</button>
<button class="px-3 py-1 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
<i class="fas fa-save mr-1"></i> Save Draft
</button>
</div>
</div>
<!-- Progress Steps -->
<div class="mb-8">
<div class="flex justify-between mb-4">
<div class="progress-step">
<div class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center">
1
</div>
<p class="text-xs text-center mt-1">Sketch</p>
</div>
<div class="progress-step">
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
2
</div>
<p class="text-xs text-center mt-1">Structure</p>
</div>
<div class="progress-step">
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
3
</div>
<p class="text-xs text-center mt-1">Refine</p>
</div>
<div class="progress-step">
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
4
</div>
<p class="text-xs text-center mt-1">Polish</p>
</div>
<div class="progress-step">
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
5
</div>
<p class="text-xs text-center mt-1">Review</p>
</div>
</div>
</div>
<!-- Answer Sections -->
<div class="space-y-6" id="answer-sections">
<div class="answer-section bg-indigo-50 border border-indigo-100 rounded-lg p-5">
<div class="flex justify-between items-start mb-3">
<h3 class="font-medium text-indigo-800">Introduction</h3>
<div class="flex space-x-2">
<button class="text-gray-500 hover:text-indigo-600">
<i class="fas fa-edit"></i>
</button>
<button class="text-gray-500 hover:text-indigo-600">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
<div class="markdown-preview">
<p>Neural networks are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information using a connectionist approach to computation.</p>
</div>
<div class="mt-3 flex justify-end space-x-2">
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-comment mr-1"></i> Add Note
</button>
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-lightbulb mr-1"></i> Improve
</button>
</div>
</div>
<div class="answer-section bg-white border border-gray-200 rounded-lg p-5">
<div class="flex justify-between items-start mb-3">
<h3 class="font-medium text-gray-800">Key Components</h3>
<div class="flex space-x-2">
<button class="text-gray-500 hover:text-indigo-600">
<i class="fas fa-edit"></i>
</button>
<button class="text-gray-500 hover:text-indigo-600">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
<div class="markdown-preview">
<ul>
<li><strong>Input Layer:</strong> Receives the initial data</li>
<li><strong>Hidden Layers:</strong> Where computation happens</li>
<li><strong>Output Layer:</strong> Produces the final result</li>
<li><strong>Weights:</strong> Parameters that determine signal strength</li>
<li><strong>Activation Function:</strong> Determines if a neuron should be activated</li>
</ul>
</div>
<div class="mt-3 flex justify-end space-x-2">
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-comment mr-1"></i> Add Note
</button>
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-lightbulb mr-1"></i> Improve
</button>
</div>
</div>
<div class="answer-section bg-white border border-gray-200 rounded-lg p-5">
<div class="flex justify-between items-start mb-3">
<h3 class="font-medium text-gray-800">Learning Process</h3>
<div class="flex space-x-2">
<button class="text-gray-500 hover:text-indigo-600">
<i class="fas fa-edit"></i>
</button>
<button class="text-gray-500 hover:text-indigo-600">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
<div class="markdown-preview">
<p>The network learns by:</p>
<ol>
<li>Processing input data (forward propagation)</li>
<li>Comparing output to expected result (loss calculation)</li>
<li>Adjusting weights to minimize error (backpropagation)</li>
<li>Repeating until satisfactory performance is achieved</li>
</ol>
</div>
<div class="mt-3 flex justify-end space-x-2">
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-comment mr-1"></i> Add Note
</button>
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-lightbulb mr-1"></i> Improve
</button>
</div>
</div>
<div class="answer-section bg-white border border-gray-200 rounded-lg p-5">
<div class="flex justify-between items-start mb-3">
<h3 class="font-medium text-gray-800">Common Architectures</h3>
<div class="flex space-x-2">
<button class="text-gray-500 hover:text-indigo-600">
<i class="fas fa-edit"></i>
</button>
<button class="text-gray-500 hover:text-indigo-600">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
<div class="markdown-preview">
<table class="w-full border-collapse">
<thead>
<tr class="bg-gray-100">
<th class="p-2 text-left border">Type</th>
<th class="p-2 text-left border">Use Case</th>
<th class="p-2 text-left border">Example</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="p-2 border">Feedforward</td>
<td class="p-2 border">Basic classification</td>
<td class="p-2 border">MNIST digit recognition</td>
</tr>
<tr class="border-b">
<td class="p-2 border">CNN</td>
<td class="p-2 border">Image processing</td>
<td class="p-2 border">ImageNet classification</td>
</tr>
<tr>
<td class="p-2 border">RNN</td>
<td class="p-2 border">Sequence data</td>
<td class="p-2 border">Language translation</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-3 flex justify-end space-x-2">
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-comment mr-1"></i> Add Note
</button>
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
<i class="fas fa-lightbulb mr-1"></i> Improve
</button>
</div>
</div>
</div>
<!-- Section Controls -->
<div class="mt-6 flex flex-wrap gap-3">
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
<i class="fas fa-plus mr-2"></i> Add Section
</button>
<button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
<i class="fas fa-magic mr-2"></i> Auto-Organize
</button>
<button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
<i class="fas fa-search mr-2"></i> Find Gaps
</button>
<button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
<i class="fas fa-chart-bar mr-2"></i> Visualize
</button>
</div>
</div>
<!-- Refinement Panel -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Refinement Tools</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
<i class="fas fa-comment-alt"></i>
</div>
<h3 class="font-medium">Clarify Section</h3>
</div>
<p class="text-sm text-gray-600">Make this section clearer or more detailed</p>
</div>
<div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
<i class="fas fa-exchange-alt"></i>
</div>
<h3 class="font-medium">Rephrase</h3>
</div>
<p class="text-sm text-gray-600">Get alternative wording for this section</p>
</div>
<div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
<i class="fas fa-exclamation-circle"></i>
</div>
<h3 class="font-medium">Add Example</h3>
</div>
<p class="text-sm text-gray-600">Insert concrete examples or analogies</p>
</div>
<div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
<i class="fas fa-project-diagram"></i>
</div>
<h3 class="font-medium">Connect Concepts</h3>
</div>
<p class="text-sm text-gray-600">Show relationships between ideas</p>
</div>
</div>
</div>
</div>
</div>
<!-- Final Actions -->
<div class="mt-10 bg-white rounded-xl shadow-sm p-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="font-medium text-gray-800">Ready to finalize your answer?</h3>
<p class="text-sm text-gray-600">Review, rate, and store your crafted response</p>
</div>
<div class="flex space-x-3">
<button class="px-6 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
Preview
</button>
<button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
<i class="fas fa-check-circle mr-2"></i> Finalize
</button>
</div>
</div>
</div>
</div>
<script>
// Simple tag management functionality
document.addEventListener('DOMContentLoaded', function() {
// Add known tag
document.querySelector('#known-tags').addEventListener('click', function(e) {
if (e.target.classList.contains('remove-tag')) {
e.target.parentElement.remove();
}
});
// Add confused tag
document.querySelector('#confused-tags').addEventListener('click', function(e) {
if (e.target.classList.contains('remove-tag')) {
e.target.parentElement.remove();
}
});
// Add tag buttons
document.querySelectorAll('[id$="-tags"] + div button').forEach(button => {
button.addEventListener('click', function() {
const input = this.previousElementSibling;
const value = input.value.trim();
if (value) {
const containerId = this.closest('div').previousElementSibling.id;
const tag = document.createElement('div');
tag.className = 'px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs flex items-center';
tag.innerHTML = `
${value}
<button class="remove-tag ml-1 text-indigo-600 hover:text-indigo-800">
<i class="fas fa-times"></i>
</button>
`;
document.getElementById(containerId).appendChild(tag);
input.value = '';
}
});
});
// Template selection
document.querySelectorAll('.template-card').forEach(card => {
card.addEventListener('click', function() {
document.querySelectorAll('.template-card').forEach(c => {
c.classList.remove('border-indigo-400', 'bg-indigo-50');
c.classList.add('border-gray-300');
});
this.classList.add('border-indigo-400', 'bg-indigo-50');
this.classList.remove('border-gray-300');
});
});
// Section hover effects
document.querySelectorAll('.answer-section').forEach(section => {
section.addEventListener('mouseenter', function() {
this.querySelectorAll('button').forEach(btn => {
btn.classList.remove('text-gray-500');
btn.classList.add('text-indigo-600');
});
});
section.addEventListener('mouseleave', function() {
this.querySelectorAll('button').forEach(btn => {
btn.classList.add('text-gray-500');
btn.classList.remove('text-indigo-600');
});
});
});
});
</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-answer-forge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>