diff --git a/build/lib/gradio/static/css/style.css b/build/lib/gradio/static/css/style.css index a9ec927984..f362640eca 100644 --- a/build/lib/gradio/static/css/style.css +++ b/build/lib/gradio/static/css/style.css @@ -57,6 +57,20 @@ button.secondary { color: black; background-color: #F6F6F6; } +.interpretation_legend { + display: flex; + padding: 8px; + border: solid 2px black; + justify-content: space-between; + font-family: monospace; + background-image: linear-gradient(to right, #3498db ,white,#e74c3c); +} +.interpretation_explained ul { + font-size: 14px; +} +.close_explain { + cursor: pointer; +} .examples table { border-collapse: collapse; font-family: monospace; diff --git a/build/lib/gradio/static/js/gradio.js b/build/lib/gradio/static/js/gradio.js index 041fc43eda..bab6edfe6c 100644 --- a/build/lib/gradio/static/js/gradio.js +++ b/build/lib/gradio/static/js/gradio.js @@ -33,8 +33,17 @@ function gradio(config, fn, target, example_file_path) { +
+

Interpretation Legend

+
+
← Decreased output score / confidence
+
Increased output score / confidence →
+
+

When you click Interpret, you can see how different parts of the input contributed to the final output. The legend above will highlight each of the input components as follows:

+ +
@@ -178,8 +187,19 @@ function gradio(config, fn, target, example_file_path) { } if (!config["allow_interpretation"]) { target.find(".interpret").hide(); + target.find(".interpretation_explained").hide(); + } else { + let interpret_html = ""; + for (let [i, interface] of io_master.input_interfaces.entries()) { + let label = config.input_interfaces[i][1]["label"];; + interpret_html += "
  • " + label + " - " + interface.interpretation_logic + "
  • "; + } + target.find(".interpretation_explained ul").html(interpret_html); } } + target.find(".interpretation_explained .close_explain").click(function() { + target.find(".interpretation_explained").remove(); + }); if (config["examples"]) { target.find(".examples").removeClass("invisible"); let html = "" diff --git a/build/lib/gradio/static/js/interfaces/input/audio.js b/build/lib/gradio/static/js/interfaces/input/audio.js index 82018338cc..03baa391b8 100644 --- a/build/lib/gradio/static/js/interfaces/input/audio.js +++ b/build/lib/gradio/static/js/interfaces/input/audio.js @@ -143,12 +143,13 @@ const audio_input = { let html = "" for (let [i, value] of data.entries()) { html += ` -
    ` } this.target.find(".interpret_range").html(html); }, + interpretation_logic: "Highlights the output contribution of subsections of the audio input split by time.", clear: function() { this.audio_data = null; this.state = "NO_AUDIO"; diff --git a/build/lib/gradio/static/js/interfaces/input/checkbox.js b/build/lib/gradio/static/js/interfaces/input/checkbox.js index 0a600dbd79..f6889b8d59 100644 --- a/build/lib/gradio/static/js/interfaces/input/checkbox.js +++ b/build/lib/gradio/static/js/interfaces/input/checkbox.js @@ -18,7 +18,7 @@ const checkbox = { ${mark} ` } else { - html += `
    ${mark} @@ -28,6 +28,7 @@ const checkbox = { } this.target.find(".interpretation").html(html); }, + interpretation_logic: "Highlights the result of the alternative selection to checkbox. Hover to see alternative output.", submit: function() { let io = this; let is_checked = this.target.find("input").prop("checked") diff --git a/build/lib/gradio/static/js/interfaces/input/checkbox_group.js b/build/lib/gradio/static/js/interfaces/input/checkbox_group.js index 0445cb304e..cfc99cef23 100644 --- a/build/lib/gradio/static/js/interfaces/input/checkbox_group.js +++ b/build/lib/gradio/static/js/interfaces/input/checkbox_group.js @@ -36,7 +36,7 @@ const checkbox_group = { ${mark}
    ` } else { - html += `
    ${mark} @@ -48,6 +48,7 @@ const checkbox_group = { this.target.find("label").eq(i).append(html); } }, + interpretation_logic: "Highlights the result of alternative selections to the checkboxes. Hover to see alternative output.", clear: function() { this.target.find(".interpretation").empty(); this.target.find("input").prop("checked", false); diff --git a/build/lib/gradio/static/js/interfaces/input/dataframe.js b/build/lib/gradio/static/js/interfaces/input/dataframe.js index 323a24e605..d9db318ff2 100644 --- a/build/lib/gradio/static/js/interfaces/input/dataframe.js +++ b/build/lib/gradio/static/js/interfaces/input/dataframe.js @@ -69,6 +69,7 @@ const dataframe_input = { } } }, + interpretation_logic: "Highlights the output contribution of each cell in dataframe.", clear: function() { this.table.setData(this.default_data); this.target.find("td").css("background-color", "white"); diff --git a/build/lib/gradio/static/js/interfaces/input/dropdown.js b/build/lib/gradio/static/js/interfaces/input/dropdown.js index cd83ff5791..61dbb9a0fe 100644 --- a/build/lib/gradio/static/js/interfaces/input/dropdown.js +++ b/build/lib/gradio/static/js/interfaces/input/dropdown.js @@ -24,7 +24,7 @@ const dropdown = {
    ` } else { html += ` -
    ${this.choices[i]} @@ -34,6 +34,7 @@ const dropdown = { } this.target.find(".select_interpretation").html(html); }, + interpretation_logic: "Highlights the result of the alternative selection to dropdown. Hover to see alternative output.", submit: function() { checked_val = this.target.find("option:selected").val(); if (checked_val) { diff --git a/build/lib/gradio/static/js/interfaces/input/image.js b/build/lib/gradio/static/js/interfaces/input/image.js index 4561146fe9..112adf4242 100644 --- a/build/lib/gradio/static/js/interfaces/input/image.js +++ b/build/lib/gradio/static/js/interfaces/input/image.js @@ -197,6 +197,7 @@ const image_input = { paintSaliency(data, ctx, width, height); } }, + interpretation_logic: "Highlights the output contribution of subregions of image.", state: "NO_IMAGE", image_data: null, set_image_data: function(image_data, update_editor) { diff --git a/build/lib/gradio/static/js/interfaces/input/number.js b/build/lib/gradio/static/js/interfaces/input/number.js index b3be9cb8d8..b1f58e4c8d 100644 --- a/build/lib/gradio/static/js/interfaces/input/number.js +++ b/build/lib/gradio/static/js/interfaces/input/number.js @@ -33,7 +33,7 @@ const number_input = {
    ` } else { html += ` -
    ${value} @@ -42,8 +42,8 @@ const number_input = { } } this.target.find(".interpret_range").html(html); - }, + interpretation_logic: "Highlights the result of the alternative, neighboring values to input. Hover to see alternative output.", load_example: function(data) { this.target.find(".input_text").val(data); } diff --git a/build/lib/gradio/static/js/interfaces/input/radio.js b/build/lib/gradio/static/js/interfaces/input/radio.js index 9dedb4f19a..0312fa2280 100644 --- a/build/lib/gradio/static/js/interfaces/input/radio.js +++ b/build/lib/gradio/static/js/interfaces/input/radio.js @@ -31,7 +31,7 @@ const radio = { ✓
    ` } else { - var html = `
    ✓ @@ -41,6 +41,7 @@ const radio = { this.target.find("label").eq(i).append(html); } }, + interpretation_logic: "Highlights the result of the alternative selection to radio. Hover to see alternative output.", clear: function() { this.target.find(".interpretation").empty(); this.target.find("input").prop("checked", false); diff --git a/build/lib/gradio/static/js/interfaces/input/slider.js b/build/lib/gradio/static/js/interfaces/input/slider.js index 088b6adde2..7f7194b163 100644 --- a/build/lib/gradio/static/js/interfaces/input/slider.js +++ b/build/lib/gradio/static/js/interfaces/input/slider.js @@ -31,13 +31,14 @@ const slider = { let html = "" for (let [i, value] of data.entries()) { html += ` -
    ` } this.target.find(".interpret_range").html(html); }, + interpretation_logic: "Highlights the result of the alternative values along slider. Hover to see alternative output.", clear: function() { this.load_example(this.minimum) this.target.find(".interpret_range").empty(); diff --git a/build/lib/gradio/static/js/interfaces/input/textbox.js b/build/lib/gradio/static/js/interfaces/input/textbox.js index c2be7cc71b..cf4d854f72 100644 --- a/build/lib/gradio/static/js/interfaces/input/textbox.js +++ b/build/lib/gradio/static/js/interfaces/input/textbox.js @@ -37,7 +37,7 @@ const textbox_input = { [char, score] = char_set; let color = getSaliencyColor(score); html += ` - ${char} @@ -45,6 +45,7 @@ const textbox_input = { } this.target.find(".output_text").html(html); }, + interpretation_logic: "Highlights the output contribution of substrings of input.", load_example: function(data) { this.target.find(".input_text").val(data); } diff --git a/gradio/static/css/style.css b/gradio/static/css/style.css index a9ec927984..f362640eca 100644 --- a/gradio/static/css/style.css +++ b/gradio/static/css/style.css @@ -57,6 +57,20 @@ button.secondary { color: black; background-color: #F6F6F6; } +.interpretation_legend { + display: flex; + padding: 8px; + border: solid 2px black; + justify-content: space-between; + font-family: monospace; + background-image: linear-gradient(to right, #3498db ,white,#e74c3c); +} +.interpretation_explained ul { + font-size: 14px; +} +.close_explain { + cursor: pointer; +} .examples table { border-collapse: collapse; font-family: monospace; diff --git a/gradio/static/js/gradio.js b/gradio/static/js/gradio.js index 041fc43eda..bab6edfe6c 100644 --- a/gradio/static/js/gradio.js +++ b/gradio/static/js/gradio.js @@ -33,8 +33,17 @@ function gradio(config, fn, target, example_file_path) {
    +
    +

    Interpretation Legend

    +
    +
    ← Decreased output score / confidence
    +
    Increased output score / confidence →
    +
    +

    When you click Interpret, you can see how different parts of the input contributed to the final output. The legend above will highlight each of the input components as follows:

    + +
    @@ -178,8 +187,19 @@ function gradio(config, fn, target, example_file_path) { } if (!config["allow_interpretation"]) { target.find(".interpret").hide(); + target.find(".interpretation_explained").hide(); + } else { + let interpret_html = ""; + for (let [i, interface] of io_master.input_interfaces.entries()) { + let label = config.input_interfaces[i][1]["label"];; + interpret_html += "
  • " + label + " - " + interface.interpretation_logic + "
  • "; + } + target.find(".interpretation_explained ul").html(interpret_html); } } + target.find(".interpretation_explained .close_explain").click(function() { + target.find(".interpretation_explained").remove(); + }); if (config["examples"]) { target.find(".examples").removeClass("invisible"); let html = "" diff --git a/gradio/static/js/interfaces/input/audio.js b/gradio/static/js/interfaces/input/audio.js index 82018338cc..03baa391b8 100644 --- a/gradio/static/js/interfaces/input/audio.js +++ b/gradio/static/js/interfaces/input/audio.js @@ -143,12 +143,13 @@ const audio_input = { let html = "" for (let [i, value] of data.entries()) { html += ` -
    ` } this.target.find(".interpret_range").html(html); }, + interpretation_logic: "Highlights the output contribution of subsections of the audio input split by time.", clear: function() { this.audio_data = null; this.state = "NO_AUDIO"; diff --git a/gradio/static/js/interfaces/input/checkbox.js b/gradio/static/js/interfaces/input/checkbox.js index 0a600dbd79..f6889b8d59 100644 --- a/gradio/static/js/interfaces/input/checkbox.js +++ b/gradio/static/js/interfaces/input/checkbox.js @@ -18,7 +18,7 @@ const checkbox = { ${mark} ` } else { - html += `
    ${mark} @@ -28,6 +28,7 @@ const checkbox = { } this.target.find(".interpretation").html(html); }, + interpretation_logic: "Highlights the result of the alternative selection to checkbox. Hover to see alternative output.", submit: function() { let io = this; let is_checked = this.target.find("input").prop("checked") diff --git a/gradio/static/js/interfaces/input/checkbox_group.js b/gradio/static/js/interfaces/input/checkbox_group.js index 0445cb304e..cfc99cef23 100644 --- a/gradio/static/js/interfaces/input/checkbox_group.js +++ b/gradio/static/js/interfaces/input/checkbox_group.js @@ -36,7 +36,7 @@ const checkbox_group = { ${mark}
    ` } else { - html += `
    ${mark} @@ -48,6 +48,7 @@ const checkbox_group = { this.target.find("label").eq(i).append(html); } }, + interpretation_logic: "Highlights the result of alternative selections to the checkboxes. Hover to see alternative output.", clear: function() { this.target.find(".interpretation").empty(); this.target.find("input").prop("checked", false); diff --git a/gradio/static/js/interfaces/input/dataframe.js b/gradio/static/js/interfaces/input/dataframe.js index 323a24e605..d9db318ff2 100644 --- a/gradio/static/js/interfaces/input/dataframe.js +++ b/gradio/static/js/interfaces/input/dataframe.js @@ -69,6 +69,7 @@ const dataframe_input = { } } }, + interpretation_logic: "Highlights the output contribution of each cell in dataframe.", clear: function() { this.table.setData(this.default_data); this.target.find("td").css("background-color", "white"); diff --git a/gradio/static/js/interfaces/input/dropdown.js b/gradio/static/js/interfaces/input/dropdown.js index cd83ff5791..61dbb9a0fe 100644 --- a/gradio/static/js/interfaces/input/dropdown.js +++ b/gradio/static/js/interfaces/input/dropdown.js @@ -24,7 +24,7 @@ const dropdown = {
    ` } else { html += ` -
    ${this.choices[i]} @@ -34,6 +34,7 @@ const dropdown = { } this.target.find(".select_interpretation").html(html); }, + interpretation_logic: "Highlights the result of the alternative selection to dropdown. Hover to see alternative output.", submit: function() { checked_val = this.target.find("option:selected").val(); if (checked_val) { diff --git a/gradio/static/js/interfaces/input/image.js b/gradio/static/js/interfaces/input/image.js index 4561146fe9..112adf4242 100644 --- a/gradio/static/js/interfaces/input/image.js +++ b/gradio/static/js/interfaces/input/image.js @@ -197,6 +197,7 @@ const image_input = { paintSaliency(data, ctx, width, height); } }, + interpretation_logic: "Highlights the output contribution of subregions of image.", state: "NO_IMAGE", image_data: null, set_image_data: function(image_data, update_editor) { diff --git a/gradio/static/js/interfaces/input/number.js b/gradio/static/js/interfaces/input/number.js index b3be9cb8d8..b1f58e4c8d 100644 --- a/gradio/static/js/interfaces/input/number.js +++ b/gradio/static/js/interfaces/input/number.js @@ -33,7 +33,7 @@ const number_input = {
    ` } else { html += ` -
    ${value} @@ -42,8 +42,8 @@ const number_input = { } } this.target.find(".interpret_range").html(html); - }, + interpretation_logic: "Highlights the result of the alternative, neighboring values to input. Hover to see alternative output.", load_example: function(data) { this.target.find(".input_text").val(data); } diff --git a/gradio/static/js/interfaces/input/radio.js b/gradio/static/js/interfaces/input/radio.js index 9dedb4f19a..0312fa2280 100644 --- a/gradio/static/js/interfaces/input/radio.js +++ b/gradio/static/js/interfaces/input/radio.js @@ -31,7 +31,7 @@ const radio = { ✓
    ` } else { - var html = `
    ✓ @@ -41,6 +41,7 @@ const radio = { this.target.find("label").eq(i).append(html); } }, + interpretation_logic: "Highlights the result of the alternative selection to radio. Hover to see alternative output.", clear: function() { this.target.find(".interpretation").empty(); this.target.find("input").prop("checked", false); diff --git a/gradio/static/js/interfaces/input/slider.js b/gradio/static/js/interfaces/input/slider.js index 088b6adde2..7f7194b163 100644 --- a/gradio/static/js/interfaces/input/slider.js +++ b/gradio/static/js/interfaces/input/slider.js @@ -31,13 +31,14 @@ const slider = { let html = "" for (let [i, value] of data.entries()) { html += ` -
    ` } this.target.find(".interpret_range").html(html); }, + interpretation_logic: "Highlights the result of the alternative values along slider. Hover to see alternative output.", clear: function() { this.load_example(this.minimum) this.target.find(".interpret_range").empty(); diff --git a/gradio/static/js/interfaces/input/textbox.js b/gradio/static/js/interfaces/input/textbox.js index c2be7cc71b..cf4d854f72 100644 --- a/gradio/static/js/interfaces/input/textbox.js +++ b/gradio/static/js/interfaces/input/textbox.js @@ -37,7 +37,7 @@ const textbox_input = { [char, score] = char_set; let color = getSaliencyColor(score); html += ` - ${char} @@ -45,6 +45,7 @@ const textbox_input = { } this.target.find(".output_text").html(html); }, + interpretation_logic: "Highlights the output contribution of substrings of input.", load_example: function(data) { this.target.find(".input_text").val(data); }