Budowanie estymatora kosztów AI: analizowanie LLM wyników w interaktywne komponenty interfejsu użytkownika

W branżach B2B i zorientowanych na usługi oszacowanie ceny jest najważniejszym etapem podróży klienta. Jednak tradycyjne kalkulatory kosztów są często żmudne i wymagają od użytkowników wypełniania skomplikowanych formularzy zawierających dziesiątki pól wyboru, list rozwijanych i pól tekstowych. To tarcie prowadzi do niskiego wskaźnika ukończenia. Co by było, gdyby użytkownicy mogli po prostu opisać swoje wymagania zwykłym tekstem, a system natychmiast wygenerowałby szczegółowy, interaktywny kosztorys?

Na tym polega siła narzędzia do szacowania kosztów AI. Korzystając z modeli dużego języka (LLM), możemy pobierać nieustrukturyzowane dane wejściowe w języku naturalnym i analizować je w ustrukturyzowane, niezawodne struktury danych. W tym artykule omówimy architekturę frontendu i backendu wymaganą do działania, skupiając się na LLM ustrukturyzowanych wynikach, sprawdzaniu poprawności schematu za pomocą Zoda i wiązaniu przeanalizowanych danych z React kontrolkami interfejsu użytkownika.

1. Backend: wymuszanie ścisłego JSON za pomocą LLM ustrukturyzowanych wyników

Największym wyzwaniem w przypadku narzędzi opartych na sztucznej inteligencji jest niezawodność. Jeśli po prostu poprosisz LLM o „zwrócenie JSON”, może to czasami spowodować zawijanie tekstu, nieprawidłowe formaty lub zmianę nazw klawiszy. W środowisku produkcyjnym psuje to logikę analizowania interfejsu użytkownika.

Aby rozwiązać ten problem, nowoczesne API (takie jak OpenAI, Gemini i Anthropic) oferują ustrukturyzowane wyniki. Ta funkcja zmusza model do ścisłej odpowiedzi zgodnie ze schematem JSON. Definiujemy ten schemat za pomocą Zoda, TypeScript-pierwszej biblioteki deklaracji i walidacji schematu. LLM działa jak silnik wyodrębniający, odwzorowujący dowolny opis użytkownika bezpośrednio na naszą zdefiniowaną strukturę.

2. Definiowanie schematu ZOD estymatora

W przypadku wyceny budowy lub remontu opisujemy schemat, który uwzględnia wymiary projektu (np. powierzchnię, liczbę pomieszczeń), szczegółowe wymagania (wymiana okablowania, rozbiórkę) oraz listę szacunkowych pozycji kosztowych. Oto TypeScript przykład definiowania docelowej struktury JSON:

Najpierw definiujemy „EstimateSchema” zawierający podstawowe parametry, takie jak „obszar” i „pokoje”, flagi logiczne dla „rozbiórki” i „ponownego okablowania” oraz tablicę „estimateItems”, w której każdy element ma „zadanie”, „kategorię” i „koszt bazowy”. Do pól dołączamy opisy (np. `opisz("Powierzchnia w metrach kwadratowych")`), aby pomóc LLM zrozumieć, jakie dane należy wyodrębnić do każdej nieruchomości.

3. Łączenie danych AI ze stanem interfejsu użytkownika React

Gdy backend przeanalizuje dane wejściowe i zwróci zweryfikowany obiekt JSON, aplikacja frontendu ładuje go do stanu React. Tworzy to wysoce responsywny, interaktywny przepływ:

• Ładowanie początkowe: użytkownik przesyła swój opis tekstowy. Pokazujemy wskaźnik ładowania. Gdy API zwróci JSON, wypełniamy stan komponentu lokalnego wartościami ekstrakcji AI.
• Obliczenia oparte na wzorach: Podczas gdy sztuczna inteligencja zapewnia wstępne szacunki i ceny bazowe, ostateczny koszt matematyczny jest obliczany lokalnie przy użyciu formuł React. Jeśli użytkownik zmieni zmienne, koszt zostanie natychmiast zaktualizowany, bez wysyłania żądań z powrotem do LLM.
• Hybrydowy system sterowania: interfejs użytkownika renderuje elementy sterujące (suwaki, przełączniki i listy rozwijane), które są powiązane bezpośrednio ze stanem. Dzięki temu użytkownik może skorygować sztuczną inteligencję. Jeśli sztuczna inteligencja nie zauważyła konieczności wymiany okablowania, użytkownik po prostu włącza przełącznik „Ponowne okablowanie”.

4. Renderowanie interaktywnych widżetów wizualnych

Aby zapewnić wysoką jakość obsługi, interfejs powinien przekształcać surowe liczby w atrakcyjne wizualnie wykresy i łatwe w użyciu widżety:

• Interaktywne suwaki: Mapuj parametr „obszar” na niestandardowy suwak zakresu HTML. Przeciągnięcie suwaka zwiększa mnożnik powierzchni, dynamicznie skalując koszt robocizny i materiałów każdego elementu zamówienia.
• Wykresy dynamiczne: grupuj elementy według kategorii (np. rozbiórka, wykończenia, elektryka) i wyświetlaj je na dynamicznym wykresie kołowym SVG lub na paskach postępu. To wizualnie komunikuje podział budżetu na pierwszy rzut oka.
• Edytowalne akordeony: Prezentuj szacunkowe pozycje pogrupowane według kategorii na składanych listach akordeonów. Pozwól użytkownikowi dostosować cenę jednostkową, usunąć zbędne zadania lub dodać własne notatki do poszczególnych pozycji.

5. Plan wdrożenia technicznego

Konfiguracja frontendu składa się z obszaru tekstowego do wprowadzania opisu, a następnie panelu estymatora. Zarządzamy stanem zmiennych takich jak „obszar” i „okablowanie” za pomocą React stanów haków. W funkcji renderowania obliczamy sumy: mnożymy koszty bazowe przez aktualną wartość suwaka powierzchni, dodając ryczałt za rozbiórkę, jeśli jest zaznaczona. Panel podsumowania wyświetla przeliczoną sumę wraz z interaktywnymi suwakami.

Łącząc elastyczną ekstrakcję kontekstu LLM ze ścisłymi ograniczeniami i szybką pętlą informacji zwrotnej React i TypeScript, firmy mogą tworzyć zautomatyzowane silniki wyceny B2B, które wydają się inteligentne, szybkie i całkowicie niezawodne.