mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-12-27 02:30:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Ui feedback changes

Browse Source
This commit is contained in:
dawoodkhan82 2022-01-20 18:25:24 -05:00
parent 6560f53647
commit eb9c4e6d14
5 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend-svelte/src/components/input/File.svelte
View File

@ -14,9 +14,12 @@
Click to Upload
</Upload>
{:else}
<div class="file-preview w-full flex flex-col justify-center items-center relative">
<div class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative">
<ModifyUpload clear={() => setValue(null)} {theme} />
<div class="file-name text-4xl p-6 break-all">{value.name}</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-1/5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
<div class="file-size text-2xl p-2">
{prettyBytes(value.size)}
</div>

7
frontend-svelte/src/components/output/File.svelte
View File

@ -5,12 +5,15 @@
</script>
<a
class="output-file w-full h-full flex flex-col justify-center items-center relative"
class="output-file w-full h-full flex flex-row flex-wrap justify-center items-center relative"
href={value.data}
download={value.name}
{theme}
>
<div class="file-name text-4xl p-6 break-all">{value.name}</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-1/5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
<div class="text-2xl p-2">
{isNaN(value.size) ? "" : prettyBytes(value.size)}
</div>

4
frontend-svelte/src/components/output/HighlightedText.svelte
View File

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

4
frontend-svelte/src/components/output/Label.svelte
View File

@ -42,10 +42,10 @@
<style lang="postcss">
.output-label[theme="default"] {
.label {
@apply text-sm h-5;
@apply text-base h-7;
}
.confidence {
@apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-5 font-semibold rounded;
@apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-7 font-semibold rounded;
}
.confidence:first-child {
@apply border-yellow-600 bg-yellow-500 dark:bg-red-600 border-red-700 text-white;

6
frontend-svelte/src/components/utils/Upload.svelte
View File

@ -3,7 +3,9 @@
export let single_file = true;
export let include_file_metadata = true;
let hidden_upload;
let dragging = false;
const updateDragging = () => {dragging = !dragging}
const openFileUpload = () => {
hidden_upload.click();
};
@ -42,7 +44,7 @@
</script>
<div
class="upload h-60 border-gray-300 text-gray-400 dark:text-gray-500 dark:border-gray-500 border-8 border-dashed w-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10"
class={dragging ? "upload h-60 border-green-300 text-green-400 dark:text-green-500 dark:border-green-500 border-8 border-dashed w-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10" : "upload h-60 border-gray-300 text-gray-400 dark:text-gray-500 dark:border-gray-500 border-8 border-dashed w-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10"}
{theme}
on:drag|preventDefault|stopPropagation
on:dragstart|preventDefault|stopPropagation
@ -53,6 +55,8 @@
on:drop|preventDefault|stopPropagation
on:click={openFileUpload}
on:drop={loadFilesFromDrop}
on:dragenter={updateDragging}
on:dragleave={updateDragging}
>
<slot />
<input