File size: 2,650 Bytes
a03b3ba |
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<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
}}
/>
<Story
name="interactive webcam with streaming"
args={{
sources: ["webcam"],
show_download_button: true,
interactive: true,
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"
},
streaming: true
}}
/>
|