merge master

.circleci/config.yml

@@ -16,6 +16,10 @@ jobs:
             pip install --upgrade pip
             pip install -r gradio.egg-info/requires.txt
             pip install selenium==4.0.0a6.post2
+      - run:
+          command: |
+            chromedriver --version
+          name: Check chrome driver install
       - save_cache:
           key: deps1-{{ .Branch }}-{{ checksum "gradio.egg-info/requires.txt" }}
           paths:

demo/hello_world.py

@@ -1,8 +1,8 @@
 import gradio as gr
 
 def greet(name):
-  return "Hello " + name + "!"
+  return "Hello " + name + "!!"
 
 iface = gr.Interface(fn=greet, inputs="text", outputs="text")
 if __name__ == "__main__":
-    iface.launch()
+    iface.launch()

demo/main_note.py

@@ -39,7 +39,7 @@ def main_note(audio):
 
 iface = gr.Interface(
     main_note, 
-    "microphone", 
+    "audio", 
     gr.outputs.Label(num_top_classes=4),
     examples=[
         ["audio/recording1.wav"],

demo/utils/requirements.txt

@@ -1,3 +1,3 @@
 pytorch-transformers==1.0.0
 Flask==1.1.1
-Flask-Cors==3.0.8
+Flask-Cors==3.0.9

gradio.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 1.0
 Name: gradio
-Version: 1.6.3
+Version: 1.7.7
 Summary: Python library for easily interacting with trained machine learning models
 Home-page: https://github.com/gradio-app/gradio-UI
 Author: Abubakar Abid

gradio.egg-info/SOURCES.txt

@@ -4,6 +4,8 @@ setup.py
 gradio/__init__.py
 gradio/component.py
 gradio/embeddings.py
+gradio/encryptor.py
+gradio/external.py
 gradio/inputs.py
 gradio/interface.py
 gradio/interpretation.py
@@ -13,6 +15,7 @@ gradio/outputs.py
 gradio/processing_utils.py
 gradio/strings.py
 gradio/test_data.py
+gradio/transforms.py
 gradio/tunneling.py
 gradio/utils.py
 gradio.egg-info/PKG-INFO
@@ -151,6 +154,7 @@ gradio/static/js/vendor/gifcap/gifencoder.js
 gradio/static/js/vendor/gifcap/quantizer.js
 gradio/static/js/vendor/gifcap/writer.js
 gradio/templates/index.html
+gradio/templates/login.html
 test/test_demos.py
 test/test_inputs.py
 test/test_interfaces.py

gradio.egg-info/requires.txt

@@ -1,14 +1,15 @@
 numpy
+scipy
+matplotlib
+pandas
+pillow
+ffmpy
+markdown2
+pycryptodome
 requests
+paramiko
+analytics-python
 Flask>=1.1.1
 Flask-Cors>=3.0.8
 flask-cachebuster
-Flask-BasicAuth
-paramiko
-scipy
-IPython
-scikit-image
-analytics-python
-pandas
-ffmpy
-markdown2
+Flask-Login

gradio/component.py

@@ -10,6 +10,12 @@ class Component():
     def __init__(self, label):
         self.label = label
 
+    def __str__(self):
+        return self.__repr__()
+
+    def __repr__(self):
+        return "{}(label=\"{}\")".format(type(self).__name__, self.label)
+
     def get_template_context(self):
         """
         :return: a dictionary with context variables for the javascript file associated with the context
@@ -26,7 +32,7 @@ class Component():
         """
         return {}
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Saves flagged data from component
         """
@@ -38,8 +44,8 @@ class Component():
         """
         return data
 
-    def save_flagged_file(self, dir, label, data):
-        file = processing_utils.decode_base64_to_file(data)
+    def save_flagged_file(self, dir, label, data, encryption_key):
+        file = processing_utils.decode_base64_to_file(data, encryption_key)
         old_file_name = file.name
         output_dir = os.path.join(dir, label)
         if os.path.exists(output_dir):

gradio/encryptor.py

@@ -0,0 +1,25 @@
+import base64
+from Crypto.Cipher import AES
+from Crypto.Hash import SHA256
+from Crypto import Random
+
+def get_key(password):
+    key = SHA256.new(password.encode()).digest()
+    return key
+
+def encrypt(key, source):
+    IV = Random.new().read(AES.block_size)  # generate IV
+    encryptor = AES.new(key, AES.MODE_CBC, IV)
+    padding = AES.block_size - len(source) % AES.block_size  # calculate needed padding
+    source += bytes([padding]) * padding  # Python 2.x: source += chr(padding) * padding
+    data = IV + encryptor.encrypt(source)  # store the IV at the beginning and encrypt
+    return data
+
+def decrypt(key, source):
+    IV = source[:AES.block_size]  # extract the IV from the beginning
+    decryptor = AES.new(key, AES.MODE_CBC, IV)
+    data = decryptor.decrypt(source[AES.block_size:])  # decrypt
+    padding = data[-1]  # pick the padding value from the end; Python 2.x: ord(data[-1])
+    if data[-padding:] != bytes([padding]) * padding:  # Python 2.x: chr(padding) * padding
+        raise ValueError("Invalid padding...")
+    return data[:-padding]  # remove the padding

gradio/external.py

@@ -0,0 +1,191 @@
+import json
+import requests
+from gradio import inputs, outputs
+
+
+def get_huggingface_interface(model_name, api_key, alias):
+    api_url = "https://api-inference.huggingface.co/models/{}".format(model_name)
+    if api_key is not None:
+        headers = {"Authorization": f"Bearer {api_key}"}
+    else:
+        headers = {}
+
+    # Checking if model exists, and if so, it gets the pipeline
+    response = requests.request("GET", api_url,  headers=headers)
+    assert response.status_code == 200, "Invalid model name or src"
+    p = response.json().get('pipeline_tag')
+
+    pipelines = {
+        'question-answering': {
+            'inputs': [inputs.Textbox(label="Context", lines=7), inputs.Textbox(label="Question")],
+            'outputs': [outputs.Textbox(label="Answer"), outputs.Label(label="Score")],
+            'preprocess': lambda c, q: {"inputs": {"context": c, "question": q}},
+            'postprocess': lambda r: (r["answer"], r["score"]),
+            # 'examples': [['My name is Sarah and I live in London', 'Where do I live?']]
+        },
+        'text-generation': {
+            'inputs': inputs.Textbox(label="Input"),
+            'outputs': outputs.Textbox(label="Output"),
+            'preprocess': lambda x: {"inputs": x},
+            'postprocess': lambda r: r[0]["generated_text"],
+            # 'examples': [['My name is Clara and I am']]
+        },
+        'summarization': {
+            'inputs': inputs.Textbox(label="Input"),
+            'outputs': outputs.Textbox(label="Summary"),
+            'preprocess': lambda x: {"inputs": x},
+            'postprocess': lambda r: r[0]["summary_text"]
+        },
+        'translation': {
+            'inputs': inputs.Textbox(label="Input"),
+            'outputs': outputs.Textbox(label="Translation"),
+            'preprocess': lambda x: {"inputs": x},
+            'postprocess': lambda r: r[0]["translation_text"]
+        },
+        'text2text-generation': {
+            'inputs': inputs.Textbox(label="Input"),
+            'outputs': outputs.Textbox(label="Generated Text"),
+            'preprocess': lambda x: {"inputs": x},
+            'postprocess': lambda r: r[0]["generated_text"]
+        },
+        'text-classification': {
+            'inputs': inputs.Textbox(label="Input"),
+            'outputs': outputs.Label(label="Classification"),
+            'preprocess': lambda x: {"inputs": x},
+            'postprocess': lambda r: {'Negative': r[0][0]["score"],
+                                      'Positive': r[0][1]["score"]}
+        },
+        'fill-mask': {
+            'inputs': inputs.Textbox(label="Input"),
+            'outputs': "label",
+            'preprocess': lambda x: {"inputs": x},
+            'postprocess': lambda r: {i["token_str"]: i["score"] for i in r}
+        },
+        'zero-shot-classification': {
+            'inputs': [inputs.Textbox(label="Input"),
+                       inputs.Textbox(label="Possible class names ("
+                                            "comma-separated)"),
+                       inputs.Checkbox(label="Allow multiple true classes")],
+            'outputs': "label",
+            'preprocess': lambda i, c, m: {"inputs": i, "parameters":
+            {"candidate_labels": c, "multi_class": m}},
+            'postprocess': lambda r: {r["labels"][i]: r["scores"][i] for i in
+                                      range(len(r["labels"]))}
+        },
+        'automatic-speech-recognition': {
+            'inputs': inputs.Audio(label="Input", source="upload",
+                                   type="file"),
+            'outputs': outputs.Textbox(label="Output"),
+            'preprocess': lambda i: {"inputs": i},
+            'postprocess': lambda r: r["text"]
+        },
+        'image-classification': {
+            'inputs': inputs.Image(label="Input Image", type="file"),
+            'outputs': outputs.Label(label="Classification"),
+            'preprocess': lambda i: i,
+            'postprocess': lambda r: {i["label"].split(", ")[0]: i["score"] for
+                                      i in r}
+        }
+    }
+
+    if p is None or not(p in pipelines):
+        print("Warning: no interface information found")
+    
+    pipeline = pipelines[p]
+
+    def query_huggingface_api(*input):
+        payload = pipeline['preprocess'](*input)
+        if p == 'automatic-speech-recognition' or p == 'image-classification':
+            with open(input[0].name, "rb") as f:
+                data = f.read()
+        else:
+            payload.update({'options': {'wait_for_model': True}})
+            data = json.dumps(payload)
+        response = requests.request("POST", api_url, headers=headers, data=data)
+        if response.status_code == 200:
+            result = json.loads(response.content.decode("utf-8"))
+            output = pipeline['postprocess'](result)
+        else:
+            raise ValueError("Could not complete request to HuggingFace API, Error {}".format(response.status_code))
+        return output
+    
+    if alias is None:
+        query_huggingface_api.__name__ = model_name
+    else:
+        query_huggingface_api.__name__ = alias
+
+    interface_info = {
+        'fn': query_huggingface_api, 
+        'inputs': pipeline['inputs'],
+        'outputs': pipeline['outputs'],
+        'title': model_name,
+        # 'examples': pipeline['examples'],
+    }
+
+    return interface_info
+
+def get_gradio_interface(model_name, api_key, alias):
+    model_info = requests.get("https://gradio.app/get_config/{}".format(model_name)).json()
+    config_info = json.loads(model_info["config"])
+    api_url = "{}/api/predict/".format(model_info["url"])
+
+    headers = {
+        'authority': model_info["url"],
+        'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="90", "Microsoft Edge";v="90"',
+        'accept': 'application/json, text/javascript, */*; q=0.01',
+        'sec-ch-ua-mobile': '?1',
+        'user-agent': 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Mobile Safari/537.36 Edg/90.0.818.56',
+        'content-type': 'application/json; charset=UTF-8',
+        'origin': 'https://gradio.app',
+        'sec-fetch-site': 'cross-site',
+        'sec-fetch-mode': 'cors',
+        'sec-fetch-dest': 'empty',
+        'referer': 'https://gradio.app/',
+        'accept-language': 'en-US,en;q=0.9',
+    }
+
+    def query_gradio_api(*input):
+        payload = pipeline['preprocess'](*input)
+        data = json.dumps(payload)
+        response = requests.post(api_url, headers=headers, data=data)
+        result = json.loads(response.content.decode("utf-8"))
+        output = pipeline['postprocess'](result)
+        return output
+
+    if alias is None:
+        query_gradio_api.__name__ = model_name
+    else:
+        query_gradio_api.__name__ = alias
+
+    pipeline = {
+        'inputs': [inp[0] for inp in config_info["input_interfaces"]],
+        'outputs': [out[0] for out in config_info["output_interfaces"]],
+        'preprocess': lambda x: {"data": [x]},
+        'postprocess': lambda r: r["data"][0],
+    }
+
+    interface_info = {
+        'fn': query_gradio_api, 
+        'inputs': pipeline['inputs'],
+        'outputs': pipeline['outputs'],
+        'title': model_name,
+    }
+
+    return interface_info
+
+def load_interface(name, src=None, api_key=None, alias=None):
+    if src is None:
+        tokens = name.split("/")
+        assert len(tokens) > 1, "Either `src` parameter must be provided, or `name` must be formatted as \{src\}/\{repo name\}"
+        src = tokens[0]
+        name = "/".join(tokens[1:])
+    assert src.lower() in repos, "parameter: src must be one of {}".format(repos.keys())
+    interface_info = repos[src](name, api_key, alias)
+    return interface_info
+
+repos = {
+    # for each repo, we have a method that returns the Interface given the model name & optionally an api_key
+    "huggingface": get_huggingface_interface,
+    "gradio": get_gradio_interface,
+}
+

gradio/inputs.py

@@ -14,7 +14,6 @@ from gradio.component import Component
 import base64
 import numpy as np
 import PIL
-from skimage.segmentation import slic
 import scipy.io.wavfile
 from gradio import processing_utils, test_data
 import pandas as pd
@@ -182,7 +181,7 @@ class Textbox(InputComponent):
             result.append((self.interpretation_separator, 0))
         return result
 
-    def _embed_text(text):
+    def _embed_text(self, text):
         """
         Figures out a "reasonable" embedding for any particular text. Did it this way to avoid loading any 
         external machine learning models, which would be slow and require additional dependencies.
@@ -196,7 +195,7 @@ class Textbox(InputComponent):
         Embeds an arbitrary text based on word frequency
         """
         if self.type == "str":
-            return _embed_text(x)
+            return self._embed_text(x)
         elif self.type == "number":
             return [float(x)]
         else:
@@ -486,7 +485,7 @@ class CheckboxGroup(InputComponent):
         else:
             raise ValueError("Unknown type: " + str(self.type) + ". Please choose from: 'value', 'index'.")
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (List[str]])
         """
@@ -703,6 +702,11 @@ class Image(InputComponent):
         if self.shape is not None:
             x = processing_utils.resize_and_crop(x, self.shape)
         image = np.array(x)
+        try:
+            from skimage.segmentation import slic
+        except ImportError:
+            print("Error: running default interpretation for images requires scikit-image, please install it first.")
+            return
         segments_slic = slic(image, self.interpretation_segments, compactness=10, sigma=1)
         leave_one_out_tokens, masks = [], []
         replace_color = np.mean(image, axis=(0, 1))
@@ -747,11 +751,11 @@ class Image(InputComponent):
         im = processing_utils.resize_and_crop(im, (shape[0], shape[1]))
         return np.asarray(im).flatten()
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (str) path to image file
         """
-        return self.save_flagged_file(dir, label, data)
+        return self.save_flagged_file(dir, label, data, encryption_key)
 
 
 class Video(InputComponent):
@@ -796,11 +800,11 @@ class Video(InputComponent):
     def preprocess_example(self, x):
         return processing_utils.encode_file_to_base64(x)
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (str) path to video file
         """
-        return self.save_flagged_file(dir, label, data)
+        return self.save_flagged_file(dir, label, data, encryption_key)
 
 class Audio(InputComponent):
     """
@@ -901,11 +905,11 @@ class Audio(InputComponent):
         else:
             raise ValueError("Unknown type: " + str(self.type) + ". Please choose from: 'numpy', 'mfcc', 'file'.")
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (str) path to audio file
         """
-        return self.save_flagged_file(dir, label, data)
+        return self.save_flagged_file(dir, label, data, encryption_key)
 
 
 class File(InputComponent):
@@ -969,6 +973,16 @@ class File(InputComponent):
             return [process_single_file(f) for f in x]
 
 
+    def embed(self, x):
+        raise NotImplementedError("File doesn't currently support embeddings")
+
+    def save_flagged(self, dir, label, data, encryption_key):
+        """
+        Returns: (str) path to file
+        """
+        return self.save_flagged_file(dir, label, data["data"], encryption_key)
+
+
 class Dataframe(InputComponent):
     """
     Component accepts 2D input through a spreadsheet interface.
@@ -1065,7 +1079,7 @@ class Dataframe(InputComponent):
     def embed(self, x):
         raise NotImplementedError("DataFrame doesn't currently support embeddings")
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (List[List[Union[str, float]]]) 2D array
         """

gradio/interface.py

@@ -8,6 +8,8 @@ from gradio.inputs import InputComponent
 from gradio.outputs import OutputComponent
 from gradio import networking, strings, utils
 from gradio.interpretation import quantify_difference_in_label
+from gradio.external import load_interface
+from gradio import encryptor
 import pkg_resources
 import requests
 import random
@@ -23,6 +25,7 @@ import copy
 import markdown2
 import json
 import csv
+from getpass import getpass
 
 analytics.write_key = "uxIFddIEuuUcFLf9VgH2teTEtPlWdkNy"
 analytics_url = 'https://api.gradio.app/'
@@ -44,14 +47,30 @@ class Interface:
         return list(
             Interface.instances)
 
-    def __init__(self, fn, inputs, outputs, verbose=False, examples=None,
+    @classmethod
+    def load(cls, name, src=None, api_key=None, alias=None, **kwargs):
+        """
+        Loads a model and Interface from an external source repo
+        Parameters: 
+        name (str): the name of the model (e.g. "gpt2"), can include the `src` as prefix (e.g. "huggingface/gpt2")
+        src (str): the source of the model: `huggingface` or `gradio` (or empty if source is provided as a prefix in `name`)
+        api_key (str): optional api key for use with Hugging Face Model Hub
+        alias (str): optional, used as the name of the loaded model instead of the default name
+        Returns:
+        (Interface): an Interface object for the given model
+        """
+        interface_info = load_interface(name, src, api_key, alias)
+        interface_info.update(kwargs)
+        return cls(**interface_info)
+
+    def __init__(self, fn, inputs=None, outputs=None, verbose=False, examples=None,
                  examples_per_page=10, live=False,
                  layout="horizontal", show_input=True, show_output=True,
-                 capture_session=False, interpretation=None, theme="default",
+                 capture_session=False, interpretation=None, theme="default", repeat_outputs_per_model=True,
                  title=None, description=None, article=None, thumbnail=None, 
-                 css=None, server_port=7860, server_name=networking.LOCALHOST_NAME,
-                 allow_screenshot=True, allow_flagging=True, flagging_options=None,
-                 show_tips=True, embedding=None, flagging_dir="flagged", analytics_enabled=True):
+                 css=None, server_port=None, server_name=networking.LOCALHOST_NAME, height=500, width=900,
+                 allow_screenshot=True, allow_flagging=True, flagging_options=None, encrypt=False,
+                 show_tips=False, embedding=None, flagging_dir="flagged", analytics_enabled=True):
 
         """
         Parameters:
@@ -59,7 +78,7 @@ class Interface:
         inputs (Union[str, List[Union[str, InputComponent]]]): a single Gradio input component, or list of Gradio input components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of input components should match the number of parameters in fn.
         outputs (Union[str, List[Union[str, OutputComponent]]]): a single Gradio output component, or list of Gradio output components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of output components should match the number of values returned by fn.
         verbose (bool): whether to print detailed information during launch.
-        examples (List[List[Any]]): sample inputs for the function; if provided, appears below the UI components and can be used to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component.
+        examples (Union[List[List[Any]], str]): sample inputs for the function; if provided, appears below the UI components and can be used to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided. If there are multiple input components, a log.csv file must be present in the directory to link corresponding inputs.
         examples_per_page (int): If examples are provided, how many to display per page.
         live (bool): whether the interface should automatically reload on change.
         layout (str): Layout of input and output panels. "horizontal" arranges them as two columns of equal height, "unaligned" arranges them as two columns of unequal height, and "vertical" arranges them vertically.
@@ -76,10 +95,10 @@ class Interface:
         allow_screenshot (bool): if False, users will not see a button to take a screenshot of the interface.
         allow_flagging (bool): if False, users will not see a button to flag an input and output.
         flagging_options (List[str]): if not None, provides options a user must select when flagging.
+        encrypt (bool): If True, flagged data will be encrypted by key provided by creator at launch
         flagging_dir (str): what to name the dir where flagged data is stored.
         show_tips (bool): if True, will occasionally show tips about new Gradio features
         """
-
         def get_input_instance(iface):
             if isinstance(iface, str):
                 shortcut = InputComponent.get_all_shortcut_implementations()[iface]
@@ -88,7 +107,7 @@ class Interface:
                 return iface
             else:
                 raise ValueError("Input interface must be of type `str` or "
-                                 "`InputComponent`")
+                                 "`InputComponent` but is {}".format(iface))
 
         def get_output_instance(iface):
             if isinstance(iface, str):
@@ -102,6 +121,8 @@ class Interface:
                     "`OutputComponent`"
                 )
 
+        if not isinstance(fn, list):
+            fn = [fn]
         if isinstance(inputs, list):
             self.input_components = [get_input_instance(i) for i in inputs]
         else:
@@ -109,13 +130,13 @@ class Interface:
         if isinstance(outputs, list):
             self.output_components = [get_output_instance(i) for i in outputs]
         else:
-            self.output_components = [get_output_instance(outputs)]
-        if not isinstance(fn, list):
-            fn = [fn]
+            self.output_interfaces = [get_output_instance(outputs)]
 
-        self.output_components *= len(fn)
+        if repeat_outputs_per_model:
+            self.output_interfaces *= len(fn)
         self.predict = fn
         self.function_names = [func.__name__ for func in fn]
+        self.__name__ = ", ".join(self.function_names)
         self.verbose = verbose
         self.status = "OFF"
         self.live = live
@@ -135,6 +156,8 @@ class Interface:
         self.article = article
         self.thumbnail = thumbnail
         self.theme = theme
+        self.height = height
+        self.width = width
         if css is not None and os.path.exists(css):
             with open(css) as css_file:
                 self.css = css_file.read()
@@ -151,10 +174,13 @@ class Interface:
         self.allow_flagging = os.getenv("GRADIO_FLAGGING") or allow_flagging
         self.flagging_options = flagging_options 
         self.flagging_dir = flagging_dir
+        self.encrypt = encrypt
         Interface.instances.add(self)
         self.analytics_enabled=analytics_enabled
         self.save_to = None
         self.share = None
+        self.share_url = None
+        self.local_url = None
         self.embedding = embedding
         self.show_tips = show_tips
 
@@ -190,6 +216,23 @@ class Interface:
             except (requests.ConnectionError, requests.exceptions.ReadTimeout):
                 pass  # do not push analytics if no network
 
+    def __call__(self, params_per_function):
+        return self.predict[0](params_per_function)
+
+    def __str__(self):
+        return self.__repr__()
+
+    def __repr__(self):
+        repr = "Gradio Interface for: {}".format(", ".join(fn.__name__ for fn in self.predict))
+        repr += "\n" + "-"*len(repr)
+        repr += "\ninputs:"
+        for component in self.input_interfaces:
+            repr += "\n|-{}".format(str(component))
+        repr += "\noutputs:"
+        for component in self.output_interfaces:
+            repr+= "\n|-{}".format(str(component))
+        return repr
+        
     def get_config_file(self):
         config = {
             "input_components": [
@@ -276,6 +319,7 @@ class Interface:
 
             if len(self.output_components) == len(self.predict):
                 prediction = [prediction]
+            
             durations.append(duration)
             predictions.extend(prediction)
         
@@ -390,14 +434,15 @@ class Interface:
                 print("PASSED")
                 continue
 
-    def launch(self, inline=None, inbrowser=None, share=False, debug=False, auth=None):
+    def launch(self, inline=None, inbrowser=None, share=False, debug=False, auth=None, auth_message=None, private_endpoint=None, prevent_thread_lock=False):
         """
         Parameters:
         inline (bool): whether to display in the interface inline on python notebooks.
         inbrowser (bool): whether to automatically launch the interface in a new tab on the default browser.
         share (bool): whether to create a publicly shareable link from your computer for the interface.
         debug (bool): if True, and the interface was launched from Google Colab, prints the errors in the cell output.
-        auth (Tuple[str, str]): If provided, username and password required to access interface.
+        auth (Union[Tuple[str, str], List[Tuple[str, str]]]): If provided, username and password (or list of username-password tuples) required to access interface.
+        auth_message (str): If provided, HTML message provided on login page.
         Returns:
         app (flask.Flask): Flask app object
         path_to_local_server (str): Locally accessible link
@@ -409,12 +454,20 @@ class Interface:
         # Set up local flask server
         config = self.get_config_file()
         self.config = config
+        if auth and not isinstance(auth[0], tuple) and not isinstance(auth[0], list):
+            auth = [auth]
         self.auth = auth
+        self.auth_message = auth_message
+
+        # Request key for encryption
+        if self.encrypt:
+            self.encryption_key = encryptor.get_key(getpass("Enter key for encryption: "))
 
         # Launch local flask server
         server_port, app, thread = networking.start_server(
             self, self.server_name, self.server_port, self.auth)
         path_to_local_server = "http://{}:{}/".format(self.server_name, server_port)
+        self.local_url = path_to_local_server
         self.server_port = server_port
         self.status = "RUNNING"
         self.server = app
@@ -434,12 +487,17 @@ class Interface:
         else:
             print(strings.en["RUNNING_LOCALLY"].format(path_to_local_server))
 
+        if private_endpoint is not None:
+            share = True
         # Set up shareable link 
         self.share = share
+
         if share:
-            print(strings.en["SHARE_LINK_MESSAGE"])
+            if not private_endpoint:
+                print(strings.en["SHARE_LINK_MESSAGE"])
             try:
-                share_url = networking.setup_tunnel(server_port)
+                share_url = networking.setup_tunnel(server_port, private_endpoint)
+                self.share_url = share_url
                 print(strings.en["SHARE_LINK_DISPLAY"].format(share_url))
             except RuntimeError:
                 send_error_analytics(self.analytics_enabled)
@@ -459,15 +517,18 @@ class Interface:
         if inline is None:
             inline = utils.ipython_check()
         if inline:
-            from IPython.display import IFrame, display
-            # Embed the remote interface page if on google colab; otherwise, embed the local page.
-            print(strings.en["INLINE_DISPLAY_BELOW"])
-            if share:
-                # while not networking.url_ok(share_url):
-                #     time.sleep(1)
-                display(IFrame(share_url, width=1000, height=500))
-            else:
-                display(IFrame(path_to_local_server, width=1000, height=500))
+            try:                
+                from IPython.display import IFrame, display
+                # Embed the remote interface page if on google colab; otherwise, embed the local page.
+                print(strings.en["INLINE_DISPLAY_BELOW"])
+                if share:
+                    while not networking.url_ok(share_url):
+                        time.sleep(1)
+                    display(IFrame(share_url, width=self.width, height=self.height))
+                else:
+                    display(IFrame(path_to_local_server, width=self.width, height=self.height))
+            except ImportError:
+                pass  # IPython is not available so does not print inline.
 
         send_launch_analytics(analytics_enabled=self.analytics_enabled, inbrowser=inbrowser, is_colab=is_colab, 
                               share=share, share_url=share_url)
@@ -480,11 +541,22 @@ class Interface:
                 sys.stdout.flush()
                 time.sleep(0.1)
         is_in_interactive_mode = bool(getattr(sys, 'ps1', sys.flags.interactive))
-        if not is_in_interactive_mode:
+        if not prevent_thread_lock and not is_in_interactive_mode:
             self.run_until_interrupted(thread, path_to_local_server)
-        
+
+
         return app, path_to_local_server, share_url
 
+
+    def integrate(self, comet_ml=None):
+        if self.share_url is not None:
+            comet_ml.log_text(self.share_url)
+            comet_ml.end()
+        else:
+            comet_ml.log_text(self.local_url)
+            comet_ml.end()
+    
+
 def show_tip(io):
     if not(io.show_tips):
         return

gradio/mix.py

@@ -0,0 +1,71 @@
+"""
+Ways to transform interfaces to produce new interfaces
+"""
+from gradio.interface import Interface
+
+class Parallel(Interface):
+    """
+    Creates a new Interface consisting of multiple models in parallel
+    Parameters: 
+    interfaces: any number of Interface objects that are to be compared in parallel 
+    options: additional kwargs that are passed into the new Interface object to customize it  
+    Returns:
+    (Interface): an Interface object comparing the given models
+    """
+    def __init__(self, *interfaces, **options):
+        fns = []
+        outputs = []
+        
+        for io in interfaces:
+            fns.extend(io.predict)
+            outputs.extend(io.output_interfaces)
+
+        kwargs = {
+            "fn": fns,
+            "inputs": interfaces[0].input_interfaces,
+            "outputs": outputs,
+            "repeat_outputs_per_model": False,
+        }
+        kwargs.update(options)
+        super().__init__(**kwargs) 
+
+
+class Series(Interface):
+    """
+    Creates a new Interface from multiple models in series (the output of one is fed as the input to the next)
+    Parameters: 
+    interfaces: any number of Interface objects that are to be connected in series 
+    options: additional kwargs that are passed into the new Interface object to customize it  
+    Returns:
+    (Interface): an Interface object connecting the given models
+    """
+    def __init__(self, *interfaces, **options):
+        fns = [io.predict for io in interfaces]
+    
+        def connected_fn(data):  # Run each function with the appropriate preprocessing and postprocessing 
+            data = [data] # put it in a list before it gets unraveled
+            for idx, io in enumerate(interfaces):
+                # skip preprocessing for first interface since the compound interface will include it
+                if idx > 0:
+                    data = [input_interface.preprocess(data[i]) for i, input_interface in enumerate(io.input_interfaces)]
+                # run all of predictions sequentially
+                predictions = []
+                for predict_fn in io.predict:
+                    prediction = predict_fn(*data)
+                    predictions.append(prediction)
+                data = predictions
+                # skip postprocessing for final interface since the compound interface will include it
+                if idx < len(interfaces) - 1:
+                    data = [output_interface.postprocess(data[i]) for i, output_interface in enumerate(io.output_interfaces)]
+            return data[0]
+    
+        connected_fn.__name__ = " => ".join([f[0].__name__ for f in fns])
+
+        kwargs = {
+            "fn": connected_fn,
+            "inputs": interfaces[0].input_interfaces,
+            "outputs": interfaces[-1].output_interfaces,
+        }
+        kwargs.update(options)
+        super().__init__(**kwargs) 
+

gradio/networking.py

@@ -7,7 +7,7 @@ import socket
 import threading
 from flask import Flask, request, jsonify, abort, send_file, render_template, redirect
 from flask_cachebuster import CacheBuster
-from flask_basicauth import BasicAuth
+from flask_login import LoginManager, login_user, logout_user, current_user, login_required
 from flask_cors import CORS
 import threading
 import pkg_resources
@@ -23,6 +23,9 @@ import logging
 import gradio as gr
 from gradio.embeddings import calculate_similarity, fit_pca_to_embeddings, transform_with_pca
 from gradio.tunneling import create_tunnel
+from gradio import encryptor
+from functools import wraps
+import io
 
 INITIAL_PORT_VALUE = int(os.getenv(
     'GRADIO_SERVER_PORT', "7860"))  # The http server will try to open on port 7860. If not available, 7861, 7862, etc.
@@ -38,17 +41,53 @@ STATIC_PATH_LIB = pkg_resources.resource_filename("gradio", "frontend/static")
 GRADIO_STATIC_ROOT = "https://gradio.app"
 
 app = Flask(__name__,
-    template_folder=STATIC_TEMPLATE_LIB,
-    static_folder=STATIC_PATH_LIB,
-    static_url_path="/static/")
+            template_folder=STATIC_TEMPLATE_LIB,
+            static_folder=STATIC_PATH_LIB,
+            static_url_path="/static/")
 CORS(app)
-cache_buster = CacheBuster(config={'extensions': ['.js', '.css'], 'hash_size': 5})
+cache_buster = CacheBuster(
+    config={'extensions': ['.js', '.css'], 'hash_size': 5})
 cache_buster.init_app(app)
+app.secret_key = os.getenv("GRADIO_KEY", "secret")
+login_manager = LoginManager()
+login_manager.login_view = 'login'
+login_manager.init_app(app)
 
 # Hide Flask default message
 cli = sys.modules['flask.cli']
 cli.show_server_banner = lambda *x: None
 
+
+class User:
+    def __init__(self, id):
+        self.is_authenticated = True
+        self.is_active = True
+        self.is_anonymous = False
+        self.id = id
+
+    def get_id(self):
+        return self.id
+
+
+@login_manager.user_loader
+def load_user(_id):
+    return User(_id)
+
+
+def login_check(func):
+    @wraps(func)
+    def wrapper(*args, **kwargs):
+        if app.auth:
+            @login_required
+            def func2(*args, **kwargs):
+                return func(*args, **kwargs)
+
+            return func2(*args, **kwargs)
+        else:
+            return func(*args, **kwargs)
+    return wrapper
+
+
 def get_local_ip_address():
     try:
         ip_address = requests.get('https://api.ipify.org', timeout=3).text
@@ -56,8 +95,10 @@ def get_local_ip_address():
         ip_address = "No internet connection"
     return ip_address
 
+
 IP_ADDRESS = get_local_ip_address()
 
+
 def get_first_available_port(initial, final):
     """
     Gets the first open port in a specified range of port numbers
@@ -79,110 +120,163 @@ def get_first_available_port(initial, final):
         )
     )
 
+
 def home_page(examples=None, path=None):
     return render_template("index.html",
-        config=app.interface.config,
-        vendor_prefix=(GRADIO_STATIC_ROOT if app.interface.share else ""),
-        input_components=[interface["name"] for interface in app.interface.config["input_components"]],
-        output_components=[interface["name"] for interface in app.interface.config["output_components"]],
-        css=app.interface.css, examples=examples, path=path
-    )
+                           config=app.interface.config,
+                           vendor_prefix=(
+                               GRADIO_STATIC_ROOT if app.interface.share else ""),
+                           input_interfaces=[interface[0]
+                                             for interface in app.interface.config["input_interfaces"]],
+                           output_interfaces=[interface[0]
+                                              for interface in app.interface.config["output_interfaces"]],
+                           css=app.interface.css, examples=examples, path=path
+                           )
+
 
 
 @app.route("/", methods=["GET"])
+@login_check
 def main():
     return home_page()
 
+
+@app.route('/login', methods=["GET", "POST"])
+def login():
+    if request.method == "GET":
+        return render_template("login.html", current_user=current_user, auth_message=app.interface.auth_message)
+    elif request.method == "POST":
+        username = request.form.get("username")
+        password = request.form.get("password")
+        if username in app.auth and app.auth[username] == password:
+            login_user(User(username))
+            return redirect("/")
+        else:
+            return abort(401)
+
+
 @app.route("/from_dir", methods=["GET"])
+@login_check
 def main_from_flagging_dir():
     return redirect("/from_dir/" + app.interface.flagging_dir)
 
+
 @app.route("/from_dir/<path:path>", methods=["GET"])
+@login_check
 def main_from_dir(path):
     log_file = os.path.join(path, "log.csv")
-    if not os.path.exists(log_file):
-        if isinstance(app.interface.examples, str):
-            abort(404, "Examples dir not found")
+    path_exists = os.path.exists(path)
+    log_file_exists = os.path.exists(log_file)
+    examples_from_folder = isinstance(app.interface.examples, str) and app.interface.examples == path
+    multiple_inputs = len(app.interface.input_interfaces) > 1
+    if path_exists:
+        if not log_file_exists and multiple_inputs:
+            if examples_from_folder:
+                abort(404, "log.csv file required for multiple inputs.")
+            else:
+                return redirect("/")
+    elif examples_from_folder:
+        abort(404, "Examples dir not found")
+    else:
+        return redirect("/")
+    if log_file_exists:
+        if app.interface.encrypt:
+            with open(log_file, "rb") as csvfile:
+                encrypted_csv = csvfile.read()
+                decrypted_csv = encryptor.decrypt(
+                    app.interface.encryption_key, encrypted_csv)
+                csv_data = io.StringIO(decrypted_csv.decode())
+                examples = list(csv.reader(csv_data))
         else:
-            redirect("/")
-    with open(log_file) as logs:
-        examples = list(csv.reader(logs)) 
-    examples = examples[1:] #remove header
+            with open(log_file) as logs:
+                examples = list(csv.reader(logs))
+        examples = examples[1:]  # remove header
+    else:
+        examples = [[filename] for filename in os.listdir(path)]
     for i, example in enumerate(examples):
         for j, (interface, cell) in enumerate(zip(app.interface.input_components + app.interface.output_components, example)):
             examples[i][j] = interface.restore_flagged(cell)
     return home_page(examples=examples, path=path)
 
+
 @app.route("/config/", methods=["GET"])
+@login_check
 def config():
     return jsonify(app.interface.config)
 
 
 @app.route("/enable_sharing/<path:path>", methods=["GET"])
+@login_check
 def enable_sharing(path):
     if path == "None":
         path = None
     app.interface.config["share_url"] = path
     return jsonify(success=True)
-    
+
 
 @app.route("/api/predict/", methods=["POST"])
+@login_check
 def predict():
     raw_input = request.json["data"]
     prediction, durations = app.interface.process(raw_input)
     output = {"data": prediction, "durations": durations}
     if app.interface.allow_flagging == "auto":
         try:
-            flag_data(raw_input)
+            flag_data(raw_input, prediction)
         except:
             pass
     return jsonify(output)
 
+
 def log_feature_analytics(feature):
     if app.interface.analytics_enabled:
         try:
-            requests.post(GRADIO_FEATURE_ANALYTICS_URL, 
-            data={
-                'ip_address': IP_ADDRESS,
-                'feature': feature}, timeout=3)
+            requests.post(GRADIO_FEATURE_ANALYTICS_URL,
+                          data={
+                              'ip_address': IP_ADDRESS,
+                              'feature': feature}, timeout=3)
         except (requests.ConnectionError, requests.exceptions.ReadTimeout):
             pass  # do not push analytics if no network
 
+
 @app.route("/api/score_similarity/", methods=["POST"])
+@login_check
 def score_similarity():
     raw_input = request.json["data"]
 
-    preprocessed_input = [input_component.preprocess(raw_input[i])
-                    for i, input_component in enumerate(app.interface.input_components)]
+    preprocessed_input = [input_interface.preprocess(raw_input[i])
+                          for i, input_interface in enumerate(app.interface.input_interfaces)]
     input_embedding = app.interface.embed(preprocessed_input)
     scores = list()
 
     for example in app.interface.examples:
         preprocessed_example = [iface.preprocess(iface.preprocess_example(example))
-            for iface, example in zip(app.interface.input_components, example)]
+                                for iface, example in zip(app.interface.input_interfaces, example)]
         example_embedding = app.interface.embed(preprocessed_example)
-        scores.append(calculate_similarity(input_embedding, example_embedding))    
+        scores.append(calculate_similarity(input_embedding, example_embedding))
     log_feature_analytics('score_similarity')
     return jsonify({"data": scores})
 
 
 @app.route("/api/view_embeddings/", methods=["POST"])
-def view_embeddings():    
+@login_check
+def view_embeddings():
     sample_embedding = []
     if "data" in request.json:
         raw_input = request.json["data"]
-        preprocessed_input = [input_component.preprocess(raw_input[i])
-                        for i, input_component in enumerate(app.interface.input_components)]
+        preprocessed_input = [input_interface.preprocess(raw_input[i])
+                              for i, input_interface in enumerate(app.interface.input_interfaces)]
         sample_embedding.append(app.interface.embed(preprocessed_input))
 
     example_embeddings = []
     for example in app.interface.examples:
         preprocessed_example = [iface.preprocess(iface.preprocess_example(example))
-            for iface, example in zip(app.interface.input_components, example)]
+                                for iface, example in zip(app.interface.input_interfaces, example)]
         example_embedding = app.interface.embed(preprocessed_example)
         example_embeddings.append(example_embedding)
-    
-    pca_model, embeddings_2d = fit_pca_to_embeddings(sample_embedding + example_embeddings)
+
+    pca_model, embeddings_2d = fit_pca_to_embeddings(
+        sample_embedding + example_embeddings)
     sample_embedding_2d = embeddings_2d[:len(sample_embedding)]
     example_embeddings_2d = embeddings_2d[len(sample_embedding):]
     app.pca_model = pca_model
@@ -191,26 +285,29 @@ def view_embeddings():
 
 
 @app.route("/api/update_embeddings/", methods=["POST"])
-def update_embeddings():    
+@login_check
+def update_embeddings():
     sample_embedding, sample_embedding_2d = [], []
     if "data" in request.json:
         raw_input = request.json["data"]
-        preprocessed_input = [input_component.preprocess(raw_input[i])
-                        for i, input_component in enumerate(app.interface.input_components)]
+        preprocessed_input = [input_interface.preprocess(raw_input[i])
+                              for i, input_interface in enumerate(app.interface.input_interfaces)]
         sample_embedding.append(app.interface.embed(preprocessed_input))
-        sample_embedding_2d = transform_with_pca(app.pca_model, sample_embedding)
-    
+        sample_embedding_2d = transform_with_pca(
+            app.pca_model, sample_embedding)
+
     return jsonify({"sample_embedding_2d": sample_embedding_2d})
 
 
 @app.route("/api/predict_examples/", methods=["POST"])
+@login_check
 def predict_examples():
     example_ids = request.json["data"]
     predictions_set = {}
     for example_id in example_ids:
         example_set = app.interface.examples[example_id]
         processed_example_set = [iface.preprocess_example(example)
-            for iface, example in zip(app.interface.input_components, example_set)]
+                                 for iface, example in zip(app.interface.input_interfaces, example_set)]
         try:
             predictions, _ = app.interface.process(processed_example_set)
         except:
@@ -223,28 +320,51 @@ def predict_examples():
 def flag_data(input_data, output_data, flag_option=None):
     flag_path = os.path.join(app.cwd, app.interface.flagging_dir)
     csv_data = []
-    for i, interface in enumerate(app.interface.input_components):
-        csv_data.append(interface.save_flagged(flag_path, app.interface.config["input_components"][i]["label"], input_data[i]))
-    for i, interface in enumerate(app.interface.output_components):
-        csv_data.append(interface.save_flagged(flag_path, app.interface.config["output_components"][i]["label"], output_data[i]))
+    encryption_key = app.interface.encryption_key if app.interface.encrypt else None
+    for i, interface in enumerate(app.interface.input_interfaces):
+        csv_data.append(interface.save_flagged(
+            flag_path, app.interface.config["input_interfaces"][i]["label"], input_data[i], encryption_key))
+    for i, interface in enumerate(app.interface.output_interfaces):
+        csv_data.append(interface.save_flagged(
+            flag_path, app.interface.config["output_interfaces"][i]["label"], output_data[i], encryption_key))
     if flag_option:
         csv_data.append(flag_option)
 
+    headers = [interface["label"]
+               for interface in app.interface.config["input_interfaces"]]
+    headers += [interface["label"]
+                for interface in app.interface.config["output_interfaces"]]
+    if app.interface.flagging_options is not None:
+        headers.append("flag")
+
     log_fp = "{}/log.csv".format(flag_path)
     is_new = not os.path.exists(log_fp)
 
-    with open(log_fp, "a") as csvfile:
-        writer = csv.writer(csvfile)
+    if app.interface.encrypt:
+        output = io.StringIO()
+        if not is_new:
+            with open(log_fp, "rb") as csvfile:
+                encrypted_csv = csvfile.read()
+                decrypted_csv = encryptor.decrypt(
+                    app.interface.encryption_key, encrypted_csv)
+                output.write(decrypted_csv.decode())
+        writer = csv.writer(output)
         if is_new:
-            headers = [interface[1]["label"] for interface in app.interface.config["input_components"]]
-            headers += [interface[1]["label"] for interface in app.interface.config["output_components"]]
-            if app.interface.flagging_options is not None:
-                headers.append("flag")
             writer.writerow(headers)
-
         writer.writerow(csv_data)
+        with open(log_fp, "wb") as csvfile:
+            csvfile.write(encryptor.encrypt(
+                app.interface.encryption_key, output.getvalue().encode()))
+    else:
+        with open(log_fp, "a") as csvfile:
+            writer = csv.writer(csvfile)
+            if is_new:
+                writer.writerow(headers)
+            writer.writerow(csv_data)
+
 
 @app.route("/api/flag/", methods=["POST"])
+@login_check
 def flag():
     log_feature_analytics('flag')
     data = request.json['data']
@@ -253,10 +373,12 @@ def flag():
 
 
 @app.route("/api/interpret/", methods=["POST"])
+@login_check
 def interpret():
     log_feature_analytics('interpret')
     raw_input = request.json["data"]
-    interpretation_scores, alternative_outputs = app.interface.interpret(raw_input)
+    interpretation_scores, alternative_outputs = app.interface.interpret(
+        raw_input)
     return jsonify({
         "interpretation_scores": interpretation_scores,
         "alternative_outputs": alternative_outputs
@@ -264,37 +386,51 @@ def interpret():
 
 
 @app.route("/file/<path:path>", methods=["GET"])
+@login_check
 def file(path):
-    return send_file(os.path.join(app.cwd, path))
+    if app.interface.encrypt and isinstance(app.interface.examples, str) and path.startswith(app.interface.examples):
+        with open(os.path.join(app.cwd, path), "rb") as encrypted_file:
+            encrypted_data = encrypted_file.read()
+        file_data = encryptor.decrypt(
+            app.interface.encryption_key, encrypted_data)
+        return send_file(io.BytesIO(file_data), attachment_filename=os.path.basename(path))
+    else:
+        return send_file(os.path.join(app.cwd, path))
 
-def start_server(interface, server_name, server_port=None, auth=None):
+
+def start_server(interface, server_name, server_port=None, auth=None, ssl=None):
     if server_port is None:
         server_port = INITIAL_PORT_VALUE
     port = get_first_available_port(
         server_port, server_port + TRY_NUM_PORTS
     )
     if auth is not None:
-        app.interface.config['BASIC_AUTH_USERNAME'] = auth[0]
-        app.interface.config['BASIC_AUTH_PASSWORD'] = auth[1]
-        app.interface.config['BASIC_AUTH_FORCE'] = True
-        basic_auth = BasicAuth(app)        
+        app.auth = {account[0]: account[1] for account in auth}
+    else:
+        app.auth = None
     app.interface = interface
     app.cwd = os.getcwd()
     log = logging.getLogger('werkzeug')
     log.setLevel(logging.ERROR)
     if interface.save_to is not None:
         interface.save_to["port"] = port
+    app_kwargs = {"port": port, "host": server_name}
+    if ssl:
+        print(ssl)
+        app_kwargs["ssl_context"] = ssl
     thread = threading.Thread(target=app.run,
-                              kwargs={"port": port, "host": server_name},
+                              kwargs=app_kwargs,
                               daemon=True)
     thread.start()
 
     return port, app, thread
 
+
 def close_server(process):
     process.terminate()
     process.join()
 
+
 def url_request(url):
     try:
         req = urllib.request.Request(
@@ -306,8 +442,9 @@ def url_request(url):
         raise RuntimeError(str(e))
 
 
-def setup_tunnel(local_server_port):
-    response = url_request(GRADIO_API_SERVER)
+def setup_tunnel(local_server_port, endpoint):
+    response = url_request(
+        endpoint + '/v1/tunnel-request' if endpoint is not None else GRADIO_API_SERVER)
     if response and response.code == 200:
         try:
             payload = json.loads(response.read().decode("utf-8"))[0]
@@ -322,7 +459,7 @@ def url_ok(url):
         for _ in range(5):
             time.sleep(.500)
             r = requests.head(url, timeout=3)
-            if r.status_code == 200:
+            if r.status_code in (200, 401, 302):  # 401 or 302 if auth is set
                 return True
     except (ConnectionError, requests.exceptions.ConnectionError):
         return False

gradio/outputs.py

@@ -118,7 +118,7 @@ class Label(OutputComponent):
             "label": {},
         }
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (Union[str, Dict[str, number]]): Either a string representing the main category label, or a dictionary with category keys mapping to confidence levels.
         """
@@ -195,11 +195,11 @@ class Image(OutputComponent):
             raise ValueError("Unknown type: " + dtype + ". Please choose from: 'numpy', 'pil', 'file', 'plot'.")
         return out_y, coordinates
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (str) path to image file
         """
-        return self.save_flagged_file(dir, label, data[0])
+        return self.save_flagged_file(dir, label, data[0], encryption_key)
 
 
 class Video(OutputComponent):
@@ -224,11 +224,11 @@ class Video(OutputComponent):
     def postprocess(self, y):
         return processing_utils.encode_file_to_base64(y, type="video")
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (str) path to image file
         """
-        return self.save_flagged_file(dir, label, data)
+        return self.save_flagged_file(dir, label, data, encryption_key)
 
 
 class KeyValues(OutputComponent):
@@ -259,7 +259,7 @@ class KeyValues(OutputComponent):
             "key_values": {},
         }
     
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         return json.dumps(data)
 
     def restore_flagged(self, data):
@@ -297,7 +297,7 @@ class HighlightedText(OutputComponent):
     def postprocess(self, y):
         return y
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         return json.dumps(data)
 
     def restore_flagged(self, data):
@@ -340,11 +340,11 @@ class Audio(OutputComponent):
         else:
             raise ValueError("Unknown type: " + self.type + ". Please choose from: 'numpy', 'file'.")
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (str) path to audio file
         """
-        return self.save_flagged_file(dir, label, data)
+        return self.save_flagged_file(dir, label, data, encryption_key)
 
 
 class JSON(OutputComponent):
@@ -373,7 +373,7 @@ class JSON(OutputComponent):
             "json": {},
         }
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         return json.dumps(data)
 
     def restore_flagged(self, data):
@@ -428,11 +428,11 @@ class File(OutputComponent):
             "data": processing_utils.encode_file_to_base64(y, header=False)
         }
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (str) path to image file
         """
-        return self.save_flagged_file(dir, label, data["data"])
+        return self.save_flagged_file(dir, label, data["data"], encryption_key)
 
 
 class Dataframe(OutputComponent):
@@ -489,7 +489,7 @@ class Dataframe(OutputComponent):
         else:
             raise ValueError("Unknown type: " + self.type + ". Please choose from: 'pandas', 'numpy', 'array'.")
 
-    def save_flagged(self, dir, label, data):
+    def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (List[List[Union[str, float]]]) 2D array
         """

gradio/processing_utils.py

@@ -5,7 +5,7 @@ import tempfile
 import scipy.io.wavfile
 from scipy.fftpack import dct
 import numpy as np
-# from gradio import encryptor
+from gradio import encryptor
 
 #########################
 # IMAGE PRE-PROCESSING

gradio/static/css/gradio.css

@@ -1,112 +0,0 @@
-.interface {
-  display: flex;
-  flex-flow: column;
-}
-.interface:not(*:last-child) {
-  margin-bottom: 16px;
-}
-.output_panel {
-  position: relative;
-}
-.loading {
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  margin-left: auto;
-  z-index: 1;
-}
-.loading img {
-  height: 20px;
-}
-button.submit {
-  display: none;
-}
-
-.record_stop {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  border-radius: 4px;
-}
-.record_square {
-  width: 20px; 
-  height: 20px;
-  background-color: #c90a0a;
-  box-shadow: inset 0 0 4px darkred;
-}
-button.submit {
-  background-color: #e67e22;
-  color: white;
-}
-button.submit:hover {
-  background-color: #f39c12;
-}
-.flag {
-  cursor: pointer;
-  position: relative;
-  transition: background-color 100ms;
-}
-.flagged {
-  background-color: #e74c3c !important;
-}
-.dropdown:after {
-  content: '';
-  border: 4px solid transparent;
-  border-top: 4px solid black;
-  margin-left: 8px;
-  margin-bottom: 3px;
-  display: inline-block;
-  vertical-align: bottom;
-}
-.dropcontent {
-  color: black;
-  display: none;
-  position: absolute;
-  z-index: 1;
-  background-color: white;
-  box-shadow: 0px 4px 8px 0px lightgray;   
-  min-width: 170px;
-  right: 0px;
-  top: 44px;
-}
-.dropcontent div {
-  display: block;
-  margin: 4px;
-  padding: 8px;
-}
-.dropcontent div:hover {
-  background-color: lightgray;
-}
-.dropdown:hover .dropcontent {
-  display: block;
-}
-.overlay {
-  position: absolute;
-  height: 100vh;
-  width: 100vw;
-  position: fixed;
-  z-index: 1;
-  background-color: rgba(0, 0, 0, 0.7);
-  top: 0;
-  left: 0;
-}
-.loading {
-  justify-content: center;
-  align-items: center;
-}
-
-.hidden {
-  display: none !important;
-}
-.screenshot_logo {
-  display: flex;
-  justify-content: center;
-  flex-grow: 1;
-  padding: 4px;
-  box-sizing: border-box;
-  margin-left: 16px;
-}
-.screenshot_logo img {
-  height: 38px;
-}

gradio/static/css/interfaces/input/checkbox_group.css

@@ -1,39 +0,0 @@
-.checkbox_group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  font-size: 18px;
-  margin-top: -12px;
-  margin-left: -16px;
-}
-.checkbox_group input, .checkbox {
-  margin: 0px;
-}
-.checkbox_group label {
-  margin-top: 12px;
-  margin-left: 16px;
-}
-.checkbox_solo label {
-  width: 27px !important;
-  padding-left: 11px;
-  padding-right: 3px;
-}
-.interpret_sub {
-  margin-top: 12px;
-}
-.interpret_sub:empty {
-  margin-top: 0;
-}
-.interpret_check {
-  display: inline-block;
-  padding: 4px 8px;
-  font-family: monospace;
-  font-weight: bold;
-  color: black;
-  font-size: 16px;
-}
-.interpret_select {
-  background-color: white;
-  border: solid 2px black;
-  box-sizing: border-box;
-}

gradio/static/css/interfaces/input/dropdown.css

@@ -1,13 +0,0 @@
-select.dropdown {
-  padding: 4px;
-  font-size: 18px;
-  border: solid 1px lightgray;
-  border-radius: 2px;
-  outline: none;
-}
-.select_interpretation > div {
-  font-weight: bold;
-  padding: 4px;
-  font-size: 12px;
-  box-sizing: border-box;
-}

gradio/static/css/interfaces/input/file.css

@@ -1,15 +0,0 @@
-.file_display {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.file_name {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 18px;
-}
-.file_size {
-  font-size: 18px;
-}

gradio/static/css/interfaces/input/image.css

@@ -1,92 +0,0 @@
-.hide {
-  display: none !important;
-}
-.view_holders {
-  flex-grow: 1;
-  background-color: #CCCCCC;
-  position: relative;
-}
-.image_preview_holder, .saliency_holder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.saliency_holder {
-  position: absolute;
-  top: 0;
-}
-.saliency {
-  display: flex;
-  flex-direction: column;
-  border: none;
-  opacity: 1;
-  transition: opacity 0.2s ease;
-}
-.saliency:hover {
-  opacity: 0.4;
-}
-.image_preview {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-.hidden_upload {
-  display: none;
-}
-.image_editor_overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.image_editor_holder {
-  height: 85%;
-  width: 85%;
-}
-.image_editor {
-  background-color: black;
-}
-#tie-btn-reset, #tie-btn-delete, #tie-btn-delete-all {
-  display: none !important;
-}
-.tui-image-editor-icpartition {
-  background-color: transparent !important;
-}
-.tui_close {
-  border-radius: 0 !important;
-  border: none !important;
-  margin-left: 10px !important;
-  font-family: 'Open Sans', sans-serif !important;
-}
-.upload_zone {
-  font-weight: bold;
-  font-size: 24px;
-  color: #BBB;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  line-height: 1.5em;
-  flex-flow: column;
-}
-.upload_zone img {
-  height: 120px;
-}
-.drop_zone {
-  border: dashed 8px #DDD;
-}
-.edit_image {
-  position: absolute;
-  z-index: 1;
-}
-.interface_button {
-  padding: 6px;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 14px;
-}

gradio/static/css/interfaces/input/microphone.css

@@ -1,52 +0,0 @@
-.hidden {
-  display: none !important;
-}
-.recording.input_caption {
-  color: #C00000;
-}
-.volume_display {
-  width: 100%;
-  display: flex;
-}
-.volume {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-}
-.volume_left {
-  justify-content: flex-end;
-}
-.volume_bar {
-  height: 12px;
-  background-color: #C00000;
-  transition: width 0.1s;
-}
-.volume_left .volume_bar {
-  border-radius: 4px 0 0 4px;
-}
-.volume_right .volume_bar {
-  border-radius: 0 4px 4px 0;
-}
-.player {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-}
-.waveform {
-  width: 100%;
-}
-.waveform > wave {
-  overflow: visible !important;
-}
-.waveform canvas {
-  border: none !important;
-}
-.playpause {
-  margin-top: 26px;
-  font-size: 20px;
-  padding: 4px;
-  border-radius: 2px;
-}

gradio/static/css/interfaces/input/radio.css

@@ -1,15 +0,0 @@
-.radio_group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  font-size: 18px;
-  margin-top: -12px;
-  margin-left: -16px;
-}
-.radio_group input {
-  margin: 0px;
-}
-.radio_group label {
-  margin-top: 12px;
-  margin-left: 16px;
-}

gradio/static/css/interfaces/input/sketchpad.css

@@ -1,58 +0,0 @@
-.hide {
-  display: none !important;
-}
-.sketchpad {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.sketch_tools {
-  flex: 0 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 16px;
-}
-.brush {
-  border-radius: 50%;
-  background-color: #AAA;
-  margin: 0px 20px;
-  cursor: pointer;
-}
-.brush.selected, .brush:hover {
-  background-color: black;
-}
-#brush_1 {
-  height: 8px;
-  width: 8px;
-}
-#brush_2 {
-  height: 16px;
-  width: 16px;
-}
-#brush_3 {
-  height: 24px;
-  width: 24px;
-}
-.view_holders {
-  flex-grow: 1;
-  background-color: #CCCCCC;
-  position: relative;
-}
-.canvas_holder canvas {
-  background-color: white;
-}
-.canvas_holder {
-  text-align: center;
-  width: 100%;
-  height: 100%;
-}
-.saliency_holder {
-  position: absolute;
-  top: 0;
-  opacity: 0.9;
-}
-.view_holders canvas {
-  background-color: white;
-  border: solid 1px white;
-}

gradio/static/css/interfaces/input/slider.css

@@ -1,34 +0,0 @@
-.slider_container .slider {
-    margin: 0 24px;
-}
-.slider_container .ui-slider-handle {
-    width: 3em !important;
-    height: 1.6em !important;
-    top: 50% !important;
-    margin-top: -.8em;
-    margin-left: -1.5em !important;
-    text-align: center;
-    line-height: 1.6em;
-    cursor: pointer !important;
-    font-weight: bold;
-    outline: none !important;
-}
-.interpret_range {
-    width: 100%;
-    display: flex;
-    margin-top: 12px;
-}
-.interpret_range:empty {
-    margin-top: 0px;
-}
-.interpret_range > div {
-    min-height: 24px;
-    flex-grow: 1;
-    text-align: center;
-    font-weight: bold;
-    padding: 4px;
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-}

gradio/static/css/interfaces/input/textbox.css

@@ -1,12 +0,0 @@
-textarea.input_text, input.input_text {
-  resize: none;
-  outline: none;
-  width: 100%;
-  font-size: 18px;
-  background-color: white;
-  border: solid 1px lightgray;
-  border-radius: 2px;
-  box-sizing: border-box;
-  padding: 4px;
-  font-family: monospace;
-}

gradio/static/css/interfaces/input/webcam.css

@@ -1,20 +0,0 @@
-.webcam_box {
-  width: 100% !important;
-  flex-grow: 1;
-  background-color: #BBBBBB;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.webcam_box canvas {
-  border: none;
-}
-.take_photo {
-  font-weight: bold;
-  font-size: 14px;
-  padding: 10px 0;
-}
-.snapped {
-  display: none;
-}

gradio/static/css/interfaces/output/audio.css

@@ -1,15 +0,0 @@
-.output_text {
-  width: 100%;
-  font-size: 18px;
-  outline: none;
-  background-color: white;
-  border: solid 1px lightgray;
-  border-radius: 2px;
-  box-sizing: border-box;
-  padding: 4px;
-  min-height: 30px;
-  font-family: monospace;
-  white-space: pre-wrap;      /* CSS3 */   
-  white-space: -moz-pre-wrap; /* Firefox */    
-  word-wrap: break-word;      /* IE */
-}

gradio/static/css/interfaces/output/highlighted_text.css

@@ -1,22 +0,0 @@
-.highlight_legend {
-  margin-bottom: 4px;
-}
-.color_legend {
-  font-family: monospace;
-  padding: 4px;
-  border-radius: 2px;
-  display: flex;
-  justify-content: space-between;
-  background: linear-gradient(90deg, rgba(58,241,255,1) 0%, rgba(58,241,255,0) 49%, rgba(230,126,34,0) 50%, rgba(230,126,34,1) 100%); 
-  margin-bottom: 4px;
-}
-.category-label {
-  display: inline-flex;
-  margin-right: 8px;
-  margin-bottom: 4px;
-}
-.category-label div {
-  width: 24px;
-  margin-right: 4px;
-}
-

gradio/static/css/interfaces/output/html.css

@@ -1,15 +0,0 @@
-.output_text {
-  width: 100%;
-  font-size: 18px;
-  outline: none;
-  background-color: white;
-  border: solid 1px lightgray;
-  border-radius: 2px;
-  box-sizing: border-box;
-  padding: 4px;
-  min-height: 30px;
-  font-family: monospace;
-  white-space: pre-wrap;      /* CSS3 */   
-  white-space: -moz-pre-wrap; /* Firefox */    
-  word-wrap: break-word;      /* IE */
-}

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

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

gradio/static/css/interfaces/output/key_values.css

@@ -1,13 +0,0 @@
-.key_values th {
-  text-align: left;
-}
-.key_values tr {
-  padding: 4px;
-}
-.key_values {
-  font-family: monospace;
-  font-size: 16px;
-}
-.key_values tbody tr:nth-child(odd) {
-  background-color: white;
-}

gradio/static/css/interfaces/output/label.css

@@ -1,16 +0,0 @@
-.label, .confidence {
-  overflow: hidden;
-  white-space: nowrap;
-  height: 27px;
-  margin-bottom: 4px;
-  padding: 2px;
-}
-.label {
-  text-overflow: ellipsis;
-  text-align: right;
-}
-.confidence {
-  text-overflow: clip;
-  padding-left: 6px;
-  padding-right: 6px;
-}

gradio/static/css/interfaces/output/textbox.css

@@ -1,15 +0,0 @@
-.output_text {
-  width: 100%;
-  font-size: 18px;
-  outline: none;
-  background-color: white;
-  border: solid 1px lightgray;
-  border-radius: 2px;
-  box-sizing: border-box;
-  padding: 4px;
-  min-height: 30px;
-  font-family: monospace;
-  white-space: pre-wrap;      /* CSS3 */   
-  white-space: -moz-pre-wrap; /* Firefox */    
-  word-wrap: break-word;      /* IE */
-}

gradio/static/css/style.css

@@ -1,127 +0,0 @@
-.loading_time {
-  color: #e67e22;
-  text-align: right;
-  font-family: monospace;
-}
-button.primary {
-  color: white;
-  background-color: #e67e22;
-}
-button.secondary {
-  color: black;
-  background-color: #F6F6F6;
-}
-h4 {
-  margin-bottom: 0.5em;
-}
-.interpretation_legend {
-  display: flex;
-  padding: 8px;
-  border: solid 2px black;
-  justify-content: space-between;
-  font-family: monospace;
-  background-image: linear-gradient(to right, #3498db ,white,#e74c3c);
-}
-.interpretation_explained ul {
-  font-size: 14px;
-}
-.close_explain {
-  cursor: pointer;  
-}
-.backward {
-  display: inline-block;
-  -moz-transform: scale(-1, 1);
-  -webkit-transform: scale(-1, 1);
-  transform: scale(-1, 1);
-}
-.examples_control button {
-  padding: 8px 16px;
-  border-radius: 2px;
-  margin-right: 8px;
-  background-color: whitesmoke;
-}
-.examples_control {
-  display: flex;
-  flex-wrap: wrap;
-}
-.examples_control > div {
-  display: flex;
-  align-items: stretch;
-}
-
-.examples_control button small {
-  display: block;
-  font-weight: bold;
-}
-.examples_control_right {
-  padding-left: 8px;
-  border-left: solid 2px whitesmoke;
-}
-.examples_control_right .current {
-  background-color: #e67e22;
-  color: white;
-}
-.examples > table {
-  border-collapse: collapse;
-  padding: 8px;
-  background-color: whitesmoke;
-  border-right: solid 4px whitesmoke;
-  border-left: solid 4px whitesmoke;
-  border-bottom: solid 4px whitesmoke;
-  margin-top: 8px;
-}
-.examples > table.gallery {
-  background-color: white;
-  border: none;
-}
-.examples > table.gallery > thead {
-  display: none;
-}
-.examples > table.gallery > tbody > tr {
-  padding: 4px;
-  border-radius: 4px;
-  margin: 0 8px 8px 0;
-  background-color: whitesmoke;
-  display: inline-block;
-}
-.examples > table th {
-  padding: 8px 16px;
-  text-align: left;
-  font-size: 18px;
-  text-transform: uppercase;
-}
-.examples_body > tr > td {
-  padding: 8px;
-  cursor: pointer;
-}
-.pages {
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-  flex-wrap: wrap;
-}
-.page {
-  padding: 8px;
-  margin: 4px;
-  border-radius: 4px;
-}
-.examples_body > tr:nth-child(odd) {
-  background-color: white;
-}
-.examples_body > tr:hover {
-  background-color: lightgray;
-}
-.examples_body > tr.current_example {
-  background-color: lightgray !important;  
-}
-#credit {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 18px;
-  height: 24px;
-}
-#credit img {
-  height: 24px;
-}

gradio/static/css/vendor/cropper.min.css

@@ -1,9 +0,0 @@
-/*!
- * Cropper.js v1.5.7
- * https://fengyuanchen.github.io/cropperjs
- *
- * Copyright 2015-present Chen Fengyuan
- * Released under the MIT license
- *
- * Date: 2020-05-23T05:22:57.283Z
- */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

gradio/static/css/vendor/icons.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="22"><defs><linearGradient id="a"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><radialGradient xlink:href="#a" cx="9.739" cy="9.716" fx="9.739" fy="9.716" r="3.709" gradientUnits="userSpaceOnUse"/></defs><g stroke="#000" fill="none"><g transform="translate(-129.5 -333.862) translate(0 .188)"><rect transform="matrix(.962 0 0 .971 4.943 11.548)" ry="2" rx="2" y="332.362" x="130" height="10.337" width="10.432" opacity=".5"/><g><path d="M132 339.175h6" opacity=".5"/><path d="M135 336.175v6" opacity=".5"/></g></g><g transform="translate(-129.5 -333.862)"><rect width="10.432" height="10.337" x="130" y="332.362" rx="2" ry="2" transform="matrix(.962 0 0 .971 4.943 22.736)" opacity=".5"/><path d="M132 350.362h6" opacity=".5"/></g></g></svg>

gradio/static/css/vendor/jsonTree.css

@@ -1,115 +0,0 @@
-/*
- * 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 {
-    font-family: 'PT Mono', monospace;
-    font-size: 14px;
-    padding-left: 0;
-}
-
-.jsontree_tree ul {
-    padding-left: 20px;
-}
-
-.jsontree_tree li {
-    list-style: none;
-}
-
-
-/* Styles for a list of child nodes */
-.jsontree_child-nodes {
-    display: none;
-    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;
-}

gradio/static/css/vendor/tui-color-picker.css

@@ -1,153 +0,0 @@
-/*!
- * Toast UI Colorpicker
- * @version 2.2.0
- * @author NHNEnt FE Development Team <dl_javascript@nhnent.com>
- * @license MIT
- */
-.tui-colorpicker-clearfix {
-  zoom: 1;
-}
-.tui-colorpicker-clearfix:after {
-  content: '';
-  display: block;
-  clear: both;
-}
-.tui-colorpicker-vml {
-  behavior: url("#default#VML");
-  display: block;
-}
-.tui-colorpicker-container {
-  width: 152px;
-}
-.tui-colorpicker-palette-container {
-  width: 152px;
-}
-.tui-colorpicker-palette-container ul {
-  width: 152px;
-  margin: 0px;
-  padding: 0px;
-}
-.tui-colorpicker-palette-container li {
-  float: left;
-  margin: 0;
-  padding: 0 3px 3px 0;
-  list-style: none;
-}
-.tui-colorpicker-palette-button {
-  display: block;
-  border: none;
-  overflow: hidden;
-  outline: none;
-  margin: 0px;
-  padding: 0px;
-  width: 16px;
-  height: 16px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-}
-.tui-colorpicker-palette-button.tui-colorpicker-selected {
-  border: 2px solid #000;
-}
-.tui-colorpicker-palette-button.tui-colorpicker-color-transparent {
-  barckground-repeat: repeat;
-  background-repeat: no-repeat;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGAqSSwoyGFhYGDIzSspCnJ3UoiIjFJgv8PAzcDDIMRgxSCemFxc4BgQ4MOAE3y7xsAIoi/rgsxK8/x506a1fP4WNq+ZclYlOrj1gQF3SmpxMgMDIweQnZxSnJwLZOcA2TrJBUUlQPYMIFu3vKQAxD4BZIsUAR0IZN8BsdMh7A8gdhKYzcQCVhMS5AxkSwDZAkkQtgaInQ5hW4DYyRmJKUC2B8guiBvAgNPDRcHcwFLXkYC7SQa5OaUwO0ChxZOaFxoMcgcQyzB4MLgwKDCYMxgwWDLoMjiWpFaUgBQ65xdUFmWmZ5QoOAJDNlXBOT+3oLQktUhHwTMvWU9HwcjA0ACkDhRnEKM/B4FNZxQ7jxDLX8jAYKnMwMDcgxBLmsbAsH0PA4PEKYSYyjwGBn5rBoZt5woSixLhDmf8xkKIX5xmbARh8zgxMLDe+///sxoDA/skBoa/E////73o//+/i4H2A+PsQA4AJHdp4IxrEg8AAAGbaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjEzPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE0PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CghrN1AAAABzSURBVCgVldKxEYAgDAXQD5VOpLuwgi4jlrTMqF00oOd5Aia/CcV/F4oYOgNlrLjvVyCEVJchBjEC25538PeaWTzRMBLxvIL7UZwFwL06qoA6aoAy+gFfJABvJAQPUoCMlICRRd8BzgHzJL4ok9aJ67l4AK9AxVKhHryUAAAAAElFTkSuQmCC");
-}
-.tui-colorpicker-palette-hex {
-  font-family: monospace;
-  display: inline-block;
-  *display: inline;
-  zoom: 1;
-  width: 60px;
-  vertical-align: middle;
-}
-.tui-colorpicker-palette-preview {
-  display: inline-block;
-  *display: inline;
-  zoom: 1;
-  width: 12px;
-  height: 12px;
-  border: 1px solid #ccc;
-  border: 1px solid #ccc;
-  vertical-align: middle;
-  overflow: hidden;
-}
-.tui-colorpicker-palette-toggle-slider {
-  display: inline-block;
-  *display: inline;
-  zoom: 1;
-  vertical-align: middle;
-  float: right;
-}
-.tui-colorpicker-slider-container {
-  margin: 5px 0 0 0;
-  height: 122px;
-  zoom: 1;
-}
-.tui-colorpicker-slider-container:after {
-  content: '';
-  display: block;
-  clear: both;
-}
-.tui-colorpicker-slider-left {
-  float: left;
-  width: 120px;
-  height: 120px;
-}
-.tui-colorpicker-slider-right {
-  float: right;
-  width: 32px;
-  height: 120px;
-}
-.tui-colorpicker-svg {
-  display: block;
-}
-.tui-colorpicker-slider-handle {
-  position: absolute;
-  overflow: visible;
-  top: 0;
-  left: 0;
-  width: 1px;
-  height: 1px;
-  z-index: 2;
-  opacity: 0.9;
-}
-.tui-colorpicker-svg-slider {
-  width: 120px;
-  height: 120px;
-  border: 1px solid #ccc;
-  overflow: hidden;
-}
-.tui-colorpicker-vml-slider {
-  position: relative;
-  width: 120px;
-  height: 120px;
-  border: 1px solid #ccc;
-  overflow: hidden;
-}
-.tui-colorpicker-vml-slider-bg {
-  position: absolute;
-  margin: -1px 0 0 -1px;
-  top: 0;
-  left: 0;
-  width: 122px;
-  height: 122px;
-}
-.tui-colorpicker-svg-huebar {
-  float: right;
-  width: 18px;
-  height: 120px;
-  border: 1px solid #ccc;
-  overflow: visible;
-}
-.tui-colorpicker-vml-huebar {
-  width: 32px;
-  position: relative;
-}
-.tui-colorpicker-vml-huebar-bg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 18px;
-  height: 121px;
-}

gradio/static/css/vendor/tui-image-editor.css

@@ -1,940 +0,0 @@
-/*!
- * tui-image-editor.js
- * @version 3.5.2
- * @author NHNEnt FE Development Lab <dl_javascript@nhnent.com>
- * @license MIT
- */
-body > textarea {
-  position: fixed !important;
-}
-.tui-image-editor-container {
-  marign: 0;
-  padding: 0;
-  box-sizing: border-box;
-  min-height: 300px;
-  height: 100%;
-  position: relative;
-  background-color: #282828;
-  overflow: hidden;
-  letter-spacing: 0.3px;
-}
-.tui-image-editor-container div,
-.tui-image-editor-container ul,
-.tui-image-editor-container label,
-.tui-image-editor-container input,
-.tui-image-editor-container li {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  -ms-user-select: none;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.tui-image-editor-container .tui-image-editor-header {
-/* BUTTON AND LOGO */
-  min-width: 533px;
-  position: absolute;
-  background-color: #151515;
-  top: 0;
-  width: 100%;
-}
-.tui-image-editor-container .tui-image-editor-header-buttons,
-.tui-image-editor-container .tui-image-editor-controls-buttons {
-  float: right;
-  margin: 8px;
-}
-.tui-image-editor-container .tui-image-editor-header-logo,
-.tui-image-editor-container .tui-image-editor-controls-logo {
-  float: left;
-  width: 30%;
-  padding: 17px;
-}
-.tui-image-editor-container .tui-image-editor-controls-logo,
-.tui-image-editor-container .tui-image-editor-controls-buttons {
-  width: 270px;
-  height: 100%;
-  display: none;
-}
-.tui-image-editor-container .tui-image-editor-header-buttons button,
-.tui-image-editor-container .tui-image-editor-header-buttons div,
-.tui-image-editor-container .tui-image-editor-controls-buttons button {
-  display: inline-block;
-  position: relative;
-  width: 120px;
-  height: 40px;
-  padding: 0;
-  line-height: 40px;
-  outline: none;
-  border-radius: 20px;
-  border: 1px solid #ddd;
-  font-family: 'Noto Sans', sans-serif;
-  font-size: 12px;
-  font-weight: bold;
-  cursor: pointer;
-  vertical-align: middle;
-  letter-spacing: 0.3px;
-  text-align: center;
-}
-.tui-image-editor-container .tui-image-editor-download-btn {
-  background-color: #fdba3b;
-  border-color: #fdba3b;
-  color: #fff;
-}
-.tui-image-editor-container .tui-image-editor-load-btn {
-  position: absolute;
-  left: 0;
-  right: 0;
-  display: inline-block;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  cursor: pointer;
-  opacity: 0;
-}
-.tui-image-editor-container .tui-image-editor-main-container {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  bottom: 64px;
-}
-.tui-image-editor-container .tui-image-editor-main {
-  position: absolute;
-  text-align: center;
-  top: 64px;
-  bottom: 0;
-  right: 0;
-  left: 0;
-}
-.tui-image-editor-container .tui-image-editor-wrap {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  overflow: auto;
-}
-.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap {
-  display: table;
-  width: 100%;
-  height: 100%;
-}
-.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap {
-  display: table-cell;
-  vertical-align: middle;
-}
-.tui-image-editor-container .tui-image-editor {
-  position: relative;
-  display: inline-block;
-}
-.tui-image-editor-container .tui-image-editor-menu {
-  width: auto;
-  list-style: none;
-  padding: 0;
-  margin: 0 auto;
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item {
-  position: relative;
-  display: inline-block;
-  border-radius: 2px;
-  padding: 7px 8px 3px 8px;
-  cursor: pointer;
-  margin: 0 4px;
-}
-.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[title]:hover:before {
-  content: '';
-  position: absolute;
-  display: inline-block;
-  margin: 0 auto 0;
-  width: 0;
-  height: 0;
-  border-right: 7px solid transparent;
-  border-top: 7px solid #2f2f2f;
-  border-left: 7px solid transparent;
-  position: absolute;
-  left: 13px;
-  top: -2px;
-}
-.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[title]:hover:after {
-  content: attr(title);
-  position: absolute;
-  display: inline-block;
-  background-color: #2f2f2f;
-  color: #fff;
-  padding: 5px 8px;
-  font-size: 11px;
-  font-weight: lighter;
-  border-radius: 3px;
-  max-height: 23px;
-  top: -22px;
-  left: 0;
-  min-width: 24px;
-}
-.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active {
-  background-color: #fff;
-  transition: all 0.3s ease;
-}
-.tui-image-editor-container .tui-image-editor-wrap {
-  position: absolute;
-}
-.tui-image-editor-container .tui-image-editor-grid-visual {
-  display: none;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: 1px solid rgba(255,255,255,0.7);
-}
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor {
-  transition: none;
-}
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual {
-  display: block;
-}
-.tui-image-editor-container .tui-image-editor-grid-visual table {
-  width: 100%;
-  height: 100%;
-  border-collapse: collapse;
-}
-.tui-image-editor-container .tui-image-editor-grid-visual table td {
-  border: 1px solid rgba(255,255,255,0.3);
-}
-.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before {
-  content: '';
-  position: absolute;
-  box-sizing: border-box;
-  width: 10px;
-  height: 10px;
-  border: 0;
-  box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
-  border-radius: 100%;
-  background-color: #fff;
-}
-.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before {
-  top: -5px;
-  left: -5px;
-}
-.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before {
-  top: -5px;
-  right: -5px;
-}
-.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before {
-  bottom: -5px;
-  left: -5px;
-}
-.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before {
-  bottom: -5px;
-  right: -5px;
-}
-.tui-image-editor-container .tui-image-editor-submenu {
-  display: none;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 150px;
-  white-space: nowrap;
-  z-index: 2;
-}
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active {
-  display: block;
-}
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li {
-  display: inline-block;
-  vertical-align: top;
-}
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {
-  display: block;
-  margin-top: 0;
-}
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  font-weight: normal;
-  font-size: 11px;
-  margin: 0 9px 0 9px;
-}
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset {
-  margin: 0 9px 20px 5px;
-}
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label {
-  display: inline-block;
-  cursor: pointer;
-  padding-top: 5px;
-  font-family: "Noto Sans", sans-serif;
-  font-size: 11px;
-}
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label {
-  vertical-align: 7px;
-}
-.tui-image-editor-container .tui-image-editor-submenu > div {
-  display: none;
-  vertical-align: bottom;
-}
-.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style {
-  opacity: 0.95;
-  z-index: -1;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: block;
-}
-.tui-image-editor-container .tui-image-editor-partition > div {
-  width: 1px;
-  height: 52px;
-  border-left: 1px solid #3c3c3c;
-  margin: 0 8px 0 8px;
-}
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div {
-  height: 108px;
-  margin: 0 29px 0 0px;
-}
-.tui-image-editor-container .tui-image-editor-submenu-align {
-  text-align: left;
-  margin-right: 30px;
-}
-.tui-image-editor-container .tui-image-editor-submenu-align label {
-  width: 55px;
-  white-space: nowrap;
-}
-.tui-image-editor-container .tui-image-editor-submenu-align:first-child {
-  margin-right: 0;
-}
-.tui-image-editor-container .tui-image-editor-submenu-align:first-child label {
-  width: 70px;
-}
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter {
-  display: table-cell;
-}
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,
-.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu {
-  display: table;
-}
-.tui-image-editor-container .filter-color-item {
-  display: inline-block;
-}
-.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {
-  display: block;
-}
-.tui-image-editor-container .tui-image-editor-checkbox-wrap {
-  display: inline-block !important;
-  text-align: left;
-}
-.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width {
-  width: 187px;
-  white-space: normal;
-}
-.tui-image-editor-container .tui-image-editor-checkbox {
-  display: inline-block;
-  margin: 1px 0 1px 0;
-}
-.tui-image-editor-container .tui-image-editor-checkbox input {
-  width: 14px;
-  height: 14px;
-  opacity: 0;
-}
-.tui-image-editor-container .tui-image-editor-checkbox input + label {
-  color: #fff;
-  height: 14px;
-  position: relative;
-}
-.tui-image-editor-container .tui-image-editor-checkbox input + label:before {
-  content: '';
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  background-color: #fff;
-  top: 6px;
-  left: -19px;
-  display: inline-block;
-  margin: 0;
-  text-align: center;
-  font-size: 11px;
-  border: 0;
-  border-radius: 2px;
-  padding-top: 1px;
-  box-sizing: border-box;
-}
-.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + label:before {
-  background-size: cover;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==");
-}
-.tui-image-editor-container .tui-image-editor-selectlist-wrap {
-  position: relative;
-}
-.tui-image-editor-container .tui-image-editor-selectlist-wrap select {
-  width: 100%;
-  height: 28px;
-  margin-top: 4px;
-  border: 0;
-  outline: 0;
-  border-radius: 0;
-  border: 1px solid #cbdbdb;
-  background-color: #fff;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  padding: 0 7px 0 10px;
-}
-.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist {
-  display: none;
-  position: relative;
-  top: -1px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-  border-top: 0px;
-  padding: 4px 0;
-}
-.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li {
-  display: block;
-  text-align: left;
-  padding: 7px 10px;
-  font-family: 'Noto Sans', sans-serif;
-}
-.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover {
-  background-color: rgba(81,92,230,0.05);
-}
-.tui-image-editor-container .tui-image-editor-selectlist-wrap:before {
-  content: '';
-  position: absolute;
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  right: 5px;
-  top: 10px;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=");
-  background-size: cover;
-}
-.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand {
-  display: none;
-}
-.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,
-.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled,
-.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled {
-  backbround-color: #f00;
-}
-.tui-image-editor-container .tui-image-editor-range {
-  position: relative;
-  top: 5px;
-  width: 166px;
-  height: 17px;
-  display: inline-block;
-}
-.tui-image-editor-container .tui-image-editor-virtual-range-bar {
-  top: 7px;
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background-color: #666;
-}
-.tui-image-editor-container .tui-image-editor-virtual-range-subbar {
-  position: absolute;
-  height: 100%;
-  left: 0;
-  right: 0;
-  background-color: #d1d1d1;
-}
-.tui-image-editor-container .tui-image-editor-virtual-range-pointer {
-  position: absolute;
-  cursor: pointer;
-  top: -5px;
-  left: 0;
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  border-radius: 100%;
-}
-.tui-image-editor-container .tui-image-editor-range-wrap {
-  display: inline-block;
-  margin-left: 4px;
-}
-.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range {
-  width: 100px;
-}
-.tui-image-editor-container .color-picker-control .tui-image-editor-range {
-  width: 108px;
-  margin-left: 10px;
-}
-.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer {
-  background-color: #333;
-}
-.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar {
-  background-color: #ccc;
-}
-.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar {
-  background-color: #606060;
-}
-.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short {
-  margin-top: -2px;
-  margin-left: 19px;
-}
-.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label {
-  color: #8e8e8e;
-  font-weight: normal;
-}
-.tui-image-editor-container .tui-image-editor-range-wrap label {
-  vertical-align: baseline;
-  font-size: 11px;
-  margin-right: 7px;
-  color: #fff;
-}
-.tui-image-editor-container .tui-image-editor-range-value {
-  cursor: default;
-  width: 40px;
-  height: 24px;
-  outline: none;
-  border-radius: 2px;
-  box-shadow: none;
-  border: 1px solid #d5d5d5;
-  text-align: center;
-  background-color: #1c1c1c;
-  color: #fff;
-  font-weight: lighter;
-  vertical-align: baseline;
-  font-family: 'Noto Sans', sans-serif;
-  margin-top: 21px;
-  margin-left: 4px;
-}
-.tui-image-editor-container .tui-image-editor-controls {
-  position: absolute;
-  background-color: #151515;
-  width: 100%;
-  height: 64px;
-  display: table;
-  bottom: 0;
-  z-index: 2;
-}
-.tui-image-editor-container .tui-image-editor-icpartition {
-  display: inline-block;
-  background-color: #282828;
-  width: 1px;
-  height: 24px;
-}
-.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[title]:before {
-  left: 28px;
-  top: 11px;
-  border-right: 7px solid #2f2f2f;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-}
-.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[title]:after {
-  top: 7px;
-  left: 39px;
-  white-space: nowrap;
-}
-.tui-image-editor-container.left .tui-image-editor-submenu {
-  left: 0;
-  height: 100%;
-  width: 248px;
-}
-.tui-image-editor-container.left .tui-image-editor-main-container {
-  left: 64px;
-  width: calc(100% - 64px);
-  height: 100%;
-}
-.tui-image-editor-container.left .tui-image-editor-controls {
-  width: 64px;
-  height: 100%;
-  display: table;
-}
-.tui-image-editor-container.left .tui-image-editor-menu,
-.tui-image-editor-container.right .tui-image-editor-menu {
-  white-space: inherit;
-}
-.tui-image-editor-container.left .tui-image-editor-submenu,
-.tui-image-editor-container.right .tui-image-editor-submenu {
-  white-space: normal;
-}
-.tui-image-editor-container.left .tui-image-editor-submenu > div,
-.tui-image-editor-container.right .tui-image-editor-submenu > div {
-  vertical-align: middle;
-}
-.tui-image-editor-container.left .tui-image-editor-controls li,
-.tui-image-editor-container.right .tui-image-editor-controls li {
-  display: inline-block;
-  margin: 4px auto;
-}
-.tui-image-editor-container.left .tui-image-editor-icpartition,
-.tui-image-editor-container.right .tui-image-editor-icpartition {
-  position: relative;
-  top: -7px;
-  width: 24px;
-  height: 1px;
-}
-.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,
-.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition {
-  display: block;
-  width: 75%;
-  margin: auto;
-}
-.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,
-.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {
-  border-left: 0;
-  height: 10px;
-  border-bottom: 1px solid #3c3c3c;
-  width: 100%;
-  margin: 0;
-}
-.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,
-.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align {
-  margin-right: 0;
-}
-.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,
-.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li {
-  margin-top: 15px;
-}
-.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,
-.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li {
-  margin-top: 0;
-}
-.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,
-.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width {
-  width: 182px;
-  white-space: normal;
-}
-.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,
-.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range {
-  display: block;
-  text-align: left;
-  width: 75%;
-  margin: auto;
-}
-.tui-image-editor-container.left .tui-image-editor-range,
-.tui-image-editor-container.right .tui-image-editor-range {
-  width: 136px;
-}
-.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[title]:before {
-  left: -3px;
-  top: 11px;
-  border-left: 7px solid #2f2f2f;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-}
-.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[title]:after {
-  top: 7px;
-  left: -44px;
-  white-space: nowrap;
-}
-.tui-image-editor-container.right .tui-image-editor-submenu {
-  right: 0;
-  height: 100%;
-  width: 248px;
-}
-.tui-image-editor-container.right .tui-image-editor-main-container {
-  right: 64px;
-  width: calc(100% - 64px);
-  height: 100%;
-}
-.tui-image-editor-container.right .tui-image-editor-controls {
-  right: 0;
-  width: 64px;
-  height: 100%;
-  display: table;
-}
-.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,
-.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right {
-  display: none;
-}
-.tui-image-editor-container.bottom .tui-image-editor-submenu > div {
-  padding-bottom: 24px;
-}
-.tui-image-editor-container.top .color-picker-control .triangle {
-  top: -8px;
-  border-right: 7px solid transparent;
-  border-top: 0px;
-  border-left: 7px solid transparent;
-  border-bottom: 8px solid #fff;
-}
-.tui-image-editor-container.top .tui-image-editor-size-wrap {
-  height: 100%;
-}
-.tui-image-editor-container.top .tui-image-editor-main-container {
-  bottom: 0;
-}
-.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[title]:before {
-  left: 13px;
-  border-top: 0;
-  border-bottom: 7px solid #2f2f2f;
-  top: 33px;
-}
-.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[title]:after {
-  top: 38px;
-}
-.tui-image-editor-container.top .tui-image-editor-submenu {
-  top: 0;
-  bottom: inherit;
-}
-.tui-image-editor-container.top .tui-image-editor-submenu > div {
-  padding-top: 24px;
-  vertical-align: top;
-}
-.tui-image-editor-container.top .tui-image-editor-controls-logo {
-  display: table-cell;
-}
-.tui-image-editor-container.top .tui-image-editor-controls-buttons {
-  display: table-cell;
-}
-.tui-image-editor-container.top .tui-image-editor-main {
-  top: 64px;
-  height: calc(100% - 64px);
-}
-.tui-image-editor-container.top .tui-image-editor-controls {
-  top: 0;
-  bottom: inherit;
-}
-.tui-image-editor-container #tie-icon-add-button .tui-image-editor-button {
-  min-width: 42px;
-}
-.tui-image-editor-container .svg_ic-menu {
-  width: 24px;
-  height: 24px;
-}
-.tui-image-editor-container .svg_ic-submenu {
-  width: 32px;
-  height: 32px;
-}
-.tui-image-editor-container .svg_img-bi {
-  width: 257px;
-  height: 26px;
-}
-.tui-image-editor-container .tui-image-editor-controls svg > use {
-  display: none;
-}
-.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover,
-.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover {
-  display: block;
-}
-.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover {
-  display: none;
-}
-.tui-image-editor-container .tui-image-editor-controls svg > use.normal {
-  display: block;
-}
-.tui-image-editor-container .tui-image-editor-controls .active svg > use.active {
-  display: block;
-}
-.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled {
-  display: block;
-}
-.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal,
-.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal {
-  display: none;
-}
-.tui-image-editor-container .tui-image-editor-controls:hover {
-  z-index: 3;
-}
-.tui-image-editor-container div.tui-colorpicker-clearfix {
-  width: 159px;
-  height: 28px;
-  border: 1px solid #d5d5d5;
-  border-radius: 2px;
-  background-color: #f5f5f5;
-  margin-top: 6px;
-  padding: 4px 7px 4px 7px;
-}
-.tui-image-editor-container .tui-colorpicker-palette-hex {
-  width: 114px;
-  background-color: #f5f5f5;
-  border: 0;
-  font-size: 11px;
-  margin-top: 2px;
-  font-family: 'Noto Sans', sans-serif;
-}
-.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,
-.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {
-  border: 1px solid #ccc;
-}
-.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {
-  background-size: cover;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC");
-}
-.tui-image-editor-container .tui-colorpicker-palette-preview {
-  border-radius: 100%;
-  float: left;
-  width: 17px;
-  height: 17px;
-  border: 0;
-}
-.tui-image-editor-container .color-picker-control {
-  position: absolute;
-  display: none;
-  z-index: 99;
-  width: 192px;
-  background-color: #fff;
-  box-shadow: 0 3px 22px 6px rgba(0,0,0,0.15);
-  padding: 16px;
-  border-radius: 2px;
-}
-.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider {
-  display: none;
-}
-.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button {
-  border: 0;
-  border-radius: 100%;
-  margin: 2px;
-  background-size: cover;
-  font-size: 1px;
-}
-.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff'] {
-  border: 1px solid #ccc;
-}
-.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=''] {
-  border: 1px solid #ccc;
-}
-.tui-image-editor-container .color-picker-control .triangle {
-  width: 0;
-  height: 0;
-  border-right: 7px solid transparent;
-  border-top: 8px solid #fff;
-  border-left: 7px solid transparent;
-  position: absolute;
-  bottom: -8px;
-  left: 84px;
-}
-.tui-image-editor-container .color-picker-control .tui-colorpicker-container,
-.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul,
-.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container {
-  width: 100%;
-  height: auto;
-}
-.tui-image-editor-container .filter-color-item .color-picker-control label {
-  font-color: #333;
-  font-weight: normal;
-  margin-right: 7pxleft;
-}
-.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {
-  margin-top: 0;
-}
-.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before {
-  left: -16px;
-}
-.tui-image-editor-container .color-picker {
-  width: 100%;
-  height: auto;
-}
-.tui-image-editor-container .color-picker-value {
-  width: 32px;
-  height: 32px;
-  border: 0px;
-  border-radius: 100%;
-  margin: auto;
-  margin-bottom: 1px;
-}
-.tui-image-editor-container .color-picker-value.transparent {
-  border: 1px solid #cbcbcb;
-  background-size: cover;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC");
-}
-.tui-image-editor-container .color-picker-value + label {
-  color: #fff;
-}
-.tui-image-editor-container .tui-image-editor-submenu svg > use {
-  display: none;
-}
-.tui-image-editor-container .tui-image-editor-submenu svg > use.normal {
-  display: block;
-}
-#tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] svg > use.active,
-#tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] svg > use.active,
-#tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] svg > use.active,
-#tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] svg > use.active,
-#tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] svg > use.active,
-#tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] svg > use.active,
-#tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] svg > use.active,
-#tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] svg > use.active,
-#tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] svg > use.active {
-  display: block;
-}
-#tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal,
-#tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal {
-  display: none;
-}
-#tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active,
-#tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active {
-  display: block;
-}
-#tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,
-#tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal,
-#tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal {
-  display: none;
-}
-#tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,
-#tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active,
-#tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active {
-  display: block;
-}
-#tie-mask-apply.apply.active .tui-image-editor-button.apply label {
-  color: #fff;
-}
-#tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active {
-  display: block;
-}
-#tie-crop-button .tui-image-editor-button.apply,
-#tie-crop-preset-button .tui-image-editor-button.apply {
-  margin-right: 24px;
-}
-#tie-crop-button .tui-image-editor-button.preset.active svg > use.active,
-#tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active {
-  display: block;
-}
-#tie-crop-button .tui-image-editor-button.apply.active svg > use.active,
-#tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active {
-  display: block;
-}
-#tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal,
-#tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal,
-#tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal {
-  display: none;
-}
-#tie-shape-button.rect .tui-image-editor-button.rect svg > use.active,
-#tie-shape-button.circle .tui-image-editor-button.circle svg > use.active,
-#tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active {
-  display: block;
-}
-#tie-text-effect-button .tui-image-editor-button.active svg > use.active {
-  display: block;
-}
-#tie-text-align-button.left .tui-image-editor-button.left svg > use.active,
-#tie-text-align-button.center .tui-image-editor-button.center svg > use.active,
-#tie-text-align-button.right .tui-image-editor-button.right svg > use.active {
-  display: block;
-}
-#tie-mask-image-file,
-#tie-icon-image-file {
-  opacity: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #008000;
-  cursor: inherit;
-  left: 0;
-  top: 0;
-}
-.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul {
-  text-align: right;
-}
-.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo {
-  display: none;
-}

gradio/static/img/vendor/icon-a.svg

@@ -1,235 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
-        <circle id="a" cx="16" cy="16" r="16"/>
-    </defs><symbol id="icon-a-ic-apply" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path stroke="#434343" d="M4 12.011l5 5L20.011 6"/>
-    </g>
-</symbol><symbol id="icon-a-ic-cancel" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path stroke="#434343" d="M6 6l12 12M18 6L6 18"/>
-    </g>
-</symbol><symbol id="icon-a-ic-color-transparent-w" viewBox="0 0 32 32">
-    
-    <g fill="none" fill-rule="evenodd">
-        <g>
-            <use fill="#FFF" xlink:href="#a"/>
-            <circle cx="16" cy="16" r="15.5" stroke="#D5D5D5"/>
-        </g>
-        <path stroke="#FF4040" stroke-width="1.5" d="M27 5L5 27"/>
-    </g>
-</symbol><symbol id="icon-a-ic-crop" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#434343" d="M4 0h1v20a1 1 0 0 1-1-1V0zM20 17h-1V5h1v12zm0 2v5h-1v-5h1z"/>
-        <path fill="#434343" d="M5 19h19v1H5zM4.762 4v1H0V4h4.762zM7 4h12a1 1 0 0 1 1 1H7V4z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-delete-all" viewBox="0 0 24 24">
-    <g fill="#434343" fill-rule="evenodd">
-        <path d="M5 23H3a1 1 0 0 1-1-1V6h1v16h2v1zm16-10h-1V6h1v7zM9 13H8v-3h1v3zm3 0h-1v-3h1v3zm3 0h-1v-3h1v3zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z"/>
-        <path d="M0 3h23v1H0zM11.286 21H8.714L8 23H7l1-2.8V20h.071L9.5 16h1l1.429 4H12v.2l1 2.8h-1l-.714-2zm-.357-1L10 17.4 9.071 20h1.858zM20 22h3v1h-4v-7h1v6zm-5 0h3v1h-4v-7h1v6z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-delete" viewBox="0 0 24 24">
-    <g fill="#434343" fill-rule="evenodd">
-        <path d="M3 6v16h17V6h1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6h1zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z"/>
-        <path d="M0 3h23v1H0zM8 10h1v6H8v-6zm3 0h1v6h-1v-6zm3 0h1v6h-1v-6z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-draw-free" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" d="M2.5 20.929C2.594 10.976 4.323 6 7.686 6c5.872 0 2.524 19 7.697 19s1.89-14.929 6.414-14.929 1.357 10.858 5.13 10.858c1.802 0 2.657-2.262 2.566-6.786"/>
-    </g>
-</symbol><symbol id="icon-a-ic-draw-line" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" d="M2 15.5h28"/>
-    </g>
-</symbol><symbol id="icon-a-ic-draw" viewBox="0 0 24 24">
-    <g fill="none">
-        <path stroke="#434343" d="M2.5 21.5H5c.245 0 .48-.058.691-.168l.124-.065.14.01c.429.028.85-.127 1.16-.437L22.55 5.405a.5.5 0 0 0 0-.707l-3.246-3.245a.5.5 0 0 0-.707 0L3.162 16.888a1.495 1.495 0 0 0-.437 1.155l.01.14-.065.123c-.111.212-.17.448-.17.694v2.5z"/>
-        <path fill="#434343" d="M16.414 3.707l3.89 3.89-.708.706-3.889-3.889z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-filter" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#434343" d="M12 7v1H2V7h10zm6 0h4v1h-4V7zM12 16v1h10v-1H12zm-6 0H2v1h4v-1z"/>
-        <path fill="#434343" d="M8.5 20a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM15.5 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-flip-reset" viewBox="0 0 31 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M31 0H0v32h31z"/>
-        <path fill="#434343" d="M28 16a8 8 0 0 1-8 8H3v-1h1v-7H3a8 8 0 0 1 8-8h17v1h-1v7h1zM11 9a7 7 0 0 0-7 7v7h16a7 7 0 0 0 7-7V9H11z"/>
-        <path stroke="#434343" stroke-linecap="square" d="M24 5l3.5 3.5L24 12M7 20l-3.5 3.5L7 27"/>
-    </g>
-</symbol><symbol id="icon-a-ic-flip-x" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M32 32H0V0h32z"/>
-        <path fill="#434343" d="M17 32h-1V0h1zM27.167 11l.5 3h-1.03l-.546-3h1.076zm-.5-3h-1.122L25 5h-5V4h5.153a1 1 0 0 1 .986.836L26.667 8zm1.5 9l.5 3h-.94l-.545-3h.985zm1 6l.639 3.836A1 1 0 0 1 28.819 28H26v-1h3l-.726-4h.894zM23 28h-3v-1h3v1zM13 4v1H7L3 27h10v1H3.18a1 1 0 0 1-.986-1.164l3.666-22A1 1 0 0 1 6.847 4H13z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-flip-y" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0v32h32V0z"/>
-        <path fill="#434343" d="M0 16v1h32v-1zM11 27.167l3 .5v-1.03l-3-.546v1.076zm-3-.5v-1.122L5 25v-5H4v5.153a1 1 0 0 0 .836.986L8 26.667zm9 1.5l3 .5v-.94l-3-.545v.985zm6 1l3.836.639A1 1 0 0 0 28 28.82V26h-1v3l-4-.727v.894zM28 23v-3h-1v3h1zM4 13h1V7l22-4v10h1V3.18a1 1 0 0 0-1.164-.986l-22 3.667A1 1 0 0 0 4 6.847V13z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-flip" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#434343" d="M11 0h1v24h-1zM19 21v-1h2v-2h1v2a1 1 0 0 1-1 1h-2zm-2 0h-3v-1h3v1zm5-5h-1v-3h1v3zm0-5h-1V8h1v3zm0-5h-1V4h-2V3h2a1 1 0 0 1 1 1v2zm-5-3v1h-3V3h3zM9 3v1H2v16h7v1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-arrow-2" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" stroke-linecap="round" stroke-linejoin="round" d="M21.793 18.5H2.5v-5h18.935l-7.6-8h5.872l10.5 10.5-10.5 10.5h-5.914l8-8z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-arrow-3" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" stroke-linecap="round" stroke-linejoin="round" d="M25.288 16.42L14.208 27.5H6.792l11.291-11.291L6.826 4.5h7.381l11.661 11.661-.58.258z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-arrow" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" d="M2.5 11.5v9h18v5.293L30.293 16 20.5 6.207V11.5h-18z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-bubble" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" stroke-linecap="round" stroke-linejoin="round" d="M22.207 24.5L16.5 30.207V24.5H8A6.5 6.5 0 0 1 1.5 18V9A6.5 6.5 0 0 1 8 2.5h16A6.5 6.5 0 0 1 30.5 9v9a6.5 6.5 0 0 1-6.5 6.5h-1.793z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-heart" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill-rule="nonzero" stroke="#434343" d="M15.996 30.675l1.981-1.79c7.898-7.177 10.365-9.718 12.135-13.012.922-1.716 1.377-3.37 1.377-5.076 0-4.65-3.647-8.297-8.297-8.297-2.33 0-4.86 1.527-6.817 3.824l-.38.447-.381-.447C13.658 4.027 11.126 2.5 8.797 2.5 4.147 2.5.5 6.147.5 10.797c0 1.714.46 3.375 1.389 5.098 1.775 3.288 4.26 5.843 12.123 12.974l1.984 1.806z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-load" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" stroke-linecap="round" stroke-linejoin="round" d="M17.314 18.867l1.951-2.53 4 5.184h-17l6.5-8.84 4.549 6.186z"/>
-        <path fill="#434343" d="M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01z"/>
-        <path fill="#434343" d="M25 3h1v9h-1z"/>
-        <path stroke="#434343" d="M22 6l3.5-3.5L29 6"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-location" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <g stroke="#434343">
-            <path d="M16 31.28C23.675 23.302 27.5 17.181 27.5 13c0-6.351-5.149-11.5-11.5-11.5S4.5 6.649 4.5 13c0 4.181 3.825 10.302 11.5 18.28z"/>
-            <circle cx="16" cy="13" r="4.5"/>
-        </g>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-polygon" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" d="M.576 16L8.29 29.5h15.42L31.424 16 23.71 2.5H8.29L.576 16z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-star-2" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" d="M19.446 31.592l2.265-3.272 3.946.25.636-3.94 3.665-1.505-1.12-3.832 2.655-2.962-2.656-2.962 1.12-3.832-3.664-1.505-.636-3.941-3.946.25-2.265-3.271L16 3.024 12.554 1.07 10.289 4.34l-3.946-.25-.636 3.941-3.665 1.505 1.12 3.832L.508 16.33l2.656 2.962-1.12 3.832 3.664 1.504.636 3.942 3.946-.25 2.265 3.27L16 29.638l3.446 1.955z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon-star" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" d="M25.292 29.878l-1.775-10.346 7.517-7.327-10.388-1.51L16 1.282l-4.646 9.413-10.388 1.51 7.517 7.327-1.775 10.346L16 24.993l9.292 4.885z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-icon" viewBox="0 0 24 24">
-    <g fill="none">
-        <path stroke="#434343" stroke-linecap="round" stroke-linejoin="round" d="M11.923 19.136L5.424 22l.715-7.065-4.731-5.296 6.94-1.503L11.923 2l3.574 6.136 6.94 1.503-4.731 5.296L18.42 22z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-mask-load" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#434343" d="M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01zM15 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-1a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/>
-        <path fill="#434343" d="M25 3h1v9h-1z"/>
-        <path stroke="#434343" d="M22 6l3.5-3.5L29 6"/>
-    </g>
-</symbol><symbol id="icon-a-ic-mask" viewBox="0 0 24 24">
-    <g fill="none">
-        <circle cx="12" cy="12" r="4.5" stroke="#434343"/>
-        <path fill="#434343" d="M2 1h20a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1v20h20V2H2z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-redo" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z" opacity=".5"/>
-        <path fill="#434343" d="M21 6H9a6 6 0 1 0 0 12h12v1H9A7 7 0 0 1 9 5h12v1z"/>
-        <path stroke="#434343" stroke-linecap="square" d="M19 3l2.5 2.5L19 8"/>
-    </g>
-</symbol><symbol id="icon-a-ic-reset" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z" opacity=".5"/>
-        <path fill="#434343" d="M2 13v-1a7 7 0 0 1 7-7h13v1h-1v5h1v1a7 7 0 0 1-7 7H2v-1h1v-5H2zm7-7a6 6 0 0 0-6 6v6h12a6 6 0 0 0 6-6V6H9z"/>
-        <path stroke="#434343" stroke-linecap="square" d="M19 3l2.5 2.5L19 8M5 16l-2.5 2.5L5 21"/>
-    </g>
-</symbol><symbol id="icon-a-ic-rotate-clockwise" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#434343" d="M29 17h-.924c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C4.076 10.398 9.407 5.041 16 5V4C8.82 4 3 9.82 3 17s5.82 13 13 13 13-5.82 13-13z"/>
-        <path stroke="#434343" stroke-linecap="square" d="M16 1.5l4 3-4 3"/>
-        <path fill="#434343" fill-rule="nonzero" d="M16 4h4v1h-4z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-rotate-counterclockwise" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#434343" d="M3 17h.924c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.602-5.331-11.96-11.924-12V4c7.18 0 13 5.82 13 13s-5.82 13-13 13S3 24.18 3 17z"/>
-        <path fill="#434343" fill-rule="nonzero" d="M12 4h4v1h-4z"/>
-        <path stroke="#434343" stroke-linecap="square" d="M16 1.5l-4 3 4 3"/>
-    </g>
-</symbol><symbol id="icon-a-ic-rotate" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#434343" d="M8.349 22.254a10.002 10.002 0 0 1-2.778-1.719l.65-.76a9.002 9.002 0 0 0 2.495 1.548l-.367.931zm2.873.704l.078-.997a9 9 0 1 0-.557-17.852l-.14-.99A10.076 10.076 0 0 1 12.145 3c5.523 0 10 4.477 10 10s-4.477 10-10 10c-.312 0-.62-.014-.924-.042zm-7.556-4.655a9.942 9.942 0 0 1-1.253-2.996l.973-.234a8.948 8.948 0 0 0 1.124 2.693l-.844.537zm-1.502-5.91A9.949 9.949 0 0 1 2.88 9.23l.925.382a8.954 8.954 0 0 0-.644 2.844l-.998-.062zm2.21-5.686c.687-.848 1.51-1.58 2.436-2.166l.523.852a9.048 9.048 0 0 0-2.188 1.95l-.771-.636z"/>
-        <path stroke="#434343" stroke-linecap="square" d="M13 1l-2.5 2.5L13 6"/>
-    </g>
-</symbol><symbol id="icon-a-ic-shape-circle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="16" cy="16" r="14.5" stroke="#434343"/>
-    </g>
-</symbol><symbol id="icon-a-ic-shape-rectangle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <rect width="27" height="27" x="2.5" y="2.5" stroke="#434343" rx="1"/>
-    </g>
-</symbol><symbol id="icon-a-ic-shape-triangle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#434343" stroke-linecap="round" stroke-linejoin="round" d="M16 2.5l15.5 27H.5z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-shape" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#434343" d="M14.706 8H21a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-4h1v4h12V9h-5.706l-.588-1z"/>
-        <path stroke="#434343" stroke-linecap="round" stroke-linejoin="round" d="M8.5 1.5l7.5 13H1z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-text-align-center" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#434343" d="M2 5h28v1H2zM8 12h16v1H8zM2 19h28v1H2zM8 26h16v1H8z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-text-align-left" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#434343" d="M2 5h28v1H2zM2 12h16v1H2zM2 19h28v1H2zM2 26h16v1H2z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-text-align-right" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#434343" d="M2 5h28v1H2zM14 12h16v1H14zM2 19h28v1H2zM14 26h16v1H14z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-text-bold" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#434343" d="M7 2h2v2H7zM7 28h2v2H7z"/>
-        <path stroke="#434343" stroke-width="2" d="M9 3v12h9a6 6 0 1 0 0-12H9zM9 15v14h10a7 7 0 0 0 0-14H9z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-text-italic" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#434343" d="M15 2h5v1h-5zM11 29h5v1h-5zM17 3h1l-4 26h-1z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-text-underline" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#434343" d="M8 2v14a8 8 0 1 0 16 0V2h1v14a9 9 0 0 1-18 0V2h1zM3 29h26v1H3z"/>
-        <path fill="#434343" d="M5 2h5v1H5zM22 2h5v1h-5z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-text" viewBox="0 0 24 24">
-    <g fill="#434343" fill-rule="evenodd">
-        <path d="M4 3h15a1 1 0 0 1 1 1H3a1 1 0 0 1 1-1zM3 4h1v1H3zM19 4h1v1h-1z"/>
-        <path d="M11 3h1v18h-1z"/>
-        <path d="M10 20h3v1h-3z"/>
-    </g>
-</symbol><symbol id="icon-a-ic-undo" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M24 0H0v24h24z" opacity=".5"/>
-        <path fill="#434343" d="M3 6h12a6 6 0 1 1 0 12H3v1h12a7 7 0 0 0 0-14H3v1z"/>
-        <path stroke="#434343" stroke-linecap="square" d="M5 3L2.5 5.5 5 8"/>
-    </g>
-</symbol><symbol id="icon-a-img-bi" viewBox="0 0 257 26">
-    <g fill="#FDBA3B">
-        <path d="M26 5a8.001 8.001 0 0 0 0 16 8.001 8.001 0 0 0 0-16M51.893 19.812L43.676 5.396A.78.78 0 0 0 43 5a.78.78 0 0 0-.677.396l-8.218 14.418a.787.787 0 0 0 0 .792c.14.244.396.394.676.394h16.436c.28 0 .539-.15.678-.396a.796.796 0 0 0-.002-.792M15.767 5.231A.79.79 0 0 0 15.21 5H.791A.791.791 0 0 0 0 5.79v6.42a.793.793 0 0 0 .791.79h3.21v7.21c.001.21.082.408.234.56.147.148.347.23.558.23h6.416a.788.788 0 0 0 .792-.79V13h3.006c.413 0 .611-.082.762-.232.15-.149.23-.35.231-.559V5.791a.787.787 0 0 0-.233-.56M85.767 5.231A.79.79 0 0 0 85.21 5H70.791a.791.791 0 0 0-.791.79v6.42a.793.793 0 0 0 .791.79h3.21v7.21c.001.21.082.408.234.56.147.148.347.23.558.23h6.416a.788.788 0 0 0 .792-.79V13h3.006c.413 0 .611-.082.762-.232.15-.149.23-.35.231-.559V5.791a.787.787 0 0 0-.233-.56M65.942 9.948l2.17-3.76a.78.78 0 0 0 0-.792.791.791 0 0 0-.684-.396h-8.54A5.889 5.889 0 0 0 53 10.86a5.887 5.887 0 0 0 3.07 5.17l-2.184 3.782A.792.792 0 0 0 54.571 21h8.54a5.89 5.89 0 0 0 2.831-11.052M105.7 21h2.3V5h-2.3zM91 5h2.4v10.286c0 1.893 1.612 3.429 3.6 3.429s3.6-1.536 3.6-3.429V5h2.4v10.286c0 3.156-2.686 5.714-6 5.714-3.313 0-6-2.558-6-5.714V5zM252.148 21.128h-2.377V9.659h2.27v1.64c.69-1.299 1.792-1.938 3.304-1.938.497 0 .95.065 1.382.192l-.215 2.277a3.734 3.734 0 0 0-1.275-.213c-1.814 0-3.089 1.234-3.089 3.638v5.873zm-7.095-5.744a3.734 3.734 0 0 0-1.101-2.703c-.714-.766-1.6-1.149-2.658-1.149-1.058 0-1.944.383-2.679 1.149a3.803 3.803 0 0 0-1.08 2.703c0 1.063.368 1.978 1.08 2.722.735.746 1.62 1.128 2.68 1.128 1.058 0 1.943-.382 2.657-1.128.734-.744 1.101-1.659 1.101-2.722zm-9.916 0c0-1.682.583-3.086 1.729-4.256 1.166-1.17 2.635-1.767 4.428-1.767 1.793 0 3.262.597 4.407 1.767 1.167 1.17 1.75 2.574 1.75 4.256 0 1.7-.583 3.127-1.75 4.297-1.145 1.17-2.614 1.745-4.407 1.745-1.793 0-3.262-.575-4.428-1.745-1.146-1.17-1.729-2.596-1.729-4.297zm-1.5 3.233l.821 1.83c-.864.638-1.944.958-3.22.958-2.526 0-3.822-1.554-3.822-4.383V11.66h-2.01v-2h2.031V5.595h2.355v4.063h4.018v2h-4.018v5.405c0 1.469.605 2.191 1.793 2.191.626 0 1.318-.212 2.052-.638zm-12.43 2.51h2.375V9.66h-2.376v11.469zm1.23-12.977c-.929 0-1.642-.682-1.642-1.596 0-.873.713-1.554 1.643-1.554.885 0 1.576.681 1.576 1.554 0 .914-.69 1.596-1.576 1.596zm-6.49 7.234c0-1.086-.346-1.98-1.037-2.724-.692-.745-1.599-1.128-2.7-1.128-1.102 0-2.01.383-2.7 1.128-.692.744-1.037 1.638-1.037 2.724 0 1.084.345 2.02 1.036 2.766.691.744 1.6 1.105 2.7 1.105 1.102 0 2.01-.361 2.7-1.105.692-.746 1.038-1.682 1.038-2.766zm-.173-4.129V5h2.397v16.128h-2.354v-1.596c-1.015 1.255-2.333 1.873-3.91 1.873-1.663 0-3.068-.575-4.169-1.724-1.102-1.17-1.663-2.596-1.663-4.297 0-1.682.561-3.107 1.663-4.256 1.101-1.17 2.485-1.745 4.148-1.745 1.534 0 2.83.617 3.888 1.872zm-11.48 9.873h-10.218V5.405h10.195v2.318h-7.711V12h7.15v2.32h-7.15v4.489h7.733v2.319zm-23.891-9.724c-1.793 0-3.132 1.192-3.478 2.979h6.783c-.194-1.808-1.555-2.979-3.305-2.979zm5.703 3.766c0 .32-.021.703-.086 1.128h-9.095c.346 1.787 1.62 3 3.867 3 1.318 0 2.916-.49 3.953-1.234l.994 1.724c-1.189.872-3.067 1.595-5.033 1.595-4.364 0-6.243-3-6.243-6.021 0-1.724.54-3.15 1.642-4.277 1.101-1.127 2.548-1.702 4.298-1.702 1.664 0 3.046.511 4.105 1.553 1.058 1.043 1.598 2.447 1.598 4.234zm-19.949 3.894c1.08 0 1.966-.362 2.68-1.085.712-.724 1.058-1.617 1.058-2.703 0-1.084-.346-2-1.059-2.701-.713-.702-1.599-1.064-2.679-1.064-1.058 0-1.944.362-2.656 1.085-.714.702-1.059 1.596-1.059 2.68 0 1.086.345 2 1.059 2.724.712.702 1.598 1.064 2.656 1.064zm3.673-7.936V9.66h2.29v10.299c0 1.85-.584 3.32-1.728 4.404-1.146 1.085-2.68 1.638-4.58 1.638-1.945 0-3.672-.553-5.206-1.638l1.037-1.808c1.296.915 2.679 1.36 4.126 1.36 2.484 0 3.996-1.51 3.996-3.637v-.83c-1.015 1.127-2.311 1.702-3.91 1.702-1.684 0-3.089-.554-4.19-1.68-1.102-1.128-1.642-2.532-1.642-4.214 0-1.68.561-3.085 1.706-4.191 1.145-1.128 2.571-1.681 4.234-1.681 1.534 0 2.83.575 3.867 1.745zm-18.07 8.127c1.102 0 1.988-.382 2.7-1.128.714-.744 1.06-1.659 1.06-2.743 0-1.065-.346-1.98-1.06-2.724-.712-.745-1.598-1.128-2.7-1.128-1.101 0-2.008.383-2.7 1.128-.691.744-1.036 1.66-1.036 2.745 0 1.084.345 2 1.037 2.745.691.744 1.598 1.105 2.7 1.105zm3.652-8V9.66h2.29v11.469h-2.29v-1.575c-1.059 1.234-2.399 1.852-3.976 1.852-1.663 0-3.067-.575-4.168-1.745-1.102-1.17-1.642-2.617-1.642-4.34 0-1.724.54-3.128 1.642-4.256 1.1-1.128 2.505-1.681 4.168-1.681 1.577 0 2.917.617 3.976 1.872zM138.79 9.34c1.404 0 2.527.448 3.37 1.34.863.873 1.295 2.086 1.295 3.596v6.852h-2.376V14.66c0-2.021-1.036-3.128-2.657-3.128-1.727 0-2.915 1.255-2.915 3.192v6.404h-2.377v-6.426c0-1.978-1.037-3.17-2.679-3.17-1.728 0-2.937 1.277-2.937 3.234v6.362h-2.377V9.659h2.333v1.66c.692-1.212 1.988-1.979 3.522-1.979 1.533.021 2.958.767 3.586 2.107.798-1.277 2.419-2.107 4.212-2.107zm-19.517 11.788h2.484V5.405h-2.484v15.723z"/>
-    </g>
-</symbol></svg>

gradio/static/img/vendor/icon-b.svg

@@ -1,224 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs/><symbol id="icon-b-ic-apply" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path stroke="#555555" d="M4 12.011l5 5L20.011 6"/>
-    </g>
-</symbol><symbol id="icon-b-ic-cancel" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path stroke="#555555" d="M6 6l12 12M18 6L6 18"/>
-    </g>
-</symbol><symbol id="icon-b-ic-crop" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#555555" d="M4 0h1v20a1 1 0 0 1-1-1V0zM20 17h-1V5h1v12zm0 2v5h-1v-5h1z"/>
-        <path fill="#555555" d="M5 19h19v1H5zM4.762 4v1H0V4h4.762zM7 4h12a1 1 0 0 1 1 1H7V4z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-delete-all" viewBox="0 0 24 24">
-    <g fill="#555555" fill-rule="evenodd">
-        <path d="M5 23H3a1 1 0 0 1-1-1V6h1v16h2v1zm16-10h-1V6h1v7zM9 13H8v-3h1v3zm3 0h-1v-3h1v3zm3 0h-1v-3h1v3zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z"/>
-        <path d="M0 3h23v1H0zM11.286 21H8.714L8 23H7l1-2.8V20h.071L9.5 16h1l1.429 4H12v.2l1 2.8h-1l-.714-2zm-.357-1L10 17.4 9.071 20h1.858zM20 22h3v1h-4v-7h1v6zm-5 0h3v1h-4v-7h1v6z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-delete" viewBox="0 0 24 24">
-    <g fill="#555555" fill-rule="evenodd">
-        <path d="M3 6v16h17V6h1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6h1zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z"/>
-        <path d="M0 3h23v1H0zM8 10h1v6H8v-6zm3 0h1v6h-1v-6zm3 0h1v6h-1v-6z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-draw-free" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" d="M2.5 20.929C2.594 10.976 4.323 6 7.686 6c5.872 0 2.524 19 7.697 19s1.89-14.929 6.414-14.929 1.357 10.858 5.13 10.858c1.802 0 2.657-2.262 2.566-6.786"/>
-    </g>
-</symbol><symbol id="icon-b-ic-draw-line" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" d="M2 15.5h28"/>
-    </g>
-</symbol><symbol id="icon-b-ic-draw" viewBox="0 0 24 24">
-    <g fill="none">
-        <path stroke="#555555" d="M2.5 21.5H5c.245 0 .48-.058.691-.168l.124-.065.14.01c.429.028.85-.127 1.16-.437L22.55 5.405a.5.5 0 0 0 0-.707l-3.246-3.245a.5.5 0 0 0-.707 0L3.162 16.888a1.495 1.495 0 0 0-.437 1.155l.01.14-.065.123c-.111.212-.17.448-.17.694v2.5z"/>
-        <path fill="#555555" d="M16.414 3.707l3.89 3.89-.708.706-3.889-3.889z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-filter" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#555555" d="M12 7v1H2V7h10zm6 0h4v1h-4V7zM12 16v1h10v-1H12zm-6 0H2v1h4v-1z"/>
-        <path fill="#555555" d="M8.5 20a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM15.5 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-flip-reset" viewBox="0 0 31 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M31 0H0v32h31z"/>
-        <path fill="#555555" d="M28 16a8 8 0 0 1-8 8H3v-1h1v-7H3a8 8 0 0 1 8-8h17v1h-1v7h1zM11 9a7 7 0 0 0-7 7v7h16a7 7 0 0 0 7-7V9H11z"/>
-        <path stroke="#555555" stroke-linecap="square" d="M24 5l3.5 3.5L24 12M7 20l-3.5 3.5L7 27"/>
-    </g>
-</symbol><symbol id="icon-b-ic-flip-x" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M32 32H0V0h32z"/>
-        <path fill="#555555" d="M17 32h-1V0h1zM27.167 11l.5 3h-1.03l-.546-3h1.076zm-.5-3h-1.122L25 5h-5V4h5.153a1 1 0 0 1 .986.836L26.667 8zm1.5 9l.5 3h-.94l-.545-3h.985zm1 6l.639 3.836A1 1 0 0 1 28.819 28H26v-1h3l-.726-4h.894zM23 28h-3v-1h3v1zM13 4v1H7L3 27h10v1H3.18a1 1 0 0 1-.986-1.164l3.666-22A1 1 0 0 1 6.847 4H13z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-flip-y" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0v32h32V0z"/>
-        <path fill="#555555" d="M0 16v1h32v-1zM11 27.167l3 .5v-1.03l-3-.546v1.076zm-3-.5v-1.122L5 25v-5H4v5.153a1 1 0 0 0 .836.986L8 26.667zm9 1.5l3 .5v-.94l-3-.545v.985zm6 1l3.836.639A1 1 0 0 0 28 28.82V26h-1v3l-4-.727v.894zM28 23v-3h-1v3h1zM4 13h1V7l22-4v10h1V3.18a1 1 0 0 0-1.164-.986l-22 3.667A1 1 0 0 0 4 6.847V13z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-flip" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#555555" d="M11 0h1v24h-1zM19 21v-1h2v-2h1v2a1 1 0 0 1-1 1h-2zm-2 0h-3v-1h3v1zm5-5h-1v-3h1v3zm0-5h-1V8h1v3zm0-5h-1V4h-2V3h2a1 1 0 0 1 1 1v2zm-5-3v1h-3V3h3zM9 3v1H2v16h7v1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-arrow-2" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" stroke-linecap="round" stroke-linejoin="round" d="M21.793 18.5H2.5v-5h18.935l-7.6-8h5.872l10.5 10.5-10.5 10.5h-5.914l8-8z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-arrow-3" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" stroke-linecap="round" stroke-linejoin="round" d="M25.288 16.42L14.208 27.5H6.792l11.291-11.291L6.826 4.5h7.381l11.661 11.661-.58.258z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-arrow" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" d="M2.5 11.5v9h18v5.293L30.293 16 20.5 6.207V11.5h-18z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-bubble" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" stroke-linecap="round" stroke-linejoin="round" d="M22.207 24.5L16.5 30.207V24.5H8A6.5 6.5 0 0 1 1.5 18V9A6.5 6.5 0 0 1 8 2.5h16A6.5 6.5 0 0 1 30.5 9v9a6.5 6.5 0 0 1-6.5 6.5h-1.793z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-heart" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill-rule="nonzero" stroke="#555555" d="M15.996 30.675l1.981-1.79c7.898-7.177 10.365-9.718 12.135-13.012.922-1.716 1.377-3.37 1.377-5.076 0-4.65-3.647-8.297-8.297-8.297-2.33 0-4.86 1.527-6.817 3.824l-.38.447-.381-.447C13.658 4.027 11.126 2.5 8.797 2.5 4.147 2.5.5 6.147.5 10.797c0 1.714.46 3.375 1.389 5.098 1.775 3.288 4.26 5.843 12.123 12.974l1.984 1.806z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-load" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" stroke-linecap="round" stroke-linejoin="round" d="M17.314 18.867l1.951-2.53 4 5.184h-17l6.5-8.84 4.549 6.186z"/>
-        <path fill="#555555" d="M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01z"/>
-        <path fill="#555555" d="M25 3h1v9h-1z"/>
-        <path stroke="#555555" d="M22 6l3.5-3.5L29 6"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-location" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <g stroke="#555555">
-            <path d="M16 31.28C23.675 23.302 27.5 17.181 27.5 13c0-6.351-5.149-11.5-11.5-11.5S4.5 6.649 4.5 13c0 4.181 3.825 10.302 11.5 18.28z"/>
-            <circle cx="16" cy="13" r="4.5"/>
-        </g>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-polygon" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" d="M.576 16L8.29 29.5h15.42L31.424 16 23.71 2.5H8.29L.576 16z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-star-2" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" d="M19.446 31.592l2.265-3.272 3.946.25.636-3.94 3.665-1.505-1.12-3.832 2.655-2.962-2.656-2.962 1.12-3.832-3.664-1.505-.636-3.941-3.946.25-2.265-3.271L16 3.024 12.554 1.07 10.289 4.34l-3.946-.25-.636 3.941-3.665 1.505 1.12 3.832L.508 16.33l2.656 2.962-1.12 3.832 3.664 1.504.636 3.942 3.946-.25 2.265 3.27L16 29.638l3.446 1.955z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon-star" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" d="M25.292 29.878l-1.775-10.346 7.517-7.327-10.388-1.51L16 1.282l-4.646 9.413-10.388 1.51 7.517 7.327-1.775 10.346L16 24.993l9.292 4.885z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-icon" viewBox="0 0 24 24">
-    <g fill="none">
-        <path stroke="#555555" stroke-linecap="round" stroke-linejoin="round" d="M11.923 19.136L5.424 22l.715-7.065-4.731-5.296 6.94-1.503L11.923 2l3.574 6.136 6.94 1.503-4.731 5.296L18.42 22z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-mask-load" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#555555" d="M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01zM15 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-1a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/>
-        <path fill="#555555" d="M25 3h1v9h-1z"/>
-        <path stroke="#555555" d="M22 6l3.5-3.5L29 6"/>
-    </g>
-</symbol><symbol id="icon-b-ic-mask" viewBox="0 0 24 24">
-    <g fill="none">
-        <circle cx="12" cy="12" r="4.5" stroke="#555555"/>
-        <path fill="#555555" d="M2 1h20a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1v20h20V2H2z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-redo" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z" opacity=".5"/>
-        <path fill="#555555" d="M21 6H9a6 6 0 1 0 0 12h12v1H9A7 7 0 0 1 9 5h12v1z"/>
-        <path stroke="#555555" stroke-linecap="square" d="M19 3l2.5 2.5L19 8"/>
-    </g>
-</symbol><symbol id="icon-b-ic-reset" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z" opacity=".5"/>
-        <path fill="#555555" d="M2 13v-1a7 7 0 0 1 7-7h13v1h-1v5h1v1a7 7 0 0 1-7 7H2v-1h1v-5H2zm7-7a6 6 0 0 0-6 6v6h12a6 6 0 0 0 6-6V6H9z"/>
-        <path stroke="#555555" stroke-linecap="square" d="M19 3l2.5 2.5L19 8M5 16l-2.5 2.5L5 21"/>
-    </g>
-</symbol><symbol id="icon-b-ic-rotate-clockwise" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#555555" d="M29 17h-.924c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C4.076 10.398 9.407 5.041 16 5V4C8.82 4 3 9.82 3 17s5.82 13 13 13 13-5.82 13-13z"/>
-        <path stroke="#555555" stroke-linecap="square" d="M16 1.5l4 3-4 3"/>
-        <path fill="#555555" fill-rule="nonzero" d="M16 4h4v1h-4z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-rotate-counterclockwise" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#555555" d="M3 17h.924c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.602-5.331-11.96-11.924-12V4c7.18 0 13 5.82 13 13s-5.82 13-13 13S3 24.18 3 17z"/>
-        <path fill="#555555" fill-rule="nonzero" d="M12 4h4v1h-4z"/>
-        <path stroke="#555555" stroke-linecap="square" d="M16 1.5l-4 3 4 3"/>
-    </g>
-</symbol><symbol id="icon-b-ic-rotate" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#555555" d="M8.349 22.254a10.002 10.002 0 0 1-2.778-1.719l.65-.76a9.002 9.002 0 0 0 2.495 1.548l-.367.931zm2.873.704l.078-.997a9 9 0 1 0-.557-17.852l-.14-.99A10.076 10.076 0 0 1 12.145 3c5.523 0 10 4.477 10 10s-4.477 10-10 10c-.312 0-.62-.014-.924-.042zm-7.556-4.655a9.942 9.942 0 0 1-1.253-2.996l.973-.234a8.948 8.948 0 0 0 1.124 2.693l-.844.537zm-1.502-5.91A9.949 9.949 0 0 1 2.88 9.23l.925.382a8.954 8.954 0 0 0-.644 2.844l-.998-.062zm2.21-5.686c.687-.848 1.51-1.58 2.436-2.166l.523.852a9.048 9.048 0 0 0-2.188 1.95l-.771-.636z"/>
-        <path stroke="#555555" stroke-linecap="square" d="M13 1l-2.5 2.5L13 6"/>
-    </g>
-</symbol><symbol id="icon-b-ic-shape-circle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="16" cy="16" r="14.5" stroke="#555555"/>
-    </g>
-</symbol><symbol id="icon-b-ic-shape-rectangle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <rect width="27" height="27" x="2.5" y="2.5" stroke="#555555" rx="1"/>
-    </g>
-</symbol><symbol id="icon-b-ic-shape-triangle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#555555" stroke-linecap="round" stroke-linejoin="round" d="M16 2.5l15.5 27H.5z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-shape" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#555555" d="M14.706 8H21a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-4h1v4h12V9h-5.706l-.588-1z"/>
-        <path stroke="#555555" stroke-linecap="round" stroke-linejoin="round" d="M8.5 1.5l7.5 13H1z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-text-align-center" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#555555" d="M2 5h28v1H2zM8 12h16v1H8zM2 19h28v1H2zM8 26h16v1H8z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-text-align-left" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#555555" d="M2 5h28v1H2zM2 12h16v1H2zM2 19h28v1H2zM2 26h16v1H2z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-text-align-right" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#555555" d="M2 5h28v1H2zM14 12h16v1H14zM2 19h28v1H2zM14 26h16v1H14z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-text-bold" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#555555" d="M7 2h2v2H7zM7 28h2v2H7z"/>
-        <path stroke="#555555" stroke-width="2" d="M9 3v12h9a6 6 0 1 0 0-12H9zM9 15v14h10a7 7 0 0 0 0-14H9z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-text-italic" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#555555" d="M15 2h5v1h-5zM11 29h5v1h-5zM17 3h1l-4 26h-1z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-text-underline" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#555555" d="M8 2v14a8 8 0 1 0 16 0V2h1v14a9 9 0 0 1-18 0V2h1zM3 29h26v1H3z"/>
-        <path fill="#555555" d="M5 2h5v1H5zM22 2h5v1h-5z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-text" viewBox="0 0 24 24">
-    <g fill="#555555" fill-rule="evenodd">
-        <path d="M4 3h15a1 1 0 0 1 1 1H3a1 1 0 0 1 1-1zM3 4h1v1H3zM19 4h1v1h-1z"/>
-        <path d="M11 3h1v18h-1z"/>
-        <path d="M10 20h3v1h-3z"/>
-    </g>
-</symbol><symbol id="icon-b-ic-undo" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M24 0H0v24h24z" opacity=".5"/>
-        <path fill="#555555" d="M3 6h12a6 6 0 1 1 0 12H3v1h12a7 7 0 0 0 0-14H3v1z"/>
-        <path stroke="#555555" stroke-linecap="square" d="M5 3L2.5 5.5 5 8"/>
-    </g>
-</symbol><symbol id="icon-b-img-bi" viewBox="0 0 257 26">
-    <g fill="#FDBA3B">
-        <path d="M26 5a8.001 8.001 0 0 0 0 16 8.001 8.001 0 0 0 0-16M51.893 19.812L43.676 5.396A.78.78 0 0 0 43 5a.78.78 0 0 0-.677.396l-8.218 14.418a.787.787 0 0 0 0 .792c.14.244.396.394.676.394h16.436c.28 0 .539-.15.678-.396a.796.796 0 0 0-.002-.792M15.767 5.231A.79.79 0 0 0 15.21 5H.791A.791.791 0 0 0 0 5.79v6.42a.793.793 0 0 0 .791.79h3.21v7.21c.001.21.082.408.234.56.147.148.347.23.558.23h6.416a.788.788 0 0 0 .792-.79V13h3.006c.413 0 .611-.082.762-.232.15-.149.23-.35.231-.559V5.791a.787.787 0 0 0-.233-.56M85.767 5.231A.79.79 0 0 0 85.21 5H70.791a.791.791 0 0 0-.791.79v6.42a.793.793 0 0 0 .791.79h3.21v7.21c.001.21.082.408.234.56.147.148.347.23.558.23h6.416a.788.788 0 0 0 .792-.79V13h3.006c.413 0 .611-.082.762-.232.15-.149.23-.35.231-.559V5.791a.787.787 0 0 0-.233-.56M65.942 9.948l2.17-3.76a.78.78 0 0 0 0-.792.791.791 0 0 0-.684-.396h-8.54A5.889 5.889 0 0 0 53 10.86a5.887 5.887 0 0 0 3.07 5.17l-2.184 3.782A.792.792 0 0 0 54.571 21h8.54a5.89 5.89 0 0 0 2.831-11.052M105.7 21h2.3V5h-2.3zM91 5h2.4v10.286c0 1.893 1.612 3.429 3.6 3.429s3.6-1.536 3.6-3.429V5h2.4v10.286c0 3.156-2.686 5.714-6 5.714-3.313 0-6-2.558-6-5.714V5zM252.148 21.128h-2.377V9.659h2.27v1.64c.69-1.299 1.792-1.938 3.304-1.938.497 0 .95.065 1.382.192l-.215 2.277a3.734 3.734 0 0 0-1.275-.213c-1.814 0-3.089 1.234-3.089 3.638v5.873zm-7.095-5.744a3.734 3.734 0 0 0-1.101-2.703c-.714-.766-1.6-1.149-2.658-1.149-1.058 0-1.944.383-2.679 1.149a3.803 3.803 0 0 0-1.08 2.703c0 1.063.368 1.978 1.08 2.722.735.746 1.62 1.128 2.68 1.128 1.058 0 1.943-.382 2.657-1.128.734-.744 1.101-1.659 1.101-2.722zm-9.916 0c0-1.682.583-3.086 1.729-4.256 1.166-1.17 2.635-1.767 4.428-1.767 1.793 0 3.262.597 4.407 1.767 1.167 1.17 1.75 2.574 1.75 4.256 0 1.7-.583 3.127-1.75 4.297-1.145 1.17-2.614 1.745-4.407 1.745-1.793 0-3.262-.575-4.428-1.745-1.146-1.17-1.729-2.596-1.729-4.297zm-1.5 3.233l.821 1.83c-.864.638-1.944.958-3.22.958-2.526 0-3.822-1.554-3.822-4.383V11.66h-2.01v-2h2.031V5.595h2.355v4.063h4.018v2h-4.018v5.405c0 1.469.605 2.191 1.793 2.191.626 0 1.318-.212 2.052-.638zm-12.43 2.51h2.375V9.66h-2.376v11.469zm1.23-12.977c-.929 0-1.642-.682-1.642-1.596 0-.873.713-1.554 1.643-1.554.885 0 1.576.681 1.576 1.554 0 .914-.69 1.596-1.576 1.596zm-6.49 7.234c0-1.086-.346-1.98-1.037-2.724-.692-.745-1.599-1.128-2.7-1.128-1.102 0-2.01.383-2.7 1.128-.692.744-1.037 1.638-1.037 2.724 0 1.084.345 2.02 1.036 2.766.691.744 1.6 1.105 2.7 1.105 1.102 0 2.01-.361 2.7-1.105.692-.746 1.038-1.682 1.038-2.766zm-.173-4.129V5h2.397v16.128h-2.354v-1.596c-1.015 1.255-2.333 1.873-3.91 1.873-1.663 0-3.068-.575-4.169-1.724-1.102-1.17-1.663-2.596-1.663-4.297 0-1.682.561-3.107 1.663-4.256 1.101-1.17 2.485-1.745 4.148-1.745 1.534 0 2.83.617 3.888 1.872zm-11.48 9.873h-10.218V5.405h10.195v2.318h-7.711V12h7.15v2.32h-7.15v4.489h7.733v2.319zm-23.891-9.724c-1.793 0-3.132 1.192-3.478 2.979h6.783c-.194-1.808-1.555-2.979-3.305-2.979zm5.703 3.766c0 .32-.021.703-.086 1.128h-9.095c.346 1.787 1.62 3 3.867 3 1.318 0 2.916-.49 3.953-1.234l.994 1.724c-1.189.872-3.067 1.595-5.033 1.595-4.364 0-6.243-3-6.243-6.021 0-1.724.54-3.15 1.642-4.277 1.101-1.127 2.548-1.702 4.298-1.702 1.664 0 3.046.511 4.105 1.553 1.058 1.043 1.598 2.447 1.598 4.234zm-19.949 3.894c1.08 0 1.966-.362 2.68-1.085.712-.724 1.058-1.617 1.058-2.703 0-1.084-.346-2-1.059-2.701-.713-.702-1.599-1.064-2.679-1.064-1.058 0-1.944.362-2.656 1.085-.714.702-1.059 1.596-1.059 2.68 0 1.086.345 2 1.059 2.724.712.702 1.598 1.064 2.656 1.064zm3.673-7.936V9.66h2.29v10.299c0 1.85-.584 3.32-1.728 4.404-1.146 1.085-2.68 1.638-4.58 1.638-1.945 0-3.672-.553-5.206-1.638l1.037-1.808c1.296.915 2.679 1.36 4.126 1.36 2.484 0 3.996-1.51 3.996-3.637v-.83c-1.015 1.127-2.311 1.702-3.91 1.702-1.684 0-3.089-.554-4.19-1.68-1.102-1.128-1.642-2.532-1.642-4.214 0-1.68.561-3.085 1.706-4.191 1.145-1.128 2.571-1.681 4.234-1.681 1.534 0 2.83.575 3.867 1.745zm-18.07 8.127c1.102 0 1.988-.382 2.7-1.128.714-.744 1.06-1.659 1.06-2.743 0-1.065-.346-1.98-1.06-2.724-.712-.745-1.598-1.128-2.7-1.128-1.101 0-2.008.383-2.7 1.128-.691.744-1.036 1.66-1.036 2.745 0 1.084.345 2 1.037 2.745.691.744 1.598 1.105 2.7 1.105zm3.652-8V9.66h2.29v11.469h-2.29v-1.575c-1.059 1.234-2.399 1.852-3.976 1.852-1.663 0-3.067-.575-4.168-1.745-1.102-1.17-1.642-2.617-1.642-4.34 0-1.724.54-3.128 1.642-4.256 1.1-1.128 2.505-1.681 4.168-1.681 1.577 0 2.917.617 3.976 1.872zM138.79 9.34c1.404 0 2.527.448 3.37 1.34.863.873 1.295 2.086 1.295 3.596v6.852h-2.376V14.66c0-2.021-1.036-3.128-2.657-3.128-1.727 0-2.915 1.255-2.915 3.192v6.404h-2.377v-6.426c0-1.978-1.037-3.17-2.679-3.17-1.728 0-2.937 1.277-2.937 3.234v6.362h-2.377V9.659h2.333v1.66c.692-1.212 1.988-1.979 3.522-1.979 1.533.021 2.958.767 3.586 2.107.798-1.277 2.419-2.107 4.212-2.107zm-19.517 11.788h2.484V5.405h-2.484v15.723z"/>
-    </g>
-</symbol></svg>

gradio/static/img/vendor/icon-c.svg

@@ -1,224 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs/><symbol id="icon-c-ic-apply" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path stroke="#e9e9e9" d="M4 12.011l5 5L20.011 6"/>
-    </g>
-</symbol><symbol id="icon-c-ic-cancel" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path stroke="#e9e9e9" d="M6 6l12 12M18 6L6 18"/>
-    </g>
-</symbol><symbol id="icon-c-ic-crop" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#e9e9e9" d="M4 0h1v20a1 1 0 0 1-1-1V0zM20 17h-1V5h1v12zm0 2v5h-1v-5h1z"/>
-        <path fill="#e9e9e9" d="M5 19h19v1H5zM4.762 4v1H0V4h4.762zM7 4h12a1 1 0 0 1 1 1H7V4z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-delete-all" viewBox="0 0 24 24">
-    <g fill="#e9e9e9" fill-rule="evenodd">
-        <path d="M5 23H3a1 1 0 0 1-1-1V6h1v16h2v1zm16-10h-1V6h1v7zM9 13H8v-3h1v3zm3 0h-1v-3h1v3zm3 0h-1v-3h1v3zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z"/>
-        <path d="M0 3h23v1H0zM11.286 21H8.714L8 23H7l1-2.8V20h.071L9.5 16h1l1.429 4H12v.2l1 2.8h-1l-.714-2zm-.357-1L10 17.4 9.071 20h1.858zM20 22h3v1h-4v-7h1v6zm-5 0h3v1h-4v-7h1v6z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-delete" viewBox="0 0 24 24">
-    <g fill="#e9e9e9" fill-rule="evenodd">
-        <path d="M3 6v16h17V6h1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6h1zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z"/>
-        <path d="M0 3h23v1H0zM8 10h1v6H8v-6zm3 0h1v6h-1v-6zm3 0h1v6h-1v-6z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-draw-free" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" d="M2.5 20.929C2.594 10.976 4.323 6 7.686 6c5.872 0 2.524 19 7.697 19s1.89-14.929 6.414-14.929 1.357 10.858 5.13 10.858c1.802 0 2.657-2.262 2.566-6.786"/>
-    </g>
-</symbol><symbol id="icon-c-ic-draw-line" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" d="M2 15.5h28"/>
-    </g>
-</symbol><symbol id="icon-c-ic-draw" viewBox="0 0 24 24">
-    <g fill="none">
-        <path stroke="#e9e9e9" d="M2.5 21.5H5c.245 0 .48-.058.691-.168l.124-.065.14.01c.429.028.85-.127 1.16-.437L22.55 5.405a.5.5 0 0 0 0-.707l-3.246-3.245a.5.5 0 0 0-.707 0L3.162 16.888a1.495 1.495 0 0 0-.437 1.155l.01.14-.065.123c-.111.212-.17.448-.17.694v2.5z"/>
-        <path fill="#e9e9e9" d="M16.414 3.707l3.89 3.89-.708.706-3.889-3.889z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-filter" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#e9e9e9" d="M12 7v1H2V7h10zm6 0h4v1h-4V7zM12 16v1h10v-1H12zm-6 0H2v1h4v-1z"/>
-        <path fill="#e9e9e9" d="M8.5 20a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM15.5 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-flip-reset" viewBox="0 0 31 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M31 0H0v32h31z"/>
-        <path fill="#e9e9e9" d="M28 16a8 8 0 0 1-8 8H3v-1h1v-7H3a8 8 0 0 1 8-8h17v1h-1v7h1zM11 9a7 7 0 0 0-7 7v7h16a7 7 0 0 0 7-7V9H11z"/>
-        <path stroke="#e9e9e9" stroke-linecap="square" d="M24 5l3.5 3.5L24 12M7 20l-3.5 3.5L7 27"/>
-    </g>
-</symbol><symbol id="icon-c-ic-flip-x" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M32 32H0V0h32z"/>
-        <path fill="#e9e9e9" d="M17 32h-1V0h1zM27.167 11l.5 3h-1.03l-.546-3h1.076zm-.5-3h-1.122L25 5h-5V4h5.153a1 1 0 0 1 .986.836L26.667 8zm1.5 9l.5 3h-.94l-.545-3h.985zm1 6l.639 3.836A1 1 0 0 1 28.819 28H26v-1h3l-.726-4h.894zM23 28h-3v-1h3v1zM13 4v1H7L3 27h10v1H3.18a1 1 0 0 1-.986-1.164l3.666-22A1 1 0 0 1 6.847 4H13z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-flip-y" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0v32h32V0z"/>
-        <path fill="#e9e9e9" d="M0 16v1h32v-1zM11 27.167l3 .5v-1.03l-3-.546v1.076zm-3-.5v-1.122L5 25v-5H4v5.153a1 1 0 0 0 .836.986L8 26.667zm9 1.5l3 .5v-.94l-3-.545v.985zm6 1l3.836.639A1 1 0 0 0 28 28.82V26h-1v3l-4-.727v.894zM28 23v-3h-1v3h1zM4 13h1V7l22-4v10h1V3.18a1 1 0 0 0-1.164-.986l-22 3.667A1 1 0 0 0 4 6.847V13z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-flip" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#e9e9e9" d="M11 0h1v24h-1zM19 21v-1h2v-2h1v2a1 1 0 0 1-1 1h-2zm-2 0h-3v-1h3v1zm5-5h-1v-3h1v3zm0-5h-1V8h1v3zm0-5h-1V4h-2V3h2a1 1 0 0 1 1 1v2zm-5-3v1h-3V3h3zM9 3v1H2v16h7v1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-arrow-2" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" stroke-linecap="round" stroke-linejoin="round" d="M21.793 18.5H2.5v-5h18.935l-7.6-8h5.872l10.5 10.5-10.5 10.5h-5.914l8-8z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-arrow-3" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" stroke-linecap="round" stroke-linejoin="round" d="M25.288 16.42L14.208 27.5H6.792l11.291-11.291L6.826 4.5h7.381l11.661 11.661-.58.258z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-arrow" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" d="M2.5 11.5v9h18v5.293L30.293 16 20.5 6.207V11.5h-18z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-bubble" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" stroke-linecap="round" stroke-linejoin="round" d="M22.207 24.5L16.5 30.207V24.5H8A6.5 6.5 0 0 1 1.5 18V9A6.5 6.5 0 0 1 8 2.5h16A6.5 6.5 0 0 1 30.5 9v9a6.5 6.5 0 0 1-6.5 6.5h-1.793z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-heart" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill-rule="nonzero" stroke="#e9e9e9" d="M15.996 30.675l1.981-1.79c7.898-7.177 10.365-9.718 12.135-13.012.922-1.716 1.377-3.37 1.377-5.076 0-4.65-3.647-8.297-8.297-8.297-2.33 0-4.86 1.527-6.817 3.824l-.38.447-.381-.447C13.658 4.027 11.126 2.5 8.797 2.5 4.147 2.5.5 6.147.5 10.797c0 1.714.46 3.375 1.389 5.098 1.775 3.288 4.26 5.843 12.123 12.974l1.984 1.806z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-load" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" stroke-linecap="round" stroke-linejoin="round" d="M17.314 18.867l1.951-2.53 4 5.184h-17l6.5-8.84 4.549 6.186z"/>
-        <path fill="#e9e9e9" d="M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01z"/>
-        <path fill="#e9e9e9" d="M25 3h1v9h-1z"/>
-        <path stroke="#e9e9e9" d="M22 6l3.5-3.5L29 6"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-location" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <g stroke="#e9e9e9">
-            <path d="M16 31.28C23.675 23.302 27.5 17.181 27.5 13c0-6.351-5.149-11.5-11.5-11.5S4.5 6.649 4.5 13c0 4.181 3.825 10.302 11.5 18.28z"/>
-            <circle cx="16" cy="13" r="4.5"/>
-        </g>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-polygon" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" d="M.576 16L8.29 29.5h15.42L31.424 16 23.71 2.5H8.29L.576 16z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-star-2" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" d="M19.446 31.592l2.265-3.272 3.946.25.636-3.94 3.665-1.505-1.12-3.832 2.655-2.962-2.656-2.962 1.12-3.832-3.664-1.505-.636-3.941-3.946.25-2.265-3.271L16 3.024 12.554 1.07 10.289 4.34l-3.946-.25-.636 3.941-3.665 1.505 1.12 3.832L.508 16.33l2.656 2.962-1.12 3.832 3.664 1.504.636 3.942 3.946-.25 2.265 3.27L16 29.638l3.446 1.955z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon-star" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" d="M25.292 29.878l-1.775-10.346 7.517-7.327-10.388-1.51L16 1.282l-4.646 9.413-10.388 1.51 7.517 7.327-1.775 10.346L16 24.993l9.292 4.885z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-icon" viewBox="0 0 24 24">
-    <g fill="none">
-        <path stroke="#e9e9e9" stroke-linecap="round" stroke-linejoin="round" d="M11.923 19.136L5.424 22l.715-7.065-4.731-5.296 6.94-1.503L11.923 2l3.574 6.136 6.94 1.503-4.731 5.296L18.42 22z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-mask-load" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#e9e9e9" d="M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01zM15 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-1a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/>
-        <path fill="#e9e9e9" d="M25 3h1v9h-1z"/>
-        <path stroke="#e9e9e9" d="M22 6l3.5-3.5L29 6"/>
-    </g>
-</symbol><symbol id="icon-c-ic-mask" viewBox="0 0 24 24">
-    <g fill="none">
-        <circle cx="12" cy="12" r="4.5" stroke="#e9e9e9"/>
-        <path fill="#e9e9e9" d="M2 1h20a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1v20h20V2H2z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-redo" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z" opacity=".5"/>
-        <path fill="#e9e9e9" d="M21 6H9a6 6 0 1 0 0 12h12v1H9A7 7 0 0 1 9 5h12v1z"/>
-        <path stroke="#e9e9e9" stroke-linecap="square" d="M19 3l2.5 2.5L19 8"/>
-    </g>
-</symbol><symbol id="icon-c-ic-reset" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z" opacity=".5"/>
-        <path fill="#e9e9e9" d="M2 13v-1a7 7 0 0 1 7-7h13v1h-1v5h1v1a7 7 0 0 1-7 7H2v-1h1v-5H2zm7-7a6 6 0 0 0-6 6v6h12a6 6 0 0 0 6-6V6H9z"/>
-        <path stroke="#e9e9e9" stroke-linecap="square" d="M19 3l2.5 2.5L19 8M5 16l-2.5 2.5L5 21"/>
-    </g>
-</symbol><symbol id="icon-c-ic-rotate-clockwise" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#e9e9e9" d="M29 17h-.924c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C4.076 10.398 9.407 5.041 16 5V4C8.82 4 3 9.82 3 17s5.82 13 13 13 13-5.82 13-13z"/>
-        <path stroke="#e9e9e9" stroke-linecap="square" d="M16 1.5l4 3-4 3"/>
-        <path fill="#e9e9e9" fill-rule="nonzero" d="M16 4h4v1h-4z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-rotate-counterclockwise" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#e9e9e9" d="M3 17h.924c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.602-5.331-11.96-11.924-12V4c7.18 0 13 5.82 13 13s-5.82 13-13 13S3 24.18 3 17z"/>
-        <path fill="#e9e9e9" fill-rule="nonzero" d="M12 4h4v1h-4z"/>
-        <path stroke="#e9e9e9" stroke-linecap="square" d="M16 1.5l-4 3 4 3"/>
-    </g>
-</symbol><symbol id="icon-c-ic-rotate" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#e9e9e9" d="M8.349 22.254a10.002 10.002 0 0 1-2.778-1.719l.65-.76a9.002 9.002 0 0 0 2.495 1.548l-.367.931zm2.873.704l.078-.997a9 9 0 1 0-.557-17.852l-.14-.99A10.076 10.076 0 0 1 12.145 3c5.523 0 10 4.477 10 10s-4.477 10-10 10c-.312 0-.62-.014-.924-.042zm-7.556-4.655a9.942 9.942 0 0 1-1.253-2.996l.973-.234a8.948 8.948 0 0 0 1.124 2.693l-.844.537zm-1.502-5.91A9.949 9.949 0 0 1 2.88 9.23l.925.382a8.954 8.954 0 0 0-.644 2.844l-.998-.062zm2.21-5.686c.687-.848 1.51-1.58 2.436-2.166l.523.852a9.048 9.048 0 0 0-2.188 1.95l-.771-.636z"/>
-        <path stroke="#e9e9e9" stroke-linecap="square" d="M13 1l-2.5 2.5L13 6"/>
-    </g>
-</symbol><symbol id="icon-c-ic-shape-circle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="16" cy="16" r="14.5" stroke="#e9e9e9"/>
-    </g>
-</symbol><symbol id="icon-c-ic-shape-rectangle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <rect width="27" height="27" x="2.5" y="2.5" stroke="#e9e9e9" rx="1"/>
-    </g>
-</symbol><symbol id="icon-c-ic-shape-triangle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#e9e9e9" stroke-linecap="round" stroke-linejoin="round" d="M16 2.5l15.5 27H.5z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-shape" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#e9e9e9" d="M14.706 8H21a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-4h1v4h12V9h-5.706l-.588-1z"/>
-        <path stroke="#e9e9e9" stroke-linecap="round" stroke-linejoin="round" d="M8.5 1.5l7.5 13H1z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-text-align-center" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#e9e9e9" d="M2 5h28v1H2zM8 12h16v1H8zM2 19h28v1H2zM8 26h16v1H8z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-text-align-left" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#e9e9e9" d="M2 5h28v1H2zM2 12h16v1H2zM2 19h28v1H2zM2 26h16v1H2z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-text-align-right" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#e9e9e9" d="M2 5h28v1H2zM14 12h16v1H14zM2 19h28v1H2zM14 26h16v1H14z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-text-bold" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#e9e9e9" d="M7 2h2v2H7zM7 28h2v2H7z"/>
-        <path stroke="#e9e9e9" stroke-width="2" d="M9 3v12h9a6 6 0 1 0 0-12H9zM9 15v14h10a7 7 0 0 0 0-14H9z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-text-italic" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#e9e9e9" d="M15 2h5v1h-5zM11 29h5v1h-5zM17 3h1l-4 26h-1z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-text-underline" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#e9e9e9" d="M8 2v14a8 8 0 1 0 16 0V2h1v14a9 9 0 0 1-18 0V2h1zM3 29h26v1H3z"/>
-        <path fill="#e9e9e9" d="M5 2h5v1H5zM22 2h5v1h-5z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-text" viewBox="0 0 24 24">
-    <g fill="#e9e9e9" fill-rule="evenodd">
-        <path d="M4 3h15a1 1 0 0 1 1 1H3a1 1 0 0 1 1-1zM3 4h1v1H3zM19 4h1v1h-1z"/>
-        <path d="M11 3h1v18h-1z"/>
-        <path d="M10 20h3v1h-3z"/>
-    </g>
-</symbol><symbol id="icon-c-ic-undo" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M24 0H0v24h24z" opacity=".5"/>
-        <path fill="#e9e9e9" d="M3 6h12a6 6 0 1 1 0 12H3v1h12a7 7 0 0 0 0-14H3v1z"/>
-        <path stroke="#e9e9e9" stroke-linecap="square" d="M5 3L2.5 5.5 5 8"/>
-    </g>
-</symbol><symbol id="icon-c-img-bi" viewBox="0 0 257 26">
-    <g fill="#FDBA3B">
-        <path d="M26 5a8.001 8.001 0 0 0 0 16 8.001 8.001 0 0 0 0-16M51.893 19.812L43.676 5.396A.78.78 0 0 0 43 5a.78.78 0 0 0-.677.396l-8.218 14.418a.787.787 0 0 0 0 .792c.14.244.396.394.676.394h16.436c.28 0 .539-.15.678-.396a.796.796 0 0 0-.002-.792M15.767 5.231A.79.79 0 0 0 15.21 5H.791A.791.791 0 0 0 0 5.79v6.42a.793.793 0 0 0 .791.79h3.21v7.21c.001.21.082.408.234.56.147.148.347.23.558.23h6.416a.788.788 0 0 0 .792-.79V13h3.006c.413 0 .611-.082.762-.232.15-.149.23-.35.231-.559V5.791a.787.787 0 0 0-.233-.56M85.767 5.231A.79.79 0 0 0 85.21 5H70.791a.791.791 0 0 0-.791.79v6.42a.793.793 0 0 0 .791.79h3.21v7.21c.001.21.082.408.234.56.147.148.347.23.558.23h6.416a.788.788 0 0 0 .792-.79V13h3.006c.413 0 .611-.082.762-.232.15-.149.23-.35.231-.559V5.791a.787.787 0 0 0-.233-.56M65.942 9.948l2.17-3.76a.78.78 0 0 0 0-.792.791.791 0 0 0-.684-.396h-8.54A5.889 5.889 0 0 0 53 10.86a5.887 5.887 0 0 0 3.07 5.17l-2.184 3.782A.792.792 0 0 0 54.571 21h8.54a5.89 5.89 0 0 0 2.831-11.052M105.7 21h2.3V5h-2.3zM91 5h2.4v10.286c0 1.893 1.612 3.429 3.6 3.429s3.6-1.536 3.6-3.429V5h2.4v10.286c0 3.156-2.686 5.714-6 5.714-3.313 0-6-2.558-6-5.714V5zM252.148 21.128h-2.377V9.659h2.27v1.64c.69-1.299 1.792-1.938 3.304-1.938.497 0 .95.065 1.382.192l-.215 2.277a3.734 3.734 0 0 0-1.275-.213c-1.814 0-3.089 1.234-3.089 3.638v5.873zm-7.095-5.744a3.734 3.734 0 0 0-1.101-2.703c-.714-.766-1.6-1.149-2.658-1.149-1.058 0-1.944.383-2.679 1.149a3.803 3.803 0 0 0-1.08 2.703c0 1.063.368 1.978 1.08 2.722.735.746 1.62 1.128 2.68 1.128 1.058 0 1.943-.382 2.657-1.128.734-.744 1.101-1.659 1.101-2.722zm-9.916 0c0-1.682.583-3.086 1.729-4.256 1.166-1.17 2.635-1.767 4.428-1.767 1.793 0 3.262.597 4.407 1.767 1.167 1.17 1.75 2.574 1.75 4.256 0 1.7-.583 3.127-1.75 4.297-1.145 1.17-2.614 1.745-4.407 1.745-1.793 0-3.262-.575-4.428-1.745-1.146-1.17-1.729-2.596-1.729-4.297zm-1.5 3.233l.821 1.83c-.864.638-1.944.958-3.22.958-2.526 0-3.822-1.554-3.822-4.383V11.66h-2.01v-2h2.031V5.595h2.355v4.063h4.018v2h-4.018v5.405c0 1.469.605 2.191 1.793 2.191.626 0 1.318-.212 2.052-.638zm-12.43 2.51h2.375V9.66h-2.376v11.469zm1.23-12.977c-.929 0-1.642-.682-1.642-1.596 0-.873.713-1.554 1.643-1.554.885 0 1.576.681 1.576 1.554 0 .914-.69 1.596-1.576 1.596zm-6.49 7.234c0-1.086-.346-1.98-1.037-2.724-.692-.745-1.599-1.128-2.7-1.128-1.102 0-2.01.383-2.7 1.128-.692.744-1.037 1.638-1.037 2.724 0 1.084.345 2.02 1.036 2.766.691.744 1.6 1.105 2.7 1.105 1.102 0 2.01-.361 2.7-1.105.692-.746 1.038-1.682 1.038-2.766zm-.173-4.129V5h2.397v16.128h-2.354v-1.596c-1.015 1.255-2.333 1.873-3.91 1.873-1.663 0-3.068-.575-4.169-1.724-1.102-1.17-1.663-2.596-1.663-4.297 0-1.682.561-3.107 1.663-4.256 1.101-1.17 2.485-1.745 4.148-1.745 1.534 0 2.83.617 3.888 1.872zm-11.48 9.873h-10.218V5.405h10.195v2.318h-7.711V12h7.15v2.32h-7.15v4.489h7.733v2.319zm-23.891-9.724c-1.793 0-3.132 1.192-3.478 2.979h6.783c-.194-1.808-1.555-2.979-3.305-2.979zm5.703 3.766c0 .32-.021.703-.086 1.128h-9.095c.346 1.787 1.62 3 3.867 3 1.318 0 2.916-.49 3.953-1.234l.994 1.724c-1.189.872-3.067 1.595-5.033 1.595-4.364 0-6.243-3-6.243-6.021 0-1.724.54-3.15 1.642-4.277 1.101-1.127 2.548-1.702 4.298-1.702 1.664 0 3.046.511 4.105 1.553 1.058 1.043 1.598 2.447 1.598 4.234zm-19.949 3.894c1.08 0 1.966-.362 2.68-1.085.712-.724 1.058-1.617 1.058-2.703 0-1.084-.346-2-1.059-2.701-.713-.702-1.599-1.064-2.679-1.064-1.058 0-1.944.362-2.656 1.085-.714.702-1.059 1.596-1.059 2.68 0 1.086.345 2 1.059 2.724.712.702 1.598 1.064 2.656 1.064zm3.673-7.936V9.66h2.29v10.299c0 1.85-.584 3.32-1.728 4.404-1.146 1.085-2.68 1.638-4.58 1.638-1.945 0-3.672-.553-5.206-1.638l1.037-1.808c1.296.915 2.679 1.36 4.126 1.36 2.484 0 3.996-1.51 3.996-3.637v-.83c-1.015 1.127-2.311 1.702-3.91 1.702-1.684 0-3.089-.554-4.19-1.68-1.102-1.128-1.642-2.532-1.642-4.214 0-1.68.561-3.085 1.706-4.191 1.145-1.128 2.571-1.681 4.234-1.681 1.534 0 2.83.575 3.867 1.745zm-18.07 8.127c1.102 0 1.988-.382 2.7-1.128.714-.744 1.06-1.659 1.06-2.743 0-1.065-.346-1.98-1.06-2.724-.712-.745-1.598-1.128-2.7-1.128-1.101 0-2.008.383-2.7 1.128-.691.744-1.036 1.66-1.036 2.745 0 1.084.345 2 1.037 2.745.691.744 1.598 1.105 2.7 1.105zm3.652-8V9.66h2.29v11.469h-2.29v-1.575c-1.059 1.234-2.399 1.852-3.976 1.852-1.663 0-3.067-.575-4.168-1.745-1.102-1.17-1.642-2.617-1.642-4.34 0-1.724.54-3.128 1.642-4.256 1.1-1.128 2.505-1.681 4.168-1.681 1.577 0 2.917.617 3.976 1.872zM138.79 9.34c1.404 0 2.527.448 3.37 1.34.863.873 1.295 2.086 1.295 3.596v6.852h-2.376V14.66c0-2.021-1.036-3.128-2.657-3.128-1.727 0-2.915 1.255-2.915 3.192v6.404h-2.377v-6.426c0-1.978-1.037-3.17-2.679-3.17-1.728 0-2.937 1.277-2.937 3.234v6.362h-2.377V9.659h2.333v1.66c.692-1.212 1.988-1.979 3.522-1.979 1.533.021 2.958.767 3.586 2.107.798-1.277 2.419-2.107 4.212-2.107zm-19.517 11.788h2.484V5.405h-2.484v15.723z"/>
-    </g>
-</symbol></svg>

gradio/static/img/vendor/icon-d.svg

@@ -1,224 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs/><symbol id="icon-d-ic-apply" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path stroke="#8a8a8a" d="M4 12.011l5 5L20.011 6"/>
-    </g>
-</symbol><symbol id="icon-d-ic-cancel" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path stroke="#8a8a8a" d="M6 6l12 12M18 6L6 18"/>
-    </g>
-</symbol><symbol id="icon-d-ic-crop" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#8a8a8a" d="M4 0h1v20a1 1 0 0 1-1-1V0zM20 17h-1V5h1v12zm0 2v5h-1v-5h1z"/>
-        <path fill="#8a8a8a" d="M5 19h19v1H5zM4.762 4v1H0V4h4.762zM7 4h12a1 1 0 0 1 1 1H7V4z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-delete-all" viewBox="0 0 24 24">
-    <g fill="#8a8a8a" fill-rule="evenodd">
-        <path d="M5 23H3a1 1 0 0 1-1-1V6h1v16h2v1zm16-10h-1V6h1v7zM9 13H8v-3h1v3zm3 0h-1v-3h1v3zm3 0h-1v-3h1v3zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z"/>
-        <path d="M0 3h23v1H0zM11.286 21H8.714L8 23H7l1-2.8V20h.071L9.5 16h1l1.429 4H12v.2l1 2.8h-1l-.714-2zm-.357-1L10 17.4 9.071 20h1.858zM20 22h3v1h-4v-7h1v6zm-5 0h3v1h-4v-7h1v6z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-delete" viewBox="0 0 24 24">
-    <g fill="#8a8a8a" fill-rule="evenodd">
-        <path d="M3 6v16h17V6h1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6h1zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z"/>
-        <path d="M0 3h23v1H0zM8 10h1v6H8v-6zm3 0h1v6h-1v-6zm3 0h1v6h-1v-6z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-draw-free" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" d="M2.5 20.929C2.594 10.976 4.323 6 7.686 6c5.872 0 2.524 19 7.697 19s1.89-14.929 6.414-14.929 1.357 10.858 5.13 10.858c1.802 0 2.657-2.262 2.566-6.786"/>
-    </g>
-</symbol><symbol id="icon-d-ic-draw-line" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" d="M2 15.5h28"/>
-    </g>
-</symbol><symbol id="icon-d-ic-draw" viewBox="0 0 24 24">
-    <g fill="none">
-        <path stroke="#8a8a8a" d="M2.5 21.5H5c.245 0 .48-.058.691-.168l.124-.065.14.01c.429.028.85-.127 1.16-.437L22.55 5.405a.5.5 0 0 0 0-.707l-3.246-3.245a.5.5 0 0 0-.707 0L3.162 16.888a1.495 1.495 0 0 0-.437 1.155l.01.14-.065.123c-.111.212-.17.448-.17.694v2.5z"/>
-        <path fill="#8a8a8a" d="M16.414 3.707l3.89 3.89-.708.706-3.889-3.889z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-filter" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#8a8a8a" d="M12 7v1H2V7h10zm6 0h4v1h-4V7zM12 16v1h10v-1H12zm-6 0H2v1h4v-1z"/>
-        <path fill="#8a8a8a" d="M8.5 20a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM15.5 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-flip-reset" viewBox="0 0 31 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M31 0H0v32h31z"/>
-        <path fill="#8a8a8a" d="M28 16a8 8 0 0 1-8 8H3v-1h1v-7H3a8 8 0 0 1 8-8h17v1h-1v7h1zM11 9a7 7 0 0 0-7 7v7h16a7 7 0 0 0 7-7V9H11z"/>
-        <path stroke="#8a8a8a" stroke-linecap="square" d="M24 5l3.5 3.5L24 12M7 20l-3.5 3.5L7 27"/>
-    </g>
-</symbol><symbol id="icon-d-ic-flip-x" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M32 32H0V0h32z"/>
-        <path fill="#8a8a8a" d="M17 32h-1V0h1zM27.167 11l.5 3h-1.03l-.546-3h1.076zm-.5-3h-1.122L25 5h-5V4h5.153a1 1 0 0 1 .986.836L26.667 8zm1.5 9l.5 3h-.94l-.545-3h.985zm1 6l.639 3.836A1 1 0 0 1 28.819 28H26v-1h3l-.726-4h.894zM23 28h-3v-1h3v1zM13 4v1H7L3 27h10v1H3.18a1 1 0 0 1-.986-1.164l3.666-22A1 1 0 0 1 6.847 4H13z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-flip-y" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0v32h32V0z"/>
-        <path fill="#8a8a8a" d="M0 16v1h32v-1zM11 27.167l3 .5v-1.03l-3-.546v1.076zm-3-.5v-1.122L5 25v-5H4v5.153a1 1 0 0 0 .836.986L8 26.667zm9 1.5l3 .5v-.94l-3-.545v.985zm6 1l3.836.639A1 1 0 0 0 28 28.82V26h-1v3l-4-.727v.894zM28 23v-3h-1v3h1zM4 13h1V7l22-4v10h1V3.18a1 1 0 0 0-1.164-.986l-22 3.667A1 1 0 0 0 4 6.847V13z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-flip" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#8a8a8a" d="M11 0h1v24h-1zM19 21v-1h2v-2h1v2a1 1 0 0 1-1 1h-2zm-2 0h-3v-1h3v1zm5-5h-1v-3h1v3zm0-5h-1V8h1v3zm0-5h-1V4h-2V3h2a1 1 0 0 1 1 1v2zm-5-3v1h-3V3h3zM9 3v1H2v16h7v1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-arrow-2" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" stroke-linecap="round" stroke-linejoin="round" d="M21.793 18.5H2.5v-5h18.935l-7.6-8h5.872l10.5 10.5-10.5 10.5h-5.914l8-8z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-arrow-3" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" stroke-linecap="round" stroke-linejoin="round" d="M25.288 16.42L14.208 27.5H6.792l11.291-11.291L6.826 4.5h7.381l11.661 11.661-.58.258z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-arrow" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" d="M2.5 11.5v9h18v5.293L30.293 16 20.5 6.207V11.5h-18z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-bubble" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" stroke-linecap="round" stroke-linejoin="round" d="M22.207 24.5L16.5 30.207V24.5H8A6.5 6.5 0 0 1 1.5 18V9A6.5 6.5 0 0 1 8 2.5h16A6.5 6.5 0 0 1 30.5 9v9a6.5 6.5 0 0 1-6.5 6.5h-1.793z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-heart" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill-rule="nonzero" stroke="#8a8a8a" d="M15.996 30.675l1.981-1.79c7.898-7.177 10.365-9.718 12.135-13.012.922-1.716 1.377-3.37 1.377-5.076 0-4.65-3.647-8.297-8.297-8.297-2.33 0-4.86 1.527-6.817 3.824l-.38.447-.381-.447C13.658 4.027 11.126 2.5 8.797 2.5 4.147 2.5.5 6.147.5 10.797c0 1.714.46 3.375 1.389 5.098 1.775 3.288 4.26 5.843 12.123 12.974l1.984 1.806z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-load" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" stroke-linecap="round" stroke-linejoin="round" d="M17.314 18.867l1.951-2.53 4 5.184h-17l6.5-8.84 4.549 6.186z"/>
-        <path fill="#8a8a8a" d="M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01z"/>
-        <path fill="#8a8a8a" d="M25 3h1v9h-1z"/>
-        <path stroke="#8a8a8a" d="M22 6l3.5-3.5L29 6"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-location" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <g stroke="#8a8a8a">
-            <path d="M16 31.28C23.675 23.302 27.5 17.181 27.5 13c0-6.351-5.149-11.5-11.5-11.5S4.5 6.649 4.5 13c0 4.181 3.825 10.302 11.5 18.28z"/>
-            <circle cx="16" cy="13" r="4.5"/>
-        </g>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-polygon" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" d="M.576 16L8.29 29.5h15.42L31.424 16 23.71 2.5H8.29L.576 16z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-star-2" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" d="M19.446 31.592l2.265-3.272 3.946.25.636-3.94 3.665-1.505-1.12-3.832 2.655-2.962-2.656-2.962 1.12-3.832-3.664-1.505-.636-3.941-3.946.25-2.265-3.271L16 3.024 12.554 1.07 10.289 4.34l-3.946-.25-.636 3.941-3.665 1.505 1.12 3.832L.508 16.33l2.656 2.962-1.12 3.832 3.664 1.504.636 3.942 3.946-.25 2.265 3.27L16 29.638l3.446 1.955z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon-star" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" d="M25.292 29.878l-1.775-10.346 7.517-7.327-10.388-1.51L16 1.282l-4.646 9.413-10.388 1.51 7.517 7.327-1.775 10.346L16 24.993l9.292 4.885z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-icon" viewBox="0 0 24 24">
-    <g fill="none">
-        <path stroke="#8a8a8a" stroke-linecap="round" stroke-linejoin="round" d="M11.923 19.136L5.424 22l.715-7.065-4.731-5.296 6.94-1.503L11.923 2l3.574 6.136 6.94 1.503-4.731 5.296L18.42 22z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-mask-load" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#8a8a8a" d="M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01zM15 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-1a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/>
-        <path fill="#8a8a8a" d="M25 3h1v9h-1z"/>
-        <path stroke="#8a8a8a" d="M22 6l3.5-3.5L29 6"/>
-    </g>
-</symbol><symbol id="icon-d-ic-mask" viewBox="0 0 24 24">
-    <g fill="none">
-        <circle cx="12" cy="12" r="4.5" stroke="#8a8a8a"/>
-        <path fill="#8a8a8a" d="M2 1h20a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1v20h20V2H2z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-redo" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z" opacity=".5"/>
-        <path fill="#8a8a8a" d="M21 6H9a6 6 0 1 0 0 12h12v1H9A7 7 0 0 1 9 5h12v1z"/>
-        <path stroke="#8a8a8a" stroke-linecap="square" d="M19 3l2.5 2.5L19 8"/>
-    </g>
-</symbol><symbol id="icon-d-ic-reset" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z" opacity=".5"/>
-        <path fill="#8a8a8a" d="M2 13v-1a7 7 0 0 1 7-7h13v1h-1v5h1v1a7 7 0 0 1-7 7H2v-1h1v-5H2zm7-7a6 6 0 0 0-6 6v6h12a6 6 0 0 0 6-6V6H9z"/>
-        <path stroke="#8a8a8a" stroke-linecap="square" d="M19 3l2.5 2.5L19 8M5 16l-2.5 2.5L5 21"/>
-    </g>
-</symbol><symbol id="icon-d-ic-rotate-clockwise" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#8a8a8a" d="M29 17h-.924c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C4.076 10.398 9.407 5.041 16 5V4C8.82 4 3 9.82 3 17s5.82 13 13 13 13-5.82 13-13z"/>
-        <path stroke="#8a8a8a" stroke-linecap="square" d="M16 1.5l4 3-4 3"/>
-        <path fill="#8a8a8a" fill-rule="nonzero" d="M16 4h4v1h-4z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-rotate-counterclockwise" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#8a8a8a" d="M3 17h.924c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.602-5.331-11.96-11.924-12V4c7.18 0 13 5.82 13 13s-5.82 13-13 13S3 24.18 3 17z"/>
-        <path fill="#8a8a8a" fill-rule="nonzero" d="M12 4h4v1h-4z"/>
-        <path stroke="#8a8a8a" stroke-linecap="square" d="M16 1.5l-4 3 4 3"/>
-    </g>
-</symbol><symbol id="icon-d-ic-rotate" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#8a8a8a" d="M8.349 22.254a10.002 10.002 0 0 1-2.778-1.719l.65-.76a9.002 9.002 0 0 0 2.495 1.548l-.367.931zm2.873.704l.078-.997a9 9 0 1 0-.557-17.852l-.14-.99A10.076 10.076 0 0 1 12.145 3c5.523 0 10 4.477 10 10s-4.477 10-10 10c-.312 0-.62-.014-.924-.042zm-7.556-4.655a9.942 9.942 0 0 1-1.253-2.996l.973-.234a8.948 8.948 0 0 0 1.124 2.693l-.844.537zm-1.502-5.91A9.949 9.949 0 0 1 2.88 9.23l.925.382a8.954 8.954 0 0 0-.644 2.844l-.998-.062zm2.21-5.686c.687-.848 1.51-1.58 2.436-2.166l.523.852a9.048 9.048 0 0 0-2.188 1.95l-.771-.636z"/>
-        <path stroke="#8a8a8a" stroke-linecap="square" d="M13 1l-2.5 2.5L13 6"/>
-    </g>
-</symbol><symbol id="icon-d-ic-shape-circle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="16" cy="16" r="14.5" stroke="#8a8a8a"/>
-    </g>
-</symbol><symbol id="icon-d-ic-shape-rectangle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <rect width="27" height="27" x="2.5" y="2.5" stroke="#8a8a8a" rx="1"/>
-    </g>
-</symbol><symbol id="icon-d-ic-shape-triangle" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path stroke="#8a8a8a" stroke-linecap="round" stroke-linejoin="round" d="M16 2.5l15.5 27H.5z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-shape" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#8a8a8a" d="M14.706 8H21a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-4h1v4h12V9h-5.706l-.588-1z"/>
-        <path stroke="#8a8a8a" stroke-linecap="round" stroke-linejoin="round" d="M8.5 1.5l7.5 13H1z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-text-align-center" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#8a8a8a" d="M2 5h28v1H2zM8 12h16v1H8zM2 19h28v1H2zM8 26h16v1H8z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-text-align-left" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#8a8a8a" d="M2 5h28v1H2zM2 12h16v1H2zM2 19h28v1H2zM2 26h16v1H2z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-text-align-right" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#8a8a8a" d="M2 5h28v1H2zM14 12h16v1H14zM2 19h28v1H2zM14 26h16v1H14z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-text-bold" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#8a8a8a" d="M7 2h2v2H7zM7 28h2v2H7z"/>
-        <path stroke="#8a8a8a" stroke-width="2" d="M9 3v12h9a6 6 0 1 0 0-12H9zM9 15v14h10a7 7 0 0 0 0-14H9z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-text-italic" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#8a8a8a" d="M15 2h5v1h-5zM11 29h5v1h-5zM17 3h1l-4 26h-1z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-text-underline" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#8a8a8a" d="M8 2v14a8 8 0 1 0 16 0V2h1v14a9 9 0 0 1-18 0V2h1zM3 29h26v1H3z"/>
-        <path fill="#8a8a8a" d="M5 2h5v1H5zM22 2h5v1h-5z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-text" viewBox="0 0 24 24">
-    <g fill="#8a8a8a" fill-rule="evenodd">
-        <path d="M4 3h15a1 1 0 0 1 1 1H3a1 1 0 0 1 1-1zM3 4h1v1H3zM19 4h1v1h-1z"/>
-        <path d="M11 3h1v18h-1z"/>
-        <path d="M10 20h3v1h-3z"/>
-    </g>
-</symbol><symbol id="icon-d-ic-undo" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M24 0H0v24h24z" opacity=".5"/>
-        <path fill="#8a8a8a" d="M3 6h12a6 6 0 1 1 0 12H3v1h12a7 7 0 0 0 0-14H3v1z"/>
-        <path stroke="#8a8a8a" stroke-linecap="square" d="M5 3L2.5 5.5 5 8"/>
-    </g>
-</symbol><symbol id="icon-d-img-bi" viewBox="0 0 257 26">
-    <g fill="#FDBA3B">
-        <path d="M26 5a8.001 8.001 0 0 0 0 16 8.001 8.001 0 0 0 0-16M51.893 19.812L43.676 5.396A.78.78 0 0 0 43 5a.78.78 0 0 0-.677.396l-8.218 14.418a.787.787 0 0 0 0 .792c.14.244.396.394.676.394h16.436c.28 0 .539-.15.678-.396a.796.796 0 0 0-.002-.792M15.767 5.231A.79.79 0 0 0 15.21 5H.791A.791.791 0 0 0 0 5.79v6.42a.793.793 0 0 0 .791.79h3.21v7.21c.001.21.082.408.234.56.147.148.347.23.558.23h6.416a.788.788 0 0 0 .792-.79V13h3.006c.413 0 .611-.082.762-.232.15-.149.23-.35.231-.559V5.791a.787.787 0 0 0-.233-.56M85.767 5.231A.79.79 0 0 0 85.21 5H70.791a.791.791 0 0 0-.791.79v6.42a.793.793 0 0 0 .791.79h3.21v7.21c.001.21.082.408.234.56.147.148.347.23.558.23h6.416a.788.788 0 0 0 .792-.79V13h3.006c.413 0 .611-.082.762-.232.15-.149.23-.35.231-.559V5.791a.787.787 0 0 0-.233-.56M65.942 9.948l2.17-3.76a.78.78 0 0 0 0-.792.791.791 0 0 0-.684-.396h-8.54A5.889 5.889 0 0 0 53 10.86a5.887 5.887 0 0 0 3.07 5.17l-2.184 3.782A.792.792 0 0 0 54.571 21h8.54a5.89 5.89 0 0 0 2.831-11.052M105.7 21h2.3V5h-2.3zM91 5h2.4v10.286c0 1.893 1.612 3.429 3.6 3.429s3.6-1.536 3.6-3.429V5h2.4v10.286c0 3.156-2.686 5.714-6 5.714-3.313 0-6-2.558-6-5.714V5zM252.148 21.128h-2.377V9.659h2.27v1.64c.69-1.299 1.792-1.938 3.304-1.938.497 0 .95.065 1.382.192l-.215 2.277a3.734 3.734 0 0 0-1.275-.213c-1.814 0-3.089 1.234-3.089 3.638v5.873zm-7.095-5.744a3.734 3.734 0 0 0-1.101-2.703c-.714-.766-1.6-1.149-2.658-1.149-1.058 0-1.944.383-2.679 1.149a3.803 3.803 0 0 0-1.08 2.703c0 1.063.368 1.978 1.08 2.722.735.746 1.62 1.128 2.68 1.128 1.058 0 1.943-.382 2.657-1.128.734-.744 1.101-1.659 1.101-2.722zm-9.916 0c0-1.682.583-3.086 1.729-4.256 1.166-1.17 2.635-1.767 4.428-1.767 1.793 0 3.262.597 4.407 1.767 1.167 1.17 1.75 2.574 1.75 4.256 0 1.7-.583 3.127-1.75 4.297-1.145 1.17-2.614 1.745-4.407 1.745-1.793 0-3.262-.575-4.428-1.745-1.146-1.17-1.729-2.596-1.729-4.297zm-1.5 3.233l.821 1.83c-.864.638-1.944.958-3.22.958-2.526 0-3.822-1.554-3.822-4.383V11.66h-2.01v-2h2.031V5.595h2.355v4.063h4.018v2h-4.018v5.405c0 1.469.605 2.191 1.793 2.191.626 0 1.318-.212 2.052-.638zm-12.43 2.51h2.375V9.66h-2.376v11.469zm1.23-12.977c-.929 0-1.642-.682-1.642-1.596 0-.873.713-1.554 1.643-1.554.885 0 1.576.681 1.576 1.554 0 .914-.69 1.596-1.576 1.596zm-6.49 7.234c0-1.086-.346-1.98-1.037-2.724-.692-.745-1.599-1.128-2.7-1.128-1.102 0-2.01.383-2.7 1.128-.692.744-1.037 1.638-1.037 2.724 0 1.084.345 2.02 1.036 2.766.691.744 1.6 1.105 2.7 1.105 1.102 0 2.01-.361 2.7-1.105.692-.746 1.038-1.682 1.038-2.766zm-.173-4.129V5h2.397v16.128h-2.354v-1.596c-1.015 1.255-2.333 1.873-3.91 1.873-1.663 0-3.068-.575-4.169-1.724-1.102-1.17-1.663-2.596-1.663-4.297 0-1.682.561-3.107 1.663-4.256 1.101-1.17 2.485-1.745 4.148-1.745 1.534 0 2.83.617 3.888 1.872zm-11.48 9.873h-10.218V5.405h10.195v2.318h-7.711V12h7.15v2.32h-7.15v4.489h7.733v2.319zm-23.891-9.724c-1.793 0-3.132 1.192-3.478 2.979h6.783c-.194-1.808-1.555-2.979-3.305-2.979zm5.703 3.766c0 .32-.021.703-.086 1.128h-9.095c.346 1.787 1.62 3 3.867 3 1.318 0 2.916-.49 3.953-1.234l.994 1.724c-1.189.872-3.067 1.595-5.033 1.595-4.364 0-6.243-3-6.243-6.021 0-1.724.54-3.15 1.642-4.277 1.101-1.127 2.548-1.702 4.298-1.702 1.664 0 3.046.511 4.105 1.553 1.058 1.043 1.598 2.447 1.598 4.234zm-19.949 3.894c1.08 0 1.966-.362 2.68-1.085.712-.724 1.058-1.617 1.058-2.703 0-1.084-.346-2-1.059-2.701-.713-.702-1.599-1.064-2.679-1.064-1.058 0-1.944.362-2.656 1.085-.714.702-1.059 1.596-1.059 2.68 0 1.086.345 2 1.059 2.724.712.702 1.598 1.064 2.656 1.064zm3.673-7.936V9.66h2.29v10.299c0 1.85-.584 3.32-1.728 4.404-1.146 1.085-2.68 1.638-4.58 1.638-1.945 0-3.672-.553-5.206-1.638l1.037-1.808c1.296.915 2.679 1.36 4.126 1.36 2.484 0 3.996-1.51 3.996-3.637v-.83c-1.015 1.127-2.311 1.702-3.91 1.702-1.684 0-3.089-.554-4.19-1.68-1.102-1.128-1.642-2.532-1.642-4.214 0-1.68.561-3.085 1.706-4.191 1.145-1.128 2.571-1.681 4.234-1.681 1.534 0 2.83.575 3.867 1.745zm-18.07 8.127c1.102 0 1.988-.382 2.7-1.128.714-.744 1.06-1.659 1.06-2.743 0-1.065-.346-1.98-1.06-2.724-.712-.745-1.598-1.128-2.7-1.128-1.101 0-2.008.383-2.7 1.128-.691.744-1.036 1.66-1.036 2.745 0 1.084.345 2 1.037 2.745.691.744 1.598 1.105 2.7 1.105zm3.652-8V9.66h2.29v11.469h-2.29v-1.575c-1.059 1.234-2.399 1.852-3.976 1.852-1.663 0-3.067-.575-4.168-1.745-1.102-1.17-1.642-2.617-1.642-4.34 0-1.724.54-3.128 1.642-4.256 1.1-1.128 2.505-1.681 4.168-1.681 1.577 0 2.917.617 3.976 1.872zM138.79 9.34c1.404 0 2.527.448 3.37 1.34.863.873 1.295 2.086 1.295 3.596v6.852h-2.376V14.66c0-2.021-1.036-3.128-2.657-3.128-1.727 0-2.915 1.255-2.915 3.192v6.404h-2.377v-6.426c0-1.978-1.037-3.17-2.679-3.17-1.728 0-2.937 1.277-2.937 3.234v6.362h-2.377V9.659h2.333v1.66c.692-1.212 1.988-1.979 3.522-1.979 1.533.021 2.958.767 3.586 2.107.798-1.277 2.419-2.107 4.212-2.107zm-19.517 11.788h2.484V5.405h-2.484v15.723z"/>
-    </g>
-</symbol></svg>

gradio/static/js/all_io.js

@@ -1,183 +0,0 @@
-
-var io_master_template = {
-  gather: function() {
-    this.clear();
-    this.gathering = true;
-    for (let iface of this.input_components) {
-      iface.submit();
-    }
-  },
-  clear: function() {
-    this.last_input = new Array(this.input_components.length);
-    this.input_count = 0;
-    if (this.gather_timeout) {
-      window.clearTimeout(this.gather_timeout);
-    }
-  },
-  input: function(interface_id, data) {
-    this.last_input[interface_id] = data;
-    this.input_count += 1;
-    if (this.input_count == this.input_components.length) {
-      this.submit();
-      this.gathering = false;
-    }
-  },
-  submit: function() {
-    let io = this;
-    if (!this.config.live) {
-      this.target.find(".loading").removeClass("hidden");
-      this.target.find(".loading_in_progress").show();
-      this.target.find(".loading_failed").hide();
-      this.target.find(".output_components").css("opacity", 0.5);
-    }
-    this.fn(this.last_input, "predict").then((output) => {
-      io.output(output);
-      this.target.find(".flag").removeClass("inactive");
-      this.target.find(".interpret").removeClass("inactive");  
-    }).catch((error) => {
-      console.error(error);
-      this.target.find(".loading_in_progress").hide();
-      this.target.find(".loading_failed").show();
-    });
-  },
-  score_similarity: function(callback) {
-    this.target.find(".loading").removeClass("hidden");
-    this.target.find(".loading_in_progress").show();
-    this.target.find(".loading_failed").hide();
-    this.target.find(".output_components").css("opacity", 0.5);
-
-    this.fn(this.last_input, "score_similarity").then((output) => {
-      output = output["data"];
-      this.target.find(".loading").addClass("hidden");
-      this.target.find(".output_components").css("opacity", 1);
-      this.order_mapping = sortWithIndices(output).reverse();
-      callback();
-    })
-  },
-  view_embeddings: function(callback) {
-    this.target.find(".loading").removeClass("hidden");
-    this.target.find(".loading_in_progress").show();
-    this.target.find(".loading_failed").hide();
-    this.target.find(".output_components").css("opacity", 0.5);
-
-    this.fn(this.last_input, "view_embeddings").then((output) => {
-      this.target.find(".loading").addClass("hidden");
-      this.target.find(".output_components").css("opacity", 1);
-      callback(output)
-    })
-  },
-  update_embeddings: function(callback) {
-    this.target.find(".loading").removeClass("hidden");
-    this.target.find(".loading_in_progress").show();
-    this.target.find(".loading_failed").hide();
-    this.target.find(".output_components").css("opacity", 0.5);
-
-    this.fn(this.last_input, "update_embeddings").then((output) => {
-      this.target.find(".loading").addClass("hidden");
-      this.target.find(".output_components").css("opacity", 1);
-      callback(output)
-    })
-  },
-  submit_examples: function(callback) {
-    this.target.find(".loading").removeClass("hidden");
-    this.target.find(".loading_in_progress").show();
-    this.target.find(".loading_failed").hide();
-    this.target.find(".output_components").css("opacity", 0.5);
-
-    let example_ids = [];
-    if (this.loaded_examples == null) {
-      this.loaded_examples = {};
-    }
-    for (let i = 0; i < this.config.examples.length; i++) {
-      if (!(i in this.loaded_examples)) {
-        example_ids.push(i);
-      }
-    }
-    this.fn(example_ids, "predict_examples").then((output) => {
-      this.target.find(".loading").addClass("hidden");
-      this.target.find(".output_components").css("opacity", 1);
-
-      output = output["data"];
-      for (let [example_id, output_values] of Object.entries(output)) {
-        this.loaded_examples[example_id] = output_values;
-      }
-      callback();
-    }).catch((error) => {
-      console.error(error);
-      this.target.find(".loading_in_progress").hide();
-      this.target.find(".loading_failed").show();
-    });
-  },
-  output: function(data, do_not_cache) {
-    if (!do_not_cache) {
-      this.last_output = data["data"];
-    }
-
-    for (let i = 0; i < this.output_components.length; i++) {
-      this.output_components[i].output(data["data"][i]);
-    }
-    if (data["durations"]) {
-      let ratio = this.output_components.length / data["durations"].length;
-      for (let i = 0; i < this.output_components.length; i = i + ratio) {
-        this.output_components[i].target.parent().find(`.loading_time[interface="${i + ratio - 1}"]`).text("Latency: " + ((data["durations"][i / ratio])).toFixed(2) + "s");
-      }
-    }
-
-    if (this.config.live) {
-      var io = this;
-      var refresh_lag = this.config.refresh_lag || 0;
-      this.gather_timeout = window.setTimeout(function() {
-        io.gather();
-      }, refresh_lag);
-    } else {
-      this.target.find(".loading").addClass("hidden");
-      this.target.find(".output_components").css("opacity", 1);
-    }
-  },
-  no_input: function() {
-    if (this.gathering && this.config.live) {
-      var io = this;
-      this.gather_timeout = window.setTimeout(function() {
-        io.gather();
-      }, 200);
-    }
-    this.gathering = false;
-  },
-  flag: function(flag_option) {
-    var post_data = {
-      'input_data' : this.last_input ,
-      'output_data' : this.last_output,
-      'flag_option': flag_option
-    };
-    this.fn(post_data, "flag")
-  },
-  interpret: function() {
-    var io = this;
-    this.target.find(".loading").removeClass("hidden");
-    this.target.find(".loading_in_progress").show();
-    var post_data = this.last_input;
-    this.fn(post_data, "interpret").then((data) => {
-      for (let [idx, interpretation] of data["interpretation_scores"].entries()) {
-        io.input_components[idx].show_interpretation(interpretation);
-      }
-      io.alternative_outputs = data["alternative_outputs"]
-      io.target.find(".loading_in_progress").hide();
-    }).catch((error) => {
-      console.error(error);
-      this.target.find(".loading_in_progress").hide();
-      this.target.find(".loading_failed").show();
-    })
-  },
-  alternative_interpret: function(interface_index, alternate_index) {
-    if (interface_index === false) {
-      this.output({"data": this.last_output});
-    } else if (io.alternative_outputs) {
-      this.output(
-        {"data": io.alternative_outputs[interface_index][alternate_index]},
-        /*do_not_cache=*/true
-      )
-    }
-  }
-};
-
-

gradio/static/js/gradio.js

@@ -1,620 +0,0 @@
-let input_component_map = {
-  "textbox": TextboxInput,
-  "image": ImageInput,
-}
-let output_component_map = {
-  "textbox": TextboxOutput,
-  "label": LabelOutput,
-}
-
-class InterfacePanel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.clear = this.clear.bind(this);
-    this.submit = this.submit.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.state = this.get_default_state();
-  }
-  get_default_state() {
-    let state = {};
-    for (let [i, component] of this.props.input_components.entries()) {
-      state[i] = component.default;
-    }
-    let index_start = this.props.input_components.length;
-    for (let [i, component] of this.props.output_components.entries()) {
-      state[index_start + i] = component.default;
-    }
-    state["predicting"] = false;
-    state["error"] = false;
-    state["has_changed"] = false;
-    return state;
-  }
-  clear() {
-    this.setState(this.get_default_state());
-  }
-  submit() {
-    let input_state = [];
-    for (let [i, component] of this.props.input_components.entries()) {
-      input_state[i] = this.state[i];
-    }
-    this.setState({"submitting": true, "has_changed": false});
-    this.props.fn(input_state, "predict").then((output) => {
-      let index_start = this.props.input_components.length;
-      for (let [i, value] of output["data"].entries()) {
-        this.setState({[index_start + i]: value});
-      }
-      this.setState({"submitting": false});
-      if (this.state.has_changed) {
-        this.submit();
-      }
-    });
-  }
-  handleChange(_id, value) {
-    let state_change = {[_id]: value, "has_changed": true};
-    if (this.props.live && !(this.state.submitting)) {
-      this.setState(state_change, this.submit);
-    } else {
-      this.setState(state_change);
-    }
-  }
-  render() {
-    let title = this.props.title ? <h1 className="title">{this.props.title}</h1> : false;
-    let description = this.props.description ? <p className="description">{this.props.description}</p> : false;
-    let article = this.props.article ? <p className="article">{this.props.article}</p> : false;
-    let status = false;
-    if (this.state.submitting) {
-      status = (<div className="loading">
-        <img className="loading_in_progress" src="/static/img/logo_loading.gif"/>
-      </div>)
-    } else if (this.state.error) {
-      status = (<div className="loading">
-        <img className="loading_failed" src="/static/img/logo_error.png"/>
-      </div>)
-    }
-    return (
-    <div className="interface">
-      {title}
-      {description}
-      <div className="panels" style={
-        {"alignItems" : this.props.layout == "unaligned" ? "flex-start" : "stretch",
-         "flexDirection": this.props.layout == "vertical" ? "column" : "row"}}>
-        <div className="panel input_panel">
-          <div className="input_components">
-            {this.props.input_components.map((component, index) => {
-              const Component = input_component_map[component.name];
-              return (
-              <div className="component" key={index}>
-                <div className="panel_header">{component.label}</div>
-                <Component {...component} handleChange={this.handleChange.bind(this, index)} value={this.state[index]} />
-              </div>);
-            })}
-          </div>
-          <div className="panel_buttons">
-            <button className="clear panel_button" onClick={this.clear.bind(this)}>CLEAR</button>
-            {this.props.live ? false :
-              <button className="submit panel_button"  onClick={this.submit.bind(this)}>SUBMIT</button>
-            }
-          </div>
-        </div>
-        <div className="panel output_panel">
-          {status}
-          <div className="output_components" style={{"opacity" : status && !this.props.live ? 0.5 : 1}}>
-            {this.props.output_components.map((component, index) => {
-              const Component = output_component_map[component.name];
-              const key = this.props.input_components.length + index;
-              return (
-              <div className="component" key={key}>
-                <div className="panel_header">{component.label}</div>
-                <Component {...component}  handleChange={this.handleChange.bind(this, key)} value={this.state[key]}/>
-              </div>);
-            })}
-          </div>
-          <div className="panel_buttons">
-            <button className="interpret inactive panel_button">INTERPRET</button>
-            <button className="screenshot panel_button left_panel_button">SCREENSHOT</button>
-            <button className="record panel_button right_panel_button">GIF</button>
-            <div className="screenshot_logo hidden">
-              <img src="/static/img/logo_inline.png" />
-              <button className='record_stop'>
-                <div className='record_square'></div>
-              </button>
-            </div>
-            <div className="flag panel_button inactive">
-              FLAG
-              <div className="dropcontent"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="interpretation_explained hidden">
-        <h4>Interpretation Legend <span className='close_explain'>&#10006;</span></h4>
-        <div className='interpretation_legend'>
-          <div>&larr; Decreased output score / confidence</div>
-          <div>Increased output score / confidence &rarr;</div>
-        </div>
-        <p>When you click Interpret, you can see how different parts of the input contributed to the final output. The legend above will highlight each of the input components as follows:</p>
-        <ul></ul>
-      </div>
-      <div className="examples hidden">
-        <h4>Examples</h4>
-        <div className="examples_control">
-          <div className="examples_control_left">
-            <button className="run_examples examples-content">Run All</button>
-            <button className="load_prev examples-content">Load Previous <small>CTRL + <span className="backward">&#10140;</span></small></button>
-            <button className="load_next examples-content">Load Next <small>CTRL + &#10140;</small></button>
-            <button className="order_similar examples-content embedding">Order by Similarity</button>
-            <button className="view_embeddings examples-content embedding">View Embeddings</button>
-            <button className="update_embeddings embeddings-content hidden">Update Embeddings</button>
-            <button className="view_examples embeddings-content hidden">View Examples</button>
-          </div>
-          <div className="examples_control_right">
-            <button className="table_examples">
-              <svg width="40" height="24"><rect x="0" y="0" width="40" height="6"></rect><rect x="0" y="9" width="40" height="6"></rect><rect x="0" y="18" width="40" height="6"></rect></svg>
-            </button>
-            <button className="gallery_examples current">
-              <svg width="40" height="24"><rect x="0" y="0" width="18" height="40"></rect><rect x="22" y="0" width="18" height="40"></rect></svg>
-            </button>
-          </div>
-        </div>
-        <div className="pages hidden">Page:</div>
-        <table className="examples-content">
-        </table>
-        <div className="plot embeddings-content hidden">
-          <canvas id="canvas" width="400px" height="300px"></canvas>
-        </div>
-      </div>
-      {article}
-    </div>
-    )
-  }
-}
-
-function gradio(config, fn, target, example_file_path) {
-  target = $(target);
-  let io_master = Object.create(io_master_template);
-  io_master.fn = fn
-  io_master.target = target;
-  io_master.config = config;
-  io_master.example_file_path = example_file_path;
-
-  ReactDOM.render(<InterfacePanel {...config} fn={fn} />, target[0]);
-  function clear_all() {
-    for (let input_component of input_components) {
-      input_component.clear();
-    }
-    for (let output_component of output_components) {
-      output_component.clear();
-    }
-    target.find(".loading").addClass("hidden");
-    target.find(".loading_time").text("");
-    target.find(".output_components").css("opacity", 1);
-    target.find(".flag").addClass("inactive");
-    target.find(".interpret").addClass("inactive");
-    io_master.last_input = null;
-    io_master.last_output = null;
-  }
-
-  if (!config["allow_embedding"]) {
-    target.find(".embedding").hide();
-  }
-  if (!config["allow_screenshot"]) {
-    target.find(".screenshot, .record").hide();
-  }
-  if (config["allow_flagging"] !== true) {
-    target.find(".flag").hide();
-  }
-  if (!config["allow_interpretation"]) {
-    target.find(".interpret").hide();
-  }
-  function load_example(example_id) {
-    clear_all();
-    if (!(example_id in config["examples"])) {
-      return;
-    }
-    for (let [i, value] of config["examples"][example_id].entries()) {
-      if (i < input_components.length) {
-        input_components[i].load_example(value);
-      } else if (i - input_components.length < output_components.length) {
-        let output_component = output_components[i - input_components.length];
-        if ("load_example" in output_component) {
-          output_component.load_example(value);
-        } else {
-          output_component.output(value)
-        }
-      }
-    };
-    if (io_master.loaded_examples && example_id in io_master.loaded_examples) {
-      io_master.output({ "data": io_master.loaded_examples[example_id] });
-    }
-    let example_order = io_master.order_mapping.indexOf(example_id);
-    let current_page = Math.floor(example_order / config["examples_per_page"]);
-    if (current_page != io_master.current_page) {
-      io_master.current_page = current_page;
-      load_page();
-    }
-    $(".examples_body > tr").removeClass("current_example");
-    $(".examples_body > tr[row='" + example_id + "'").addClass("current_example");
-    io_master.current_example = example_id;
-    window.location.hash = example_id + 1;
-  }
-  function hash_handler() {
-    let hash = window.location.hash;
-    if (hash == "") {
-      return;
-    }
-    hash = hash.substring(1)
-    if (!isNaN(parseInt(hash))) {
-      load_example(parseInt(hash) - 1);
-    }
-  }
-  function next_example() {
-    var current_example = io_master.current_example;
-    if (current_example == null) {
-      new_index = 0;
-    } else {
-      new_index = (io_master.order_mapping.indexOf(current_example) + 1 + config.examples.length) % config.examples.length;
-    }
-    load_example(io_master.order_mapping[new_index]);
-  }
-  function prev_example() {
-    var current_example = io_master.current_example;
-    if (current_example == null) {
-      new_index = 0;
-    } else {
-      new_index = (io_master.order_mapping.indexOf(current_example) - 1 + config.examples.length) % config.examples.length;
-    }
-    load_example(io_master.order_mapping[new_index]);
-  }
-  function load_page() {
-    var page_num = io_master.current_page;
-    target.find(".page").removeClass("primary");
-    target.find(`.page[page=${page_num}]`).addClass("primary");
-    let page_start = page_num * config["examples_per_page"]
-    let html = "";
-    for (let i = page_start; i < page_start + config["examples_per_page"] && i < config.examples.length; i++) {
-      let example_id = io_master.order_mapping[i];
-      let example = config["examples"][example_id];
-      html += "<tr row=" + example_id + ">";
-      for (let [j, col] of example.entries()) {
-        let new_col = JSON.parse(JSON.stringify(col))
-        if (j < input_components.length) {
-          if (input_components[j].load_example_preview) {
-            new_col = input_components[j].load_example_preview(new_col);
-          }
-        } else {
-          let k = j - input_components.length;
-          if (k < output_components.length && output_components[k].load_example_preview) {
-            new_col = output_components[k].load_example_preview(new_col);
-          }
-        }
-        html += "<td>" + new_col + "</td>";
-      }
-      if (io_master.loaded_examples && example_id in io_master.loaded_examples) {
-        output_values = io_master.loaded_examples[example_id]
-        for (let j = 0; j < output_values.length; j++) {
-          let output_component = io_master.output_components[j];
-          let example_preview = output_values[j];
-          if (output_component.load_example_preview) {
-            example_preview = output_component.load_example_preview(example_preview)
-          }
-          html += "<td>" + example_preview + "</td>";
-        }
-      }
-      html += "</tr>";
-    }
-    target.find(".examples > table > tbody").html(html);
-  }
-  // if (config["examples"]) {
-  //   target.find(".examples").removeClass("hidden");
-  //   let html = "<thead>"
-  //   for (let input_component of config["input_components"]) {
-  //     html += "<th>" + input_component[1]["label"] + "</th>";
-  //   }
-  //   if (config["examples"].length > 0 && config["examples"][0].length > config["input_components"].length) {
-  //     for (let output_component of config["output_components"]) {
-  //       html += "<th>" + output_component[1]["label"] + "</th>";
-  //     }
-  //   }
-  //   html += "</thead>";
-  //   html += "<tbody className='examples_body'></tbody>";
-  //   target.find(".examples table").html(html);
-  //   io_master.current_page = 0;
-  //   io_master.order_mapping = [...Array(config.examples.length).keys()];
-  //   let page_count = Math.ceil(config.examples.length / config.examples_per_page)
-  //   if (page_count > 1) {
-  //     target.find(".pages").removeClass("hidden");
-  //     let html = "";
-  //     for (let i = 0; i < page_count; i++) {
-  //       html += `<button className='page' page='${i}'>${i + 1}</button>`
-  //     }
-  //     target.find(".pages").append(html);
-  //   }
-  //   load_page();
-  //   window.onhashchange = hash_handler;
-  //   hash_handler();
-  //   target.on("click", ".examples_body > tr", function () {
-  //     let example_id = parseInt($(this).attr("row"));
-  //     load_example(example_id);
-  //   })
-  //   target.on("click", ".page", function () {
-  //     let page_num = parseInt($(this).attr("page"));
-  //     io_master.current_page = page_num;
-  //     load_page();
-  //   })
-  //   set_table_mode = function () {
-  //     target.find(".examples-content").removeClass("gallery");
-  //     target.find(".examples_control_right button").removeClass("current");
-  //     target.find(".table_examples").addClass("current");
-  //   }
-  //   set_gallery_mode = function () {
-  //     target.find(".examples-content").addClass("gallery");
-  //     target.find(".examples_control_right button").removeClass("current");
-  //     target.find(".gallery_examples").addClass("current");
-  //   }
-  //   target.on("click", ".table_examples", set_table_mode);
-  //   target.on("click", ".gallery_examples", set_gallery_mode);
-  //   if (config["examples"].length > 0 && config["examples"][0].length > 1) {
-  //     set_table_mode();
-  //   } else {
-  //     set_gallery_mode();
-  //   }
-  //   target.find(".load_prev").click(prev_example);
-  //   target.find(".load_next").click(next_example);
-  //   target.find(".order_similar").click(function () {
-  //     io_master.score_similarity(function () {
-  //       io_master.current_page = 0
-  //       io_master.current_example = null;
-  //       load_page();
-  //     })
-  //   });
-  //   target.find(".view_examples").click(function () {
-  //     target.find(".examples-content").removeClass("hidden");
-  //     target.find(".embeddings-content").addClass("hidden");
-  //   });
-  //   target.find(".update_embeddings").click(function () {
-  //     io_master.update_embeddings(function (output) {
-  //       embedding_chart.data.datasets[0].data.push(output["sample_embedding_2d"][0]);
-  //       console.log(output["sample_embedding_2d"][0])
-  //       embedding_chart.update();
-  //     })
-  //   });
-  //   target.find(".view_embeddings").click(function () {
-  //     io_master.view_embeddings(function (output) {
-  //       let ctx = $('#canvas')[0].getContext('2d');
-  //       let backgroundColors = getBackgroundColors(io_master);
-  //       embedding_chart = new Chart(ctx, {
-  //         type: 'scatter',
-  //         data: {
-  //           datasets: [{
-  //             label: 'Sample Embedding',
-  //             data: output["sample_embedding_2d"],
-  //             backgroundColor: 'rgb(0, 0, 0)',
-  //             borderColor: 'rgb(0, 0, 0)',
-  //             pointRadius: 13,
-  //             pointHoverRadius: 13,
-  //             pointStyle: 'rectRot',
-  //             showLine: true,
-  //             fill: false,
-  //           }, {
-  //             label: 'Dataset Embeddings',
-  //             data: output["example_embeddings_2d"],
-  //             backgroundColor: backgroundColors,
-  //             borderColor: backgroundColors,
-  //             pointRadius: 7,
-  //             pointHoverRadius: 7
-  //           }]
-  //         },
-  //         options: {
-  //           legend: { display: false }
-  //         }
-  //       });
-  //       $("#canvas")[0].onclick = function (evt) {
-  //         var activePoints = embedding_chart.getElementsAtEvent(evt);
-  //         var firstPoint = activePoints[0];
-  //         if (firstPoint._datasetIndex == 1) { // if it's from the sample embeddings dataset
-  //           load_example(firstPoint._index)
-  //         }
-  //       };
-
-  //       target.find(".examples-content").addClass("hidden");
-  //       target.find(".embeddings-content").removeClass("hidden");
-  //     })
-  //   });
-  //   $("body").keydown(function (e) {
-  //     if ($(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("type") == "textarea") {
-  //       return;
-  //     }
-  //     e = e || window.event;
-  //     var keyCode = e.keyCode || e.which,
-  //       arrow = { left: 37, up: 38, right: 39, down: 40 };
-  //     if (e.ctrlKey) {
-  //       if (keyCode == arrow.left) {
-  //         prev_example();
-  //       } else if (keyCode == arrow.right) {
-  //         next_example();
-  //       }
-  //     }
-  //   });
-  // };
-
-
-  target.find(".screenshot").click(function () {
-    $(".screenshot, .record").hide();
-    $(".screenshot_logo").removeClass("hidden");
-    $(".record_stop").hide();
-    html2canvas(target[0], {
-      scrollX: 0,
-      scrollY: -window.scrollY
-    }).then(function (canvas) {
-      saveAs(canvas.toDataURL(), 'screenshot.png');
-      $(".screenshot, .record").show();
-      $(".screenshot_logo").addClass("hidden");
-    });
-  });
-  target.find(".record").click(function () {
-    $(".screenshot, .record").hide();
-    $(".screenshot_logo").removeClass("hidden");
-    $(".record_stop").show();
-    target.append("<canvas className='recording_draw hidden' width=640 height=480></canvas>");
-    target.append("<video className='recording hidden' autoplay playsinline></video>");
-    navigator.mediaDevices.getDisplayMedia(
-      { video: { width: 9999, height: 9999 } }
-    ).then(stream => {
-      video = target.find("video.recording")[0];
-      canvas = target.find("canvas.recording_draw")[0];
-      io_master.recording = { frames: [], stream: stream };
-      video.srcObject = stream;
-      const ctx = canvas.getContext('2d');
-      io_master.recording.interval = window.setInterval(() => {
-        let first = (io_master.recording.width === undefined);
-        if (first) {
-          io_master.recording.width = video.videoWidth;
-          io_master.recording.height = video.videoHeight;
-          io_master.recording.start = Date.now();
-          canvas.width = `${video.videoWidth}`;
-          canvas.height = `${video.videoHeight}`;
-        }
-        ctx.drawImage(video, 0, 0);
-        const imageData = ctx.getImageData(0, 0, io_master.recording.width, io_master.recording.height);
-        io_master.recording.frames.push({
-          imageData,
-          timestamp: first ? 0 : Date.now() - this.startTime
-        });
-      }, 100);
-    });
-  });
-  target.find(".record_stop").click(function () {
-    window.clearInterval(io_master.recording.interval);
-    io_master.recording.stream.getTracks().forEach(track => track.stop());
-    const gif = new GifEncoder({
-      width: io_master.recording.width,
-      height: io_master.recording.height,
-    });
-
-    gif.once('finished', blob => {
-      saveAs(URL.createObjectURL(blob), 'recording.gif');
-    });
-
-    const start = 0;
-    const end = io_master.recording.frames.length - 1;
-
-    const processFrame = index => {
-      if (index > end) {
-        gif.render();
-        return;
-      }
-      let { imageData, timestamp } = io_master.recording.frames[index];
-      const delay = index < end ? io_master.recording.frames[index + 1].timestamp - timestamp : 100;
-      gif.addFrame(imageData, delay);
-      setTimeout(() => processFrame(index + 1), 0);
-    };
-    processFrame(start);
-
-    $(".screenshot, .record").show();
-    $(".screenshot_logo").addClass("hidden");
-    target.find("canvas.recording_draw").remove();
-    target.find("video.recording").remove();
-  })
-  if (config.live) {
-    io_master.gather();
-  } else {
-    target.find(".submit").show();
-  }
-  if (!config.show_input) {
-    target.find(".input_panel").hide();
-  }
-  function flash_flag() {
-    target.find(".flag").addClass("flagged");
-    target.find(".dropcontent").addClass("hidden");
-    window.setTimeout(() => {
-      target.find(".flag").removeClass("flagged");
-      target.find(".dropcontent").removeClass("hidden");
-    }, 500);
-
-  }
-  if (config.allow_flagging) {
-    if (config.flagging_options) {
-      target.find(".flag").addClass("dropdown");
-      for (let option of config.flagging_options) {
-        target.find(".dropcontent").append(`<div>${option}</div>`)
-      }
-      target.find(".flag .dropcontent div").click(function () {
-        if (io_master.last_output) {
-          target.find(".flag .dropcontent");
-          flash_flag();
-          io_master.flag($(this).text());
-        }
-      });
-
-    } else {
-      target.find(".flag").click(function () {
-        if (io_master.last_output) {
-          flash_flag();
-          io_master.flag();
-        }
-      });
-    }
-  }
-  if (config.hide_run_all) {
-    $(".run_examples").hide();
-  }
-  target.find(".interpret").click(function () {
-    target.find(".interpretation_explained").removeClass("hidden");
-    if (io_master.last_output) {
-      io_master.interpret();
-    }
-  });
-  target.find(".run_examples").click(function () {
-    if (!io_master.has_loaded_examples) {
-      this.has_loaded_examples = true;
-      let html = ""
-      for (let i = 0; i < io_master.output_components.length; i++) {
-        html += "<th>" + config.output_components[i][1]["label"] + "</th>";
-      }
-      target.find(".examples > table > thead > tr").append(html);
-    }
-    io_master.has_loaded_examples = true;
-    io_master.submit_examples(load_page);
-  })
-
-  $(".input_panel").on("mouseover", ".alternate", function () {
-    let interface_index = $(this).closest(".interface").attr("interface_id");
-    let alternate_index = $(this).attr("alternate_index");
-    io_master.alternative_interpret(interface_index, alternate_index);
-  })
-  $(".input_panel").on("mouseout", ".alternate", function () {
-    io_master.alternative_interpret(false);
-  })
-
-  return io_master;
-}
-function gradio_url(config, url, target, example_file_path) {
-  return gradio(config, function (data, action) {
-    return new Promise((resolve, reject) => {
-      $.ajax({
-        type: "POST",
-        url: url + action + "/",
-        data: JSON.stringify({ "data": data }),
-        dataType: 'json',
-        contentType: 'application/json; charset=utf-8',
-        success: resolve,
-        error: reject,
-      });
-    });
-  }, target, example_file_path);
-}
-function saveAs(uri, filename) {
-  var link = document.createElement('a');
-  if (typeof link.download === 'string') {
-    link.href = uri;
-    link.download = filename;
-    //Firefox requires the link to be in the body
-    document.body.appendChild(link);
-    //simulate click
-    link.click();
-    //remove the link when done
-    document.body.removeChild(link);
-  } else {
-    window.open(uri);
-  }
-}

gradio/static/js/interfaces/input/audio.js

@@ -1,174 +0,0 @@
-const audio_input = {
-  html: `
-    <div class="interface_box">
-      <div class="file_zone hidden">
-        <div class="upload_zone drop_zone">
-          <div class="input_caption">Drop Audio Here<br>- or -<br>Click to Upload</div>
-        </div>
-        <div class="file_display hide">
-          <div class="file_name"></div>
-          <div class="file_size"></div>
-        </div>
-        <input class="hidden_upload" type="file" accept="audio/*" />
-      </div>
-      <div class="upload_zone mic_zone hidden">
-        <img class="not_recording" src="/static/img/mic.png" />
-        <div class="recording hidden volume_display">
-          <div class="volume volume_left">
-            <div class="volume_bar"></div>
-          </div>
-          <img src="/static/img/mic_recording.png" />
-          <div class="volume volume_right">
-            <div class="volume_bar"></div>
-          </div>
-        </div>
-        <div class="not_recording input_caption">Click to Record from Microphone</div>
-        <div class="recording hidden input_caption">Click to Stop Recording</div>
-      </div>
-      <div class="player hidden">
-        <div class="waveform"></div>
-        <div class="interpret_range"></div>
-        <button class="playpause primary">Play / Pause</button>
-      </div>
-    </div>
-    `,
-  state: "NO_AUDIO",
-  init: function(opts) {
-    var io = this;
-    this.source = opts.source;
-    this.wavesurfer = WaveSurfer.create({
-      container: io.target.find('.waveform')[0],
-      waveColor: '#888888',
-      progressColor: '#e67e22',
-      barWidth: 3,
-      hideScrollbar: true
-    });
-    if (this.source == "microphone") {
-      this.target.find(".mic_zone").removeClass("hidden");
-      this.target.find(".mic_zone").click(function() {
-        if (io.state == "NO_AUDIO") {
-          if (!has_audio_loaded) {
-            loadAudio();
-            io.mic = new p5.AudioIn();
-          }
-          io.recorder = new p5.SoundRecorder();
-          io.soundFile = new p5.SoundFile();
-          io.recorder.setInput(io.mic);
-          io.target.find(".recording").removeClass("hidden");
-          io.target.find(".not_recording").hide();
-          io.state = "RECORDING";
-          io.mic.start();
-          io.recorder.record(io.soundFile);
-
-          io.interval_id = window.setInterval(function () {
-            var volume = Math.floor(100 * io.mic.getLevel());
-            io.target.find(".volume_bar").width(`${(volume > 0 ? 10 : 0) + Math.round(2 * Math.sqrt(10 * volume))}px`)
-          }, 100)
-        }
-      });
-
-      this.target.find(".mic_zone").mousedown(function() {
-        if (io.state == "RECORDING" || io.state == "STOP_RECORDING") {
-          io.recorder.stop();
-          var blob = io.soundFile.getBlob();
-          var reader = new window.FileReader();
-          reader.readAsDataURL(blob);
-          reader.onloadend = function() {
-            io.load_preview_from_audio(reader.result);
-          }
-          if (io.interval_id) {
-            window.clearInterval(io.interval_id);
-          }
-        }
-      })
-    } else if (this.source == "upload") {
-      this.target.find(".file_zone").removeClass("hidden");
-      this.target.find(".upload_zone").click(function (e) {
-        io.target.find(".hidden_upload").click();
-      });
-      this.target.on('drag dragstart dragend dragover dragenter dragleave drop',
-          ".drop_zone", function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-      })
-      this.target.on('drop', '.drop_zone', function(e) {
-        files = e.originalEvent.dataTransfer.files;
-        io.load_preview_from_files(files)
-      });
-      this.target.find('.hidden_upload').on('change', function (e) {
-        if (this.files) {
-          io.load_preview_from_files(this.files);
-        }
-      })
-    }
-    this.target.find(".playpause").click(function () {
-      io.wavesurfer.playPause();
-    })
-  },
-  load_preview_from_audio: function(audio) {
-    var io = this;
-    io.audio_data = audio;
-    io.target.find(".upload_zone").hide();
-    io.target.find(".player").removeClass("hidden");
-    io.wavesurfer.load(io.audio_data);
-    if (io.state == "STOP_RECORDING") {
-      io.state = "RECORDED";
-      io.submit();
-    }
-    io.state = "RECORDED";
-  },
-  load_preview_from_files: function(files) {
-    if (!files.length || !window.FileReader) {
-      return
-    }
-    var ReaderObj = new FileReader()
-    ReaderObj.readAsDataURL(files[0])
-    io = this;
-    this.state = "AUDIO_LOADING"
-    ReaderObj.onloadend = function() {
-      io.load_preview_from_audio(this.result);
-    }
-  },
-  submit: function() {
-    if (this.state == "RECORDED") {
-      this.io_master.input(this.id, this.audio_data);
-    } else if (this.state == "RECORDING") {
-      this.state = "STOP_RECORDING";
-      this.target.find(".upload_zone").mousedown();
-    }
-  },
-  load_example: function(example_data) {
-    example_data = this.io_master.example_file_path + example_data;
-    let io = this;
-    if (io.state == "NO_AUDIO" || io.state == "RECORDED") {
-      io.clear();
-      toDataURL(example_data, function(data) {
-        io.load_preview_from_audio(data);
-      })  
-    }
-  },
-  show_interpretation: function(data) {
-    let html = ""
-    for (let [i, value] of data.entries()) {
-      html += `
-        <div class='alternate' alternate_index='${i}'
-          style='background-color: ${getSaliencyColor(value)}'>
-        </div>      `
-    }
-    this.target.find(".interpret_range").html(html);
-  },
-  interpretation_logic: "Highlights the output contribution of subsections of the audio input split by time.",
-  clear: function() {
-    this.audio_data = null;
-    this.state = "NO_AUDIO";
-    this.target.find(".interpret_range").empty();
-    this.target.find(".not_recording").show();
-    this.target.find(".recording").addClass("hidden");
-    this.target.find(".player").addClass("hidden");
-    this.target.find(".upload_zone").show();
-    this.target.find(".hidden_upload").prop("value", "")
-    if (this.wavesurfer) {
-      this.wavesurfer.stop();
-    }
-  }
-}

gradio/static/js/interfaces/input/checkbox.js

@@ -1,50 +0,0 @@
-const checkbox = {
-  html: `
-    <div class="checkbox_solo">
-      <label class='holder'><input class="checkbox" type="checkbox">&nbsp;</label>
-      <div class="interpretation interpret_sub"></div>
-    </div>`,
-  init: function(opts) {
-    this.target.find("input").checkboxradio();    
-  },
-  show_interpretation: function(data) {
-    let html = ""
-    let alternate_index = 0;
-    for (let i = 0; i < data.length; i++) {
-      let score = data[i];
-      let mark = ["&#x2717;", "&#x2713;"][i];
-      if (score == null) {
-        html += `<div class='interpret_check interpret_select'>
-          ${mark}
-        </div>`
-      } else {
-        html += `<div class='interpret_check alternate'
-        alternate_index='${alternate_index}'
-        style='background-color: ${getSaliencyColor(score)}'>
-          ${mark}
-        </div>`
-        alternate_index++;
-      }
-    }
-    this.target.find(".interpretation").html(html);
-  },
-  interpretation_logic: "Highlights the result of the alternative selection to checkbox. Hover to see alternative output.",
-  submit: function() {
-    let io = this;
-    let is_checked = this.target.find("input").prop("checked")
-    this.io_master.input(this.id, is_checked);
-  },
-  clear: function() {
-    this.target.find(".interpretation").empty();    
-    this.target.find("input").prop("checked", false);    
-    this.target.find("input").button("refresh");  
-  },
-  load_example: function(data) {
-    if (data) {
-      this.target.find("input").prop("checked", true);
-    } else {
-      this.target.find("input").prop("checked", false);
-    }
-    this.target.find("input").button("refresh");  
-  }
-}

gradio/static/js/interfaces/input/checkbox_group.js

@@ -1,70 +0,0 @@
-const checkbox_group = {
-  html: ``,
-  init: function(opts) {
-    this.choices = opts.choices;
-    html = "<div class='checkbox_group'>"
-    for ([index, choice] of opts.choices.entries()) {
-      html += `
-      <label for="${this.id}_${index}">
-          <input id="${this.id}_${index}" type="checkbox" name="${this.id}" value="${index}">
-          <span>${choice}<span>          
-        </label>
-        `;
-    }
-    html += "</div>"
-    this.target.html(html);
-    this.target.find("input").checkboxradio();
-  },
-  submit: function() {
-    let io = this;
-    let val_names = [];
-    this.target.find("input:checked").each(function(_, item) {
-      val_names.push(io.choices[$(item).val()])
-    })
-    this.io_master.input(this.id, val_names);
-  },
-  show_interpretation: function(data) {
-    this.target.find(".interpret_check").remove();
-    let alternate_index = 0;
-    for (let i = 0; i < data.length; i++) {
-      let html = "<div class='interpret_sub'>"
-      for (let j = 0; j < data[i].length; j++) {
-        let score = data[i][j];
-        let mark = ["&#x2717;", "&#x2713;"][j];
-        if (score == null) {
-          html += `<div class='interpret_check interpret_select'>
-              ${mark}
-          </div>`
-        } else {
-          html += `<div class='interpret_check alternate'
-            alternate_index='${alternate_index}'
-            style='background-color: ${getSaliencyColor(score)}'>
-              ${mark}
-            </div>`
-            alternate_index++;
-        }
-      }
-      html += "</div>"
-      this.target.find("label").eq(i).append(html);
-    }
-  },
-  interpretation_logic: "Highlights the result of alternative selections to the checkboxes. Hover to see alternative output.",
-  clear: function() {
-    this.target.find(".interpretation").empty();    
-    this.target.find("input").prop("checked", false);    
-    this.target.find("input").button("refresh");  
-  },
-  load_example: function(data) {
-    for (let [i, choice] of this.choices.entries()) {
-      let child = i + 1;
-      let checkbox = this.target.find("label:nth-child("+child+") input");
-      console.log(data, choice, child)
-      if (data.includes(choice)) {
-        checkbox.prop("checked", true);
-      } else {
-        checkbox.prop("checked", false);
-      }
-    }
-    this.target.find("input").button("refresh");  
-  }
-}

gradio/static/js/interfaces/input/dataframe.js

@@ -1,113 +0,0 @@
-const dataframe_input = {
-  html: `
-    <div class="interface_max_box">
-      <div class="dataframe">
-      </div>
-    </div>
-    `,
-  init: function(opts) {
-    let row_count = opts.row_count;
-    let col_count = opts.col_count;
-    this.datatype = opts.datatype;
-    let data = [];
-    for (let i = 0; i < row_count; i++) {
-      let row = []
-      for (let j = 0; j < col_count; j++) {
-        row.push(null);
-      }
-      data.push(row);
-    }
-    this.default_data = data;
-    this.opts = opts;
-    this.reset(this.default_data);
-  },
-  reset: function(data) {
-    if (this.table) {
-      this.table.destroy();
-    }
-    row_count = data.length;
-    col_count = data[0].length;
-    config = {};
-    if (this.opts.headers || this.opts.datatype) {
-      let column_config = [];
-      for (let i = 0; i < col_count; i++) {
-        let column = {};
-        if (this.opts.datatype) {
-          let datatype = typeof this.opts.datatype === "string" ? this.opts.datatype : this.opts.datatype[i];
-          let datatype_map = {"str": "text", "bool": "checkbox", "number": "numeric", "date": "calendar"}
-          column.type = datatype_map[datatype];
-        }
-        if (this.opts.headers) {
-          column.title = this.opts.headers[i];
-        }
-        column_config.push(column);
-      }
-      config.columns = column_config;
-    }
-    config.data = data;
-    this.table = this.target.find(".dataframe").jexcel(config);
-  },
-  submit: function() {
-    let data = this.table.getData();
-    if (this.datatype) {
-      for (let i = 0; i < data[0].length; i++) {
-        if (this.datatype == "number" || (i < this.datatype.length && this.datatype[i] == "number")) {
-          for (let j = 0; j < data.length; j++) {
-            let val = data[j][i];
-            data[j][i] = val == "" ? 0 : parseFloat(val);
-          }
-        }
-      }
-    }
-    this.io_master.input(this.id, data);
-  },
-  show_interpretation: function(data) {
-    this.target.find("td").css("background-color", "white")
-    let cell_name = (i, j) => {
-      let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-      let column_name = letters[i % 26];
-      if (i >= 26) {
-        column_name = letters[Math.floor(i / 26) - 1] + column_name;
-      }
-      return column_name + (j + 1);
-    }
-    for (let [j, row] of data.entries()) {
-      for (let [i, value] of row.entries()) {
-        console.log(cell_name(i, j), value);
-        this.table.setStyle(cell_name(i, j), 'background-color', getSaliencyColor(value));
-      }
-    }
-  },
-  interpretation_logic: "Highlights the output contribution of each cell in dataframe.",
-  load_example_preview: function(data) {
-    let data_copy = [];
-    for (let row of data.slice(0,3)) {
-      new_row = row.slice(0,3)
-      if (row.length > 3) {
-        new_row.push("...");
-      }
-      data_copy.push(new_row);      
-    }
-    if (data.length > 3) {
-      new_row = Array(data_copy[0].length).fill("...");
-      data_copy.push(new_row);      
-    }
-    let html = "<table><tbody>"
-    for (let row of data_copy) {
-      html += "<tr>";
-      for (let cell of row) {
-        html += "<td>" + cell + "</td>";
-      }
-      html += "</tr>";
-    }
-    html += "</tbody></table>";
-    return html;
-  },
-  load_example: function(data) {
-    this.reset(data);
-  },
-  clear: function() {
-    this.reset(this.default_data);
-    this.target.find("td").css("background-color", "white");
-  }
-}

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

@@ -1,54 +0,0 @@
-const dropdown = {
-  html: `
-    <div class="select_holder"></div>
-    <div class="select_interpretation interpret_sub"></div>
-  `,
-  init: function(opts) {
-    this.choices = opts.choices;
-    html = "<select class='dropdown'>"
-    for ([index, choice] of opts.choices.entries()) {
-      html += `<option value="${index}">${choice}</option>`
-    }
-    html += "</select>"
-    this.target.find(".select_holder").html(html);
-    this.target.find(".dropdown").selectmenu();
-  },
-  show_interpretation: function(data) {
-    let html = ""
-    let alternate_index = 0;
-    for (let i = 0; i < this.choices.length; i++) {
-      if (data[i] == null) {
-        html += `
-          <div class='interpret_select'>
-            ${this.choices[i]}
-          </div>`
-      } else {
-        html += `
-          <div class='alternate' 
-          alternate_index=${alternate_index} 
-          style='background-color: ${getSaliencyColor(data[i])}'>
-            ${this.choices[i]}
-          </div>`;
-        alternate_index++;
-      }
-    }
-    this.target.find(".select_interpretation").html(html);
-  },
-  interpretation_logic: "Highlights the result of the alternative selection to dropdown. Hover to see alternative output.",
-  submit: function() {
-    checked_val = this.target.find("option:selected").val();
-    if (checked_val) {
-      this.io_master.input(this.id, this.choices[checked_val]);
-    }
-  },
-  clear: function() {
-    this.target.find("option").prop("selected", false);    
-    this.target.find(".dropdown").selectmenu("refresh");
-    this.target.find(".select_interpretation").empty();    
-  },
-  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");
-  }
-}

gradio/static/js/interfaces/input/file.js

@@ -1,82 +0,0 @@
-const file_input = {
-  html: `
-    <div class="interface_mini_box">
-      <div class="upload_zone drop_zone">
-        <div class="input_caption">Drop File Here<br>- or -<br>Click to Upload</div>
-      </div>
-      <div class="file_display hide">
-        <div class="file_name"></div>
-        <div class="file_size"></div>
-      </div>
-      <input class="hidden_upload" type="file">
-    </div>`
-    ,
-  init: function(opts) {
-    var io = this;
-    this.target.find(".upload_zone").click(function (e) {
-      io.target.find(".hidden_upload").click();
-    });
-    this.target.on('drag dragstart dragend dragover dragenter dragleave drop',
-        ".drop_zone", function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-    })
-    this.target.on('drop', '.drop_zone', function(e) {
-      files = e.originalEvent.dataTransfer.files;
-      io.load_preview_from_files(files)
-    });
-    this.target.find('.hidden_upload').on('change', function (e) {
-      if (this.files) {
-        io.load_preview_from_files(this.files);
-      }
-    })
-  },
-  submit: function() {
-    if (this.file_data) {
-      this.io_master.input(this.id, this.file_data);
-    }
-  },
-  load_preview: function() {
-    var io = this;
-    io.target.find(".upload_zone").hide();
-    io.target.find(".file_display").removeClass("hide");
-    io.target.find(".file_name").text(io.file_data.name);
-    if (io.file_data.size !== null) {
-      io.target.find(".file_size").text(prettyBytes(io.file_data.size));
-    }
-  },
-  load_preview_from_files: function(files) {
-    if (!files.length || !window.FileReader) {
-      return
-    }
-    var ReaderObj = new FileReader()
-    ReaderObj.readAsDataURL(files[0])
-    var io = this;
-    ReaderObj.onloadend = function() {
-      io.file_data = {
-        "name": files[0].name,
-        "size": files[0].size,
-        "data": this.result,
-        "is_local_example": false
-      }
-      io.load_preview()
-    };
-  },
-  load_example: function(example_data) {
-    var io = this;
-    io.file_data = {
-      "name": example_data,
-      "data": null, 
-      "size": null,
-      "is_local_example": true
-    };
-    io.load_preview();
-  },
-  clear: function() {
-    this.target.find(".upload_zone").show();
-    this.target.find(".file_display").addClass("hide");
-    this.target.find(".hidden_upload").prop("value", "")
-    this.file_data = null;
-  },
-  file_data: null,
-}

gradio/static/js/interfaces/input/image.js

@@ -1,61 +0,0 @@
-class ImageInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.uploader = React.createRef();
-    this.openFileUpload = this.openFileUpload.bind(this);
-    this.load_preview_from_files = this.load_preview_from_files.bind(this);
-    this.load_preview_from_upload = this.load_preview_from_upload.bind(this);
-    this.load_preview_from_drop = this.load_preview_from_drop.bind(this);
-  }
-  handleChange(evt) {
-    this.props.handleChange(evt.target.value);
-  }
-  openFileUpload() {
-    this.uploader.current.click();
-  }
-  render() {
-    let no_action = (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();      
-    }
-    if (this.props.value != null) {
-      return (<div className="interface_box">
-        <div className="image_display">
-          <div className="edit_holder">
-            <button className="edit_image interface_button primary">Edit</button>
-          </div>
-          <div className="view_holders">
-            <div className="image_preview_holder">
-              <img className="image_preview" src={this.props.value} />
-            </div>
-          </div>
-        </div>
-      </div>)
-    } else {
-      return (<div className="interface_box" onDrag={no_action} onDragStart={no_action} onDragEnd={no_action} onDragOver={no_action} onDragEnter={no_action} onDragLeave={no_action} onDrop={no_action} >
-        <div className="upload_zone drop_zone" onClick={this.openFileUpload} onDrop={this.load_preview_from_drop} >
-          <div className="input_caption">Drop Image Here<br />- or -<br />Click to Upload</div>
-        </div>
-        <input className="hidden_upload" type="file" ref={this.uploader} onChange={this.load_preview_from_upload} accept="image/x-png,image/gif,image/jpeg" />
-      </div>)
-    }
-  }
-  load_preview_from_drop(evt) {
-    this.load_preview_from_files(evt.dataTransfer.files)
-  }
-  load_preview_from_upload(evt) {
-    this.load_preview_from_files(evt.target.files);
-  }
-  load_preview_from_files(files) {
-    if (!files.length || !window.FileReader || !/^image/.test(files[0].type)) {
-      return;
-    }
-    var component = this;
-    var ReaderObj = new FileReader()
-    ReaderObj.readAsDataURL(files[0])
-    ReaderObj.onloadend = function () {
-      component.props.handleChange(this.result);
-    }
-  }
-}

gradio/static/js/interfaces/input/microphone.js

@@ -1,98 +0,0 @@
-const microphone = {
-  html: `
-    <div class="interface_box">
-      <div class="upload_zone">
-        <img class="not_recording" src="/static/img/mic.png" />
-        <div class="recording hidden volume_display">
-          <div class="volume volume_left">
-            <div class="volume_bar"></div>
-          </div>
-          <img src="/static/img/mic_recording.png" />
-          <div class="volume volume_right">
-            <div class="volume_bar"></div>
-          </div>
-        </div>
-        <div class="not_recording input_caption">Click to Record from Microphone</div>
-        <div class="recording hidden input_caption">Click to Stop Recording</div>
-      </div>
-      <div class="player hidden">
-        <div class="waveform"></div>
-        <button class="playpause primary">Play / Pause</button>
-      </div>
-    </div>
-    `,
-  state: "NO_AUDIO",
-  init: function(opts) {
-    var io = this;
-    this.wavesurfer = WaveSurfer.create({
-      container: '.waveform',
-      waveColor: '#888888',
-      progressColor: '#e67e22',
-      barWidth: 3,
-      hideScrollbar: true
-    });
-    this.target.find(".upload_zone").click(function() {
-      if (io.state == "NO_AUDIO") {
-        if (!has_audio_loaded) {
-          loadAudio();
-          io.mic = new p5.AudioIn();
-        }
-        io.recorder = new p5.SoundRecorder();
-        io.soundFile = new p5.SoundFile();
-        io.recorder.setInput(io.mic);
-        io.target.find(".recording").removeClass("hidden");
-        io.target.find(".not_recording").hide();
-        io.state = "RECORDING";
-        io.mic.start();
-        io.recorder.record(io.soundFile);
-
-        var interval_id = window.setInterval(function () {
-          var volume = Math.floor(100 * io.mic.getLevel());
-          io.target.find(".volume_bar").width(`${(volume > 0 ? 10 : 0) + Math.round(2 * Math.sqrt(10 * volume))}px`)
-        }, 100)
-      }
-    });
-    this.target.find(".upload_zone").mousedown(function() {
-      if (io.state == "RECORDING" || io.state == "STOP_RECORDING") {
-        io.target.find(".upload_zone").hide();
-        io.recorder.stop();
-        var blob = io.soundFile.getBlob();
-        var reader = new window.FileReader();
-        reader.readAsDataURL(blob);
-        reader.onloadend = function() {
-          io.audio_data = reader.result;
-          io.target.find(".player").removeClass("hidden");
-          io.wavesurfer.load(io.audio_data);
-          if (io.state == "STOP_RECORDING") {
-            io.state = "RECORDED";
-            io.submit();
-          }
-          io.state = "RECORDED";
-        }
-        window.clearInterval(interval_id);
-      }
-    })
-    this.target.find(".playpause").click(function () {
-      io.wavesurfer.playPause();
-    })
-  },
-  submit: function() {
-    if (this.state == "RECORDED") {
-      this.io_master.input(this.id, this.audio_data);
-    } else if (this.state == "RECORDING") {
-      this.state = "STOP_RECORDING";
-      this.target.find(".upload_zone").mousedown();
-    }
-  },
-  clear: function() {
-    this.audio_data = null;
-    this.state = "NO_AUDIO";
-    this.target.find(".not_recording").show();
-    this.target.find(".recording").addClass("hidden");
-    this.target.find(".player").addClass("hidden");
-    this.target.find(".upload_zone").show();
-    if (this.wavesurfer) {
-      this.wavesurfer.stop();
-    }
-  }
-}

gradio/static/js/interfaces/input/number.js

@@ -1,50 +0,0 @@
-const number_input = {
-  html: `
-    <input type="text" class="input_text">
-    <div class="interpret_range"></div>
-    `,
-  init: function(opts) {
-    if (opts.default) {
-      this.target.find(".input_text").val(opts.default)
-    }
-  },
-  submit: function() {
-    text = this.target.find(".input_text").val();
-    if (!isNaN(parseFloat(text))) {
-      this.io_master.input(this.id, parseFloat(text));
-    } else {
-      this.io_master.no_input();
-    }
-  },
-  clear: function() {
-    this.target.find(".interpret_range").empty();
-    this.target.find(".input_text").val("");
-    this.target.find(".input_text").show();
-  },
-  show_interpretation: function(data) {
-    let html = ""
-    let alternate_index = 0;
-    for (let value_set of data) {
-      [value, score] = value_set;
-      if (score == null) {
-        html += `
-          <div class='interpret_select'>
-            ${value}
-          </div>`
-      } else {
-        html += `
-          <div class='alternate'
-            alternate_index=${alternate_index}
-            style='background-color: ${getSaliencyColor(score)}'>
-            ${value}
-          </div>`;
-        alternate_index++;
-      }
-    }
-    this.target.find(".interpret_range").html(html);
-  },
-  interpretation_logic: "Highlights the result of the alternative, neighboring values to input. Hover to see alternative output.",
-  load_example: function(data) {
-    this.target.find(".input_text").val(data);    
-  }
-}

gradio/static/js/interfaces/input/radio.js

@@ -1,56 +0,0 @@
-const radio = {
-  html: ``,
-  init: function(opts) {
-    this.choices = opts.choices;
-    html = "<div class='radio_group'>"
-    for ([index, choice] of opts.choices.entries()) {
-      html += `
-        <label for="${this.id}_${index}">
-          <input id="${this.id}_${index}" type="radio" name="${this.id}" value="${index}">
-          ${choice}
-        </label>
-      `;
-    }
-    html += "</div>"
-    this.target.html(html);
-    this.target.find("input").checkboxradio();
-    this.target.find("label:first-child input").prop("checked", true);    
-    this.target.find("input").button("refresh");  
-  },
-  submit: function() {
-    checked_val = this.target.find("input:checked").val();
-    this.io_master.input(this.id, this.choices[checked_val]);
-  },
-  show_interpretation: function(data) {
-    this.target.find(".interpret_check").remove();
-    let alternate_index = 0;
-    for (let i = 0; i < data.length; i++) {
-      let score = data[i];
-      if (score == null) {
-        var html = `<div class='interpret_check interpret_select'>
-            &#x2713;
-          </div>`
-      } else {
-        var html = `<div class='interpret_check alternate'
-            alternate_index=${alternate_index}
-            style='background-color: ${getSaliencyColor(data[i])}'>
-            &#x2713;
-          </div>`;
-        alternate_index++;
-      }
-      this.target.find("label").eq(i).append(html);
-    }
-  },
-  interpretation_logic: "Highlights the result of the alternative selection to radio. Hover to see alternative output.",
-  clear: function() {
-    this.target.find(".interpretation").empty();    
-    this.target.find("input").prop("checked", false);    
-    this.target.find("label:first-child input").prop("checked", true);    
-    this.target.find("input").button("refresh");  
-  },
-  load_example: function(data) {
-    let child = this.choices.indexOf(data) + 1;
-    this.target.find("label:nth-child("+child+") input").prop("checked", true);
-    this.target.find("input").button("refresh");  
-  }
-}

gradio/static/js/interfaces/input/sketchpad.js

@@ -1,57 +0,0 @@
-const sketchpad_input = {
-  html: `
-    <div class="interface_box">
-      <div class="sketch_tools">
-        <div id="brush_1" size="8" class="brush"></div>
-        <div id="brush_2" size="16" class="brush selected"></div>
-        <div id="brush_3" size="24" class="brush"></div>
-      </div>
-      <div class="view_holders">
-        <div class="canvas_holder">
-          <canvas class="sketch"></canvas>
-        </div>
-      </div>
-    </div>
-    `,
-  init: function() {
-    var io = this;
-    var dimension = Math.min(this.target.find(".canvas_holder").width(),
-        this.target.find(".canvas_holder").height()) - 2 // dimension - border
-    var id = this.id;
-    this.sketchpad = new Sketchpad({
-      element: '.interface[interface_id=' + id + '] .sketch',
-      width: dimension,
-      height: dimension
-    });
-    this.sketchpad.penSize = this.target.find(".brush.selected").attr("size");
-    this.canvas = this.target.find('.canvas_holder canvas')[0];
-    this.context = this.canvas.getContext("2d");
-    this.target.find(".brush").click(function (e) {
-      io.target.find(".brush").removeClass("selected");
-      $(this).addClass("selected");
-      io.sketchpad.penSize = $(this).attr("size");
-    })
-  },
-  submit: function() {
-    var dataURL = this.canvas.toDataURL("image/png");
-    this.io_master.input(this.id, dataURL);
-  },
-  clear: function() {
-    this.context.clearRect(0, 0, this.context.canvas.width, this.context.
-        canvas.height);
-  },
-  load_example_preview: function(data) {
-    return "<img src="+data+" height=100>"
-  },
-  load_example: function(data) {
-    this.clear();
-    let ctx = this.context;
-    var img = new Image;
-    let dimension = this.target.find(".canvas_holder canvas").width();
-    img.onload = function(){
-      ctx.clearRect(0,0,dimension,dimension);
-      ctx.drawImage(img,0,0,dimension,dimension);
-    };
-    img.src = data;
-  }
-}

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

@@ -1,51 +0,0 @@
-const slider = {
-  html: `
-    <div class="slider_container">
-      <div class="slider">
-        <div class="ui-slider-handle"></div>
-      </div>
-      <div class="interpret_range"></div>
-    </div>
-    `,
-  init: function(opts) {
-    let io = this;
-    this.minimum = opts.minimum;
-    var handle = this.target.find(".ui-slider-handle");
-    this.slider = this.target.find(".slider").slider({
-      create: function() {
-        handle.text( $( this ).slider( "value" ) );
-      },
-      slide: function( event, ui ) {
-        handle.text( ui.value );
-      },
-      min: opts.minimum,
-      max: opts.maximum,
-      step: opts.step,
-      value: opts.default
-    });
-  },
-  submit: function() {
-    let value = this.slider.slider("value");
-    this.io_master.input(this.id, parseFloat(value));
-  },
-  show_interpretation: function(data) {
-    let html = ""
-    for (let [i, value] of data.entries()) {
-      html += `
-        <div class='alternate'
-          alternate_index=${i}
-          style='background-color: ${getSaliencyColor(value)}'>
-        </div>      `
-    }
-    this.target.find(".interpret_range").html(html);
-  },
-  interpretation_logic: "Highlights the result of the alternative values along slider. Hover to see alternative output.",
-  clear: function() {
-    this.load_example(this.minimum)
-    this.target.find(".interpret_range").empty();
-  },
-  load_example: function(data) {
-    this.target.find(".slider").slider("option", "value", data)
-    this.target.find(".ui-slider-handle").text(data);
-  }
-}

gradio/static/js/interfaces/input/textbox.js

@@ -1,44 +0,0 @@
-class TextboxInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-  }
-  handleChange(evt) {
-    this.props.handleChange(evt.target.value);
-  }
-  render() {
-    if (this.props.lines > 1) {
-      return (
-        <div>
-          <textarea className="input_text" onChange={this.handleChange}>
-            {this.props.value}
-          </textarea>
-        </div>
-        )
-    } else {
-      return <input type="text" className="input_text" onChange={this.handleChange} value={this.props.value}></input>
-    }
-  }
-  show_interpretation(data) {
-    this.target.find(".input_text").hide();
-    this.target.find(".output_text").show();
-    let html = "";
-    for (let [i, char_set] of data.entries()) {
-      [char, score] = char_set;
-      let color = getSaliencyColor(score);
-      html += `<span className='alternate'
-        alternate_index=${i}
-        style="background-color: ${color}">${char}</span>`
-    }
-    this.target.find(".output_text").html(html);
-  }
-  load_example_preview(data) {
-    if (data.length > 20) {
-      return data.substring(0,20) + "...";
-    }
-    return data;
-  }
-  load_example(data) {
-    this.target.find(".input_text").val(data);    
-  }
-}

gradio/static/js/interfaces/input/video.js

@@ -1,93 +0,0 @@
-const video_input = {
-  html: `
-    <div class="interface_box">
-      <div class="upload_zone drop_zone hide">
-        <div class="input_caption">Drop Video Here<br>- or -<br>Click to Upload</div>
-      </div>
-      <div class="webcam upload_zone hide">
-        <div class="webcam_box">
-        </div>
-        <span>Click to Record!</span>
-      </div>
-      <div class="image_display hide">
-        <div class="view_holders">
-          <div class="image_preview_holder">
-            <video class="image_preview" controls /></video>
-          </div>
-        </div>
-      </div>
-      <input class="hidden_upload" type="file" accept="video/mp4,video/x-m4v,video/*" />
-    </div>
-    `
-    ,
-  init: function(opts) {
-    var io = this;
-    io.target.find(".drop_zone").removeClass("hide");
-    this.target.find(".drop_zone").click(function (e) {
-      io.target.find(".hidden_upload").click();
-    });
-    this.target.on('drag dragstart dragend dragover dragenter dragleave drop',
-        ".drop_zone", function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-    })
-    this.target.on('drop', '.drop_zone', function(e) {
-      files = e.originalEvent.dataTransfer.files;
-      io.load_preview_from_files(files)
-    });
-    this.target.find('.hidden_upload').on('change', function (e) {
-      if (this.files) {
-        io.load_preview_from_files(this.files);
-      }
-    })
-  },
-  submit: function() {
-    var io = this;
-    if (this.state == "VIDEO_LOADED") {
-      io.io_master.input(io.id, this.video_data);
-    } else {
-      io.io_master.no_input();
-    }
-  },
-  clear: function() {
-    this.target.find(".upload_zone").show();
-    this.target.find(".image_preview").attr('src', '');
-    this.target.find(".image_display").addClass("hide");
-    this.target.find(".hidden_upload").prop("value", "")
-    this.state = "NO_VIDEO";
-    this.video_data = null;
-  },
-  state: "NO_VIDEO",
-  video_data: null,
-  set_video_data: function(video_data) {
-    let io = this;
-    io.video_data = video_data
-    io.target.find(".image_preview").attr('src', video_data);
-  },
-  load_preview_from_files: function(files) {
-    if (!files.length || !window.FileReader || !/^video/.test(files[0].type)) {
-      return
-    }
-    var ReaderObj = new FileReader()
-    ReaderObj.readAsDataURL(files[0])
-    ReaderObj.io = this;
-    this.state = "VIDEO_LOADING"
-    ReaderObj.onloadend = function() {
-      let io = this.io;
-      io.target.find(".upload_zone").hide();
-      io.target.find(".image_display").removeClass("hide");
-      io.set_video_data(this.result);
-      io.state = "VIDEO_LOADED"
-    }
-  },
-  load_example: function(example_data) {
-    example_data = this.io_master.example_file_path + example_data;
-    let io = this;
-    toDataURL(example_data, function(data) {
-      io.target.find(".upload_zone").hide();
-      io.target.find(".image_display").removeClass("hide");
-      io.set_video_data(data, /*update_editor=*/true);
-      io.state = "VIDEO_LOADED";
-    })
-  }
-}

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

@@ -1,46 +0,0 @@
-const webcam = {
-  html: `
-    <div class="interface_box">
-      <div class="webcam_box"></div>
-    </div>
-  `,
-  init: function(opts) {
-    var io = this;
-    let w = this.target.find(".webcam_box").width();
-    let h = this.target.find(".webcam_box").height();
-    let RATIO = 4/3;
-    let dim = Math.min(h, w / RATIO);
-    Webcam.set({
-      image_format: 'jpeg',
-      width: dim * RATIO,
-			height: dim,
-      dest_width: dim * RATIO,
-			dest_height: dim,
-    })
-    Webcam.attach(this.target.find(".webcam_box")[0]);
-  },
-  submit: function() {
-    var io = this;
-    Webcam.snap(function(image_data) {
-      io.io_master.input(io.id, image_data);
-    });
-    Webcam.freeze();
-    this.target.find("video").hide();    
-    this.state = "SNAPPED";
-  },
-  clear: function() {
-    if (this.state == "SNAPPED") {
-      this.state = "CAMERA_ON";
-      Webcam.unfreeze();
-      this.target.find("video").show();    
-    }
-  },
-  state: "NOT_STARTED",
-  image_data: null,
-  renderFeatured: function(data) {
-    return `<img src=${data}>`;
-  },
-  loadFeatured: function(data) {
-    return `<img src=${data}>`;
-  }
-}

gradio/static/js/interfaces/output/audio.js

@@ -1,44 +0,0 @@
-const audio_output = {
-  html: `
-    <div class="interface_box">
-      <div class="player hidden">
-        <div class="waveform"></div>
-        <button class="playpause primary">Play / Pause</button>
-      </div>
-    </div
-    `,
-  state: "NO_AUDIO",
-  init: function(opts) {
-    var io = this;
-    this.wavesurfer = WaveSurfer.create({
-      container: io.target.find('.waveform')[0],
-      waveColor: '#888888',
-      progressColor: '#e67e22',
-      barWidth: 3,
-      hideScrollbar: true
-    });
-    this.target.find(".playpause").click(function () {
-      io.wavesurfer.playPause();
-    })
-  },
-  output: function(data) {
-    this.target.find(".player").removeClass("hidden");
-    this.wavesurfer.load(data);
-  },
-  clear: function() {
-    this.target.find(".player").addClass("hidden");
-    if (this.wavesurfer) {
-      this.wavesurfer.stop();
-    }
-  },
-  load_example: function(example_data) {
-    example_data = this.io_master.example_file_path + example_data;
-    let io = this;
-    if (io.state == "NO_AUDIO" || io.state == "RECORDED") {
-      io.clear();
-      toDataURL(example_data, function(data) {
-        io.output(data);
-      })  
-    }
-  },
-}

gradio/static/js/interfaces/output/dataframe.js

@@ -1,55 +0,0 @@
-const dataframe_output = {
-  html: `
-    <div class="interface_max_box">
-      <div class="dataframe"></div>
-    </div>
-  `,
-  init: function(opts) {
-  },
-  output: function(data) {
-    let config = {data: data.data};
-    if (data.headers) {
-      let column_config = [];
-      for (let header of data.headers) {
-        column_config.push({title: header});
-      }
-      config.columns = column_config;
-    }
-    if (this.table) {
-      this.clear();
-    }
-    this.table = this.target.find(".dataframe").jexcel(config);
-  },
-  clear: function() {
-    jexcel.destroy(this.target.find(".dataframe")[0]);
-    this.table = null;
-  },
-  load_example: function(data) {
-    this.output({"data": data});
-  },
-  load_example_preview: function(data) {
-    data = JSON.parse(JSON.stringify(data))
-    let data_copy = [];
-    for (let row of data.slice(0,3)) {
-      new_row = row.slice(0,3)
-      if (row.length > 3) {
-        new_row.push("...");
-      }
-      data_copy.push(new_row);      
-    }
-    if (data.length > 3) {
-      new_row = Array(data_copy[0].length).fill("...");
-      data_copy.push(new_row);      
-    }
-    let html = "<table><tbody>"
-    for (let row of data_copy) {
-      html += "<tr>";
-      for (let cell of row) {
-        html += "<td>" + cell + "</td>";
-      }
-      html += "</tr>";
-    }
-    html += "</tbody></table>";
-    return html;
-  },
-}

gradio/static/js/interfaces/output/file.js

@@ -1,36 +0,0 @@
-const file_output = {
-  html: `
-    <a class="interface_mini_box">
-      <div class="file_display file_download">
-        <div class="file_name"></div>
-        <div class="file_size"></div>
-      </div>
-    </div>
-  `,
-  init: function(opts) {
-  },
-  output: function(data) {
-    this.target.find(".file_name").text(data.name);
-    this.target.find(".file_size").text(prettyBytes(data.size));
-    this.target.find(".interface_mini_box")
-      .attr("href", "data:;base64," + data.data)
-      .attr("download", data.name);
-  },
-  submit: function() {
-  },
-  clear: function() {
-    this.target.find(".file_name").empty();
-    this.target.find(".file_size").empty();
-    this.target.find(".interface_mini_box")
-      .removeAttr("href")
-      .removeAttr("download");
-  },
-  load_example: function(example_data) {
-    example_path = this.io_master.example_file_path + example_data;
-    this.target.find(".file_name").text(example_data);
-    this.target.find(".file_size").empty();
-    this.target.find(".interface_mini_box")
-      .attr("href", example_path)
-      .attr("download", example_data);
-  }
-}

gradio/static/js/interfaces/output/highlighted_text.js

@@ -1,100 +0,0 @@
-const highlighted_text = {
-  html: `
-    <div class="highlight_legend">
-      <div class="color_legend hidden">
-        <span>-1</span>
-        <span>0</span>
-        <span>+1</span>
-      </div>
-      <div class="category_legend hidden"></div>
-    </div>
-    <div class="output_text"></div>
-  `,
-  init: function(opts) {
-    this.color_map = {};
-    if (opts.color_map) {
-      this.generate_category_legend(opts.color_map);
-    }
-  },
-  new_category_index: 0,
-  generate_category_legend: function(map) {
-    let default_colors = ["pink", "lightblue", "gold", "plum", "lightskyblue", "greenyellow", "khaki", "cyan", "moccasin", "lightgray"]
-    for (let category in map) {
-      if (category in this.color_map) {
-        continue;
-      }
-      let color = map[category];
-      if (!color) {
-        if (this.new_category_index < default_colors.length) {
-          color = default_colors[this.new_category_index];
-          this.new_category_index++;
-        } else {
-          function randInt(min, max) {
-            return Math.floor(Math.random() * (max- min) + min);
-          }
-          color = "rgb(" + randInt(128, 240) + ", " + randInt(128, 240) + ", " + randInt(128, 240) + ")" 
-        }
-      }
-      this.color_map[category] = color;
-      this.target.find(".category_legend").append(`
-        <div class="category-label">
-          <div style="background-color:${color}">&nbsp;</div> 
-          ${category}
-        </div>
-      `)
-    }
-  },
-  output: function(data) {
-    if (data.length == 0) {
-      return;
-    } else if (typeof(data[0][1]) == "string") {
-      this.target.find(".category_legend").removeClass("hidden");
-      let new_color_map = {};
-      for (let span of data) {
-        let category = span[1];
-        if (category != null) {
-          new_color_map[category] = null;
-        }
-      }
-      this.generate_category_legend(new_color_map);
-      let html = "";
-      for (let span of data) {
-        let category = span[1];
-        let color = category == null ? "white" : this.color_map[category];
-        html += `<span title="${category}" style="background-color: ${color}">${span[0]}</span>`
-      }
-      this.target.find(".output_text").html(html);
-
-    } else {
-      this.target.find(".color_legend").removeClass("hidden");
-      let html = "";
-      for (let span of data) {
-        let value = span[1];
-        let color = "";
-        if (value < 0) {
-          color = "8,241,255," + (-value);
-        } else {
-          color = "230,126,34," + value;
-        }
-        html += `<span title="${value}" style="background-color: rgba(${color})">${span[0]}</span>`
-      }
-      this.target.find(".output_text").html(html);
-    }
-  },
-  submit: function() {
-  },
-  clear: function() {
-    this.target.find(".output_text").empty();
-    this.target.find(".highlight_legend div").addClass("hidden");
-  },
-  load_example_preview: function(data) {
-    let output_string = "";
-    for (const [text, type] of data) {
-      output_string += text;
-    }
-    if (output_string.length > 20) {
-      return output_string.substring(0,20) + "...";
-    }
-    return data;
-  },
-}

gradio/static/js/interfaces/output/html.js

@@ -1,14 +0,0 @@
-const html_output = {
-  html: ``,
-  init: function(opts) {
-  },
-  output: function(data) {
-    this.target.html(data);
-  },
-  clear: function() {
-    this.target.empty();
-  },
-  load_example_preview: function(data) {
-    return "[html]";
-  },
-}

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

@@ -1,61 +0,0 @@
-const image_output = {
-  html: `
-    <div class="view_holder_parent">
-    <div class="view_holders">
-        <div class="saliency_holder hide">
-          <canvas class="saliency"></canvas>
-        </div>          
-        <div class="output_image_holder hide">
-          <img class="output_image">
-        </div>
-      </div>
-    </div>      
-    `,
-  init: function(opts) {},
-  output: function(data) {
-    let io = this;
-    let [img_data, coord] = data;
-    this.target.find(".view_holder_parent").addClass("interface_box");
-    this.target.find(".output_image_holder").removeClass("hide");
-    img = this.target.find(".output_image").attr('src', img_data);
-    if (coord.length) {
-      img = img[0];
-      img.onload = function() {
-        var size = getObjectFitSize(true, img.width, img.height, img.naturalWidth, img.naturalHeight);
-        var width = size.width;
-        var height = size.height;
-        io.target.find(".saliency_holder").removeClass("hide").html(`
-          <canvas class="saliency" width=${width} height=${height}></canvas>`);
-        var ctx = io.target.find(".saliency")[0].getContext('2d');
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = 'red';
-        ctx.font = '16px monospace';
-        ctx.textBaseline = 'top';        
-        for (let [label, left_x, top_y, right_x, bottom_y] of coord) {
-          ctx.rect(left_x, top_y, right_x - left_x, bottom_y - top_y);
-          ctx.fillText(label, left_x + 2, top_y + 2)
-        }
-        ctx.stroke();
-      }
-    }
-  },
-  clear: function() {
-    this.target.find(".view_holder_parent").removeClass("interface_box");
-    this.target.find(".output_image_holder").addClass("hide");
-    this.target.find(".saliency_holder").addClass("hide");
-    this.target.find(".output_image").attr('src', "")
-  },
-  load_example_preview: function(data) {
-    data = this.io_master.example_file_path + data;
-    return "<img src='"+data+"' height=100>"
-  },
-  load_example: function(example_data) {
-    example_data = this.io_master.example_file_path + example_data;
-    let io = this;
-    toDataURL(example_data, function(data) {
-      io.target.find(".upload_zone").hide();
-      io.target.find(".image_display").removeClass("hide");
-      io.output([data, []]);
-    })
-  }
-}

gradio/static/js/interfaces/output/json.js

@@ -1,21 +0,0 @@
-const json_output = {
-  html: `
-  `,
-  init: function(opts) {
-  },
-  output: function(data) {
-    this.clear();
-    jsonTree.create(data, this.target[0]);
-  },
-  clear: function() {
-    this.target.empty();
-  },
-  load_example_preview: function(data) {
-    json_string = JSON.stringify(data);
-    if (json_string.length > 20) {
-      return json_string.substring(0, 20) + "...";
-    } else {
-      return json_string;
-    }
-  },
-}

gradio/static/js/interfaces/output/key_values.js

@@ -1,35 +0,0 @@
-const key_values = {
-  html: `
-    <table class="key_values">
-      <thead>
-        <th>Property</th>
-        <th>Value</th>
-      </thead>
-      <tbody></tbody>
-    </table>
-    `,
-  init: function(opts) {},
-  output: function(data) {
-    let html = ""
-    for (const [key, value] of data) {
-      html += `<tr>
-        <td>${key}</td>
-        <td>${value}</td>
-      </tr>`;
-    }
-    this.target.find("tbody").html(html);
-  },
-  clear: function() {
-    this.target.find("tbody").empty();
-  },
-  load_example_preview: function(data) {
-    let html_preview = "";
-    for (const [key, value] of data.slice(0,3)) {
-      html_preview += key + ": " + value + "<br>"
-    }
-    if (data.length > 3) {
-      html_preview += "..."
-    }
-    return html_preview;
-  },
-}

gradio/static/js/interfaces/output/label.js

@@ -1,31 +0,0 @@
-class LabelOutput extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    if (this.props.value == null) {
-      return false;
-    }
-    let [labels, confidences] = [[], []];
-    if ("confidences" in this.props.value) {
-      for (let label_confidence of this.props.value["confidences"]) {
-        let confidence = Math.round(label_confidence.confidence * 100) + "%";
-        labels.push(<div className="label" title={label_confidence.label}>{label_confidence.label}</div>);
-        confidences.push(<div className="confidence" style={{minWidth: "calc(" + confidence + " - 12px)", title: confidence}}>{confidence}</div>)
-      }
-    }
-    return (<div>
-      <div className="output_class">{this.props.value["label"]}</div>
-      <div className="confidence_intervals">
-        <div className="labels">{labels}</div>
-        <div className="confidences">{confidences}</div>
-      </div>
-    </div>)
-  }
-  load_example_preview(data) {
-    if (typeof data == "string" && data.length > 20) {
-      return data.substring(0,20) + "...";
-    }
-    return data;
-  }
-}

gradio/static/js/interfaces/output/textbox.js

@@ -1,14 +0,0 @@
-class TextboxOutput extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return <div className="output_text">{this.props.value}</div>
-  }
-  load_example_preview(data) {
-    if (typeof data == "string" && data.length > 20) {
-      return data.substring(0,20) + "...";
-    }
-    return data;
-  }
-}

gradio/static/js/interfaces/output/video.js

@@ -1,32 +0,0 @@
-const video_output = {
-  html: `
-    <div class="view_holder_parent">
-    <div class="view_holders">
-        <div class="output_image_holder hide">
-          <video controls class="output_image">
-        </div>
-      </div>
-    </div>      
-    `,
-  init: function(opts) {},
-  output: function(data) {
-    this.target.find(".view_holder_parent").addClass("interface_box");
-    this.target.find(".output_image_holder").removeClass("hide");
-    this.target.find(".output_image").attr('src', data);
-    console.log(data);
-  },
-  clear: function() {
-    this.target.find(".view_holder_parent").removeClass("interface_box");
-    this.target.find(".output_image_holder").addClass("hide");
-    this.target.find(".output_image").attr('src', "")
-  },
-  load_example: function(example_data) {
-    example_data = this.io_master.example_file_path + example_data;
-    let io = this;
-    toDataURL(example_data, function(data) {
-      io.target.find(".upload_zone").hide();
-      io.target.find(".image_display").removeClass("hide");
-      io.output(data);
-    })
-  }
-}

gradio/static/js/utils.js

@@ -1,208 +0,0 @@
-String.prototype.format = function() {
-  a = this;
-  for (k in arguments) {
-    a = a.replace("{" + k + "}", arguments[k])
-  }
-  return a
-}
-
-function sortWithIndices(toSort) {
-  for (var i = 0; i < toSort.length; i++) {
-    toSort[i] = [toSort[i], i];
-  }
-  toSort.sort(function(left, right) {
-    return left[0] < right[0] ? -1 : 1;
-  });
-  toSort.sortIndices = [];
-  for (var j = 0; j < toSort.length; j++) {
-    toSort.sortIndices.push(toSort[j][1]);
-    toSort[j] = toSort[j][0];
-  }
-  return toSort.sortIndices;
-}
-
-function toDataURL(url, callback) {
-  var xhr = new XMLHttpRequest();
-  xhr.onload = function() {
-    var reader = new FileReader();
-    reader.onloadend = function() {
-      callback(reader.result);
-    }
-    reader.readAsDataURL(xhr.response);
-  };
-  xhr.open('GET', url);
-  xhr.responseType = 'blob';
-  xhr.send();
-}
-
-function resizeImage(base64Str, max_width, max_height, callback) {
-  var img = new Image();
-  img.src = base64Str;
-  var canvas = document.createElement('canvas');
-  img.onload = () => {
-    var width = img.width;
-    var height = img.height;
-
-    if (width > height) {
-      if (width > max_width) {
-        height *= max_width / width;
-        width = max_width;
-      }
-    } else {
-      if (height > max_height) {
-        width *= max_height / height;
-        height = max_height;
-      }
-    }
-    canvas.width = width;
-    canvas.height = height;
-    var ctx = canvas.getContext('2d');
-    ctx.drawImage(img, 0, 0, width, height);
-    callback.call(null, canvas.toDataURL());
-  }
-}
-
-function toStringIfObject(input) {
-  if (input instanceof Object) {
-    return JSON.stringify(input);
-  }
-  return input;
-}
-
-function paintSaliency(data, ctx, width, height) {
-  var cell_width = width / data[0].length
-  var cell_height = height / data.length
-  var r = 0
-  data.forEach(function(row) {
-    var c = 0
-    row.forEach(function(cell) {
-      ctx.fillStyle = getSaliencyColor(cell);
-      ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height);
-      c++;
-    })
-    r++;
-  })
-}
-
-function getBackgroundColors(io_master){
-  //Gets the background colors for the embedding plot
-
-  // If labels aren't loaded, or it's not a label output interface:
-  if (!io_master.loaded_examples || io_master["config"]["output_components"][0][0]!="label") {
-    return 'rgb(54, 162, 235)'
-  }
-
-  // If it is a label interface, get the labels
-  let labels = []
-  let isConfidencesPresent = false;
-  for (let i=0; i<Object.keys(io_master.loaded_examples).length; i++) {
-    let label = io_master.loaded_examples[i][0]["label"];
-    if ("confidences" in io_master.loaded_examples[i][0]){
-      isConfidencesPresent = true;
-    }
-    labels.push(label);
-  }
-  
-  // If they are all numbers, and there are no confidences, then it's a regression
-  const isNumeric = (currentValue) => !isNaN(currentValue);
-  let isNumericArray = labels.every(isNumeric);
-  if (isNumericArray && !isConfidencesPresent) {
-    let backgroundColors = [];
-    labels = labels.map(Number);
-    let max = Math.max(...labels);
-    let min = Math.min(...labels);
-    let rgb_max = [255, 178, 102]
-    let rgb_min = [204, 255, 255]
-    for (let i=0; i<labels.length; i++) {
-      let frac = (Number(labels[i])-min)/(max-min)
-      let color = [rgb_min[0]+frac*(rgb_max[0]-rgb_min[0]),
-                   rgb_min[1]+frac*(rgb_max[1]-rgb_min[1]),
-                   rgb_min[2]+frac*(rgb_max[2]-rgb_min[2])]
-      backgroundColors.push(color);
-    }
-  }
-  
-  // Otherwise, it's a classification
-  let colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#00B3E6', 
-                    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
-                    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
-                    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
-                    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
-                    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
-                    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
-                    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
-                    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
-                    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
-  let backgroundColors = [];
-  let label_list = [];
-  for (let i=0; i<labels.length; i++) {
-    if (!(label_list.includes(labels[i]))){
-      label_list.push(labels[i]);
-    }
-  backgroundColors.push(colorArray[label_list.indexOf(labels[i]) % colorArray.length]);
-  }
-  return backgroundColors
-}
-
-
-function getSaliencyColor(value) {
-  if (value < 0) {
-    var color = [52, 152, 219];
-  } else {
-    var color = [231, 76, 60];
-  }
-  return colorToString(interpolate(Math.abs(value), [255,255,255], color));
-}
-
-function getObjectFitSize(contains /* true = contain, false = cover */, containerWidth, containerHeight, width, height){
-  var doRatio = width / height;
-  var cRatio = containerWidth / containerHeight;
-  var targetWidth = 0;
-  var targetHeight = 0;
-  var test = contains ? (doRatio > cRatio) : (doRatio < cRatio);
-
-  if (test) {
-      targetWidth = containerWidth;
-      targetHeight = targetWidth / doRatio;
-  } else {
-      targetHeight = containerHeight;
-      targetWidth = targetHeight * doRatio;
-  }
-
-  return {
-      width: targetWidth,
-      height: targetHeight,
-      x: (containerWidth - targetWidth) / 2,
-      y: (containerHeight - targetHeight) / 2
-  };
-}
-
-// val should be in the range [0.0, 1.0]
-// rgb1 and rgb2 should be an array of 3 values each in the range [0, 255]
-function interpolate(val, rgb1, rgb2) {
-  if (val > 1) {
-    val = 1;
-  }
-  val = Math.sqrt(val);
-  var rgb = [0,0,0];
-  var i;
-  for (i = 0; i < 3; i++) {
-    rgb[i] = Math.round(rgb1[i] * (1.0 - val) + rgb2[i] * val);
-  }
-  return rgb;
-}
-
-function colorToString(rgb) {
-  return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
-}
-
-function prettyBytes(bytes) {
-  let units = ["B", "KB", "MB", "GB", "PB"];
-  let i = 0;
-  while (bytes > 1024) {
-    bytes /= 1024;
-    i++;
-  }
-  let unit = units[i];
-  return bytes.toFixed(1) + " " + unit;
-}

gradio/static/js/vendor/FileSaver.min.js

@@ -1,2 +0,0 @@
-/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
-var saveAs=saveAs||function(e){"use strict";if(typeof e==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var t=e.document,n=function(){return e.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),o="download"in r,a=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},i=/constructor/i.test(e.HTMLElement)||e.safari,f=/CriOS\/[\d]+/.test(navigator.userAgent),u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},s="application/octet-stream",d=1e3*40,c=function(e){var t=function(){if(typeof e==="string"){n().revokeObjectURL(e)}else{e.remove()}};setTimeout(t,d)},l=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var o=e["on"+t[r]];if(typeof o==="function"){try{o.call(e,n||e)}catch(a){u(a)}}}},p=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){return new Blob([String.fromCharCode(65279),e],{type:e.type})}return e},v=function(t,u,d){if(!d){t=p(t)}var v=this,w=t.type,m=w===s,y,h=function(){l(v,"writestart progress write writeend".split(" "))},S=function(){if((f||m&&i)&&e.FileReader){var r=new FileReader;r.onloadend=function(){var t=f?r.result:r.result.replace(/^data:[^;]*;/,"data:attachment/file;");var n=e.open(t,"_blank");if(!n)e.location.href=t;t=undefined;v.readyState=v.DONE;h()};r.readAsDataURL(t);v.readyState=v.INIT;return}if(!y){y=n().createObjectURL(t)}if(m){e.location.href=y}else{var o=e.open(y,"_blank");if(!o){e.location.href=y}}v.readyState=v.DONE;h();c(y)};v.readyState=v.INIT;if(o){y=n().createObjectURL(t);setTimeout(function(){r.href=y;r.download=u;a(r);h();c(y);v.readyState=v.DONE});return}S()},w=v.prototype,m=function(e,t,n){return new v(e,t||e.name||"download",n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,n){t=t||e.name||"download";if(!n){e=p(e)}return navigator.msSaveOrOpenBlob(e,t)}}w.abort=function(){};w.readyState=w.INIT=0;w.WRITING=1;w.DONE=2;w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null;return m}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define("FileSaver.js",function(){return saveAs})}

gradio/static/js/vendor/black-theme.js

@@ -1,82 +0,0 @@
-var blackTheme = {
-    'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
-    'common.bisize.width': '251px',
-    'common.bisize.height': '21px',
-    'common.backgroundImage': 'none',
-    'common.backgroundColor': '#1e1e1e',
-    'common.border': '0px',
-
-    // header
-    'header.backgroundImage': 'none',
-    'header.backgroundColor': 'transparent',
-    'header.border': '0px',
-
-    // load button
-    'loadButton.backgroundColor': '#fff',
-    'loadButton.border': '1px solid #ddd',
-    'loadButton.color': '#222',
-    'loadButton.fontFamily': '\'Noto Sans\', sans-serif',
-    'loadButton.fontSize': '12px',
-
-    // download button
-    'downloadButton.backgroundColor': '#fdba3b',
-    'downloadButton.border': '1px solid #fdba3b',
-    'downloadButton.color': '#fff',
-    'downloadButton.fontFamily': '\'Noto Sans\', sans-serif',
-    'downloadButton.fontSize': '12px',
-
-    // main icons
-    'menu.normalIcon.path': '../dist/svg/icon-d.svg',
-    'menu.normalIcon.name': 'icon-d',
-    'menu.activeIcon.path': '../dist/svg/icon-b.svg',
-    'menu.activeIcon.name': 'icon-b',
-    'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
-    'menu.disabledIcon.name': 'icon-a',
-    'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
-    'menu.hoverIcon.name': 'icon-c',
-    'menu.iconSize.width': '24px',
-    'menu.iconSize.height': '24px',
-
-    // submenu primary color
-    'submenu.backgroundColor': '#1e1e1e',
-    'submenu.partition.color': '#3c3c3c',
-
-    // submenu icons
-    'submenu.normalIcon.path': '../dist/svg/icon-d.svg',
-    'submenu.normalIcon.name': 'icon-d',
-    'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
-    'submenu.activeIcon.name': 'icon-c',
-    'submenu.iconSize.width': '32px',
-    'submenu.iconSize.height': '32px',
-
-    // submenu labels
-    'submenu.normalLabel.color': '#8a8a8a',
-    'submenu.normalLabel.fontWeight': 'lighter',
-    'submenu.activeLabel.color': '#fff',
-    'submenu.activeLabel.fontWeight': 'lighter',
-
-    // checkbox style
-    'checkbox.border': '0px',
-    'checkbox.backgroundColor': '#fff',
-
-    // range style
-    'range.pointer.color': '#fff',
-    'range.bar.color': '#666',
-    'range.subbar.color': '#d1d1d1',
-
-    'range.disabledPointer.color': '#414141',
-    'range.disabledBar.color': '#282828',
-    'range.disabledSubbar.color': '#414141',
-
-    'range.value.color': '#fff',
-    'range.value.fontWeight': 'lighter',
-    'range.value.fontSize': '11px',
-    'range.value.border': '1px solid #353535',
-    'range.value.backgroundColor': '#151515',
-    'range.title.color': '#fff',
-    'range.title.fontWeight': 'lighter',
-
-    // colorpicker style
-    'colorpicker.button.border': '1px solid #1e1e1e',
-    'colorpicker.title.color': '#fff'
-};