Skip to content

Commit 418fd91

Browse files
committed
deploy: 85719af
1 parent 59c8726 commit 418fd91

3 files changed

Lines changed: 104 additions & 49 deletions

File tree

index.html

Lines changed: 104 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<title>Lang Shift</title>
66

77
<script type="module">
8-
import init, * as bindings from '/langshift/langshift-54d88d2bf8e58495.js';
9-
const wasm = await init({ module_or_path: '/langshift/langshift-54d88d2bf8e58495_bg.wasm' });
8+
import init, * as bindings from '/langshift/langshift-a26a31be7f360ec6.js';
9+
const wasm = await init({ module_or_path: '/langshift/langshift-a26a31be7f360ec6_bg.wasm' });
1010

1111

1212
window.wasmBindings = bindings;
@@ -15,66 +15,121 @@
1515
dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
1616

1717
</script>
18-
<link rel="modulepreload" href="/langshift/langshift-54d88d2bf8e58495.js" crossorigin="anonymous" integrity="sha384-giUBHKbPxnZdmDCP/B+2Bobd2nIuQAQDj6RqzafFShXc2yM9I/+FArUMMz9CXSfo"><link rel="preload" href="/langshift/langshift-54d88d2bf8e58495_bg.wasm" crossorigin="anonymous" integrity="sha384-AwE5UYS+uJpBQJUXNovxFQV1fEFwWOP58x2B0eQMDo3byPumbJtxkXL7kDYnqg7m" as="fetch" type="application/wasm"></head>
18+
<link rel="modulepreload" href="/langshift/langshift-a26a31be7f360ec6.js" crossorigin="anonymous" integrity="sha384-giUBHKbPxnZdmDCP/B+2Bobd2nIuQAQDj6RqzafFShXc2yM9I/+FArUMMz9CXSfo"><link rel="preload" href="/langshift/langshift-a26a31be7f360ec6_bg.wasm" crossorigin="anonymous" integrity="sha384-ymew6hKrg1DFQ2D1qX7a15NgBDKYlI5wbQH6pn446uK/XaARR9MDvita3ybrnnt8" as="fetch" type="application/wasm"></head>
1919
<body>
20-
<div id="abrams"></div>
21-
<div id="diaz"></div>
20+
<div id="container">
21+
<select id="model">
22+
<option value="abrams">Abrams-Strogatz</option>
23+
<option value="diaz">Diaz-Switkes</option>
24+
</select>
25+
<div id="params">
26+
<div id="abrams">
27+
<label for="x">x</label>
28+
<input type="number" id="x" min="1" max="10000" value="80" />
29+
<label for="y">y</label>
30+
<input type="number" id="y" min="1" max="10000" value="20" />
31+
<label for="c">c</label>
32+
<input type="number" id="c" min="0" max="1" step="0.01" value="0.5" />
33+
<label for="a">a</label>
34+
<input type="number" id="a" min="0" max="10" step="0.01" value="1.35" />
35+
<label for="s">s</label>
36+
<input type="number" id="s" min="0" max="1" step="0.01" value="0.33" />
37+
</div>
38+
<div id="diaz" style="display: none">
39+
<label for="x_1">x<sub>1</sub></label>
40+
<input type="number" id="x_1" min="1" max="10000" value="33" />
41+
<label for="x_2">x<sub>2</sub></label>
42+
<input type="number" id="x_2" min="1" max="10000" value="33" />
43+
<label for="b">b</label>
44+
<input type="number" id="b" min="0" max="10000" value="34" />
45+
<label for="m_1">m<sub>1</sub></label>
46+
<input type="number" id="m_1" min="0" max="1" step="0.01" value="0.4" />
47+
<label for="m_2">m<sub>2</sub></label>
48+
<input type="number" id="m_2" min="0" max="1" step="0.01" value="0.6" />
49+
<label for="g_1">g<sub>1</sub></label>
50+
<input type="number" id="g_1" min="0" max="1" step="0.01" value="0.6" />
51+
<label for="g_2">g<sub>2</sub></label>
52+
<input type="number" id="g_2" min="0" max="1" step="0.01" value="0.01" />
53+
<label for="alpha">&alpha;</label>
54+
<input type="number" id="alpha" min="0" max="1" step="0.01" value="0.01" />
55+
<label for="beta">&beta;</label>
56+
<input type="number" id="beta" min="0" max="1" step="0.01" value="0.2" />
57+
</div>
58+
<label for="t">t</label>
59+
<input type="number" id="t" min="1" max="1000" value="100" />
60+
<button id="solve">Solve</button>
61+
</div>
62+
<div id="plot"></div>
63+
</div>
2264

