From 665520cc6219ca235f15711934a63ad9b84e26c2 Mon Sep 17 00:00:00 2001
From: Ali Abid <aliabid94@gmail.com>
Date: Wed, 19 Aug 2020 14:27:22 -0700
Subject: [PATCH] demo updates

---
 build/lib/gradio/inputs.py                    |   8 +-
 .../static/js/interfaces/output/key_values.js |   2 +-
 build/lib/gradio/templates/index.html         | 152 +++++++++---------
 demo/all.py                                   |  31 ----
 demo/diff_texts.py                            |  21 +++
 demo/digit_classifier.py                      |   2 +-
 demo/{records.py => filter_records.py}        |   3 +-
 demo/flip_image.py                            |  26 ---
 demo/generate_tone.py                         |  22 +++
 demo/image_mod.py                             |  21 +++
 demo/{matrix.py => matrix_transpose.py}       |   0
 demo/multi1.py                                |  32 ----
 demo/{basic_text.py => sentence_builder.py}   |   4 +-
 demo/{form_graph.py => stock_forecast.py}     |  10 +-
 demo/text_analysis.py                         |  30 ++++
 .../static/js/interfaces/output/key_values.js |   2 +-
 gradio/templates/index.html                   | 152 +++++++++---------
 17 files changed, 264 insertions(+), 254 deletions(-)
 delete mode 100644 demo/all.py
 create mode 100644 demo/diff_texts.py
 rename demo/{records.py => filter_records.py} (81%)
 delete mode 100644 demo/flip_image.py
 create mode 100644 demo/generate_tone.py
 create mode 100644 demo/image_mod.py
 rename demo/{matrix.py => matrix_transpose.py} (100%)
 delete mode 100644 demo/multi1.py
 rename demo/{basic_text.py => sentence_builder.py} (88%)
 rename demo/{form_graph.py => stock_forecast.py} (74%)
 create mode 100644 demo/text_analysis.py

