mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-07 11:46:51 +08:00
73268ee2e3
* Add new source option styling for pasting from clipboard Use SourceSelect in Image component * prevent device selection cut off tweak source selection ux * Check for dupe sources in source selection Set sources[0] to active_source in Image * tweaks * tweak * add image interaction test * more tests * improve light/dark mode color contrast * add changeset * remove unused prop * add no device found placeholder change T<sources> -> T<source_types> * style tweak * allow pasting on click + add e2e test * fix e2e tests * formatting * add timeout to e2e test * tweak * tweak test * change `getByLabel` to `getByText` * value tweak * logic tweak * test * formatting --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
87 lines
2.2 KiB
Svelte
87 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
|
import StaticImage from "./Index.svelte";
|
|
import { userEvent, within } from "@storybook/testing-library";
|
|
</script>
|
|
|
|
<Meta title="Components/Image" component={Image} />
|
|
|
|
<Template let:args>
|
|
<div
|
|
class="image-container"
|
|
style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
|
|
>
|
|
<StaticImage {...args} />
|
|
</div>
|
|
</Template>
|
|
|
|
<Story
|
|
name="static with label and download button"
|
|
args={{
|
|
value: {
|
|
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
orig_name: "cheetah.jpg"
|
|
},
|
|
show_label: true,
|
|
show_download_button: true
|
|
}}
|
|
/>
|
|
|
|
<Story
|
|
name="static with no label or download button"
|
|
args={{
|
|
value: {
|
|
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
orig_name: "cheetah.jpg"
|
|
},
|
|
show_label: false,
|
|
show_download_button: false
|
|
}}
|
|
/>
|
|
|
|
<Story
|
|
name="interactive with upload, clipboard, and webcam"
|
|
args={{
|
|
sources: ["upload", "clipboard", "webcam"],
|
|
value: {
|
|
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
orig_name: "cheetah.jpg"
|
|
},
|
|
show_label: false,
|
|
show_download_button: false,
|
|
interactive: true
|
|
}}
|
|
play={async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
|
|
const webcamButton = await canvas.findByLabelText("Capture from camera");
|
|
userEvent.click(webcamButton);
|
|
|
|
userEvent.click(await canvas.findByTitle("select video source"));
|
|
userEvent.click(await canvas.findByLabelText("select source"));
|
|
userEvent.click(await canvas.findByLabelText("Upload file"));
|
|
userEvent.click(await canvas.findByLabelText("Paste from clipboard"));
|
|
}}
|
|
/>
|
|
|
|
<Story
|
|
name="interactive with webcam"
|
|
args={{
|
|
sources: ["webcam"],
|
|
show_download_button: true,
|
|
interactive: true
|
|
}}
|
|
/>
|
|
|
|
<Story
|
|
name="interactive with clipboard"
|
|
args={{
|
|
sources: ["clipboard"],
|
|
show_download_button: true,
|
|
interactive: true
|
|
}}
|
|
/>
|