Mec-iS commented 1 year ago

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>

morenol commented 1 year ago

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