Typeable value on gradio.Slider (#2329)

* typeable number slider

* fix hardcoded files in test configs

* test

* test fix
This commit is contained in:
Dawood Khan 2022-09-26 23:00:02 -04:00 committed by GitHub
parent a05f32c8f1
commit 55e6f40f80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 43 additions and 36 deletions

View File

@ -54,6 +54,7 @@ jobs:
cache: pnpm cache: pnpm
cache-dependency-path: ui/pnpm-lock.yaml cache-dependency-path: ui/pnpm-lock.yaml
- run: pip install -r ../requirements.txt - run: pip install -r ../requirements.txt
- run: pip install gradio
- run: pnpm install --frozen-lockfile - run: pnpm install --frozen-lockfile
- run: pnpm exec playwright install chromium - run: pnpm exec playwright install chromium
- run: pnpm build - run: pnpm build

View File

@ -164,7 +164,7 @@
"headers": [], "headers": [],
"samples": [ "samples": [
[ [
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/blocks_inputs/lion.jpg" "lion.jpg"
] ]
], ],
"type": "index", "type": "index",

View File

@ -758,14 +758,14 @@
], ],
"baz", "baz",
"bar", "bar",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/world.mp4", "world.mp4",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav", "cantina.wav",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav", "cantina.wav",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/titanic.csv", "titanic.csv",
[ [
[ [
1, 1,
@ -778,7 +778,7 @@
5 5
] ]
], ],
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/time.csv" "time.csv"
], ],
[ [
"the quick brown fox", "the quick brown fox",
@ -793,14 +793,14 @@
], ],
"baz", "baz",
"bar", "bar",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/world.mp4", "world.mp4",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav", "cantina.wav",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav", "cantina.wav",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/titanic.csv", "titanic.csv",
[ [
[ [
1, 1,
@ -813,7 +813,7 @@
5 5
] ]
], ],
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/time.csv" "time.csv"
], ],
[ [
"the quick brown fox", "the quick brown fox",
@ -828,14 +828,14 @@
], ],
"baz", "baz",
"bar", "bar",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg", "cheetah1.jpg",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/world.mp4", "world.mp4",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav", "cantina.wav",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav", "cantina.wav",
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/titanic.csv", "titanic.csv",
[ [
[ [
1, 1,
@ -848,7 +848,7 @@
5 5
] ]
], ],
"/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/time.csv" "time.csv"
] ]
], ],
"type": "index", "type": "index",

View File

@ -8,7 +8,7 @@
"build:website": "vite build --mode production:website --emptyOutDir", "build:website": "vite build --mode production:website --emptyOutDir",
"build:local": "vite build --mode production:local --emptyOutDir", "build:local": "vite build --mode production:local --emptyOutDir",
"preview": "vite preview", "preview": "vite preview",
"test:browser": "pnpm exec python test/create_demo_configs.py && pnpm exec playwright test test/ --config=../../playwright.config.js", "test:browser": "python test/create_demo_configs.py && pnpm exec playwright test test/ --config=../../playwright.config.js",
"test:browser:debug": "pnpm exec playwright test test/ --debug --config=../../playwright.config.js" "test:browser:debug": "pnpm exec playwright test test/ --debug --config=../../playwright.config.js"
}, },
"dependencies": { "dependencies": {

View File

@ -51,7 +51,7 @@ test("test inputs", async ({ page }) => {
const uploaded_image = await page.locator("img").nth(0); const uploaded_image = await page.locator("img").nth(0);
const image_data = await uploaded_image.getAttribute("src"); const image_data = await uploaded_image.getAttribute("src");
await expect(image_data).toEqual(BASE64_IMAGE); await expect(image_data).toContain("cheetah1.jpg");
// Image Input w/ Cropper // Image Input w/ Cropper
const image_cropper = await page.locator("input").nth(10); const image_cropper = await page.locator("input").nth(10);
@ -59,7 +59,7 @@ test("test inputs", async ({ page }) => {
const uploaded_image_cropper = await page.locator("img").nth(0); const uploaded_image_cropper = await page.locator("img").nth(0);
const image_data_cropper = await uploaded_image_cropper.getAttribute("src"); const image_data_cropper = await uploaded_image_cropper.getAttribute("src");
await expect(image_data_cropper).toEqual(BASE64_IMAGE); await expect(image_data_cropper).toContain("cheetah1.jpg");
}); });
test("test outputs", async ({ page }) => { test("test outputs", async ({ page }) => {

View File

@ -5,7 +5,7 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import { BlockTitle } from "@gradio/atoms"; import { BlockTitle } from "@gradio/atoms";
import { create_classes } from "@gradio/utils"; import { get_styles } from "@gradio/utils";
import type { Styles } from "@gradio/utils"; import type { Styles } from "@gradio/utils";
export let value: number = 0; export let value: number = 0;
@ -18,10 +18,10 @@
export let show_label: boolean; export let show_label: boolean;
const id = `range_id_${_id++}`; const id = `range_id_${_id++}`;
const dispatch = createEventDispatcher<{ change: number }>(); const dispatch = createEventDispatcher<{ change: number }>();
$: dispatch("change", value); $: dispatch("change", value);
$: ({ classes } = get_styles(style, ["rounded", "border"]));
</script> </script>
<div class="w-full flex flex-col "> <div class="w-full flex flex-col ">
@ -29,9 +29,15 @@
<label for={id}> <label for={id}>
<BlockTitle {show_label}>{label}</BlockTitle> <BlockTitle {show_label}>{label}</BlockTitle>
</label> </label>
<div class={"font-medium dark:text-gray-300" + create_classes(style)}> <input
{value} type="number"
</div> class="gr-box gr-input gr-text-input text-center h-6 {classes}"
bind:value
min={minimum}
max={maximum}
{step}
{disabled}
/>
</div> </div>
</div> </div>