Intelligente Formulare Christian Liebel @christianliebel Consultant Angular Forms mit AI & LLMs aufpeppen

Hello, it’s me. Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Christian Liebel X: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel

Speech OpenAI Whisper tortoise-tts … Overview Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Generative AI Images Midjourney DALL·E … Audio/Music Musico Soundraw … Text OpenAI GPT Mistral …

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) Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen 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 Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Large Language Models

Use cases beyond chat bots…? Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Large Language Models

Überweise mir die 17,34 Euro einfach, meine IBAN lautet DE02200505501015871393. Ich bin bei der Hamburger Sparkasse (HASPDEHH). Neulich auf Kleinanzeigen… Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Use Case Passt, dann hier schonmal meine Adresse: Peter Müller, Rheinstr. 7, 04435 Schkeuditz

Überweise mir die 17,34 Euro einfach, meine IBAN lautet DE02200505501015871393. Ich bin bei der Hamburger Sparkasse (HASPDEHH). Neulich auf Kleinanzeigen… Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Use Case Passt, dann hier schonmal meine Adresse: Peter Müller, Rheinstr. 7, 04435 Schkeuditz

protected readonly formGroup = this.fb.group({ firstName: [''], lastName: [''], addressLine1: [''], addressLine2: [''], city: [''], state: [''], zip: [''], country: [''], }); Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Idea Passt, dann hier schonmal meine Adresse: Peter Müller, Rheinstr. 7, 04435 Schkeuditz Smart Form Filler (LLM)

Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Idea DEMO

Form Field Prompt Generator Model Backend Response Parser Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Architecture

Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Form Field „Versuche das Land anhand der Eingaben zu bestimmen.“ „Wenn vorhanden, schreibe die Abteilung in dieses Feld.“

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 (plain-text only) Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen 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" } Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt Generator

Cloud backends Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Model Backend

Local backend (WebLLM) Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Model Backend

https://webllm.mlc.ai/ Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen WebLLM

Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen

Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen 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 Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt API https://developer.chrome.com/docs/ai/built-in

First Glance Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt API

Demo: Smart Form Filler Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt API DEMO

Comparison 22.98 33.96 568.06 909.62 0 100 200 300 400 500 600 700 800 900 1000 WebLLM (Mistral-7b, M1) WebLLM (Mistral-7b, M3) Groq (Mixtral-8x7b) Groq (Llama3-8b) Tokens/sec Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Performance Own tests (WebLLM: 23.03.2024, Groq: 01.05.2024)

Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen 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) Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen 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 Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Summary

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]