Merge branch 'master' of github.com:gradio-app/gradio

.gitignore

@@ -19,4 +19,5 @@ __pycache__/
 demo/models/*
 dist/*
 *.h5
-docs.json
+docs.json
+*.bak

build/lib/gradio/interface.py

@@ -389,6 +389,7 @@ def launch(self, inline=None, inbrowser=None, share=False, validate=True, debug=
             config["examples"] = processed_examples
 
         networking.set_config(config, output_directory)
+        networking.set_meta_tags(output_directory, self.title, self.description, self.thumbnail)
 
         if debug:
             while True:
@@ -411,7 +412,7 @@ def launch(self, inline=None, inbrowser=None, share=False, validate=True, debug=
 
     @classmethod
     def get_instances(cls):
-        return list(Interface.instances) #Returns list of all current instances
+        return list(Interface.instances)  # Returns list of all current instances.
 
 
 def reset_all():

build/lib/gradio/outputs.py

@@ -208,6 +208,95 @@ def get_shortcut_implementations(cls):
         }
 
 
+class HighlightedText(AbstractOutput):
+    '''
+    Component creates text that contains spans that are highlighted by category or numerical value.
+    Output is represent as a list of Tuple pairs, where the first element represents the span of text represented by the tuple, and the second element represents the category or value of the text.
+    Output type: List[Tuple[str, Union[float, str]]]
+    '''
+
+    def __init__(self, category_colors=None, label=None):
+        '''
+        Parameters:
+        category_colors (Dict[str, float]): 
+        label (str): component name in interface.
+        '''
+        super().__init__(label)
+
+    def get_template_context(self):
+        return {
+            **super().get_template_context()
+        }
+
+    @classmethod
+    def get_shortcut_implementations(cls):
+        return {
+            "highlight": {},
+        }
+
+    def postprocess(self, prediction):
+        if isinstance(prediction, str) or isinstance(prediction, int) or isinstance(prediction, float):
+            return str(prediction)
+        else:
+            raise ValueError("The `Textbox` output interface expects an output that is one of: a string, or"
+                             "an int/float that can be converted to a string.")
+
+
+class JSON(AbstractOutput):
+    '''
+    Used for JSON output. Expects a JSON string or a Python dictionary or list that can be converted to JSON. 
+    Output type: Union[str, Dict[str, Any], List[Any]]
+    '''
+
+    def __init__(self, label=None):
+        '''
+        Parameters:
+        label (str): component name in interface.
+        '''
+        super().__init__(label)
+
+    def postprocess(self, prediction):
+        if isinstance(prediction, dict) or isinstance(prediction, list):
+            return json.dumps(prediction)
+        elif isinstance(prediction, str):
+            return prediction
+        else:
+            raise ValueError("The `JSON` output interface expects an output that is a dictionary or list "
+                             "or a preformatted JSON string.")
+
+    @classmethod
+    def get_shortcut_implementations(cls):
+        return {
+            "json": {},
+        }
+
+
+class HTML(AbstractOutput):
+    '''
+    Used for HTML output. Expects a JSON string or a Python dictionary or list that can be converted to JSON. 
+    Output type: str
+    '''
+
+    def __init__(self, label=None):
+        '''
+        Parameters:
+        label (str): component name in interface.
+        '''
+        super().__init__(label)
+
+    def postprocess(self, prediction):
+        if isinstance(prediction, str):
+            return prediction
+        else:
+            raise ValueError("The `HTML` output interface expects an output that is a str.")
+
+    @classmethod
+    def get_shortcut_implementations(cls):
+        return {
+            "html": {},
+        }
+
+
 # Automatically adds all shortcut implementations in AbstractInput into a dictionary.
 shortcuts = {}
 for cls in AbstractOutput.__subclasses__():

build/lib/gradio/static/css/gradio.css

@@ -57,7 +57,6 @@ input.submit {
 }
 input.panel_button {
   background-color: whitesmoke;
-  flex-grow: 1;
   padding: 12px;
   box-sizing: border-box;
   font-weight: bold;
@@ -99,4 +98,15 @@ input.submit:hover {
 }
 .screenshot {
   visibility: hidden;
+}
+.screenshot_logo {
+  display: none;
+  flex-grow: 1;
+  text-align: center;
+  padding: 4px;
+  box-sizing: border-box;
+  margin-left: 16px;
+}
+.screenshot_logo img {
+  height: 38px;
 }

build/lib/gradio/static/css/interfaces/output/image.css

@@ -1,6 +1,12 @@
-.output_image {
+.output_image_holder {
   width: 100%;
   height: 100%;
-  object-fit: contain;
-  display: none
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.output_image {
+  max-width: 100%;
+  max-height: 100%;
+  display: none;
 }

build/lib/gradio/static/css/style.css

@@ -65,6 +65,7 @@ button.secondary {
   background-color: whitesmoke;
   border-right: solid 4px whitesmoke;
   border-left: solid 4px whitesmoke;
+  border-bottom: solid 4px whitesmoke;
 }
 #examples th {
   padding: 8px 16px;

build/lib/gradio/static/css/vendor/jsonTree.css

@@ -0,0 +1,107 @@
+/*
+ * JSON Tree Viewer
+ * http://github.com/summerstyle/jsonTreeViewer
+ *
+ * Copyright 2017 Vera Lobacheva (http://iamvera.com)
+ * Released under the MIT license (LICENSE.txt)
+ */
+
+/* Background for the tree. May use for <body> element */
+.jsontree_bg {
+    background: #FFF;
+}
+
+/* Styles for the container of the tree (e.g. fonts, margins etc.) */
+.jsontree_tree {
+    margin-left: 30px;
+    font-family: 'PT Mono', monospace;
+    font-size: 14px;
+}
+
+/* Styles for a list of child nodes */
+.jsontree_child-nodes {
+    display: none;
+    margin-left: 35px; 
+    margin-bottom: 5px;
+    line-height: 2;
+}
+.jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_child-nodes {
+    display: block;
+}
+
+/* Styles for labels */
+.jsontree_label-wrapper {
+    float: left;
+    margin-right: 8px;
+}
+.jsontree_label {
+    font-weight: normal;
+    vertical-align: top;
+    color: #000;
+    position: relative;
+    padding: 1px;
+    border-radius: 4px;
+    cursor: default;
+}
+.jsontree_node_marked > .jsontree_label-wrapper > .jsontree_label {
+    background: #fff2aa;
+}
+
+/* Styles for values */
+.jsontree_value-wrapper {
+    display: block;
+    overflow: hidden;
+}
+.jsontree_node_complex > .jsontree_value-wrapper {
+    overflow: inherit;
+}
+.jsontree_value { 
+    vertical-align: top;
+    display: inline;
+}
+.jsontree_value_null {
+    color: #777;
+    font-weight: bold;
+}
+.jsontree_value_string {
+    color: #025900;
+    font-weight: bold;
+}
+.jsontree_value_number {
+    color: #000E59;
+    font-weight: bold;
+}
+.jsontree_value_boolean {
+    color: #600100;
+    font-weight: bold;
+}
+
+/* Styles for active elements */
+.jsontree_expand-button {
+    position: absolute;
+    top: 3px;
+    left: -15px;
+    display: block;
+    width: 11px;
+    height: 11px;
+    background-image: url('icons.svg');
+}
+.jsontree_node_expanded > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button {
+    background-position: 0 -11px;
+}
+.jsontree_show-more {
+    cursor: pointer;
+}
+.jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_show-more {
+    display: none;
+}
+.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button,
+.jsontree_node_empty > .jsontree_value-wrapper > .jsontree_value > .jsontree_show-more {
+    display: none !important;
+}
+.jsontree_node_complex > .jsontree_label-wrapper > .jsontree_label {
+    cursor: pointer;
+}
+.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label {
+    cursor: default !important;
+}

