cabreraalex

// Declare stores with their associated Traitlets here.
export const value = WidgetWritable<string>('value', '');
export const count = WidgetWritable<number>('count', 0);

// Set the model for each store you create.
export function setStoreModels(model: DOMWidgetModel): void {
  value.setModel(model);
  count.setModel(model);
}

cabreraalex

<script>
  import { value, count } from './stores';
  
  let localValue = $value;
</script>

<style>
  h1 {
    color: purple;
  }

cabreraalex

from ipywidgets import DOMWidget
from traitlets import Integer, Unicode
from ._frontend import module_name, module_version

class ExampleWidget(DOMWidget):
    """Example widget with a counter, increment button, and units string."""
    _model_name = Unicode('ExampleModel').tag(sync=True)
    _model_module = Unicode(module_name).tag(sync=True)
    _model_module_version = Unicode(module_version).tag(sync=True)
    _view_name = Unicode('ExampleView').tag(sync=True)

cabreraalex

<script>
  import { value } from './stores';
  
  let localValue = $value;
</script>

<style>
  h1 {
    color: purple;
  }

cabreraalex

from ipywidgets import DOMWidget
from traitlets import Integer, Unicode
from ._frontend import module_name, module_version

class ExampleWidget(DOMWidget):
    """Example widget with a counter and increment button."""
    _model_name = Unicode('ExampleModel').tag(sync=True)
    _model_module = Unicode(module_name).tag(sync=True)
    _model_module_version = Unicode(module_version).tag(sync=True)
    _view_name = Unicode('ExampleView').tag(sync=True)

cabreraalex

[{"word": "covered face", "weight": 1, "dists": [1.0, 0.38282279388476614, 0.3361235042716181, 0.7655300124748728, 0.5940753607554056, 0.6919002540403155, 0.7159648718687597, 0.46371801066005697, 0.780836285908319, 0.4807528928982294, 0.553370492921728, 0.45999437445383445, 0.6559477801028842, 0.4994693408383114, 0.7497030392129822, 0.720065946488172, 0.6781960623615415, 0.633537666391945, 0.4386246566457993, 0.5302558342410492, 0.6448172714245405, 0.6805264625220033, 0.4053345392914004, 0.3725375749627701, 0.8809755546554404, 0.496717232044288, 0.44400835104193853, 0.7271345222368581, 0.31719383499757153, 0.4067573541223276, 0.6555576761794705, 0.24093219659929724, 0.49275266568221016, 0.5460153078771401, 0.5320805991870632, 0.46337237307444634, 0.4215108478563876, 0.5290797683008414, 0.5976860627599854, 0.5237560738521613, 0.2846714476971533, 0.6036939790786832, 0.6823788781627457, 0.3628434329357105, 0.6278271860124698, 0.5171533411253912, 0.503553860243585, 0.3275253541838854, 0.49275266568221016]}, {"wor

cabreraalex

<script>
  let rand = -1;

  function getRand() {
    fetch("./rand")
      .then(d => d.text())
      .then(d => (rand = d));
  }
</script>

cabreraalex

from flask import Flask, send_from_directory
import random

app = Flask(__name__)

# Path for our main Svelte page
@app.route("/")
def base():
    return send_from_directory('client/public', 'index.html')

cabreraalex

from flask import Flask
import random

app = Flask(__name__)

@app.route("/rand")
def hello():
    return str(random.randint(0, 100))

if __name__ == "__main__":

cabreraalex

<script>
  let count = 0;
  function handleClick() {
    count++;
  }
</script>
<h1>The count is {count}</h1>
<button on:click={handleClick}>Add to count</button>