<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>TelosDB</title>
<style>
body {
font-family: sans-serif;
margin: 2em;
}
input,
button {
font-size: 1.1em;
margin: 0.2em;
}
pre {
background: #f4f4f4;
padding: 1em;
border-radius: 6px;
}
</style>
</head>
<body>
<div style="display: flex; gap: 2em; align-items: center; margin-bottom: 1em">
<div id="llama-status" style="font-weight: bold">
llama_server:
<span id="llama-status-indicator" style="color: gray">判定中...</span>
</div>
<div id="doc-count" style="font-weight: bold">
ドキュメント: <span id="doc-count-value">--</span>件
</div>
<button id="show-mcp-btn">mcp.json表示</button>
<button id="copy-mcp-btn" style="display: none">コピー</button>
</div>
<div id="mcp-json-modal" style="
display: none;
background: #f9f9f9;
border: 1px solid #ccc;
padding: 1em;
border-radius: 6px;
margin-bottom: 1em;
position: relative;
">
<pre id="mcp-json-content" style="max-height: 300px; overflow: auto"></pre>
</div>
<h1>TelosDB 検索</h1>
<input id="query" type="text" placeholder="検索ワード" />
<button onclick="search()">検索</button>
<pre id="result"></pre>
<script>
// llama_server状態取得（/llama_status REST APIを定期取得）
function updateLlamaStatus() {
const indicator = document.getElementById("llama-status-indicator");
async function fetchStatus() {
try {
const res = await fetch("http://127.0.0.1:3001/llama_status");
const data = await res.json();
if (data.status === "running") {
indicator.textContent = "● 起動中";
indicator.style.color = "green";
} else if (data.status === "stopped") {
indicator.textContent = "× 停止中";
indicator.style.color = "red";
} else if (data.status === "error") {
indicator.textContent = "▲ エラー";
indicator.style.color = "orange";
} else {
indicator.textContent = "？ 不明";
indicator.style.color = "gray";
}
} catch {
indicator.textContent = "× 停止中";
indicator.style.color = "red";
}
}
fetchStatus();
setInterval(fetchStatus, 2000);
}
updateLlamaStatus();
// ドキュメント件数取得
async function updateDocCount() {
try {
const res = await fetch("http://127.0.0.1:3001/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0",
method: "search_text",
params: { content: "", limit: 100000 },
id: 2,
}),
});
const data = await res.json();
const count =
data.result && data.result.content ? data.result.content.length : 0;
document.getElementById("doc-count-value").textContent = count;
} catch {
document.getElementById("doc-count-value").textContent = "--";
}
}
updateDocCount();
// mcp.json表示・コピー
document.getElementById("show-mcp-btn").onclick = async function () {
const modal = document.getElementById("mcp-json-modal");
const pre = document.getElementById("mcp-json-content");
const copyBtn = document.getElementById("copy-mcp-btn");
if (modal.style.display === "none") {
const res = await fetch("document/mcp.json");
const text = await res.text();
pre.textContent = text;
modal.style.display = "block";
copyBtn.style.display = "inline-block";
} else {
modal.style.display = "none";
copyBtn.style.display = "none";
}
};
document.getElementById("copy-mcp-btn").onclick = function () {
const text = document.getElementById("mcp-json-content").textContent;
navigator.clipboard.writeText(text);
};
// 検索
async function search() {
const q = document.getElementById("query").value;
const res = await fetch("http://127.0.0.1:3001/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0",
method: "search_text",
params: { content: q, limit: 10 },
id: 1,
}),
});
const data = await res.json();
document.getElementById("result").textContent = JSON.stringify(
data.result,
null,
2,
);
}
</script>
</body>
</html>
