From 516d8a6ece9c295a50d57de8ea9dd75ea851b80c Mon Sep 17 00:00:00 2001 From: Ali Abid Date: Thu, 22 Jul 2021 11:17:55 -0700 Subject: [PATCH] screenshot fixes --- frontend/public/index.html | 1 - frontend/src/gradio.jsx | 14 ++++++++++---- frontend/src/interfaces/input/dropdown.jsx | 4 ++-- frontend/src/themes/compact.scss | 7 ++----- frontend/src/themes/defaults.scss | 7 ++----- frontend/src/themes/huggingface.scss | 7 ++----- gradio.egg-info/SOURCES.txt | 6 ++++++ gradio.egg-info/requires.txt | 22 +++++++++++----------- gradio/frontend/asset-manifest.json | 6 +++--- gradio/frontend/index.html | 2 +- gradio/interface.py | 2 +- 11 files changed, 40 insertions(+), 38 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index 59011e5a0d..cffa5cae71 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -33,7 +33,6 @@ Gradio - diff --git a/frontend/src/gradio.jsx b/frontend/src/gradio.jsx index aadf13017e..1600988aad 100644 --- a/frontend/src/gradio.jsx +++ b/frontend/src/gradio.jsx @@ -92,7 +92,7 @@ export class GradioInterface extends React.Component { } for (let i = 0; i < this.props.output_components.length; i++) { component_state["output_data"].push(this.state[this.props.input_components.length + i]); - } + } } this.setState({ "just_flagged": true }); window.setTimeout(() => { @@ -127,7 +127,7 @@ export class GradioInterface extends React.Component { this.setState({ "interpretation": null }); } takeScreenshot() { - html2canvas(ReactDOM.findDOMNode(this)).then(canvas => { + html2canvas(ReactDOM.findDOMNode(this).parentNode).then(canvas => { saveAs(canvas.toDataURL(), 'screenshot.png'); }); } @@ -167,7 +167,10 @@ export class GradioInterface extends React.Component { "items-stretch": this.props.layout !== "unaligned", "flex-col": this.props.layout === "vertical", })}> -
+
{this.props.input_components.map((component, index) => { const Component = input_component_map[component.name][0]; @@ -185,7 +188,10 @@ export class GradioInterface extends React.Component { }
-
+
{status} diff --git a/frontend/src/interfaces/input/dropdown.jsx b/frontend/src/interfaces/input/dropdown.jsx index f55a4b2258..bc630cab97 100644 --- a/frontend/src/interfaces/input/dropdown.jsx +++ b/frontend/src/interfaces/input/dropdown.jsx @@ -15,8 +15,8 @@ class DropdownInput extends React.Component { return (
{this.props.interpretation === null ?
-
    diff --git a/frontend/src/themes/compact.scss b/frontend/src/themes/compact.scss index bdf3ef3ca3..725926350a 100644 --- a/frontend/src/themes/compact.scss +++ b/frontend/src/themes/compact.scss @@ -20,7 +20,7 @@ html { @apply flex-1; } .component_set { - @apply bg-gray-50 p-2 rounded flex flex-col gap-2; + @apply bg-gray-50 p-2 rounded flex flex-col flex-1 gap-2; } .panel_header { @apply mb-1 uppercase text-sm font-semibold; @@ -269,11 +269,8 @@ html { .selector { @apply bg-gray-200 text-gray-700 py-2 px-4 font-semibold rounded inline-flex items-center; } - .current { - @apply mr-1; - } .caret { - @apply fill-current h-4 w-4; + @apply ml-1 fill-current h-4 w-4; } .dropdown_menu { @apply absolute hidden text-gray-700 pt-1 max-h-80 overflow-y-auto z-10; diff --git a/frontend/src/themes/defaults.scss b/frontend/src/themes/defaults.scss index dffd287d51..d82a328e2d 100644 --- a/frontend/src/themes/defaults.scss +++ b/frontend/src/themes/defaults.scss @@ -48,7 +48,7 @@ @apply flex-1; } .component_set { - @apply bg-gray-50 p-2 rounded flex flex-col gap-2; + @apply bg-gray-50 p-2 rounded flex flex-col flex-1 gap-2; } .panel_header { @apply mb-1 uppercase text-sm font-semibold; @@ -297,11 +297,8 @@ .selector { @apply bg-gray-200 text-gray-700 py-2 px-4 font-semibold rounded inline-flex items-center; } - .current { - @apply mr-1; - } .caret { - @apply fill-current h-4 w-4; + @apply ml-1 fill-current h-4 w-4; } .dropdown_menu { @apply absolute hidden text-gray-700 pt-1 max-h-80 overflow-y-auto z-10; diff --git a/frontend/src/themes/huggingface.scss b/frontend/src/themes/huggingface.scss index fb00a75105..422cc4fd07 100644 --- a/frontend/src/themes/huggingface.scss +++ b/frontend/src/themes/huggingface.scss @@ -29,7 +29,7 @@ @apply flex-1; } .component_set { - @apply border border-gray-100 p-4 rounded-lg flex flex-col gap-3 bg-gradient-to-br from-gray-50 to-white; + @apply border border-gray-100 p-4 rounded-lg flex flex-col flex-1 gap-3 bg-gradient-to-br from-gray-50 to-white; } .panel_header { @apply flex items-center text-sm text-gray-700 mb-1.5; @@ -272,11 +272,8 @@ .selector { @apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded inline-flex items-center; } - .current { - @apply mr-1; - } .caret { - @apply fill-current h-4 w-4; + @apply ml-1 fill-current h-4 w-4; } .dropdown_menu { @apply absolute hidden text-gray-700 pt-1 max-h-80 overflow-y-auto z-10; diff --git a/gradio.egg-info/SOURCES.txt b/gradio.egg-info/SOURCES.txt index 857cfbfebb..e645b272dd 100644 --- a/gradio.egg-info/SOURCES.txt +++ b/gradio.egg-info/SOURCES.txt @@ -32,10 +32,16 @@ gradio/frontend/static/bundle.css.map gradio/frontend/static/bundle.js gradio/frontend/static/bundle.js.LICENSE.txt gradio/frontend/static/bundle.js.map +gradio/frontend/static/css/main.337638fd.css +gradio/frontend/static/css/main.337638fd.css.map gradio/frontend/static/css/main.347bef8c.css gradio/frontend/static/css/main.347bef8c.css.map +gradio/frontend/static/css/main.4e1683e6.css +gradio/frontend/static/css/main.4e1683e6.css.map gradio/frontend/static/css/main.bc3b604e.css gradio/frontend/static/css/main.bc3b604e.css.map +gradio/frontend/static/css/main.c7572f0f.css +gradio/frontend/static/css/main.c7572f0f.css.map gradio/frontend/static/media/logo_loading.e93acd82.jpg test/test_demos.py test/test_inputs.py diff --git a/gradio.egg-info/requires.txt b/gradio.egg-info/requires.txt index 8e565209f9..b6135b3e41 100644 --- a/gradio.egg-info/requires.txt +++ b/gradio.egg-info/requires.txt @@ -1,15 +1,15 @@ -numpy -scipy -matplotlib -pandas -pillow +Flask-Cors>=3.0.8 +Flask-Login +Flask>=1.1.1 +analytics-python ffmpy +flask-cachebuster markdown2 +matplotlib +numpy +pandas +paramiko +pillow pycryptodome requests -paramiko -analytics-python -Flask>=1.1.1 -Flask-Cors>=3.0.8 -flask-cachebuster -Flask-Login +scipy diff --git a/gradio/frontend/asset-manifest.json b/gradio/frontend/asset-manifest.json index e35aa8b80e..4d463771db 100644 --- a/gradio/frontend/asset-manifest.json +++ b/gradio/frontend/asset-manifest.json @@ -1,17 +1,17 @@ { "files": { - "main.css": "/static/css/main.347bef8c.css", + "main.css": "/static/css/main.337638fd.css", "main.js": "/static/bundle.js", "main.js.map": "/static/bundle.js.map", "index.html": "/index.html", "static/bundle.css.map": "/static/bundle.css.map", "static/bundle.js.LICENSE.txt": "/static/bundle.js.LICENSE.txt", - "static/css/main.347bef8c.css.map": "/static/css/main.347bef8c.css.map", + "static/css/main.337638fd.css.map": "/static/css/main.337638fd.css.map", "static/media/logo_loading.e93acd82.jpg": "/static/media/logo_loading.e93acd82.jpg" }, "entrypoints": [ "static/bundle.css", - "static/css/main.347bef8c.css", + "static/css/main.337638fd.css", "static/bundle.js" ] } \ No newline at end of file diff --git a/gradio/frontend/index.html b/gradio/frontend/index.html index e3a29fbeca..ce7a0172ee 100644 --- a/gradio/frontend/index.html +++ b/gradio/frontend/index.html @@ -8,4 +8,4 @@ window.config = {{ config|tojson }}; } catch (e) { window.config = {}; - }Gradio
    \ No newline at end of file + }Gradio
    \ No newline at end of file diff --git a/gradio/interface.py b/gradio/interface.py index 7eb57dd781..71d59424d0 100644 --- a/gradio/interface.py +++ b/gradio/interface.py @@ -65,7 +65,7 @@ class Interface: 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, + layout="unaligned", show_input=True, show_output=True, capture_session=False, interpretation=None, num_shap=2.0, theme=None, repeat_outputs_per_model=True, title=None, description=None, article=None, thumbnail=None, css=None, server_port=None, server_name=networking.LOCALHOST_NAME, height=500, width=900,