80d3434d61* Studio: require signed capability tokens for /p preview links The public /p preview routes added in #6486 run model load and chat generation as the admin user with no authentication. The only gate is the preview ref, a deterministic outputs-root path (run or run/checkpoint) that is guessable rather than secret. On a network-reachable Studio (--secure tunnel or -H 0.0.0.0), an unauthenticated caller who guesses a ref can consume GPU and probe a private fine-tuned checkpoint. Make the share link an unguessable, revocable capability: - Sign the canonical ref with a dedicated server-side secret (HMAC-SHA256, stored in app_secrets, independent of the JWT/login secret). - Require a valid token on every /p chat, models, and page request before resolving a checkpoint or loading a model; missing or invalid tokens get a generic 404 so the surface never confirms a ref exists. - Accept the token via ?k= (browser link and preview page) or Authorization: Bearer (OpenAI-compatible clients). - Rotate the secret to revoke every outstanding link (POST /api/settings/preview-links/rotate). - Clamp preview generation (max_tokens/max_completion_tokens <= 1024, n = 1) and set Referrer-Policy: no-referrer on the page so the token is not leaked via Referer. Training history hands the authenticated owner the signed token, and the copy-link button builds /p/{ref}?k={sig}. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio: honor a lower caller token limit in the preview clamp Codex review: when only the legacy max_tokens was sent, the clamp left max_completion_tokens at the 1024 default, and _effective_max_tokens prefers max_completion_tokens, so a request like max_tokens=16 could still generate up to 1024 tokens. Derive one effective limit (max_completion_tokens wins, else the legacy max_tokens) and pin both fields to it so a caller's lower limit is kept. * Studio: add preview kill switch, rate limit, and revoke-links UI Follow-ups to the /p preview capability work: - Public-sharing kill switch: a persisted setting (default on) gates the public /p surface. When off, every preview request 404s even with a valid token, and the owner UI stops offering share links. GET/PUT /api/settings/preview-sharing; enforced in _verify_or_404. - Per-IP rate limit on the preview chat route: a coarse in-process sliding-window limiter (20 req/min/IP) returns 429 + Retry-After before the GPU lock is taken. Client IP honors X-Forwarded-For only when UNSLOTH_STUDIO_TRUST_FORWARDED is set, matching the login limiter's trust model. - Settings UI: a "Preview sharing" section with the public-sharing toggle and a "Revoke all preview links" button (confirm dialog) that rotates the secret. Tests cover the kill switch (404 when off), the 429 path, the sliding window, client-IP trust behavior, and the setting default. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio: fix preview-fields sharing arg and refresh sigs after revoke Codex review: - P1: get_training_run_detail and update_training_run called _preview_fields with only output_dir after it gained a required sharing_on parameter, raising a 500 TypeError once get_run succeeded. Pass get_preview_sharing_enabled() at both sites; add a detail-endpoint regression test. - P2: after rotating the preview secret from settings, the history grid still held stale preview_sig values, so a freshly copied link would 404. Emit emitTrainingRunsChanged() after a successful revoke so the grid refetches freshly signed refs. * Studio: harden preview sharing controls (Codex review) - Fail closed: a read failure on the preview-sharing kill switch now returns False instead of defaulting to enabled, so an unavailable settings DB can't reopen the public surface. A missing key still defaults to enabled. - Per-IP rate limit behind the managed Cloudflare tunnel: client_ip now honors CF-Connecting-IP when the socket peer is loopback, so tunneled visitors are keyed by their real IP instead of collapsing onto the local cloudflared peer. - GET /p no longer mints key/share_url when sharing is disabled; it returns sharing_enabled=false so clients don't distribute links that 404. - Settings UI: toggling public sharing emits the training-runs-changed event so the history grid shows/hides Copy preview link without a manual refresh. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio: harden preview rate limiter and IP keying (Opus review) From a two-agent review of the PR: - Rate limiter no longer evicts an active bucket when the table is full: a flood of distinct keys could otherwise cycle out a throttled bucket and reset its counter. Evict only aged-out buckets; if the table is full of live clients, fail closed (deny the new key) instead. - client_ip keys on the rightmost (proxy-appended) X-Forwarded-For hop when the trust env is set; the leftmost is client-spoofable. Documented the append/overwrite-proxy assumption. - _verify_or_404 checks the capability token before the kill-switch DB read, so unauthenticated /p spam can't be used as an unbounded settings-DB sink and the response is identical regardless of the sharing on/off state. Tests: nested run/checkpoint happy path + wrong-ref rejection, the eviction fail-closed behavior, and route-level coverage for the rotate / preview-sharing settings endpoints. --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
403 lines
11 KiB
HTML
403 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>__TITLE__ - Unsloth</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: "Hellix";
|
|
src: url("/p/_assets/fonts/Hellix-Medium.woff") format("woff");
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Hellix";
|
|
src: url("/p/_assets/fonts/Hellix-SemiBold.woff2") format("woff2");
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
}
|
|
:root {
|
|
color-scheme: light dark;
|
|
--bg: #fefefd;
|
|
--fg: #0d0d0d;
|
|
--muted: #858279;
|
|
--border: #ececec;
|
|
--user-bubble: #f5f5f5;
|
|
--primary: #17b88b;
|
|
--composer-bg: #ffffff;
|
|
--composer-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #1a1b1e;
|
|
--fg: #ececee;
|
|
--muted: #96979b;
|
|
--border: #3a3d42;
|
|
--user-bubble: #2d2e32;
|
|
--composer-bg: #2d2e32;
|
|
--composer-shadow: none;
|
|
}
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
font:
|
|
15.5px/1.6 "Inter",
|
|
"Inter Variable",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
system-ui,
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.heading {
|
|
font-family: "Hellix", "Space Grotesk", system-ui, sans-serif;
|
|
}
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 14px 20px;
|
|
}
|
|
header img {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
}
|
|
.brand {
|
|
font-family: "Hellix", "Space Grotesk", system-ui, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
}
|
|
.model {
|
|
margin-left: auto;
|
|
max-width: 55%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12.5px;
|
|
color: var(--muted);
|
|
}
|
|
#log {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 8px 16px 24px;
|
|
}
|
|
#thread {
|
|
width: 100%;
|
|
max-width: 46.5rem;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.welcome {
|
|
margin: auto;
|
|
text-align: center;
|
|
padding: 0 16px;
|
|
animation: fade 0.25s ease-out;
|
|
}
|
|
.welcome h1 {
|
|
margin: 0;
|
|
font-weight: 500;
|
|
font-size: 30px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.welcome p {
|
|
margin: 0.55rem 0 0;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
.msg {
|
|
font-size: 15.5px;
|
|
font-weight: 450;
|
|
letter-spacing: 0.01em;
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
animation: fade 0.15s ease-out;
|
|
}
|
|
.user {
|
|
align-self: flex-end;
|
|
max-width: 80%;
|
|
margin-top: 24px;
|
|
padding: 10px 16px;
|
|
border-radius: 24px;
|
|
background: var(--user-bubble);
|
|
}
|
|
.assistant {
|
|
align-self: stretch;
|
|
margin-top: 16px;
|
|
line-height: 1.75;
|
|
}
|
|
.dots {
|
|
display: inline-flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
height: 1.6em;
|
|
}
|
|
.dots i {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--muted);
|
|
animation: blink 1.2s infinite;
|
|
}
|
|
.dots i:nth-child(2) {
|
|
animation-delay: 0.18s;
|
|
}
|
|
.dots i:nth-child(3) {
|
|
animation-delay: 0.36s;
|
|
}
|
|
.composer-wrap {
|
|
padding: 6px 16px 16px;
|
|
}
|
|
form {
|
|
width: 100%;
|
|
max-width: 46.5rem;
|
|
margin: 0 auto;
|
|
}
|
|
.composer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
padding: 8px 8px 8px 18px;
|
|
border-radius: 28px;
|
|
background: var(--composer-bg);
|
|
box-shadow: var(--composer-shadow);
|
|
}
|
|
textarea {
|
|
flex: 1;
|
|
border: 0;
|
|
outline: 0;
|
|
resize: none;
|
|
background: transparent;
|
|
color: var(--fg);
|
|
font: inherit;
|
|
line-height: 1.5;
|
|
max-height: 200px;
|
|
padding: 8px 0;
|
|
}
|
|
textarea::placeholder {
|
|
color: var(--muted);
|
|
}
|
|
.send {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
.send:disabled {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
}
|
|
.foot {
|
|
margin: 9px auto 0;
|
|
max-width: 46.5rem;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
@keyframes blink {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
opacity: 0.25;
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(2px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img src="/p/_assets/circle-logo-small.png" alt="" /><span class="brand"
|
|
>Unsloth</span
|
|
><span class="model">__TITLE__</span>
|
|
</header>
|
|
<main id="log">
|
|
<div id="welcome" class="welcome">
|
|
<h1 class="heading">Chat with your model</h1>
|
|
<p>Fine-tuned with Unsloth</p>
|
|
</div>
|
|
<div id="thread"></div>
|
|
</main>
|
|
<div class="composer-wrap">
|
|
<form id="f">
|
|
<div class="composer">
|
|
<textarea
|
|
id="i"
|
|
rows="1"
|
|
autocomplete="off"
|
|
placeholder="Message this model..."
|
|
></textarea>
|
|
<button id="b" class="send" aria-label="Send">
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M12 19V5" />
|
|
<path d="M5 12l7-7 7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="foot">Served by Unsloth Studio</div>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
const base = location.pathname.replace(/\/+$/, "");
|
|
// The capability token rides in ?k=; location.pathname drops it, so carry it
|
|
// onto the chat request explicitly. Not stored or logged.
|
|
const k = new URLSearchParams(location.search).get("k");
|
|
const chatUrl =
|
|
base + "/v1/chat/completions" + (k ? "?k=" + encodeURIComponent(k) : "");
|
|
const log = document.getElementById("log"),
|
|
thread = document.getElementById("thread"),
|
|
welcome = document.getElementById("welcome");
|
|
const form = document.getElementById("f"),
|
|
input = document.getElementById("i"),
|
|
btn = document.getElementById("b");
|
|
const msgs = [];
|
|
const down = () => {
|
|
log.scrollTop = log.scrollHeight;
|
|
};
|
|
function autosize() {
|
|
input.style.height = "auto";
|
|
input.style.height = Math.min(input.scrollHeight, 200) + "px";
|
|
}
|
|
input.addEventListener("input", autosize);
|
|
input.addEventListener("keydown", (e) => {
|
|
if (e.isComposing || e.keyCode === 229) return;
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
// send() (not form.requestSubmit, unsupported on Safari < 16) guards the btn.
|
|
send();
|
|
}
|
|
});
|
|
function add(role) {
|
|
const d = document.createElement("div");
|
|
d.className = "msg " + role;
|
|
thread.appendChild(d);
|
|
down();
|
|
return d;
|
|
}
|
|
async function send() {
|
|
// One path for button + Enter; ignore while a request is in flight.
|
|
if (btn.disabled) return;
|
|
const content = input.value.trim();
|
|
if (!content) return;
|
|
if (welcome) welcome.style.display = "none";
|
|
input.value = "";
|
|
autosize();
|
|
btn.disabled = true;
|
|
msgs.push({ role: "user", content });
|
|
add("user").textContent = content;
|
|
const out = add("assistant");
|
|
out.innerHTML = '<span class="dots"><i></i><i></i><i></i></span>';
|
|
let acc = "";
|
|
try {
|
|
const r = await fetch(chatUrl, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
model: "preview",
|
|
messages: msgs,
|
|
stream: true,
|
|
}),
|
|
});
|
|
if (!r.ok) {
|
|
out.textContent =
|
|
"Error " + r.status + ": " + (await r.text()).slice(0, 300);
|
|
msgs.pop();
|
|
input.value = content; // restore the prompt so the user can retry
|
|
autosize();
|
|
btn.disabled = false;
|
|
return;
|
|
}
|
|
const reader = r.body.getReader(),
|
|
dec = new TextDecoder();
|
|
let buf = "";
|
|
for (;;) {
|
|
const { value, done } = await reader.read();
|
|
if (done) break;
|
|
buf += dec.decode(value, { stream: true });
|
|
let i;
|
|
while ((i = buf.indexOf("\n")) >= 0) {
|
|
const line = buf.slice(0, i).trim();
|
|
buf = buf.slice(i + 1);
|
|
if (!line.startsWith("data:")) continue;
|
|
const data = line.slice(5).trim();
|
|
if (data === "[DONE]") continue;
|
|
try {
|
|
const j = JSON.parse(data);
|
|
const d =
|
|
j.choices &&
|
|
j.choices[0] &&
|
|
j.choices[0].delta &&
|
|
j.choices[0].delta.content;
|
|
if (d) {
|
|
acc += d;
|
|
out.textContent = acc;
|
|
down();
|
|
}
|
|
} catch (_) {}
|
|
}
|
|
}
|
|
if (!acc) out.textContent = "";
|
|
msgs.push({ role: "assistant", content: acc });
|
|
} catch (err) {
|
|
// Keep any streamed text, flag the break, restore the prompt for retry.
|
|
out.textContent = acc ? acc + "\n\n[connection lost]" : "Network error, please retry.";
|
|
msgs.pop();
|
|
input.value = content;
|
|
autosize();
|
|
}
|
|
btn.disabled = false;
|
|
input.focus();
|
|
}
|
|
form.addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
send();
|
|
});
|
|
autosize();
|
|
input.focus();
|
|
</script>
|
|
</body>
|
|
</html>
|