webassembly001 webassembly简述

WebAssembly

• 官方地址:https://webassembly.org/
• 相关历史 https://en.wikipedia.org/wiki/WebAssembly https://brendaneich.com/2015/06/from-asm-js-to-webassembly/
• WebAssembly（缩写为Wasm）是一种基于堆栈的虚拟机的二进制指令格式。Wasm 被设计为编程语言的可移植编译目标，支持在网络上部署客户端和服务器应用程序。
• Wasm 被设计为用于编译 C/C++/Rust 等高级语言的可移植目标，从而可以在 Web 上部署客户端和服务器应用程序。
  Web Assembly 不是开发人员必须编写的东西，但代码是用 C、C++、Rust 等语言编写的，并且可以编译为 WebAssembly (wasm)。相同的代码可以在 Web 浏览器中运行。
• WASM 不是一种编程语言。简而言之，它是一种将用一种编程语言编写的代码转换为浏览器可理解的机器代码的技术。
• WebAssembly 是一门新语言，代码是低级汇编语言，但凭借其文本格式特性，代码可读性强，必要时可以调试。

在线工具 WebAssembly Studio

• 将 C/C++ 和 Rust 代码编译为 WASM 格式。
• https://webassembly-studio.kamenokosoft.com/
• https://github.com/wasdk/WebAssemblyStudio
  

在线工具 WasmFiddle

• https://wasdk.github.io/WasmFiddle/
• 從 C 到 WasmFiddle
• 通过WasmFiddle平台构建WASM模块

相关教程

• 2023.09.07 Learn WebAssembly by writing small programs!
• https://hacks.mozilla.org/2019/08/webassembly-interface-types/

一些项目

多语言

• Run WordPress in the browser via WebAssembly PHP https://github.com/WordPress/wordpress-playground
• Go wazero: the zero dependency WebAssembly runtime for Go developers https://github.com/tetratelabs/wazero
• pywasm: A WebAssembly interpreter written in pure Python.
• WebAssembly 运行 Python https://2022.pycon.de/program/SBCNDY
• .NET blazor https://dotnet.microsoft.com/zh-cn/apps/aspnet/web-apps/blazor https://github.com/elderjames/ant-design-blazor
• Swift
• Kotlin
• Java
• COBOL

基础应用

• Desktop environment in the browser https://github.com/DustinBrett/daedalOS

• https://github.com/WasmVM/WasmVM

• Cloudflare Workers 上的 WebAssembly

• v86｜ 通过 WebAssembly 运行 x86 兼容的虚拟机 https://github.com/copy/v86

• https://github.com/whitphx/stlite

• https://browsix.org/

• tensorflow-js https://blog.tensorflow.org/2020/03/introducing-webassembly-backend-for-tensorflow-js.html

• OpenCV.js https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html

• Rust / Wasm framework for building client web apps

• PainterEngine是一个由C语言编写的完整开源的跨平台图形应用框架,可移植到Windows Linux Android iOS 支持WebAssembly的Web端及嵌入式MCU上

• https://www.painterengine.com/main/instances/instance2021122401/index.html

• WasmEdge 是一个轻量级、高性能和可扩展的 WebAssembly 运行时，适用于云原生、边缘和去中心化应用程序。它为无服务器应用程序、嵌入式功能、微服务、智能合约和 IoT 设备提供支持。

• Inspect C++ memory in the browser

数据库&大数据

• WebAssembly介绍及其在数据库方向的应用前景
• 在 Github 页面上托管 SQLite 数据库 https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/
• Postgres WASM｜ 开源 WASM 运行 PostgresSQL 方案 https://supabase.com/blog/postgres-wasm
• WebAssembly 在 MOSN 中的实践

数据分析

• DNA分析 How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study)
• A data visualization and analytics component, especially well-suited for large and/or streaming datasets.
• WebAssembly 在性能及加密场景的深度探索

文件编辑

• https://www.vimonlineeditor.com/
• https://github.com/rsms/markdown-wasm
• https://livehelp.unity.com/article/unity-2018-2zheng-shi-zhi-chi-webassembly

音视频+ 图像

• https://earth.google.com/web/ How we’re bringing Google Earth to the web
• Background Features in Google Meet, Powered by Web ML
• WebAssembly 将 Figma 的加载时间缩短了 3 倍
• Zoom on Web：WebAssembly SIMD、WebTransport 和 WebCodecs
• bilibili WebAssembly 在多媒体场景的实践与思考
• Build FFmpeg WebAssembly version （= ffmpeg.wasm）
• 搭建webassembly网页播放器
• https://github.com/facebookresearch/segment-anything
• https://github.com/DmitriyValetov/onnx_wasm_example
• https://github.com/imgly/background-removal-js/tree/main
• AI-Powered Photos App for the Decentralized Web
• OCR in Javascript via Emscripten
• Pure Javascript OCR for more than 100 Languages
• https://github.com/bloodarea/ConvertM4StoMP4/blob/master/ConvertM4StoMP4.py
• Use FFmpeg WASM to separate out the audio for download
• https://github.com/sonysuqin/WasmVideoPlayer
• 03 ffmpeg.wasm-demo 之加载 ffmpeg core
• vue and ffmpeg based tool for video clips. 使用vue(vue3) + ffmpeg + wasm 实现纯前端音视频编辑，功能包括：视频剪辑、音频剪辑、音频合成裁剪、音波展示、视频抽帧、gif抽帧、帧播放器、字幕、贴图、时间轴、素材轨道
• A web-based video editor for the Qoom platform using FFMPEG/WASM
• Video and Audio stream Extractor in browser
• https://juejin.cn/post/7140572900280664077#heading-4

在ffmpeg.wasm的FAQ中有几个重要的问题：

• 输入文件的最大大小是多少？
  2 GB，这是 WebAssembly 中的硬性限制。将来可能会变成 4 GB。

• 为什么 ffmpeg.wasm 不支持 nodejs？
  ffmpeg.wasm 在 0.12.0 之前确实支持 NodeJS，但由于以下原因决定停止对 NodeJS 的支持：
  维护 nodejs 支持需要额外的努力
  如果你不在浏览器中运行，有很多比使用 WebAssembly 更好的选择来获得更好的性能，例如：
  nodejs：https://www.npmjs.com/package/fluent-ffmpeg
  react-native：https://github.com/arthenica/ffmpeg-kit
  当然，我们仍然非常欢迎贡献 ffmpeg.wasm 的 nodejs 版本。

• 为什么 ffmpeg.wasm 与 ffmpeg 相比这么慢？
  截至目前，WebAssembly 仍然比原生慢很多，可以使用进一步加快速度 WebAssembly 内部的，基本上是编写汇编代码。这是我们正在调查的事情 并希望将来推出。
  如果您可以使用更不稳定的 ffmpeg.wasm 版本，请使用 ffmpeg.wasm 多线程 （mt） 版本 与单线程相比，速度约为 2 倍（但消耗更多的内存和 CPU）

智能问答

• Are you aware that whisper.cpp has a WASM-version as well?
• https://ggml.ai/?utm_source=talkingdev
• Talk - GPT-2 meets Whisper in WebAssembly
• https://github.com/lxe/wasm-gpt
• https://github.com/saharNooby/rwkv.cpp
• ggml implementation of BERT
• An example of running local models with GGML
• ggml implementation of the baichuan13b model (adapted from llama.cpp)

游戏

• RUST+ WebAssembly :从零开始创建一个WebAssembly游戏
• https://beta.unity3d.com/jonas/AngryBots/

其他

• WebAssembly :A fast and secure runtime for WebAssembly

• WebAssembly Micro Runtime (WAMR)

• https://www.jc2182.com/webassembly/webassembly-introduction.html

• C++ + WebAssembly :WebAssembly技术解密

• wasm的底层解释：https://rsms.me/wasm-intro

