mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-30 11:00:11 +08:00
screenshot fixes
This commit is contained in:
Ali Abid
parent
68fbee97aa
commit
516d8a6ece
@ -33,7 +33,6 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
|
||||
|
||||
<title>Gradio</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -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",
|
||||
})}>
|
||||
<div className="panel">
|
||||
<div className={classNames("panel", {
|
||||
"flex": this.props.layout === "horizontal",
|
||||
"flex-col": this.props.layout === "horizontal",
|
||||
})}>
|
||||
<div className="component_set">
|
||||
{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 {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel">
|
||||
<div className={classNames("panel", {
|
||||
"flex": this.props.layout === "horizontal",
|
||||
"flex-col": this.props.layout === "horizontal",
|
||||
})}>
|
||||
<div className={classNames("component_set", "relative",
|
||||
{ "opacity-50": status && !this.props.live })}>
|
||||
{status}
|
||||
|
||||
@ -15,8 +15,8 @@ class DropdownInput extends React.Component {
|
||||
return (<div className="input_dropdown">
|
||||
{this.props.interpretation === null ?
|
||||
<div className="dropdown inline-block relative">
|
||||
<button className="selector ">
|
||||
<span className="current">{this.props.value}</span>
|
||||
<button className="selector">
|
||||
{this.props.value}
|
||||
<svg className="caret" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /> </svg>
|
||||
</button>
|
||||
<ul className="dropdown_menu">
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><link href="static/bundle.css" rel="stylesheet"><link href="static/css/main.347bef8c.css" rel="stylesheet"></head><body><div id="root"></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.337638fd.css" rel="stylesheet"></head><body><div id="root"></div><script src="static/bundle.js"></script></body></html>
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user