rag-verifier / index.html
landtml's picture
Add RAG Verifier demo page
1d8cd5a
Raw History Blame Contribute Delete
35.3 kB
<!doctype html>
<html lang="en" data-type="software" data-radius="sharp" data-ground="sage" data-buttons="arrow" data-motion>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>d1-2B RAG Verifier: answer checker for RAG systems</title>
<meta name="description" content="Paste a source, a question and a generated answer; a 1.9B model scores whether every claim is backed by the source.">
<meta property="og:type" content="website">
<meta property="og:title" content="d1-2B RAG Verifier: answer checker for RAG systems">
<meta property="og:description" content="Scores whether a RAG answer is backed by its source. 81.5 F1 on the RAGTruth test set.">
<meta property="og:image" content="share.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<meta name="theme-color" content="#c3d7e5">
<!-- <link rel="canonical" href="https://[the client's domain]/"> -->
<meta name="api-base" content="https://rag-verifier-proxy.vercel.app">
<meta name="site-kind" content="software">
<meta name="page-type" content="software">
<link rel="preload" href="assets/fonts/chivo-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/fonts/fonts.css">
<link rel="stylesheet" href="assets/system.css">
<link rel="stylesheet" href="assets/ui/cards.css">
<link rel="stylesheet" href="assets/motion/motion.css">
<link rel="stylesheet" href="assets/backgrounds/backgrounds.css">
<link rel="stylesheet" href="assets/layout/layout.css">
<link rel="stylesheet" href="assets/icons/icon.css">
<style>
:root {
--p-bg: #c3d7e5; --p-surface: #d0e0eb; --p-ink: #141414; --p-muted: #4a5068;
--p-accent: #0f5257; --p-accent-ink: #ffffff; --p-action: #0f5257; --p-action-ink: #ffffff;
--p-inv-bg: #141414; --p-inv-surface: #1e1f20; --p-inv-ink: #c3d7e5; --p-inv-muted: #808b94;
--p-inv-accent: #c3d7e5; --p-inv-accent-ink: #141414; --p-inv-action: #c3d7e5; --p-inv-action-ink: #141414;
--font-display: "Chivo", system-ui, sans-serif;
--font-text: "Chivo", system-ui, sans-serif;
--font-mono: "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--display-weight: 400;
--display-tracking: -0.03em;
--display-tracking-xl: -0.04em;
--ly-scale: 0.96;
}
</style>
<link rel="stylesheet" href="assets/ui/base.css">
<link rel="stylesheet" href="assets/ui/window/fragment.css">
<link rel="stylesheet" href="assets/ui/code/fragment.css">
<link rel="stylesheet" href="assets/diagrams/diagram.css">
<script>document.documentElement.classList.add('m-enter');setTimeout(()=>document.documentElement.classList.add('m-enter-done'),700)</script>
<script src="assets/backgrounds/backgrounds.js"></script>
<script>document.documentElement.classList.add('mo-js');setTimeout(()=>document.documentElement.classList.add('mo-safe'),2500)</script>
<link rel="modulepreload" href="assets/moments/moments.js">
<link rel="modulepreload" href="assets/moments/lib.js">
<link rel="modulepreload" href="assets/moments/liquid-type/moment.js">
<!-- page CSS: the app frame (sections-library.md app-frame) and what sits inside the checker and the frames -->
<style>
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
.app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
/* the checker: the examples list (left pane) and the open check (right pane) */
.ck-bar { display: flex; align-items: center; gap: var(--s-3); height: 48px; padding: 0 var(--s-5); border-bottom: 1px solid var(--u-line); font: 500 13px/1 var(--font-text); color: var(--u-ink); }
.ck-bar b { color: var(--u-ink); font-weight: 500; }
.ck-list { list-style: none; margin: 0; padding: var(--s-3); display: grid; gap: var(--s-1); }
.ck-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--u-ink); font: inherit; text-align: left; cursor: pointer; }
.ck-item:hover, .ck-item[aria-pressed="true"] { background: var(--u-fill-2); }
.ck-item__t { font: 500 15px/1.35 var(--font-text); }
.ck-item__s { grid-column: 1; font: 400 13px/1.4 var(--font-text); color: var(--u-ink); }
.ck-item__l { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 500 13px/1 var(--font-mono); color: var(--u-ink); }
.ck-form { display: grid; gap: var(--s-4); padding: var(--s-5); }
.ck-form .field { display: grid; gap: var(--s-2); }
.ck-form label { font: 500 14px/1.2 var(--font-text); color: var(--u-ink); }
.ck-form textarea, .ck-form input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--u-line-2); border-radius: var(--r-sm); background: var(--u-bg); color: var(--u-ink); font: 400 16px/1.5 var(--font-text); resize: vertical; }
.ck-form textarea#ck-source { height: 132px; }
.ck-form textarea#ck-answer { height: 84px; }
.ck-form .field__error { margin: 0; font: 400 14px/1.4 var(--font-text); color: #8a1c1c; }
.ck-run { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.ck-out { display: flex; align-items: baseline; gap: var(--s-3); min-height: 44px; font: 400 16px/1.4 var(--font-text); }
.ck-out[hidden] { display: none; }
.ck-out__verdict { font: 500 20px/1.2 var(--font-display); }
.ck-out__score { font: 500 16px/1 var(--font-mono); }
.ck-out__route { color: var(--u-ink); }
.ui-win.cam { transform-origin: 0 0; }
.ui-win__row.cam-hide { display: none; }
.ui-win__rows.cam-fade { animation: cam-fade .3s ease-out; }
@keyframes cam-fade { from { opacity: .15; } to { opacity: 1; } }
.ck-progress { flex: 1 1 100%; height: 4px; background: var(--u-line); overflow: hidden; }
.ck-progress[hidden] { display: none; }
.ck-progress > span { display: block; height: 100%; width: 0; background-color: var(--p-accent); transition: width .4s ease-out; }
.ck-progress.is-waiting > span { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); background-size: 45% 100%; background-repeat: no-repeat; animation: ck-sweep 1.8s ease-in-out infinite; }
@keyframes ck-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .ck-progress > span { transition: none; } .ck-progress.is-waiting > span { animation: none; background-image: none; } }
.form__status { margin: 0; min-height: 22px; font: 400 14px/1.5 var(--font-text); color: var(--u-ink); }
@media (max-width: 1023px) { .ck-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1279px) { .ck-item__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ck-form textarea#ck-source { height: 88px; } .ck-form textarea#ck-answer { height: 60px; } .ck-form { gap: var(--s-3); } .form__status:empty { min-height: 0; } }
@media (min-width: 1024px) and (max-width: 1279px) { .bars { gap: var(--s-2); } .bars__row { min-height: 40px; } .faq__item--wide { display: none; } }
@media (max-width: 1023px) { .app.ui.fill { height: auto; flex: none; } .app > .app__pane { overflow: visible; } }
@media (max-width: 1023px) { .app.ui.fill { grid-template-rows: auto auto; } }
@media (min-width: 640px) and (max-width: 1023px) { #routing .frame--split, #run .frame--split { --ratio: 44%; } #result .mo-lt__type { font-size: 16vw; } .bars__row { min-height: 80px; } .faq__item { padding-block: var(--s-4); } }
@media (max-width: 639px) { .ck-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-2); } .ck-item { min-height: 48px; padding: var(--s-2) var(--s-3); } .ck-item__s, .ck-item__l { display: none; } .ck-item__t { font-size: 14px; } .ck-bar span { display: none; } .ck-form { padding: var(--s-4); } }
.hero--centred .hero__lead { color: var(--ink); }
.hero__window .ui-win { width: 100%; }
@media (max-width: 639px) { .ui-win__crumb .muted { display: none; } }
.readout { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); margin: var(--s-6) 0 0; }
.readout > div { display: flex; align-items: baseline; gap: var(--s-2); }
.readout dt { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.readout dd { margin: 0; font: 500 17px/1.4 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.readout .readout__note { margin-left: calc(-1 * var(--s-1)); }
@media (max-width: 639px) { .readout { gap: var(--s-2) var(--s-5); } }
/* sections size to their content (the checker keeps its screen); the kit's one-screen sections left 170-310px empty */
@media (min-width: 640px) { main > section:not(.hero):not(#checker) { height: auto; min-height: 0; padding: 112px 0 96px; } }
.bg-depth { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: .6; }
.bg-depth > i { position: absolute; inset: -12%; background-position: center; background-size: cover; background-repeat: no-repeat; }
.bg-depth__a { background-image: url(assets/bg/depth-a.webp); }
.bg-depth__b { background-image: url(assets/bg/depth-b.webp); opacity: 0; }
/* the page deepens towards its end: a faint top-to-bottom shade whose strength follows the scroll */
.bg-depth > .bg-depth__shade { inset: 0; background: linear-gradient(180deg, rgba(16, 34, 52, .04), rgba(16, 34, 52, .2)); opacity: 0; }
/* the header shows the page's own background, softened; the kit's header is opaque */
.nav { background: color-mix(in oklab, var(--bg) 22%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom-color: color-mix(in oklab, var(--line) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) { .bg-depth { animation: bg-drift 40s ease-in-out infinite alternate; } }
@keyframes bg-drift { from { transform: translate3d(-.6%, 0, 0) scale(1.01); } to { transform: translate3d(.6%, -.5%, 0) scale(1.03); } }
.bars { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.bars__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 6fr) 48px; align-items: center; gap: var(--s-4); min-height: 48px; font: 400 16px/24px var(--font-text); }
.bars__row > span { height: 24px; }
.bars__meta { color: var(--ink); }
.bars__track { height: 12px; background: color-mix(in oklab, var(--ink) 8%, transparent); border-radius: 2px; overflow: hidden; }
.bars__track i { display: block; height: 100%; width: calc(var(--v) * 100%); background: color-mix(in oklab, var(--ink) 45%, transparent); }
.bars__row.is-this { font-weight: 500; }
.bars__row.is-this .bars__track i { background: var(--action); }
.bars__val { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .bars { gap: var(--s-2); margin-top: var(--s-6); } .bars__row { min-height: 0; gap: var(--s-1) var(--s-3); } .bars__row { grid-template-columns: minmax(0, 1fr) 44px; gap: 2px var(--s-3); } .bars__name { grid-column: 1; } .bars__meta { grid-column: 1; grid-row: 2; } .bars__track { grid-column: 1 / -1; grid-row: 3; } .bars__val { grid-column: 2; grid-row: 1; } }
@media (max-width: 639px) { #routing .facts, #run .facts, .bars__meta, #questions .stack-5 > p, #questions .stack-5 > .link, .faq__item--wide { display: none; } #routing .frame--split { --ratio: 80%; } #run .frame--split { --ratio: 70%; } .hero--centred .pill { width: 100%; justify-content: center; } }
/* footer: a closing action, a datasheet row, one quiet line */
.colophon { position: relative; padding: 96px 0 36px; }
.colo__cta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-7); flex-wrap: wrap; padding-bottom: var(--s-9); }
.colo__cta h2 { max-width: 15ch; }
.colo__actions { display: flex; align-items: center; gap: var(--s-6); }
.colo__spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
.colo__spec > div { padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.colo__spec > div + div { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.colo__spec dt { font: 400 13px/1.4 var(--font-text); color: var(--muted); margin-bottom: var(--s-2); }
.colo__spec dd { margin: 0; font: 500 15px/1.45 var(--font-text); color: var(--ink); }
.colo__bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-5) var(--s-7); padding-top: var(--s-6); }
.colo__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2) var(--s-6); }
.colo__links a { font: 400 14px/1.4 var(--font-text); color: var(--ink); text-decoration: none; }
.colo__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.colo__legal { grid-column: 1 / -1; margin: 0; font: 400 12.5px/1.5 var(--font-text); color: var(--muted); }
@media (max-width: 1023px) { .colo__spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .colo__spec > div:nth-child(3) { padding-left: 0; border-left: 0; } .colo__spec > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 639px) { .colophon { padding: 72px 0 calc(28px + var(--bar, 0px)); } .colo__cta { padding-bottom: var(--s-7); } .colo__actions { width: 100%; flex-wrap: wrap; } .colo__bar { grid-template-columns: 1fr; } .colo__links { justify-content: flex-start; } }
.run-icons { display: flex; gap: var(--s-4); align-items: center; }
.run-icons img { width: 32px; height: 32px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font: 400 16px/1.5 var(--font-text); }
.facts li { padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
</style>
</head>
<body>
<div class="bg-depth" aria-hidden="true"><i class="bg-depth__a"></i><i class="bg-depth__b"></i><i class="bg-depth__shade"></i></div>
<!-- type: software
deal: hero centred, nav nav-centre, close close-word, footer footer-columns, rhythm space, buttons arrow,
mark wordmark, ground sage, palette swap-pastels, type chivo, radius sharp
effect: gradient-mesh in the hero window; moments: liquid-type in #result (its own statement section) -->
<header class="nav nav--centre">
<div class="wrap nav__bar">
<a class="skip-link" href="#top">Skip to content</a>
<a class="nav__logo" href="#top">RAG Verifier</a>
<nav class="nav__links" aria-label="Main">
<div class="nav__item"><a class="nav__link" href="#checker">Checker</a></div>
<div class="nav__item"><a class="nav__link" href="#routing">Routing</a></div>
<div class="nav__item"><a class="nav__link" href="#results">Results</a></div>
<div class="nav__item"><a class="nav__link" href="#run">Setup</a></div>
<div class="nav__item"><a class="nav__link" href="#questions">Questions</a></div>
</nav>
<div class="nav__actions">
<a class="btn btn--primary" href="#checker">Check an answer<svg class="m-arrow" viewBox="0 0 12 12" aria-hidden="true"><path class="m-arrow__stem" d="M1 6h8"/><path class="m-arrow__head" d="M4.5 2.5 8 6l-3.5 3.5"/></svg></a>
</div>
<button class="nav__toggle" type="button" aria-expanded="false" aria-label="Menu">
<svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path d="M2 5h14M2 13h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
</button>
</div>
</header>
<main id="top">
<section class="hero hero--centred" data-enter aria-labelledby="hero-h">
<div class="wrap"><div class="hero-text">
<div class="hero__c">
<a class="pill" href="#result"><span>81.5 F1 on RAGTruth</span><span class="muted">See the comparison</span></a>
<h1 id="hero-h">Answer checker for RAG systems</h1>
<p class="hero__lead">Give it the retrieved source, the question and the generated answer. It returns the probability that every claim in the answer is backed by that source.</p>
<div class="btn-row"><a class="btn btn--primary" href="#checker">Check an answer<svg class="m-arrow" viewBox="0 0 12 12" aria-hidden="true"><path class="m-arrow__stem" d="M1 6h8"/><path class="m-arrow__head" d="M4.5 2.5 8 6l-3.5 3.5"/></svg></a><a class="btn btn--secondary" href="#run">Get the model</a></div>
</div>
<div class="hero__window" data-fx="gradient-mesh" data-fx-seed="7" data-ui-pause-host data-ui-loop role="img" aria-label="Answers from internal company assistants, written for this demo, with the verifier's verdicts: passed, sent to review or blocked, each with its score">
<div class="ly-piece" aria-hidden="true">
<div class="ui ui-panel ui-win" data-ui="window" data-open="Queued" data-work="Checking" data-done="Passed">
<div class="ui-win__bar">
<span class="ui-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="ui-win__crumb">RAG Verifier<span class="muted"> / Internal assistants</span></span>
<span class="ui-spacer"></span>
<span class="ui-win__search" aria-hidden="true"><svg class="ui-icon" viewBox="0 0 16 16"><circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 3 3"/></svg><span class="ui-win__ph">Search answers</span><span class="ui-kbd">/</span></span>
</div>
<div class="ui-win__body">
<nav class="ui-win__side" aria-hidden="true">
<span class="ui-win__nav is-on">All<em>9</em></span>
<span class="ui-win__nav">Passed<em>4</em></span>
<span class="ui-win__nav">Review<em>3</em></span>
<span class="ui-win__nav">Blocked<em>2</em></span>
<span class="ui-win__label">Tasks</span>
<span class="ui-win__nav"><span class="ui-win__hash">#</span>HR</span>
<span class="ui-win__nav"><span class="ui-win__hash">#</span>IT</span>
<span class="ui-win__nav"><span class="ui-win__hash">#</span>Contracts</span>
</nav>
<div class="ui-win__main">
<div class="ui-win__cols" aria-hidden="true"><span>Assistant</span><span>Topic</span><span>Verdict</span><span>Score</span></div>
<ul class="ui-win__rows">
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="2">CR</span><span class="ui-win__who">contracts-rag</span><span class="ui-win__sub">SLA credit at 98.5% uptime</span><span class="ui-win__st is-done" data-st>Passed</span><span class="ui-win__age">0.98</span></li>
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="3">IT</span><span class="ui-win__who">it-helpdesk</span><span class="ui-win__sub">SMS codes for remote MFA</span><span class="ui-win__st is-you" data-st>Blocked</span><span class="ui-win__age">0.05</span></li>
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="5">FC</span><span class="ui-win__who">finance-bot</span><span class="ui-win__sub">Business class to New York</span><span class="ui-win__st" data-st>Review</span><span class="ui-win__age">0.20</span></li>
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="3">IT</span><span class="ui-win__who">it-helpdesk</span><span class="ui-win__sub">VPN on Ubuntu 24.04</span><span class="ui-win__st is-done" data-st>Passed</span><span class="ui-win__age">0.98</span></li>
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="4">PB</span><span class="ui-win__who">vendor-bot</span><span class="ui-win__sub">Vendor approval under EUR 50k</span><span class="ui-win__st" data-st>Review</span><span class="ui-win__age">0.51</span></li>
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="4">SB</span><span class="ui-win__who">support-bot</span><span class="ui-win__sub">Refund on an annual plan</span><span class="ui-win__st is-done" data-st>Passed</span><span class="ui-win__age">0.99</span></li>
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="1">HR</span><span class="ui-win__who">hr-assistant</span><span class="ui-win__sub">Home office, short contract</span><span class="ui-win__st is-you" data-st>Blocked</span><span class="ui-win__age">0.02</span></li>
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="2">SA</span><span class="ui-win__who">sales-rag</span><span class="ui-win__sub">EU data access</span><span class="ui-win__st" data-st>Review</span><span class="ui-win__age">0.15</span></li>
<li class="ui-win__row" data-row><span class="ui-avatar" data-tone="1">HR</span><span class="ui-win__who">hr-assistant</span><span class="ui-win__sub">Resignation notice</span><span class="ui-win__st is-done" data-st>Passed</span><span class="ui-win__age">0.94</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section>
<section class="section" id="checker" aria-labelledby="checker-h" style="--hm: 2">
<div class="wrap">
<div class="grid">
<h2 class="span-5" id="checker-h">Check one answer against its source</h2>
<div class="span-6 start-7 stack-4"><p>Pick an example or paste a source and answer from your own system. The model server sleeps when nobody is using it, so the first check after a quiet spell can take up to two minutes.</p><a class="link" href="https://huggingface.co/landtml/d1-2B-RAG-Verifier" target="_blank" rel="noopener">Read the model card</a></div>
</div>
<div class="ui ui-app app fill">
<div class="app__pane app__pane--list">
<div class="ck-bar"><b>Examples</b><span>Written for this demo</span></div>
<ul class="ck-list" id="ck-list" aria-label="Examples"></ul>
</div>
<div class="app__pane app__pane--open">
<form class="ck-form" id="ck-form" action="#" method="post" data-sent="Your answer was checked." novalidate>
<div class="field"><label for="ck-source">Source</label>
<textarea id="ck-source" name="source" required aria-describedby="ck-source-err"></textarea>
<p class="field__error" id="ck-source-err" hidden>Paste the source text the answer was written from.</p></div>
<div class="field"><label for="ck-request">Question or instruction</label>
<input id="ck-request" name="request" type="text" autocomplete="off"></div>
<div class="field"><label for="ck-answer">Answer</label>
<textarea id="ck-answer" name="answer" required aria-describedby="ck-answer-err"></textarea>
<p class="field__error" id="ck-answer-err" hidden>Paste the answer you want checked.</p></div>
<div class="ck-run">
<button class="btn btn--primary" type="submit" id="ck-go">Check an answer</button>
<div class="ck-progress" id="ck-progress" role="progressbar" aria-label="Check progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" hidden><span></span></div>
<p class="ck-out" id="ck-out" hidden><span class="ck-out__verdict" id="ck-verdict"></span><span class="ck-out__score" id="ck-score"></span><span class="ck-out__route" id="ck-route"></span></p>
</div>
<p class="form__status" role="status" id="ck-status"></p>
</form>
</div>
</div>
</div>
</section>
<section class="section statement" id="result" aria-labelledby="result-h">
<div class="wrap">
<div data-moment="liquid-type" class="section-head" style="max-width:none">
<h2 class="mo-lt__type" id="result-h">81.5 F1 at 1.9B parameters</h2>
<p class="t-lead">On the 2,700 answers of the RAGTruth test set. The fine-tuned Llama-2-13B from the RAGTruth paper reaches 78.7, and the same d1-2B before fine-tuning 70.9.</p>
<dl class="readout">
<div><dt>Precision</dt><dd>79.8</dd></div>
<div><dt>Recall</dt><dd>83.2</dd></div>
<div><dt>AUROC</dt><dd>0.936</dd></div>
<div><dt>Training</dt><dd>29 min</dd><dt class="readout__note">on one RTX 5090</dt></div>
</dl>
</div>
</div>
</section>
<section class="section" id="routing" aria-labelledby="routing-h">
<div class="wrap">
<div class="grid">
<div class="span-5 stack-5">
<h2 id="routing-h">Routes each answer by its score</h2>
<p class="t-lead">Answers scoring 0.88 or more go to the user, answers at 0.12 or less are blocked, and the band between goes to a reviewer.</p>
<ul class="facts">
<li>Cut-offs chosen on 1,500 held-out development answers</li>
<li>61% of test answers decided without review</li>
<li>96.1% of those decisions match the annotators</li>
</ul>
<a class="link" href="https://huggingface.co/landtml/d1-2B-RAG-Verifier" target="_blank" rel="noopener">Read the model card</a>
</div>
<div class="frame frame--split span-6 start-7" data-visual>
<div class="dg" data-diagram><script type="application/json">{"layout": "lanes", "alt": "Each RAG answer goes to the verifier, which passes it, sends it to review or blocks it by its score.", "input": {"label": "Answer", "icon": "ui:message-square-text", "sub": "with source"}, "core": {"label": "RAG Verifier", "icon": "ui:shield-check"}, "lanes": [{"label": "Passed", "icon": "ui:check", "done": true, "sub": "41%"}, {"label": "Review", "icon": "ui:eye", "done": true, "sub": "39%"}, {"label": "Blocked", "icon": "ui:ban", "done": true, "sub": "20%"}]}</script></div>
</div>
</div>
</div>
</section>
<section class="section" id="results" aria-labelledby="results-h">
<div class="wrap">
<div class="section-head">
<h2 id="results-h">Results on the RAGTruth test set</h2>
<p>Response level, 2,700 answers. Rows other than the two d1 models are as their authors report them.<sup>1</sup></p>
</div>
<div class="bars" role="img" aria-label="Response-level F1 on the RAGTruth test set, with parameters and recall: RAG-HAT, 8B, F1 83.9, recall 80.8; d1-2B RAG Verifier, 1.9B, F1 81.5, recall 83.2; LettuceDetect-large, 396M, F1 79.2, recall 78.1; fine-tuned Llama-2-13B, 13B, F1 78.7, recall 80.7; LettuceDetect-base, 150M, F1 76.1, recall 75.5; d1-2B before fine-tuning, 1.9B, F1 70.9, recall 61.6">
<div class="bars__row"><span class="bars__name">RAG-HAT (Llama-3-8B)</span><span class="bars__meta">8B 路 recall 80.8</span><span class="bars__track"><i style="--v: 0.956"></i></span><span class="bars__val">83.9</span></div>
<div class="bars__row is-this"><span class="bars__name">d1-2B RAG Verifier</span><span class="bars__meta">1.9B 路 recall 83.2</span><span class="bars__track"><i style="--v: 0.860"></i></span><span class="bars__val">81.5</span></div>
<div class="bars__row"><span class="bars__name">LettuceDetect-large</span><span class="bars__meta">396M 路 recall 78.1</span><span class="bars__track"><i style="--v: 0.768"></i></span><span class="bars__val">79.2</span></div>
<div class="bars__row"><span class="bars__name">Llama-2-13B, fine-tuned</span><span class="bars__meta">13B 路 recall 80.7</span><span class="bars__track"><i style="--v: 0.748"></i></span><span class="bars__val">78.7</span></div>
<div class="bars__row"><span class="bars__name">LettuceDetect-base</span><span class="bars__meta">150M 路 recall 75.5</span><span class="bars__track"><i style="--v: 0.644"></i></span><span class="bars__val">76.1</span></div>
<div class="bars__row"><span class="bars__name">d1-2B before fine-tuning</span><span class="bars__meta">1.9B 路 recall 61.6</span><span class="bars__track"><i style="--v: 0.436"></i></span><span class="bars__val">70.9</span></div>
</div>
<p class="t-small" id="note-1"><sup>1</sup> Llama-2-13B: RAGTruth paper, table 5. RAG-HAT and LettuceDetect: LettuceDetect paper, table 2.</p>
</div>
</section>
<section class="section" id="questions" aria-labelledby="questions-h">
<div class="wrap">
<div class="grid">
<div class="span-5 stack-5">
<h2 id="questions-h">Questions</h2>
<p>What the model does, what it does not, and how this demo runs.</p>
<a class="link" href="https://huggingface.co/landtml/d1-2B-RAG-Verifier" target="_blank" rel="noopener">Read the model card</a>
</div>
<div class="faq span-6 start-7">
<div class="faq__item"><h3>Does the model say which sentence is wrong?</h3><p>No. It scores the whole answer; check sentences one by one to find it.</p></div>
<div class="faq__item"><h3>Which answers count as unsupported?</h3><p>Any answer with a claim the source does not back.</p></div>
<div class="faq__item"><h3>Which languages can the model read?</h3><p>English. Other languages run but are not measured.</p></div>
<div class="faq__item faq__item--wide"><h3>Why is the model slow on the first check?</h3><p>The model server shuts down when idle and starts again on the next check. Once it is up, a check takes one to three seconds.</p></div>
<div class="faq__item"><h3>Does the model server store my text?</h3><p>No. Text goes to the model for one check and is not logged.</p></div>
</div>
</div>
</section>
<section class="section" id="run" aria-labelledby="run-h">
<div class="wrap">
<div class="grid">
<div class="span-5 stack-5">
<h2 id="run-h">The checker runs on a GPU or a CPU</h2>
<p class="t-lead">One forward pass per answer and no text generation. The weights ship as bfloat16 safetensors, a LoRA adapter and a Q8_0 GGUF for llama.cpp.</p>
<ul class="facts">
<li>144 ms per answer on a 12 GB Radeon RX 6750 XT</li>
<li>About 40 answers a second on one RTX&nbsp;5090</li>
<li>LFM Open License v1.0, from the base model</li>
</ul>
<div class="run-icons"><img data-icon="hugging-face" src="assets/icons/hugging-face.svg" alt="Hugging Face" width="32" height="32" loading="lazy"><img data-icon="pytorch" src="assets/icons/pytorch.svg" alt="PyTorch" width="32" height="32" loading="lazy"><img data-icon="python" src="assets/icons/python.svg" alt="Python" width="32" height="32" loading="lazy"><img data-icon="docker" src="assets/icons/docker.svg" alt="Docker" width="32" height="32" loading="lazy"></div>
<a class="link" href="https://huggingface.co/landtml/d1-2B-RAG-Verifier" target="_blank" rel="noopener">Read the model card</a>
</div>
<div class="frame frame--split span-6 start-7">
<div class="stage stage--fade-b"><div class="at-rise to-edge" style="--w: 400px; --ay: 56px">
<div class="ui ui-panel ui-code" data-ui="code" role="img" aria-label="A Python script that loads the model and checks one answer">
<div class="ui-code__tabs">
<span class="ui-code__tab is-on"><i class="ui-code__lang">PY</i>check.py</span>
<span class="ui-spacer"></span>
<span class="ui-chip ui-chip--plain ui-code__chip" data-code-chip>0.004</span>
</div>
<pre class="ui-code__pre"><code><span class="ui-code__ln" data-n="1"><span class="k">import</span> transformers <span class="k">as</span> tf</span>
<span class="ui-code__ln" data-n="2">m = tf.AutoModel.<span class="f">from_pretrained</span>(</span>
<span class="ui-code__ln" data-n="3"> REPO, trust_remote_code=<span class="k">True</span>)</span>
<span class="ui-code__ln" data-n="4">q = {<span class="c">"type"</span>: <span class="c">"noul"</span>,</span>
<span class="ui-code__ln" data-n="5"> <span class="c">"instructions"</span>: QUESTION}</span>
<span class="ui-code__ln is-mark" data-n="6">out = m.<span class="f">system_one</span>(</span>
<span class="ui-code__ln" data-n="7"> state, {<span class="c">"ok"</span>: q})</span>
<span class="ui-code__ln" data-n="8" data-note="Below 0.56: flag the answer.">p = out[<span class="c">"answers"</span>][<span class="c">"ok"</span>]</span>
<span class="ui-code__ln" data-n="9" data-note="0.004 for the Sunday answer.">print(<span class="f">round</span>(p[<span class="c">"noul"</span>], <span class="n">3</span>))</span></code></pre>
<div class="ui-code__hint" data-code-hint><span class="ui-dot"></span><span data-code-text>One call returns P(supported).</span></div>
</div>
</div></div>
</div>
</div>
</div>
</section>
</main>
<footer class="colophon" id="contact" aria-labelledby="close-h">
<div class="wrap">
<div class="colo__cta">
<div class="stack-3"><h2 id="close-h">Check an answer against its source</h2><p class="t-lead">The weights are open and the checker is free to use.</p></div>
<div class="colo__actions"><a class="btn btn--primary" href="#checker">Check an answer<svg class="m-arrow" viewBox="0 0 12 12" aria-hidden="true"><path class="m-arrow__stem" d="M1 6h8"/><path class="m-arrow__head" d="M4.5 2.5 8 6l-3.5 3.5"/></svg></a><a class="link" href="https://huggingface.co/landtml/d1-2B-RAG-Verifier" target="_blank" rel="noopener">Get the model</a></div>
</div>
<dl class="colo__spec">
<div><dt>Base model</dt><dd>LiquidAI d1-2B, 1.9B parameters</dd></div>
<div><dt>Training</dt><dd>LoRA on RAGTruth, one RTX 5090</dd></div>
<div><dt>Formats</dt><dd>BF16, LoRA adapter, Q8_0 GGUF</dd></div>
<div><dt>Licence</dt><dd>LFM Open License v1.0</dd></div>
</dl>
<div class="colo__bar">
<a class="nav__logo" href="#top">RAG Verifier</a>
<nav class="colo__links" aria-label="Footer">
<a href="#checker">Checker</a><a href="#routing">Routing</a><a href="#results">Results</a><a href="#run">Setup</a><a href="#questions">Questions</a><a href="https://huggingface.co/landtml/d1-2B-RAG-Verifier" target="_blank" rel="noopener">Model card</a>
</nav>
<p class="colo__legal">&copy; 2026 RAG Verifier. Product names and logos are trademarks of their owners.</p>
</div>
</div>
</footer>
<nav class="actionbar" aria-label="Quick actions">
<a class="btn btn--primary" href="#checker">Check an answer</a>
</nav>
<script type="module" src="assets/system.js"></script>
<script type="module" src="assets/motion/motion.js"></script>
<script type="module" src="assets/layout/layout.js"></script>
<script type="module" src="assets/diagrams/mount.js"></script>
<script type="module" src="hero-camera.js"></script>
<script type="module" src="bg-depth.js"></script>
<script type="module" src="checker.js"></script>
</body>
</html>