Så fungerar lokal AI i webbläsaren med WebGPU och React

Vad som faktiskt körs på din maskin

Uttrycket "lokal AI" används tillräckligt löst för att det är värt att vara exakt med vilken programvara som körs var.

Modellen körs i byggverktyget — React-applikationen på northerngo.com som du skriver din prompt i. När du slår på Lokal AI laddas en kvantiserad språkmodell ner till din webbläsare och körs på ditt grafikkort. Bygg-agenten som skriver appens kod är den modellen. Ingenting av din prompt eller den färdiga källkoden skickas någonstans.

Appen du genererar är en annan sak. Genererade appar är ett enda HTML-dokument som använder Tailwind via CDN, med NorthernGos SDK injicerad i en script-tagg. De bär inte med sig någon egen språkmodell. Anropar en genererad app window.NorthernGoAI.generate(prompt) går den förfrågan över nätet till plattformens modellproxy, precis som från vilken annan webbsida som helst. Lokalt läge ändrar hur din app byggs, inte hur den körs för dina användare.

Den skillnaden spelar roll av precis det skäl folk brukar fråga om lokal AI: sekretessen kring koden och uppdraget, inte kring slutanvändarnas data. Är det kontroll över var dina användares data hamnar du behöver är det en annan fråga, som besvaras i guiden om att bygga GDPR-säkra appar inom EU.

Kontrollen som avgör om något av det här är möjligt

WebGPU är det webbläsar-API som exponerar grafikkortet för allmänna beräkningar. Allt annat hänger på att det finns:

if (!navigator.gpu) {
  // Inget WebGPU: lokalt läge kan inte startas alls.
  visaMeddelande('Din webbläsare eller dator saknar stöd för WebGPU.');
  return;
}

I praktiken betyder det en Chromium-baserad webbläsare på dator — Chrome eller Edge. Stödet i Safari och Firefox har rört sig under 2025 och 2026, men byggverktyget utgår från Chromium på dator och säger det rakt ut i felmeddelandet när en generering misslyckas. Ett dedikerat grafikkort krävs inte strikt, men integrerad grafik med lite tillgängligt minne blir så långsam att molnvägen är det bättre valet.

Mobil är tekniskt möjligt och avrådes medvetet. Gränssnittet visar en varning innan det drar igång en nedladdning på flera gigabyte över mobilnätet, och en gång till innan en cachad modell aktiveras på en telefon, eftersom kostnaden i minne och batteri är verklig.

De fem modellerna

Lokalt läge är inte en enda modell. Du väljer en i dialogen Välj AI-modell, och valet är en genuin avvägning mellan nedladdningsstorlek, hastighet och hur väl modellen följer instruktioner.

• Qwen 3.5 (4B) — 3,0 GB, ingår i alla planer inklusive Gratis. Standardvalet. För små, tydligt beskrivna sidor, formulär och enkla ändringar — inte ett första CRM.
• Qwen 3.5 (9B) — 5,5 GB, Pro. Störst av de lokala. Något bättre än 4B på längre instruktioner. Fortfarande långt från molnmodellen.
• Qwen 2.5 Coder (7B) — 4,8 GB, Pro. Kodtränad. Ofta den mest pålitliga av de lokala på HTML och JavaScript.
• Llama 3.1 (8B) — 5,1 GB, Pro. En allmän 8B-modell i samma klass som de andra — inget resonemangssprång mot molnet.
• Ministral 3 Reasoning (3B) — 2,2 GB, Pro. Minst och snabbast att ladda. Svagast i setet; använd när minnet är knappt.

Nedladdningen sker en gång. Därefter ligger vikterna i webbläsarens cache och aktiveringen tar sekunder. Byggverktyget kommer ihåg vilken modell du senast använde, så nästa session hoppar över modellvalet helt och startar den direkt.

Gratis- och Premium-konton får Qwen 3.5 (4B) utan tak på hur många gånger du genererar, och det är den delen som är värd att ta till sig: den månatliga krediten på 5, 25 eller 50 genereringar gäller enbart molngenerering. Lokal generering mäts inte, eftersom den inte kostar plattformen något.

Att koppla in en flergigabytesmotor i en React-app

Bygger du något liknande själv är två implementationsdetaljer värda att stjäla, eftersom båda var buggar innan de blev mönster.

Importera motorn dynamiskt. web-llm-paketet ska aldrig ligga i det initiala bygget — en besökare som aldrig rör lokalt läge ska aldrig ladda ner det:

const { initLocalAI, generateLocalCode } = await import('../utils/localAI');

Håll motorns tillstånd utanför komponentträdet. Reglaget för att aktivera finns på två ställen i NorthernGo — en knapp i navigeringsraden och en kontroll i promptrutan — och båda är monterade samtidigt. När var och en höll sitt eget isLoading visade den ena fortfarande motorn som avstängd när du startade den i den andra, och en snabb dubbelklickning kunde dra igång samma nedladdning på 5 GB två gånger. Lösningen är en store på modulnivå med ett enda pågående löfte: ett andra anrop för samma modell får tillbaka löftet som redan körs, och ett anrop för en annan modell under pågående nedladdning avvisas rakt av i stället för att köas.

Själva laddningen rapporterar framsteg via en callback, och det är den som driver procentsatsen i gränssnittet:

