Inspirationsbild zum Open-Book-Question-Answering
Home Sweet Home
Deep-Learning im eigenen Webbrowser (01.05.2025)
Förderjahr 2023 / Stipendien Call #18 / ProjektID: 6822 / Projekt: Efficiently Perform Open-Book Question Answering Purely in the User’s Web Browser

In diesem Beitrag untersuchen wir Software-Werkzeuge, um Deep-Learning-Modelle wie Large-Language-Models direkt im Webbrowser auszuführen. Dabei analysieren wir, wie diese die Entwicklung unseres geplanten Open-Book-QA-Systems unterstützen können.

Deep Learning (DL) hat sich in den letzten Jahren zu einem zentralen Bestandteil moderner Webanwendungen entwickelt [18]. Durch personalisierte und adaptive Funktionalitäten verbessert es die User-Experience erheblich [13] [16]: Ein Trend, der sich deutlich laut Mayes & Bankoski [23] in der zunehmenden Integration von künstlicher Intelligenz (KI) in Webbrowser-basierten Anwendungen abzeichnet. Dabei lässt sich zwischen serverseitiger Modellausführung – wie etwa bei Verwendung von chatgpt.com – und sogenannter In-Browser-Inferenz [4] – einem Ansatz, bei dem DL-Modelle direkt im Webbrowser ausgeführt werden – unterscheiden [24] [31].

Vorteile von In-Browser-Inferenz

Im Kern nutzt die In-Browser-Inferenz den Webbrowser als Ausführungsumgebung für Modelle und ermöglicht dadurch eine Echtzeitverarbeitung ohne Rückgriff auf serverseitige Rechenzentren [24]. Dies bietet mehrere Vorteile: Erstens senkt sie die Eintrittshürde für KI-basierte Webanwendungen, da Nutzer*innen weder spezialisierte Hardware noch Softwareinstallationen benötigen [31]. Zweitens werden die Kosten für Cloud-Ressourcen reduziert, weil Rechenoperationen lokal im Webbrowser stattfinden [23]. Drittens stärkt dieser Ansatz den Schutz sensibler Daten, da diese das Endgerät nicht verlassen müssen; ein Aspekt, der insbesondere im Umgang mit personenbezogenen Informationen oder beim Einsatz Large-Language-Models (LLMs) von Bedeutung ist [12] [25].

Ein weiterer Pluspunkt ist die Unterstützung von Offline-Funktionalität sowie die Fähigkeit zu unmittelbarem Feedback [23] – entscheidend für die Entwicklung unseres geplanten Open-Book-QA-Systems. Webtechnologien wie WebAssembly [6] und WebGPU [7] treiben diese Entwicklung technisch voran, indem sie eine performante und effiziente Ausführung direkt im Webbrowser ermöglichen [31].

Herausforderungen von In-Browser-Inferenz

Trotz dieser Vorteile steht In-Browser-Inferenz aber auch vor nicht zu unterschätzenden Herausforderungen: Dazu zählen vor allem leistungstechnische Einschränkungen, etwa im Vergleich zur Ausführung in nativen Umgebungen [4] [16], sowie die Notwendigkeit, eine möglichst breite Kompatibilität mit unterschiedlichen Webbrowsern, Geräten und Hardwarekonfigurationen sicherzustellen [31].

Forschungsziele und Methodik

Vor diesem Hintergrund wollen wir mit diesem Blogbeitrag

  1. die entscheidenden Software-Werkzeuge, die eine DL-Modellausführung im Webbrowser ermöglichen, identifizieren und
  2. diese mit Blick auf unser zu entwickelndes geplanten Open-Book-QA-Systems evaluieren.

Ausgangspunkt dafür ist eine Multivocal-Literature-Review [12], mit dessen Hilfe wir relevante Software-Werkzeuge identifizieren und kategorisieren. Im Anschluss unterziehen wir diese einer vergleichenden Analyse [19], wobei wir sowohl technische Merkmale als auch Popularität und Community-Aktivität einbeziehen. 

Identifizierte Software-Werkzeuge

Im Zuge unserer Recherche wurden zunächst 73 wissenschaftliche Publikationen gesichtet, von denen sieben unseren Einschlusskriterien entsprachen. Aufbauend darauf konnten wir neun Software-Werkzeuge identifizieren, die als relevant für In-Browser-Inferenz gelten:

  • Brain.js (vgl. [23] [2] [26] [16] [13] [31]),
  • ConvNetJS (vgl. [23] [2] [26] [16] [13]),
  • Keras.js (vgl. [23] [26] [13] [31]),
  • Mind (vgl. [23] [13] [16]),
  • ml5.js (vgl. [2] [26] [16] [13]),
  • ONNX.js (vgl. [13] [17]),
  • Synaptic (vgl. [23] [26] [16] [13]),
  • TensorFlow.js (vgl. [23] [2] [26] [16] [13] [31]),
  • WebDNN (vgl. [23] [26] [13] [31]).

Diese Funde wurden durch 13 Projektwebsites, Entwicklerblogs sowie 9 einschlägige YouTube-Beiträge ergänzt. Dabei zeigte sich, dass zahlreiche dieser Software-Werkzeuge – darunter ConvNetJS, Keras.js, Mind, ONNX.js und Synaptic – mittlerweile nicht mehr aktiv gepflegt werden [30] [27]. Zugleich konnten drei weitere Lösungen identifiziert werden, die in der Forschung bislang kaum systematisch erfasst sind:

  • MediaPipe [22],
  • Transformers.js [11], und
  • WebLLM [1].

Kategorisierung und Auswahl von Software-Werkzeuge

Die insgesamt zwölf analysierten Werkzeuge lassen sich grob in zwei Kategorien einteilen,

  1. JavaScript-basierte Frameworks, die Modelle direkt per JavaScript ausführen [2], sowie
  2. WebAssembly-basierte Lösungen, die auf kompilierten, hardwareeffizienten Modellen beruhen [31].

Im Fokus unserer Analyse stehen MediaPipe [22], Transformers.js [11] und TensorFlow.js [30] als drei aktiv gepflegte, vielseitige WebAssembly-basierte Lösungen. Sie wurden aufgrund ihrer aktiven Pflege, breiten Nutzung [24] und dokumentierten Leistungsfähigkeit ausgewählt [31] [21].

MediaPipe ist ein von Google entwickeltes Framework zur Umsetzung multimodaler DL-Pipelines [22]. Durch die Nutzung von WebAssembly eignet es sich besonders für Echtzeitanwendungen wie Gesichtserkennung oder Gestensteuerung [22]. TensorFlow.js ist eine flexible JavaScript-Bibliothek für DL-Aufgaben wie Bild- und Textklassifikation [31]. Bekannte Modelle wie MobileNet [15] lassen sich direkt im Browser einsetzen [26]. Transformers.js basiert auf dem ONNX Runtime Web [9] und bringt LLMs wie BERT direkt in den Browser. Damit lassen sich moderne Textanwendungen wie Sentimentanalyse oder maschinelle Übersetzung lokal durchführen [21].

Vergleich ausgewählter Software-Werkzeuge

Im Vergleich der drei ausgewählten Software-Werkzeuge lassen sich mehrere zentrale Erkenntnisse gewinnen: MediaPipe und Transformers.js zeigen in den ersten vier Monaten des Jahrs 2025 eine hohe Entwicklungsaktivität [19], wie aus den GitHub-Commit-Frequenzen zwischen Jänner und April 2025 hervorgeht. MediaPipe überzeugt darüber hinaus durch eine starke Community-Interaktion: Insgesamt 93 % der Issues wurden gelöst. TensorFlow.js weist hingegen im gleichen Zeitraum eine stabilere, aber weniger intensive Commit-Frequenz auf.

