| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>MEPLIFEOS | FUGTH AI Gateway</title> |
| <style> |
| :root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif} |
| *{box-sizing:border-box}body{margin:0;background:#071525;color:#e8f2fc} |
| main{max-width:850px;margin:0 auto;padding:36px 18px} |
| h1{font-size:clamp(26px,5vw,38px);margin:6px 0}p{color:#a9bfd0;line-height:1.5} |
| .top{display:flex;align-items:center;gap:10px;color:#6ee7d7;font-weight:650;letter-spacing:.06em} |
| .panel{background:#102237;border:1px solid #294358;border-radius:18px;padding:22px;margin:22px 0} |
| .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:650px){.grid{grid-template-columns:1fr}} |
| label{display:block;font-size:13px;font-weight:650;color:#c0d3e4;margin-bottom:7px} |
| input,textarea,select{width:100%;padding:12px;border:1px solid #3a556c;border-radius:9px;background:#08192a;color:white;font:inherit} |
| textarea{resize:vertical;min-height:85px}button{background:#33d3bf;color:#032327;border:0;border-radius:10px;padding:12px 20px;font:inherit;font-weight:750;cursor:pointer} |
| button:disabled{opacity:.6;cursor:wait}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#07192a;border:1px solid #334b60;border-radius:10px;padding:15px;min-height:70px;line-height:1.5} |
| small{color:#97b3c7}a{color:#66e0cf}.status{font-size:14px;margin:12px 0} |
| </style> |
| </head> |
| <body><main> |
| <div class="top">● FUGTH MANAGEMENT OS / AI INFRASTRUCTURE</div> |
| <h1>MEPLIFEOS AI Gateway</h1> |
| <p>Two Qwen GGUF models, CPU inference, shared FIFO queue, and request-specific reference context. This is a developer test console, not a public customer chat.</p> |
| <div class="panel"> |
| <h2>Service health</h2> |
| <div class="status" id="health">Checking service…</div> |
| <button type="button" id="refresh">Refresh status</button> |
| </div> |
| <div class="panel"> |
| <h2>Test generation</h2> |
| <p>Enter your Space secret <code>FUGTH_API_KEY</code> locally to test. The page does not store it.</p> |
| <div class="grid"> |
| <div><label for="key">API key</label><input id="key" type="password" autocomplete="off" placeholder="Secret from Space settings" /></div> |
| <div><label for="model">Model</label><select id="model"><option value="1.5b">Qwen2.5 1.5B (quality)</option><option value="0.5b">Qwen2.5 0.5B (faster)</option></select></div> |
| <div><label for="business">Business name</label><input id="business" value="Example Hair Studio" maxlength="120" /></div> |
| <div><label for="message">Customer question</label><input id="message" value="What time do you close on Saturday?" maxlength="1200" /></div> |
| </div> |
| <p><label for="context">Reference information (simulates retrieved RAG context)</label> |
| <textarea id="context" maxlength="4000">Opening hours: Monday-Friday 9AM-6PM. Saturday 10AM-3PM. Sunday closed. Walk-ins accepted.</textarea></p> |
| <button type="button" id="send">Send test request</button> |
| <p><small>Generation may be slow on 2-vCPU free hardware. Requests wait in a bounded queue. For real customers, your FUGTH backend must hold the secret and handle authentication/rate limits.</small></p> |
| <h3>Response</h3><pre id="reply">No request yet.</pre> |
| </div> |
| <p><a href="/docs">API documentation</a> · <a href="https://huggingface.co/spaces/fugthchat/MEPLIFEOS">Space repository</a></p> |
| </main><script> |
| const el = id => document.getElementById(id); |
| async function updateHealth(){ |
| try { |
| const r=await fetch('/health',{cache:'no-store'}); |
| const j=await r.json(); |
| el('health').textContent=`${j.ready?'READY':'NOT READY'} · Models: ${j.loaded_models.join(', ')||'none'} · In progress: ${j.active_model||'none'} · Waiting: ${j.queued}/${j.max_queue_size} · Key configured: ${j.api_key_configured?'yes':'no'}`; |
| }catch(e){el('health').textContent=`Unable to reach service: ${e.message}`;} |
| } |
| el('refresh').addEventListener('click',updateHealth); |
| el('send').addEventListener('click', async ()=>{ |
| const button=el('send');button.disabled=true;el('reply').textContent='Sending…'; |
| try { |
| const r=await fetch('/v1/chat',{ |
| method:'POST', |
| headers:{'Content-Type':'application/json','X-API-Key':el('key').value}, |
| body:JSON.stringify({model:el('model').value,business_name:el('business').value,message:el('message').value,context:el('context').value,max_tokens:128}) |
| }); |
| const j=await r.json(); |
| el('reply').textContent=r.ok?`${j.answer}\n\nModel: ${j.model} · Queue: ${j.queue_ms}ms · Inference: ${j.inference_ms}ms`:JSON.stringify(j,null,2); |
| }catch(e){el('reply').textContent=`Connection error: ${e.message}`;} |
| finally{button.disabled=false;updateHealth();} |
| }); |
| updateHealth(); |
| </script></body></html> |
|
|
