flag and send message buttons

gradio/inputs.py

@@ -99,7 +99,7 @@ class Textbox(AbstractInput):
 
 
 class ImageUpload(AbstractInput):
-    def __init__(self, preprocessing_fn=None, image_width=224, image_height=224, num_channels=3, image_mode='RGB'):
+    def __init__(self, preprocessing_fn=None, image_width=229, image_height=229, num_channels=3, image_mode='RGB'):
         self.image_width = image_width
         self.image_height = image_height
         self.num_channels = num_channels

gradio/static/css/gradio.css

@@ -32,13 +32,14 @@
 .input.text .role, .output.text .role {
   margin-left: 1px;
 }
-.submit, .clear {
+.submit, .clear, .flag, .message, .send-message {
   background-color: #F6F6F6 !important;
   padding: 8px !important;
   box-sizing: border-box;
   width: calc(50% - 8px);
   text-transform: uppercase;
   font-weight: bold;
+  border: 0 none;
 }
 .submit {
   margin-right: 8px;
@@ -46,10 +47,15 @@
 .clear {
   margin-left: 8px;
 }
+
+/*.flag:focus {
+  background-color: pink !important; 
+}
+*/
 .input_text, .output_text {
   background: transparent;
-  resize: none;
-  border: 0 none;
+  resize: none
+    border: 0 none;
   width: 100%;
   font-size: 18px;
   outline: none;

gradio/static/css/style.css

@@ -3,7 +3,7 @@ body {
   font-size: 12px;
   margin: 0;
 }
-button, input[type="submit"], input[type="reset"] {
+button, input[type="submit"], input[type="reset"], input[type="text"], select[type="submit"] {
 	background: none;
 	color: inherit;
 	border: none;
@@ -12,6 +12,12 @@ button, input[type="submit"], input[type="reset"] {
 	cursor: pointer;
 	outline: inherit;
 }
+
+input[type="text"] {
+  cursor: text;
+  text-transform: none;
+}
+
 body > div, body > nav {
   margin-left: 60px;
   margin-right: 60px;

gradio/static/js/class-output.js

@@ -48,3 +48,22 @@ $('body').on('click', '.clear', function(e) {
   $(".output_class").text("")
   $(".confidence_intervals").empty()
 })
+
+  
+  
+function changeToFlagged() {
+  var f = document.getElementsByClassName("flag");
+  f[0].style.cssText = 'background-color:pink !important'  ;
+  f[0].value="flagged";
+}
+
+function sendMessage() {
+  var m = document.getElementsByClassName("message");
+  m[0].style.cssText = 'background:lightgrey !important' ;
+  // m[0].style.cssText = 'display:none' ;
+  var s = document.getElementsByClassName("send-message");
+  s[0].style.cssText = 'background-color:lightgreen !important'  ;
+  s[0].value="Sent!"
+
+  // c[0].value="flagged";
+}

gradio/templates/label_output.html

@@ -4,4 +4,7 @@
   <div class="confidence_intervals">
   </div>
 </div>
+<input class="flag" type="submit" value="Flag" onclick="changeToFlagged()" />
+<input class="message" type="text" placeholder="Send Message: (optional)" />
+<div><input class="send-message" type="submit" value="Send" onclick="sendMessage()"/></div>
 <script src="../static/js/class-output.js"></script>