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) {
+
"
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:
+
+
-
Examples (click to load)
+
Examples (click to load)
@@ -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);
}