add flagging options

gradio/interface.py

@@ -49,8 +49,8 @@ class Interface:
                  capture_session=False, interpretation=None,
                  title=None, description=None, article=None, thumbnail=None, 
                  css=None, server_port=7860, server_name=networking.LOCALHOST_NAME,
-                 allow_screenshot=True, allow_flagging=True, show_tips=True,
-                 embedding=None, flagging_dir="flagged", analytics_enabled=True):
+                 allow_screenshot=True, allow_flagging=True, flagging_options=None,
+                 show_tips=True, embedding=None, flagging_dir="flagged", analytics_enabled=True):
 
         """
         Parameters:
@@ -73,6 +73,7 @@ class Interface:
         server_name (str): to make app accessible on local network set to "0.0.0.0".
         allow_screenshot (bool): if False, users will not see a button to take a screenshot of the interface.
         allow_flagging (bool): if False, users will not see a button to flag an input and output.
+        flagging_options (List[str]): if not None, provides options a user must select when flagging.
         flagging_dir (str): what to name the dir where flagged data is stored.
         show_tips (bool): if True, will occasionally show tips about new Gradio features
         """
@@ -142,6 +143,7 @@ class Interface:
         self.simple_server = None
         self.allow_screenshot = allow_screenshot
         self.allow_flagging = os.getenv("GRADIO_FLAGGING") or allow_flagging
+        self.flagging_options = flagging_options 
         self.flagging_dir = flagging_dir
         Interface.instances.add(self)
         self.analytics_enabled=analytics_enabled
@@ -202,6 +204,7 @@ class Interface:
             "thumbnail": self.thumbnail,
             "allow_screenshot": self.allow_screenshot,
             "allow_flagging": self.allow_flagging,
+            "flagging_options": self.flagging_options,
             "allow_interpretation": self.interpretation is not None,
             "allow_embedding": self.embedding is not None,
         }

gradio/networking.py

@@ -105,7 +105,6 @@ def main_from_dir(path):
     for i, example in enumerate(examples):
         for j, (interface, cell) in enumerate(zip(app.interface.input_interfaces + app.interface.output_interfaces, example)):
             examples[i][j] = interface.restore_flagged(cell)
-    examples = [example[:len(app.interface.input_interfaces) + len(app.interface.output_interfaces)] for example in examples]
     return render_template("index.html",
         config=app.interface.config,
         vendor_prefix=(GRADIO_STATIC_ROOT if app.interface.share else ""),
@@ -222,13 +221,15 @@ def predict_examples():
     return jsonify(output)
 
 
-def flag_data(input_data, output_data):
+def flag_data(input_data, output_data, flag_option=None):
     flag_path = os.path.join(app.cwd, app.interface.flagging_dir)
     csv_data = []
     for i, interface in enumerate(app.interface.input_interfaces):
         csv_data.append(interface.save_flagged(flag_path, app.interface.config["input_interfaces"][i][1]["label"], input_data[i]))
     for i, interface in enumerate(app.interface.output_interfaces):
         csv_data.append(interface.save_flagged(flag_path, app.interface.config["output_interfaces"][i][1]["label"], output_data[i]))
+    if flag_option:
+        csv_data.append(flag_option)
 
     log_fp = "{}/log.csv".format(flag_path)
     is_new = not os.path.exists(log_fp)
@@ -238,6 +239,8 @@ def flag_data(input_data, output_data):
         if is_new:
             headers = [interface[1]["label"] for interface in app.interface.config["input_interfaces"]]
             headers += [interface[1]["label"] for interface in app.interface.config["output_interfaces"]]
+            if app.interface.flagging_options is not None:
+                headers.append("flag")
             writer.writerow(headers)
 
         writer.writerow(csv_data)
@@ -245,8 +248,8 @@ def flag_data(input_data, output_data):
 @app.route("/api/flag/", methods=["POST"])
 def flag():
     log_feature_analytics('flag')
-    input_data, output_data = request.json['data']['input_data'], request.json['data']['output_data']
-    flag_data(input_data, output_data)
+    data = request.json['data']
+    flag_data(data['input_data'], data['output_data'], data.get("flag_option"))
     return jsonify(success=True)
 
 

gradio/static/css/gradio.css

@@ -61,10 +61,10 @@
   display: flex;
   margin-left: -16px;
 }
