Try out all the components!
", "name": "markdown", "visible": true, "style": {} } }, { "id": 35, "type": "row", "props": { "type": "row", "visible": true, "style": { "equal_height": false, "mobile_collapse": true } } }, { "id": 36, "type": "column", "props": { "type": "column", "variant": "panel", "visible": true, "style": {} } }, { "id": 37, "type": "column", "props": { "type": "column", "variant": "default", "visible": true, "style": {} } }, { "id": 0, "type": "textbox", "props": { "lines": 1, "max_lines": 20, "value": "Lorem ipsum", "label": "Textbox", "show_label": true, "name": "textbox", "visible": true, "style": {} } }, { "id": 1, "type": "textbox", "props": { "lines": 3, "max_lines": 20, "placeholder": "Type here..", "value": "", "label": "Textbox 2", "show_label": true, "name": "textbox", "visible": true, "style": {} } }, { "id": 2, "type": "number", "props": { "value": 42.0, "label": "Number", "show_label": true, "name": "number", "visible": true, "style": {} } }, { "id": 3, "type": "slider", "props": { "minimum": 10, "maximum": 20, "step": 0.1, "value": 15, "label": "Slider: 10 - 20", "show_label": true, "name": "slider", "visible": true, "style": {} } }, { "id": 4, "type": "slider", "props": { "minimum": 0, "maximum": 20, "step": 0.04, "value": 0, "label": "Slider: step @ 0.04", "show_label": true, "name": "slider", "visible": true, "style": {} } }, { "id": 5, "type": "checkbox", "props": { "value": false, "label": "Checkbox", "show_label": true, "name": "checkbox", "visible": true, "style": {} } }, { "id": 6, "type": "checkboxgroup", "props": { "choices": [ "foo", "bar", "baz" ], "value": [ "foo", "bar" ], "label": "CheckboxGroup", "show_label": true, "name": "checkboxgroup", "visible": true, "style": {} } }, { "id": 7, "type": "radio", "props": { "choices": [ "foo", "bar", "baz" ], "value": "baz", "label": "Radio", "show_label": true, "name": "radio", "visible": true, "style": {} } }, { "id": 8, "type": "dropdown", "props": { "choices": [ "foo", "bar", "baz" ], "label": "Dropdown", "show_label": true, "name": "dropdown", "visible": true, "style": {} } }, { "id": 9, "type": "image", "props": { "image_mode": "RGB", "source": "upload", "tool": "editor", "streaming": false, "mirror_webcam": true, "label": "Image", "show_label": true, "name": "image", "visible": true, "style": {} } }, { "id": 10, "type": "image", "props": { "image_mode": "RGB", "source": "upload", "tool": "select", "streaming": false, "mirror_webcam": true, "label": "Image w/ Cropper", "show_label": true, "name": "image", "visible": true, "style": {} } }, { "id": 11, "type": "image", "props": { "image_mode": "RGB", "source": "canvas", "tool": "editor", "streaming": false, "mirror_webcam": true, "label": "Sketchpad", "show_label": true, "name": "image", "visible": true, "style": {} } }, { "id": 12, "type": "image", "props": { "image_mode": "RGB", "source": "webcam", "tool": "editor", "streaming": false, "mirror_webcam": true, "label": "Webcam", "show_label": true, "name": "image", "visible": true, "style": {} } }, { "id": 13, "type": "video", "props": { "source": "upload", "mirror_webcam": true, "label": "Video", "show_label": true, "name": "video", "visible": true, "style": {} } }, { "id": 14, "type": "audio", "props": { "source": "upload", "streaming": false, "label": "Audio", "show_label": true, "name": "audio", "visible": true, "style": {} } }, { "id": 15, "type": "audio", "props": { "source": "microphone", "streaming": false, "label": "Microphone", "show_label": true, "name": "audio", "visible": true, "style": {} } }, { "id": 16, "type": "file", "props": { "file_count": "single", "label": "File", "show_label": true, "name": "file", "visible": true, "style": {} } }, { "id": 17, "type": "dataframe", "props": { "headers": [ "Name", "Age", "Gender" ], "datatype": [ "str", "str", "str" ], "row_count": [ 1, "dynamic" ], "col_count": [ 3, "dynamic" ], "value": { "headers": [ "Name", "Age", "Gender" ], "data": [ [ "", "", "" ] ] }, "max_rows": 20, "overflow_row_behaviour": "paginate", "wrap": false, "label": "Dataframe", "show_label": true, "name": "dataframe", "visible": true, "style": {} } }, { "id": 18, "type": "timeseries", "props": { "x": "time", "y": [ "price", "value" ], "colors": [ "pink", "purple" ], "label": "df2", "show_label": true, "name": "timeseries", "visible": true, "style": {} } }, { "id": 38, "type": "row", "props": { "type": "row", "visible": true, "style": { "mobile_collapse": false } } }, { "id": 39, "type": "button", "props": { "value": "Clear", "variant": "secondary", "name": "button", "visible": true, "style": {} } }, { "id": 40, "type": "button", "props": { "value": "Submit", "variant": "primary", "name": "button", "visible": true, "style": {} } }, { "id": 41, "type": "column", "props": { "type": "column", "variant": "panel", "visible": true, "style": {} } }, { "id": 42, "type": "statustracker", "props": { "cover_container": true, "name": "statustracker", "visible": true, "style": {} } }, { "id": 19, "type": "textbox", "props": { "lines": 1, "max_lines": 20, "value": "", "label": "Textbox", "show_label": true, "interactive": false, "name": "textbox", "visible": true, "style": {} } }, { "id": 20, "type": "label", "props": { "label": "Label", "show_label": true, "interactive": false, "name": "label", "visible": true, "style": {} } }, { "id": 21, "type": "audio", "props": { "source": "upload", "streaming": false, "label": "Audio", "show_label": true, "interactive": false, "name": "audio", "visible": true, "style": {} } }, { "id": 22, "type": "image", "props": { "image_mode": "RGB", "source": "upload", "tool": "editor", "streaming": false, "mirror_webcam": true, "label": "Image", "show_label": true, "interactive": false, "name": "image", "visible": true, "style": {} } }, { "id": 23, "type": "video", "props": { "source": "upload", "mirror_webcam": true, "label": "Video", "show_label": true, "interactive": false, "name": "video", "visible": true, "style": {} } }, { "id": 24, "type": "highlightedtext", "props": { "color_map": { "punc": "pink", "test 0": "blue" }, "show_legend": false, "label": "HighlightedText", "show_label": true, "interactive": false, "name": "highlightedtext", "visible": true, "style": {} } }, { "id": 25, "type": "highlightedtext", "props": { "show_legend": true, "label": "HighlightedText", "show_label": true, "interactive": false, "name": "highlightedtext", "visible": true, "style": {} } }, { "id": 26, "type": "json", "props": { "label": "JSON", "show_label": true, "interactive": false, "name": "json", "visible": true, "style": {} } }, { "id": 27, "type": "html", "props": { "value": "", "label": "HTML", "show_label": true, "interactive": false, "name": "html", "visible": true, "style": {} } }, { "id": 28, "type": "file", "props": { "file_count": "single", "label": "File", "show_label": true, "interactive": false, "name": "file", "visible": true, "style": {} } }, { "id": 29, "type": "dataframe", "props": { "headers": [ 1, 2, 3 ], "datatype": [ "str", "str", "str" ], "row_count": [ 1, "dynamic" ], "col_count": [ 3, "dynamic" ], "value": { "headers": [ 1, 2, 3 ], "data": [ [ "", "", "" ] ] }, "max_rows": 20, "overflow_row_behaviour": "paginate", "wrap": false, "label": "Dataframe", "show_label": true, "interactive": false, "name": "dataframe", "visible": true, "style": {} } }, { "id": 30, "type": "dataframe", "props": { "headers": [ 1, 2, 3 ], "datatype": [ "str", "str", "str" ], "row_count": [ 1, "dynamic" ], "col_count": [ 3, "dynamic" ], "value": { "headers": [ 1, 2, 3 ], "data": [ [ "", "", "" ] ] }, "max_rows": 20, "overflow_row_behaviour": "paginate", "wrap": false, "label": "Numpy", "show_label": true, "interactive": false, "name": "dataframe", "visible": true, "style": {} } }, { "id": 31, "type": "timeseries", "props": { "x": "time", "y": [ "price", "value" ], "label": "Timeseries", "show_label": true, "interactive": false, "name": "timeseries", "visible": true, "style": {} } }, { "id": 43, "type": "row", "props": { "type": "row", "visible": true, "style": { "mobile_collapse": false } } }, { "id": 44, "type": "button", "props": { "value": "Flag", "variant": "secondary", "name": "button", "visible": true, "style": {} } }, { "id": 45, "type": "dataset", "props": { "components": [ "textbox", "textbox", "number", "slider", "slider", "checkbox", "checkboxgroup", "radio", "dropdown", "image", "image", "image", "image", "video", "audio", "audio", "file", "dataframe", "timeseries" ], "headers": [ "Textbox", "Textbox 2", "Number", "Slider: 10 - 20", "Slider: step @ 0.04", "Checkbox", "CheckboxGroup", "Radio", "Dropdown", "Image", "Image w/ Cropper", "Sketchpad", "Webcam", "Video", "Audio", "Microphone", "File", "Dataframe", "df2" ], "samples": [ [ "the quick brown fox", "jumps over the lazy dog", 10, 12, 4, true, [ "foo", "baz" ], "baz", "bar", "cheetah1.jpg", "cheetah1.jpg", "cheetah1.jpg", "cheetah1.jpg", "world.mp4", "cantina.wav", "cantina.wav", "titanic.csv", [ [ 1, 2, 3 ], [ 3, 4, 5 ] ], "time.csv" ], [ "the quick brown fox", "jumps over the lazy dog", 10, 12, 4, true, [ "foo", "baz" ], "baz", "bar", "cheetah1.jpg", "cheetah1.jpg", "cheetah1.jpg", "cheetah1.jpg", "world.mp4", "cantina.wav", "cantina.wav", "titanic.csv", [ [ 1, 2, 3 ], [ 3, 4, 5 ] ], "time.csv" ], [ "the quick brown fox", "jumps over the lazy dog", 10, 12, 4, true, [ "foo", "baz" ], "baz", "bar", "cheetah1.jpg", "cheetah1.jpg", "cheetah1.jpg", "cheetah1.jpg", "world.mp4", "cantina.wav", "cantina.wav", "titanic.csv", [ [ 1, 2, 3 ], [ 3, 4, 5 ] ], "time.csv" ] ], "type": "index", "name": "dataset", "visible": true, "style": {} } }, { "id": 46, "type": "markdown", "props": { "value": "Learn more about Gradio
", "name": "markdown", "visible": true, "style": {} } } ], "theme": "default", "css": null, "title": "Kitchen Sink", "enable_queue": false, "layout": { "id": 32, "children": [ { "id": 33 }, { "id": 34 }, { "id": 35, "children": [ { "id": 36, "children": [ { "id": 37, "children": [ { "id": 0 }, { "id": 1 }, { "id": 2 }, { "id": 3 }, { "id": 4 }, { "id": 5 }, { "id": 6 }, { "id": 7 }, { "id": 8 }, { "id": 9 }, { "id": 10 }, { "id": 11 }, { "id": 12 }, { "id": 13 }, { "id": 14 }, { "id": 15 }, { "id": 16 }, { "id": 17 }, { "id": 18 } ] }, { "id": 38, "children": [ { "id": 39 }, { "id": 40 } ] } ] }, { "id": 41, "children": [ { "id": 42 }, { "id": 19 }, { "id": 20 }, { "id": 21 }, { "id": 22 }, { "id": 23 }, { "id": 24 }, { "id": 25 }, { "id": 26 }, { "id": 27 }, { "id": 28 }, { "id": 29 }, { "id": 30 }, { "id": 31 }, { "id": 43, "children": [ { "id": 44 } ] } ] } ] }, { "id": 45 }, { "id": 46 } ] }, "dependencies": [ { "targets": [ 40 ], "trigger": "click", "inputs": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ], "outputs": [ 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ], "backend_fn": true, "js": null, "status_tracker": null, "queue": null, "api_name": "predict", "scroll_to_output": true, "show_progress": true, "documentation": [ [ [ "text", "str | None" ], [ "text", "str | None" ], [ "numeric input", "float | None" ], [ "numeric input", "float" ], [ "numeric input", "float" ], [ "boolean input", "bool" ], [ "list of selected choices", "List[str]" ], [ "selected choice", "str" ], [ "selected choice", "str" ], [ "base64 url data, or (if tool == \"sketch) a dict of image and mask base64 url data", "str | Dict" ], [ "base64 url data, or (if tool == \"sketch) a dict of image and mask base64 url data", "str | Dict" ], [ "base64 url data, or (if tool == \"sketch) a dict of image and mask base64 url data", "str | Dict" ], [ "base64 url data, or (if tool == \"sketch) a dict of image and mask base64 url data", "str | Dict" ], [ "JSON object with filename as 'name' property and base64 data as 'data' property", "Dict[str, str] | None" ], [ "JSON object with filename as 'name' property and base64 data as 'data' property", "Dict[str, str] | None" ], [ "JSON object with filename as 'name' property and base64 data as 'data' property", "Dict[str, str] | None" ], [ "List of JSON objects with filename as 'name' property and base64 data as 'data' property", "List[Dict[str, str]] | None" ], [ "2D array of str, numeric, or bool data", "DataframeData" ], [ "Dict with keys 'data': 2D array of str, numeric, or bool data, 'headers': list of strings for header names, 'range': optional two element list designating start of end of subrange.", "Dict | None" ] ], [ [ "text", "str | None" ], [ "Object with key 'label' representing primary label, and key 'confidences' representing a list of label-confidence pairs", "Dict | None" ], [ "base64 url data", "str" ], [ "base64 url data", "str" ], [ "base64 url data", "str" ], [ "List of (word, category) tuples", "Optional[List[Tuple[str, str | float | None]]]" ], [ "List of (word, category) tuples", "Optional[List[Tuple[str, str | float | None]]]" ], [ "JSON output", "Dict | List | None" ], [ null, "None" ], [ "JSON object with key 'name' for filename, 'data' for base64 url, and 'size' for filesize in bytes", "Dict" ], [ "JSON object with key 'headers' for list of header names, 'data' for 2D array of string or numeric data", "Dict" ], [ "JSON object with key 'headers' for list of header names, 'data' for 2D array of string or numeric data", "Dict" ], [ "JSON object with key 'headers' for list of header names, 'data' for 2D array of string or numeric data", "Dict" ] ] ] }, { "targets": [ 39 ], "trigger": "click", "inputs": [], "outputs": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 37 ], "backend_fn": false, "js": "() => [\"\", \"\", null, 15, 0, null, [], \"baz\", null, null, null, null, null, null, null, null, null, null, null, \"\", null, null, null, null, null, null, null, null, null, null, null, null, {\"variant\": null, \"visible\": true, \"__type__\": \"update\"}]\n ", "status_tracker": null, "queue": null, "api_name": null, "scroll_to_output": false, "show_progress": true }, { "targets": [ 44 ], "trigger": "click", "inputs": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ], "outputs": [], "backend_fn": true, "js": null, "status_tracker": null, "queue": false, "api_name": null, "scroll_to_output": false, "show_progress": true }, { "targets": [ 45 ], "trigger": "click", "inputs": [ 45 ], "outputs": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ], "backend_fn": true, "js": null, "status_tracker": null, "queue": false, "api_name": null, "scroll_to_output": false, "show_progress": true } ] }