• 了解 WebAssembly 的基礎使用方法 https://github.com/guybedford/wasm-demo

相关文章

• webassembly WASM入门：将c++编译为wasm并运行
• webassembly001 webassembly简述
• WebAssembly002 emcc install
• WebAssembly002* ggml_new_object: not enough space in the context‘s memory pool
• WebAssembly002 emcc Emscripten js端传入数组给c++
• WebAssembly002 IDBFS 浏览器文件存储
• WebAssembly002 FFmpegWasmLocalServer项目
• webassembly002 whisper.wasm wasm_eval 与js代码交互 EMSCRIPTEN_BINDINGS，Module
• webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分
• webassembly003 GGML Tensor Library part-1
• webassembly003 MINISIT mnist/convert-h5-to-ggml.py
• webassembly003 ggml GGML Tensor Library part-2 官方使用说明
• webassembly003 ggml GGML Tensor Library part-3
• webassembly003 ggml GGML Tensor Library part-4 实现在浏览器端训练神经网络
• webassembly003* ggml GGML Tensor Library part-5
• webassembly003 ggml.js试用(暂记)
• webassembly003 whisper.cpp的项目结构CMakeLists.txt
• webassembly003 whisper.cpp的main项目-1
• webassembly003 whisper.cpp的main项目-2:根据给定的模型文件和参数进行配置
• webassembly003 whisper.cpp的main项目-3 whispercpp_simple
• webassembly003 whisper.cpp的main项目-4 一些宏定义细节
• webassembly003 TTS BARK.CPP
• webassembly003 TTS BARK.CPP-02-bark_tokenize_input(ctx, text)；
• webassembly003 TTS BARK.CPP convert.py*
• webassembly003 ggml ADAM (暂记)
• webassembly003 whisper.cpp的python绑定实现+Cython+Setuptools
• webassembly003 whisper.cpp的python绑定实现+Cython+Setuptools的GUI程序
• webassembly004 ggml wasm_eval 与js代码交互 调试
• webassembly005 SIMD前言
• webassembly006 SIMD 矢量运算
• webassembly007 OPTIMIZING CACHE USAGE && CPU Cache Optimization
• webassembly008 ggml wasm_eval 与js代码交互 whisper.wasm candle
• webassembly009 transformers.js 网页端侧推理
• webassembly010 ggml的其他封装:Python,Rust ,javascript
• https://github.com/ggerganov/seamless_communication
• https://seamless.metademolab.com/m4t?utm_source=github&utm_medium=web&utm_campaign=seamless&utm_content=readme
• https://github.com/rustformers/llm
• https://github.com/lxe/wasm-gpt
• https://github.com/CNugteren/CLBlast
• https://github.com/rahuldshetty/ggml.js-examples

CG

• Web 工作进程可以在独立于 Web 应用程序主执行线程的后台线程中运行脚本操作。这样做的优点是可以在单独的线程中执行费力的处理，允许主线程（通常是 UI）线程运行而不会被阻塞/减慢速度。

• 对象用于表示通用的原始二进制数据缓冲区，类似于 ArrayBuffer 对象，但可用于在共享内存上创建视图。

• https://www.zhihu.com/question/265700379

• https://www.v2ex.com/t/552383

• asm.js和WebAssembly有什么区别？

• Understanding asm.js

• https://github.com/asm-js

• WebAssembly 能干什么？8个WebAssembly 应用案例

• Run JavaScript/WASM in Python: high-level SpiderMonkey bindings to Python with PythonMonkey

• 整整一年前写的入门文章 : WASM入门：将c++编译为wasm并运行

• 写 wasm 项目选 C++ 还是 Rust？

• EdgeViTs：结合视觉Transformer在移动设备上实现轻量化CNN（CVPR2022）

• 如何构建交互式讲座摘要应用程序

• 凹语言

• 目前大火的 Jamtack 是什么？

• 用 Rust 和 WebAssembly 在 Vercel 上部署 Jamstack 应用

• Extremely fast Vite-compatible web build tool written in Rust