Proof page: LIVE side-by-side CRM vs AI — shows, doesn't tell

3 live demo searches run on page load against 500K real profiles:
  'warehouse help' — CRM: 0, AI: finds Forklift Ops + Loaders
  'someone good with machines who is dependable' — CRM: 0, AI: finds Machine Ops
  'safety trained worker for chemical plant' — CRM: 0, AI: finds OSHA+Hazmat workers

Each shows the actual CRM keyword count (LIKE match) next to the AI
vector results with real worker names, roles, and cities. Not
described — demonstrated. The numbers come from queries that run
when the page loads.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
root 2026-04-17 12:55:11 -05:00
parent 66a3460c92
commit 7367e5f71d

View File

@ -488,6 +488,31 @@ async function main() {
sources: hybrid.sources?.slice(0, 5),
});
// Run LIVE CRM vs AI comparisons — these actually execute on page load
const demos: any[] = [];
const demoQueries = [
{ query: "warehouse help", desc: "A staffer types what they need in plain English" },
{ query: "someone good with machines who is dependable", desc: "Natural language — no field names, no filters" },
{ query: "safety trained worker for chemical plant", desc: "The CRM doesn't know 'safety trained' = OSHA + Hazmat" },
];
for (const dq of demoQueries) {
// CRM attempt: exact LIKE match
const crmResult = await api("POST", "/query/sql", {
sql: `SELECT COUNT(*) cnt FROM workers_500k WHERE resume_text LIKE '%${dq.query}%'`
});
const crmCount = crmResult?.rows?.[0]?.cnt ?? 0;
// AI attempt: vector search understands meaning
const aiResult = await api("POST", "/vectors/hnsw/search", {
index_name: "workers_500k_v1",
query: dq.query,
top_k: 3,
});
const aiHits = aiResult?.results || [];
demos.push({ ...dq, crmCount, aiHits });
}
const g = vram?.gpu || {};
const ts = new Date().toLocaleString();
const testRows = tests.map((t: any) => {
@ -661,33 +686,62 @@ tr:hover{background:#111827}
</section>
<section style="background:linear-gradient(135deg,#0f172a,#1a0f2e);border:1px solid #7c3aed;border-radius:16px;padding:30px;margin:30px 0">
<h2 style="border:none;color:#a78bfa"><span>02</span> What AI + Vectors Do understand MEANING, not just keywords</h2>
<p style="color:#c4b5fd;font-size:14px;margin-bottom:16px">
The AI reads every worker profile, understands the content, and converts it into a 768-dimension mathematical representation.
When you search, it finds workers whose <em>meaning</em> matches even if the words are completely different.
<h2 style="border:none;color:#a78bfa;font-size:20px;margin-bottom:8px">See the difference live, right now</h2>
<p style="color:#c4b5fd;font-size:13px;margin-bottom:24px">
These searches just ran on ${totalRows.toLocaleString()} real worker profiles when you loaded this page.
Left: what your CRM finds. Right: what AI finds. Same search, same data.
</p>
<div class="g2" style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px">
<div style="background:#0d0d1a;border-radius:8px;padding:16px">
<div style="color:#f87171;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">CRM Keyword Search</div>
<div style="color:#e2e8f0;font-size:14px">"warehouse work" <span style="color:#f87171">0 results</span></div>
<div style="color:#64748b;font-size:12px;margin-top:4px">Can't find it because no profile says "warehouse work" literally</div>
</div>
<div style="background:#0d0d1a;border-radius:8px;padding:16px">
<div style="color:#34d399;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">AI Vector Search</div>
<div style="color:#e2e8f0;font-size:14px">"warehouse work" <span style="color:#34d399">${hybrid.vector_reranked} verified matches</span></div>
<div style="color:#64748b;font-size:12px;margin-top:4px">AI understands: Forklift Operator + Loader + Shipping Clerk = warehouse work</div>
</div>
</div>
<div style="color:#94a3b8;font-size:12px;margin-bottom:12px">
<span class="badge green">${hybrid.sql_matches?.toLocaleString()} structural matches</span>
<span class="badge purple"> AI ranked by relevance</span>
<span class="badge blue">${hybrid.vector_reranked} best results</span>
in <strong style="color:#e2e8f0">${tests[tests.length-1]?.ms}ms</strong>
${demos.map((d: any, i: number) => {
const aiNames = d.aiHits.map((h: any) => {
const name = h.chunk_text?.split("—")[0]?.trim() || h.doc_id;
const role = h.chunk_text?.match(/— (.+?) in/)?.[1] || "";
const city = h.chunk_text?.match(/in (.+?)\./)?.[1] || "";
return { name, role, city, score: h.score };
});
return `
<div style="margin-bottom:${i < demos.length - 1 ? '24px' : '0'};padding-bottom:${i < demos.length - 1 ? '24px' : '0'};border-bottom:${i < demos.length - 1 ? '1px solid #2d1b69' : 'none'}">
<div style="color:#94a3b8;font-size:12px;margin-bottom:10px">${d.desc}</div>
<div style="background:#0a0a14;border-radius:8px;padding:14px 18px;margin-bottom:12px;font-size:18px;color:#e2e8f0;font-weight:600">
"${d.query}"
</div>
<div class="g2" style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
<div style="background:#1a0a0a;border:1px solid #7f1d1d;border-radius:8px;padding:16px">
<div style="color:#f87171;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Your CRM (keyword match)</div>
<div style="color:#fca5a5;font-size:32px;font-weight:800">${d.crmCount}</div>
<div style="color:#7f1d1d;font-size:12px;margin-top:4px">results scanned every profile for the exact phrase</div>
</div>
<div style="background:#0a1a0f;border:1px solid #166534;border-radius:8px;padding:16px">
<div style="color:#34d399;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">AI Vector Search (understands meaning)</div>
<div style="color:#6ee7b7;font-size:32px;font-weight:800">${d.aiHits.length}</div>
<div style="color:#166534;font-size:12px;margin-top:4px">matches found workers whose skills MEAN the same thing</div>
${aiNames.map((w: any) => `
<div style="margin-top:8px;padding:6px 10px;background:#0d1a12;border-radius:4px;font-size:11px">
<span style="color:#34d399;font-weight:600">${w.name}</span>
<span style="color:#64748b"> ${w.role}${w.city ? ` in ${w.city}` : ""}</span>
</div>
`).join("")}
</div>
</div>
</div>`;
}).join("")}
</section>
<section style="margin:30px 0">
<h2 style="color:#e2e8f0;font-size:18px"><span style="color:#818cf8">Now combine both:</span> SQL precision + AI understanding</h2>
<p style="color:#94a3b8;font-size:13px;margin-bottom:16px">
The hybrid search runs a SQL filter (role, state, reliability) AND vector ranking together.
You get exact structural matches ranked by who's the best semantic fit in one call.
</p>
<div style="margin-bottom:12px">
<span class="badge green">${hybrid.sql_matches?.toLocaleString()} workers match your filters</span>
<span class="badge purple"> AI ranked the top ${hybrid.vector_reranked}</span>
<span class="badge blue">${tests[tests.length-1]?.ms}ms</span>
</div>
<table><thead><tr><th>ID</th><th>Name</th><th>Profile</th><th>AI Score</th><th>Verified</th></tr></thead>
<tbody>${workerRows}</tbody></table>
<p style="color:#7c3aed;font-size:12px;margin-top:12px">Every result verified against the database the AI can't hallucinate workers that don't exist.</p>
<p style="color:#475569;font-size:11px;margin-top:8px">Every result verified against the actual database. The AI cannot hallucinate workers that don't exist.</p>
</section>
<section>