Add files via upload
BREAKING CHANGE: - new config.yaml config block - new dependency: httpx-aiohttp for faster endpoint queries in bigger installations - new dynamic dashboard
This commit is contained in:
GitHub
parent
20790d95ed
commit
b3b67fdbf2
3 changed files with 191 additions and 203 deletions
|
|
@ -1,17 +1,27 @@
|
|||
aiocache==0.12.3
|
||||
aiohappyeyeballs==2.6.1
|
||||
aiohttp==3.12.15
|
||||
aiosignal==1.4.0
|
||||
annotated-types==0.7.0
|
||||
anyio==4.10.0
|
||||
async-timeout==5.0.1
|
||||
attrs==25.3.0
|
||||
certifi==2025.8.3
|
||||
click==8.2.1
|
||||
distro==1.9.0
|
||||
exceptiongroup==1.3.0
|
||||
fastapi==0.116.1
|
||||
frozenlist==1.7.0
|
||||
h11==0.16.0
|
||||
httpcore==1.0.9
|
||||
httpx==0.28.1
|
||||
httpx-aiohttp==0.1.8
|
||||
idna==3.10
|
||||
jiter==0.10.0
|
||||
multidict==6.6.4
|
||||
ollama==0.5.3
|
||||
openai==1.102.0
|
||||
propcache==0.3.2
|
||||
pydantic==2.11.7
|
||||
pydantic-settings==2.10.1
|
||||
pydantic_core==2.33.2
|
||||
|
|
@ -23,3 +33,4 @@ tqdm==4.67.1
|
|||
typing-inspection==0.4.1
|
||||
typing_extensions==4.14.1
|
||||
uvicorn==0.35.0
|
||||
yarl==1.20.1
|
||||
|
|
|
|||
37
router.py
37
router.py
|
|
@ -7,6 +7,7 @@ license: AGPL
|
|||
"""
|
||||
# -------------------------------------------------------------
|
||||
import json, time, asyncio, yaml, httpx, ollama, openai, os, re
|
||||
from httpx_aiohttp import AiohttpTransport
|
||||
from pathlib import Path
|
||||
from typing import Dict, Set, List, Optional
|
||||
from fastapi import FastAPI, Request, HTTPException
|
||||
|
|
@ -96,11 +97,12 @@ def get_httpx_client(endpoint: str) -> httpx.AsyncClient:
|
|||
"""
|
||||
return httpx.AsyncClient(
|
||||
base_url=endpoint,
|
||||
timeout=httpx.Timeout(5.0, read=5.0, write=5.0, connect=5.0),
|
||||
limits=httpx.Limits(
|
||||
max_keepalive_connections=64,
|
||||
max_connections=64
|
||||
)
|
||||
timeout=httpx.Timeout(5.0, read=5.0, write=None, connect=5.0),
|
||||
#limits=httpx.Limits(
|
||||
# max_keepalive_connections=64,
|
||||
# max_connections=64
|
||||
#),
|
||||
transport=AiohttpTransport()
|
||||
)
|
||||
|
||||
async def fetch_available_models(endpoint: str, api_key: Optional[str] = None) -> Set[str]:
|
||||
|
|
@ -133,8 +135,8 @@ async def fetch_available_models(endpoint: str, api_key: Optional[str] = None) -
|
|||
# Error expired – remove it
|
||||
del _error_cache[endpoint]
|
||||
|
||||
client = get_httpx_client(endpoint)
|
||||
try:
|
||||
client = get_httpx_client(endpoint)
|
||||
if "/v1" in endpoint:
|
||||
resp = await client.get(f"/models", headers=headers)
|
||||
else:
|
||||
|
|
@ -147,7 +149,7 @@ async def fetch_available_models(endpoint: str, api_key: Optional[str] = None) -
|
|||
models = {m.get("id") for m in data.get("data", []) if m.get("id")}
|
||||
else:
|
||||
models = {m.get("name") for m in data.get("models", []) if m.get("name")}
|
||||
|
||||
|
||||
if models:
|
||||
_models_cache[endpoint] = (models, time.time())
|
||||
return models
|
||||
|
|
@ -160,6 +162,8 @@ async def fetch_available_models(endpoint: str, api_key: Optional[str] = None) -
|
|||
print(f"[fetch_available_models] {endpoint} error: {e}")
|
||||
_error_cache[endpoint] = time.time()
|
||||
return set()
|
||||
finally:
|
||||
await client.aclose()
|
||||
|
||||
|
||||
async def fetch_loaded_models(endpoint: str) -> Set[str]:
|
||||
|
|
@ -168,8 +172,8 @@ async def fetch_loaded_models(endpoint: str) -> Set[str]:
|
|||
loaded on that endpoint. If the request fails (e.g. timeout, 5xx), an empty
|
||||
set is returned.
|
||||
"""
|
||||
client = get_httpx_client(endpoint)
|
||||
try:
|
||||
client = get_httpx_client(endpoint)
|
||||
resp = await client.get(f"/api/ps")
|
||||
resp.raise_for_status()
|
||||
data = resp.json()
|
||||
|
|
@ -180,6 +184,8 @@ async def fetch_loaded_models(endpoint: str) -> Set[str]:
|
|||
except Exception:
|
||||
# If anything goes wrong we simply assume the endpoint has no models
|
||||
return set()
|
||||
finally:
|
||||
await client.aclose()
|
||||
|
||||
async def fetch_endpoint_details(endpoint: str, route: str, detail: str, api_key: Optional[str] = None) -> List[dict]:
|
||||
"""
|
||||
|
|
@ -189,8 +195,9 @@ async def fetch_endpoint_details(endpoint: str, route: str, detail: str, api_key
|
|||
headers = None
|
||||
if api_key is not None:
|
||||
headers = {"Authorization": "Bearer " + api_key}
|
||||
client = get_httpx_client(endpoint)
|
||||
|
||||
try:
|
||||
client = get_httpx_client(endpoint)
|
||||
resp = await client.get(f"{route}", headers=headers)
|
||||
resp.raise_for_status()
|
||||
data = resp.json()
|
||||
|
|
@ -200,6 +207,8 @@ async def fetch_endpoint_details(endpoint: str, route: str, detail: str, api_key
|
|||
# If anything goes wrong we cannot reply details
|
||||
print(e)
|
||||
return []
|
||||
finally:
|
||||
await client.aclose()
|
||||
|
||||
def ep2base(ep):
|
||||
if "/v1" in ep:
|
||||
|
|
@ -235,8 +244,8 @@ async def decrement_usage(endpoint: str, model: str) -> None:
|
|||
# Optionally, clean up zero entries
|
||||
if usage_counts[endpoint].get(model, 0) == 0:
|
||||
usage_counts[endpoint].pop(model, None)
|
||||
if not usage_counts[endpoint]:
|
||||
usage_counts.pop(endpoint, None)
|
||||
#if not usage_counts[endpoint]:
|
||||
# usage_counts.pop(endpoint, None)
|
||||
|
||||
# -------------------------------------------------------------
|
||||
# 5. Endpoint selection logic (respecting the configurable limit)
|
||||
|
|
@ -640,7 +649,7 @@ async def show_proxy(request: Request, model: Optional[str] = None):
|
|||
|
||||
# 2. Endpoint logic
|
||||
endpoint = await choose_endpoint(model)
|
||||
await increment_usage(endpoint, model)
|
||||
#await increment_usage(endpoint, model)
|
||||
client = ollama.AsyncClient(host=endpoint)
|
||||
|
||||
# 3. Proxy a simple show request
|
||||
|
|
@ -907,7 +916,7 @@ async def config_proxy(request: Request):
|
|||
"""
|
||||
async def check_endpoint(url: str):
|
||||
try:
|
||||
async with httpx.AsyncClient(timeout=1) as client:
|
||||
async with httpx.AsyncClient(timeout=1, transport=AiohttpTransport()) as client:
|
||||
if "/v1" in url:
|
||||
headers = {"Authorization": "Bearer " + config.api_keys[url]}
|
||||
r = await client.get(f"{url}/models", headers=headers)
|
||||
|
|
@ -921,6 +930,8 @@ async def config_proxy(request: Request):
|
|||
return {"url": url, "status": "ok", "version": data.get("version")}
|
||||
except Exception as exc:
|
||||
return {"url": url, "status": "error", "detail": str(exc)}
|
||||
finally:
|
||||
await client.aclose()
|
||||
|
||||
results = await asyncio.gather(*[check_endpoint(ep) for ep in config.endpoints])
|
||||
return {"endpoints": results}
|
||||
|
|
|
|||
|
|
@ -5,108 +5,75 @@
|
|||
<title>NOMYO Router Dashboard</title>
|
||||
<style>
|
||||
body{font-family:Arial,Helvetica,sans-serif;background:#f7f7f7;color:#333;padding:20px;}
|
||||
h1{margin-top:0;}
|
||||
table{border-collapse:collapse;width:100%;margin-bottom:20px;}
|
||||
th,td{border:1px solid #ddd;padding:8px;}
|
||||
th{background:#333;color:#fff;}
|
||||
tr:nth-child(even){background:#f2f2f2;}
|
||||
.endpoint{font-weight:bold;}
|
||||
.model{font-family:monospace;}
|
||||
.loading{color:#999;}
|
||||
|
||||
.tables-wrapper{
|
||||
display:flex;
|
||||
gap:1rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
.header-pull-wrapper {
|
||||
display: flex; /* horizontal layout */
|
||||
align-items: center; /* vertical centering */
|
||||
gap: 1rem; /* space between title & form */
|
||||
flex-wrap: wrap; /* optional – keeps it tidy on very narrow screens */
|
||||
}
|
||||
.table-container{
|
||||
width:50%;
|
||||
}
|
||||
/* Ensure the heading aligns nicely inside each container */
|
||||
.table-container h2{
|
||||
margin:0 0 0.5rem 0;
|
||||
}
|
||||
/* ---- NEW STYLES FOR PORTRAIT (height > width) ---- */
|
||||
@media (orientation: portrait) {
|
||||
/* Stack the two tables vertically */
|
||||
h2 {margin: 0;}
|
||||
.tables-wrapper{display:flex;gap:2rem;}
|
||||
.table-container{flex:1;min-width:350px;background:#fff;padding:1rem;border-radius:6px;}
|
||||
/* ---------- Header + Pull form ---------- */
|
||||
.header-pull-wrapper{display:flex;flex-direction:row;align-items:center;gap:1rem;margin-bottom:0;}
|
||||
#pull-section{display:flex;align-items:center;}
|
||||
#pull-section input{flex:1;padding:0;margin-right:0.5rem;}
|
||||
#pull-section button{padding:0 0;}
|
||||
#pull-status{margin-left:0.5rem; font-weight:bold;}
|
||||
/* ---------- Tables ---------- */
|
||||
table{width:100%;border-collapse:collapse;margin-top:1rem;}
|
||||
th,td{border:1px solid #ddd;padding:0.5rem;text-align:left;}
|
||||
th{background:#e0e0e0;}
|
||||
.loading{color:#777;font-style:italic;}
|
||||
.status-ok{color:#006400;font-weight:bold;}
|
||||
.status-error{color:#8B0000;font-weight:bold;}
|
||||
.copy-link,.delete-link,.show-link{font-size:0.9em;margin-left:0.5em;cursor:pointer;text-decoration:underline;float:right;}
|
||||
.delete-link{color:#b22222;}
|
||||
.copy-link,.show-link{color:#0066cc;}
|
||||
.delete-link:hover,.copy-link:hover,.show-link:hover{text-decoration:none;}
|
||||
/* ---------- Modal ---------- */
|
||||
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);align-items:center;justify-content:center;}
|
||||
.modal-content{background:#fff;padding:1rem;max-width:90%;max-height:90%;overflow:auto;border-radius:6px;}
|
||||
.close-btn{float:right;cursor:pointer;font-size:1.5rem;}
|
||||
/* ---------- Usage Chart ---------- */
|
||||
.usage-chart{margin-top:20px;}
|
||||
.endpoint-bar{margin-bottom:12px;}
|
||||
.endpoint-label{font-weight:bold;margin-bottom:4px;}
|
||||
.bar{display:flex;height:16px;background:#e0e0e0;border-radius:4px;overflow:hidden;}
|
||||
.segment{height:100%;color:white;font-size:12px;font-weight: bolder;display:flex;align-items:center;justify-content:center;white-space:nowrap;}
|
||||
.table-container {padding-top:1rem;}
|
||||
/* ---------- Responsive reorder ---------- */
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
.tables-wrapper {
|
||||
flex-direction: column; /* instead of the default row */
|
||||
flex-direction: column;
|
||||
}
|
||||
.table-container {
|
||||
width: 100%; /* full width when stacked */
|
||||
.tables-wrapper > .table-container:nth-child(1) { /* Tags container */
|
||||
order: 2;
|
||||
}
|
||||
/* Put the “Running Models” table first */
|
||||
.table-container:nth-child(2) { /* the PS table is the 2nd child */
|
||||
order: -1;
|
||||
}
|
||||
/* Keep the other table after it (default order 0) */
|
||||
.table-container:nth-child(1) {
|
||||
order: 0;
|
||||
.tables-wrapper > .table-container:nth-child(2) { /* PS container */
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
/* Add a tiny status‑style section */
|
||||
.status-ok { color: #006400; font-weight: bold; } /* dark green */
|
||||
.status-error{ color: #8B0000; font-weight: bold; } /* dark red */
|
||||
.copy-link {
|
||||
font-size:0.9em;
|
||||
margin-left:0.5em;
|
||||
color:#0066cc;
|
||||
cursor:pointer;
|
||||
text-decoration:underline;
|
||||
float: right;
|
||||
}
|
||||
.delete-link{
|
||||
font-size:0.9em;
|
||||
margin-left:0.5em;
|
||||
color:#b22222; /* dark red */
|
||||
cursor:pointer;
|
||||
text-decoration:underline;
|
||||
float: right;
|
||||
}
|
||||
.show-link {
|
||||
font-size:0.9em;
|
||||
margin-left:0.5em;
|
||||
color:#0066cc;
|
||||
cursor:pointer;
|
||||
text-decoration:underline;
|
||||
float: right;
|
||||
}
|
||||
.delete-link:hover{ text-decoration:none; }
|
||||
.copy-link:hover { text-decoration:none; }
|
||||
/* modal.css – very lightweight – feel free to replace with Bootstrap/Material UI */
|
||||
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%;
|
||||
background:rgba(0,0,0,.6); align-items:center; justify-content:center; }
|
||||
.modal-content { background:#fff; padding:1rem; max-width:90%; max-height:90%; overflow:auto; }
|
||||
.close-btn { float:right; cursor:pointer; font-size:1.5rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://www.nomyo.ai" target="_blank"><img src="./static/228394408.png" width="100px" height="100px"></a><h1>Router Dashboard</h1>
|
||||
<a href="https://www.nomyo.ai" target="_blank"><img src="./static/228394408.png" width="100px" height="100px"></a>
|
||||
<h1>Router Dashboard</h1>
|
||||
|
||||
<div class="tables-wrapper">
|
||||
<!-- ---------- Tags ---------- -->
|
||||
<div class="table-container">
|
||||
<div class="header-pull-wrapper">
|
||||
<h2><span id="tags-count"></span> Available Models (Tags)</h2>
|
||||
<div id="pull-section">
|
||||
<label for="pull-model-input">Pull a model:</label>
|
||||
<input type="text" id="pull-model-input" placeholder="llama3:latest" />
|
||||
<button id="pull-btn">Pull</button>
|
||||
<span id="pull-status" style="margin-left:0.5rem; color:green;"></span>
|
||||
</div></div>
|
||||
<h2><span id="tags-count"></span> Available Models (Tags)</h2>
|
||||
<div id="pull-section">
|
||||
<label for="pull-model-input">Pull a model:</label>
|
||||
<input type="text" id="pull-model-input" placeholder="llama3:latest" />
|
||||
<button id="pull-btn">Pull</button>
|
||||
<span id="pull-status"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="tags-table">
|
||||
<thead><tr><th>Model</th><th>Digest</th></tr></thead>
|
||||
<tbody id="tags-body">
|
||||
<tr><td colspan="2" class="loading">Loading…</td></tr>
|
||||
</tbody>
|
||||
<tbody id="tags-body"><tr><td colspan="2" class="loading">Loading…</td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- ---------- PS + Usage Chart ---------- -->
|
||||
<div class="table-container">
|
||||
<h2>Running Models (PS)</h2>
|
||||
<table id="ps-table">
|
||||
|
|
@ -119,10 +86,11 @@
|
|||
<th>Digest</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ps-body">
|
||||
<tr><td colspan="2" class="loading">Loading…</td></tr>
|
||||
</tbody>
|
||||
<tbody id="ps-body"><tr><td colspan="5" class="loading">Loading…</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<!-- ------------- Usage Chart ------------- -->
|
||||
<div id="usage-chart" class="usage-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -135,23 +103,22 @@
|
|||
<th>Version</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="endpoints-body">
|
||||
<tr><td colspan="3" class="loading">Loading…</td></tr>
|
||||
</tbody>
|
||||
<tbody id="endpoints-body"><tr><td colspan="3" class="loading">Loading…</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
/* ---------- Utility ---------- */
|
||||
async function fetchJSON(url){
|
||||
const resp = await fetch(url);
|
||||
if(!resp.ok){ throw new Error(`Failed ${url}: ${resp.status}`); }
|
||||
return await resp.json();
|
||||
}
|
||||
|
||||
/* ---------- Endpoints ---------- */
|
||||
async function loadEndpoints(){
|
||||
try{
|
||||
const data = await fetchJSON('/api/config');
|
||||
const body = document.getElementById('endpoints-body');
|
||||
// Map each endpoint object to a table row
|
||||
body.innerHTML = data.endpoints.map(e => {
|
||||
const statusClass = e.status === 'ok' ? 'status-ok' : 'status-error';
|
||||
const version = e.version || 'N/A';
|
||||
|
|
@ -169,54 +136,37 @@ async function loadEndpoints(){
|
|||
}
|
||||
}
|
||||
|
||||
/* ---------- Tags ---------- */
|
||||
async function loadTags(){
|
||||
try{
|
||||
const data = await fetchJSON('/api/tags');
|
||||
const body = document.getElementById('tags-body');
|
||||
body.innerHTML = data.models.map(m => {
|
||||
// Build the model cell
|
||||
let modelCell = `${m.id || m.name}`;
|
||||
// Add delete link only when a digest exists
|
||||
if (m.digest) {
|
||||
modelCell += `
|
||||
<a href="#" class="delete-link" data-model="${m.name}">
|
||||
delete
|
||||
</a>`;
|
||||
}
|
||||
// Add the copy link *only if a digest exists*
|
||||
if (m.digest) {
|
||||
modelCell += `
|
||||
<a href="#" class="copy-link" data-source="${m.name}">
|
||||
copy
|
||||
</a>`;
|
||||
}
|
||||
if (m.digest) {
|
||||
modelCell += `
|
||||
<a href="#" class="show-link" data-model="${m.name}">
|
||||
show
|
||||
</a>`;
|
||||
modelCell += `<a href="#" class="delete-link" data-model="${m.name}">delete</a>`;
|
||||
modelCell += `<a href="#" class="copy-link" data-source="${m.name}">copy</a>`;
|
||||
modelCell += `<a href="#" class="show-link" data-model="${m.name}">show</a>`;
|
||||
}
|
||||
return `
|
||||
<tr>
|
||||
<td class="model">${modelCell}</td>
|
||||
<td>${m.digest || ''}</td>
|
||||
</tr>`;
|
||||
}).join(''); const countSpan = document.getElementById('tags-count');
|
||||
countSpan.textContent = `${data.models.length}`;
|
||||
}).join('');
|
||||
document.getElementById('tags-count').textContent = `${data.models.length}`;
|
||||
|
||||
/* copy logic */
|
||||
document.querySelectorAll('.copy-link').forEach(link => {
|
||||
link.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
const source = link.dataset.source;
|
||||
const dest = prompt(`Enter destination for ${source}:`);
|
||||
if (!dest) return; // cancel if empty
|
||||
if (!dest) return;
|
||||
try{
|
||||
const resp = await fetch(
|
||||
`/api/copy?source=${encodeURIComponent(source)}&destination=${encodeURIComponent(dest)}`,
|
||||
{method: 'POST'}
|
||||
);
|
||||
const resp = await fetch(`/api/copy?source=${encodeURIComponent(source)}&destination=${encodeURIComponent(dest)}`,{method:'POST'});
|
||||
if (!resp.ok) throw new Error(`Copy failed: ${resp.status}`);
|
||||
alert(`Copied ${source} to ${dest} successfully.`);
|
||||
|
||||
loadTags();
|
||||
}catch(err){
|
||||
console.error(err);
|
||||
|
|
@ -224,22 +174,18 @@ async function loadTags(){
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* delete logic */
|
||||
document.querySelectorAll('.delete-link').forEach(link => {
|
||||
link.addEventListener('click', async e => {
|
||||
e.preventDefault();
|
||||
const model = link.dataset.model;
|
||||
|
||||
const ok = confirm(`Delete the model “${model}”? This cannot be undone.`);
|
||||
if (!ok) return;
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
`/api/delete?model=${encodeURIComponent(model)}`,
|
||||
{method: 'DELETE'}
|
||||
);
|
||||
const resp = await fetch(`/api/delete?model=${encodeURIComponent(model)}`,{method:'DELETE'});
|
||||
if (!resp.ok) throw new Error(`Delete failed: ${resp.status}`);
|
||||
alert(`Model “${model}” deleted successfully.`);
|
||||
|
||||
loadTags();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
|
|
@ -247,71 +193,55 @@ async function loadTags(){
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* show logic */
|
||||
document.body.addEventListener('click', async e => {
|
||||
if (!e.target.matches('.show-link')) return;
|
||||
if (!e.target.matches('.show-link')) return;
|
||||
e.preventDefault();
|
||||
const model = e.target.dataset.model;
|
||||
try {
|
||||
const resp = await fetch(`/api/show?model=${encodeURIComponent(model)}`,{method:'POST'});
|
||||
if (!resp.ok) throw new Error(`Status ${resp.status}`);
|
||||
const data = await resp.json();
|
||||
document.getElementById('json-output').textContent = JSON.stringify(data, null, 2);
|
||||
document.getElementById('show-modal').style.display = 'flex';
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert(`Could not load model details: ${err.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
const model = e.target.dataset.model;
|
||||
/* pull logic */
|
||||
document.getElementById('pull-btn').addEventListener('click', async () => {
|
||||
const model = document.getElementById('pull-model-input').value.trim();
|
||||
const statusEl = document.getElementById('pull-status');
|
||||
if (!model) { alert('Please enter a model name.'); return; }
|
||||
try {
|
||||
const resp = await fetch(`/api/pull?model=${encodeURIComponent(model)}`,{method:'POST'});
|
||||
if (!resp.ok) throw new Error(`Status ${resp.status}`);
|
||||
const data = await resp.json();
|
||||
statusEl.textContent = `✅ ${JSON.stringify(data, null, 2)}`;
|
||||
statusEl.style.color = 'green';
|
||||
loadTags();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
statusEl.textContent = `❌ ${err.message}`;
|
||||
statusEl.style.color = 'red';
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
`/api/show?model=${encodeURIComponent(model)}`,
|
||||
{method: 'POST'}
|
||||
);
|
||||
if (!resp.ok) throw new Error(`Status ${resp.status}`);
|
||||
const data = await resp.json();
|
||||
/* modal close */
|
||||
const modal = document.getElementById('show-modal');
|
||||
modal.addEventListener('click', e => {
|
||||
if (e.target === modal || e.target.matches('.close-btn')) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
const jsonText = JSON.stringify(data, null, 2)
|
||||
.replace(/\\n/g, '\n');
|
||||
|
||||
document.getElementById('json-output').textContent = jsonText;
|
||||
document.getElementById('show-modal').style.display = 'flex';
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert(`Could not load model details: ${err.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('pull-btn').addEventListener('click', async () => {
|
||||
const model = document.getElementById('pull-model-input').value.trim();
|
||||
const statusEl = document.getElementById('pull-status');
|
||||
|
||||
if (!model) {
|
||||
alert('Please enter a model name.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
`/api/pull?model=${encodeURIComponent(model)}`,
|
||||
{method: 'POST'}
|
||||
);
|
||||
|
||||
if (!resp.ok) throw new Error(`Status ${resp.status}`);
|
||||
const data = await resp.json();
|
||||
|
||||
statusEl.textContent = `✅ ${JSON.stringify(data, null, 2)}`;
|
||||
statusEl.style.color = 'green';
|
||||
|
||||
// Optional: refresh the tags list so the new model appears
|
||||
loadTags();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
statusEl.textContent = `❌ ${err.message}`;
|
||||
statusEl.style.color = 'red';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const modal = document.getElementById('show-modal');
|
||||
modal.addEventListener('click', e => {
|
||||
if (e.target === modal || e.target.matches('.close-btn')) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}catch(e){ console.error(e); }
|
||||
}
|
||||
|
||||
/* ---------- PS ---------- */
|
||||
async function loadPS(){
|
||||
try{
|
||||
const data = await fetchJSON('/api/ps');
|
||||
|
|
@ -320,18 +250,54 @@ async function loadPS(){
|
|||
}catch(e){ console.error(e); }
|
||||
}
|
||||
|
||||
/* ---------- Usage Chart (stacked‑percentage) ---------- */
|
||||
function getColor(seed){
|
||||
const h = Math.abs(hashString(seed) % 360);
|
||||
return `hsl(${h}, 70%, 50%)`;
|
||||
}
|
||||
function hashString(str){
|
||||
let hash = 0;
|
||||
for (let i=0;i<str.length;i++){
|
||||
hash = ((hash<<5)-hash)+str.charCodeAt(i);
|
||||
hash |= 0;
|
||||
}
|
||||
return Math.abs(hash);
|
||||
}
|
||||
async function loadUsage(){
|
||||
try{
|
||||
const data = await fetchJSON('/api/usage');
|
||||
const chart = document.getElementById('usage-chart');
|
||||
const usage = data.usage_counts || {};
|
||||
|
||||
let html = '';
|
||||
for (const [endpoint, models] of Object.entries(usage)){
|
||||
const total = Object.values(models).reduce((a,b)=>a+b,0);
|
||||
html += `<div class="endpoint-bar"><div class="endpoint-label">${endpoint}</div><div class="bar">`;
|
||||
for (const [model, count] of Object.entries(models)){
|
||||
const pct = total ? (count/total)*100 : 0;
|
||||
const width = pct.toFixed(2);
|
||||
const color = getColor(model);
|
||||
html += `<div class="segment" style="width:${width}%;background:${color};">${model} (${count})</div>`;
|
||||
}
|
||||
html += `</div></div>`;
|
||||
}
|
||||
chart.innerHTML = html;
|
||||
}catch(e){
|
||||
console.error('Failed to load usage counts', e);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Init ---------- */
|
||||
window.addEventListener('load', ()=>{
|
||||
loadEndpoints();
|
||||
loadTags();
|
||||
loadPS();
|
||||
loadUsage();
|
||||
setInterval(loadPS, 60_000);
|
||||
setInterval(loadUsage, 1_000);
|
||||
});
|
||||
setInterval(() => {
|
||||
loadTags();
|
||||
}, 600_000);
|
||||
setInterval(() => {
|
||||
loadPS();
|
||||
}, 60_000);
|
||||
</script>
|
||||
|
||||
<div id="show-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-btn">×</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue