Have a guide for Wasm compilation #259
Description
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_projectThis 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 --releaseThis 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-cliThen, 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>