Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +524 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: rag-answer-forge
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: gray
|
| 5 |
+
colorTo: pink
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,524 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Answer Forge - Craft Perfect Responses</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
.answer-section {
|
| 11 |
+
transition: all 0.3s ease;
|
| 12 |
+
}
|
| 13 |
+
.answer-section:hover {
|
| 14 |
+
transform: translateY(-2px);
|
| 15 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
| 16 |
+
}
|
| 17 |
+
.template-card {
|
| 18 |
+
transition: all 0.2s ease;
|
| 19 |
+
}
|
| 20 |
+
.template-card:hover {
|
| 21 |
+
transform: scale(1.02);
|
| 22 |
+
}
|
| 23 |
+
.progress-step {
|
| 24 |
+
position: relative;
|
| 25 |
+
}
|
| 26 |
+
.progress-step:not(:last-child):after {
|
| 27 |
+
content: '';
|
| 28 |
+
position: absolute;
|
| 29 |
+
top: 20px;
|
| 30 |
+
left: 20px;
|
| 31 |
+
height: 100%;
|
| 32 |
+
width: 2px;
|
| 33 |
+
background-color: #e5e7eb;
|
| 34 |
+
}
|
| 35 |
+
.markdown-preview h2 {
|
| 36 |
+
font-size: 1.5rem;
|
| 37 |
+
font-weight: 600;
|
| 38 |
+
margin-top: 1.5rem;
|
| 39 |
+
margin-bottom: 1rem;
|
| 40 |
+
}
|
| 41 |
+
.markdown-preview p {
|
| 42 |
+
margin-bottom: 1rem;
|
| 43 |
+
}
|
| 44 |
+
.markdown-preview ul {
|
| 45 |
+
list-style-type: disc;
|
| 46 |
+
padding-left: 1.5rem;
|
| 47 |
+
margin-bottom: 1rem;
|
| 48 |
+
}
|
| 49 |
+
</style>
|
| 50 |
+
</head>
|
| 51 |
+
<body class="bg-gray-50 min-h-screen">
|
| 52 |
+
<div class="container mx-auto px-4 py-8">
|
| 53 |
+
<!-- Header -->
|
| 54 |
+
<header class="mb-10">
|
| 55 |
+
<div class="flex justify-between items-center">
|
| 56 |
+
<div class="flex items-center">
|
| 57 |
+
<i class="fas fa-hammer text-indigo-600 text-3xl mr-3"></i>
|
| 58 |
+
<h1 class="text-3xl font-bold text-gray-800">Answer Forge</h1>
|
| 59 |
+
</div>
|
| 60 |
+
<div class="flex space-x-4">
|
| 61 |
+
<button class="px-4 py-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition">
|
| 62 |
+
<i class="fas fa-history mr-2"></i>History
|
| 63 |
+
</button>
|
| 64 |
+
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
|
| 65 |
+
<i class="fas fa-user mr-2"></i>My Profile
|
| 66 |
+
</button>
|
| 67 |
+
</div>
|
| 68 |
+
</div>
|
| 69 |
+
<p class="text-gray-600 mt-2">Craft hand-tuned, explainable answers with AI assistance</p>
|
| 70 |
+
</header>
|
| 71 |
+
|
| 72 |
+
<!-- Main Content -->
|
| 73 |
+
<div class="flex flex-col lg:flex-row gap-8">
|
| 74 |
+
<!-- Left Panel - Answer Structure -->
|
| 75 |
+
<div class="lg:w-1/3">
|
| 76 |
+
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
|
| 77 |
+
<h2 class="text-xl font-semibold mb-4 text-gray-800">1. Define Answer Shape</h2>
|
| 78 |
+
<div class="space-y-4">
|
| 79 |
+
<div>
|
| 80 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">What's your question?</label>
|
| 81 |
+
<textarea
|
| 82 |
+
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
|
| 83 |
+
rows="2"
|
| 84 |
+
placeholder="Enter your question here..."></textarea>
|
| 85 |
+
</div>
|
| 86 |
+
|
| 87 |
+
<div>
|
| 88 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Answer Structure</label>
|
| 89 |
+
<div class="grid grid-cols-2 gap-3">
|
| 90 |
+
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
|
| 91 |
+
<i class="fas fa-book-open text-indigo-500 mb-1"></i>
|
| 92 |
+
<p class="text-sm">Narrative</p>
|
| 93 |
+
</button>
|
| 94 |
+
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
|
| 95 |
+
<i class="fas fa-list-ol text-indigo-500 mb-1"></i>
|
| 96 |
+
<p class="text-sm">Step-by-Step</p>
|
| 97 |
+
</button>
|
| 98 |
+
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
|
| 99 |
+
<i class="fas fa-balance-scale text-indigo-500 mb-1"></i>
|
| 100 |
+
<p class="text-sm">Pros & Cons</p>
|
| 101 |
+
</button>
|
| 102 |
+
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
|
| 103 |
+
<i class="fas fa-table text-indigo-500 mb-1"></i>
|
| 104 |
+
<p class="text-sm">Table Format</p>
|
| 105 |
+
</button>
|
| 106 |
+
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
|
| 107 |
+
<i class="fas fa-image text-indigo-500 mb-1"></i>
|
| 108 |
+
<p class="text-sm">Visual</p>
|
| 109 |
+
</button>
|
| 110 |
+
<button class="template-card px-3 py-2 border rounded-lg hover:border-indigo-400 hover:bg-indigo-50 text-center">
|
| 111 |
+
<i class="fas fa-random text-indigo-500 mb-1"></i>
|
| 112 |
+
<p class="text-sm">Compare</p>
|
| 113 |
+
</button>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
</div>
|
| 118 |
+
|
| 119 |
+
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
|
| 120 |
+
<h2 class="text-xl font-semibold mb-4 text-gray-800">2. Knowledge Tags</h2>
|
| 121 |
+
<div class="space-y-4">
|
| 122 |
+
<div>
|
| 123 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">What do you already know?</label>
|
| 124 |
+
<div class="flex flex-wrap gap-2 mb-2" id="known-tags">
|
| 125 |
+
<!-- Tags will be added here -->
|
| 126 |
+
</div>
|
| 127 |
+
<div class="flex">
|
| 128 |
+
<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...">
|
| 129 |
+
<button class="px-3 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700">
|
| 130 |
+
<i class="fas fa-plus"></i>
|
| 131 |
+
</button>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
|
| 135 |
+
<div>
|
| 136 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">What confuses you?</label>
|
| 137 |
+
<div class="flex flex-wrap gap-2 mb-2" id="confused-tags">
|
| 138 |
+
<!-- Tags will be added here -->
|
| 139 |
+
</div>
|
| 140 |
+
<div class="flex">
|
| 141 |
+
<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...">
|
| 142 |
+
<button class="px-3 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700">
|
| 143 |
+
<i class="fas fa-plus"></i>
|
| 144 |
+
</button>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
|
| 150 |
+
<div class="bg-white rounded-xl shadow-sm p-6">
|
| 151 |
+
<h2 class="text-xl font-semibold mb-4 text-gray-800">3. Source Materials</h2>
|
| 152 |
+
<div class="space-y-3">
|
| 153 |
+
<div class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
|
| 154 |
+
<i class="fas fa-file-alt text-gray-400 mr-3"></i>
|
| 155 |
+
<div>
|
| 156 |
+
<p class="text-sm font-medium">Chapter 3: Advanced Concepts</p>
|
| 157 |
+
<p class="text-xs text-gray-500">From "Machine Learning Basics"</p>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
<div class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
|
| 161 |
+
<i class="fas fa-link text-gray-400 mr-3"></i>
|
| 162 |
+
<div>
|
| 163 |
+
<p class="text-sm font-medium">Wikipedia: Neural Networks</p>
|
| 164 |
+
<p class="text-xs text-gray-500">https://en.wikipedia.org</p>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
<div class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
|
| 168 |
+
<i class="fas fa-video text-gray-400 mr-3"></i>
|
| 169 |
+
<div>
|
| 170 |
+
<p class="text-sm font-medium">Lecture 5: Backpropagation</p>
|
| 171 |
+
<p class="text-xs text-gray-500">MIT OpenCourseWare</p>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
<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">
|
| 175 |
+
<i class="fas fa-plus mr-2"></i>Add Reference
|
| 176 |
+
</button>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
</div>
|
| 180 |
+
|
| 181 |
+
<!-- Right Panel - Answer Crafting -->
|
| 182 |
+
<div class="lg:w-2/3">
|
| 183 |
+
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
|
| 184 |
+
<div class="flex items-center justify-between mb-6">
|
| 185 |
+
<h2 class="text-xl font-semibold text-gray-800">Answer Crafting</h2>
|
| 186 |
+
<div class="flex space-x-2">
|
| 187 |
+
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
|
| 188 |
+
<i class="fas fa-undo-alt"></i>
|
| 189 |
+
</button>
|
| 190 |
+
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
|
| 191 |
+
<i class="fas fa-redo-alt"></i>
|
| 192 |
+
</button>
|
| 193 |
+
<button class="px-3 py-1 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
|
| 194 |
+
<i class="fas fa-save mr-1"></i> Save Draft
|
| 195 |
+
</button>
|
| 196 |
+
</div>
|
| 197 |
+
</div>
|
| 198 |
+
|
| 199 |
+
<!-- Progress Steps -->
|
| 200 |
+
<div class="mb-8">
|
| 201 |
+
<div class="flex justify-between mb-4">
|
| 202 |
+
<div class="progress-step">
|
| 203 |
+
<div class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center">
|
| 204 |
+
1
|
| 205 |
+
</div>
|
| 206 |
+
<p class="text-xs text-center mt-1">Sketch</p>
|
| 207 |
+
</div>
|
| 208 |
+
<div class="progress-step">
|
| 209 |
+
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
|
| 210 |
+
2
|
| 211 |
+
</div>
|
| 212 |
+
<p class="text-xs text-center mt-1">Structure</p>
|
| 213 |
+
</div>
|
| 214 |
+
<div class="progress-step">
|
| 215 |
+
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
|
| 216 |
+
3
|
| 217 |
+
</div>
|
| 218 |
+
<p class="text-xs text-center mt-1">Refine</p>
|
| 219 |
+
</div>
|
| 220 |
+
<div class="progress-step">
|
| 221 |
+
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
|
| 222 |
+
4
|
| 223 |
+
</div>
|
| 224 |
+
<p class="text-xs text-center mt-1">Polish</p>
|
| 225 |
+
</div>
|
| 226 |
+
<div class="progress-step">
|
| 227 |
+
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
|
| 228 |
+
5
|
| 229 |
+
</div>
|
| 230 |
+
<p class="text-xs text-center mt-1">Review</p>
|
| 231 |
+
</div>
|
| 232 |
+
</div>
|
| 233 |
+
</div>
|
| 234 |
+
|
| 235 |
+
<!-- Answer Sections -->
|
| 236 |
+
<div class="space-y-6" id="answer-sections">
|
| 237 |
+
<div class="answer-section bg-indigo-50 border border-indigo-100 rounded-lg p-5">
|
| 238 |
+
<div class="flex justify-between items-start mb-3">
|
| 239 |
+
<h3 class="font-medium text-indigo-800">Introduction</h3>
|
| 240 |
+
<div class="flex space-x-2">
|
| 241 |
+
<button class="text-gray-500 hover:text-indigo-600">
|
| 242 |
+
<i class="fas fa-edit"></i>
|
| 243 |
+
</button>
|
| 244 |
+
<button class="text-gray-500 hover:text-indigo-600">
|
| 245 |
+
<i class="fas fa-trash-alt"></i>
|
| 246 |
+
</button>
|
| 247 |
+
</div>
|
| 248 |
+
</div>
|
| 249 |
+
<div class="markdown-preview">
|
| 250 |
+
<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>
|
| 251 |
+
</div>
|
| 252 |
+
<div class="mt-3 flex justify-end space-x-2">
|
| 253 |
+
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
| 254 |
+
<i class="fas fa-comment mr-1"></i> Add Note
|
| 255 |
+
</button>
|
| 256 |
+
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
| 257 |
+
<i class="fas fa-lightbulb mr-1"></i> Improve
|
| 258 |
+
</button>
|
| 259 |
+
</div>
|
| 260 |
+
</div>
|
| 261 |
+
|
| 262 |
+
<div class="answer-section bg-white border border-gray-200 rounded-lg p-5">
|
| 263 |
+
<div class="flex justify-between items-start mb-3">
|
| 264 |
+
<h3 class="font-medium text-gray-800">Key Components</h3>
|
| 265 |
+
<div class="flex space-x-2">
|
| 266 |
+
<button class="text-gray-500 hover:text-indigo-600">
|
| 267 |
+
<i class="fas fa-edit"></i>
|
| 268 |
+
</button>
|
| 269 |
+
<button class="text-gray-500 hover:text-indigo-600">
|
| 270 |
+
<i class="fas fa-trash-alt"></i>
|
| 271 |
+
</button>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
<div class="markdown-preview">
|
| 275 |
+
<ul>
|
| 276 |
+
<li><strong>Input Layer:</strong> Receives the initial data</li>
|
| 277 |
+
<li><strong>Hidden Layers:</strong> Where computation happens</li>
|
| 278 |
+
<li><strong>Output Layer:</strong> Produces the final result</li>
|
| 279 |
+
<li><strong>Weights:</strong> Parameters that determine signal strength</li>
|
| 280 |
+
<li><strong>Activation Function:</strong> Determines if a neuron should be activated</li>
|
| 281 |
+
</ul>
|
| 282 |
+
</div>
|
| 283 |
+
<div class="mt-3 flex justify-end space-x-2">
|
| 284 |
+
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
| 285 |
+
<i class="fas fa-comment mr-1"></i> Add Note
|
| 286 |
+
</button>
|
| 287 |
+
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
| 288 |
+
<i class="fas fa-lightbulb mr-1"></i> Improve
|
| 289 |
+
</button>
|
| 290 |
+
</div>
|
| 291 |
+
</div>
|
| 292 |
+
|
| 293 |
+
<div class="answer-section bg-white border border-gray-200 rounded-lg p-5">
|
| 294 |
+
<div class="flex justify-between items-start mb-3">
|
| 295 |
+
<h3 class="font-medium text-gray-800">Learning Process</h3>
|
| 296 |
+
<div class="flex space-x-2">
|
| 297 |
+
<button class="text-gray-500 hover:text-indigo-600">
|
| 298 |
+
<i class="fas fa-edit"></i>
|
| 299 |
+
</button>
|
| 300 |
+
<button class="text-gray-500 hover:text-indigo-600">
|
| 301 |
+
<i class="fas fa-trash-alt"></i>
|
| 302 |
+
</button>
|
| 303 |
+
</div>
|
| 304 |
+
</div>
|
| 305 |
+
<div class="markdown-preview">
|
| 306 |
+
<p>The network learns by:</p>
|
| 307 |
+
<ol>
|
| 308 |
+
<li>Processing input data (forward propagation)</li>
|
| 309 |
+
<li>Comparing output to expected result (loss calculation)</li>
|
| 310 |
+
<li>Adjusting weights to minimize error (backpropagation)</li>
|
| 311 |
+
<li>Repeating until satisfactory performance is achieved</li>
|
| 312 |
+
</ol>
|
| 313 |
+
</div>
|
| 314 |
+
<div class="mt-3 flex justify-end space-x-2">
|
| 315 |
+
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
| 316 |
+
<i class="fas fa-comment mr-1"></i> Add Note
|
| 317 |
+
</button>
|
| 318 |
+
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
| 319 |
+
<i class="fas fa-lightbulb mr-1"></i> Improve
|
| 320 |
+
</button>
|
| 321 |
+
</div>
|
| 322 |
+
</div>
|
| 323 |
+
|
| 324 |
+
<div class="answer-section bg-white border border-gray-200 rounded-lg p-5">
|
| 325 |
+
<div class="flex justify-between items-start mb-3">
|
| 326 |
+
<h3 class="font-medium text-gray-800">Common Architectures</h3>
|
| 327 |
+
<div class="flex space-x-2">
|
| 328 |
+
<button class="text-gray-500 hover:text-indigo-600">
|
| 329 |
+
<i class="fas fa-edit"></i>
|
| 330 |
+
</button>
|
| 331 |
+
<button class="text-gray-500 hover:text-indigo-600">
|
| 332 |
+
<i class="fas fa-trash-alt"></i>
|
| 333 |
+
</button>
|
| 334 |
+
</div>
|
| 335 |
+
</div>
|
| 336 |
+
<div class="markdown-preview">
|
| 337 |
+
<table class="w-full border-collapse">
|
| 338 |
+
<thead>
|
| 339 |
+
<tr class="bg-gray-100">
|
| 340 |
+
<th class="p-2 text-left border">Type</th>
|
| 341 |
+
<th class="p-2 text-left border">Use Case</th>
|
| 342 |
+
<th class="p-2 text-left border">Example</th>
|
| 343 |
+
</tr>
|
| 344 |
+
</thead>
|
| 345 |
+
<tbody>
|
| 346 |
+
<tr class="border-b">
|
| 347 |
+
<td class="p-2 border">Feedforward</td>
|
| 348 |
+
<td class="p-2 border">Basic classification</td>
|
| 349 |
+
<td class="p-2 border">MNIST digit recognition</td>
|
| 350 |
+
</tr>
|
| 351 |
+
<tr class="border-b">
|
| 352 |
+
<td class="p-2 border">CNN</td>
|
| 353 |
+
<td class="p-2 border">Image processing</td>
|
| 354 |
+
<td class="p-2 border">ImageNet classification</td>
|
| 355 |
+
</tr>
|
| 356 |
+
<tr>
|
| 357 |
+
<td class="p-2 border">RNN</td>
|
| 358 |
+
<td class="p-2 border">Sequence data</td>
|
| 359 |
+
<td class="p-2 border">Language translation</td>
|
| 360 |
+
</tr>
|
| 361 |
+
</tbody>
|
| 362 |
+
</table>
|
| 363 |
+
</div>
|
| 364 |
+
<div class="mt-3 flex justify-end space-x-2">
|
| 365 |
+
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
| 366 |
+
<i class="fas fa-comment mr-1"></i> Add Note
|
| 367 |
+
</button>
|
| 368 |
+
<button class="text-xs px-2 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">
|
| 369 |
+
<i class="fas fa-lightbulb mr-1"></i> Improve
|
| 370 |
+
</button>
|
| 371 |
+
</div>
|
| 372 |
+
</div>
|
| 373 |
+
</div>
|
| 374 |
+
|
| 375 |
+
<!-- Section Controls -->
|
| 376 |
+
<div class="mt-6 flex flex-wrap gap-3">
|
| 377 |
+
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
|
| 378 |
+
<i class="fas fa-plus mr-2"></i> Add Section
|
| 379 |
+
</button>
|
| 380 |
+
<button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
|
| 381 |
+
<i class="fas fa-magic mr-2"></i> Auto-Organize
|
| 382 |
+
</button>
|
| 383 |
+
<button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
|
| 384 |
+
<i class="fas fa-search mr-2"></i> Find Gaps
|
| 385 |
+
</button>
|
| 386 |
+
<button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
|
| 387 |
+
<i class="fas fa-chart-bar mr-2"></i> Visualize
|
| 388 |
+
</button>
|
| 389 |
+
</div>
|
| 390 |
+
</div>
|
| 391 |
+
|
| 392 |
+
<!-- Refinement Panel -->
|
| 393 |
+
<div class="bg-white rounded-xl shadow-sm p-6">
|
| 394 |
+
<h2 class="text-xl font-semibold mb-4 text-gray-800">Refinement Tools</h2>
|
| 395 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
| 396 |
+
<div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer">
|
| 397 |
+
<div class="flex items-center mb-2">
|
| 398 |
+
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
|
| 399 |
+
<i class="fas fa-comment-alt"></i>
|
| 400 |
+
</div>
|
| 401 |
+
<h3 class="font-medium">Clarify Section</h3>
|
| 402 |
+
</div>
|
| 403 |
+
<p class="text-sm text-gray-600">Make this section clearer or more detailed</p>
|
| 404 |
+
</div>
|
| 405 |
+
<div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer">
|
| 406 |
+
<div class="flex items-center mb-2">
|
| 407 |
+
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
|
| 408 |
+
<i class="fas fa-exchange-alt"></i>
|
| 409 |
+
</div>
|
| 410 |
+
<h3 class="font-medium">Rephrase</h3>
|
| 411 |
+
</div>
|
| 412 |
+
<p class="text-sm text-gray-600">Get alternative wording for this section</p>
|
| 413 |
+
</div>
|
| 414 |
+
<div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer">
|
| 415 |
+
<div class="flex items-center mb-2">
|
| 416 |
+
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
|
| 417 |
+
<i class="fas fa-exclamation-circle"></i>
|
| 418 |
+
</div>
|
| 419 |
+
<h3 class="font-medium">Add Example</h3>
|
| 420 |
+
</div>
|
| 421 |
+
<p class="text-sm text-gray-600">Insert concrete examples or analogies</p>
|
| 422 |
+
</div>
|
| 423 |
+
<div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer">
|
| 424 |
+
<div class="flex items-center mb-2">
|
| 425 |
+
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
|
| 426 |
+
<i class="fas fa-project-diagram"></i>
|
| 427 |
+
</div>
|
| 428 |
+
<h3 class="font-medium">Connect Concepts</h3>
|
| 429 |
+
</div>
|
| 430 |
+
<p class="text-sm text-gray-600">Show relationships between ideas</p>
|
| 431 |
+
</div>
|
| 432 |
+
</div>
|
| 433 |
+
</div>
|
| 434 |
+
</div>
|
| 435 |
+
</div>
|
| 436 |
+
|
| 437 |
+
<!-- Final Actions -->
|
| 438 |
+
<div class="mt-10 bg-white rounded-xl shadow-sm p-6">
|
| 439 |
+
<div class="flex flex-col md:flex-row justify-between items-center">
|
| 440 |
+
<div class="mb-4 md:mb-0">
|
| 441 |
+
<h3 class="font-medium text-gray-800">Ready to finalize your answer?</h3>
|
| 442 |
+
<p class="text-sm text-gray-600">Review, rate, and store your crafted response</p>
|
| 443 |
+
</div>
|
| 444 |
+
<div class="flex space-x-3">
|
| 445 |
+
<button class="px-6 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
|
| 446 |
+
Preview
|
| 447 |
+
</button>
|
| 448 |
+
<button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
|
| 449 |
+
<i class="fas fa-check-circle mr-2"></i> Finalize
|
| 450 |
+
</button>
|
| 451 |
+
</div>
|
| 452 |
+
</div>
|
| 453 |
+
</div>
|
| 454 |
+
</div>
|
| 455 |
+
|
| 456 |
+
<script>
|
| 457 |
+
// Simple tag management functionality
|
| 458 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 459 |
+
// Add known tag
|
| 460 |
+
document.querySelector('#known-tags').addEventListener('click', function(e) {
|
| 461 |
+
if (e.target.classList.contains('remove-tag')) {
|
| 462 |
+
e.target.parentElement.remove();
|
| 463 |
+
}
|
| 464 |
+
});
|
| 465 |
+
|
| 466 |
+
// Add confused tag
|
| 467 |
+
document.querySelector('#confused-tags').addEventListener('click', function(e) {
|
| 468 |
+
if (e.target.classList.contains('remove-tag')) {
|
| 469 |
+
e.target.parentElement.remove();
|
| 470 |
+
}
|
| 471 |
+
});
|
| 472 |
+
|
| 473 |
+
// Add tag buttons
|
| 474 |
+
document.querySelectorAll('[id$="-tags"] + div button').forEach(button => {
|
| 475 |
+
button.addEventListener('click', function() {
|
| 476 |
+
const input = this.previousElementSibling;
|
| 477 |
+
const value = input.value.trim();
|
| 478 |
+
if (value) {
|
| 479 |
+
const containerId = this.closest('div').previousElementSibling.id;
|
| 480 |
+
const tag = document.createElement('div');
|
| 481 |
+
tag.className = 'px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs flex items-center';
|
| 482 |
+
tag.innerHTML = `
|
| 483 |
+
${value}
|
| 484 |
+
<button class="remove-tag ml-1 text-indigo-600 hover:text-indigo-800">
|
| 485 |
+
<i class="fas fa-times"></i>
|
| 486 |
+
</button>
|
| 487 |
+
`;
|
| 488 |
+
document.getElementById(containerId).appendChild(tag);
|
| 489 |
+
input.value = '';
|
| 490 |
+
}
|
| 491 |
+
});
|
| 492 |
+
});
|
| 493 |
+
|
| 494 |
+
// Template selection
|
| 495 |
+
document.querySelectorAll('.template-card').forEach(card => {
|
| 496 |
+
card.addEventListener('click', function() {
|
| 497 |
+
document.querySelectorAll('.template-card').forEach(c => {
|
| 498 |
+
c.classList.remove('border-indigo-400', 'bg-indigo-50');
|
| 499 |
+
c.classList.add('border-gray-300');
|
| 500 |
+
});
|
| 501 |
+
this.classList.add('border-indigo-400', 'bg-indigo-50');
|
| 502 |
+
this.classList.remove('border-gray-300');
|
| 503 |
+
});
|
| 504 |
+
});
|
| 505 |
+
|
| 506 |
+
// Section hover effects
|
| 507 |
+
document.querySelectorAll('.answer-section').forEach(section => {
|
| 508 |
+
section.addEventListener('mouseenter', function() {
|
| 509 |
+
this.querySelectorAll('button').forEach(btn => {
|
| 510 |
+
btn.classList.remove('text-gray-500');
|
| 511 |
+
btn.classList.add('text-indigo-600');
|
| 512 |
+
});
|
| 513 |
+
});
|
| 514 |
+
section.addEventListener('mouseleave', function() {
|
| 515 |
+
this.querySelectorAll('button').forEach(btn => {
|
| 516 |
+
btn.classList.add('text-gray-500');
|
| 517 |
+
btn.classList.remove('text-indigo-600');
|
| 518 |
+
});
|
| 519 |
+
});
|
| 520 |
+
});
|
| 521 |
+
});
|
| 522 |
+
</script>
|
| 523 |
+
<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>
|
| 524 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
The User-Centered Answer Forge Blend: RAG × artisan craft × UX wireframing tools Key ideas: User begins by sketching the desired shape of the answer: Narrative? Step-by-step? Pros & cons? Table? Visual explanation? System provides “answer templates” or “answer blueprints” to help. User optionally tags what they already know, or what confuses them. Light ingestion happens (TOC, structural markers, references), but deep reading is deferred. System starts by sketching — rough structure, argument flow. Each section is polished in passes, with user refinement: “This part is too vague.” “Here, give an example.” “Contrast this with another chapter.” Final answers are rated, reviewed, and stored, per-user and globally. 🛠️ It’s like building a handcrafted, explainable, personalized essay — and teaching the system as you do.
|