Bei den unterstützten Aufgaben spielt Transformers.js seine Stärken im Bereich textbasierter Anwendungen LLMs aus [21]. MediaPipe hingegen fokussiert sich auf Echtzeit-Features in Vision und Audio, etwa bei Gesichtserkennung und Gestenerkennung [22]. TensorFlow.js [30] bietet als Generalist ein breites Spektrum und deckt Bild-, Text- sowie Audioverarbeitung ab, wodurch es sich für diverse Webanwendungen eignet [31].

Unterschiede zeigen sich auch bei der Browserkompatibilität: MediaPipe unterstützt primär Chrome und Safari [14], während Transformers.js und TensorFlow.js zusätzlich Firefox und Edge abdecken [11] [30]. Hinsichtlich Popularität führt MediaPipe mit fast rund 30.000 GitHub-Stars, gefolgt von TensorFlow.js (19.000) und Transformers.js (13.500).

Fazit

Unsere Analyse zeigt: Transformers.js eignet sich besonders für textbasierte KI-Anwendungen mit LLMs wie etwa unser zu implantierendes Open-Book-QA-Systems und überzeugt durch hohe Entwicklungsaktivität. MediaPipe bietet als Framework für Echtzeit-Interaktionen im Bereich Vision und Audio nicht nur starke technische Fähigkeiten, sondern auch eine äußerst aktive Community. TensorFlow.js stellt als vielseitiges Werkzeug mit solider Weiterentwicklung und breiter Anwendungsunterstützung eine ausgewogene Lösung für verschiedenste ML-Szenarien im Browser dar.

Wesentliche Literatur

[1] Charlie F., … & Tianqi Chen. (2025). WebLLM: A high-performance in-browser LLM inference engine. https://github.com/mlc-ai/web-llm. (Zugriff: 1. Mai 2025).

[2] Cai, S., Bileschi, S., Nielsen, E. D., & Chollet, F. (2020). Deep Learning with JavaScript: Neural Networks in TensorFlow.js. Manning Publications.

[3] Chen, T., ... Krishnamurthy, A. (2018). TVM: An automated End-to-End optimizing compiler for deep learning. In 13th USENIX Symposium on Operating Systems Design and Implementation (OSDI 18) (pp. 578–594).

[4] Chen, Z., … & Liu, X. (2020). A comprehensive study on challenges in deploying deep learning based software. Proceedings of the 28th ACM Joint Meeting on European Software Engineering Conference and Symposium on the Foundations of Software Engineering, 750–762.

[5] N. N. (2024). Open Neural Network Exchange Intermediate Representation (ONNX IR) Specification. https://onnx.ai/onnx/repo-docs/IR.html. (Zugriff: 1. Mai 2025).

[6] N. N. (2024). WebAssembly. https://www.w3.org/TR/wasm-core-2. (Zugriff: 1. Mai 2025).

[7] N. N. (2025). WebGPU. https://www.w3.org/TR/webgpu. (Zugriff: 1. Mai 2025).

[8] Cyphers, S., … Kanawi, O. (2018). Intel nGraph: An intermediate representation, compiler, and executor for deep learning. arXiv preprint arXiv:1801.08058.

[9] N. N. (2025). ONNX Runtime Web. https://onnxruntime.ai/docs/tutorials/web. (Zugriff: 1. Mai 2025).

[10] Ekman, M. (2021). Learning Deep Learning: Theory and Practice of Neural Networks, Computer Vision, Natural Language Processing, and Transformers Using TensorFlow. Addison-Wesley Professional.

[11] Face, H. (o. J.). Transformers.js. https://huggingface.co/docs/hub/en/transformers-js. (Zugriff: 1. Mai 2025).

[12] Garousi, V., … & Mäntylä, M. V. (2019). Guidelines for including grey literature and conducting multivocal literature reviews in software engineering. Information and Software Technology, 106, 101–121.

[12] Goh, H. A., … & Abas, F. S. (2023). Front-end deep learning web apps development and deployment: A review. Applied Intelligence, 53(12), 15923–15945.

