mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-18 12:50:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Frontend fixes (#3026)

Browse Source 
* fixes

* changes

* change

* changes
This commit is contained in:
aliabid94 2023-01-20 13:24:24 -08:00 committed by GitHub
parent af320cf25e
commit 5bd42feb8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 56 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -40,6 +40,8 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3011](https://git
* Fix bug where the Image component could not serialize image urls by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2957](https://github.com/gradio-app/gradio/pull/2957)
* Fix forwarding for guides after SEO renaming by [@aliabd](https://github.com/aliabd) in [PR 3017](https://github.com/gradio-app/gradio/pull/3017)
* Switch all pages on the website to use latest stable gradio by [@aliabd](https://github.com/aliabd) in [PR 3016](https://github.com/gradio-app/gradio/pull/3016)
* Fix several minor frontend bugs (loading animation, examples as gallery) frontend [@aliabid94](https://github.com/3026) in [PR 2961](https://github.com/gradio-app/gradio/pull/3026).
## Documentation Changes:
* SEO improvements to guides by[@aliabd](https://github.com/aliabd) in [PR 2915](https://github.com/gradio-app/gradio/pull/2915)

BIN
demo/image_mod/images/tower.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

2
demo/image_mod/run.ipynb
View File

@ -1 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: image_mod"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod/images/lion.jpg\n", "!wget -q -O images/logo.png https://github.com/gradio-app/gradio/raw/main/demo/image_mod/images/logo.png"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def image_mod(image):\n", " return image.rotate(45)\n", "\n", "\n", "demo = gr.Interface(image_mod, gr.Image(type=\"pil\"), \"image\",\n", " flagging_options=[\"blurry\", \"incorrect\", \"other\"], examples=[\n", " os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\"),\n", " os.path.join(os.path.abspath(''), \"images/lion.jpg\"),\n", " os.path.join(os.path.abspath(''), \"images/logo.png\")\n", " ])\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: image_mod"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod/images/lion.jpg\n", "!wget -q -O images/logo.png https://github.com/gradio-app/gradio/raw/main/demo/image_mod/images/logo.png\n", "!wget -q -O images/tower.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod/images/tower.jpg"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def image_mod(image):\n", " return image.rotate(45)\n", "\n", "\n", "demo = gr.Interface(\n", " image_mod,\n", " gr.Image(type=\"pil\"),\n", " \"image\",\n", " flagging_options=[\"blurry\", \"incorrect\", \"other\"],\n", " examples=[\n", " os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\"),\n", " os.path.join(os.path.abspath(''), \"images/lion.jpg\"),\n", " os.path.join(os.path.abspath(''), \"images/logo.png\"),\n", " os.path.join(os.path.abspath(''), \"images/tower.jpg\"),\n", " ],\n", ")\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

14
demo/image_mod/run.py
View File

@ -6,12 +6,18 @@ def image_mod(image):
return image.rotate(45)
demo = gr.Interface(image_mod, gr.Image(type="pil"), "image",
flagging_options=["blurry", "incorrect", "other"], examples=[
demo = gr.Interface(
image_mod,
gr.Image(type="pil"),
"image",
flagging_options=["blurry", "incorrect", "other"],
examples=[
os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg"),
os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
os.path.join(os.path.dirname(__file__), "images/logo.png")
])
os.path.join(os.path.dirname(__file__), "images/logo.png"),
os.path.join(os.path.dirname(__file__), "images/tower.jpg"),
],
)
if __name__ == "__main__":
demo.launch()

2
ui/packages/app/src/api_docs/InputPayload.svelte
View File

@ -121,7 +121,7 @@
--ring-color: transparent;
margin-top: var(--size-0-5);
margin-bottom: var(--size-0-5);
box-shadow: 0 0 0 3px var(--ring-color);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color);
border: 1px solid var(--input-border-color-base);
border-radius: var(--radius-sm);
background: var(--input-background-base);

2
ui/packages/app/src/api_docs/ResponseObject.svelte
View File

@ -112,7 +112,7 @@
--ring-color: transparent;
margin-top: var(--size-0-5);
margin-bottom: var(--size-0-5);
box-shadow: 0 0 0 3px var(--ring-color);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color);
border: 1px solid var(--input-border-color-base);
border-radius: var(--radius-sm);
background: var(--input-background-base);

3
ui/packages/app/src/components/Dataset/Dataset.svelte
View File

@ -18,7 +18,7 @@
let samples_dir: string = (root_url ?? root) + "file=";
let page = 0;
$: gallery = headers.length < 1;
$: gallery = headers.length < 2;
let paginate = samples.length > samples_per_page;
let selected_samples: Array<Array<any>>;
@ -216,6 +216,7 @@
}
.button:hover {
border-color: var(--dataset-dataframe-border-hover);
background: var(--dataset-gallery-background-hover);
}

5
ui/packages/app/src/components/Dataset/ExampleComponents/Image.svelte
View File

@ -15,9 +15,6 @@
<style>
img {
flex: none;
border: 2px solid var(--color-border-primary);
border-radius: var(--radius-lg);
max-width: none;
}
@ -27,6 +24,8 @@
}
.table {
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
width: var(--size-20);
height: var(--size-20);
object-fit: cover;

1
ui/packages/app/src/components/Image/Image.svelte
View File

@ -41,6 +41,7 @@
padding={false}
{elem_id}
style={{ height: style.height, width: style.width }}
allow_overflow={false}
>
<StatusTracker {...loading_status} />
{#if mode === "static"}

2
ui/packages/app/src/components/StatusTracker/Loader.svelte
View File

@ -101,6 +101,6 @@
}
.margin {
margin: var(--size-12);
margin: var(--size-4);
}
</style>

14
ui/packages/app/src/components/StatusTracker/StatusTracker.svelte
View File

@ -191,7 +191,7 @@
{#if variant === "default" && show_eta_bar}
<div
class="eta-bar"
style:transform="translateX({(eta_level || 0) * 100}%)"
style:transform="translateX({(eta_level || 0) * 100 - 100}%)"
/>
{/if}
<div
@ -256,7 +256,7 @@
{/if}
{#if !timer}
<p class="timer">Loading...</p>
<p class="loading">Loading...</p>
{/if}
{:else if status === "error"}
<span class="error">Error</span>
@ -306,6 +306,7 @@
border-radius: var(--radius-lg);
background-color: var(--color-background-tertiary);
max-height: var(--size-screen-h);
overflow: hidden;
pointer-events: none;
}
@ -346,6 +347,10 @@
}
}
.loading {
z-index: var(--layer-2);
color: var(--color-text-body);
}
.eta-bar {
position: absolute;
top: 0;
@ -356,7 +361,6 @@
opacity: 0.8;
z-index: var(--layer-1);
transition: 10ms;
box-shadow: 2px 0px 2px 2px rgba(0, 0, 0, 0.2);
background: var(--color-background-secondary);
}
.progress-bar-wrap {
@ -415,10 +419,6 @@
text-align: center;
}
.timer {
transform: translateY(var(--size-16));
}
.error {
box-shadow: var(--shadow-drop);
border-radius: var(--radius-full);

1
ui/packages/app/src/components/Video/Video.svelte
View File

@ -40,6 +40,7 @@
padding={false}
{elem_id}
style={{ height: style.height, width: style.width }}
allow_overflow={false}
>
<StatusTracker {...loading_status} />

12
ui/packages/app/src/main.ts
View File

@ -112,10 +112,7 @@ async function handle_config(
let config;
try {
let [_config] = await Promise.all([
get_config(source),
BUILD_MODE === "dev" ? Promise.resolve : mount_css(ENTRY_CSS, target)
]);
let _config = await get_config(source);
config = _config;
} catch (e) {
console.error(e);
@ -223,13 +220,15 @@ function create_custom_element() {
}
});
this.root.append(this.wrapper);
if (window.__gradio_mode__ !== "website") {
this.theme = handle_darkmode(this.wrapper);
}
}
async connectedCallback() {
await mount_css(ENTRY_CSS, this.root);
this.root.append(this.wrapper);
const event = new CustomEvent("domchange", {
bubbles: true,
cancelable: false,
@ -358,8 +357,7 @@ function darkmode(target: HTMLDivElement): string {
return "dark";
}
// dev mode or if inside an iframe
if (BUILD_MODE === "dev" || window.location !== window.parent.location) {
if (BUILD_MODE === "dev") {
window.scoped_css_attach = (link) => {
document.head.append(link);
};

2
ui/packages/atoms/src/Block.svelte
View File

@ -14,6 +14,7 @@
export let disable: boolean = false;
export let explicit_call: boolean = false;
export let visible = true;
export let allow_overflow = true;
const color_style = {
grey: "var(--color-border-primary)",
@ -47,6 +48,7 @@
style="{styles} {size_style || null}"
style:border-style={variant}
style:border-color={color_style[color]}
style:overflow={allow_overflow ? "visible" : "hidden"}
>
<slot />
</svelte:element>

3
ui/packages/atoms/src/BlockLabel.svelte
View File

@ -31,7 +31,8 @@
border: 1px solid var(--color-border-primary);
border-top: none;
border-left: none;
border-radius: 0px 0px var(--radius-lg) 0px;
border-top-left-radius: calc(var(--radius-lg) - 1px);
border-bottom-right-radius: var(--radius-lg);
background: var(--block_label-background);
padding: var(--size-1) var(--size-2);
pointer-events: none;

2
ui/packages/form/src/Checkbox.svelte
View File

@ -47,7 +47,7 @@
input {
--ring-color: transparent;
position: relative;
box-shadow: 0 0 0 3px var(--ring-color), var(--shadow-drop);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color), var(--shadow-drop);
border: 1px solid var(--checkbox-border-color-base);
border-radius: var(--checkbox-border-radius);
background-color: var(--checkbox-background-base);

2
ui/packages/form/src/CheckboxGroup.svelte
View File

@ -77,7 +77,7 @@
input {
--ring-color: transparent;
position: relative;
box-shadow: 0 0 0 3px var(--ring-color), var(--shadow-drop);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color), var(--shadow-drop);
border: 1px solid var(--checkbox-border-color-base);
border-radius: var(--checkbox-border-radius);
background-color: var(--checkbox-background-base);

3
ui/packages/form/src/Dropdown.svelte
View File

@ -35,7 +35,8 @@
display: block;
position: relative;
outline: none !important;
box-shadow: 0 0 0 3px var(--ring-color), var(--input-shadow);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color),
var(--input-shadow);
border: 1px solid var(--input-border-color-base);
border-radius: var(--radius-lg);
background-color: var(--input-background-base);

3
ui/packages/form/src/Number.svelte
View File

@ -53,7 +53,8 @@
display: block;
position: relative;
outline: none !important;
box-shadow: 0 0 0 3px var(--ring-color), var(--input-shadow);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color),
var(--input-shadow);
border: 1px solid var(--input-border-color-base);
border-radius: var(--radius-lg);
background: var(--input-background-base);

3
ui/packages/form/src/Radio.svelte
View File

@ -70,7 +70,8 @@
input {
--ring-color: transparent;
position: relative;
box-shadow: 0 0 0 3px var(--ring-color), var(--input-shadow);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color),
var(--input-shadow);
border: 1px solid var(--checkbox-border-color-base);
border-radius: var(--radius-full);
background-color: var(--checkbox-background-base);

3
ui/packages/form/src/Range.svelte
View File

@ -65,7 +65,8 @@
display: block;
position: relative;
outline: none !important;
box-shadow: 0 0 0 3px var(--ring-color), var(--input-shadow);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color),
var(--input-shadow);
border: 1px solid var(--input-border-color-base);
border-radius: var(--radius-lg);
background: var(--input-background-base);

3
ui/packages/form/src/Textbox.svelte
View File

@ -163,7 +163,8 @@
display: block;
position: relative;
outline: none !important;
box-shadow: 0 0 0 3px var(--ring-color), var(--shadow-inset);
box-shadow: 0 0 0 var(--shadow-spread) var(--ring-color),
var(--shadow-inset);
border: 1px solid var(--input-border-color-base);
border-radius: var(--radius-lg);
background: var(--input-background-base);

2
ui/packages/json/src/JSON.svelte
View File

@ -72,7 +72,7 @@
border: 1px solid var(--color-border-primary);
border-top: none;
border-right: none;
border-bottom-left-radius: var(--radius-lg);
border-top-right-radius: inherit;
border-bottom-left-radius: var(--radius-lg);
background: var(--block_label-background);
overflow: hidden;

6
ui/packages/theme/src/generate_theme.cjs
View File

@ -57,7 +57,8 @@ const foundation_light = {
shadow: {
drop: "rgba(0,0,0,0.05) 0px 1px 2px 0px",
"drop-lg": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
inset: "rgba(0,0,0,0.05) 0px 2px 4px 0px inset"
inset: "rgba(0,0,0,0.05) 0px 2px 4px 0px inset",
spread: "3px"
}
};
@ -112,6 +113,9 @@ const foundation_dark = {
subdued: "var(--color-green-300)"
}
}
},
shadow: {
spread: "1px"
}
};