Spaces:

RIsknox
/

LLM_Monitor

Runtime error

File size: 27,287 Bytes

02422e3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Risknox | GenAI Shield — Sidecar</title>
    <meta name="description" content="GenAI Shield sidecar proxy with real-time streaming and sentence-level threat detection">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg:        #0a0a0f;
            --surface:   #12121a;
            --surface2:  #1a1a26;
            --border:    #2a2a3d;
            --accent:    #6c63ff;
            --accent2:   #00d4aa;
            --danger:    #ff4757;
            --warn:      #ffa502;
            --text:      #e8e8f0;
            --muted:     #6b6b8a;
            --mono:      'JetBrains Mono', monospace;
            --sans:      'Inter', system-ui, sans-serif;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: var(--sans);
            background: var(--bg);
            color: var(--text);
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* ── Header ───────────────────────────────────────────────── */
        .header {
            padding: 0.875rem 1.5rem;
            border-bottom: 1px solid var(--border);
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        .header-brand { display: flex; align-items: center; gap: 0.75rem; }
        .shield-icon {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem;
        }
        .header h1 { font-size: 1rem; font-weight: 700; }
        .header-sub {
            font-family: var(--mono);
            font-size: 0.6rem;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .header-actions { display: flex; align-items: center; gap: 0.75rem; }
        .mode-badge {
            font-family: var(--mono);
            font-size: 0.6rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 3px;
            background: rgba(108, 99, 255, 0.15);
            border: 1px solid rgba(108, 99, 255, 0.4);
            color: var(--accent);
            text-transform: uppercase;
        }
        .status-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--accent2);
            box-shadow: 0 0 6px var(--accent2);
            animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

        /* ── Chat area ────────────────────────────────────────────── */
        .chat-area {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .chat-area::-webkit-scrollbar { width: 4px; }
        .chat-area::-webkit-scrollbar-track { background: transparent; }
        .chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        /* ── Messages ─────────────────────────────────────────────── */
        .msg { display: flex; gap: 0.75rem; max-width: 760px; width: 100%; }
        .msg.user { align-self: flex-end; flex-direction: row-reverse; }
        .msg.assistant { align-self: flex-start; }

        .avatar {
            width: 32px; height: 32px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 0.65rem;
            flex-shrink: 0;
            font-family: var(--mono);
        }
        .msg.user .avatar  { background: var(--accent);  color: #fff; }
        .msg.assistant .avatar { background: var(--surface2); color: var(--accent2); border: 1px solid var(--border); }

        .bubble {
            padding: 0.875rem 1.125rem;
            border-radius: 12px;
            line-height: 1.65;
            font-size: 0.9375rem;
            max-width: calc(100% - 44px);
        }
        .msg.user .bubble {
            background: var(--accent);
            color: #fff;
            border-bottom-right-radius: 3px;
        }
        .msg.assistant .bubble {
            background: var(--surface);
            border: 1px solid var(--border);
            border-bottom-left-radius: 3px;
            color: var(--text);
            position: relative;
        }

        /* ── Streaming cursor ─────────────────────────────────────── */
        .stream-cursor {
            display: inline-block;
            width: 2px;
            height: 1em;
            background: var(--accent2);
            margin-left: 2px;
            vertical-align: text-bottom;
            border-radius: 1px;
            animation: blink 0.8s step-end infinite;
        }
        @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

        /* ── Shield monitoring bar ────────────────────────────────── */
        .shield-bar {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.625rem;
            font-family: var(--mono);
            font-size: 0.6rem;
            color: var(--muted);
        }
        .shield-bar .spinner {
            width: 10px; height: 10px;
            border: 1.5px solid var(--accent2);
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── Threat meta row ──────────────────────────────────────── */
        .msg-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
            flex-wrap: wrap;
        }
        .threat-badge {
            font-family: var(--mono);
            font-size: 0.6rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 3px;
            text-transform: uppercase;
        }
        .threat-clean    { background: rgba(0,212,170,0.12); color: var(--accent2); border: 1px solid rgba(0,212,170,0.3); }
        .threat-medium   { background: rgba(255,165,2,0.12);  color: var(--warn);   border: 1px solid rgba(255,165,2,0.3); }
        .threat-high     { background: rgba(255,71,87,0.12);  color: var(--danger); border: 1px solid rgba(255,71,87,0.3); }
        .meta-chip {
            font-family: var(--mono);
            font-size: 0.57rem;
            color: var(--muted);
        }
        .flag-chip {
            font-family: var(--mono);
            font-size: 0.57rem;
            padding: 1px 5px;
            border: 1px solid rgba(255,71,87,0.4);
            color: var(--danger);
            border-radius: 2px;
        }

        /* ── Block signal overlay ─────────────────────────────────── */
        .block-signal-overlay {
            margin-top: 0.625rem;
            padding: 0.75rem 1rem;
            background: rgba(255,71,87,0.08);
            border: 1px solid rgba(255,71,87,0.4);
            border-radius: 8px;
            font-size: 0.8rem;
        }
        .block-signal-overlay strong { color: var(--danger); font-family: var(--mono); font-size: 0.7rem; }

        /* Tainted text fade */
        .tainted { opacity: 0.3; text-decoration: line-through; color: var(--danger); }

        /* ── Blocked message ──────────────────────────────────────── */
        .blocked-card {
            max-width: 760px;
            padding: 1rem 1.25rem;
            background: rgba(255,71,87,0.07);
            border: 1px solid rgba(255,71,87,0.4);
            border-radius: 12px;
            align-self: flex-end;
        }
        .blocked-card-title {
            font-weight: 700;
            font-size: 0.875rem;
            color: var(--danger);
            margin-bottom: 0.375rem;
            display: flex; align-items: center; gap: 0.5rem;
        }
        .blocked-card-reason {
            font-family: var(--mono);
            font-size: 0.7rem;
            color: var(--muted);
            margin-bottom: 0.5rem;
        }

        /* ── Input area ───────────────────────────────────────────── */
        .input-area {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            background: var(--surface);
            flex-shrink: 0;
        }
        .input-row {
            max-width: 760px;
            margin: 0 auto;
            display: flex;
            gap: 0.75rem;
            align-items: flex-end;
        }
        .input-wrap {
            flex: 1;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.75rem 1rem;
            transition: border-color 0.2s;
        }
        .input-wrap:focus-within { border-color: var(--accent); }
        textarea {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            font-family: var(--sans);
            font-size: 0.9375rem;
            color: var(--text);
            resize: none;
            min-height: 24px;
            max-height: 160px;
            line-height: 1.5;
        }
        textarea::placeholder { color: var(--muted); }
        .send-btn {
            width: 44px; height: 44px;
            border-radius: 10px;
            border: none;
            background: var(--accent);
            color: #fff;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s, transform 0.1s;
            flex-shrink: 0;
        }
        .send-btn:hover  { background: #7c73ff; }
        .send-btn:active { transform: scale(0.94); }
        .send-btn:disabled { background: var(--border); cursor: not-allowed; }

        /* ── Latency bar (below input) ────────────────────────────── */
        .latency-row {
            max-width: 760px;
            margin: 0.5rem auto 0;
            display: flex;
            gap: 1rem;
            font-family: var(--mono);
            font-size: 0.58rem;
            color: var(--muted);
        }
        .latency-seg { display: flex; align-items: center; gap: 0.3rem; }
        .latency-dot { width: 6px; height: 6px; border-radius: 50%; }
        .dot-guard   { background: var(--accent); }
        .dot-model   { background: var(--accent2); }
        .dot-monitor { background: var(--warn); }

        /* ── Welcome state ────────────────────────────────────────── */
        .welcome {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 1rem;
            color: var(--muted);
            padding: 2rem;
        }
        .welcome-icon { font-size: 3rem; }
        .welcome h2   { font-size: 1.25rem; color: var(--text); }
        .welcome p    { font-size: 0.875rem; max-width: 400px; line-height: 1.6; }
        .pill-row     { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
        .pill {
            font-family: var(--mono);
            font-size: 0.65rem;
            padding: 4px 10px;
            border-radius: 99px;
            background: var(--surface2);
            border: 1px solid var(--border);
        }
    </style>
</head>
<body>

<header class="header">
    <div class="header-brand">
        <div class="shield-icon">🛡️</div>
        <div>
            <h1>GenAI Shield <span style="color:var(--accent)">Sidecar</span></h1>
            <div class="header-sub">Parallel Guard · Sentence Streaming · Background Monitor</div>
        </div>
    </div>
    <div class="header-actions">
        <div class="mode-badge">Sidecar v2</div>
        <div class="status-dot" id="status-dot" title="Guard ready"></div>
    </div>
</header>

<div class="chat-area" id="chat-area">
    <div class="welcome" id="welcome-screen">
        <div class="welcome-icon">🛡️</div>
        <h2>Sidecar Proxy Active</h2>
        <p>Your prompt is guarded <em>before</em> the LLM sees it, and every sentence of the response is monitored <em>as it streams</em> — with zero added latency on the happy path.</p>
        <div class="pill-row">
            <span class="pill">⚡ Parallel guard + LLM</span>
            <span class="pill">📡 Sentence-level SSE</span>
            <span class="pill">🔍 Background monitor</span>
            <span class="pill">🚫 Mid-stream block signal</span>
        </div>
    </div>
</div>

<div class="input-area">
    <div class="input-row">
        <div class="input-wrap">
            <textarea
                id="prompt-input"
                rows="1"
                placeholder="Enter a prompt — the shield and the LLM start together..."
                onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMessage();}"
                oninput="autoResize(this)"
            ></textarea>
        </div>
        <button class="send-btn" id="send-btn" onclick="sendMessage()" title="Send">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
            </svg>
        </button>
    </div>
    <div class="latency-row" id="latency-row" style="display:none">
        <span class="latency-seg"><span class="latency-dot dot-guard"></span><span id="lat-guard">Guard: —</span></span>
        <span class="latency-seg"><span class="latency-dot dot-model"></span><span id="lat-model">Stream: —</span></span>
        <span class="latency-seg"><span class="latency-dot dot-monitor"></span><span id="lat-monitor">Monitor: background</span></span>
    </div>
</div>

<script>
// ── Config ────────────────────────────────────────────────────────────────────
const SIDECAR_URL = '/v1/chat';   // proxied through Flask or direct to :5050

// ── Helpers ───────────────────────────────────────────────────────────────────
const chatArea  = document.getElementById('chat-area');
const input     = document.getElementById('prompt-input');
const sendBtn   = document.getElementById('send-btn');
const latRow    = document.getElementById('latency-row');

function esc(s) {
    return String(s)
        .replace(/&/g,'&amp;')
        .replace(/</g,'&lt;')
        .replace(/>/g,'&gt;')
        .replace(/\n/g,'<br>');
}

function autoResize(el) {
    el.style.height = 'auto';
    el.style.height = Math.min(el.scrollHeight, 160) + 'px';
}

function scrollBottom() {
    chatArea.scrollTop = chatArea.scrollHeight;
}

function hideWelcome() {
    const w = document.getElementById('welcome-screen');
    if (w) w.remove();
}

function setLatency(guard, total) {
    latRow.style.display = 'flex';
    document.getElementById('lat-guard').textContent = `Guard: ${guard || '—'}ms`;
    document.getElementById('lat-model').textContent = `Total: ${total || '—'}ms`;
}

// ── Append user bubble ─────────────────────────────────────────────────────────
function appendUser(text) {
    const div = document.createElement('div');
    div.className = 'msg user';
    div.innerHTML = `
        <div class="avatar">U</div>
        <div class="bubble">${esc(text)}</div>
    `;
    chatArea.appendChild(div);
    scrollBottom();
}

// ── Append assistant streaming bubble ─────────────────────────────────────────
function createAssistantBubble() {
    const div = document.createElement('div');
    div.className = 'msg assistant';

    const bubbleId  = 'bubble-' + Date.now();
    const metaId    = 'meta-'   + Date.now();
    const shieldId  = 'shield-' + Date.now();

    div.innerHTML = `
        <div class="avatar">AI</div>
        <div>
            <div class="bubble" id="${bubbleId}">
                <span class="stream-cursor"></span>
            </div>
            <div class="shield-bar" id="${shieldId}">
                <div class="spinner"></div>
                <span>Shield monitoring output…</span>
            </div>
            <div class="msg-meta" id="${metaId}" style="display:none"></div>
        </div>
    `;
    chatArea.appendChild(div);
    scrollBottom();

    return {
        getBubble:  () => document.getElementById(bubbleId),
        getMeta:    () => document.getElementById(metaId),
        getShield:  () => document.getElementById(shieldId),
        bubbleId,
        metaId,
        shieldId,

        // Sentence tracking for block signals
        sentences: {},   // sentence_id → { start, end } char positions not tracked easily,
                         // so we track spans instead
        fullText: '',
    };
}

// ── Block signal: taint sentences from sentence_id onward ─────────────────────
function applyBlockSignal(bubbleEl, bubbleState, signalData) {
    const sid = signalData.sentence_id;

    // Mark all sentence spans from sid onward as tainted
    const spans = bubbleEl.querySelectorAll(`[data-sid]`);
    spans.forEach(span => {
        const spanSid = parseInt(span.dataset.sid, 10);
        if (spanSid >= sid) span.classList.add('tainted');
    });

    // Append block signal banner
    const overlay = document.createElement('div');
    overlay.className = 'block-signal-overlay';
    overlay.innerHTML = `
        <strong>🚫 OUTPUT BLOCKED AT SENTENCE ${sid}</strong>
        <div style="margin-top:4px;font-size:0.75rem;color:var(--muted)">${esc(signalData.reason)}</div>
        <div style="margin-top:6px">${(signalData.flags||[]).map(f => `<span class="flag-chip">${f}</span>`).join(' ')}</div>
    `;
    bubbleEl.parentElement.insertAdjacentElement('beforeend', overlay);
}

// ── Render done meta ──────────────────────────────────────────────────────────
function renderDone(metaEl, shieldEl, doneData) {
    // Hide shield spinner
    shieldEl.style.display = 'none';

    const score = doneData.threat_score || 0;
    const cls   = score >= 60 ? 'threat-high' : score >= 30 ? 'threat-medium' : 'threat-clean';
    const label = score >= 60 ? 'HIGH RISK'   : score >= 30 ? 'SUSPICIOUS'    : 'CLEAN';

    let html = `<span class="threat-badge ${cls}">${label} · ${score}</span>`;
    html    += `<span class="meta-chip">${doneData.latency_ms || 0}ms total · ${doneData.sentences || 0} sentences</span>`;
    (doneData.flags || []).forEach(f => { html += `<span class="flag-chip">${f}</span>`; });

    metaEl.innerHTML = html;
    metaEl.style.display = 'flex';
}

// ── Append blocked card ───────────────────────────────────────────────────────
function appendBlocked(data) {
    const div = document.createElement('div');
    div.className = 'blocked-card';
    div.innerHTML = `
        <div class="blocked-card-title">🚫 Input Rejected by Prompt Guard</div>
        <div class="blocked-card-reason">${esc(data.reason || 'GUARD_BLOCKED')}</div>
        <div style="margin-top:4px">
            ${(data.flags||[]).map(f => `<span class="flag-chip">${f}</span>`).join(' ')}
            <span class="meta-chip" style="margin-left:8px">PG score: ${(data.pg_score||0).toFixed(3)} · Guard: ${data.guard_ms||0}ms</span>
        </div>
    `;
    chatArea.appendChild(div);
    scrollBottom();
}

// ── Main send logic ───────────────────────────────────────────────────────────
async function sendMessage() {
    const prompt = input.value.trim();
    if (!prompt) return;

    hideWelcome();
    input.value = '';
    input.style.height = 'auto';
    sendBtn.disabled = true;

    appendUser(prompt);

    const state  = createAssistantBubble();
    const bubble = state.getBubble();
    const meta   = state.getMeta();
    const shield = state.getShield();

    const tStart = performance.now();
    let currentSentenceId = 0;
    let blocked = false;
    let guardMs = 0;

    try {
        const res = await fetch(SIDECAR_URL, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ prompt, stream: true }),
        });

        if (!res.ok) {
            const err = await res.json().catch(() => ({}));
            shield.style.display = 'none';
            bubble.innerHTML = `<span style="color:var(--danger)">Error: ${esc(err.detail || res.statusText)}</span>`;
            sendBtn.disabled = false;
            return;
        }

        const reader  = res.body.getReader();
        const decoder = new TextDecoder();
        let   rawBuf  = '';

        // Remove blinking cursor initially placed
        bubble.innerHTML = '';

        while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            rawBuf += decoder.decode(value, { stream: true });

            // Parse SSE lines
            const lines = rawBuf.split('\n');
            rawBuf = lines.pop();  // keep incomplete line

            for (const line of lines) {
                if (!line.startsWith('data: ')) continue;
                let ev;
                try { ev = JSON.parse(line.slice(6)); } catch { continue; }

                switch (ev.type) {

                    // ── Raw token chunk → append immediately ──────────────
                    case 'chunk': {
                        // We actually render sentence spans, not raw chunks
                        // Chunks are for the browser but we track sentences for guard
                        // Simple approach: append text nodes directly
                        bubble.appendChild(document.createTextNode(ev.text));
                        scrollBottom();
                        break;
                    }

                    // ── Complete sentence → wrap in span with data-sid ────
                    case 'sentence': {
                        // Replace plain text accumulated in bubble with a tracked span
                        // Strategy: clear bubble's text nodes, re-render as spans
                        currentSentenceId = ev.sentence_id;

                        // Find last text node and replace with span
                        const lastChild = bubble.lastChild;
                        if (lastChild && lastChild.nodeType === Node.TEXT_NODE) {
                            bubble.removeChild(lastChild);
                        }
                        const span = document.createElement('span');
                        span.dataset.sid = ev.sentence_id;
                        span.textContent = ev.text + ' ';
                        bubble.appendChild(span);
                        scrollBottom();
                        break;
                    }

                    // ── Guard blocked the prompt (pre-inference) ──────────
                    case 'blocked': {
                        blocked = true;
                        guardMs = ev.guard_ms || 0;

                        // Remove the assistant bubble we created
                        bubble.closest('.msg').remove();
                        appendBlocked(ev);
                        setLatency(ev.guard_ms, ev.guard_ms);
                        break;
                    }

                    // ── Mid-stream block signal (post-monitor) ────────────
                    case 'block_signal': {
                        applyBlockSignal(bubble, state, ev);
                        break;
                    }

                    // ── Stream done ───────────────────────────────────────
                    case 'done': {
                        // Remove trailing cursor if present
                        const cursor = bubble.querySelector('.stream-cursor');
                        if (cursor) cursor.remove();

                        renderDone(meta, shield, ev);
                        setLatency(null, ev.latency_ms);
                        break;
                    }
                }
            }
        }

    } catch (err) {
        shield.style.display = 'none';
        bubble.innerHTML = `<span style="color:var(--danger)">Connection error: ${esc(err.message)}</span>`;
    }

    sendBtn.disabled = false;
    input.focus();
}

// ── Health check on load ──────────────────────────────────────────────────────
(async () => {
    try {
        const r = await fetch('/v1/health');
        const d = await r.json();
        if (!d.guard_ready) {
            document.getElementById('status-dot').style.background = 'var(--warn)';
            document.getElementById('status-dot').style.boxShadow  = '0 0 6px var(--warn)';
            document.getElementById('status-dot').title = 'Guard not ready';
        }
    } catch {
        document.getElementById('status-dot').style.background = 'var(--danger)';
        document.getElementById('status-dot').title = 'Sidecar unreachable';
    }
})();
</script>
</body>
</html>