2024-02-02 22:21:48 +08:00
|
|
|
<script context="module">
|
|
|
|
import { Template, Story } from "@storybook/addon-svelte-csf";
|
2023-10-31 12:46:02 +08:00
|
|
|
import StaticImage from "./Index.svelte";
|
2024-03-20 02:22:21 +08:00
|
|
|
import { userEvent, within } from "@storybook/test";
|
2024-02-02 22:21:48 +08:00
|
|
|
import { allModes } from "../storybook/modes";
|
2024-08-22 01:41:40 +08:00
|
|
|
import image_file_100x100 from "../storybook/test_files/image_100x100.webp";
|
|
|
|
import image_file_100x1000 from "../storybook/test_files/image_100x100.webp";
|
2023-08-04 06:01:18 +08:00
|
|
|
|
2024-02-02 22:21:48 +08:00
|
|
|
export const meta = {
|
|
|
|
title: "Components/Image",
|
|
|
|
component: StaticImage,
|
|
|
|
parameters: {
|
|
|
|
chromatic: {
|
|
|
|
modes: {
|
|
|
|
desktop: allModes["desktop"],
|
|
|
|
mobile: allModes["mobile"]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2024-08-21 07:22:17 +08:00
|
|
|
|
|
|
|
let md = `# a heading! /n a new line! `;
|
2024-02-02 22:21:48 +08:00
|
|
|
</script>
|
2023-08-04 06:01:18 +08:00
|
|
|
|
|
|
|
<Template let:args>
|
|
|
|
<div
|
|
|
|
class="image-container"
|
|
|
|
style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
|
|
|
|
>
|
|
|
|
<StaticImage {...args} />
|
|
|
|
</div>
|
|
|
|
</Template>
|
|
|
|
|
|
|
|
<Story
|
2024-08-21 07:22:17 +08:00
|
|
|
name="static with label, info and download button"
|
2024-08-06 06:45:14 +08:00
|
|
|
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,
|
2024-08-21 07:22:17 +08:00
|
|
|
placeholder: "This is a cheetah",
|
2024-08-06 06:45:14 +08:00
|
|
|
show_download_button: true
|
|
|
|
}}
|
|
|
|
play={async ({ canvasElement }) => {
|
|
|
|
const canvas = within(canvasElement);
|
|
|
|
|
|
|
|
const expand_btn = canvas.getByRole("button", {
|
|
|
|
name: "View in full screen"
|
|
|
|
});
|
|
|
|
await userEvent.click(expand_btn);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
2023-08-04 06:01:18 +08:00
|
|
|
<Story
|
2023-12-20 03:24:08 +08:00
|
|
|
name="static with no label or download button"
|
2023-08-04 06:01:18 +08:00
|
|
|
args={{
|
2023-10-31 12:46:02 +08:00
|
|
|
value: {
|
2023-12-08 23:23:14 +08:00
|
|
|
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"
|
2023-10-31 12:46:02 +08:00
|
|
|
},
|
2023-08-04 06:01:18 +08:00
|
|
|
show_label: false,
|
|
|
|
show_download_button: false
|
|
|
|
}}
|
|
|
|
/>
|
2023-12-20 03:24:08 +08:00
|
|
|
|
2024-08-22 01:41:40 +08:00
|
|
|
<Story
|
|
|
|
name="static with a vertically long image"
|
|
|
|
args={{
|
|
|
|
value: {
|
|
|
|
path: image_file_100x1000,
|
|
|
|
url: image_file_100x1000,
|
|
|
|
orig_name: "image.webp"
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Story
|
|
|
|
name="static with a vertically long image and a fixed height"
|
|
|
|
args={{
|
|
|
|
value: {
|
|
|
|
path: image_file_100x1000,
|
|
|
|
url: image_file_100x1000,
|
|
|
|
orig_name: "image.webp"
|
|
|
|
},
|
|
|
|
height: "500px"
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Story
|
|
|
|
name="static with a small image and a fixed height"
|
|
|
|
args={{
|
|
|
|
value: {
|
|
|
|
path: image_file_100x100,
|
|
|
|
url: image_file_100x100,
|
|
|
|
orig_name: "image.webp"
|
|
|
|
},
|
|
|
|
height: "500px"
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
2023-12-20 03:24:08 +08:00
|
|
|
<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,
|
2024-08-21 07:22:17 +08:00
|
|
|
interactive: true,
|
|
|
|
placeholder: md
|
2023-12-20 03:24:08 +08:00
|
|
|
}}
|
|
|
|
play={async ({ canvasElement }) => {
|
|
|
|
const canvas = within(canvasElement);
|
|
|
|
|
|
|
|
const webcamButton = await canvas.findByLabelText("Capture from camera");
|
|
|
|
userEvent.click(webcamButton);
|
|
|
|
|
2024-02-03 02:26:44 +08:00
|
|
|
userEvent.click(await canvas.findByTitle("grant webcam access"));
|
2023-12-20 03:24:08 +08:00
|
|
|
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
|
|
|
|
}}
|
|
|
|
/>
|
2023-12-22 02:50:11 +08:00
|
|
|
|
|
|
|
<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
|
|
|
|
}}
|
|
|
|
/>
|