2365
<script type="module">
2466
import "https://cdn.plot.ly/plotly-3.1.0-rc.0.min.js"
2567

2668
let { solve_abrams_strogatz, solve_diaz_switkes } = wasmBindings;
2769

28-
async function run() {
29-
Plotly.newPlot('abrams', [
30-
{
31-
"y": solve_abrams_strogatz(80, 20, 0.2, 1.31, 0.33, 200),
32-
"name": "Monolingual 1",
33-
"line": {
34-
"color": "red"
35-
}
70+
const model = document.getElementById("model").value;
71+
document.getElementById("abrams").style.display = model === "abrams" ? "block" : "none";
72+
document.getElementById("diaz").style.display = model === "diaz" ? "block" : "none";
73+
74+
document.getElementById("model").addEventListener("change", (e) => {
75+
const model = e.target.value;
76+
document.getElementById("abrams").style.display = model === "abrams" ? "block" : "none";
77+
document.getElementById("diaz").style.display = model === "diaz" ? "block" : "none";
78+
});
79+
80+
document.getElementById("solve").addEventListener("click", async (e) => {
81+
const model = document.getElementById("model").value;
82+
const params = {
83+
abrams: {
84+
x: Number(document.getElementById("x").value),
85+
y: Number(document.getElementById("y").value),
86+
c: Number(document.getElementById("c").value),
87+
a: Number(document.getElementById("a").value),
88+
s: Number(document.getElementById("s").value)
3689
},
37-
{
38-
"y": solve_abrams_strogatz(80, 20, 0.2, 1.31, 0.33, 200).map(y => 100 - y),
39-
"name": "Monolingual 2",
40-
"line": {
41-
"color": "blue"
42-
}
90+
diaz: {
91+
x_1: Number(document.getElementById("x_1").value),
92+
x_2: Number(document.getElementById("x_2").value),
93+
b: Number(document.getElementById("b").value),
94+
m_1: Number(document.getElementById("m_1").value),
95+
m_2: Number(document.getElementById("m_2").value),
96+
g_1: Number(document.getElementById("g_1").value),
97+
g_2: Number(document.getElementById("g_2").value),
98+
alpha: Number(document.getElementById("alpha").value),
99+
beta: Number(document.getElementById("beta").value)
43100
}
44-
]);
101+
}[model];
102+
const t = document.getElementById("t").value;
103+
104+
if (model === "abrams") {
105+
const solution = await solve_abrams_strogatz(params.x, params.y, params.c, params.a, params.s, t);
106+
plot([solution, solution.map(y => (params.x + params.y) - y)]);
107+
} else {
108+
const x = await solve_diaz_switkes([params.x_1, params.x_2, params.b], [params.m_1, params.m_2], [params.g_1, params.g_2], params.alpha, params.beta, t, 0);
109+
const b = await solve_diaz_switkes([params.x_1, params.x_2, params.b], [params.m_1, params.m_2], [params.g_1, params.g_2], params.alpha, params.beta, t, 1);
110+
plot([x, b, x.map((y, i) => (params.x_1 + params.x_2 + params.b) - (y + b[i]))]);
111+
}
112+
});
45113

46-
Plotly.newPlot('diaz', [
47-
{
48-
"y": solve_diaz_switkes(
49-
[33, 34, 33], [0.4, 0.6], [0.6, 0.01], 0.01, 0.2, 300, 0
50-
),
51-
"name": "Monolingual 1",
52-
"line": {
53-
"color": "red"
54-
}
55-
},
56-
{
57-
"y": solve_diaz_switkes(
58-
[33, 34, 33], [0.4, 0.6], [0.6, 0.01], 0.01, 0.2, 300, 1
59-
),
60-
"name": "Bilingual",
61-
"line": {
62-
"color": "blue"
63-
}
114+
function plot(data) {
115+
Plotly.purge("plot");
116+
let input = [];
117+
for (let i = 0; i < data[0].length; i++) {
118+
input.push({ y: data[i] });
119+
}
120+
121+
const layout = {
122+
title: "Lang Shift",
123+
xaxis: {
124+
title: "Time"
64125
},
65-
{
66-
"y": solve_diaz_switkes(
67-
[33, 34, 33], [0.4, 0.6], [0.6, 0.01], 0.01, 0.2, 300, 2
68-
),
69-
"name": "Monolingual 2",
70-
"line": {
71-
"color": "green"
72-
}
126+
yaxis: {
127+
title: "Population"
73128
}
74-
]);
75-
}
129+
};
76130

77-
run();
131+
Plotly.newPlot("plot", input, layout);
132+
}
78133
</script>
79134
</body>
80135
</html>

0 commit comments

Comments
 (0)