import { CreateMLCEngine } from '@mlc-ai/web-llm';

const motor = await CreateMLCEngine('Qwen3.5-4B-q4f16_1-MLC', {
  initProgressCallback: (rapport) => {
    setProgress(Math.round(rapport.progress * 100));
    setStatusText(rapport.text);
  }
});

En sak till som är lätt att missa: att byta modell kräver att den föregående avlastas först. Två uppsättningar vikter får inte plats i grafikminnet samtidigt, och den andra laddningen misslyckas på ett svårläst sätt.

await motor.unload();

Strömningen, och varför temperaturen är så låg

Genereringen använder ett chat completion-API i OpenAI-form, vilket gör att koden du skriver mot den ser ut som vanlig modellkod:

const delar = await motor.chat.completions.create({
  messages: [
    { role: 'system', content: systemkontext },
    { role: 'user', content: prompt }
  ],
  temperature: 0.1,
  stream: true
});

let helText = '';
for await (const del of delar) {
  helText += del.choices[0]?.delta?.content || '';
  onStream(helText);
}

Temperaturen är 0,1 i stället för mer sedvanliga 0,7 av ett specifikt skäl. Det här är små modeller som ombeds följa en lång och stelbent formatspecifikation — skriv bara ut de inre HTML-elementen, inget dokumentskal, använd Tailwinds klasser. Kreativitet i det steget ger löpande text, ursäkter och halvfärdig markdown snarare än bättre design. Designbesluten kommer från prompten, inte från slumpen i samplingen.

Tal och bilder använder en separat stack. Text-till-tal och transkribering går via pipelines i @huggingface/transformers med device: 'webgpu', i Web Workers så att huvudtråden förblir responsiv, och de initieras i bakgrunden parallellt med textmodellen.

Vad som ändå rör nätet i lokalt läge

Att vara exakt här spelar större roll än säljformuleringen, så: lokalt läge är inte samma sak som offline.

Vid ett nybygge på Premium eller Pro anropas molnet först i Arkitekt-steget för att skissa appens struktur, och den ritningen lämnas sedan till den lokala modellen. På Gratis-planen hoppas det steget över helt. När du ändrar en befintlig app i stället för att bygga en ny hoppas Arkitekt-anropet över för alla — den lokala modellen får den nuvarande sidkroppen och producerar en riktad diff i stället.

Det finns ingen LLM-granskare som skriver om koden på den lokala vägen. En syntaxkontroll stoppar JavaScript som inte går att tolka; den lagar inte logik, och det är inte en tur och retur till molnet.

Alltså: på Gratis är genereringen helt lokal. På Premium och Pro skickas en beskrivning av det du bad om till molnet en gång per nybygge, om inte Arkitekt-anropet misslyckas, för då fortsätter byggverktyget utan det. Behöver du en garanti för att ingenting lämnar maskinen är Ollama för lokala modeller eller Gratis-planen de ärliga svaren. Den bredare avvägningen finns i jämförelsen mellan lokal och molnbaserad AI i appbyggare.

Där lokal generering är genuint sämre

• Kontextfönstret. WebGPU-modellerna har ett fast och jämförelsevis litet fönster, ofta 4k till 8k tokens. En stor befintlig app plus en fullständig instruktionsuppsättning får inte plats, och det är därför ändringar skickas som diffar i stället för hela dokument.
• Följsamhet mot instruktioner. Mindre modeller struntar ibland i diff-formatet och returnerar en helt ny app i stället. Byggverktyget upptäcker det och kör ett striktare omförsök, men omförsöket kostar ännu en full generering i väntetid.
• Hastighet. En 9B-modell på ett mellanklasskort är långsammare än molnvägen, ibland betydligt. Kompensationen är att du kan köra den hundra gånger om dagen utan kostnad.
• Första körningen. Mellan 2,5 GB och 6,2 GB måste komma över din uppkoppling innan någonting alls händer.
• Ingen mobilberättelse. Det fungerar på en telefon; du kommer att ångra dig.

Felsökning

"Lokal generering misslyckades" direkt, innan någon nedladdning. WebGPU är inte tillgängligt. Använd Chrome eller Edge på dator och kontrollera att hårdvaruacceleration är påslagen i webbläsarens inställningar.

Nedladdningen börjar om varje gång. Modellen cachas i webbläsarens lagring. Privata fönster, hård cacherensning och vissa företagspolicyer slänger den. Byggverktyget sparar dessutom vald modell i localStorage — är lagringen helt blockerad fungerar aktiveringen ändå, men modellvalet dyker upp varje session.

Genereringen dör mitt i med ett minnesfel. Grafikminnet tog slut. Byt till en mindre modell, stäng andra grafiktunga flikar och starta om webbläsaren för att frigöra vikter som inte avlastades rent.

"En annan modell laddas redan ner." Precis vad det står: en nedladdning av en annan modell pågår. Vänta tills den är klar i stället för att ladda om sidan, vilket bara börjar om.

Resultatet är en sida som beskriver reglerna i stället för din app. En liten modell har läst instruktionsblocket som själva specifikationen. Ett omförsök med en kortare och mer konkret prompt brukar räcka; det gör även ett byte till Qwen 2.5 Coder, som är märkbart bättre på att hålla fast vid ett format.