Initial commit: din-leumi MCP server + web app
MCP server with 7 tools for cataloging and searching National Insurance court decisions with pgvector semantic search. Web interface for upload, search, and browse.
This commit is contained in:
Chaim
492
web/static/index.html
Normal file
492
web/static/index.html
Normal file
@@ -0,0 +1,492 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>דין לאומי - קטלוג פסקי דין</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
background: #f5f7fa; color: #1a1a2e; line-height: 1.6;
|
||||
}
|
||||
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
|
||||
header {
|
||||
background: linear-gradient(135deg, #1a365d, #2d5086);
|
||||
color: white; padding: 24px 0; margin-bottom: 24px;
|
||||
}
|
||||
header h1 { font-size: 1.8em; }
|
||||
header p { opacity: 0.8; margin-top: 4px; }
|
||||
|
||||
.tabs {
|
||||
display: flex; gap: 0; margin-bottom: 24px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
}
|
||||
.tab {
|
||||
padding: 10px 24px; cursor: pointer; border: none;
|
||||
background: none; font-size: 1em; color: #64748b;
|
||||
border-bottom: 2px solid transparent; margin-bottom: -2px;
|
||||
}
|
||||
.tab.active { color: #1a365d; border-bottom-color: #1a365d; font-weight: 600; }
|
||||
.tab:hover { color: #1a365d; }
|
||||
|
||||
.panel { display: none; }
|
||||
.panel.active { display: block; }
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white; border-radius: 8px; padding: 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 16px;
|
||||
}
|
||||
.card h3 { margin-bottom: 12px; color: #1a365d; }
|
||||
|
||||
/* Forms */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 4px; }
|
||||
.form-group.full { grid-column: 1 / -1; }
|
||||
label { font-size: 0.85em; font-weight: 600; color: #475569; }
|
||||
input, select, textarea {
|
||||
padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;
|
||||
font-size: 0.95em; font-family: inherit;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus {
|
||||
outline: none; border-color: #2d5086; box-shadow: 0 0 0 2px rgba(45,80,134,0.15);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 10px 20px; border: none; border-radius: 6px;
|
||||
font-size: 0.95em; cursor: pointer; font-weight: 600;
|
||||
}
|
||||
.btn-primary { background: #1a365d; color: white; }
|
||||
.btn-primary:hover { background: #2d5086; }
|
||||
.btn-danger { background: #dc2626; color: white; }
|
||||
.btn-danger:hover { background: #b91c1c; }
|
||||
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
/* Upload area */
|
||||
.upload-area {
|
||||
border: 2px dashed #d1d5db; border-radius: 8px; padding: 40px;
|
||||
text-align: center; cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.upload-area:hover, .upload-area.dragover {
|
||||
border-color: #2d5086; background: #f0f4ff;
|
||||
}
|
||||
.upload-area input { display: none; }
|
||||
|
||||
/* Results */
|
||||
.result-item {
|
||||
border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.result-item:hover { border-color: #2d5086; }
|
||||
.result-score {
|
||||
display: inline-block; background: #e0e7ff; color: #3730a3;
|
||||
padding: 2px 8px; border-radius: 4px; font-size: 0.8em; font-weight: 600;
|
||||
}
|
||||
.result-meta { font-size: 0.85em; color: #64748b; margin: 4px 0; }
|
||||
.result-content {
|
||||
font-size: 0.9em; color: #374151; margin-top: 8px;
|
||||
background: #f9fafb; padding: 8px; border-radius: 4px;
|
||||
max-height: 150px; overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Decision list */
|
||||
.decision-row {
|
||||
display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr 80px;
|
||||
gap: 8px; padding: 10px 12px; align-items: center;
|
||||
border-bottom: 1px solid #f1f5f9; font-size: 0.9em;
|
||||
}
|
||||
.decision-row:hover { background: #f8fafc; }
|
||||
.decision-header { font-weight: 600; color: #475569; background: #f1f5f9; border-radius: 6px 6px 0 0; }
|
||||
|
||||
/* Tags */
|
||||
.tag {
|
||||
display: inline-block; background: #e0f2fe; color: #0369a1;
|
||||
padding: 2px 8px; border-radius: 12px; font-size: 0.8em; margin: 2px;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.progress-bar {
|
||||
height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden;
|
||||
}
|
||||
.progress-bar .fill {
|
||||
height: 100%; background: #2d5086; transition: width 0.3s;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
@keyframes pulse { 50% { opacity: 0.6; } }
|
||||
|
||||
.status-badge {
|
||||
display: inline-block; padding: 2px 8px; border-radius: 4px;
|
||||
font-size: 0.8em; font-weight: 600;
|
||||
}
|
||||
.status-completed { background: #d1fae5; color: #065f46; }
|
||||
.status-processing { background: #fef3c7; color: #92400e; }
|
||||
.status-failed { background: #fee2e2; color: #991b1b; }
|
||||
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
|
||||
.stat-box {
|
||||
background: white; border-radius: 8px; padding: 16px;
|
||||
text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.stat-number { font-size: 2em; font-weight: 700; color: #1a365d; }
|
||||
.stat-label { font-size: 0.85em; color: #64748b; }
|
||||
|
||||
.empty-state { text-align: center; padding: 40px; color: #94a3b8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<h1>דין לאומי</h1>
|
||||
<p>קטלוג וחיפוש סמנטי של פסקי דין בתחום ביטוח לאומי</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<!-- Stats -->
|
||||
<div class="stats-grid" id="stats-grid">
|
||||
<div class="stat-box"><div class="stat-number" id="stat-decisions">-</div><div class="stat-label">פסקי דין</div></div>
|
||||
<div class="stat-box"><div class="stat-number" id="stat-chunks">-</div><div class="stat-label">chunks</div></div>
|
||||
<div class="stat-box"><div class="stat-number" id="stat-completed">-</div><div class="stat-label">עובדו בהצלחה</div></div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<button class="tab active" data-tab="upload">העלאה</button>
|
||||
<button class="tab" data-tab="search">חיפוש</button>
|
||||
<button class="tab" data-tab="browse">פסקי דין</button>
|
||||
</div>
|
||||
|
||||
<!-- Upload Panel -->
|
||||
<div class="panel active" id="panel-upload">
|
||||
<div class="card">
|
||||
<h3>העלאת פסק דין</h3>
|
||||
<div class="upload-area" id="drop-zone">
|
||||
<p>גרור קובץ לכאן או לחץ לבחירה</p>
|
||||
<p style="font-size:0.85em;color:#94a3b8;margin-top:8px">PDF, DOCX, RTF, TXT (עד 50MB)</p>
|
||||
<input type="file" id="file-input" accept=".pdf,.docx,.rtf,.txt">
|
||||
</div>
|
||||
|
||||
<div id="upload-form" style="display:none; margin-top:16px">
|
||||
<div id="uploaded-file-info" style="margin-bottom:12px;padding:8px;background:#f0fdf4;border-radius:6px"></div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group full">
|
||||
<label>כותרת</label>
|
||||
<input type="text" id="inp-title" placeholder="כותרת תיאורית לפסק הדין">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>מספר תיק</label>
|
||||
<input type="text" id="inp-case-number" placeholder="בל 12345-06-20">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>בית משפט</label>
|
||||
<input type="text" id="inp-court" placeholder="בית הדין האזורי לעבודה ת"א">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>תאריך פסק דין</label>
|
||||
<input type="date" id="inp-date">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>שופט/ת</label>
|
||||
<input type="text" id="inp-judge">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>תובע/מערער</label>
|
||||
<input type="text" id="inp-appellant">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>נתבע/משיב</label>
|
||||
<input type="text" id="inp-respondent" value="המוסד לביטוח לאומי">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>נושאים (מופרדים בפסיקים)</label>
|
||||
<input type="text" id="inp-topics" placeholder="נכות כללית, תאונת עבודה">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>תוצאה</label>
|
||||
<select id="inp-outcome">
|
||||
<option value="">לא צוין</option>
|
||||
<option value="accepted">התקבלה</option>
|
||||
<option value="rejected">נדחתה</option>
|
||||
<option value="partial">התקבלה חלקית</option>
|
||||
<option value="remanded">הוחזרה לדיון</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;display:flex;gap:8px">
|
||||
<button class="btn btn-primary" id="btn-process">העלה ועבד</button>
|
||||
<button class="btn" id="btn-cancel" style="background:#e2e8f0">ביטול</button>
|
||||
</div>
|
||||
<div id="progress-area" style="display:none;margin-top:12px">
|
||||
<div class="progress-bar"><div class="fill" style="width:100%"></div></div>
|
||||
<p id="progress-text" style="font-size:0.85em;color:#64748b;margin-top:4px">מעבד...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Panel -->
|
||||
<div class="panel" id="panel-search">
|
||||
<div class="card">
|
||||
<h3>חיפוש סמנטי</h3>
|
||||
<div style="display:flex;gap:8px;margin-bottom:12px">
|
||||
<input type="text" id="search-query" placeholder="הזן שאילתת חיפוש..." style="flex:1">
|
||||
<button class="btn btn-primary" id="btn-search">חפש</button>
|
||||
</div>
|
||||
<div class="form-grid" style="margin-bottom:12px">
|
||||
<div class="form-group">
|
||||
<label>בית משפט</label>
|
||||
<input type="text" id="search-court" placeholder="סינון לפי בית משפט">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>נושא</label>
|
||||
<input type="text" id="search-topic" placeholder="סינון לפי נושא">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>תוצאה</label>
|
||||
<select id="search-outcome">
|
||||
<option value="">הכל</option>
|
||||
<option value="accepted">התקבלה</option>
|
||||
<option value="rejected">נדחתה</option>
|
||||
<option value="partial">חלקית</option>
|
||||
<option value="remanded">הוחזרה</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="search-results">
|
||||
<div class="empty-state">הזן שאילתה לחיפוש בפסקי הדין</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Browse Panel -->
|
||||
<div class="panel" id="panel-browse">
|
||||
<div class="card">
|
||||
<h3>רשימת פסקי דין</h3>
|
||||
<div id="decisions-list">
|
||||
<div class="empty-state">טוען...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── State ──
|
||||
let uploadedFilename = null;
|
||||
|
||||
// ── Tabs ──
|
||||
document.querySelectorAll('.tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
|
||||
if (tab.dataset.tab === 'browse') loadDecisions();
|
||||
});
|
||||
});
|
||||
|
||||
// ── Stats ──
|
||||
async function loadStats() {
|
||||
try {
|
||||
const res = await fetch('/api/stats');
|
||||
const data = await res.json();
|
||||
document.getElementById('stat-decisions').textContent = data.total_decisions || 0;
|
||||
document.getElementById('stat-chunks').textContent = data.total_chunks || 0;
|
||||
document.getElementById('stat-completed').textContent = data.completed_decisions || 0;
|
||||
} catch(e) { console.error('Failed to load stats', e); }
|
||||
}
|
||||
loadStats();
|
||||
|
||||
// ── Upload ──
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
|
||||
dropZone.addEventListener('click', () => fileInput.click());
|
||||
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });
|
||||
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
|
||||
dropZone.addEventListener('drop', e => {
|
||||
e.preventDefault(); dropZone.classList.remove('dragover');
|
||||
if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
|
||||
});
|
||||
fileInput.addEventListener('change', () => { if (fileInput.files.length) handleFile(fileInput.files[0]); });
|
||||
|
||||
async function handleFile(file) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
try {
|
||||
const res = await fetch('/api/upload', { method: 'POST', body: formData });
|
||||
if (!res.ok) throw new Error((await res.json()).detail);
|
||||
const data = await res.json();
|
||||
uploadedFilename = data.filename;
|
||||
document.getElementById('uploaded-file-info').innerHTML =
|
||||
`<strong>${data.original_name}</strong> (${(data.size/1024).toFixed(1)} KB)`;
|
||||
document.getElementById('upload-form').style.display = 'block';
|
||||
dropZone.style.display = 'none';
|
||||
} catch(e) { alert('שגיאה בהעלאה: ' + e.message); }
|
||||
}
|
||||
|
||||
document.getElementById('btn-cancel').addEventListener('click', () => {
|
||||
document.getElementById('upload-form').style.display = 'none';
|
||||
dropZone.style.display = 'block';
|
||||
uploadedFilename = null;
|
||||
});
|
||||
|
||||
document.getElementById('btn-process').addEventListener('click', async () => {
|
||||
if (!uploadedFilename) return;
|
||||
const btn = document.getElementById('btn-process');
|
||||
btn.disabled = true;
|
||||
|
||||
const topics = document.getElementById('inp-topics').value
|
||||
.split(',').map(t => t.trim()).filter(Boolean);
|
||||
|
||||
const body = {
|
||||
filename: uploadedFilename,
|
||||
title: document.getElementById('inp-title').value,
|
||||
case_number: document.getElementById('inp-case-number').value,
|
||||
court: document.getElementById('inp-court').value,
|
||||
decision_date: document.getElementById('inp-date').value,
|
||||
judge: document.getElementById('inp-judge').value,
|
||||
parties_appellant: document.getElementById('inp-appellant').value,
|
||||
parties_respondent: document.getElementById('inp-respondent').value,
|
||||
topics: topics,
|
||||
outcome: document.getElementById('inp-outcome').value,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/decisions', {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) throw new Error((await res.json()).detail);
|
||||
const data = await res.json();
|
||||
|
||||
document.getElementById('progress-area').style.display = 'block';
|
||||
|
||||
// Listen to SSE progress
|
||||
const evtSource = new EventSource('/api/progress/' + data.task_id);
|
||||
evtSource.onmessage = (e) => {
|
||||
const prog = JSON.parse(e.data);
|
||||
document.getElementById('progress-text').textContent =
|
||||
prog.status === 'completed' ? 'הושלם!' :
|
||||
prog.status === 'failed' ? 'שגיאה: ' + (prog.error || '') :
|
||||
'מעבד... (' + prog.status + ')';
|
||||
if (prog.status === 'completed' || prog.status === 'failed') {
|
||||
evtSource.close();
|
||||
btn.disabled = false;
|
||||
loadStats();
|
||||
if (prog.status === 'completed') {
|
||||
setTimeout(() => {
|
||||
document.getElementById('upload-form').style.display = 'none';
|
||||
document.getElementById('progress-area').style.display = 'none';
|
||||
dropZone.style.display = 'block';
|
||||
uploadedFilename = null;
|
||||
// Reset form
|
||||
document.querySelectorAll('#upload-form input[type=text], #upload-form input[type=date]').forEach(i => i.value = '');
|
||||
document.getElementById('inp-respondent').value = 'המוסד לביטוח לאומי';
|
||||
document.getElementById('inp-outcome').value = '';
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
};
|
||||
} catch(e) {
|
||||
alert('שגיאה: ' + e.message);
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// ── Search ──
|
||||
document.getElementById('btn-search').addEventListener('click', doSearch);
|
||||
document.getElementById('search-query').addEventListener('keypress', e => { if (e.key === 'Enter') doSearch(); });
|
||||
|
||||
async function doSearch() {
|
||||
const q = document.getElementById('search-query').value.trim();
|
||||
if (!q) return;
|
||||
|
||||
const params = new URLSearchParams({ q });
|
||||
const court = document.getElementById('search-court').value;
|
||||
const topic = document.getElementById('search-topic').value;
|
||||
const outcome = document.getElementById('search-outcome').value;
|
||||
if (court) params.append('court', court);
|
||||
if (topic) params.append('topic', topic);
|
||||
if (outcome) params.append('outcome', outcome);
|
||||
|
||||
const container = document.getElementById('search-results');
|
||||
container.innerHTML = '<div class="empty-state">מחפש...</div>';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/search?' + params);
|
||||
if (!res.ok) throw new Error((await res.json()).detail);
|
||||
const results = await res.json();
|
||||
|
||||
if (!results.length) {
|
||||
container.innerHTML = '<div class="empty-state">לא נמצאו תוצאות</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = results.map((r, i) => `
|
||||
<div class="result-item">
|
||||
<span class="result-score">${(r.score * 100).toFixed(1)}%</span>
|
||||
<strong>${r.title || 'ללא כותרת'}</strong>
|
||||
<div class="result-meta">
|
||||
${r.case_number ? r.case_number + ' | ' : ''}
|
||||
${r.court || ''}
|
||||
${r.decision_date ? ' | ' + r.decision_date : ''}
|
||||
${r.judge ? ' | שופט: ' + r.judge : ''}
|
||||
${r.outcome ? ' | ' + outcomeHeb(r.outcome) : ''}
|
||||
</div>
|
||||
<div class="result-content">${escapeHtml(r.content || '').substring(0, 500)}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch(e) {
|
||||
container.innerHTML = `<div class="empty-state">שגיאה: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Browse ──
|
||||
async function loadDecisions() {
|
||||
const container = document.getElementById('decisions-list');
|
||||
try {
|
||||
const res = await fetch('/api/decisions');
|
||||
const decisions = await res.json();
|
||||
|
||||
if (!decisions.length) {
|
||||
container.innerHTML = '<div class="empty-state">אין פסקי דין במערכת</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="decision-row decision-header">
|
||||
<span>כותרת</span><span>בית משפט</span><span>תאריך</span><span>תוצאה</span><span></span>
|
||||
</div>
|
||||
${decisions.map(d => `
|
||||
<div class="decision-row">
|
||||
<span>
|
||||
<strong>${d.title || 'ללא כותרת'}</strong>
|
||||
${d.case_number ? '<br><small style="color:#64748b">' + d.case_number + '</small>' : ''}
|
||||
${(d.topics || []).map(t => '<span class="tag">' + t + '</span>').join('')}
|
||||
</span>
|
||||
<span>${d.court || '-'}</span>
|
||||
<span>${d.decision_date || '-'}</span>
|
||||
<span>${d.outcome ? outcomeHeb(d.outcome) : '-'}</span>
|
||||
<span>
|
||||
<span class="status-badge status-${d.extraction_status || 'pending'}">${d.extraction_status || 'pending'}</span>
|
||||
</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`;
|
||||
} catch(e) {
|
||||
container.innerHTML = `<div class="empty-state">שגיאה: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Helpers ──
|
||||
function outcomeHeb(o) {
|
||||
return { accepted: 'התקבלה', rejected: 'נדחתה', partial: 'חלקית', remanded: 'הוחזרה' }[o] || o;
|
||||
}
|
||||
function escapeHtml(s) {
|
||||
const d = document.createElement('div'); d.textContent = s; return d.innerHTML;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user