build/lib/gradio/static/js/gradio.js

@@ -19,6 +19,9 @@ function gradio(config, fn, target) {
         </div>
         <div class="panel_buttons">
           <input class="screenshot panel_button" type="button" value="SCREENSHOT"/>
+          <div class="screenshot_logo">
+            <img src="static/img/logo_inline.png">
+          </div>
         </div>
       </div>
     </div>`);
@@ -125,9 +128,16 @@ function gradio(config, fn, target) {
       target.find(".screenshot").css("visibility", "visible");
     }
     target.find(".screenshot").click(function() {
-      html2canvas(target[0]).then(function(canvas) {
+      $(".screenshot").hide();
+      $(".screenshot_logo").show();
+      html2canvas(target[0], {
+        scrollX: 0,
+        scrollY: -window.scrollY
+      }).then(function(canvas) {
         saveAs(canvas.toDataURL(), 'screenshot.png');
-    });
+        $(".screenshot").show();
+        $(".screenshot_logo").hide();
+      });
     });
     if (config.live) {
       io_master.gather();

build/lib/gradio/static/js/interfaces/input/dropdown.js

@@ -23,5 +23,6 @@ const dropdown = {
   load_example: function(data) {
     let child = this.choices.indexOf(data) + 1;
     this.target.find("option:nth-child(" + child + ")").prop("selected", true);
+    this.target.find(".dropdown").selectmenu("refresh");
   }
 }

build/lib/gradio/static/js/interfaces/input/slider.js

@@ -38,7 +38,7 @@ const slider = {
     this.target.find("input").val(this.default);
   },
   load_example: function(data) {
-    this.target.find("input").val(data);   
-    this.target.find(".value").text(data);
+    this.target.find(".slider").slider("option", "value", data)
+    this.target.find(".ui-slider-handle").text(data);
   }
 }

build/lib/gradio/static/js/interfaces/input/webcam.js

@@ -23,13 +23,15 @@ const webcam = {
     Webcam.snap(function(image_data) {
       io.io_master.input(io.id, image_data);
     });
-    // Webcam.freeze();
+    Webcam.freeze();
+    this.target.find("video").hide();    
     this.state = "SNAPPED";
   },
   clear: function() {
     if (this.state == "SNAPPED") {
       this.state = "CAMERA_ON";
-      // Webcam.unfreeze();
+      Webcam.unfreeze();
+      this.target.find("video").show();    
     }
   },
   state: "NOT_STARTED",

build/lib/gradio/static/js/interfaces/output/image.js

@@ -1,6 +1,8 @@
 const image_output = {
   html: `
-      <img class="output_image" />
+      <div class="output_image_holder">
+        <img class="output_image" />
+      </div>
     `,
   init: function(opts) {},
   output: function(data) {