Intelligente Formulare: Angular Forms mit AI & LLMs aufpeppen

Ob Adressdaten, Bankdaten oder Bewerbungsinformationen – das Ausfüllen umfangreicher Formulare kann für Benutzer eine zeitraubende und mühsame Aufgabe sein. Wie wäre es, wenn Benutzer einfach einen Text in die Zwischenablage kopieren könnten und das Formular sich automatisch ausfüllt? Ein Smart Form Filler macht genau das möglich: Mit Hilfe eines Large Language Models (LLM), das sowohl den Inhalt der Zwischenablage als auch die Struktur des Formulars erkennt, können Ihre Angular-Formulare vollautomatisch ausgefüllt werden – auf Wunsch auch vollständig lokal und offlinefähig. Christian Liebel von Thinktecture zeigt Ihnen, wie Sie dieses Generative-AI-Feature in Angular implementieren können.

Transcript

1. Intelligente Formulare Christian Liebel @christianliebel Consultant Angular Forms mit AI & LLMs aufpeppen
2. 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
3. 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 …
4. 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
5. 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
6. Use cases beyond chat bots…? Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Large Language Models
7. Ü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
8. Ü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
9. 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)
10. Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Idea DEMO
11. Form Field Prompt Generator Model Backend Response Parser Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Architecture
12. 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.“
13. 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
14. 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
15. Cloud backends Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Model Backend
16. Local backend (WebLLM) Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Model Backend
17. https://webllm.mlc.ai/ Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen WebLLM
18. Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen
19. Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt API Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano
20. 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
21. First Glance Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt API
22. Demo: Smart Form Filler Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt API DEMO
23. 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)
24. Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt Parser Assistant message • { "firstName": "Peter", "lastName": "Müller" }
25. 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
26. – 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
27. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com