c/ietf-draft-analyzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make /ask free by default, Claude synthesis is opt-in

Browse Source 
Search results (FTS5 + Ollama embeddings) are shown immediately at no
cost. AI synthesis via Claude is behind a "Synthesize" button that the
user must explicitly click. Results are cached permanently so repeat
visitors never trigger API calls.

- Split ask into search_only() (free) and ask() (paid, cached)
- GET /ask now uses search_only — no Claude tokens spent
- POST /api/ask/synthesize triggers Claude (Haiku, ~$0.001)
- Cached answers shown with "cached" badge, no re-generation
- Template shows sources immediately + optional synthesize button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Nennemann
2026-03-07 21:15:07 +01:00
parent e65d1cfacd
commit 34c36f81f1
4 changed files with 161 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/webui/templates/ask.html
View File

@@ -13,24 +13,17 @@
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(30, 41, 59, 0.4));
backdrop-filter: blur(10px);
}
.source-row {
transition: all 0.15s ease;
}
.source-row:hover {
background: rgba(59, 130, 246, 0.05);
}
.source-row { transition: all 0.15s ease; }
.source-row:hover { background: rgba(59, 130, 246, 0.05); }
.loading-spinner {
border: 3px solid rgba(59, 130, 246, 0.2);
border-top-color: #3b82f6;
border-radius: 50%;
width: 24px;
height: 24px;
width: 20px; height: 20px;
animation: spin 0.8s linear infinite;
display: inline-block;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>
{% endblock %}
@@ -38,7 +31,7 @@
<!-- Header -->
<div class="mb-8 text-center">
<h1 class="text-3xl font-bold text-white">Ask the Draft Corpus</h1>
<p class="text-slate-400 text-sm mt-2">Ask natural language questions about IETF AI/agent drafts. Answers are synthesized from the most relevant documents.</p>
<p class="text-slate-400 text-sm mt-2">Search across {{ "{:,}".format(stats.total if stats is defined and stats else 434) }} drafts using keyword + semantic similarity. AI synthesis is optional.</p>
</div>
<!-- Search Bar -->
@@ -52,7 +45,7 @@
class="flex-1 bg-transparent border-0 px-3 py-3 text-base text-slate-200 placeholder-slate-500 focus:outline-none"
autofocus>
<button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-500 transition-colors flex-shrink-0">
Ask
Search
</button>
</div>
<div class="flex items-center gap-4 mt-3 px-2">
@@ -64,7 +57,7 @@
<option value="10" {% if request.args.get('top', '5') == '10' %}selected{% endif %}>10</option>
</select>
</label>
<div class="text-xs text-slate-600">Combines keyword search + semantic similarity</div>
<div class="text-xs text-slate-600">Combines keyword search + semantic similarity (free, no API calls)</div>
</div>
</form>
</div>
@@ -91,25 +84,48 @@
</div>
{% endif %}
<!-- Answer -->
<!-- Results -->
{% if result %}
<div class="max-w-3xl mx-auto">
<!-- Synthesized answer -->
<div class="answer-card rounded-xl border border-slate-800 p-6 mb-6">
<div class="flex items-center gap-2 mb-4">
<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
<h2 class="text-lg font-semibold text-white">Answer</h2>
<!-- AI Synthesized Answer (shown if cached or after user clicks synthesize) -->
<div id="answerSection">
{% if result.answer %}
<div class="answer-card rounded-xl border border-slate-800 p-6 mb-6">
<div class="flex items-center gap-2 mb-4">
<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
<h2 class="text-lg font-semibold text-white">AI Answer</h2>
<span class="text-xs px-2 py-0.5 rounded-full bg-green-900/30 text-green-400 border border-green-800/30">cached</span>
</div>
<div class="text-slate-300 text-sm leading-relaxed whitespace-pre-line">{{ result.answer }}</div>
</div>
<div class="text-slate-300 text-sm leading-relaxed whitespace-pre-line">{{ result.answer }}</div>
{% else %}
<!-- Synthesize button (costs tokens, result is cached permanently) -->
<div class="answer-card rounded-xl border border-slate-800 p-5 mb-6">
<div class="flex items-center justify-between">
<div>
<div class="text-sm text-slate-300 font-medium">Want an AI-synthesized answer?</div>
<div class="text-xs text-slate-500 mt-0.5">Uses Claude API (Haiku, ~$0.001). Result is cached permanently for all future visitors.</div>
</div>
<button id="synthesizeBtn" onclick="synthesizeAnswer()"
class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-500 transition-colors flex items-center gap-2 flex-shrink-0">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
Synthesize
</button>
</div>
</div>
{% endif %}
</div>
<!-- Source drafts -->
<!-- Source drafts (always shown — free) -->
{% if result.sources %}
<div class="answer-card rounded-xl border border-slate-800 overflow-hidden">
<div class="px-6 py-4 border-b border-slate-800">
<h3 class="text-sm font-semibold text-slate-300">Source Drafts ({{ result.sources|length }})</h3>
<h3 class="text-sm font-semibold text-slate-300">Matching Drafts ({{ result.sources|length }})</h3>
</div>
<table class="w-full text-sm">
<thead>
@@ -149,5 +165,46 @@
</div>
{% endif %}
</div>
<script>
function synthesizeAnswer() {
const btn = document.getElementById('synthesizeBtn');
const section = document.getElementById('answerSection');
// Show loading state
btn.disabled = true;
btn.innerHTML = '<span class="loading-spinner"></span> Synthesizing...';
fetch('/api/ask/synthesize', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
question: {{ question | tojson }},
top_k: {{ request.args.get('top', '5') | int }}
})
})
.then(r => r.json())
.then(data => {
if (data.answer) {
section.innerHTML = `
<div class="answer-card rounded-xl border border-slate-800 p-6 mb-6">
<div class="flex items-center gap-2 mb-4">
<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
<h2 class="text-lg font-semibold text-white">AI Answer</h2>
<span class="text-xs px-2 py-0.5 rounded-full bg-blue-900/30 text-blue-400 border border-blue-800/30">just generated</span>
</div>
<div class="text-slate-300 text-sm leading-relaxed whitespace-pre-line">${data.answer}</div>
</div>`;
}
})
.catch(err => {
btn.disabled = false;
btn.innerHTML = 'Synthesize (retry)';
section.querySelector('.text-xs.text-slate-500').textContent = 'Error: ' + err.message;
});
}
</script>
{% endif %}
{% endblock %}