gradio 2.0

.gitignore

@@ -26,4 +26,3 @@ demo/flagged
 test.txt
 build/
 gradio/launches.json
-gradio/frontend/

demo/calculator.py

@@ -26,4 +26,4 @@ iface = gr.Interface(calculator,
 )
 
 if __name__ == "__main__":
-    iface.launch()
+    iface.launch(share=True)

frontend/public/index.html

@@ -24,6 +24,7 @@
     }
     gtag('js', new Date());
     gtag('config', 'UA-156449732-1');
+    window.config = {{ config|tojson }};
   </script>
 
   <title>Gradio</title>

frontend/src/gradio.jsx

@@ -98,7 +98,7 @@ export class GradioInterface extends React.Component {
       }
       input_state[i] = this.state[i];
     }
-    this.setState({ "submitting": true, "has_changed": false });
+    this.setState({ "submitting": true, "has_changed": false, "error": 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()) {

frontend/src/index.jsx

@@ -2,21 +2,29 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import GradioInterface from './gradio';
 
-fetch(process.env.REACT_APP_BACKEND_URL + "/config")
-  .then(config => config.json())
-  .then(config => {
-    let fn = async (data, action) => {
-      const output = await fetch(process.env.REACT_APP_BACKEND_URL + "/api/" + action + "/", {
-        method: "POST",
-        body: JSON.stringify({ "data": data }),
-        headers: {
-          'Content-Type': 'application/json',
-        }
-      });
-      return await output.json();
-    }  
-    ReactDOM.render(
-      <GradioInterface {...config} fn={fn} />,
-      document.getElementById('root')
-    );    
-  })
+let fn = async (data, action) => {
+  const output = await fetch(process.env.REACT_APP_BACKEND_URL + "/api/" + action + "/", {
+    method: "POST",
+    body: JSON.stringify({ "data": data }),
+    headers: {
+      'Content-Type': 'application/json',
+    }
+  });
+  return await output.json();
+}
+
+if (process.env.REACT_APP_BACKEND_URL) { // dev mode
+  fetch(process.env.REACT_APP_BACKEND_URL + "/config")
+    .then(config => config.json())
+    .then(config => {
+      ReactDOM.render(
+        <GradioInterface {...config} fn={fn} />,
+        document.getElementById('root')
+      );
+    })
+} else { // prod mode
+  ReactDOM.render(
+    <GradioInterface {...window.config} fn={fn} />,
+    document.getElementById('root')
+  );
+}

gradio.egg-info/SOURCES.txt

@@ -38,8 +38,8 @@ gradio/frontend/static/js/3.66c6a8f4.chunk.js
 gradio/frontend/static/js/3.66c6a8f4.chunk.js.map
 gradio/frontend/static/js/4.0a51054c.chunk.js
 gradio/frontend/static/js/4.0a51054c.chunk.js.map
-gradio/frontend/static/js/main.535df397.chunk.js
-gradio/frontend/static/js/main.535df397.chunk.js.map
+gradio/frontend/static/js/main.c3f3a6fd.chunk.js
+gradio/frontend/static/js/main.c3f3a6fd.chunk.js.map
 gradio/frontend/static/js/runtime-main.86797e02.js
 gradio/frontend/static/js/runtime-main.86797e02.js.map
 gradio/frontend/static/media/logo_loading.e93acd82.gif

gradio/frontend/asset-manifest.json

@@ -0,0 +1,29 @@
+{
+  "files": {
+    "main.js": "/static/js/main.c3f3a6fd.chunk.js",
+    "main.js.map": "/static/js/main.c3f3a6fd.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.86797e02.js",
+    "runtime-main.js.map": "/static/js/runtime-main.86797e02.js.map",
+    "static/css/2.c6f1eff9.chunk.css": "/static/css/2.c6f1eff9.chunk.css",
+    "static/js/2.0081c136.chunk.js": "/static/js/2.0081c136.chunk.js",
+    "static/js/2.0081c136.chunk.js.map": "/static/js/2.0081c136.chunk.js.map",
+    "static/css/3.9a5b5cea.chunk.css": "/static/css/3.9a5b5cea.chunk.css",
+    "static/js/3.66c6a8f4.chunk.js": "/static/js/3.66c6a8f4.chunk.js",
+    "static/js/3.66c6a8f4.chunk.js.map": "/static/js/3.66c6a8f4.chunk.js.map",
+    "static/css/4.fae94bce.chunk.css": "/static/css/4.fae94bce.chunk.css",
+    "static/js/4.0a51054c.chunk.js": "/static/js/4.0a51054c.chunk.js",
+    "static/js/4.0a51054c.chunk.js.map": "/static/js/4.0a51054c.chunk.js.map",
+    "index.html": "/index.html",
+    "static/css/2.c6f1eff9.chunk.css.map": "/static/css/2.c6f1eff9.chunk.css.map",
+    "static/css/3.9a5b5cea.chunk.css.map": "/static/css/3.9a5b5cea.chunk.css.map",
+    "static/css/4.fae94bce.chunk.css.map": "/static/css/4.fae94bce.chunk.css.map",
+    "static/js/2.0081c136.chunk.js.LICENSE.txt": "/static/js/2.0081c136.chunk.js.LICENSE.txt",
+    "static/media/logo_loading.e93acd82.gif": "/static/media/logo_loading.e93acd82.gif"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.86797e02.js",
+    "static/css/2.c6f1eff9.chunk.css",
+    "static/js/2.0081c136.chunk.js",
+    "static/js/main.c3f3a6fd.chunk.js"
+  ]
+}

gradio/frontend/index.html

@@ -0,0 +1,7 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta property="og:url" content="https://gradio.app/"/><meta property="og:type" content="website"/><meta property="og:image" content="{{ config['thumbnail'] or '' }}"/><meta property="og:title" content="{{ config['title'] or '' }}"/><meta property="og:description" content="{{ config['description'] or '' }}"/><meta name="twitter:card" content="summary_large_image"><meta name="twitter:creator" content="@teamGradio"><meta name="twitter:title" content="{{ config['title'] or '' }}"><meta name="twitter:description" content="{{ config['description'] or '' }}"><meta name="twitter:image" content="{{ config['thumbnail'] or '' }}"><script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script><script>window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', 'UA-156449732-1');
+    window.config = {{ config|tojson }};</script><title>Gradio</title><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><link href="/static/css/2.c6f1eff9.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(e){function t(t){for(var n,o,i=t[0],c=t[1],l=t[2],s=0,p=[];s<i.length;s++)o=i[s],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&p.push(a[o][0]),a[o]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,o=1;o<r.length;o++){var c=r[o];0!==a[c]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},a={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.e=function(e){var t=[];o[e]?t.push(o[e]):0!==o[e]&&{3:1,4:1}[e]&&t.push(o[e]=new Promise((function(t,r){for(var n="static/css/"+({}[e]||e)+"."+{3:"9a5b5cea",4:"fae94bce"}[e]+".chunk.css",a=i.p+n,u=document.getElementsByTagName("link"),c=0;c<u.length;c++){var l=(f=u[c]).getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(l===n||l===a))return t()}var s=document.getElementsByTagName("style");for(c=0;c<s.length;c++){var f;if((l=(f=s[c]).getAttribute("data-href"))===n||l===a)return t()}var p=document.createElement("link");p.rel="stylesheet",p.type="text/css",p.onload=t,p.onerror=function(t){var n=t&&t.target&&t.target.src||a,u=new Error("Loading CSS chunk "+e+" failed.\n("+n+")");u.code="CSS_CHUNK_LOAD_FAILED",u.request=n,delete o[e],p.parentNode.removeChild(p),r(u)},p.href=a,document.getElementsByTagName("head")[0].appendChild(p)})).then((function(){o[e]=0})));var r=a[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=a[e]=[t,n]}));t.push(r[2]=n);var u,c=document.createElement("script");c.charset="utf-8",c.timeout=120,i.nc&&c.setAttribute("nonce",i.nc),c.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"66c6a8f4",4:"0a51054c"}[e]+".chunk.js"}(e);var l=new Error;u=function(t){c.onerror=c.onload=null,clearTimeout(s);var r=a[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",l.name="ChunkLoadError",l.type=n,l.request=o,r[1](l)}a[e]=void 0}};var s=setTimeout((function(){u({type:"timeout",target:c})}),12e4);c.onerror=c.onload=u,document.head.appendChild(c)}return Promise.all(t)},i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/",i.oe=function(e){throw console.error(e),e};var c=this.webpackJsonptestapp=this.webpackJsonptestapp||[],l=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var f=l;r()}([])</script><script src="/static/js/2.0081c136.chunk.js"></script><script src="/static/js/main.c3f3a6fd.chunk.js"></script></body></html>

