Smartere SPAs bauen mit offlinefähigen KI-Funktionen

Künstliche Intelligenz (KI) hat sich zu einem bedeutenden Trend in der IT entwickelt. Zeit, KI-Funktionen auch in unsere Single-Page Apps (SPAs) einzubauen: Christian Liebel von Thinktecture zeigt Ihnen, wie Sie Large-Language- und Stable-Diffussion-Modelle offlinefähig in Ihre Anwendungen integrieren können. Ermöglicht wird dies durch WebGPU, eine hochmoderne Webtechnologie, die nicht nur ein noch besseres Rendering von 3‑D-Anwendungen im Web erlaubt, sondern auch die Ausführung von Machine-Learning-Modellen direkt im Browser. Das funktioniert auch dann, wenn der Anwender keine Internetverbindung hat, was für eine höhere Anwendungsperformance und geringere Kosten sorgen kann. Wie bei jeder neuen Technologie gibt es auch hier Herausforderungen, wie ein hoher Bandbreitenverbrauch, begrenzte Browserunterstützung und geringere Genauigkeit. Neben den Vor- und Nachteilen werden auch Alternativen vorgestellt, sodass Sie nach diesem Vortrag entscheiden können, ob und wie Sie KI-Funktionen in Ihre SPA einbauen wollen.

Transcript

1. Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Christian Liebel
   @christianliebel
   Consultant
   

   View Slide

2. Hello, it’s me.
   Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Christian Liebel
   X:
   @christianliebel
   Email:
   christian.liebel
   @thinktecture.com
   Angular & PWA
   Slides:
   thinktecture.com
   /christian-liebel
   

   View Slide

3. What to expect
   Focus on web app development
   Focus on Generative AI
   Up-to-date insights: the ML/AI
   field is evolving fast
   Live demos on real hardware
   What not to expect
   Deep dive into AI specifics
   Stable libraries or specifications
   Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Expectations
   

   View Slide

4. Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Generative AI everywhere
   

   View Slide

5. Run locally on the user’s system
   Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Single-Page Applications
   Server-
   Logik
   Web API
   Push Service
   Web API
   DBs
   HTML, JS,
   CSS, Assets
   Webserver Webbrowser
   SPA
   Client-
   Logik
   View
   HTML/CSS
   View
   HTML/CSS
   View
   HTML/CSS
   HTTPS
   WebSockets
   HTTPS
   HTTPS
   

   View Slide

6. Make SPAs offline-capable
   Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Progressive Web Apps
   Service
   Worker
   Internet
   Website
   HTML/JS
   Cache
   fetch
   

   View Slide

7. Speech
   OpenAI Whisper
   tortoise-tts
   …
   Overview
   Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Generative AI
   Images
   Midjourney
   DALL·E
   Stable Diffusion
   …
   Audio/Music
   Musico
   Soundraw
   …
   Text
   OpenAI GPT
   LLaMa
   Vicuna
   …
   

   View Slide

8. Speech
   OpenAI Whisper
   tortoise-tts
   …
   Overview
   Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Generative AI
   Images
   Midjourney
   DALL·E
   Stable Diffusion
   …
   Audio/Music
   Musico
   Soundraw
   …
   Text
   OpenAI GPT
   LLaMa
   Vicuna
   …
   

   View Slide

9. Examples
   Smartere SPAs bauen
   mit offlinefähigen KI-Funktionen
   Generative AI Cloud Providers
   

   View Slide

10. Drawbacks
    – Require an active internet connection
    – Affected by network latency and server availability
    – Data is transferred to the cloud service
    – Require a subscription
    à Can we run models locally?
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Generative AI Cloud Providers
    

    View Slide

11. Large: Trained on lots of data
    Language: Process and generate text
    Models: Programs/neural networks
    Examples:
    – GPT (ChatGPT, Bing Chat, …)
    – LaMDA (Google Bard)
    – LLaMa (Meta AI)
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Large Language Models
    

    View Slide

12. Token
    A meaningful unit of text (e.g., a word, a part of a word, a character).
    Context Window
    The maximum amount of tokens the model can process.
    Parameters
    Internal variables learned during training, used to make predictions.
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Large Language Models
    

    View Slide

13. Prompts serve as the universal interface
    Unstructured text conveying specific semantics
    Paradigm shift in software architecture
    Human language becomes a first-class citizen
    Caveats
    Non-determinism and hallucination, prompt injections
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Large Language Models
    

    View Slide

14. https://webllm.mlc.ai/
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Large Language Models
    

    View Slide

