| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>My GGUF API</title> |
| <style> |
| *{box-sizing:border-box} |
| body{margin:0;background:#0b1020;color:#eef2ff;font-family:Inter,system-ui,Arial} |
| main{max-width:1000px;margin:0 auto;padding:28px} |
| .card{background:#11182b;border:1px solid #273250;border-radius:18px;padding:20px;margin-bottom:16px} |
| h1{margin:0 0 8px;font-size:28px} |
| .muted{color:#9aa7c7} |
| .row{display:flex;gap:10px;flex-wrap:wrap} |
| button,input,textarea{border-radius:10px;border:1px solid #33415f;background:#0d1425;color:#fff;padding:11px} |
| button{cursor:pointer;background:#243b72} |
| button:disabled{opacity:.5;cursor:not-allowed} |
| input{flex:1;min-width:280px} |
| textarea{width:100%;min-height:150px;resize:vertical} |
| #output{white-space:pre-wrap;min-height:220px;background:#080d18;border-radius:12px;padding:16px;border:1px solid #202b45} |
| .badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#1b2948;color:#b9caff;font-size:12px} |
| label{display:block;margin:12px 0 6px;color:#b9c5df} |
| .progress{height:8px;background:#202b45;border-radius:99px;overflow:hidden;margin-top:12px} |
| #bar{height:100%;width:0;background:#648cff;transition:width .2s} |
| code{color:#a9c7ff} |
| </style> |
| </head> |
| <body> |
| <main> |
| <div class="card"> |
| <h1>My GGUF API</h1> |
| <div class="muted">Static Hugging Face Space • inference runs in your browser</div> |
| <p><span class="badge" id="status">not loaded</span></p> |
| <div class="row"> |
| <button id="load">Load model</button> |
| <label style="margin:0"><input id="file" type="file" accept=".gguf"></label> |
| </div> |
| <div class="progress"><div id="bar"></div></div> |
| <p id="info" class="muted">The default model is downloaded only to your browser.</p> |
| </div> |
|
|
| <div class="card"> |
| <label>Prompt</label> |
| <textarea id="prompt">Write a small Python function that calculates the Fibonacci sequence.</textarea> |
| <div class="row"> |
| <input id="temp" type="number" min="0" max="2" step="0.05" value="0.7" placeholder="temperature"> |
| <input id="max" type="number" min="1" max="4096" step="1" value="256" placeholder="max tokens"> |
| <button id="send" disabled>Generate</button> |
| <button id="stop" disabled>Stop</button> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <h3>Output</h3> |
| <div id="output"></div> |
| </div> |
|
|
| <div class="card"> |
| <h3>Local API</h3> |
| <p class="muted">When this page is open, your app can call:</p> |
| <pre><code>await window.MyGGUFAPI.chat("your prompt", { |
| temperature: 0.7, |
| maxTokens: 256 |
| });</code></pre> |
| <p class="muted">A Static Space cannot expose this JavaScript function as a server-side HTTP endpoint.</p> |
| </div> |
| </main> |
| <script src="config.js"></script> |
| <script type="module" src="app.js"></script> |
| </body> |
| </html> |
|
|