gradio/frontend/static/js/2.0081c136.chunk.js.LICENSE.txt

@@ -0,0 +1,72 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
+
+/*! exports provided: default */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/*! no static exports found */
+
+/*! react */
+
+/*!******************************!*\
+        !*** ./src/react-webcam.tsx ***!
+        \******************************/
+
+/*!**************************************************************************************!*\
+        !*** external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} ***!
+        \**************************************************************************************/
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

gradio/frontend/static/js/3.66c6a8f4.chunk.js

@@ -0,0 +1,2 @@
+(this.webpackJsonptestapp=this.webpackJsonptestapp||[]).push([[3],{107:function(p,s,t){}}]);
+//# sourceMappingURL=3.66c6a8f4.chunk.js.map

gradio/frontend/static/js/3.66c6a8f4.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"static/js/3.66c6a8f4.chunk.js","sourceRoot":""}

gradio/frontend/static/js/4.0a51054c.chunk.js

@@ -0,0 +1,2 @@
+(this.webpackJsonptestapp=this.webpackJsonptestapp||[]).push([[4],{108:function(p,s,t){}}]);
+//# sourceMappingURL=4.0a51054c.chunk.js.map

gradio/frontend/static/js/4.0a51054c.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"static/js/4.0a51054c.chunk.js","sourceRoot":""}

