flagging

gradio/static/css/gradio.css

@@ -36,22 +36,28 @@
 .panel_buttons {
   display: flex;
 }
-.panel_buttons > input, .panel_buttons > button {
-  background-color: #F6F6F6;
+.submit, .clear, .flag {
+  background-color: #F6F6F6 !important;
   flex-grow: 1;
-  padding: 8px;
+  padding: 8px !important;
   box-sizing: border-box;
   text-transform: uppercase;
   font-weight: bold;
-  border: 0 none;
+  border: 0 none !important;
 }
 .submit {
   background-color: #EEA45D !important;
   color: white !important;
+}
+.submit, .flag_message {
   flex-grow: 2 !important;
   margin-right: 8px;
 }
-.clear {
+.flag_message {
+  padding: 8px !important;
+  background-color: #F6F6F6 !important;
+}
+.clear, .flag {
   margin-left: 8px;
 }
 
@@ -101,3 +107,6 @@
   top: 0;
   left: 0;
 }
+.flagged {
+  
+}

gradio/static/js/all_io.js

@@ -13,18 +13,32 @@ ws.onclose = function(event) {
 
 var io_master = {
   input: function(interface_id, data) {
+    this.last_input = data;
+    this.last_output = null;
     var ws_data = {
       'action': 'input',
       'data': data
-    };
-    console.log(ws_data)
+    }
     ws.send(JSON.stringify(ws_data), function(e) {
       console.log(e)
     })
   },
   output: function(data) {
-    console.log(data)
+    this.last_output = data;
     this.output_interface.output(data);
+  },
+  flag: function(input, output, message) {
+    var ws_data = {
+      'action': 'flag',
+      'data': {
+        'input' : this.last_input,
+        'output' : this.last_output,
+        'message' : message
+      }
+    }
+    ws.send(JSON.stringify(ws_data), function(e) {
+      console.log(e)
+    })
   }
 }
 

gradio/static/js/load_interfaces.js

@@ -39,10 +39,14 @@ $.getJSON("static/config.json", function(data) {
   $(".submit").click(function() {
     input_interface.submit();
     output_interface.submit();
+    $(".flag").removeClass("flagged");
   })
   $(".clear").click(function() {
     input_interface.clear();
-     output_interface.clear();
+    output_interface.clear();
+    $(".flag").removeClass("flagged");
+    io_master.last_input = null;
+    io_master.last_output = null;
   })
   input_interface.io_master = io_master;
   io_master.input_interface = input_interface;
@@ -51,9 +55,8 @@ $.getJSON("static/config.json", function(data) {
 });
 
 $('body').on('click', '.flag', function(e) {
-  if ($(".flag").hasClass("flagged")) {
-    $(".flag").removeClass("flagged").attr("value", "flag");
-  } else {
-    $(".flag").addClass("flagged").attr("value", "flagged");
+  if (io_master.last_output) {
+    $(".flag").addClass("flagged");
+    io_master.flag($(".flag_message").text());
   }
 })

gradio/templates/base_template.html

@@ -42,6 +42,7 @@
         </div>
         <div id="output_interface" class="interface"></div>
         <div class="panel_buttons">
+          <input type="text" class="flag_message" placeholder="(Optional message for flagging)"/>
           <input type="button" class="flag" value="flag"/>
         </div>
       </div>
@@ -60,7 +61,7 @@
     <script src="../static/js/all_io.js"></script>
     <script src="../static/js/interfaces/input/csv.js"></script>
     <script src="../static/js/interfaces/input/image_upload.js"></script>
-    <script src="../static/js/vendor/sketchpad.js"></script>    
+    <script src="../static/js/vendor/sketchpad.js"></script>
     <script src="../static/js/interfaces/input/sketchpad.js"></script>
     <script src="../static/js/interfaces/input/textbox.js"></script>
     <script src="../static/js/interfaces/input/csv.js"></script>