Intelligent Forms: Spice up Your Angular Forms with AI & LLMs

Whether it's address data, bank details, or job application information - filling out extensive forms can be a time-consuming and tedious task for users. What if users could simply copy text to the clipboard and the form would fill itself in automatically? A Smart Form Filler makes exactly that possible: with the help of a Large Language Model (LLM), which recognises both the content of the clipboard and the structure of the form, your Angular forms can be filled out fully automatically - even completely locally and offline-capable, if desired. Christian Liebel from Thinktecture shows you how to implement this generative AI feature in Angular.

Transcript

1. Intelligent Forms Christian Liebel @christianliebel Consultant Spice up your Angular Forms with AI & LLMs
2. 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
3. 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 …
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) Intelligent Forms Spice up your Angular Forms with AI & LLMs 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 Intelligent Forms Spice up your Angular Forms with AI & LLMs Large Language Models
6. Use cases beyond chat bots…? Intelligent Forms Spice up your Angular Forms with AI & LLMs Large Language Models
7. 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
8. 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
9. 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)
10. DEMO Intelligent Forms Spice up your Angular Forms with AI & LLMs Idea
11. Form Field Prompt Generator Model Backend Response Parser Intelligent Forms Spice up your Angular Forms with AI & LLMs Architecture
12. 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.”
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 Intelligent Forms Spice up your Angular Forms with AI & LLMs 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" } Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt Generator
15. Cloud backends Intelligent Forms Spice up your Angular Forms with AI & LLMs Model Backend
16. Local backend (WebLLM) Intelligent Forms Spice up your Angular Forms with AI & LLMs Model Backend
17. https://webllm.mlc.ai/ Intelligent Forms Spice up your Angular Forms with AI & LLMs WebLLM
18. Intelligent Forms Spice up your Angular Forms with AI & LLMs
19. Intelligent Forms Spice up your Angular Forms with AI & LLMs 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 Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt API https://developer.chrome.com/docs/ai/built-in
21. Demo: Smart Form Filler Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt API DEMO
22. 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)
23. Intelligent Forms Spice up your Angular Forms with AI & LLMs Prompt Parser Assistant message • { "firstName": "Peter", "lastName": "Müller" }
24. 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
25. – 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
26. Q&A Intelligent Forms Spice up your Angular Forms with AI & LLMs
27. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com