<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TelosDB | Local Semantic Search</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Outfit:wght@400;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<site-header></site-header>
<div class="container">
<div class="layout">
<app-sidebar></app-sidebar>
<main class="main-content">
<main-panel></main-panel>
</main>
</div>
</div>
<div class="modal-overlay" id="overlay"></div>
<div id="mcp-json-modal">
<h3 class="modal-title">mcp.json</h3>
<pre id="mcp-json-content"></pre>
<div class="actions">
<button id="copy-mcp-btn" class="secondary-btn">COPY</button>
<button onclick="closeModal()" class="secondary-btn">閉じる</button>
</div>
</div>
<!-- React mount point for small components (e.g. ModelName) -->
<div id="root"></div>
<site-footer></site-footer>
<script type="module" src="components/site-header.js"></script>
<script type="module" src="components/app-sidebar.js"></script>
<script type="module" src="components/site-footer.js"></script>
<script type="module" src="components/main-panel.js"></script>
<script>
const API_BASE = "http://127.0.0.1:3001";
async function updateLlamaStatus() {
const dotTop = document.getElementById("llama-status-dot-top");
const textTop = document.getElementById("llama-status-text-top");
try {
const res = await fetch(`${API_BASE}/llama_status`);
const data = await res.json();
const status = data.status;
if (status === "running") {
if (dotTop) { dotTop.style.background = "#22c55e"; dotTop.style.boxShadow = "0 0 8px #22c55e"; }
if (textTop) textTop.textContent = "LLM Active";
} else if (status === "stopped") {
if (dotTop) { dotTop.style.background = "#3b82f6"; dotTop.style.boxShadow = "none"; }
if (textTop) textTop.textContent = "LSA Active";
} else {
if (dotTop) dotTop.style.background = "#f59e0b";
if (textTop) textTop.textContent = "Wait...";
}
} catch {
if (dotTop) dotTop.style.background = "#ef4444";
if (textTop) textTop.textContent = "Err";
}
}
async function updateDocCount() {
try {
const res = await fetch(`${API_BASE}/doc_count`);
const data = await res.json();
document.getElementById("doc-count-value").textContent = data.count || "0";
} catch {
document.getElementById("doc-count-value").textContent = "0";
}
}
async function updateModelName() {
try {
const res = await fetch(`${API_BASE}/model_name`);
const data = await res.json();
const modelTop = document.getElementById("model-name-top");
if (modelTop) modelTop.textContent = data.model_name || "不明";
} catch {
const modelTop = document.getElementById("model-name-top");
if (modelTop) modelTop.textContent = "接続エラー";
}
}
async function reindex() {
if (!confirm("LSAインデックスを再構築します。現在の全データが再学習され、数秒〜数十秒かかる場合があります。実行しますか？")) return;
const btn = document.getElementById("reindex-btn");
const originalText = btn.textContent;
btn.textContent = "Updating...";
btn.disabled = true;
try {
const res = await fetch(`${API_BASE}/messages`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0",
method: "lsa_retrain",
params: {},
id: Date.now(),
}),
});
const data = await res.json();
if (data.result) {
alert("LSA再学習を開始しました。完了までしばらくお待ちください。更新状況はSSE経由で反映されます。");
} else {
alert("エラー: " + (data.error || "再学習の開始に失敗しました"));
}
} catch (e) {
alert("通信エラー: " + e.message);
} finally {
btn.textContent = originalText;
btn.disabled = false;
}
}
async function search() {
const query = document.getElementById("query").value;
const resultPanel = document.getElementById("result");
if (!query.trim()) return;
resultPanel.innerHTML = '<div class="empty-state">検索中...</div>';
try {
const res = await fetch(`${API_BASE}/messages`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0",
method: "search_text",
params: { content: query, limit: 10 },
id: 1,
}),
});
const data = await res.json();
const results = data.result?.content || [];
if (results.length === 0) {
resultPanel.innerHTML = '<div class="empty-state">結果が見つかりませんでした</div>';
return;
}
resultPanel.innerHTML = results.map(r => `
<div class="result-card">
<div class="result-header">
<span>DOC_${String(r.id).padStart(4, '0')}</span>
<span style="color:var(--accent-purple)">SCORE: ${r.similarity.toFixed(4)}</span>
</div>
<div class="result-content">${r.content}</div>
</div>
`).join('');
} catch (e) {
resultPanel.innerHTML = `<div class="empty-state error-state">検索エラー: ${e.message}</div>`;
}
}
// Modal & Header Action Logic
document.addEventListener('click', async (e) => {
const btn = e.target.closest('#show-mcp-btn');
if (!btn) return;
const pre = document.getElementById("mcp-json-content");
const modal = document.getElementById("mcp-json-modal");
const overlay = document.getElementById("overlay");
try {
const res = await fetch("mcp.json");
const text = await res.text();
pre.textContent = text;
modal.classList.add("open");
overlay.classList.add("open");
} catch {
alert("mcp.jsonの読み込みに失敗しました");
}
});
const modal = document.getElementById("mcp-json-modal");
const overlay = document.getElementById("overlay");
const copyBtn = document.getElementById("copy-mcp-btn"); // This might be in header too now
function closeModal() {
modal.classList.remove("open");
overlay.classList.remove("open");
}
document.addEventListener('click', (e) => {
const btn = e.target.closest('#copy-mcp-btn');
if (!btn) return;
const text = document.getElementById("mcp-json-content").textContent;
navigator.clipboard.writeText(text);
const originalText = btn.textContent;
btn.textContent = "Copied!";
setTimeout(() => btn.textContent = originalText, 2000);
});
overlay.onclick = closeModal;
// Init
setInterval(updateLlamaStatus, 3000);
updateLlamaStatus();
updateDocCount();
updateModelName();
// Setup SSE for real-time updates
const eventSource = new EventSource(`${API_BASE}/sse`);
let callCount = 0;
eventSource.addEventListener("update", (e) => {
console.log("Data update received:", e.data);
const msg = e.data;
const activityItems = document.getElementById("activity-items");
const activityCountEl = document.getElementById("activity-count");
if (msg.startsWith("mcp:call:")) {
const method = msg.replace("mcp:call:", "");
callCount++;
if (activityCountEl) {
activityCountEl.textContent = `${callCount} events`;
}
if (activityItems) {
// Remove empty state if present
if (callCount === 1) activityItems.innerHTML = '';
const now = new Date();
const timeStr = now.toLocaleTimeString('ja-JP', { hour12: false });
const item = document.createElement("div");
item.className = "log-item";
item.innerHTML = `
<span class="log-method">${method}</span>
<span class="log-time">${timeStr}</span>
`;
activityItems.insertBefore(item, activityItems.firstChild);
// Limit log items for performance
if (activityItems.children.length > 20) {
activityItems.removeChild(activityItems.lastChild);
}
}
} else if (msg === "data_changed") {
updateDocCount();
}
});
eventSource.onerror = () => {
console.warn("SSE connection lost. Reconnecting...");
};
// Enter key search using delegation
document.addEventListener('keydown', (e) => {
if (e.key === "Enter" && e.target.id === "query") {
search();
}
});
</script>
</body>
</html>