15. Size Comparison
    Model:Parameters Size
    mistral:7b 4.1 GB
    vicuna:7b 3.8 GB
    llama2:7b 3.8 GB
    llama2:13b 7.4 GB
    llama2:70b 39.0 GB
    zephyr:7b 4.1 GB
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Large Language Models
    

    View Slide

16. Storing model files locally
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Cache API
    Internet
    Website
    HTML/JS
    Cache with
    model files
    Hugging
    Face
    

    View Slide

17. Parameter cache
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Cache API
    

    View Slide

18. Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    WebAssembly (Wasm)
    Bytecode for the web
    Compile target for arbitrary
    languages
    Can be faster than JavaScript
    WebLLM needs the model and a
    Wasm library to accelerate
    model computations
    

    View Slide

19. Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    WebGPU
    Grants low-level access to the
    Graphics Processing Unit (GPU)
    Near native performance for
    machine learning applications
    Supported by Chromium-based
    browsers on Windows and
    macOS from version 113
    

    View Slide

20. Grants web applications access to the Neural Processing Unit (NPU) of
    the system via platform-specific machine learning services
    (e.g., ML Compute on macOS/iOS, DirectML on Windows, …)
    Even better performance when compared to WebGPU
    Currently in specification by the WebML Working Group at W3C
    Implementation in progress for Chromium-based browsers
    https://webmachinelearning.github.io/webnn-intro/
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Outlook: WebNN
    

    View Slide

21. On NPM
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    WebLLM
    

    View Slide

22. Live Demo
    Add a “copilot” to a todo application using the @mlc-ai/web-llm
    package.
    For the sake of simplicity, all TODOs are added to the prompt.
    Remember: LLMs have a context window. If you need to chat with a
    larger set of text (including documents), please refer to Retrieval
    Augmented Generation (RAG).
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Large Language Models
    

    View Slide

23. Text-to-image model
    Generates 512x512px images
    from a prompt
    Runs on “commodity” hardware
    (with 8 GB VRAM)
    Open-source
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Stable Diffusion
    

    View Slide

24. Specialized version of the Stable Diffusion model for the web
    2 GB in size
    Subject to usage conditions: https://huggingface.co/runwayml/stable-
    diffusion-v1-5#uses
    No npm package this time
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Web Stable Diffusion
    

    View Slide

25. https://websd.mlc.ai/
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Web Stable Diffusion
    

    View Slide

26. Live Demo
    Retrofitting AI image generation
    into an existing drawing application
    (https://paint.js.org)
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Web Stable Diffusion
    

    View Slide

27. Advantages
    – Data does not leave the browser
    – High availability (offline support)
    – Low latency
    – Low cost
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Local AI Models
    

    View Slide

28. Disadvantages
    – High system requirements (RAM, GPU)
    – High bandwidth requirements (large model size)
    – WebGPU is only supported by Chromium-based browsers
    – WebNN is not available yet
    – Loading the model takes time
    – Models cannot be shared across origins
    – Potent models such as GPT are closed-source
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Local AI Models
    

    View Slide

29. Mitigations
    Download model in the background if the user is not on a metered
    connection
    Helpful APIs:
    – Network Information API to estimate the network quality/determine
    data saver (negative standards position by Apple and Mozilla)
    – Storage Manager API to estimate the available free disk space
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Local AI Models
    

    View Slide

30. Alternatives: Ollama
    Local runner for AI models
    Offers a local server a website
    can connect to à allows sharing
    models across origins
    Supported on macOS and Linux
    (Windows coming soon)
    https://webml-demo.vercel.app/
    https://ollama.ai/
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Local AI Models
    

    View Slide

31. Hugging Face Transformers
    Pre-trained, specialized, significantly smaller models beyond GenAI
    Examples:
    – Text generation
    – Image classification
    – Translation
    – Speech recognition
    – Image-to-text
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Alternatives
    

    View Slide

32. Transformers.js
    JavaScript library to run
    Hugging Face transformers
    in the browser
    Supports most of the models
    https://xenova.github.io/transformers.js/
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Alternatives
    

    View Slide

33. – Cloud-based models (especially OpenAI/GPT) remain the most potent
    models and are easier to integrate (for now)
    – Due to their size and high system requirements, local generative AI
    models are currently rather interesting for very special scenarios (e.g.,
    high privacy demands, offline availability)
    – Small, specialized models are an interesting alternative (if available)
    – Open-source generative AI models rapidly advance and are becoming
    more compact and efficient
    – Computers are getting more powerful
    Smartere SPAs bauen
    mit offlinefähigen KI-Funktionen
    Summary
    

    View Slide

34. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide