Natural language detection using whatlang-rs
The main WebAssembly export here is detect
, which takes a
string pointer and gives back a pointer to a DetectResult
struct.
This function gets called each time the textarea is updated.
wasm-ffi
wraps the call to detect
. It writes the
input string to memory before calling the WebAssembly function and it returns
an object that can access the struct fields.
const $ = sel => document.querySelector(sel); | |
const textarea = $('textarea'); | |
const DetectResult = new ffi.Struct({ | |
lang: ffi.rust.string, | |
confidence: 'f64', | |
is_reliable: 'bool', | |
}); | |
const whatlang = new ffi.Wrapper({ | |
detect: [DetectResult, ['string']], | |
}); | |
whatlang.fetch('whatlang.wasm').then(() => { | |
function update(str) { | |
const result = whatlang.detect(str); | |
$('#language').innerText = result.lang.value; | |
$('#reliable').className = (result.is_reliable) ? 'yes' : 'no'; | |
$('#confidence').innerText = (result.confidence * 100).toFixed(1) + '%'; | |
$('#bar').value = result.confidence * 100; | |
} | |
textarea.addEventListener('input', () => update(textarea.value)); |