Merge branch 'master' of https://github.com/abidlabs/gradiome

merge

gradio/static/css/gradio.css

@@ -89,14 +89,6 @@
   font-weight: bold;
   font-size: 14px;
 }
-.interface_button.primary {
-  color: white;
-  background-color: #EEA45D;
-}
-.interface_button.secondary {
-  color: black;
-  background-color: #F6F6F6;
-}
 .overlay {
   position: absolute;
   height: 100vh;
@@ -108,5 +100,5 @@
   left: 0;
 }
 .flagged {
-  
+
 }

gradio/static/css/style.css

@@ -14,21 +14,54 @@ button, input[type="submit"], input[type="reset"], input[type="text"], input[typ
   -webkit-appearance: none;
   border-radius: 0;
 }
-nav, #panels {
+nav, #panels, #share_row {
   margin-left: 60px;
   margin-right: 60px;
 }
 nav {
   text-align: center;
-  padding: 16px 0 8px;
+  padding: 16px 0 4px;
 }
 nav img {
   margin-right: auto;
   height: 32px;
 }
+#share_row {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+#share_form {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+}
+#share_row button, #share_row input[type=text] {
+  padding: 6px 4px;
+  margin-left: 5px;
+}
+#share_row input[type=text] {
+  background-color: #F6F6F6;  
+}
+#share_email {
+  flex-grow: 1;
+  max-width: 400px;
+}
+#share_complete {
+  display: none;
+}
 #panels {
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
   justify-content: center;
 }
+button.primary {
+  color: white;
+  background-color: #EEA45D;
+}
+button.secondary {
+  color: black;
+  background-color: #F6F6F6;
+}

gradio/static/js/load_interfaces.js

@@ -23,11 +23,13 @@ function get_interface(target) {
       attr("interface_id")];
 }
 
+var config;
 $.getJSON("static/config.json", function(data) {
+  config = data;
   input_interface = Object.create(input_to_object_map[
-      data["input_interface_type"]]);
+      config["input_interface_type"]]);
   output_interface = Object.create(output_to_object_map[
-      data["output_interface_type"]]);
+      config["output_interface_type"]]);
   $("#input_interface").html(input_interface.html);
   input_interface.target = $("#input_interface");
   set_interface_id(input_interface, 1)
@@ -52,6 +54,7 @@ $.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) {

gradio/static/js/share.js

@@ -0,0 +1,25 @@
+function enable_sharing() {
+  $("#send_link").click(function(evt) {
+    let name = $("#share_name").val()
+    let email = $("#share_email").val()
+    if (name && email) {
+      $.post("https://gradio.app/send_email", {
+        "url": config["ngrok_socket_url"],
+        "name": name,
+        "email": email
+      }).done(function() {
+        $("#share_message").text("Shared successfully.");
+      }).fail(function() {
+        $("#share_message").text("Failed to share.");
+      }).always(function() {
+        $("#share_form").hide();
+        $("#share_complete").show();
+      });
+    }
+  })
+}
+
+$("#share_more").click(function (evt) {
+  $("#share_form").show();
+  $("#share_complete").hide();  
+})

gradio/templates/base_template.html

@@ -23,6 +23,18 @@
     <nav>
       <img src="../static/img/logo_inline.png" />
     </nav>
+    <div id="share_row">
+      <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>
+      </div>
+      <div id="share_complete">
+        <span id="share_message"></span>
+        <button class="secondary" id="share_more">Share more</button>
+      </div>
+    </div>
     <div id="panels">
       <div class="panel">
         <div class="panel_header">Input</div>
@@ -68,6 +80,7 @@
     <script src="../static/js/interfaces/output/image.js"></script>
     <script src="../static/js/interfaces/output/label.js"></script>
     <script src="../static/js/interfaces/output/textbox.js"></script>
+    <script src="../static/js/share.js"></script>
     <script src="../static/js/load_interfaces.js"></script>
   </body>
 </html>