{"id":95050,"date":"2024-02-06T08:00:00","date_gmt":"2024-02-06T16:00:00","guid":{"rendered":""},"modified":"2025-06-02T07:30:01","modified_gmt":"2025-06-02T14:30:01","slug":"on-device-training-training-a-model-in-browser","status":"publish","type":"post","link":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/","title":{"rendered":"On-Device Training: Training a model in browser"},"content":{"rendered":"\n<div class=\"wp-block-msxcm-summary is-expanded\" data-moray data-bi-an=\"Summary Block\" aria-describedby=\"summary\">\n\t<p>\n\t\t<strong>Summary:<\/strong>\n\t\t<span>It is a long established fact that a reader will be distracted by the readable content of a page when looking normal distribution of letters, as opposed to using &#8216;Content here, content here&#8217;, making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking normal distribution of letters, as opposed to using &#8216;Content here, content here&#8217;, making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking normal distribution of letters, as opposed to using &#8216;Content here, content here&#8217;, making it look like readable English. <\/span>\n\t<\/p>\n<\/div>\n\n\n\n<aside id=\"accordion-e53b4b6d-98d3-4bc1-9064-eda49a960c3c\" class=\"table-of-contents-block accordion pb-0\" data-bi-aN=\"table-of-contents\">\n\t<button class=\"btn btn-collapse mb-0 display-flex justify-content-between w-100\" type=\"button\" data-mount=\"collapse\" data-target=\"#accordion-collapse-e53b4b6d-98d3-4bc1-9064-eda49a960c3c\" aria-expanded=\"true\" aria-controls=\"accordion-collapse-e53b4b6d-98d3-4bc1-9064-eda49a960c3c\">\n\t\t<span class=\"table-of-contents-block__label subtitle\">In this article<\/span>\n\t\t<span class=\"table-of-contents-block__current mr-4 text-gray-600 font-weight-normal\" aria-hidden=\"true\"><\/span>\n\n\t\t<svg class=\"table-of-contents-block__arrow\" aria-label=\"Toggle arrow\" width=\"18\" height=\"11\" viewBox=\"0 0 18 11\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t<path d=\"M15.7761 11L18 8.82043L9 0L0 8.82043L2.22394 11L9 4.35913L15.7761 11Z\" fill=\"currentColor\" \/>\n\t\t<\/svg>\n\t<\/button>\n\t<div id=\"accordion-collapse-e53b4b6d-98d3-4bc1-9064-eda49a960c3c\" class=\"table-of-contents-block__collapse-wrapper collapse show\" data-parent=\"#accordion-e53b4b6d-98d3-4bc1-9064-eda49a960c3c\">\n\t\t<div class=\"accordion-body p-0\">\n\t\t\t<ol class=\"table-of-contents-block__list\"><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#a-glance-at-onnx-runtime-training-in-web\">A glance at ONNX Runtime Training in Web<\/a><\/li><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#in-browser-training-with-ort-training-web\">In-browser training with ORT Training Web<\/a><ol class=\"table-of-contents-block__list\"><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#applications\">Applications<\/a><\/li><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#how-does-it-work\">How does it work?<\/a><\/li><\/ol><\/li><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#getting-started\">Getting started<\/a><ol class=\"table-of-contents-block__list\"><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#get-training-artifacts\">Get training artifacts<\/a><\/li><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#import-package-and-artifacts-in-your-browser\">Import package and artifacts in your browser<\/a><\/li><\/ol><\/li><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#training\">Training<\/a><ol class=\"table-of-contents-block__list\"><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#export-for-federated-learning\">Export for federated learning<\/a><\/li><\/ol><\/li><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#looking-forward-with-ort-web-training\">Looking forward with ORT Web training<\/a><\/li><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#next-steps\">Next steps<\/a><ol class=\"table-of-contents-block__list\"><li class=\"table-of-contents-block__list-item\"><a class=\"table-of-contents-block__list-item-link\" href=\"#this-is-h3\">this is H3<\/a><\/li><\/ol><\/li><\/ol>\t\t<\/div>\n\t<\/div>\n\t<span class=\"table-of-contents-block__progress-bar\"><\/span>\n<\/aside>\n\n\n\n<p>Continuing the <a href=\"https:\/\/cloudblogs.microsoft.com\/opensource\/2023\/05\/31\/on-device-training-efficient-training-on-the-edge-with-onnx-runtime\/\" target=\"_blank\" rel=\"noreferrer noopener\">ONNXRuntime On-Device Training<\/a> <a href=\"https:\/\/cloudblogs.microsoft.com\/opensource\/tag\/on-device-training\/\" target=\"_blank\" rel=\"noreferrer noopener\">blog series<\/a>, we are introducing ONNX Runtime Training for Web, a new feature in ONNX Runtime (ORT) that enables training models in the browser. This capability opens up new scenarios for in-browser federated learning and personalization using data on the device and preserving user privacy. This blog post provides an overview of ORT Training Web. Check out the full <a href=\"https:\/\/github.com\/microsoft\/onnxruntime-training-examples\/tree\/master\/on_device_training\/web\" target=\"_blank\" rel=\"noreferrer noopener\">demo source code<\/a> to learn more about ORT Training for Web and explore experimenting with it for your own applications!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"a-glance-at-onnx-runtime-training-in-web\">A glance at ONNX Runtime Training in Web<\/h2>\n\n\n\n<p>ORT Web has offered in-browser inferencing since release 1.8, allowing developers to easily port machine learning models across platforms. ORT Web currently supports inferencing on both CPU and GPU, with GPU inferencing enabled by WebGL and WebGPU. As WebGPU advances and brings accelerated graphics and compute power to the browser, there is growing interest in machine learning (ML) in the browser.<\/p>\n\n\n\n<p>With the new ORT 1.17.0 release, ORT will now enable training machine learning models in the browser. ORT Web supports training only on CPU, enabled by WebAssembly.<\/p>\n\n\n\n<p>The training capabilities are available as a submodule in the ORT Web npm (Node Package Manager) package. This means that binary sizes for ORT Web inference-only will remain unchanged. Importing the training submodule also provides access to inference capabilities, allowing both training and inference to be performed with the same binary. Check out the <a href=\"https:\/\/onnxruntime.ai\/docs\/api\/js\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">documentation for ORT Training in web<\/a> here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"in-browser-training-with-ort-training-web\">In-browser training with ORT Training Web<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"applications\">Applications<\/h3>\n\n\n\n<p>ORT training in-browser is designed to support <a href=\"https:\/\/cloudblogs.microsoft.com\/opensource\/2023\/07\/05\/on-device-training-with-onnx-runtime-a-deep-dive\/\" target=\"_blank\" rel=\"noreferrer noopener\">federated learning scenarios<\/a> and enable developers to explore machine learning in the browser.<\/p>\n\n\n\n<p>Federated learning is a machine learning technique that allows multiple devices to collaboratively train a model without sharing their data with each other.<\/p>\n\n\n\n<p>Developer exploration involves training a model in a single browser session, allowing users to create demos and experiments on the web. This category covers experimental scenarios that do not require the trained model to persist beyond a single browser session.<\/p>\n\n\n\n<p>In the future, other on-device training scenarios, such as personalized models that guarantee user data privacy, may also be supported.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-does-it-work\">How does it work?<\/h3>\n\n\n\n<p>ORT Training for Web requires an \u201coffline\u201d preparation step that leverages the ONNX ecosystem to generate the required ONNX training artifacts. This step is considered offline since it will not happen on the edge device that will train the model, and instead takes place on a personal machine or server that does not have training data.<\/p>\n\n\n\n<p>These training artifacts will be transferred to the edge device, which will use on-device training for web.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture1.webp\" alt=\"Diagram of the components of the onnxruntime-web JS package that shows that OnnxRuntime Training only has a CPU execution provider. Note that although training capabilities requires a different WebAssembly binary file, the training WebAssembly binary file also includes inferencing capabilities. \" class=\"wp-image-95054 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture1.webp\"><figcaption class=\"wp-element-caption\">Figure 1: Diagram of the components of the onnxruntime-web JS package. Note that although training capabilities requires a different WebAssembly binary file, the training WebAssembly binary file also includes inferencing capabilities.<\/figcaption><\/figure>\n\n\n\n<p>The components that enable training in-browser are added to the existing ORT Web package.<\/p>\n\n\n\n<p>At present, only single-threaded training on the CPU is supported. ORT Web for training consists of two main parts: WebAssembly binaries and a JavaScript bundle.<\/p>\n\n\n\n<p>To enable training on CPU, the ONNX Runtime Training C API (application programming interface) is accessed through a WebAssembly (WASM) backend. WebAssembly is a binary format optimized for web browsers, offering faster load times and more efficient execution. To generate WebAssembly binaries, we wrap the ONNX Runtime Training C++ code into a WebAssembly C API and use Emscripten, an open-source compiler toolchain, to compile the API into binary files with the .wasm extension. <a href=\"https:\/\/cloudblogs.microsoft.com\/opensource\/2021\/09\/02\/onnx-runtime-web-running-your-machine-learning-model-in-browser\/\" target=\"_blank\" rel=\"noreferrer noopener\">This blog post<\/a> explains the benefits of WebAssembly and its integration with ONNX Runtime.<\/p>\n\n\n\n<p>The JavaScript API simplifies and abstracts accessing the WebAssembly API by managing tasks such as buffer conversion and WebAssembly heap and stack management.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture2.webp\" alt=\"Diagram of how the JavaScript package code interfaces with the ORT Training C API using WebAssembly in a typical federated learning flow. Shows a server sending model parameters to a web app, that calls the ONNX Runtime Training API which calls the WebAssembly C API.\" class=\"wp-image-95055 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture2.webp\"><figcaption class=\"wp-element-caption\">Figure&nbsp;2: Diagram of how the JavaScript package code interfaces with the ORT Training C API using WebAssembly in a typical federated learning flow. The flow for retrieving and loading the model parameters have been omitted for simplicity.<\/figcaption><\/figure>\n\n\n\n<p>The ORT web package, like ORT web for inference, assesses the runtime environment&#8217;s capabilities to determine the appropriate settings to use, such as Single Instruction Multiple Data (SIMD) availability. The ORT web package utilizes dynamic loading to selectively use the training binaries if the onnxruntime-web\/training package is imported; thus, the binary size for ORT web for inference remains unchanged.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"getting-started\">Getting started<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"get-training-artifacts\">Get training artifacts<\/h3>\n\n\n\n<p>First, you need to obtain an ONNX model\u2014see <a href=\"https:\/\/github.com\/onnx\/tutorials#converting-to-onnx-format\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a> for existing tutorials for exporting a model in ONNX format from existing ML frameworks. You can also download an ONNX-format model from the <a href=\"https:\/\/github.com\/onnx\/models\" target=\"_blank\" rel=\"noreferrer noopener\">ONNX Model Zoo<\/a>.<\/p>\n\n\n\n<p>In the following example, we can export a PyTorch model to ONNX model format.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture3.webp\" alt=\"Example of the code for using PyTorch to export an ONNX model.\" class=\"wp-image-95056 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture3.webp\"><figcaption class=\"wp-element-caption\">Figure 3: Example of using PyTorch to export an ONNX model.<\/figcaption><\/figure>\n\n\n\n<p>Refer to <a href=\"https:\/\/pytorch.org\/docs\/stable\/onnx.html\" target=\"_blank\" rel=\"noreferrer noopener\">PyTorch documentation<\/a> for more information about exporting. Note that the training parameter is set to TRAINING mode.<\/p>\n\n\n\n<p>Now that the ONNX model file has been obtained, we can use the ORT training API to generate the necessary training artifacts.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture4.webp\" alt=\"Example of the code for generating training artifacts from an ONNX model file.\" class=\"wp-image-95057 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture4.webp\"><figcaption class=\"wp-element-caption\">Figure 4: Example of generating training artifacts from an ONNX model file.<\/figcaption><\/figure>\n\n\n\n<p>This should generate the following four training artifacts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Training model<\/li>\n\n\n\n<li>Optimizer model<\/li>\n\n\n\n<li>Eval model<\/li>\n\n\n\n<li>Checkpoint file<\/li>\n<\/ul>\n\n\n\n<p>For more in-depth information about generating training artifacts and what role each artifact plays in training, <a href=\"https:\/\/cloudblogs.microsoft.com\/opensource\/2023\/07\/05\/on-device-training-with-onnx-runtime-a-deep-dive\/\" target=\"_blank\" rel=\"noreferrer noopener\">check out the deep dive<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"import-package-and-artifacts-in-your-browser\">Import package and artifacts in your browser<\/h3>\n\n\n\n<p>To add the ORT web training package to your web application, use npm or yarn to install ORT web, which is available on the npm registry:<\/p>\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture5.webp\" alt=\"Command for installing ORT Web Package\" class=\"wp-image-95069 webp-format\" style=\"aspect-ratio:36.705882352941174;width:734px;height:auto\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture5.webp\"><figcaption class=\"wp-element-caption\">Figure 5: Command for installing ORT Web package.<\/figcaption><\/figure>\n\n\n\n<p>There are two main ways to import ORT web for training to use in your JavaScript or TypeScript code: through an HTML script tag, or with a bundler.<\/p>\n\n\n\n<p>An HTML script tag embeds client-side script.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture5.webp\" alt=\"Code examples of importing ORT Web with an HTML script tag.\" class=\"wp-image-95058 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture5.webp\"><figcaption class=\"wp-element-caption\">Figure 6: Examples of importing ORT Web with an HTML script tag.<\/figcaption><\/figure>\n\n\n\n<p>A bundler is a software tool that combines multiple assets, such as JavaScript or TypeScript files and their dependencies, into a single file to improve web application performance.<\/p>\n\n\n\n<p>When using a bundler, certain files may not be served in the browser, depending on the bundler\u2019s configuration.<\/p>\n\n\n\n<p>If using a bundler, ensure that the WASM binaries are served in the browser. For example, we use the CopyPlugin for the WASM binaries.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture6.webp\" alt=\"Code snippet illustrating how to use the Copy Plugin to serve WASM binaries.\" class=\"wp-image-95059 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture6.webp\"><figcaption class=\"wp-element-caption\">Figure 7: Code snippet illustrating how to use the CopyPlugin to serve WASM binaries..<\/figcaption><\/figure>\n\n\n\n<p>Ensure that the necessary training artifacts are accessible to the web app by buffer or uniform resource identifier (URI) path for the API. In the <a href=\"https:\/\/github.com\/microsoft\/onnxruntime-training-examples\/tree\/master\/on_device_training\/web\" target=\"_blank\" rel=\"noreferrer noopener\">demo that we are following<\/a>, users copy the training artifacts into the public folder, which webpack serves to the browser.<\/p>\n\n\n\n<p>Within your JavaScript or TypeScript file, you will need to import the ORT web library to access the APIs. If using CommonJS-style imports, use the following import statement:<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture8.webp\" alt=\"Code for CommonJS-style ORT Web import statement.\" class=\"wp-image-95070 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture8.webp\"><figcaption class=\"wp-element-caption\">Figure 8: CommonJS-style ORT Web import statement.<\/figcaption><\/figure>\n\n\n\n<p>Otherwise, use the following import statement:<\/p>\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture9.webp\" alt=\"Code for ESModule-style ORT Web import statement.\" class=\"wp-image-95071 webp-format\" style=\"aspect-ratio:36.705882352941174;width:734px;height:auto\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture9.webp\"><figcaption class=\"wp-element-caption\">Figure 9: ESModule-style ORT Web import statement.<\/figcaption><\/figure>\n\n\n\n<p>To train a model, you need at minimum the training model, the optimizer model, and the checkpoint file. You can also load an eval model to run an evaluation step on the validation dataset.<\/p>\n\n\n\n<p>To create an instance of a training session, create an ORT TrainingSessionCreateOptions object:<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture7.webp\" alt=\"Code snippet for creating an ORT TrainingSession\" class=\"wp-image-95060 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture7.webp\"><figcaption class=\"wp-element-caption\">Figure 10: Code snippet for creating an ORT TrainingSession.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"training\">Training<\/h2>\n\n\n\n<p>Now that we have an instance of a training session, we can start training.<\/p>\n\n\n\n<p>Here is an example of a typical training loop:<\/p>\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture8.webp\" alt=\"Code example of a simple training loop.\" class=\"wp-image-95061 webp-format\" style=\"aspect-ratio:4.132450331125828;width:624px;height:auto\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture8.webp\"><figcaption class=\"wp-element-caption\">Figure 11: Example of a simple training loop.<\/figcaption><\/figure>\n\n\n\n<p>A training loop generally follows these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The train step is called on the training session, taking inputs from the training dataset and outputting the loss.<\/li>\n\n\n\n<li>The optimizer step is called on the training session, which will update the weights of the training model.<\/li>\n\n\n\n<li>The lazyResetGrad() function is called on the training session, which will reset the accumulated gradients in the training session so that the next weight update and training step can begin.<\/li>\n<\/ul>\n\n\n\n<p>You can see the eval model used in the following testing loop, where a batch of the validation dataset is passed into the runEvalStep function call:<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture9.webp\" alt=\"Code example of a simple testing loop\" class=\"wp-image-95062 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/01\/Picture9.webp\"><figcaption class=\"wp-element-caption\">Figure 12: Example of a simple testing loop.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"export-for-federated-learning\">Export for federated learning<\/h3>\n\n\n\n<p>In a federated learning scenario, the trained parameters are exported and sent to the central server, where the federated learning agent aggregates them from multiple edge devices. This allows the central model to be updated without extracting the user data from the edge device.<\/p>\n\n\n\n<p>ORT Web provides API calls to facilitate this. When the edge device is ready to export the trained parameters, you can retrieve a UInt8 Buffer of the parameters:<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture13.webp\" alt=\"Code for function call to retrieve a buffer of parameters\" class=\"wp-image-95072 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture13.webp\"><figcaption class=\"wp-element-caption\">Figure 13: Function call to retrieve a buffer of parameters.<\/figcaption><\/figure>\n\n\n\n<p>To load parameters retrieved from the federated learning agent, you can call the following:<\/p>\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture14.webp\" alt=\"Code for function call to pass a buffer of parameters to the TrainingSession\" class=\"wp-image-95073 webp-format\" style=\"aspect-ratio:36.705882352941174;width:734px;height:auto\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/02\/Picture14.webp\"><figcaption class=\"wp-element-caption\">Figure 14: Function call to pass a buffer of parameters to the TrainingSession.<\/figcaption><\/figure>\n\n\n\n<p>Thus, the model can be updated for federated learning scenarios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"looking-forward-with-ort-web-training\">Looking forward with ORT Web training<\/h2>\n\n\n\n<p>At present, ORT Web training does not facilitate personalization in on-device training; however, we recognize the potential for future enhancements in this domain if there is a demand. We welcome your valuable feedback and feature requests regarding ORT Training for Web. Feel free to share your thoughts through our <a href=\"https:\/\/github.com\/microsoft\/onnxruntime\" target=\"_blank\" rel=\"noreferrer noopener\">Github repository<\/a>, where you can leave comments, provide feedback, and submit feature requests.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"next-steps\">Next steps<\/h2>\n\n\n\n<p>Interested in learning more or experimenting with ORT Training for Web for your own applications? Check out the full <a href=\"https:\/\/github.com\/microsoft\/onnxruntime-training-examples\/tree\/master\/on_device_training\/web\" target=\"_blank\" rel=\"noreferrer noopener\">demo source code<\/a> and the <a href=\"https:\/\/onnxruntime.ai\/docs\/api\/js\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"this-is-h3\">this is H3<\/h3>\n\n\n\n<p><strong>Lorem Ipsum<\/strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurie<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"this-is-h4-1\">This is H4<\/h4>\n\n\n\n<p><strong>Lorem Ipsum<\/strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurie<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"this-is-h5\">This is H5<\/h5>\n\n\n\n<p><strong>Lorem Ipsum<\/strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurie<\/p>\n\n\n\n<h6 class=\"wp-block-heading\" id=\"this-is-h6\">This is H6<\/h6>\n\n\n\n<p><strong>Lorem Ipsum<\/strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurie<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Continuing the ONNXRuntime On-Device Training blog series, we are introducing ONNX Runtime Training for Web.<\/p>\n","protected":false},"author":6194,"featured_media":95471,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"msxcm_post_with_no_image":false,"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","footnotes":""},"post_tag":[1869,2033,2031,1824,2030,2114],"content-type":[346],"topic":[2238],"programming-languages":[2260,2265],"coauthors":[2110],"class_list":["post-95050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-browser","tag-federated-learning","tag-on-device-training","tag-onnx-runtime","tag-onnx-runtime-training","tag-web-training","content-type-news","topic-ai-machine-learning","programming-languages-javascript","programming-languages-pytorch","review-flag-1593580428-734","review-flag-1593580419-521","review-flag-1-1593580432-963","review-flag-2-1593580437-411","review-flag-3-1593580442-169","review-flag-4-1593580448-609","review-flag-5-1593580453-725","review-flag-6-1593580457-852","review-flag-7-1593580463-151","review-flag-8-1593580468-572","review-flag-9-1593580473-997","review-flag-bundl-1593580256-792","review-flag-free-1593619513-693","review-flag-machi-1680214156-53","review-flag-ml-1680214110-748","review-flag-new-1593580248-669"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>On-Device Training: Training a model in browser | Microsoft Open Source Blog<\/title>\n<meta name=\"description\" content=\"Introducing ONNX Runtime Training for Web, a new feature in ONNX Runtime (ORT) that enables training models in the browser. Learn more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"On-Device Training: Training a model in browser | Microsoft Open Source Blog\" \/>\n<meta property=\"og:description\" content=\"Introducing ONNX Runtime Training for Web, a new feature in ONNX Runtime (ORT) that enables training models in the browser. Learn more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Open Source Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-06T16:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-02T14:30:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Caroline Zhu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@OpenAtMicrosoft\" \/>\n<meta name=\"twitter:site\" content=\"@OpenAtMicrosoft\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caroline Zhu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 min read\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/\"},\"author\":[{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/author\/caroline-zhu\/\",\"@type\":\"Person\",\"@name\":\"Caroline Zhu\"}],\"headline\":\"On-Device Training: Training a model in browser\",\"datePublished\":\"2024-02-06T16:00:00+00:00\",\"dateModified\":\"2025-06-02T14:30:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/\"},\"wordCount\":1755,\"publisher\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.webp\",\"keywords\":[\"Browser\",\"Federated Learning\",\"On-Device Training\",\"ONNX Runtime\",\"ONNX Runtime Training\",\"Web training\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/\",\"name\":\"On-Device Training: Training a model in browser | Microsoft Open Source Blog\",\"isPartOf\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.webp\",\"datePublished\":\"2024-02-06T16:00:00+00:00\",\"dateModified\":\"2025-06-02T14:30:01+00:00\",\"description\":\"Introducing ONNX Runtime Training for Web, a new feature in ONNX Runtime (ORT) that enables training models in the browser. Learn more.\",\"breadcrumb\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#primaryimage\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.webp\",\"contentUrl\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.webp\",\"width\":1170,\"height\":640},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/opensource.microsoft.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"On-Device Training: Training a model in browser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#website\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/\",\"name\":\"Microsoft Open Source Blog\",\"description\":\"Open dialogue about openness at Microsoft \u2013 open source, standards, interoperability\",\"publisher\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/opensource.microsoft.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#organization\",\"name\":\"Microsoft Open Source Blog\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/08\/Microsoft-Logo.png\",\"contentUrl\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/08\/Microsoft-Logo.png\",\"width\":259,\"height\":194,\"caption\":\"Microsoft Open Source Blog\"},\"image\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/OpenAtMicrosoft\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"On-Device Training: Training a model in browser | Microsoft Open Source Blog","description":"Introducing ONNX Runtime Training for Web, a new feature in ONNX Runtime (ORT) that enables training models in the browser. Learn more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/","og_locale":"en_US","og_type":"article","og_title":"On-Device Training: Training a model in browser | Microsoft Open Source Blog","og_description":"Introducing ONNX Runtime Training for Web, a new feature in ONNX Runtime (ORT) that enables training models in the browser. Learn more.","og_url":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/","og_site_name":"Microsoft Open Source Blog","article_published_time":"2024-02-06T16:00:00+00:00","article_modified_time":"2025-06-02T14:30:01+00:00","og_image":[{"width":1170,"height":640,"url":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.png","type":"image\/png"}],"author":"Caroline Zhu","twitter_card":"summary_large_image","twitter_creator":"@OpenAtMicrosoft","twitter_site":"@OpenAtMicrosoft","twitter_misc":{"Written by":"Caroline Zhu","Est. reading time":"7 min read"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#article","isPartOf":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/"},"author":[{"@id":"https:\/\/opensource.microsoft.com\/blog\/author\/caroline-zhu\/","@type":"Person","@name":"Caroline Zhu"}],"headline":"On-Device Training: Training a model in browser","datePublished":"2024-02-06T16:00:00+00:00","dateModified":"2025-06-02T14:30:01+00:00","mainEntityOfPage":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/"},"wordCount":1755,"publisher":{"@id":"https:\/\/opensource.microsoft.com\/blog\/#organization"},"image":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.webp","keywords":["Browser","Federated Learning","On-Device Training","ONNX Runtime","ONNX Runtime Training","Web training"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/","url":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/","name":"On-Device Training: Training a model in browser | Microsoft Open Source Blog","isPartOf":{"@id":"https:\/\/opensource.microsoft.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#primaryimage"},"image":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.webp","datePublished":"2024-02-06T16:00:00+00:00","dateModified":"2025-06-02T14:30:01+00:00","description":"Introducing ONNX Runtime Training for Web, a new feature in ONNX Runtime (ORT) that enables training models in the browser. Learn more.","breadcrumb":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#primaryimage","url":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.webp","contentUrl":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23_Collaboration_018.webp","width":1170,"height":640},{"@type":"BreadcrumbList","@id":"https:\/\/opensource.microsoft.com\/blog\/2024\/02\/06\/on-device-training-training-a-model-in-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/opensource.microsoft.com\/blog\/"},{"@type":"ListItem","position":2,"name":"On-Device Training: Training a model in browser"}]},{"@type":"WebSite","@id":"https:\/\/opensource.microsoft.com\/blog\/#website","url":"https:\/\/opensource.microsoft.com\/blog\/","name":"Microsoft Open Source Blog","description":"Open dialogue about openness at Microsoft \u2013 open source, standards, interoperability","publisher":{"@id":"https:\/\/opensource.microsoft.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/opensource.microsoft.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/opensource.microsoft.com\/blog\/#organization","name":"Microsoft Open Source Blog","url":"https:\/\/opensource.microsoft.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/opensource.microsoft.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/08\/Microsoft-Logo.png","contentUrl":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/08\/Microsoft-Logo.png","width":259,"height":194,"caption":"Microsoft Open Source Blog"},"image":{"@id":"https:\/\/opensource.microsoft.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/OpenAtMicrosoft"]}]}},"msxcm_display_generated_audio":false,"msxcm_animated_featured_image":null,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Open Source Blog","distributor_original_site_url":"https:\/\/opensource.microsoft.com\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/95050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/users\/6194"}],"replies":[{"embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=95050"}],"version-history":[{"count":35,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/95050\/revisions"}],"predecessor-version":[{"id":97520,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/95050\/revisions\/97520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/media\/95471"}],"wp:attachment":[{"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=95050"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/post_tag?post=95050"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/content-type?post=95050"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/topic?post=95050"},{"taxonomy":"programming-languages","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/programming-languages?post=95050"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/coauthors?post=95050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}