Have a guide for Wasm compilation #259

Mec-iS · 2023-04-17T06:23:25Z

Have a brief guide that describe how Frontend developers can easily compile and load smartcore in the browser, with a simple example:

This example has been generated with ChatGPT, please @morenol take a look if the procedure is correct and works as expected.

Example

How frontend developers can compile and load the smartcore library in the browser using WebAssembly, along with a simple example of running k-means algorithm in the browser.

Step 1: Install Rustup

Rustup is the recommended toolchain manager for Rust programming language. You can install it by following the instructions at https://rustup.rs/. Rustup provides easy management of Rust compiler and associated tools. Install the Rust toolchain target wasm32-unknown-unknown to compile to WebAssembly.

Step 2: Create a Project with SmartCore

After installing Rustup, you can create a new Rust project that uses smartcore library as a dependency. You can do this by running the following command in your terminal:

cargo new my_smartcore_project

This will create a new Rust project with the name my_smartcore_project.

Step 3: Compile SmartCore into a WebAssembly Package

Inside your my_smartcore_project directory, you can now add smartcore as a dependency in your Cargo.toml file:

[dependencies]
smartcore = "0.3.1"

Next, you can build smartcore as a WebAssembly package by running the following command in your terminal:

cargo build --target wasm32-unknown-unknown --release

This will compile smartcore into a WebAssembly package with the target wasm32-unknown-unknown and the release mode for optimization.

Step 4: Create Bindings in JS

After building smartcore as a WebAssembly package, you need to create bindings in JavaScript to interact with it from the browser. You can use a tool like wasm-bindgen to generate the bindings. Install wasm-bindgen by running the following command:

cargo install wasm-bindgen-cli

Then, generate the bindings by running the following command:

wasm-bindgen target/wasm32-unknown-unknown/release/my_smartcore_project.wasm --out-dir .

This will generate a JavaScript file with the bindings in the current directory.

Step 5: Run K-Means in the Browser

Now that you have the bindings, you can load the WebAssembly package and run k-means algorithm in the browser. Here's an example using a simple HTML file and JavaScript:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SmartCore K-Means Example</title>
  <script src="my_smartcore_project_bg.js"></script>
</head>
<body>
  <h1>SmartCore K-Means Example</h1>
  <script>
    // Load the WebAssembly module
    const wasm = require('./my_smartcore_project_bg');

    // Use the k-means algorithm
    const kmeans = new wasm.KMeans(2, 2); // Initialize with 2 clusters and 2 features
    const data = wasm.Float64Array.from([1.0, 1.0, 2.0, 2.0, 9.0, 10.0, 10.0, 9.0]); // Input data
    kmeans.fit(data); // Run the k-means algorithm
    console.log(kmeans.labels()); // Get the cluster labels
  </script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

morenol · 2023-04-17T14:42:25Z

Seems correct, but I have to check because in one hand, I never have used wasm-bindgen-cli to build the wasm file directly and instead I have used wrappers like https://github.com/wasm-tool/rollup-plugin-rust and https://trunkrs.dev/. And in the other hand, I think that in order to move from step 4 to step 5, we should provide an example of folder structure and that kind of things

Mec-iS · 2023-04-18T02:34:51Z

ok. edit the draft as you find convenient and use the tools you find more helpful for the task; if you think it can be easier to use the tools you mentioned, add them as alternatives maybe.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Have a guide for Wasm compilation #259

Have a guide for Wasm compilation #259

Mec-iS commented Apr 17, 2023

morenol commented Apr 17, 2023 •

edited

Mec-iS commented Apr 18, 2023 •

edited

Have a guide for Wasm compilation #259

Have a guide for Wasm compilation #259

Comments

Mec-iS commented Apr 17, 2023

Example

Step 1: Install Rustup

Step 2: Create a Project with SmartCore

Step 3: Compile SmartCore into a WebAssembly Package

Step 4: Create Bindings in JS

Step 5: Run K-Means in the Browser

morenol commented Apr 17, 2023 • edited

Mec-iS commented Apr 18, 2023 • edited

morenol commented Apr 17, 2023 •

edited

Mec-iS commented Apr 18, 2023 •

edited