[13] Google. (o. J.). MediaPipe Face Mesh. https://ai.google.dev/edge/mediapipe/solutions/setup_web. (Zugriff: 1. Mai 2025).

[14] Howard, A. G., … & Adam, H. (2017). MobileNets: Efficient convolutional neural networks for mobile vision applications. arXiv preprint arXiv:1704.04861.

[15] Jain, P., … & Maitrey, S. (2021). Machine learning for web development: A fusion. In Artificial Intelligence and Speech Technology (S. 45–52). CRC Press.

[16] Jajal, P., … & Davis, J. C. (2024). Interoperability in deep learning: A user survey and evaluation of software tools for running DL models in the web browser. Proceedings of the 33rd ACM SIGSOFT International Symposium on Software Testing and Analysis, 1466–1478.

[17] Jakhar, D., & Kaur, I. (2020). Artificial intelligence, machine learning and deep learning: Definitions and differences. Clinical and Experimental Dermatology, 45(1), 131–132.

[18] Kiyokawa, K., & Jin, Q. (2021). A front-end framework selection assistance system with customizable quantification indicators based on analysis of repository and community data. International Conference on Big Data Analytics, 41–55.

[19] Li, M., … & Qian, D. (2020). The deep learning compiler: A comprehensive survey. IEEE Transactions on Parallel and Distributed Systems, 32(3), 708–727. https://doi.org/10.1109/TPDS.2020.3030548

[20] Lochner, J. (2024). Transformers.js: Run large language models in the browser. https://youtu.be/n18Lrbo8VU8. (Zugriff: 1. Mai 2025).

[21] Lugaresi, C., … & Grundmann, M. (2019). MediaPipe: A framework for building perception pipelines. arXiv preprint arXiv:1906.08172.

[22] Ma, Y., … & Liu, X. (2019). Moving deep learning into web browser: How far can we go? Proceedings of The World Wide Web Conference, 1234–1244. https://doi.org/10.1145/3308558.3313639

[23] Mayes, J., & Bankoski, J. (2024). Web AI 101 - The state of web AI in 2024. https://youtu.be/tF70o1Q8VkM. (Zugriff: 1. Mai 2025).

[24] Min, B., … & Roth, D. (2023). Recent advances in natural language processing via large pretrained language models: A survey. ACM Computing Surveys, 56(2), 1–40.

[25] Pournaras, X., & Koutsomitropoulos, D. A. (2020). Deep learning on the web: State-of-the-art object detection using web-based client-side frameworks. 2020 11th International Conference on Information, Intelligence, Systems and Applications (IISA), 1–8.

[26] Rotem, N., … & Levenstein, R. (2018). Glow: Graph lowering compiler techniques for neural networks. arXiv preprint arXiv:1805.00907.

[27] Sarker, I. H. (2021). Deep learning: A comprehensive overview on techniques, taxonomy, applications and research directions. SN Computer Science, 2(6), 420.

[28] Shen, Q., … & Chen, X. (2021). A comprehensive study of deep learning compiler bugs. Proceedings of the 29th ACM Joint Meeting on European Software Engineering Conference and Symposium on the Foundations of Software Engineering, 968–980. https://doi.org/10.1145/3468264.3468591

[29] Smilkov, D., … & Wattenberg, M. (2019). TensorFlow.js: Machine learning for the web and beyond. arXiv preprint arXiv:1901.05350.

[30] Wang, Q., … & Liu, X. (2024). Anatomizing deep learning inference in web browsers. ACM Transactions on Software Engineering and Methodology. https://doi.org/10.1145/3688843

[31] Wei, J., … & Fedus, W. (2022). Emergent abilities of large language models. Transactions on Machine Learning Research. https://openreview.net/forum?id=yzkSU5zdwD

Tags:

In-Browser-Inference MediaPipe TensorFlow.js Transformers.js Multivocal-Literature-Review
CAPTCHA
Diese Frage dient der Überprüfung, ob Sie ein menschlicher Besucher sind und um automatisierten SPAM zu verhindern.