mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix trailing comma

Browse Source
This commit is contained in:
Ali Abid 2021-08-07 00:20:16 +00:00
parent ef9824ccb9
commit 3d44dc46dd
20 changed files with 67 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/.eslintrc.js
View File

@ -1,7 +0,0 @@
module.exports = {
plugins: ['prettier'],
extends: ['prettier'],
rules: {
'prettier/prettier': 'warn',
},
};

5
frontend/package.json
View File

@ -30,14 +30,13 @@
},
"scripts": {
"start": "REACT_APP_BACKEND_URL='http://localhost:7860/' craco start",
"format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js*'",
"format": "prettier-eslint --write '**/*.js*'",
"build": "REACT_APP_BACKEND_URL='' craco build",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
"prettier"
]
},
"browserslist": {

22
frontend/src/components.jsx
View File

@ -3,19 +3,19 @@ import React from "react";
import { AudioInput, AudioInputExample } from "./components/input/audio";
import {
CheckboxGroupInput,
CheckboxGroupInputExample,
CheckboxGroupInputExample
} from "./components/input/checkbox_group";
import {
CheckboxInput,
CheckboxInputExample,
CheckboxInputExample
} from "./components/input/checkbox";
import {
DataframeInput,
DataframeInputExample,
DataframeInputExample
} from "./components/input/dataframe";
import {
DropdownInput,
DropdownInputExample,
DropdownInputExample
} from "./components/input/dropdown";
import { FileInput, FileInputExample } from "./components/input/file";
import { ImageInput, ImageInputExample } from "./components/input/image";
@ -28,28 +28,28 @@ import { VideoInput, VideoInputExample } from "./components/input/video";
import { AudioOutput, AudioOutputExample } from "./components/output/audio";
import {
CarouselOutput,
CarouselOutputExample,
CarouselOutputExample
} from "./components/output/carousel";
import {
DataframeOutput,
DataframeOutputExample,
DataframeOutputExample
} from "./components/output/dataframe";
import { FileOutput, FileOutputExample } from "./components/output/file";
import {
HighlightedTextOutput,
HighlightedTextOutputExample,
HighlightedTextOutputExample
} from "./components/output/highlighted_text";
import { HTMLOutput, HTMLOutputExample } from "./components/output/html";
import { ImageOutput, ImageOutputExample } from "./components/output/image";
import { JSONOutput, JSONOutputExample } from "./components/output/json";
import {
KeyValuesOutput,
KeyValuesOutputExample,
KeyValuesOutputExample
} from "./components/output/key_values";
import { LabelOutput, LabelOutputExample } from "./components/output/label";
import {
TextboxOutput,
TextboxOutputExample,
TextboxOutputExample
} from "./components/output/textbox";
import { VideoOutput, VideoOutputExample } from "./components/output/video";
@ -65,7 +65,7 @@ let input_component_map = {
radio: [RadioInput, RadioInputExample],
slider: [SliderInput, SliderInputExample],
textbox: [TextboxInput, TextboxInputExample],
video: [VideoInput, VideoInputExample],
video: [VideoInput, VideoInputExample]
};
let output_component_map = {
audio: [AudioOutput, AudioOutputExample],
@ -79,7 +79,7 @@ let output_component_map = {
keyvalues: [KeyValuesOutput, KeyValuesOutputExample],
label: [LabelOutput, LabelOutputExample],
textbox: [TextboxOutput, TextboxOutputExample],
video: [VideoOutput, VideoOutputExample],
video: [VideoOutput, VideoOutputExample]
};
for (let component_map of [input_component_map, output_component_map]) {

6
frontend/src/components/input/audio.jsx
View File

@ -8,7 +8,7 @@ class AudioInput extends BaseComponent {
constructor(props) {
super(props);
this.state = {
recordState: RecordState.STOP,
recordState: RecordState.STOP
};
this.src = null;
this.key = 0; // needed to prevent audio caching
@ -17,12 +17,12 @@ class AudioInput extends BaseComponent {
}
start = () => {
this.setState({
recordState: RecordState.START,
recordState: RecordState.START
});
};
stop = () => {
this.setState({
recordState: RecordState.STOP,
recordState: RecordState.STOP
});
};
onStop = (audioData) => {

6
frontend/src/components/input/checkbox.jsx
View File

@ -17,7 +17,7 @@ class CheckboxInput extends BaseComponent {
<div className="input_checkbox">
<div
className={classNames("checkbox_item", {
selected: this.props.value,
selected: this.props.value
})}
onClick={this.handleChange}
>
@ -35,7 +35,7 @@ class CheckboxInput extends BaseComponent {
style={{
backgroundColor: getSaliencyColor(
this.props.interpretation[0]
),
)
}}
></div>
<div
@ -43,7 +43,7 @@ class CheckboxInput extends BaseComponent {
style={{
backgroundColor: getSaliencyColor(
this.props.interpretation[1]
),
)
}}
>
<svg className="interpret_check" viewBox="-10 -10 20 20">

6
frontend/src/components/input/checkbox_group.jsx
View File

@ -24,7 +24,7 @@ class CheckboxGroupInput extends BaseComponent {
return (
<div
className={classNames("checkbox_item", {
selected: this.props.value.includes(item),
selected: this.props.value.includes(item)
})}
onClick={this.handleChange.bind(this, item)}
key={index}
@ -43,7 +43,7 @@ class CheckboxGroupInput extends BaseComponent {
style={{
backgroundColor: getSaliencyColor(
this.props.interpretation[index][0]
),
)
}}
></div>
<div
@ -51,7 +51,7 @@ class CheckboxGroupInput extends BaseComponent {
style={{
backgroundColor: getSaliencyColor(
this.props.interpretation[index][1]
),
)
}}
>
<svg className="interpret_check" viewBox="-10 -10 20 20">

2
frontend/src/components/input/dataframe.jsx
View File

@ -29,7 +29,7 @@ class DataframeInput extends BaseComponent {
str: "text",
bool: "checkbox",
number: "numeric",
date: "calendar",
date: "calendar"
};
column.type = datatype_map[datatype];
}

2
frontend/src/components/input/dropdown.jsx
View File

@ -28,7 +28,7 @@ class DropdownInput extends BaseComponent {
return (
<li
className={classNames("dropdown_item", {
selected: item === this.props.value,
selected: item === this.props.value
})}
onClick={this.handleChange.bind(this, item)}
key={index}

2
frontend/src/components/input/file.jsx
View File

@ -98,7 +98,7 @@ class FileInput extends BaseComponent {
name: file.name,
size: file.size,
data: reader.result,
is_local_example: false,
is_local_example: false
});
if (this.file_data.length === file_count) {
this.handleChange(this.file_data);

8
frontend/src/components/input/image.jsx
View File

@ -55,8 +55,8 @@ class ImageInput extends BaseComponent {
this.setState({
dimensions: {
height: img.offsetHeight,
width: img.offsetWidth,
},
width: img.offsetWidth
}
});
}
openEditor() {
@ -119,9 +119,9 @@ class ImageInput extends BaseComponent {
loadImage: { path: this.props.value, name: "value" },
uiSize: {
width: "800px",
height: "600px",
height: "600px"
},
menuBarPosition: "left",
menuBarPosition: "left"
}}
cssMaxHeight={500}
cssMaxWidth={700}

4
frontend/src/components/input/radio.jsx
View File

@ -20,7 +20,7 @@ class RadioInput extends BaseComponent {
<div key={index}>
<div
className={classNames("radio_item", {
selected: item === this.props.value,
selected: item === this.props.value
})}
onClick={this.handleChange.bind(this, item)}
>
@ -32,7 +32,7 @@ class RadioInput extends BaseComponent {
style={{
backgroundColor: getSaliencyColor(
this.props.interpretation[index]
),
)
}}
></div>
)}

4
frontend/src/components/output/carousel.jsx
View File

@ -14,14 +14,14 @@ class CarouselOutput extends BaseComponent {
this.setState({
carousel_index:
(this.state.carousel_index - 1 + this.props.value.length) %
this.props.value.length,
this.props.value.length
});
}
next() {
this.setState({
carousel_index:
(this.state.carousel_index + 1 + this.props.value.length) %
this.props.value.length,
this.props.value.length
});
}
render() {

6
frontend/src/components/output/dataframe.jsx
View File

@ -13,7 +13,7 @@ class DataframeOutput extends BaseComponent {
return {
page: 0,
sort_by: null,
sort_descending: false,
sort_descending: false
};
}
static getDerivedStateFromProps(nextProps, prevState) {
@ -91,7 +91,7 @@ class DataframeOutput extends BaseComponent {
if (this.props.max_cols !== null && col_count > this.props.max_cols) {
let [hidden_col_start, hidden_col_end] = [
Math.ceil(this.props.max_cols / 2),
col_count - Math.floor(this.props.max_cols / 2) - 1,
col_count - Math.floor(this.props.max_cols / 2) - 1
];
headers =
headers.slice(0, hidden_col_start) +
@ -142,7 +142,7 @@ class DataframeOutput extends BaseComponent {
) : (
<button
className={classNames("page", {
selected: page === this.state.page,
selected: page === this.state.page
})}
key={page}
onClick={this.set_page.bind(this, page)}

2
frontend/src/components/output/highlighted_text.jsx
View File

@ -20,7 +20,7 @@ class HighlightedTextOutput extends BaseComponent {
"khaki",
"cyan",
"moccasin",
"lightgray",
"lightgray"
];
for (let category in category_map) {
if (category in this.color_map) {

2
frontend/src/components/output/json.jsx
View File

@ -25,7 +25,7 @@ class JSONOutput extends BaseComponent {
base0C: "#DDD",
base0D: "#EEE",
base0E: "#EFEFEF",
base0F: "#FFF",
base0F: "#FFF"
}}
invertTheme={true}
/>

2
frontend/src/components/output/label.jsx
View File

@ -21,7 +21,7 @@ class LabelOutput extends BaseComponent {
className="confidence"
title={confidence}
style={{
minWidth: "calc(" + confidence + " - 12px)",
minWidth: "calc(" + confidence + " - 12px)"
}}
>
{confidence}

24
frontend/src/gradio.jsx
View File

@ -99,7 +99,7 @@ export class GradioInterface extends React.Component {
submitting: true,
has_changed: false,
error: false,
flag_index: null,
flag_index: null
});
this.props
.fn(input_state, "predict")
@ -123,7 +123,7 @@ export class GradioInterface extends React.Component {
console.error(e);
this.setState({
error: true,
submitting: false,
submitting: false
});
});
};
@ -168,14 +168,14 @@ export class GradioInterface extends React.Component {
.then((output) => {
this.setState({
interpretation: output["interpretation_scores"],
submitting: false,
submitting: false
});
})
.catch((e) => {
console.error(e);
this.setState({
error: true,
submitting: false,
submitting: false
});
});
};
@ -236,13 +236,13 @@ export class GradioInterface extends React.Component {
className={classNames("panels", {
"items-start": this.props.layout === "unaligned",
"items-stretch": this.props.layout !== "unaligned",
"flex-col": this.props.layout === "vertical",
"flex-col": this.props.layout === "vertical"
})}
>
<div
className={classNames("panel", {
flex: this.props.layout === "horizontal",
"flex-col": this.props.layout === "horizontal",
"flex-col": this.props.layout === "horizontal"
})}
>
<div className="component_set">
@ -282,12 +282,12 @@ export class GradioInterface extends React.Component {
<div
className={classNames("panel", {
flex: this.props.layout === "horizontal",
"flex-col": this.props.layout === "horizontal",
"flex-col": this.props.layout === "horizontal"
})}
>
<div
className={classNames("component_set", "relative", {
"opacity-50": status && !this.props.live,
"opacity-50": status && !this.props.live
})}
>
{status}
@ -313,7 +313,7 @@ export class GradioInterface extends React.Component {
this.state.interpretation === null ? (
<button
className={classNames("panel_button", {
disabled: this.state.complete === false,
disabled: this.state.complete === false
})}
onClick={this.interpret}
>
@ -341,7 +341,7 @@ export class GradioInterface extends React.Component {
this.props.flagging_options === null ? (
<button
className={classNames("panel_button", "flag", {
disabled: this.state.complete === false,
disabled: this.state.complete === false
})}
onClick={this.flag.bind(this, null)}
>
@ -350,7 +350,7 @@ export class GradioInterface extends React.Component {
) : (
<button
className={classNames("panel_button", "flag", {
disabled: this.state.complete === false,
disabled: this.state.complete === false
})}
>
{this.state.just_flagged ? "Flagged" : "Flag ▼"}
@ -443,7 +443,7 @@ class GradioInterfaceExamples extends React.Component {
<tr
key={i}
className={classNames({
selected: i === this.props.example_id,
selected: i === this.props.example_id
})}
onClick={() => this.props.handleExampleChange(i)}
>

4
frontend/src/index.jsx
View File

@ -10,8 +10,8 @@ let fn = async (data, action) => {
method: "POST",
body: JSON.stringify({ data: data }),
headers: {
"Content-Type": "application/json",
},
"Content-Type": "application/json"
}
}
);
return await output.json();

2
frontend/src/utils.jsx
View File

@ -61,7 +61,7 @@ export function getObjectFitSize(
width: targetWidth,
height: targetHeight,
x: (containerWidth - targetWidth) / 2,
y: (containerHeight - targetHeight) / 2,
y: (containerHeight - targetHeight) / 2
};
}

26
frontend/tailwind.config.js
View File

@ -7,30 +7,30 @@ module.exports = {
DEFAULT: {
css: {
h1: {
fontWeight: "semibold",
fontWeight: "semibold"
},
h2: {
fontWeight: "semibold",
fontWeight: "semibold"
},
h3: {
fontWeight: "semibold",
fontWeight: "semibold"
},
h4: {
fontWeight: "semibold",
fontWeight: "semibold"
},
h5: {
fontWeight: "semibold",
fontWeight: "semibold"
},
h6: {
fontWeight: "semibold",
},
},
},
},
},
fontWeight: "semibold"
}
}
}
}
}
},
variants: {
extend: {},
extend: {}
},
plugins: [require("@tailwindcss/typography")],
plugins: [require("@tailwindcss/typography")]
};