Pushing AI to the Client with WebAssembly and Blazor
0 likes235 views
The document discusses the integration of WebAssembly (WASM) and Blazor for client-side AI applications, detailing their capabilities and specifications. WebAssembly is a portable binary compilation target designed to execute in browsers alongside JavaScript, while Blazor is a Single Page Application (SPA) framework that utilizes C# for scripting in the browser. The document highlights usage scenarios, project structure, and considerations for adopting Blazor in web development.
![SOME OSS PROJECTS I RUNSOME OSS PROJECTS I RUN
[Experimental] The media tracking and aggregation system that was used to assemble this presentation
A blogging platform that produces plain HTML5/CSS output for ultimate scalability.
A set of extension methods helpful when building unit tests.
A conference schedule optimizer
A microservices framework for creating conversational bots on top of Bot Framework.
A library of abstractions and their implementations that help create loosely-coupled applications.
A c# library and website for generating agenda's for Toastmasters meetings.
Liquid Victor
Prehensile Pony-Tail
TestHelperExtensions
Conference Scheduler
IntentBot
LiquidNun
Toastmasters Agenda](https://image.slidesharecdn.com/pushingaitotheclient-190522112416/85/Pushing-AI-to-the-Client-with-WebAssembly-and-Blazor-3-320.jpg)
Pushing AI to the Client with WebAssembly and Blazor
- 1. PUSHING AI TO THE CLIENTPUSHING AI TO THE CLIENT WITH WEBASSEMBLY AND BLAZORWITH WEBASSEMBLY AND BLAZOR Barry S. Stahl - @bsstahl - http://www.cognitiveinheritance.com PRINTABLE VERSIONPRINTABLE VERSION
- 2. ABOUT MEABOUT ME Favorite Physicists Favorite Mathematicians Harold "Hal" Stahl Ada Lovelace Carl Sagan Alan Turing Neil Degrasse Tyson Johannes Kepler Nikola Tesla Rene Descartes Marie Curie Isaac Newton Richard Feynman Leonardo Fibonacci Albert Einstein George Boole Other notables: Niels Bohr, Galileo Galilei, Michael Faraday, Blaise Pascal, Johann Gauss, Grace Hopper, Stephen Hawking, Marvin Minsky, Daphne Koller, Benoit Mandelbrot I think it is noteworthy that I am the type of person who has both favorite physicists and favorite mathematicians - @bsstahl 16 Apr 2017
- 3. SOME OSS PROJECTS I RUNSOME OSS PROJECTS I RUN [Experimental] The media tracking and aggregation system that was used to assemble this presentation A blogging platform that produces plain HTML5/CSS output for ultimate scalability. A set of extension methods helpful when building unit tests. A conference schedule optimizer A microservices framework for creating conversational bots on top of Bot Framework. A library of abstractions and their implementations that help create loosely-coupled applications. A c# library and website for generating agenda's for Toastmasters meetings. Liquid Victor Prehensile Pony-Tail TestHelperExtensions Conference Scheduler IntentBot LiquidNun Toastmasters Agenda
- 4. GIVECAMPGIVECAMP International Headquarters: WHERE SOFTWARE CREATORS COME TOGETHER TO BUILD GREAT TOOLS FOR AMAZINGWHERE SOFTWARE CREATORS COME TOGETHER TO BUILD GREAT TOOLS FOR AMAZING LOCAL CHARITIESLOCAL CHARITIES http://givecamp.org
- 5. WASM IN THE BROWSERWASM IN THE BROWSER A rst look at WASM directly in the browser HTTPS://WEBASSEMBLY.GITHUB.IO/WABT/DEMO/WAT2WASM/HTTPS://WEBASSEMBLY.GITHUB.IO/WABT/DEMO/WAT2WASM/
- 6. WHAT IS WEBASSEMBLY (WASM)WHAT IS WEBASSEMBLY (WASM) A W3C Speci cation A portable binary compilation-target Designed to execute well within existing web platforms Able to support non-browser embeddings The Intermediate-Language of the Web Can be compiled-to from nearly any language Can be executed on nearly any platform Can be used inside the browser or out
- 7. WASM PROVIDESWASM PROVIDES A Structured Stack Machine execution model Most instructions use the stack for data Flow of control handled with structured constructs i.e. if and while A very limited type-system Integer types: i32 & i64 Float types: f32 & f64 Any other types handled by the compiler
- 8. WASM MODULE SECTIONSWASM MODULE SECTIONS Name Code Description Type 1 Declares signatures of all types (functions) Import 2 Declares all imported modules (i.e. Javascript) Function 3 Cross references sections type (1) and code (10) Table 4 Declares tables for storage Memory 5 Declares contiguous memory sections Global 6 Declares globabl variables Export 7 Declares items to be exposed outside of the module Start 8 Declares the start function if one exists Element 9 Used to initialize imported modules Code 10 The implementation of all functions Data 11 Used to initialize any memory ranges
- 9. ONE GOAL OF WEBASSEMBLYONE GOAL OF WEBASSEMBLY Execute in the same sematic universe as JavaScript Allow synchronous calls to and from JavaScript Enforce the same-origin and permissions security policies Design to integrate well with the existing Web platform - https://webassembly.org/docs/high-level-goals/
- 10. BROWSER EXECUTION PIPELINEBROWSER EXECUTION PIPELINE AS THE WORLD EXISTED PRE-WASMAS THE WORLD EXISTED PRE-WASM
- 11. BROWSER EXECUTION PIPELINEBROWSER EXECUTION PIPELINE AS THE WORLD EXISTS TODAYAS THE WORLD EXISTS TODAY
- 12. ASP.NET CORE BLAZORASP.NET CORE BLAZOR
- 14. WHY RAZOR?WHY RAZOR? Simpli ed Routing Each page's location in the le system is its route Simpli ed Layout HTML is inline with C# or VB syntax Can be used alongside MVC Razor pages are ASP.NET pages
- 15. BASIC BLAZORBASIC BLAZOR A rst look at Blazor from File > New Project
- 16. WHAT IS BLAZOR?WHAT IS BLAZOR? A SPA Framework Builds client-side applications Runs in the browser C# is the programming language Uses the Razor engine and syntax C# code is inline Encapsulation done with components .NET code executed using mono.wasm
- 17. MONO.WASMMONO.WASM A Web Assembly implementation of the .NET runtime Built by the Xamarin team Supports NetStandard2.0
- 18. CHUTES & LADDERS PROJECT STRUCTURECHUTES & LADDERS PROJECT STRUCTURE
- 19. .NET CODE IN BLAZOR.NET CODE IN BLAZOR Using Blazor to run existing .NET libraries
- 20. WHY NOT USE BLAZOR RIGHT NOW?WHY NOT USE BLAZOR RIGHT NOW? Blazor has only recently had its "Experimental" tag removed by Microsoft We still don't know when it will RTW There may be better ways to accomplish the goals The tooling is not yet where we need it to be Many features are planned but not yet implemented Little bene t if you are uent and comfortable with JavaScript Why move away from proven technologies if it isn't solving your pain? Little bene t if you don't need existing .NET in the browser If your code is Javascript (or not written) use what is right
- 21. SHOULD I BE USING BLAZOR NOW?SHOULD I BE USING BLAZOR NOW? ONLY IF YOU ARE UNHAPPY WITH JAVASCRIPT OR WANT TO RUN .NET IN THE BROWSERONLY IF YOU ARE UNHAPPY WITH JAVASCRIPT OR WANT TO RUN .NET IN THE BROWSER ANDAND YOU DON'T NEED TO RELEASE FOR AT LEAST 6 MONTHSYOU DON'T NEED TO RELEASE FOR AT LEAST 6 MONTHS
- 22. HOW DO I GET STARTED?HOW DO I GET STARTED? Install Visual Studio 2019 Install the latest .NET Core Install the Blazor Extension In Visual Studio 2019 File > New Project > Web > ASP.NET Core Web Application https://visualstudio.microsoft.com/downloads/ https://www.microsoft.com/net/download https://go.microsoft.com/fwlink/?linkid=870389
- 23. SUMMARYSUMMARY WebAssembly A portable binary compilation-target Executes in the same browser context as Javascript Blazor A SPA framework Uses C# for scripting Interpreted using Mono.wasm in the browser
- 24. Pushing AI to the Client Barry S. Stahl - @bsstahl - http://www.cognitiveinheritance.com RESOURCESRESOURCES These Slides Code Instructions & Tutorials http://PushingAIToTheClient-2019Q2.azurewebsites.net Chutes & Ladders Simulation My GitHub Repos WebAssembly Blazor Cognitive Inheritance (my blog)