4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1cc0,'use client'; /** * @file complete.tsx * @description Complete block — ModernBERT (topK 5) fill-mask word prediction with `[MASK]` authoring, ranked predictions, per-candidate substituted-sentence previews, and click-to-apply-and-iterate. Transformers.js-only — there is no Chrome AI fill-mask, so there is no provider to fall back from. */ import { useEffect, useState } from 'react'; import { useFillMask, toAppError } from '@localmode/react'; import type { FillMaskModel } from '@localmode/core'; import { MaskTokenInput } from '@/components/mask-token-input'; import { ScoredResultBarList } from '@/components/scored-result-bar-list'; import { ConfidenceScoreBadge } from '@/components/confidence-score-badge'; import { ProviderBadge } from '@/components/provider-badge'; import { ErrorAlert } from '@/components/error-alert'; import { cn } from '@/lib/utils'; const FILL_MASK_MODEL_ID = 'onnx-community/ModernBERT-base-ONNX'; const FILL_MASK_MODEL_SIZE = '~150 MB'; const MASK_TOKEN = '[MASK]'; const COMPLETE_SAMPLES = [ 'The weather today is very [MASK].', 'I love to eat [MASK] for breakfast.', 'Paris is the capital of [MASK].', 'She is a very [MASK] person.', 'The cat sat on the [MASK].', ]; function confidenceLabel(score: number): 'High' | 'Good' | 'Fair' | 'Low' { if (score >= 0.3) return 'High'; if (score >= 0.1) return 'Good'; if (score >= 0.05) return 'Fair'; return 'Low'; } const FILL_MASK_THRESHOLDS = { high: 0.3, medium: 0.1 }; function replaceMask(text: string, word: string): string { return text.replace(MASK_TOKEN, word); } type ResolvedFillMask = { model: FillMaskModel; provider: 'transformers'; modelId: string }; let fillMaskCache: ResolvedFillMask | null = null; async function resolveFillMask(modelId: string): Promise { if (fillMaskCache) return fillMaskCache; const { transformers } = await import('@localmode/transformers'); const model = transformers.fillMask(modelId); fillMaskCache = { model, provider: 'transformers', modelId: model.modelId }; return fillMaskCache; } export function CompleteBlock() { const [input, setInput] = useState('The weather today is very [MASK].'); const [resolved, setResolved] = useState(null); useEffect(() => { let alive = true; void resolveFillMask(FILL_MASK_MODEL_ID).then((r) => { if (alive) setResolved(r); }); return () => { alive = false; }; }, []); const { data, error, isLoading, execute, cancel, reset } = useFillMask({ model: resolved?.model as FillMaskModel, topK: 5, }); const hasMask = input.includes(MASK_TOKEN); const ready = !!resolved; const predictions = data?.predictions ?? []; const appErr = toAppError(error); const modelId = data?.response.modelId ?? resolved?.modelId ?? null; const predict = () => { if (!hasMask || !ready || isLoading) return; void execute(input); }; const apply = (token: string) => { setInput(replaceMask(input, token)); reset(); }; const top = predictions[0]; return (

Complete - ModernBERT fill-mask. Model loads only behind an explicit action.

{modelId ?? ''}

{!hasMask && ( Add a {MASK_TOKEN} token to predict )}

{appErr && ( )} {(isLoading || predictions.length > 0) && (

{isLoading ? 'Predicting…' : `Top ${predictions.length} predictions`}

{} ({ label: p.token, score: p.score }))} isLoading={isLoading} skeletonRows={5} limit={5} /> {} {!isLoading && predictions.length > 0 && (

)} {} {top && ( {top.token} )}

)}

); } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@localmode/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/core"}]]}]}],["$","li","@localmode/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/react"}]]}]}],["$","li","@localmode/transformers",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Ftransformers","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/transformers"}]]}]}]]}],["$","$L4c",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","https://localmode.ai/r/ui/input-controls/mask-token-input.json","https://localmode.ai/r/ui/results/scored-result-bar-list.json","https://localmode.ai/r/ui/results/confidence-score-badge.json","https://localmode.ai/r/ui/local-first/provider-badge.json","https://localmode.ai/r/ui/results/error-alert.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/app/blocks/writing-tools/complete/complete.tsx","content":"$4e","type":"registry:component","target":"components/blocks/writing-tools/complete.tsx"}],"className":"h-[70svh] min-h-80"}]]}]