Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intelligente Formulare: Angular Forms mit AI & LLMs aufpeppen

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 zeigt, wie dieses Generative-AI-Feature in Angular implementiert werden kann.

Christian Liebel

June 05, 2024
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. 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
  2. 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 …
  3. 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
  4. 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
  5. Ü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
  6. Ü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
  7. 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)
  8. 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.“
  9. 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
  10. 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
  11. 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)
  12. Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Prompt

    Parser Assistant message • { "firstName": "Peter", "lastName": "Müller" }
  13. 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
  14. – Super accurate – Versatile thanks to layered architecture –

    Runs in the browser, locally, or in the cloud – Very fast execution is possible via Groq – More details? Expert 1:1 Intelligente Formulare Angular Forms mit AI & LLMs aufpeppen Summary