Intelligent Forms Christian Liebel @christianliebel Consultant Spice up your Angular Forms with AI & LLMs

Hello, it’s me. Intelligent Forms Spice up your Angular Forms with AI & LLMs Christian Liebel X: @christianliebel Bluesky: @christianliebel.com Email: christian.liebel @thinktecture.com Angular, PWA & Generative AI Slides: thinktecture.com /christian-liebel

Overview Intelligent Forms Spice up your Angular Forms with AI & LLMs Generative AI Text OpenAI GPT Mistral … Speech OpenAI Whisper tortoise-tts … Images DALL·E Stable Diffusion … Audio/Music Musico Soundraw …

Large: Trained on lots of data Language: Process and generate text in natural language Models: Programs/neural networks Examples: – GPT (ChatGPT, Bing Chat, …) – Gemini, Gemma (Google) – LLaMa (Meta AI) Intelligent Forms Spice up your Angular Forms with AI & LLMs Large Language Models

Prompts serve as the universal interface Unstructured text conveying specific semantics Paradigm shift in software architecture Natural language becomes a first-class citizen Caveats Non-determinism and hallucination, prompt injections Intelligent Forms Spice up your Angular Forms with AI & LLMs Large Language Models

Use cases beyond chat bots…? Intelligent Forms Spice up your Angular Forms with AI & LLMs Large Language Models

Just transfer the 17.34 euros to me, my IBAN is DE02200505501015871393. I am with Hamburger Sparkasse (HASPDEHH). Data Extraction Intelligent Forms Spice up your Angular Forms with AI & LLMs Use Case Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz

Just transfer the 17.34 euros to me, my IBAN is DE02200505501015871393. I am with Hamburger Sparkasse (HASPDEHH). Data Extraction Intelligent Forms Spice up your Angular Forms with AI & LLMs Use Case Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz

protected readonly formGroup = this.fb.group({ firstName: [''], lastName: [''], addressLine1: [''], addressLine2: [''], city: [''], state: [''], zip: [''], country: [''], }); Intelligent Forms Spice up your Angular Forms with AI & LLMs Idea Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz Smart Form Filler (LLM)

DEMO Intelligent Forms Spice up your Angular Forms with AI & LLMs Idea

Form Field Prompt Generator Model Backend Response Parser Intelligent Forms Spice up your Angular Forms with AI & LLMs Architecture

Intelligent Forms Spice up your Angular Forms with AI & LLMs Form Field “Try to determine the country based on the input.” “If present, put the department in this field.”

Async Clipboard API Allows reading from/writing to the clipboard in an asynchronous manner Reading from the clipboard requires user consent first (privacy!) Supported by Chrome, Edge and Safari and Firefox Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt Generator

System message • The form has the following setup: { "firstName": "", "lastName": "" } User message • Passt, dann hier schonmal meine Adresse: Peter Müller Assistant message • { "firstName": "Peter", "lastName": "Müller" } Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt Generator

Cloud backends Intelligent Forms Spice up your Angular Forms with AI & LLMs Model Backend

Local backend (WebLLM) Intelligent Forms Spice up your Angular Forms with AI & LLMs Model Backend

https://webllm.mlc.ai/ Intelligent Forms Spice up your Angular Forms with AI & LLMs WebLLM

Intelligent Forms Spice up your Angular Forms with AI & LLMs

Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt API Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano

Part of Chrome’s Built-In AI initiative – Exploratory API for local experiments and use case determination – Downloads Gemini Nano into Google Chrome – Model can be shared across origins – Uses native APIs directly – Fine-tuning API might follow in the future Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt API https://developer.chrome.com/docs/ai/built-in

Demo: Smart Form Filler Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt API DEMO

Comparison 22.98 33.96 19.08 38.75 564.63 0 100 200 300 400 500 600 WebLLM (Mistral-7b, M1) WebLLM (Mistral-7b, M3) OpenAI (GPT-4) Azure OpenAI (GPT-4) Groq (Mixtral-8x7b) Tokens/sec Intelligent Forms Spice up your Angular Forms with AI & LLMs Performance WebLLM/Groq: Own tests (23.03.2024), OpenAI/Azure OpenAI: https://mcplusa.com/comparing-performance-of-openai-gpt-4-and-microsoft-azure-gpt-4/ (31.08.2023)

Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt Parser Assistant message • { "firstName": "Peter", "lastName": "Müller" }

Assistant message Parsing the assistant message as text/JSON/… Tool calling Specifying a well-defined interface via a JSON schema called by the LLM (safer, growing support) Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt Parser

– Super accurate – Versatile thanks to layered architecture – Runs in the browser, locally, or in the cloud – Very fast execution is possible via Groq https://github.com/thinktecture-labs/smart-form-filler Intelligent Forms Spice up your Angular Forms with AI & LLMs Summary

Q&A Intelligent Forms Spice up your Angular Forms with AI & LLMs

Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com