updated PyPi version

demo/image_mod.py

@@ -4,11 +4,13 @@
 
 
 def image_mod(image):
+    if image is None:
+        return "images/lion.jpg"
     return image.rotate(45)
 
 
 iface = gr.Interface(image_mod, 
-             gr.inputs.Image(type="pil"), 
+             gr.inputs.Image(type="pil", optional=True), 
              "image", 
              examples=[
                  ["images/cheetah1.jpg"],

demo/video_flip.py

@@ -4,10 +4,10 @@
 
 
 def video_flip(video):
-    return video[:-4]
+    return video
 
 
-iface = gr.Interface(video_flip, "video",  "video")
+iface = gr.Interface(video_flip, gr.inputs.Video(type=None),  "video")
 
 if __name__ == "__main__":
     iface.launch()

frontend/src/components/input/video.jsx

@@ -90,11 +90,9 @@ class VideoInput extends BaseComponent {
 class VideoInputExample extends ComponentExample {
   render() {
     return (
-      <video
-        className="input_radio_example"
-        src={this.props.value}
-        controls
-      ></video>
+      <span className="input_video_example">
+        {this.props.value}
+      </span>
     );
   }
 }

frontend/src/gradio.jsx

@@ -91,7 +91,7 @@ export class GradioInterface extends React.Component {
   submit = () => {
     let input_state = [];
     for (let i = 0; i < this.props.input_components.length; i++) {
-      if (this.state[i] === null) {
+      if (this.state[i] === null && this.props.input_components[i].optional !== true) {
         return;
       }
       input_state[i] = this.state[i];
@@ -390,37 +390,10 @@ class GradioInterfaceExamples extends React.Component {
     return (
       <div className="examples">
         <h4>Examples</h4>
-        <div className="examples_control">
-          <button className="load_prev examples-content">
-            Load Previous{" "}
-            <div className="shortcut">
-              CTRL +{" "}
-              <span
-                style={{ display: "inline-block", transform: "scale(-1, 1)" }}
-              >
-                &#10140;
-              </span>
-            </div>
-          </button>
-          <button className="load_next examples-content">
-            Load Next <div className="shortcut">CTRL + &#10140;</div>
-          </button>
-          <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 className="pages hidden">Page:</div>
-        <table className="examples_table">
+        <table className={classNames("examples_table", {
+          "gallery": this.props.input_components.length === 1
+        })}>
           <thead>
             <tr>
               {this.props.input_components.map((component, i) => {

frontend/src/themes/defaults.scss

@@ -114,9 +114,6 @@
         h4 {
             @apply text-lg font-semibold my-2;
         }
-        .examples_control {
-            @apply hidden flex hidden gap-2;
-        }
         .examples_control_left {
             @apply flex gap-2;
         }
@@ -126,7 +123,7 @@
         .examples_control button {
             @apply bg-gray-100 hover:bg-gray-200 p-2;
         }
-        .examples_table {
+        .examples_table:not(.gallery) {
             @apply table-auto p-2 bg-gray-100 mt-4 rounded;
             tbody tr {
                 @apply cursor-pointer;
@@ -145,6 +142,24 @@
                 @apply py-2 px-4;
             }
         }
+        .examples_table.gallery {
+            @apply block;
+            tbody {
+                @apply flex gap-2 flex-wrap ;
+            }
+            thead {
+                @apply hidden;
+            }
+            tbody td:hover {
+                @apply bg-yellow-500 text-white;
+            }
+            tbody tr.selected {
+                @apply font-bold;
+            }
+            td {
+                @apply cursor-pointer p-2 rounded bg-gray-100;
+            }
+        }
     }
     /* Input Components */
     .input_text {

frontend/src/themes/huggingface.scss

@@ -78,8 +78,8 @@
         .examples_control button {
             @apply bg-gray-100 hover:bg-gray-200 p-2;
         }
-        .examples_table {
-            @apply table-auto p-2 bg-gray-50 mt-4 rounded;
+        .examples_table:not(.gallery) {
+            @apply table-auto p-2 bg-gray-100 mt-4 rounded;
             tbody tr {
                 @apply cursor-pointer;
             }
@@ -97,6 +97,24 @@
                 @apply py-2 px-4;
             }
         }
+        .examples_table.gallery {
+            @apply block;
+            tbody {
+                @apply flex gap-2 flex-wrap ;
+            }
+            thead {
+                @apply hidden;
+            }
+            tbody td:hover {
+                @apply bg-indigo-500 text-white;
+            }
+            tbody tr.selected {
+                @apply font-bold;
+            }
+            td {
+                @apply cursor-pointer p-2 rounded bg-gray-100;
+            }
+        }
     }
     /* Input Components */
     .input_text {
@@ -359,6 +377,18 @@
             @apply text-2xl p-2;
         }
     }
+    .input_timeseries {
+        @apply w-full h-96;
+        .upload_zone {
+            @apply border-8 border-gray-300 border-dashed w-full h-full flex justify-center items-center text-3xl text-gray-400 text-center cursor-pointer leading-10;
+        }
+        .file_preview_holder {
+            @apply w-full h-full flex flex-col justify-center items-center relative inline-block;
+        }
+        .js-plotly-plot, .plotly.js-plotly-plot * {
+            position: static !important;
+        } 
+    }
     /* Output Components */
     .output_text {
         word-break: break-word;

gradio.egg-info/PKG-INFO

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

gradio/frontend/asset-manifest.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "main.css": "/static/css/main.0a917430.css",
+    "main.css": "/static/css/main.8fde07f5.css",
     "main.js": "/static/bundle.js",
     "index.html": "/index.html",
     "static/bundle.js.LICENSE.txt": "/static/bundle.js.LICENSE.txt",
@@ -9,7 +9,7 @@
   },
   "entrypoints": [
     "static/bundle.css",
-    "static/css/main.0a917430.css",
+    "static/css/main.8fde07f5.css",
     "static/bundle.js"
   ]
 }

gradio/frontend/index.html

@@ -8,4 +8,4 @@
       window.config = {{ config|tojson }};
     } catch (e) {
       window.config = {};
-    }</script><script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script><title>Gradio</title><link href="static/bundle.css" rel="stylesheet"><link href="static/css/main.0a917430.css" rel="stylesheet"></head><body style="height:100%"><div id="root" style="height:100%"></div><script src="static/bundle.js"></script></body></html>
+    }</script><script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script><title>Gradio</title><link href="static/bundle.css" rel="stylesheet"><link href="static/css/main.8fde07f5.css" rel="stylesheet"></head><body style="height:100%"><div id="root" style="height:100%"></div><script src="static/bundle.js"></script></body></html>

gradio/inputs.py

@@ -642,7 +642,7 @@ class Image(InputComponent):
     Input type: Union[numpy.array, PIL.Image, file-object]
     """
 
-    def __init__(self, shape=None, image_mode='RGB', invert_colors=False, source="upload", tool="editor", labeled_segments=False, type="numpy", label=None):
+    def __init__(self, shape=None, image_mode='RGB', invert_colors=False, source="upload", tool="editor", type="numpy", label=None, optional=False):
         '''
         Parameters:
         shape (Tuple[int, int]): (width, height) shape to crop and resize image to; if None, matches input image size.
@@ -652,13 +652,15 @@ def __init__(self, shape=None, image_mode='RGB', invert_colors=False, source="up
         tool (str): Tools used for editing. "editor" allows a full screen editor, "select" provides a cropping and zoom tool.
         type (str): Type of value to be returned by component. "numpy" returns a numpy array with shape (width, height, 3) and values from 0 to 255, "pil" returns a PIL image object, "file" returns a temporary file object whose path can be retrieved by file_obj.name.
         label (str): component name in interface.
+        optional (bool): If True, the interface can be submitted with no uploaded image, in which case the input value is None.
         '''
         self.shape = shape
         self.image_mode = image_mode
         self.source = source
         requires_permissions = source == "webcam" 
         self.tool = tool
         self.type = type
+        self.optional = optional
         self.invert_colors = invert_colors
         self.test_input = test_data.BASE64_IMAGE
         self.interpret_by_tokens = True
@@ -678,10 +680,13 @@ def get_template_context(self):
             "shape": self.shape,
             "source": self.source,
             "tool": self.tool,
+            "optional": self.optional,
             **super().get_template_context()
         }
 
     def preprocess(self, x):
+        if x is None:
+            return x
         im = processing_utils.decode_base64_to_image(x)
         fmt = im.format
         with warnings.catch_warnings():
@@ -817,13 +822,15 @@ class Video(InputComponent):
     Input type: filepath
     """
 
-    def __init__(self, type="avi", label=None):
+    def __init__(self, type="avi", label=None, optional=False):
         '''
         Parameters:
         type (str): Type of video format to be returned by component, such as 'avi' or 'mp4'. If set to None, video will keep uploaded format.
         label (str): component name in interface.
+        optional (bool): If True, the interface can be submitted with no uploaded video, in which case the input value is None.
         '''
         self.type = type
+        self.optional = optional
         super().__init__(label)
 
     @classmethod
@@ -834,10 +841,13 @@ def get_shortcut_implementations(cls):
 
     def get_template_context(self):
         return {
+            "optional": self.optional,
             **super().get_template_context()
         }
 
     def preprocess(self, x):
+        if x is None:
+            return x
         file = processing_utils.decode_base64_to_file(x)
         file_name = file.name
         uploaded_format = file_name.split(".")[-1].lower()
@@ -865,23 +875,26 @@ class Audio(InputComponent):
     Input type: Union[Tuple[int, numpy.array], file-object, numpy.array]
     """
 
-    def __init__(self, source="upload", type="numpy", label=None):
+    def __init__(self, source="upload", type="numpy", label=None, optional=False):
         """
         Parameters:
         source (str): Source of audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input.
         type (str): Type of value to be returned by component. "numpy" returns a 2-set tuple with an integer sample_rate and the data numpy.array of shape (samples, 2), "file" returns a temporary file object whose path can be retrieved by file_obj.name, "mfcc" returns the mfcc coefficients of the input audio.
         label (str): component name in interface.
+        optional (bool): If True, the interface can be submitted with no uploaded audio, in which case the input value is None.
         """
         self.source = source
         requires_permissions = source == "microphone" 
         self.type = type
+        self.optional = optional
         self.test_input = test_data.BASE64_AUDIO
         self.interpret_by_tokens = True
         super().__init__(label, requires_permissions)
 
     def get_template_context(self):
         return {
             "source": self.source,
+            "optional": self.optional,
             **super().get_template_context()
         }
 
@@ -896,6 +909,8 @@ def preprocess(self, x):
         """
         By default, no pre-processing is applied to a microphone input file
         """
+        if x is None:
+            return x
         file_obj = processing_utils.decode_base64_to_file(x)
         if self.type == "file":
             return file_obj
@@ -1009,23 +1024,26 @@ class File(InputComponent):
     Input type: Union[file-object, bytes, List[Union[file-object, bytes]]]
     """
 
-    def __init__(self, file_count="single", type="file", label=None, keep_filename=True):
+    def __init__(self, file_count="single", type="file", label=None, keep_filename=True, optional=False):
         '''
         Parameters:
         file_count (str): if single, allows user to upload one file. If "multiple", user uploads multiple files. If "directory", user uploads all files in selected directory. Return type will be list for each file in case of "multiple" or "directory".
         type (str): Type of value to be returned by component. "file" returns a temporary file object whose path can be retrieved by file_obj.name, "binary" returns an bytes object.
-        keep_filename (bool): whether to keep the original filename in the f.name field upon upload. If true, will place 'originalfilename' + a '_' before the unique temporary safe filename string and extension
         label (str): component name in interface.
+        keep_filename (bool): whether to keep the original filename in the f.name field upon upload. If true, will place 'originalfilename' + a '_' before the unique temporary safe filename string and extension
+        optional (bool): If True, the interface can be submitted with no uploaded image, in which case the input value is None.
         '''
         self.file_count = file_count
         self.type = type
         self.test_input = None
         self.keep_filename = keep_filename
+        self.optional = optional
         super().__init__(label)
 
     def get_template_context(self):
         return {
             "file_count": self.file_count,
+            "optional": self.optional,
             **super().get_template_context()
         }
 
@@ -1037,6 +1055,8 @@ def get_shortcut_implementations(cls):
         }
 
     def preprocess(self, x):
+        if x is None:
+            return None
         def process_single_file(f):
             name, data, is_local_example = f["name"], f["data"], f["is_local_example"]            
             if self.type == "file":

gradio/version.txt

@@ -1 +1 @@
-2.2.14
+2.2.15

setup.py

@@ -5,7 +5,7 @@
 
 setup(
     name='gradio',
-    version='2.2.14',
+    version='2.2.15',
     include_package_data=True,
     description='Python library for easily interacting with trained machine learning models',
     author='Abubakar Abid',