tease 0.2.0

Rapidly prototype interfaces for your machine learning models
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

use crate::{Input, Teaser};
use std::fmt::Write;

fn escape(text: &str) -> String {
    text.replace('&', "&")
        .replace('<', "&lt;")
        .replace('>', "&gt;")
        .replace('"', "&quot;")
        .replace('\'', "&#39;")
}

pub(crate) fn render(demo: &Teaser) -> String {
    let mut fields = String::new();
    for (index, input) in demo.inputs.iter().enumerate() {
        let label = escape(&input.label(index));
        write!(
            fields,
            "<div class=\"field\"><label for=\"input-{index}\">{label}</label>"
        )
        .unwrap();
        match input {
            Input::Number {
                initial_value,
                min,
                max,
                ..
            } => {
                let bounds = format!(
                    "{}{}",
                    min.map(|n| format!(" min=\"{n}\"")).unwrap_or_default(),
                    max.map(|n| format!(" max=\"{n}\"")).unwrap_or_default()
                );
                write!(fields, "<input data-input id=\"input-{index}\" type=\"number\" step=\"any\" value=\"{initial_value}\"{bounds} required aria-describedby=\"error-{index}\">").unwrap();
            }
            Input::Slider {
                min,
                max,
                step,
                initial_value,
                ..
            } => {
                write!(fields, "<input data-input id=\"input-{index}\" type=\"range\" min=\"{min}\" max=\"{max}\" step=\"{step}\" value=\"{initial_value}\" aria-describedby=\"error-{index}\"><output class=\"slider-value\" for=\"input-{index}\">{initial_value}</output>").unwrap();
            }
            Input::Dropdown {
                options,
                initial_value,
                ..
            } => {
                write!(
                    fields,
                    "<select data-input id=\"input-{index}\" aria-describedby=\"error-{index}\">"
                )
                .unwrap();
                for (choice_index, choice) in options.iter().enumerate() {
                    let selected = if choice_index == *initial_value {
                        " selected"
                    } else {
                        ""
                    };
                    write!(
                        fields,
                        "<option value=\"{choice_index}\"{selected}>{}</option>",
                        escape(&choice.label)
                    )
                    .unwrap();
                }
                fields.push_str("</select>");
            }
        }
        write!(fields, "<p class=\"error\" id=\"error-{index}\"></p></div>").unwrap();
    }
    let mut outputs = String::new();
    for (index, output) in demo.outputs.iter().enumerate() {
        write!(outputs, "<div class=\"field\"><label for=\"output-{index}\">{}</label><output data-output id=\"output-{index}\"></output></div>", escape(&output.label(index))).unwrap();
    }
    format!(
        r#"<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>{title}</title><style>{style}</style></head><body><main>
<h1>{title}</h1><p class="description">{description}</p>
<div class="panels"><form id="tease-form" novalidate>{fields}<button id="submit" type="submit">Predict</button></form>
<section aria-label="Results" aria-live="polite">{outputs}<p id="status" role="status">Ready.</p></section></div>
<p id="error" class="error" role="alert" tabindex="-1"></p>
</main><script>{script}</script></body></html>"#,
        title = escape(&demo.title),
        description = escape(&demo.description),
        style = include_str!("ui.css"),
        script = include_str!("ui.js")
    )
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::{Choice, Output};

    #[test]
    fn text_is_escaped_in_every_component() {
        let payload = "\"><script>window.pwned=true</script>&'";
        let demo = Teaser::default()
            .with_title(payload)
            .with_description(payload)
            .with_inputs(vec![Input::Dropdown {
                label: Some(payload.into()),
                initial_value: 0,
                options: vec![Choice::text(payload, payload)],
            }])
            .with_output(Output::text(payload));
        let html = render(&demo);
        assert!(!html.contains(payload));
        assert!(html.contains("&lt;script&gt;window.pwned=true&lt;/script&gt;"));
        assert!(html.contains("for=\"input-0\""));
        assert!(html.contains("id=\"input-0\""));
    }
}