gradio/frontend/static/js/runtime-main.86797e02.js

@@ -0,0 +1,2 @@
+!function(e){function t(t){for(var n,o,i=t[0],c=t[1],l=t[2],s=0,p=[];s<i.length;s++)o=i[s],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&p.push(a[o][0]),a[o]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,o=1;o<r.length;o++){var c=r[o];0!==a[c]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},a={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.e=function(e){var t=[];o[e]?t.push(o[e]):0!==o[e]&&{3:1,4:1}[e]&&t.push(o[e]=new Promise((function(t,r){for(var n="static/css/"+({}[e]||e)+"."+{3:"9a5b5cea",4:"fae94bce"}[e]+".chunk.css",a=i.p+n,u=document.getElementsByTagName("link"),c=0;c<u.length;c++){var l=(f=u[c]).getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(l===n||l===a))return t()}var s=document.getElementsByTagName("style");for(c=0;c<s.length;c++){var f;if((l=(f=s[c]).getAttribute("data-href"))===n||l===a)return t()}var p=document.createElement("link");p.rel="stylesheet",p.type="text/css",p.onload=t,p.onerror=function(t){var n=t&&t.target&&t.target.src||a,u=new Error("Loading CSS chunk "+e+" failed.\n("+n+")");u.code="CSS_CHUNK_LOAD_FAILED",u.request=n,delete o[e],p.parentNode.removeChild(p),r(u)},p.href=a,document.getElementsByTagName("head")[0].appendChild(p)})).then((function(){o[e]=0})));var r=a[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=a[e]=[t,n]}));t.push(r[2]=n);var u,c=document.createElement("script");c.charset="utf-8",c.timeout=120,i.nc&&c.setAttribute("nonce",i.nc),c.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"66c6a8f4",4:"0a51054c"}[e]+".chunk.js"}(e);var l=new Error;u=function(t){c.onerror=c.onload=null,clearTimeout(s);var r=a[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",l.name="ChunkLoadError",l.type=n,l.request=o,r[1](l)}a[e]=void 0}};var s=setTimeout((function(){u({type:"timeout",target:c})}),12e4);c.onerror=c.onload=u,document.head.appendChild(c)}return Promise.all(t)},i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/",i.oe=function(e){throw console.error(e),e};var c=this.webpackJsonptestapp=this.webpackJsonptestapp||[],l=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var f=l;r()}([]);
+//# sourceMappingURL=runtime-main.86797e02.js.map

gradio/networking.py

@@ -38,12 +38,12 @@ GRADIO_FEATURE_ANALYTICS_URL = "https://api.gradio.app/gradio-feature-analytics/
 
 STATIC_TEMPLATE_LIB = pkg_resources.resource_filename("gradio", "frontend/")
 STATIC_PATH_LIB = pkg_resources.resource_filename("gradio", "frontend/static")
-GRADIO_STATIC_ROOT = "https://gradio.app"
+GRADIO_STATIC_ROOT = "https://gradio.app/static/"
 
 app = Flask(__name__,
             template_folder=STATIC_TEMPLATE_LIB,
-            static_folder=STATIC_PATH_LIB,
-            static_url_path="/static/")
+            static_folder="",
+            static_url_path="/none/")
 CORS(app)
 cache_buster = CacheBuster(
     config={'extensions': ['.js', '.css'], 'hash_size': 5})
@@ -124,8 +124,14 @@ def get_first_available_port(initial, final):
 @app.route("/", methods=["GET"])
 @login_check
 def main():
-    return render_template("index.html")
+    return render_template("index.html", config=app.interface.config)
 
+@app.route("/static/<path:path>", methods=["GET"])
+def static_resource(path):
+    if app.interface.share:
+        return redirect(GRADIO_STATIC_ROOT + path)
+    else:
+        return send_file(os.path.join(STATIC_PATH_LIB, path))
 
 @app.route('/login', methods=["GET", "POST"])
 def login():