svelte-attention

Installation

yarn add attention-vis

or

npm install attention-vis --save

Basic Usage

A compiled svelte component is really just plain old javascript, and you can use it in the following way:

Plain ol' javascript

import Attention from 'svelte-attention-vis'

function randomArr(length) {
  return Array.from(Array(length)).map((x) => Math.random());
}

let tokens = ["Hello", "world", "."];
let tokensTarget = ["What", "is", "the", "meaning", "of", "life", "?"]; // If not provided, defaults to `tokens`
let attentions = tokens.map((t) => randomArr(tokensTarget.length)); // Matrix of shape (nTokens, nTokensTarget)



let attention = new Attention({
    target: document.body,
    props: {
      tokens,
      tokensTarget,
      attentions
    }
    });

The "target" is where the component is created. Here it is added to the html body with "document.body", but it could also be document.getElementById('id-of-html-element').

You initialize properties with "props" and you can change the prop values by just assigning the props to new values - this will be updated in the UI.

Svelte project

Of course, the easiest would be to simply use it as a Svelte component in another Svelte project, with prop modification shown:

<script>
  import Attention from "svelte-attention-vis";

  function randomArr(length) {
    return Array.from(Array(length)).map((x) => Math.random());
  }

  let tokens = ["Hello", "world", "."];
  let tokensTarget = ["What", "is", "the", "meaning", "of", "life", "?"]; // If not provided, defaults to `tokens`
  let attentions = tokens.map((t) => randomArr(tokensTarget.length)); // Matrix of shape (nTokens, nTokensTarget)

  let attProps = {
    tokens,
    tokensTarget,
    attentions,
  };
</script>

<Attention {...attProps} />