Slide 1

Slide 1 text

Smart Form Filler Spice up your Forms With Generative AI & LLMs Christian Liebel | Consultant | Thinktecture AG | [email protected]

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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) Smart Form Filler Spice up your Forms With Generative AI & LLMs Large Language Models

Slide 5

Slide 5 text

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 Smart Form Filler Spice up your Forms With Generative AI & LLMs Large Language Models

Slide 6

Slide 6 text

Smart Form Filler Spice up your Forms With Generative AI & LLMs Use cases beyond chat bots…? Source: https://www.apple.com/chde/apple-intelligence/

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Smart Form Filler Spice up your Forms With Generative AI & LLMs Idea DEMO

Slide 11

Slide 11 text

Form Field Prompt Generator Model Backend Response Parser Smart Form Filler Spice up your Forms With Generative AI & LLMs Architecture

Slide 12

Slide 12 text

Smart Form Filler Spice up your Forms With Generative AI & LLMs Form Field “Try to determine the country based on the user’s input.” “If present, put the department in this field.”

Slide 13

Slide 13 text

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, Safari and Firefox Smart Form Filler Spice up your Forms With Generative AI & LLMs Prompt Generator

Slide 14

Slide 14 text

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" } Smart Form Filler Spice up your Forms With Generative AI & LLMs Prompt Generator

Slide 15

Slide 15 text

Cloud backends Smart Form Filler Spice up your Forms With Generative AI & LLMs Model Backend

Slide 16

Slide 16 text

Local backend (WebLLM) Smart Form Filler Spice up your Forms With Generative AI & LLMs Model Backend

Slide 17

Slide 17 text

https://webllm.mlc.ai/ Smart Form Filler Spice up your Forms With Generative AI & LLMs WebLLM

Slide 18

Slide 18 text

Smart Form Filler Spice up your Forms With Generative AI & LLMs

Slide 19

Slide 19 text

Smart Form Filler Spice up your Forms With Generative AI & LLMs Prompt API Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano

Slide 20

Slide 20 text

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 Smart Form Filler Spice up your Forms With Generative AI & LLMs Prompt API https://developer.chrome.com/docs/ai/built-in

Slide 21

Slide 21 text

Demo: Smart Form Filler Smart Form Filler Spice up your Forms With Generative AI & LLMs Prompt API DEMO

Slide 22

Slide 22 text

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 Smart Form Filler Spice up your Forms With Generative AI & LLMs Performance Own tests (WebLLM: 23.03.2024, Groq: 01.05.2024)

Slide 23

Slide 23 text

Smart Form Filler Spice up your Forms With Generative AI & LLMs Prompt Parser Assistant message • { "firstName": "Peter", "lastName": "Müller" }

Slide 24

Slide 24 text

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) Smart Form Filler Spice up your Forms With Generative AI & LLMs Prompt Parser

Slide 25

Slide 25 text

– 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 Smart Form Filler Spice up your Forms With Generative AI & LLMs Summary

Slide 26

Slide 26 text

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