Vytvoření AI Cost Estimator: Analýza LLM výstupů do interaktivních komponent uživatelského rozhraní

V B2B a odvětvích orientovaných na služby je získání odhadu ceny nejdůležitějším krokem na cestě zákazníka. Tradiční odhady nákladů jsou však často únavné a vyžadují, aby uživatelé vyplňovali složité formuláře s desítkami zaškrtávacích políček, rozevíracích seznamů a textových polí. Toto tření vede k nízké míře dokončení. Co kdyby uživatelé mohli jednoduše popsat své požadavky v prostém textu a systém by okamžitě vygeneroval podrobný interaktivní odhad?

To je síla AI Cost Estimator. Pomocí velkých jazykových modelů (LLM) můžeme vzít nestrukturované vstupy přirozeného jazyka a analyzovat je do strukturovaných, spolehlivých datových struktur. V tomto článku si projdeme frontendovou a backendovou architekturu potřebnou k tomu, aby tato práce fungovala, se zaměřením na LLM strukturované výstupy, ověření schématu pomocí Zod a vazbu analyzovaných dat na React ovládací prvky uživatelského rozhraní.

1. Backend: Prosazování Strict JSON s LLM strukturovaných výstupů

Největší výzvou v nástrojích poháněných umělou inteligencí je spolehlivost. Pokud jednoduše vyzvete LLM, aby „vrátil JSON“, může se občas objevit zalomení textu, neplatné formáty nebo změna názvů klíčů. V produkci to narušuje vaši logiku analýzy frontendu.

K vyřešení tohoto problému nabízí moderní APIs (jako OpenAI, Gemini a Anthropic) strukturované výstupy. Tato funkce nutí model reagovat striktně podle schématu JSON. Toto schéma definujeme pomocí Zod, TypeScript-první deklarace schématu a knihovny validace. LLM funguje jako extrakční stroj, který mapuje volný popis uživatele přímo do námi definované struktury.

2. Definování schématu Zod odhadu

Pro odhad výstavby nebo rekonstrukce popisujeme schéma, které zachycuje rozměry projektu (např. plocha, počet místností), specifické požadavky (výměna elektroinstalace, demolice) a seznam odhadovaných nákladových položek. Zde je TypeScript příklad, jak definujeme cílovou JSON strukturu:

Nejprve definujeme `EstimateSchema` obsahující základní parametry jako `area` a `rooms`, booleovské příznaky pro `demolice` a `rewiring` a pole ,estimateItems`, kde každá položka má `task`, `category` a ,baseCost`. K polím připojujeme popisy (např. `describe("Plocha v metrech čtverečních")`), abychom pomohli LLM pochopit, jaká data by měla být do každé vlastnosti extrahována.

3. Připojení dat AI ke stavu React UI

Jakmile backend analyzuje vstup a vrátí ověřený objekt JSON, frontendová aplikace jej načte do stavu React. To vytváří vysoce citlivý, interaktivní tok:

• Počáteční načtení: Uživatel odešle svůj textový popis. Zobrazujeme indikátor načítání. Jakmile API vrátí JSON, naplníme stav lokální komponenty hodnotami extrakce AI.
• Výpočty založené na vzorcích: Zatímco AI poskytuje počáteční odhadované položky a základní ceny, výpočet konečných nákladů se počítá lokálně pomocí React vzorců. Pokud uživatel změní proměnné, cena se okamžitě aktualizuje, aniž by posílal požadavky zpět na LLM.
• Hybridní řídicí systém: Uživatelské rozhraní vykresluje ovládací prvky (posuvníky, přepínače a rozevírací seznamy), které jsou svázány přímo se stavem. To umožňuje uživateli opravit AI. Pokud umělá inteligence přehlédla, že potřebuje výměnu kabeláže, uživatel jednoduše zapne přepínač „Rewiring“.

4. Vykreslování interaktivních vizuálních widgetů

Pro zajištění vysoce kvalitního zážitku by rozhraní mělo transformovat nezpracovaná čísla na vizuálně přitažlivé grafy a snadno použitelné widgety:

• Interaktivní posuvníky: Mapujte parametr `area` na vlastní posuvník rozsahu HTML. Přetažením posuvníku zvýšíte multiplikátor plochy a dynamicky změníte mzdové a materiálové náklady každé řádkové položky.
• Dynamické grafy: Seskupte položky podle kategorií (např. Demolice, Dokončovací práce, Elektro) a zobrazte je v dynamickém kruhovém grafu SVG nebo ukazatelích průběhu. To na první pohled vizuálně sděluje rozpis rozpočtu.
• Upravitelné akordeony: Prezentujte položky odhadu seskupené podle kategorií uvnitř skládacích seznamů akordeonů. Umožněte uživateli upravit jednotkovou cenu, odstranit nadbytečné úkoly nebo přidat vlastní poznámky k jednotlivým položkám.

5. Technický plán implementace

Nastavení frontendu se skládá z textové oblasti pro zadání popisu, za kterou následuje řídicí panel odhadu. Stav proměnných jako `area` a `wiring` řídíme pomocí React hákových stavů. Ve funkci render vypočítáme součty: vynásobíme základní náklady aktuální hodnotou posuvníku plochy a přidáme paušální sazby za demolici, pokud jsou vybrány. Souhrnný panel zobrazuje přepočítaný součet vedle interaktivních posuvníků.

Kombinací flexibilní kontextové extrakce LLM s přísnými omezeními a rychlou zpětnou vazbou React a TypeScript mohou podniky vytvářet automatizované B2B citační nástroje, které působí chytře, rychle a naprosto spolehlivě.