add explanantion legend

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;

build/lib/gradio/static/js/gradio.js

@@ -33,8 +33,17 @@ function gradio(config, fn, target, example_file_path) {
         </div>
       </div>
     </div>
+    <div class="interpretation_explained">
+      <h4>Interpretation Legend <span class='close_explain'>&#10006;</span></h4>
+      <div class='interpretation_legend'>
+        <div>&larr; Decreased output score / confidence</div>
+        <div>Increased output score / confidence &rarr;</div>
+      </div>
+      <p>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:</p>
+      <ul></ul>
+    </div>
     <div class="examples invisible">
-      <h3>Examples <small>(click to load)</small></h3>
+      <h4>Examples <small>(click to load)</small></h4>
       <table>
       </table>
     </div>
@@ -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 += "<li><strong>" + label + "</strong> - " + interface.interpretation_logic + "</li>";
+        }
+        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 = "<thead>"

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 += `
-        <div class='alternate' alternate_index='${i}' title="${value}"
+        <div class='alternate' alternate_index='${i}'
           style='background-color: ${getSaliencyColor(value)}'>
         </div>      `
     }
     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";

build/lib/gradio/static/js/interfaces/input/checkbox.js

@@ -18,7 +18,7 @@ const checkbox = {
           ${mark}
         </div>`
       } else {
-        html += `<div class='interpret_check alternate' title='${score}'
+        html += `<div class='interpret_check alternate'
         alternate_index='${alternate_index}'
         style='background-color: ${getSaliencyColor(score)}'>
           ${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")

build/lib/gradio/static/js/interfaces/input/checkbox_group.js

@@ -36,7 +36,7 @@ const checkbox_group = {
               ${mark}
           </div>`
         } else {
-          html += `<div class='interpret_check alternate' title='${score}'
+          html += `<div class='interpret_check alternate'
             alternate_index='${alternate_index}'
             style='background-color: ${getSaliencyColor(score)}'>
               ${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);    

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");

build/lib/gradio/static/js/interfaces/input/dropdown.js

@@ -24,7 +24,7 @@ const dropdown = {
           </div>`
       } else {
         html += `
-          <div title='${data[i]}' class='alternate' 
+          <div class='alternate' 
           alternate_index=${alternate_index} 
           style='background-color: ${getSaliencyColor(data[i])}'>
             ${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) {

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) {

build/lib/gradio/static/js/interfaces/input/number.js

@@ -33,7 +33,7 @@ const number_input = {
           </div>`
       } else {
         html += `
-          <div title="${score}" class='alternate'
+          <div class='alternate'
             alternate_index=${alternate_index}
             style='background-color: ${getSaliencyColor(score)}'>
             ${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);    
   }

build/lib/gradio/static/js/interfaces/input/radio.js

@@ -31,7 +31,7 @@ const radio = {
             ✓
           </div>`
       } else {
-        var html = `<div class='interpret_check alternate' title='${data[i]}'
+        var html = `<div class='interpret_check alternate'
             alternate_index=${alternate_index}
             style='background-color: ${getSaliencyColor(data[i])}'>
             &#x2713;
@@ -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);    

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 += `
-        <div title="${value}" class='alternate'
+        <div class='alternate'
           alternate_index=${i}
           style='background-color: ${getSaliencyColor(value)}'>
         </div>      `
     }
     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();

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 += `
-      <span title="${score}" class='alternate'
+      <span class='alternate'
         alternate_index=${i}
         style="background-color: ${color}">
         ${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);    
   }

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;

gradio/static/js/gradio.js

@@ -33,8 +33,17 @@ function gradio(config, fn, target, example_file_path) {
         </div>
       </div>
     </div>
+    <div class="interpretation_explained">
+      <h4>Interpretation Legend <span class='close_explain'>&#10006;</span></h4>
+      <div class='interpretation_legend'>
+        <div>&larr; Decreased output score / confidence</div>
+        <div>Increased output score / confidence &rarr;</div>
+      </div>
+      <p>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:</p>
+      <ul></ul>
+    </div>
     <div class="examples invisible">
-      <h3>Examples <small>(click to load)</small></h3>
+      <h4>Examples <small>(click to load)</small></h4>
       <table>
       </table>
     </div>
@@ -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 += "<li><strong>" + label + "</strong> - " + interface.interpretation_logic + "</li>";
+        }
+        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 = "<thead>"

gradio/static/js/interfaces/input/audio.js

@@ -143,12 +143,13 @@ const audio_input = {
     let html = ""
     for (let [i, value] of data.entries()) {
       html += `
-        <div class='alternate' alternate_index='${i}' title="${value}"
+        <div class='alternate' alternate_index='${i}'
           style='background-color: ${getSaliencyColor(value)}'>
         </div>      `
     }
     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";

gradio/static/js/interfaces/input/checkbox.js

@@ -18,7 +18,7 @@ const checkbox = {
           ${mark}
         </div>`
       } else {
-        html += `<div class='interpret_check alternate' title='${score}'
+        html += `<div class='interpret_check alternate'
         alternate_index='${alternate_index}'
         style='background-color: ${getSaliencyColor(score)}'>
           ${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")

gradio/static/js/interfaces/input/checkbox_group.js

@@ -36,7 +36,7 @@ const checkbox_group = {
               ${mark}
           </div>`
         } else {
-          html += `<div class='interpret_check alternate' title='${score}'
+          html += `<div class='interpret_check alternate'
             alternate_index='${alternate_index}'
             style='background-color: ${getSaliencyColor(score)}'>
               ${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);    

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");

gradio/static/js/interfaces/input/dropdown.js

@@ -24,7 +24,7 @@ const dropdown = {
           </div>`
       } else {
         html += `
-          <div title='${data[i]}' class='alternate' 
+          <div class='alternate' 
           alternate_index=${alternate_index} 
           style='background-color: ${getSaliencyColor(data[i])}'>
             ${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) {

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) {

gradio/static/js/interfaces/input/number.js

@@ -33,7 +33,7 @@ const number_input = {
           </div>`
       } else {
         html += `
-          <div title="${score}" class='alternate'
+          <div class='alternate'
             alternate_index=${alternate_index}
             style='background-color: ${getSaliencyColor(score)}'>
             ${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);    
   }

gradio/static/js/interfaces/input/radio.js

@@ -31,7 +31,7 @@ const radio = {
             ✓
           </div>`
       } else {
-        var html = `<div class='interpret_check alternate' title='${data[i]}'
+        var html = `<div class='interpret_check alternate'
             alternate_index=${alternate_index}
             style='background-color: ${getSaliencyColor(data[i])}'>
             &#x2713;
@@ -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);    

gradio/static/js/interfaces/input/slider.js

@@ -31,13 +31,14 @@ const slider = {
     let html = ""
     for (let [i, value] of data.entries()) {
       html += `
-        <div title="${value}" class='alternate'
+        <div class='alternate'
           alternate_index=${i}
           style='background-color: ${getSaliencyColor(value)}'>
         </div>      `
     }
     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();

gradio/static/js/interfaces/input/textbox.js

@@ -37,7 +37,7 @@ const textbox_input = {
       [char, score] = char_set;
       let color = getSaliencyColor(score);
       html += `
-      <span title="${score}" class='alternate'
+      <span class='alternate'
         alternate_index=${i}
         style="background-color: ${color}">
         ${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);    
   }