diff --git a/build/lib/gradio/inputs.py b/build/lib/gradio/inputs.py
index 401c8cda3e..37dd72e4ce 100644
--- a/build/lib/gradio/inputs.py
+++ b/build/lib/gradio/inputs.py
@@ -241,11 +241,12 @@ class Image(InputComponent):
     Input type: Union[numpy.array, PIL.Image, str]
     """
 
-    def __init__(self, shape=None, image_mode='RGB', source="upload", type="numpy", label=None):
+    def __init__(self, shape=None, image_mode='RGB', invert_colors=False, source="upload", type="numpy", label=None):
         '''
         Parameters:
         shape (Tuple[int, int]): shape to crop and resize image to; if None, matches input image size.
         image_mode (str): "RGB" if color, or "L" if black and white.
+        invert_colors (bool): whether to invert the image as a preprocessing step.
         source (str): Source of image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "canvas" defaults to a white image that can be edited and drawn upon with tools.
         type (str): Type of value to be returned by component. "numpy" returns a numpy array with shape (width, height, 3), "pil" returns a PIL image object, "file" returns a temporary file object whose path can be retrieved by file_obj.name.
         label (str): component name in interface.
@@ -254,6 +255,7 @@ class Image(InputComponent):
         self.image_mode = image_mode
         self.source = source
         self.type = type
+        self.invert_colors = invert_colors
         super().__init__(label)
 
     @classmethod
@@ -261,7 +263,7 @@ class Image(InputComponent):
         return {
             "image": {},
             "webcam": {"source": "webcam"},
-            "sketchpad": {"image_mode": "L", "source": "canvas"},
+            "sketchpad": {"image_mode": "L", "source": "canvas", "shape": (28, 28), "invert_colors": True},
         }
 
     def get_template_context(self):
@@ -279,6 +281,8 @@ class Image(InputComponent):
         if self.shape is not None:
             im = processing_utils.resize_and_crop(
                 im, (self.shape[0], self.shape[1]))
+        if self.invert_colors:
+            im = PIL.ImageOps.invert(im)
         if self.type == "pil":
             return im
         elif self.type == "numpy":
diff --git a/build/lib/gradio/static/js/interfaces/output/key_values.js b/build/lib/gradio/static/js/interfaces/output/key_values.js
index 844b27f440..4a9a0ac909 100644
--- a/build/lib/gradio/static/js/interfaces/output/key_values.js
+++ b/build/lib/gradio/static/js/interfaces/output/key_values.js
@@ -11,7 +11,7 @@ const key_values = {
   init: function(opts) {},
   output: function(data) {
     let html = ""
-    for (const [key, value] of Object.entries(data)) {
+    for (const [key, value] of data) {
       html += `<tr>
         <td>${key}</td>
         <td>${value}</td>
diff --git a/build/lib/gradio/templates/index.html b/build/lib/gradio/templates/index.html
index 7aaff9e876..3053940a3d 100644
--- a/build/lib/gradio/templates/index.html
+++ b/build/lib/gradio/templates/index.html
@@ -29,37 +29,37 @@
     <meta name="twitter:image" content="{{thumbnail}}">
 
     <title>Gradio</title>
-    <!-- VENDOR -->
-    <link type="text/css" href="../static/css/vendor/tui-color-picker.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/tui-image-editor.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/jquery-ui.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/jexcel.min.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/jsuites.min.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/jsonTree.css" rel="stylesheet">    
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <!-- VENDOR -->
+    <link type="text/css" href="/static/css/vendor/tui-color-picker.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/tui-image-editor.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/jquery-ui.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/jexcel.min.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/jsuites.min.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/jsonTree.css" rel="stylesheet">    
 
-    <link rel="stylesheet" href="../static/css/style.css">
-    <link rel="stylesheet" href="../static/css/gradio.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/csv.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/image.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/sketchpad.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/textbox.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/radio.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/dropdown.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/checkbox_group.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/slider.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/webcam.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/microphone.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/file.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/image.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/label.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/key_values.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/textbox.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/highlighted_text.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/audio.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/json.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/html.css">
-    <link rel="stylesheet" href="../static/css/loading.css"/>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="/static/css/gradio.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/csv.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/image.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/sketchpad.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/textbox.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/radio.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/dropdown.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/checkbox_group.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/slider.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/webcam.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/microphone.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/file.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/image.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/label.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/key_values.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/textbox.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/highlighted_text.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/audio.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/json.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/html.css">
+    <link rel="stylesheet" href="/static/css/loading.css"/>
   </head>
 
   <body id="lib">
@@ -68,54 +68,54 @@
       <img src="static/img/logo_inline.png">
     </a></div>
     <!-- VENDOR -->
-    <script src="../static/js/vendor/jquery.min.js"></script>
-    <script src="../static/js/vendor/html2canvas.min.js"></script>
-    <script src="../static/js/vendor/jquery-ui.min.js"></script>
-    <script src="../static/js/vendor/jquery.ui.touch-punch.js"></script>
-    <script src="../static/js/vendor/jsonTree.js"></script>
-    <script src="../static/js/vendor/fabric.js"></script>
-    <script src="../static/js/vendor/tui-code-snippet.min.js"></script>
-    <script src="../static/js/vendor/FileSaver.min.js"></script>
-    <script src="../static/js/vendor/tui-color-picker.js"></script>
-    <script src="../static/js/vendor/tui-image-editor.js"></script>
-    <script src="../static/js/vendor/white-theme.js"></script>
-    <script src="../static/js/vendor/black-theme.js"></script>
-    <script src="../static/js/vendor/wavesurfer.min.js"></script>
-    <script src="../static/js/vendor/p5.min.js"></script>
-    <script src="../static/js/vendor/p5.sound.min.js"></script>
-    <script src="../static/js/vendor/p5.dom.min.js"></script>
-    <script src="../static/js/vendor/jexcel.min.js"></script>
-    <script src="../static/js/vendor/jsuites.min.js"></script>
+    <script src="/static/js/vendor/jquery.min.js"></script>
+    <script src="/static/js/vendor/html2canvas.min.js"></script>
+    <script src="/static/js/vendor/jquery-ui.min.js"></script>
+    <script src="/static/js/vendor/jquery.ui.touch-punch.js"></script>
+    <script src="/static/js/vendor/jsonTree.js"></script>
+    <script src="/static/js/vendor/fabric.js"></script>
+    <script src="/static/js/vendor/tui-code-snippet.min.js"></script>
+    <script src="/static/js/vendor/FileSaver.min.js"></script>
+    <script src="/static/js/vendor/tui-color-picker.js"></script>
+    <script src="/static/js/vendor/tui-image-editor.js"></script>
+    <script src="/static/js/vendor/white-theme.js"></script>
+    <script src="/static/js/vendor/black-theme.js"></script>
+    <script src="/static/js/vendor/wavesurfer.min.js"></script>
+    <script src="/static/js/vendor/p5.min.js"></script>
+    <script src="/static/js/vendor/p5.sound.min.js"></script>
+    <script src="/static/js/vendor/p5.dom.min.js"></script>
+    <script src="/static/js/vendor/jexcel.min.js"></script>
+    <script src="/static/js/vendor/jsuites.min.js"></script>
 
-    <script src="../static/js/utils.js"></script>
-    <script src="../static/js/all_io.js"></script>
-    <script src="../static/js/interfaces/input/csv.js"></script>
-    <script src="../static/js/interfaces/input/image.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/radio.js"></script>
-    <script src="../static/js/interfaces/input/checkbox_group.js"></script>
-    <script src="../static/js/interfaces/input/checkbox.js"></script>
-    <script src="../static/js/interfaces/input/dropdown.js"></script>
-    <script src="../static/js/interfaces/input/slider.js"></script>
-    <script src="../static/js/interfaces/input/dataframe.js"></script>
-    <script src="../static/js/interfaces/input/audio.js"></script>
-    <script src="../static/js/interfaces/input/file.js"></script>
-    <script src="../static/js/vendor/webcam.min.js"></script>
-    <script src="../static/js/interfaces/input/webcam.js"></script>
-    <script src="../static/js/interfaces/input/microphone.js"></script>
-    <script src="../static/js/interfaces/output/image.js"></script>
-    <script src="../static/js/interfaces/output/label.js"></script>
-    <script src="../static/js/interfaces/output/key_values.js"></script>
-    <script src="../static/js/interfaces/output/textbox.js"></script>
-    <script src="../static/js/interfaces/output/highlighted_text.js"></script>
-    <script src="../static/js/interfaces/output/audio.js"></script>
-    <script src="../static/js/interfaces/output/json.js"></script>
-    <script src="../static/js/interfaces/output/html.js"></script>
-    <script src="../static/js/interfaces/output/dataframe.js"></script>
-    <script src="../static/js/interfaces/output/file.js"></script>
-    <script src="../static/js/gradio.js"></script>
+    <script src="/static/js/utils.js"></script>
+    <script src="/static/js/all_io.js"></script>
+    <script src="/static/js/interfaces/input/csv.js"></script>
+    <script src="/static/js/interfaces/input/image.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/radio.js"></script>
+    <script src="/static/js/interfaces/input/checkbox_group.js"></script>
+    <script src="/static/js/interfaces/input/checkbox.js"></script>
+    <script src="/static/js/interfaces/input/dropdown.js"></script>
+    <script src="/static/js/interfaces/input/slider.js"></script>
+    <script src="/static/js/interfaces/input/dataframe.js"></script>
+    <script src="/static/js/interfaces/input/audio.js"></script>
+    <script src="/static/js/interfaces/input/file.js"></script>
+    <script src="/static/js/vendor/webcam.min.js"></script>
+    <script src="/static/js/interfaces/input/webcam.js"></script>
+    <script src="/static/js/interfaces/input/microphone.js"></script>
+    <script src="/static/js/interfaces/output/image.js"></script>
+    <script src="/static/js/interfaces/output/label.js"></script>
+    <script src="/static/js/interfaces/output/key_values.js"></script>
+    <script src="/static/js/interfaces/output/textbox.js"></script>
+    <script src="/static/js/interfaces/output/highlighted_text.js"></script>
+    <script src="/static/js/interfaces/output/audio.js"></script>
+    <script src="/static/js/interfaces/output/json.js"></script>
+    <script src="/static/js/interfaces/output/html.js"></script>
+    <script src="/static/js/interfaces/output/dataframe.js"></script>
+    <script src="/static/js/interfaces/output/file.js"></script>
+    <script src="/static/js/gradio.js"></script>
     <script>
       $.getJSON("static/config.json", function(config) {
         io = gradio_url(config, "/api/predict/", "#interface_target");
diff --git a/demo/all.py b/demo/all.py
deleted file mode 100644
index 5dc8687bfa..0000000000
--- a/demo/all.py
+++ /dev/null
@@ -1,31 +0,0 @@
-import gradio as gr
-import numpy as np
-
-def answer_question(quantity, animal, place, activity_list, morning, etc, im1, im2):
-    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}""", np.flipud(im2)
-
-
-gr.Interface(answer_question, 
-            [
-                gr.inputs.Slider(2, 20),
-                gr.inputs.Dropdown(["cat", "dog", "bird"]),
-                gr.inputs.Radio(["park", "zoo", "road"]),
-                gr.inputs.CheckboxGroup(["ran", "swam", "ate", "slept"]),
-                gr.inputs.Checkbox(label="Is it the morning?"),
-                gr.inputs.Textbox(default="What else?"),
-                gr.inputs.Sketchpad(shape=(100,100)),
-                gr.inputs.Image(shape=(100,100)),
-            ], 
-            [
-                gr.outputs.Textbox(),
-                gr.outputs.Image()                
-            ],
-            examples=[
-                [2, "cat", "park", ["ran", "swam"], True, "t1"],
-                [4, "dog", "zoo", ["ate", "swam"], False, "t2"],
-                [10, "bird", "road", ["ran"], False, "t3"],
-                [8, "cat", "zoo", ["ate"], True, "t1"],
-            ],
-            title="Test for all Interfaces",
-            description="Here's an example that uses almost all the interface types, so give it a try! Let's hope it works :D"
-            ).launch()
diff --git a/demo/diff_texts.py b/demo/diff_texts.py
new file mode 100644
index 0000000000..3ecae0ab6d
--- /dev/null
+++ b/demo/diff_texts.py
@@ -0,0 +1,21 @@
+import gradio as gr
+from difflib import Differ
+
+def diff_texts(text1, text2):
+    d = Differ()
+    return [
+        (token[2:], token[0]) for token in d.compare(text1, text2)
+    ]
+    
+gr.Interface(
+    diff_texts,
+    [
+        gr.inputs.Textbox(lines=3, default="The quick brown fox jumped over the lazy dogs."),
+        gr.inputs.Textbox(lines=3, default="The fast brown fox jumps over lazy dogs."),
+    ],
+    gr.outputs.HighlightedText(color_map={
+        "+": "lightgreen",
+        "-": "pink",
+        " ": "none",
+    })
+).launch()
\ No newline at end of file
diff --git a/demo/digit_classifier.py b/demo/digit_classifier.py
index ce6f6bdd1c..6dfe3a5b27 100644
--- a/demo/digit_classifier.py
+++ b/demo/digit_classifier.py
@@ -9,7 +9,7 @@ urlretrieve("https://gr-models.s3-us-west-2.amazonaws.com/mnist-model.h5", "mnis
 model = tf.keras.models.load_model("mnist-model.h5")
 
 def recognize_digit(image):
-    image = image.reshape(-1, 1)
+    image = image.reshape(1, -1)
     prediction = model.predict(image).tolist()[0]
     return {str(i): prediction[i] for i in range(10)}
 
diff --git a/demo/records.py b/demo/filter_records.py
similarity index 81%
rename from demo/records.py
rename to demo/filter_records.py
index 019db0bbf7..be71927427 100644
--- a/demo/records.py
+++ b/demo/filter_records.py
@@ -10,5 +10,6 @@ gr.Interface(filter_records,
     gr.inputs.Dataframe(headers=["name", "age", "gender"], datatype=["str", "number", "str"], row_count=5), 
     gr.inputs.Dropdown(["M", "F", "O"])
   ],
-  "dataframe"
+  "dataframe",
+  description="Enter gender as 'M', 'F', or 'O' for other."
 ).launch()
diff --git a/demo/flip_image.py b/demo/flip_image.py
deleted file mode 100644
index 56714c514f..0000000000
--- a/demo/flip_image.py
+++ /dev/null
@@ -1,26 +0,0 @@
-import gradio as gr
-import numpy as np
-from time import time
-
-
-def flip(image):
-    start = time()
-    return image
-
-
-def flip2(image):
-    start = time()
-    return np.fliplr(image)
-
-def flip10(i1, i2, i3, i4, i5):
-    return i1 + i2
-
-gr.Interface(flip2, 
-             ["webcam"], 
-             ["image"],
-             examples=[
-                 ["images/cheetah1.jpg"],
-                 ["images/cheetah2.jpg"],
-                 ["images/lion.jpg"],
-             ]
-             ).launch(share=True)
diff --git a/demo/generate_tone.py b/demo/generate_tone.py
new file mode 100644
index 0000000000..dbd26f1be8
--- /dev/null
+++ b/demo/generate_tone.py
@@ -0,0 +1,22 @@
+import gradio as gr
+import numpy as np
+import random
+
+notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+def generate_tone(note, octave, duration):
+    sr = 48000
+    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
+    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
+    audio = np.linspace(0, duration, duration * sr)
+    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
+    return (sr, audio)
+
+
+gr.Interface(
+    generate_tone, 
+    [
+        gr.inputs.Dropdown(notes, type="index"),
+        gr.inputs.Slider(4, 6, step=1),
+        gr.inputs.Textbox(type="number", default=1, label="Duration in seconds")
+    ], "audio").launch()
diff --git a/demo/image_mod.py b/demo/image_mod.py
new file mode 100644
index 0000000000..91d3fc2b98
--- /dev/null
+++ b/demo/image_mod.py
@@ -0,0 +1,21 @@
+import gradio as gr
+from time import time
+from PIL import Image, ImageFilter
+
+
+def image_mod(image):
+    return image.rotate(45), image.filter(ImageFilter.FIND_EDGES)
+
+
+gr.Interface(image_mod, 
+             gr.inputs.Image(type="pil"), 
+             [
+                gr.outputs.Image(type="pil"), 
+                gr.outputs.Image(type="pil"), 
+             ],
+             examples=[
+                 ["images/cheetah1.jpg"],
+                 ["images/cheetah2.jpg"],
+                 ["images/lion.jpg"],
+             ]
+             ).launch(share=True)
diff --git a/demo/matrix.py b/demo/matrix_transpose.py
similarity index 100%
rename from demo/matrix.py
rename to demo/matrix_transpose.py
diff --git a/demo/multi1.py b/demo/multi1.py
deleted file mode 100644
index a5da5cf069..0000000000
--- a/demo/multi1.py
+++ /dev/null
@@ -1,32 +0,0 @@
-import gradio as gr
-import numpy as np
-import random
-
-def answer_question(text, audio):
-    return [
-        ("The movie was ", "good"),
-        ("unexpectedly, ", "great"),
-        ("a fantastic experience ", "neutral"),
-    ], {
-        "address": "1 Main St.",
-        "bedrooms": 5,
-        "is_apt": False,
-        "residents": [
-            {"name": "Farhan", "age": 13},
-            {"name": "Aziz", "age": 18},
-            {"name": "Fozan", "age": None},
-        ]
-    }, "<div style='background-color: pink; padding: 2px;'>" + str(audio[1].shape) + "</div>", audio
-
-gr.Interface(answer_question, 
-            [
-                gr.inputs.Dropdown(["cat", "dog", "bird"]),
-                "microphone",
-            ], 
-            [
-                gr.outputs.HighlightedText(color_map={"good": "lightgreen", "bad": "pink"}),
-                gr.outputs.JSON(),
-                gr.outputs.HTML(),
-                gr.outputs.Audio(),
-            ],
-            ).launch()
diff --git a/demo/basic_text.py b/demo/sentence_builder.py
similarity index 88%
rename from demo/basic_text.py
rename to demo/sentence_builder.py
index ec952e1f76..3b25f8efae 100644
--- a/demo/basic_text.py
+++ b/demo/sentence_builder.py
@@ -1,11 +1,11 @@
 import gradio as gr
 import numpy as np
 
-def answer_question(quantity, animal, place, activity_list, morning):
+def sentence_builder(quantity, animal, place, activity_list, morning):
     return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
 
 
-gr.Interface(answer_question, 
+gr.Interface(sentence_builder, 
             [
                 gr.inputs.Slider(2, 20),
                 gr.inputs.Dropdown(["cat", "dog", "bird"]),
diff --git a/demo/form_graph.py b/demo/stock_forecast.py
similarity index 74%
rename from demo/form_graph.py
rename to demo/stock_forecast.py
index e3568620c1..f100b22b78 100644
--- a/demo/form_graph.py
+++ b/demo/stock_forecast.py
@@ -4,7 +4,7 @@ import matplotlib.pyplot as plt
 import numpy as np
 
 
-def plot_forecast(final_year, companies, noise, show_legend, point_style):
+def stock_forecast(final_year, companies, noise, show_legend, point_style):
     start_year = 2020
     x = np.arange(start_year, final_year + 1)
     year_count = x.shape[0]
@@ -19,14 +19,14 @@ def plot_forecast(final_year, companies, noise, show_legend, point_style):
     return plt
 
 
-gr.Interface(plot_forecast,
+gr.Interface(stock_forecast,
              [
                  gr.inputs.Radio([2025, 2030, 2035, 2040],
                                  label="Project to:"),
                  gr.inputs.CheckboxGroup(
-                     ["Google", "Microsoft", "Gradio"], label="Company Selection"),
-                 gr.inputs.Slider(1, 100, label="Noise Level"),
-                 gr.inputs.Checkbox(label="Show Legend"),
+                     ["Google", "Microsoft", "Gradio"]),
+                 gr.inputs.Slider(1, 100),
+                 "checkbox",
                  gr.inputs.Dropdown(["cross", "line", "circle"], label="Style"),
              ],
              gr.outputs.Image(plot=True, label="forecast") 
diff --git a/demo/text_analysis.py b/demo/text_analysis.py
new file mode 100644
index 0000000000..879a609fc3
--- /dev/null
+++ b/demo/text_analysis.py
@@ -0,0 +1,30 @@
+import spacy
+from spacy import displacy
+import gradio as gr
+
+nlp = spacy.load("en_core_web_sm")
+
+def text_analysis(text):
+    doc = nlp(text)
+    html = displacy.render(doc, style="dep", page=True)
+    html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + html + "</div>"
+    pos_count = {
+        "char_count": len(text),
+        "token_count": 0,
+    }
+    pos_tokens = []
+
+    for token in doc:
+        pos_count["token_count"] += 1
+        pos_count[token.pos_] = pos_count.get(token.pos_, 0) + 1
+        pos_tokens.extend([(token.text, token.pos_), (" ", None)])
+    
+    return pos_tokens, pos_count, html
+
+gr.Interface(
+    text_analysis,
+    gr.inputs.Textbox(placeholder="Enter sentence here..."),
+    [
+        "highlight", "key_values", "html"
+    ]
+).launch()
\ No newline at end of file
diff --git a/gradio/static/js/interfaces/output/key_values.js b/gradio/static/js/interfaces/output/key_values.js
index 844b27f440..4a9a0ac909 100644
--- a/gradio/static/js/interfaces/output/key_values.js
+++ b/gradio/static/js/interfaces/output/key_values.js
@@ -11,7 +11,7 @@ const key_values = {
   init: function(opts) {},
   output: function(data) {
     let html = ""
-    for (const [key, value] of Object.entries(data)) {
+    for (const [key, value] of data) {
       html += `<tr>
         <td>${key}</td>
         <td>${value}</td>
diff --git a/gradio/templates/index.html b/gradio/templates/index.html
index 7aaff9e876..3053940a3d 100644
--- a/gradio/templates/index.html
+++ b/gradio/templates/index.html
@@ -29,37 +29,37 @@
     <meta name="twitter:image" content="{{thumbnail}}">
 
     <title>Gradio</title>
-    <!-- VENDOR -->
-    <link type="text/css" href="../static/css/vendor/tui-color-picker.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/tui-image-editor.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/jquery-ui.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/jexcel.min.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/jsuites.min.css" rel="stylesheet">
-    <link type="text/css" href="../static/css/vendor/jsonTree.css" rel="stylesheet">    
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <!-- VENDOR -->
+    <link type="text/css" href="/static/css/vendor/tui-color-picker.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/tui-image-editor.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/jquery-ui.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/jexcel.min.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/jsuites.min.css" rel="stylesheet">
+    <link type="text/css" href="/static/css/vendor/jsonTree.css" rel="stylesheet">    
 
-    <link rel="stylesheet" href="../static/css/style.css">
-    <link rel="stylesheet" href="../static/css/gradio.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/csv.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/image.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/sketchpad.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/textbox.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/radio.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/dropdown.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/checkbox_group.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/slider.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/webcam.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/microphone.css">
-    <link rel="stylesheet" href="../static/css/interfaces/input/file.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/image.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/label.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/key_values.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/textbox.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/highlighted_text.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/audio.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/json.css">
-    <link rel="stylesheet" href="../static/css/interfaces/output/html.css">
-    <link rel="stylesheet" href="../static/css/loading.css"/>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="/static/css/gradio.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/csv.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/image.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/sketchpad.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/textbox.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/radio.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/dropdown.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/checkbox_group.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/slider.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/webcam.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/microphone.css">
+    <link rel="stylesheet" href="/static/css/interfaces/input/file.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/image.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/label.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/key_values.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/textbox.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/highlighted_text.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/audio.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/json.css">
+    <link rel="stylesheet" href="/static/css/interfaces/output/html.css">
+    <link rel="stylesheet" href="/static/css/loading.css"/>
   </head>
 
   <body id="lib">
@@ -68,54 +68,54 @@
       <img src="static/img/logo_inline.png">
     </a></div>
     <!-- VENDOR -->
-    <script src="../static/js/vendor/jquery.min.js"></script>
-    <script src="../static/js/vendor/html2canvas.min.js"></script>
-    <script src="../static/js/vendor/jquery-ui.min.js"></script>
-    <script src="../static/js/vendor/jquery.ui.touch-punch.js"></script>
-    <script src="../static/js/vendor/jsonTree.js"></script>
-    <script src="../static/js/vendor/fabric.js"></script>
-    <script src="../static/js/vendor/tui-code-snippet.min.js"></script>
-    <script src="../static/js/vendor/FileSaver.min.js"></script>
-    <script src="../static/js/vendor/tui-color-picker.js"></script>
-    <script src="../static/js/vendor/tui-image-editor.js"></script>
-    <script src="../static/js/vendor/white-theme.js"></script>
-    <script src="../static/js/vendor/black-theme.js"></script>
-    <script src="../static/js/vendor/wavesurfer.min.js"></script>
-    <script src="../static/js/vendor/p5.min.js"></script>
-    <script src="../static/js/vendor/p5.sound.min.js"></script>
-    <script src="../static/js/vendor/p5.dom.min.js"></script>
-    <script src="../static/js/vendor/jexcel.min.js"></script>
-    <script src="../static/js/vendor/jsuites.min.js"></script>
+    <script src="/static/js/vendor/jquery.min.js"></script>
+    <script src="/static/js/vendor/html2canvas.min.js"></script>
+    <script src="/static/js/vendor/jquery-ui.min.js"></script>
+    <script src="/static/js/vendor/jquery.ui.touch-punch.js"></script>
+    <script src="/static/js/vendor/jsonTree.js"></script>
+    <script src="/static/js/vendor/fabric.js"></script>
+    <script src="/static/js/vendor/tui-code-snippet.min.js"></script>
+    <script src="/static/js/vendor/FileSaver.min.js"></script>
+    <script src="/static/js/vendor/tui-color-picker.js"></script>
+    <script src="/static/js/vendor/tui-image-editor.js"></script>
+    <script src="/static/js/vendor/white-theme.js"></script>
+    <script src="/static/js/vendor/black-theme.js"></script>
+    <script src="/static/js/vendor/wavesurfer.min.js"></script>
+    <script src="/static/js/vendor/p5.min.js"></script>
+    <script src="/static/js/vendor/p5.sound.min.js"></script>
+    <script src="/static/js/vendor/p5.dom.min.js"></script>
+    <script src="/static/js/vendor/jexcel.min.js"></script>
+    <script src="/static/js/vendor/jsuites.min.js"></script>
 
-    <script src="../static/js/utils.js"></script>
-    <script src="../static/js/all_io.js"></script>
-    <script src="../static/js/interfaces/input/csv.js"></script>
-    <script src="../static/js/interfaces/input/image.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/radio.js"></script>
-    <script src="../static/js/interfaces/input/checkbox_group.js"></script>
-    <script src="../static/js/interfaces/input/checkbox.js"></script>
-    <script src="../static/js/interfaces/input/dropdown.js"></script>
-    <script src="../static/js/interfaces/input/slider.js"></script>
-    <script src="../static/js/interfaces/input/dataframe.js"></script>
-    <script src="../static/js/interfaces/input/audio.js"></script>
-    <script src="../static/js/interfaces/input/file.js"></script>
-    <script src="../static/js/vendor/webcam.min.js"></script>
-    <script src="../static/js/interfaces/input/webcam.js"></script>
-    <script src="../static/js/interfaces/input/microphone.js"></script>
-    <script src="../static/js/interfaces/output/image.js"></script>
-    <script src="../static/js/interfaces/output/label.js"></script>
-    <script src="../static/js/interfaces/output/key_values.js"></script>
-    <script src="../static/js/interfaces/output/textbox.js"></script>
-    <script src="../static/js/interfaces/output/highlighted_text.js"></script>
-    <script src="../static/js/interfaces/output/audio.js"></script>
-    <script src="../static/js/interfaces/output/json.js"></script>
-    <script src="../static/js/interfaces/output/html.js"></script>
-    <script src="../static/js/interfaces/output/dataframe.js"></script>
-    <script src="../static/js/interfaces/output/file.js"></script>
-    <script src="../static/js/gradio.js"></script>
+    <script src="/static/js/utils.js"></script>
+    <script src="/static/js/all_io.js"></script>
+    <script src="/static/js/interfaces/input/csv.js"></script>
+    <script src="/static/js/interfaces/input/image.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/radio.js"></script>
+    <script src="/static/js/interfaces/input/checkbox_group.js"></script>
+    <script src="/static/js/interfaces/input/checkbox.js"></script>
+    <script src="/static/js/interfaces/input/dropdown.js"></script>
+    <script src="/static/js/interfaces/input/slider.js"></script>
+    <script src="/static/js/interfaces/input/dataframe.js"></script>
+    <script src="/static/js/interfaces/input/audio.js"></script>
+    <script src="/static/js/interfaces/input/file.js"></script>
+    <script src="/static/js/vendor/webcam.min.js"></script>
+    <script src="/static/js/interfaces/input/webcam.js"></script>
+    <script src="/static/js/interfaces/input/microphone.js"></script>
+    <script src="/static/js/interfaces/output/image.js"></script>
+    <script src="/static/js/interfaces/output/label.js"></script>
+    <script src="/static/js/interfaces/output/key_values.js"></script>
+    <script src="/static/js/interfaces/output/textbox.js"></script>
+    <script src="/static/js/interfaces/output/highlighted_text.js"></script>
+    <script src="/static/js/interfaces/output/audio.js"></script>
+    <script src="/static/js/interfaces/output/json.js"></script>
+    <script src="/static/js/interfaces/output/html.js"></script>
+    <script src="/static/js/interfaces/output/dataframe.js"></script>
+    <script src="/static/js/interfaces/output/file.js"></script>
+    <script src="/static/js/gradio.js"></script>
     <script>
       $.getJSON("static/config.json", function(config) {
         io = gradio_url(config, "/api/predict/", "#interface_target");