Construirea unui estimator de cost AI: analizarea rezultatelor LLM în componente interactive UI

În industriile B2B și orientate spre servicii, obținerea unei estimări de preț este cel mai important pas al călătoriei clienților. Cu toate acestea, estimatorii tradiționali de costuri sunt adesea plictisitori, solicitând utilizatorilor să completeze formulare complexe cu zeci de casete de selectare, meniuri derulante și câmpuri de text. Această frecare duce la rate scăzute de finalizare. Ce se întâmplă dacă utilizatorii ar putea pur și simplu să-și descrie cerințele în text simplu și ca sistemul să genereze instantaneu o estimare detaliată, interactivă?

Aceasta este puterea unui estimator de cost AI. Folosind modele de limbaj mari (LLM), putem lua intrări de limbaj natural nestructurate și le putem analiza în structuri de date structurate și de încredere. În acest articol, vom parcurge arhitectura frontală și backend necesară pentru a face acest lucru, concentrându-ne pe LLM Ieșiri structurate, validarea schemei cu Zod și legarea datelor analizate la React controale UI.

1. Backend: aplicarea strictului JSON cu LLM ieșiri structurate

Cea mai mare provocare a instrumentelor bazate pe inteligență artificială este fiabilitatea. Dacă pur și simplu solicitați un LLM să „întoarcă JSON”, este posibil ca ocazional să iasă text, formate nevalide sau să schimbe numele cheilor. În producție, acest lucru rupe logica de analiză a front-end-ului.

Pentru a rezolva acest lucru, APIs (cum ar fi OpenAI, Gemini și Anthropic) oferă Ieșiri Structurate. Această caracteristică obligă modelul să răspundă strict conform unei scheme JSON. Definim această schemă folosind Zod, o bibliotecă de declarare și validare a schemei TypeScript-first. LLM acționează ca un motor de extracție, mapând descrierea în formă liberă a utilizatorului direct în structura noastră definită.

2. Definirea Schemei Zod Estimatorului

Pentru o estimare de construcție sau renovare, descriem o schemă care surprinde dimensiunile proiectului (de exemplu, suprafața, numărul de camere), cerințele specifice (înlocuirea cablajului, demolarea) și o listă de elemente de cost estimate. Iată un exemplu TypeScript al modului în care definim structura JSON țintă:

Mai întâi, definim `Schema de estimare` care conține parametri de bază precum `zonă` și `camere`, steaguri booleene pentru `demolare` și `recablare` și o matrice `estimateItems` unde fiecare articol are o `sarcină`, `categorie` și `Cost de bază`. Atașăm descrieri la câmpuri (de exemplu, `descrie(„Suprafața în metri pătrați”)`) pentru a ajuta LLM să înțeleagă ce date ar trebui extrase în fiecare proprietate.

3. Conectarea datelor AI la React UI State

Odată ce backend-ul analizează intrarea și returnează obiectul validat JSON, aplicația frontală îl încarcă în starea React. Acest lucru creează un flux interactiv foarte receptiv:

• Încărcare inițială: utilizatorul își trimite descrierea textului. Afișăm un indicator de încărcare. Odată ce API returnează JSON, populăm starea componentei locale cu valorile de extracție AI.
• Calcule bazate pe formule: în timp ce AI furnizează elementele estimative inițiale și prețurile de referință, calculul costului final este calculat local folosind formule React. Dacă utilizatorul modifică variabile, costul se actualizează instantaneu fără a trimite solicitări înapoi la LLM.
• Sistem de control hibrid: interfața de utilizare redă controale (glisoare, comutări și meniuri derulante) care sunt legate direct de stare. Acest lucru permite utilizatorului să corecteze AI. Dacă AI-ul a omis că are nevoie de înlocuire a cablajului, utilizatorul pur și simplu pornește comutatorul comutator „Recablare”.

4. Redarea widgeturilor vizuale interactive

Pentru a oferi o experiență de înaltă calitate, interfața ar trebui să transforme numerele brute în diagrame atractive din punct de vedere vizual și widget-uri ușor de utilizat:

• Glisoare interactive: mapați parametrul `zonă` la un glisor de gamă HTML personalizat. Tragerea glisorului crește multiplicatorul de suprafață, scalând dinamic costul forței de muncă și al materialelor pentru fiecare element rând.
• Diagrame dinamice: grupați articolele după categorie (de exemplu, Demolare, Finisaje, Electrice) și afișați-le într-o diagramă dinamică SVG circulară sau bare de progres. Acest lucru comunică vizual defalcarea bugetului dintr-o privire.
• Acordeoane editabile: Prezentați articolele estimative grupate pe categorii în listele de acordeoane pliabile. Permiteți utilizatorului să ajusteze prețul unitar, să elimine sarcini redundante sau să adauge note personalizate la articolele individuale.

5. Planul tehnic de implementare

Configurarea front-end constă dintr-o zonă de text pentru introducerea descrierii, urmată de tabloul de bord al estimatorului. Gestionăm starea variabilelor precum `zonă` și `cablare` folosind stări de cârlig React. În funcția de randare, calculăm totalurile: înmulțim costurile de bază cu valoarea curentă a glisorului zonei, adăugând rate fixe pentru demolare dacă este selectată. Un panou de rezumat afișează suma recalculată alături de glisoare interactive.

Combinând extragerea flexibilă de context a LLM-urilor cu constrângerile stricte și bucla de feedback rapidă de React și TypeScript, companiile pot crea motoare automate de cotații B2B care se simt inteligente, rapide și complet fiabile.