Spaces:
Running
Running
<svelte:options accessors={true} /> | |
<script lang="ts"> | |
import type { Gradio } from "@gradio/utils"; | |
import { BlockTitle } from "@gradio/atoms"; | |
import { Block } from "@gradio/atoms"; | |
import { StatusTracker } from "@gradio/statustracker"; | |
import type { LoadingStatus } from "@gradio/statustracker"; | |
import { tick } from "svelte"; | |
import Viewer from "./Viewer.svelte"; | |
import Editor from "./Editor.svelte"; | |
import { BaseButton } from "@gradio/button"; | |
import { Sketch } from "@gradio/icons"; | |
import "./style.css"; | |
export let gradio: Gradio<{ | |
change: never; | |
submit: never; | |
input: never; | |
clear_status: LoadingStatus; | |
}>; | |
export let label = "Textbox"; | |
export let elem_id = ""; | |
export let elem_classes: string[] = []; | |
export let visible = true; | |
export let value = ""; | |
export let placeholder = ""; | |
export let show_label: boolean; | |
export let scale: number | null = null; | |
export let min_width: number | undefined = undefined; | |
export let loading_status: LoadingStatus | undefined = undefined; | |
export let value_is_output = false; | |
export let interactive: boolean; | |
export let rtl = false; | |
let el: HTMLTextAreaElement | HTMLInputElement; | |
const container = true; | |
function handle_change(): void { | |
gradio.dispatch("change"); | |
if (!value_is_output) { | |
gradio.dispatch("input"); | |
} | |
} | |
async function handle_keypress(e: KeyboardEvent): Promise<void> { | |
await tick(); | |
if (e.key === "Enter") { | |
e.preventDefault(); | |
gradio.dispatch("submit"); | |
} | |
} | |
$: if (value === null) value = ""; | |
// When the value changes, dispatch the change event via handle_change() | |
// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive | |
$: value, handle_change(); | |
let showeditor = false; | |
function handleMolecule(event) { | |
value = event.detail.smiles; | |
showeditor = false; | |
} | |
function showEditor() { | |
showeditor = true; | |
} | |
</script> | |
<Block | |
{visible} | |
{elem_id} | |
{elem_classes} | |
{scale} | |
{min_width} | |
allow_overflow={false} | |
padding={true} | |
> | |
<div style="min-height: 650px;"> | |
{#if loading_status} | |
<StatusTracker | |
autoscroll={gradio.autoscroll} | |
i18n={gradio.i18n} | |
{...loading_status} | |
on:clear_status={() => gradio.dispatch("clear_status", loading_status)} | |
/> | |
{/if} | |
<label class:container> | |
<BlockTitle {show_label} info={undefined}>{label}</BlockTitle> | |
<input | |
data-testid="textbox" | |
type="text" | |
class="scroll-hide" | |
bind:value | |
bind:this={el} | |
{placeholder} | |
disabled={!interactive} | |
dir={rtl ? "rtl" : "ltr"} | |
on:keypress={handle_keypress} | |
/> | |
</label> | |
<Viewer smiles={value} /> | |
{#if interactive} | |
<div class="w-full flex justify-center"> | |
<button on:click={showEditor} class="flex items-center"> | |
<div class="w-4 h-4 mr-2"><Sketch /></div> | |
<span>Draw molecule</span> | |
</button> | |
</div> | |
{/if} | |
{#if showeditor} | |
<div class="absolute top-0 left-0 w-full z-10" style="height: 650px"> | |
<Editor on:moleculesketched={handleMolecule} /> | |
</div> | |
{/if} | |
</div> | |
</Block> | |
<style> | |
label { | |
display: block; | |
width: 100%; | |
} | |
input { | |
display: block; | |
position: relative; | |
outline: none !important; | |
box-shadow: var(--input-shadow); | |
background: var(--input-background-fill); | |
padding: var(--input-padding); | |
width: 100%; | |
color: var(--body-text-color); | |
font-weight: var(--input-text-weight); | |
font-size: var(--input-text-size); | |
line-height: var(--line-sm); | |
border: none; | |
} | |
.container > input { | |
border: var(--input-border-width) solid var(--input-border-color); | |
border-radius: var(--input-radius); | |
} | |
input:disabled { | |
-webkit-text-fill-color: var(--body-text-color); | |
-webkit-opacity: 1; | |
opacity: 1; | |
} | |
input:focus { | |
box-shadow: var(--input-shadow-focus); | |
border-color: var(--input-border-color-focus); | |
} | |
input::placeholder { | |
color: var(--input-placeholder-color); | |
} | |
button { | |
display: inline-flex; | |
justify-content: center; | |
align-items: center; | |
transition: var(--button-transition); | |
box-shadow: var(--button-shadow); | |
padding: 10px 15px; | |
text-align: center; | |
border-radius: 10px; | |
border: #eee solid 1px; | |
} | |
button:hover, | |
button[disabled], | |
a:hover, | |
a.disabled { | |
box-shadow: var(--button-shadow-hover); | |
} | |
button:active, | |
a:active { | |
box-shadow: var(--button-shadow-active); | |
} | |
button[disabled], | |
a.disabled { | |
opacity: 0.5; | |
filter: grayscale(30%); | |
cursor: not-allowed; | |
} | |
.hidden { | |
display: none; | |
} | |
.primary { | |
border: var(--button-border-width) solid var(--button-primary-border-color); | |
background: var(--button-primary-background-fill); | |
color: var(--button-primary-text-color); | |
} | |
.primary:hover, | |
.primary[disabled] { | |
border-color: var(--button-primary-border-color-hover); | |
background: var(--button-primary-background-fill-hover); | |
color: var(--button-primary-text-color-hover); | |
} | |
.secondary { | |
border: var(--button-border-width) solid | |
var(--button-secondary-border-color); | |
background: var(--button-secondary-background-fill); | |
color: var(--button-secondary-text-color); | |
} | |
.secondary:hover, | |
.secondary[disabled] { | |
border-color: var(--button-secondary-border-color-hover); | |
background: var(--button-secondary-background-fill-hover); | |
color: var(--button-secondary-text-color-hover); | |
} | |
.stop { | |
border: var(--button-border-width) solid var(--button-cancel-border-color); | |
background: var(--button-cancel-background-fill); | |
color: var(--button-cancel-text-color); | |
} | |
.stop:hover, | |
.stop[disabled] { | |
border-color: var(--button-cancel-border-color-hover); | |
background: var(--button-cancel-background-fill-hover); | |
color: var(--button-cancel-text-color-hover); | |
} | |
.sm { | |
border-radius: var(--button-small-radius); | |
padding: var(--button-small-padding); | |
font-weight: var(--button-small-text-weight); | |
font-size: var(--button-small-text-size); | |
} | |
.lg { | |
border-radius: var(--button-large-radius); | |
padding: var(--button-large-padding); | |
font-weight: var(--button-large-text-weight); | |
font-size: var(--button-large-text-size); | |
} | |
.button-icon { | |
width: var(--text-xl); | |
height: var(--text-xl); | |
margin-right: var(--spacing-xl); | |
} | |
</style> | |