fix share and flagging

gradio/static/css/style.css

@@ -42,13 +42,13 @@ nav img {
   margin-left: 5px;
 }
 #share_row input[type=text] {
-  background-color: #F6F6F6;  
+  background-color: #F6F6F6;
 }
 #share_email {
   flex-grow: 1;
   max-width: 400px;
 }
-#share_complete {
+#share_complete, #share_form {
   display: none;
 }
 #panels {

gradio/static/js/all_io.js

@@ -19,15 +19,13 @@ var io_master = {
       'action': 'input',
       'data': data
     }
-    ws.send(JSON.stringify(ws_data), function(e) {
-      console.log(e)
-    })
+    ws.send(JSON.stringify(ws_data))
   },
   output: function(data) {
     this.last_output = data;
     this.output_interface.output(data);
   },
-  flag: function(input, output, message) {
+  flag: function(message) {
     var ws_data = {
       'action': 'flag',
       'data': {
@@ -36,9 +34,7 @@ var io_master = {
         'message' : message
       }
     }
-    ws.send(JSON.stringify(ws_data), function(e) {
-      console.log(e)
-    })
+    ws.send(JSON.stringify(ws_data))
   }
 }
 

gradio/static/js/load_interfaces.js

@@ -54,12 +54,11 @@ $.getJSON("static/config.json", function(data) {
   io_master.input_interface = input_interface;
   output_interface.io_master = io_master;
   io_master.output_interface = output_interface;
-  enable_sharing();
 });
 
 $('body').on('click', '.flag', function(e) {
   if (io_master.last_output) {
     $(".flag").addClass("flagged");
-    io_master.flag($(".flag_message").text());
+    io_master.flag($(".flag_message").val());
   }
 })

gradio/static/js/share.js

@@ -1,33 +1,38 @@
-function enable_sharing() {
-  $("#send_link").click(function(evt) {
-    let name = $("#share_name").val()
-    let email = $("#share_email").val()
-    if (name && email) {
-      $.ajax({
-        "url" : "https://gradio.app/send_email",
-        "type": "POST",
-        "crossDomain": true,
-        "data": JSON.stringify({
-          "url": config["ngrok_socket_url"],
-          "name": name,
-          "email": email
-        }),
-        "success": function() {
-          $("#share_message").text("Shared successfully.");
-          $("#share_more").text("Share more");
-        },
-        "error": function() {
-          $("#share_message").text("Failed to share.");
-          $("#share_more").text("Try again");
-        },
-        "complete": function() {
-          $("#share_form").hide();
-          $("#share_complete").show();
-        }
-      })
-    }
-  })
-}
+$("#share").click(function() {
+  $("#share").hide()
+  $("#share_form").css('display', 'flex')
+})
+
+$("#send_link").click(function(evt) {
+  let name = $("#share_name").val()
+  let email = $("#share_email").val()
+  if (name && email) {
+    $("#send_link").attr('disabled', true);
+    $.ajax({
+      "url" : "https://gradio.app/api/send-email/",
+      "type": "POST",
+      "crossDomain": true,
+      "data": JSON.stringify({
+        "url": config["ngrok_socket_url"],
+        "name": name,
+        "email": email
+      }),
+      "success": function() {
+        $("#share_message").text("Shared successfully.");
+        $("#share_more").text("Share more");
+      },
+      "error": function() {
+        $("#share_message").text("Failed to share.");
+        $("#share_more").text("Try again");
+      },
+      "complete": function() {
+        $("#share_form").hide();
+        $("#share_complete").show();
+        $("#send_link").attr('disabled', false);
+      }
+    })
+  }
+})
 
 $("#share_more").click(function (evt) {
   $("#share_form").show();

gradio/templates/base_template.html

@@ -24,8 +24,8 @@
       <img src="../static/img/logo_inline.png" />
     </nav>
     <div id="share_row">
+      <button id="share" class="primary">Share this Interface</button>
       <div id="share_form">
-        Share this Interface:
         <input type="text" id="share_name" placeholder="sender name (you)"></input>
         <input type="text" id="share_email" placeholder="emails (comma-separated if multiple)"></input>
         <button class="primary" id="send_link">Send Link</button>