diff --git a/demo/files/video.avi b/demo/files/video.avi new file mode 100644 index 0000000000..dabce398b2 Binary files /dev/null and b/demo/files/video.avi differ diff --git a/demo/files/video.mp4 b/demo/files/video.mp4 new file mode 100644 index 0000000000..b11552f9cb Binary files /dev/null and b/demo/files/video.mp4 differ diff --git a/demo/video_flip.py b/demo/video_flip.py index f9d4298dbb..89fa4f9b2b 100644 --- a/demo/video_flip.py +++ b/demo/video_flip.py @@ -4,7 +4,11 @@ def video_flip(video): return video iface = gr.Interface( - video_flip, "video", "playable_video", theme="huggingface") + video_flip, "video", "playable_video", theme="huggingface", + examples=[ + ["files/video.avi"], + ["files/video.mp4"] + ]) if __name__ == "__main__": iface.launch() diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e323c37bee..d3f38fb34e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11666,11 +11666,18 @@ "integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==" }, "mime-types": { - "version": "2.1.30", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz", - "integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==", + "version": "2.1.33", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz", + "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==", "requires": { - "mime-db": "1.47.0" + "mime-db": "1.50.0" + }, + "dependencies": { + "mime-db": { + "version": "1.50.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz", + "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==" + } } }, "mimic-fn": { diff --git a/frontend/package.json b/frontend/package.json index 98e3c3489f..1eac5ea556 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "fabric": "^4.5.0", "html2canvas-objectfit-fix": "^1.2.0", "jspreadsheet-ce": "^4.7.3", + "mime-types": "^2.1.33", "plotly.js": "^2.3.1", "prettier-eslint": "^13.0.0", "prettier-eslint-cli": "^5.0.1", diff --git a/frontend/src/components/component_example.jsx b/frontend/src/components/component_example.jsx index fb2defe9f8..e6bec30c60 100644 --- a/frontend/src/components/component_example.jsx +++ b/frontend/src/components/component_example.jsx @@ -12,7 +12,11 @@ export default class ComponentExample extends React.Component { export class FileComponentExample extends ComponentExample { static async preprocess(x, examples_dir) { - return examples_dir + "/" + x; + return { + "name": x, + "data": examples_dir + "/" + x, + "is_example": true + } } } diff --git a/frontend/src/components/input/audio.jsx b/frontend/src/components/input/audio.jsx index a5782252d5..81b255916d 100644 --- a/frontend/src/components/input/audio.jsx +++ b/frontend/src/components/input/audio.jsx @@ -1,6 +1,6 @@ import React from "react"; import BaseComponent from "../base_component"; -import { DataURLComponentExample } from "../component_example"; +import { FileComponentExample } from "../component_example"; import Recorder from "recorder-js"; import { getSaliencyColor } from "../../utils"; @@ -147,12 +147,12 @@ class AudioInput extends BaseComponent { let file = files[0]; ReaderObj.readAsDataURL(file); ReaderObj.onloadend = function () { - component.props.handleChange({ "name": file.name, "data": this.result }); + component.props.handleChange({ "name": file.name, "data": this.result, "is_example": false }); }; }; } -class AudioInputExample extends DataURLComponentExample { +class AudioInputExample extends FileComponentExample { render() { return