-input.submit {
+button.submit {
   display: none;
 }
-input.panel_button {
+.panel_button {
   background-color: whitesmoke;
   padding: 12px;
   box-sizing: border-box;
@@ -73,6 +73,7 @@ input.panel_button {
   border-radius: 4px;
   margin-left: 16px;
   flex-grow: 1;
+  text-align: center;
 }
 .panel_button.left_panel_button {
   border-top-right-radius: 0;  
@@ -99,22 +100,55 @@ input.panel_button {
   background-color: #c90a0a;
   box-shadow: inset 0 0 4px darkred;
 }
-input.submit {
+button.submit {
   background-color: #e67e22;
   color: white;
 }
 .panel_button:hover {
   background-color: lightgray;
 }
-input.submit:hover {
+button.submit:hover {
   background-color: #f39c12;
 }
 .flag {
+  cursor: pointer;
+  position: relative;
   transition: background-color 100ms;
 }
 .flagged {
   background-color: #e74c3c !important;
 }
+.dropdown:after {
+  content: '';
+  border: 4px solid transparent;
+  border-top: 4px solid black;
+  margin-left: 8px;
+  margin-bottom: 3px;
+  display: inline-block;
+  vertical-align: bottom;
+}
+.dropcontent {
+  color: black;
+  display: none;
+  position: absolute;
+  z-index: 1;
+  background-color: white;
+  box-shadow: 0px 4px 8px 0px lightgray;   
+  min-width: 170px;
+  right: 0px;
+  top: 44px;
+}
+.dropcontent div {
+  display: block;
+  margin: 4px;
+  padding: 8px;
+}
+.dropcontent div:hover {
+  background-color: lightgray;
+}
+.dropdown:hover .dropcontent {
+  display: block;
+}
 .overlay {
   position: absolute;
   height: 100vh;

gradio/static/js/all_io.js

@@ -141,11 +141,12 @@ var io_master_template = {
     }
     this.gathering = false;
   },
-  flag: function() {
+  flag: function(flag_option) {
     var post_data = {
       'input_data' : this.last_input ,
-      'output_data' : this.last_output
-    }
+      'output_data' : this.last_output,
+      'flag_option': flag_option
+    };
     this.fn(post_data, "flag")
   },
   interpret: function() {

gradio/static/js/gradio.js

@@ -12,8 +12,8 @@ function gradio(config, fn, target, example_file_path) {
         <div class="input_interfaces">
         </div>          
         <div class="panel_buttons">
-          <input class="clear panel_button" type="reset" value="CLEAR">
-          <input class="submit panel_button" type="submit" value="SUBMIT"/>
+          <button class="clear panel_button">CLEAR</button>
+          <button class="submit panel_button">SUBMIT</button>
         </div>
       </div>
       <div class="panel output_panel">
@@ -24,16 +24,19 @@ function gradio(config, fn, target, example_file_path) {
         <div class="output_interfaces">
         </div>
         <div class="panel_buttons">
-          <input class="interpret panel_button" type="button" value="INTERPRET"/>
-          <input class="screenshot panel_button left_panel_button" type="button" value="SCREENSHOT"/>
-          <input class="record panel_button right_panel_button" type="button" value="GIF"/>
+          <button class="interpret panel_button">INTERPRET</button>
+          <button class="screenshot panel_button left_panel_button">SCREENSHOT</button>
+          <button class="record panel_button right_panel_button">GIF</button>
           <div class="screenshot_logo invisible">
             <img src="/static/img/logo_inline.png">
             <button class='record_stop'>
-              <div class='record_square' style=''></div>
+              <div class='record_square'></div>
             </button>
           </div>
-          <input class="flag panel_button" type="button" value="FLAG"/>
+          <div class="flag panel_button">
+            FLAG
+            <div class="dropcontent"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -558,14 +561,38 @@ function gradio(config, fn, target, example_file_path) {
   if (!config.show_input) {
     target.find(".input_panel").hide();
   }
+  function flash_flag() {
+    target.find(".flag").addClass("flagged");
+    target.find(".dropcontent").addClass("invisible");
+    window.setTimeout(() => {
+      target.find(".flag").removeClass("flagged");
+      target.find(".dropcontent").removeClass("invisible");
+    }, 500);
 
-  target.find(".flag").click(function() {
-    if (io_master.last_output) {
-      target.find(".flag").addClass("flagged");
-      window.setTimeout(() => {target.find(".flag").removeClass("flagged");}, 500);
-      io_master.flag();
+  }
+  if (config.allow_flagging) {
+    if (config.flagging_options) {
+      target.find(".flag").addClass("dropdown");
+      for (let option of config.flagging_options) {
+        target.find(".dropcontent").append(`<div>${option}</div>`)
+      }
+      target.find(".flag .dropcontent div").click(function() {
+        if (io_master.last_output) {
+          target.find(".flag .dropcontent");
+          flash_flag();
+          io_master.flag($(this).text());
+        }
+      });
+      
+    } else {
+      target.find(".flag").click(function() {
+        if (io_master.last_output) {
+          flash_flag();
+          io_master.flag();
+        }
+      });
     }
-  })
+  }
   target.find(".interpret").click(function() {
     target.find(".interpretation_explained").removeClass("invisible");
     if (io_master.last_output) {