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

tweaks (#1229)

Browse Source 
* css tweaks

* tweak

* loader tweaks
This commit is contained in:
pngwn 2022-05-12 18:47:40 +01:00 committed by GitHub
parent f6f36123ce
commit 2e31988718
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 117 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { HighlightedText } from "@gradio/highlighted-text";
import { Block, BlockTitle } from "@gradio/atoms";
import { Block, BlockLabel } from "@gradio/atoms";
import { TextHighlight } from "@gradio/icons";
import StatusTracker from "../StatusTracker/StatusTracker.svelte";
import type { LoadingStatus } from "../StatusTracker/types";
@ -21,7 +22,14 @@
<Block {elem_id}>
<StatusTracker {...loading_status} />
{#if label}
<BlockTitle>{label}</BlockTitle>
<BlockLabel Icon={TextHighlight} {label} />
{/if}
{#if value}
<HighlightedText {value} {show_legend} {color_map} />
{:else}
<div class="min-h-[6rem] flex justify-center items-center">
<div class="h-5 dark:text-white opacity-50"><TextHighlight /></div>
</div>
{/if}
<HighlightedText {value} {show_legend} {color_map} />
</Block>

20
ui/packages/app/src/components/Json/Json.svelte
View File

@ -1,22 +1,36 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { JSON } from "@gradio/json";
import { Block } from "@gradio/atoms";
import { Block, BlockLabel } from "@gradio/atoms";
import { JSON as JSONIcon, Tree } from "@gradio/icons";
import StatusTracker from "../StatusTracker/StatusTracker.svelte";
import type { LoadingStatus } from "../StatusTracker/types";
export let elem_id: string = "";
export let value: any = {};
export let value: any;
export let loading_status: LoadingStatus;
export let label: string;
const dispatch = createEventDispatcher<{ change: undefined }>();
$: value, dispatch("change");
$: console.log(!!value);
</script>
<Block test_id="json" {elem_id}>
{#if label}
<BlockLabel Icon={Tree} {label} />
{/if}
<StatusTracker {...loading_status} />
<JSON {value} />
{#if value && value !== '""'}
<JSON {value} />
{:else}
<div class="min-h-[6rem] flex justify-center items-center">
<div class="h-7 dark:text-white opacity-50"><JSONIcon /></div>
</div>
{/if}
</Block>

11
ui/packages/app/src/components/Label/Label.svelte
View File

@ -1,7 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { Label } from "@gradio/label";
import { Block } from "@gradio/atoms";
import { LineChart as LabelIcon } from "@gradio/icons";
import { Block, BlockLabel } from "@gradio/atoms";
import StatusTracker from "../StatusTracker/StatusTracker.svelte";
import type { LoadingStatus } from "../StatusTracker/types";
@ -10,6 +11,7 @@
label: string;
confidences?: Array<{ label: string; confidence: number }>;
};
export let label: string;
export let loading_status: LoadingStatus;
export let show_label: boolean;
@ -17,12 +19,19 @@
const dispatch = createEventDispatcher<{ change: undefined }>();
$: value, dispatch("change");
$: console.log($$props);
</script>
<Block {elem_id}>
<StatusTracker {...loading_status} />
<BlockLabel Icon={LabelIcon} {label} />
{#if value !== undefined && value !== null}
<Label {value} {show_label} />
{:else}
<div class="min-h-[6rem] flex justify-center items-center">
<div class="h-5 dark:text-white opacity-50"><LabelIcon /></div>
</div>
{/if}
</Block>

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

@ -41,8 +41,8 @@
<div class="m-12 z-20">
<svg
class="text-xl"
width="7em"
height="7em"
width="5em"
height="5em"
viewBox="-1200 -1200 3000 3000"
fill="none"
xmlns="http://www.w3.org/2000/svg"

2
ui/packages/app/src/components/TimeSeries/TimeSeries.svelte
View File

@ -127,7 +127,7 @@
<Chart value={static_data} {colors} />
{:else}
<div class="min-h-[16rem] flex justify-center items-center">
<div class="h-10 dark:text-white opacity-50"><ChartIcon /></div>
<div class="h-5 dark:text-white opacity-50"><ChartIcon /></div>
</div>
{/if}
{:else if _value}

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

@ -15,7 +15,7 @@
export let test_id: string | undefined = undefined;
const styles = {
dashed: "border-dashed border-[3px]",
dashed: "border-dashed border border-gray-300",
solid: "border-solid border",
grey: "border-gray-200",
green: "border-green-400",
@ -50,7 +50,7 @@
this={tag}
data-testid={test_id}
id={elem_id}
class={"gr-box overflow-hidden" +
class={"gr-box overflow-hidden " +
styles[variant] +
" " +
styles[color] +

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

@ -3,7 +3,7 @@
</script>
<span
class="text-gray-600 text-[0.855rem] mb-2 block dark:text-gray-200"
class="text-gray-600 text-[0.855rem] mb-2 block dark:text-gray-200 relative z-40"
class:sr-only={!show_label}
>
<slot />

2
ui/packages/audio/src/StaticAudio.svelte
View File

@ -35,7 +35,7 @@
{#if value === null}
<div class="min-h-[8rem] flex justify-center items-center">
<!-- <img src={audio_icon} alt="" class="h-6 opacity-20" /> -->
<div class="h-10 dark:text-white opacity-50"><Music /></div>
<div class="h-5 dark:text-white opacity-50"><Music /></div>
</div>
{:else}
<audio

4
ui/packages/file/src/File.svelte
View File

@ -19,7 +19,7 @@
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-10 w-1/5"
class="h-5 w-1/5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -38,6 +38,6 @@
</a>
{:else}
<div class="min-h-[16rem] flex justify-center items-center">
<div class="h-10 dark:text-white opacity-50"><File /></div>
<div class="h-5 dark:text-white opacity-50"><File /></div>
</div>
{/if}

2
ui/packages/highlighted-text/src/HighlightedText.svelte
View File

@ -143,7 +143,7 @@
</div>
{/if}
<div
class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full break-word"
class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full break-word leading-7"
>
{#each value as [text, score]}
<span

15
ui/packages/icons/src/JSON.svelte Normal file
View File

@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--carbon"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
><path
fill="currentColor"
d="M31 11v10h-2l-2-6v6h-2V11h2l2 6v-6h2zm-9.666 10h-2.667A1.668 1.668 0 0 1 17 19.334v-6.667A1.668 1.668 0 0 1 18.666 11h2.667A1.668 1.668 0 0 1 23 12.666v6.667A1.668 1.668 0 0 1 21.334 21zM19 19h2v-6h-2zm-5.666 2H9v-2h4v-2h-2a2.002 2.002 0 0 1-2-2v-2.334A1.668 1.668 0 0 1 10.666 11H15v2h-4v2h2a2.002 2.002 0 0 1 2 2v2.333A1.668 1.668 0 0 1 13.334 21zm-8 0H2.667A1.668 1.668 0 0 1 1 19.334V17h2v2h2v-8h2v8.334A1.668 1.668 0 0 1 5.333 21z"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 720 B

15
ui/packages/icons/src/LineChart.svelte Normal file
View File

@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--carbon"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
><path
fill="currentColor"
d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4v-3h22v-8H4v-4h14V5H4Zm20 17v4H4v-4ZM16 7v4H4V7Z"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 364 B

18
ui/packages/icons/src/TextHighlight.svelte Normal file
View File

@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--carbon"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
><path
fill="currentColor"
d="M12 15H5a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h5V5a1 1 0 0 0-1-1H3V2h6a3 3 0 0 1 3 3zM5 9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h5V9zm15 14v2a1 1 0 0 0 1 1h5v-4h-5a1 1 0 0 0-1 1z"
/><path
fill="currentColor"
d="M2 30h28V2Zm26-2h-7a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h5v-2a1 1 0 0 0-1-1h-6v-2h6a3 3 0 0 1 3 3Z"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 577 B

15
ui/packages/icons/src/Tree.svelte Normal file
View File

@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--carbon"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
><path
fill="currentColor"
d="M23 9.005h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1H11v-1a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h4v20a2.002 2.002 0 0 0 2 2h4v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1h-4v-9h4v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1h-4v-9h4v1a2 2 0 0 0 2 2Zm0-6h6v4h-6Zm-14 4H3v-4h6Zm14 18h6v4h-6Zm0-11h6v4h-6Z"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 668 B

4
ui/packages/icons/src/index.ts
View File

@ -11,3 +11,7 @@ export { default as Image } from "./Image.svelte";
export { default as Chart } from "./Chart.svelte";
export { default as Music } from "./Music.svelte";
export { default as File } from "./File.svelte";
export { default as LineChart } from "./LineChart.svelte";
export { default as TextHighlight } from "./TextHighlight.svelte";
export { default as JSON } from "./JSON.svelte";
export { default as Tree } from "./Tree.svelte";

2
ui/packages/image/src/StaticImage.svelte
View File

@ -18,7 +18,7 @@
<BlockLabel {show_label} Icon={Image} label={label || "Image"} />
{#if value === null}
<div class="min-h-[16rem] flex justify-center items-center">
<div class="h-10 dark:text-white opacity-50"><Image /></div>
<div class="h-5 dark:text-white opacity-50"><Image /></div>
</div>
{:else}
<img class="w-full h-full object-contain" src={value} alt="" />

2
ui/packages/video/src/StaticVideo.svelte
View File

@ -21,7 +21,7 @@
<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
{#if value === null}
<div class="min-h-[16rem] flex justify-center items-center">
<div class="h-10 dark:text-white opacity-50"><Video /></div>
<div class="h-5 dark:text-white opacity-50"><Video /></div>
</div>
{:else}
<!-- svelte-ignore a11y-media-has-caption -->