Beyond Chat: Smarte Anwendungen mit LLM-Power

LLMs (Large Language Models) und KI-Assistenten gehören mittlerweile in vielfältigster Auswahl zu unserem Alltag. Wenn es jedoch um die Integration in Anwendungen geht, bekommen wir meist nur einen Chat serviert. Was wäre aber, wenn wir die Power von LLMS nutzen und sie zusammen mit modernen Browser-APIs in unsere Webapplikationen "einweben", um gezielt zeitraubende Tasks zu lösen und zudem noch eine ansprechende User Experience liefern?

Dieser Vortrag zeigt in einem End-to-End Beispiel, wie du abseits des Chats, mithilfe von Text-, Sprach- und Bildeingaben komplexe Formularstrukturen füllen und moderne Browser-APIs nutzen kannst.

Transcript

1. Beyond Chat Smarte Anwendungen mit LLM-Power Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Beyond Chat Smarte Anwendungen mit LLM-Power
3. Definition Beyond Chat Smarte Anwendungen mit LLM-Power
4. Realworld example – Restaurant visit • The restaurant's color scheme and branding • The layout and design of the menu • The presentation of the food • The uniforms of the staff • The table settings and decor • The signage and typography used UI Beyond Chat Smarte Anwendungen mit LLM-Power
5. Digital context • Visual Elements • Interactive Elements • The visual language that communicates the UX • Design Principles • Proximity • Alignment • Etc. • Follows patterns and conventions • Good UI is both beautiful AND functional UI Beyond Chat Smarte Anwendungen mit LLM-Power
6. Realworld example – Restaurant visit • The ease of finding the restaurant is UX • The welcome you receive at the door is UX • The menu's clarity and organization is UX • The comfort of your chair is UX • The time it takes to get your food is UX • The overall satisfaction after your meal is UX UX Beyond Chat Smarte Anwendungen mit LLM-Power
7. Digital context • Usability - How easy is it to use? • Accessibility - Can everyone use it? • Performance - How well does it work? • Design - How does it feel? • Functionality - Does it solve the user's problem? • Emotion - How does it make users feel? UX Beyond Chat Smarte Anwendungen mit LLM-Power
8. A little checklist ❑ Solves real problems ❑ Is intuitive to use ❑ Creates positive emotions ❑ Meets user needs efficiently ❑ Is memorable for the right reasons Good UX Beyond Chat Smarte Anwendungen mit LLM-Power
9. Quelle: https://www.youtube.com/watch?v=-P-ein58laA Beyond Chat Smarte Anwendungen mit LLM-Power
11. Beyond Chat Smarte Anwendungen mit LLM-Power
12. • Familiar mental model • Uses natural language • Easy to implement • Easy to iterate and refine Advantages of chat interfaces Beyond Chat Smarte Anwendungen mit LLM-Power
13. Beyond Chat Smarte Anwendungen mit LLM-Power
14. Beyond Chat Smarte Anwendungen mit LLM-Power
15. • Too much cognitive load • How to phrase requests • Mental effort to formulate • Unnecessary back and forth • Context Management • Do what I want, not what I say • Unclear system capabilities Disadvantages of chat interfaces Beyond Chat Smarte Anwendungen mit LLM-Power
16. A little checklist ❑ Solves real problems ❑ Is intuitive to use ❑ Creates positive emotions ❑ Meets user needs efficiently ❑ Is memorable for the right reasons Good UX Beyond Chat Smarte Anwendungen mit LLM-Power
17. Large Language Models Beyond Chat Smarte Anwendungen mit LLM-Power
18. Überblick Generative AI Beyond Chat Smarte Anwendungen mit LLM-Power
19. • Can understand and process different types of information (modalities) • Text • Video • Audio • Images Multi Modale Modelle Beyond Chat Smarte Anwendungen mit LLM-Power
20. • Natural language understanding and generation • Knowledge integration and reasoning • Task versatility and adaption • Contextual memory • Pattern recognition and analysis Strengths of LLMs Beyond Chat Smarte Anwendungen mit LLM-Power
21. Example: Smart Forms Beyond Chat Smarte Anwendungen mit LLM-Power
22. The Scenario LLM Mapping Beyond Chat Smarte Anwendungen mit LLM-Power
23. What do we need to make it work? Building Blocks Beyond Chat Smarte Anwendungen mit LLM-Power System- Message / Prompt User Message Agent Message • LLM needs to know the structure of our form and the meaning of the fields • LLM needs instructions what to do and how we want the answer to be structured. • LLM needs the data it should work with • Parse / Fill results into form
24. Building a hidden prompt System Message User Message Agent Message Beyond Chat Smarte Anwendungen mit LLM-Power “Give an answer with only the following lines and values derived from USER_MESSAGE”
25. Beispielanwendung animieren <Demo/>
26. A little checklist ❑ Solves real problems ❑ Is intuitive to use ❑ Creates positive emotions ❑ Meets user needs efficiently ❑ Is memorable for the right reasons Good UX Beyond Chat Smarte Anwendungen mit LLM-Power
27. • Traceability? • What comes from me and what from the AI? • Which fields did I fill in again? • Undo / Redo • Visually distinguishable Problems that occur Beyond Chat Smarte Anwendungen mit LLM-Power
28. Beispielanwendung animieren <Demo/>
29. Smart UX with AI • When we integrate AI-Features in our web apps they should address real problems • Do not pursue a technology for their own sake • Use the strengths of Large Language Models in combination with structured data • Think out of the box • Show the user what is happening • Use established patterns and like to learn from the “big ones” Conclusion Beyond Chat Smarte Anwendungen mit LLM-Powers
30. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön!