updated PyPi version

frontend/src/gradio.jsx

@@ -60,8 +60,8 @@ export class GradioInterface extends React.Component {
       process.env.REACT_APP_BACKEND_URL +
       (this.props.examples_dir === null
         ? "file" +
-          this.props.examples_dir +
+        this.props.examples_dir +
-          (this.props.examples_dir.endswith("/") ? "" : "/")
+        (this.props.examples_dir.endswith("/") ? "" : "/")
         : "file");
   }
   get_default_state = () => {
@@ -203,10 +203,10 @@ export class GradioInterface extends React.Component {
         i < this.props.input_components.length
           ? input_component_map[this.props.input_components[i].name][1]
           : output_component_map[
-              this.props.output_components[
+          this.props.output_components[
-                i - this.props.input_components.length
+            i - this.props.input_components.length
-              ].name
+          ].name
-            ][1];
+          ][1];
       state_change[i] = ExampleComponent.preprocess(
         item,
         this.examples_dir
@@ -232,13 +232,7 @@ export class GradioInterface extends React.Component {
     }
     return (
       <div className="gradio_interface" theme={this.props.theme}>
-        <div
+        <div className={classNames("panels", this.props.layout)}>
-          className={classNames("panels", {
-            "items-start": this.props.layout === "unaligned",
-            "items-stretch": this.props.layout !== "unaligned",
-            "flex-col": this.props.layout === "vertical"
-          })}
-        >
           <div
             className={classNames("panel", {
               flex: this.props.layout === "horizontal",
@@ -426,14 +420,14 @@ class GradioInterfaceExamples extends React.Component {
                 return <th key={i}>{component.label}</th>;
               })}
               {this.props.examples[0].length >
-              this.props.input_components.length
+                this.props.input_components.length
                 ? this.props.output_components.map((component, i) => {
-                    return (
+                  return (
-                      <th key={i + this.props.input_components.length}>
+                    <th key={i + this.props.input_components.length}>
-                        {component.label}
+                      {component.label}
-                      </th>
+                    </th>
-                    );
+                  );
-                  })
+                })
                 : false}
             </tr>
           </thead>
@@ -450,7 +444,7 @@ class GradioInterfaceExamples extends React.Component {
                   {example_row.map((example_data, j) => {
                     let ExampleComponent =
                       input_component_map[
-                        this.props.input_components[j].name
+                      this.props.input_components[j].name
                       ][1];
                     return (
                       <td>

frontend/src/themes/compact.scss

@@ -16,6 +16,15 @@ html {
     .panels {
         @apply flex flex-wrap justify-center gap-4;
     }
+    .panels.unaligned {
+        @apply flex-col sm:flex-row items-stretch sm:items-start
+    }
+    .panels.horizontal {
+        @apply flex-col sm:flex-row items-stretch;
+    }
+    .panels.vertical {
+        @apply flex-col items-stretch;
+    }
     .panel {
         @apply flex-1;
     }

frontend/src/themes/defaults.scss

@@ -53,6 +53,15 @@
     .panels {
         @apply flex flex-wrap justify-center gap-4;
     }
+    .panels.unaligned {
+        @apply flex-col sm:flex-row items-stretch sm:items-start
+    }
+    .panels.horizontal {
+        @apply flex-col sm:flex-row items-stretch;
+    }
+    .panels.vertical {
+        @apply flex-col items-stretch;
+    }
     .panel {
         @apply flex-1;
     }

frontend/src/themes/huggingface.scss

@@ -12,6 +12,15 @@
     .panels {
         @apply flex flex-wrap justify-center gap-4;
     }
+    .panels.unaligned {
+        @apply flex-col sm:flex-row items-stretch sm:items-start
+    }
+    .panels.horizontal {
+        @apply flex-col sm:flex-row items-stretch;
+    }
+    .panels.vertical {
+        @apply flex-col items-stretch;
+    }
     .panel {
         @apply flex-1;
     }

gradio.egg-info/SOURCES.txt

@@ -34,6 +34,7 @@ gradio/frontend/static/bundle.js.LICENSE.txt
 gradio/frontend/static/bundle.js.map
 gradio/frontend/static/css/main.1c7a53e3.css
 gradio/frontend/static/css/main.1c7a53e3.css.map
+gradio/frontend/static/css/main.22c25130.css
 gradio/frontend/static/css/main.2ed025e4.css
 gradio/frontend/static/css/main.2ed025e4.css.map
 gradio/frontend/static/css/main.b74df5ce.css

gradio/frontend/asset-manifest.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "main.css": "/static/css/main.cb3c60d6.css",
+    "main.css": "/static/css/main.22c25130.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.cb3c60d6.css",
+    "static/css/main.22c25130.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.cb3c60d6.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.22c25130.css" rel="stylesheet"></head><body style="height:100%"><div id="root" style="height:100%"></div><script src="static/bundle.js"></script></body></html>

gradio/version.txt

@@ -1 +1 @@
-2.2.9a
+2.2.9.a2

setup.py

@@ -5,7 +5,7 @@ except ImportError:
 
 setup(
     name='gradio',
-    version='2.2.9a',
+    version='2.2.9.a2',
     include_package_data=True,
     description='Python library for easily interacting with trained machine learning models',
     author='Abubakar Abid',