|
<script lang="ts">
|
|
import type { ThemeMode } from "@gradio/core";
|
|
import type { WorkerProxy } from "@gradio/wasm";
|
|
import { createEventDispatcher, onMount } from "svelte";
|
|
import { Block } from "@gradio/atoms";
|
|
import { BaseCode as Code } from "@gradio/code";
|
|
import lightning from "./images/lightning.svg";
|
|
|
|
export let is_embed: boolean;
|
|
export let theme_mode: ThemeMode | null = "system";
|
|
export let worker_proxy: WorkerProxy | undefined = undefined;
|
|
|
|
export let code: string | undefined;
|
|
export let layout: string | null = null;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
let loading_text = "";
|
|
export let loaded = false;
|
|
worker_proxy?.addEventListener("progress-update", (event) => {
|
|
loading_text = (event as CustomEvent).detail + "...";
|
|
});
|
|
worker_proxy?.addEventListener("initialization-completed", (_) => {
|
|
loaded = true;
|
|
});
|
|
|
|
function shortcut_run(e: KeyboardEvent): void {
|
|
if (e.key == "Enter" && (e.metaKey || e.ctrlKey)) {
|
|
dispatch("code", { code });
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
function handle_theme_mode(target: HTMLDivElement): "light" | "dark" {
|
|
const force_light = window.__gradio_mode__ === "website";
|
|
|
|
let new_theme_mode: ThemeMode;
|
|
if (force_light) {
|
|
new_theme_mode = "light";
|
|
} else {
|
|
const url = new URL(window.location.toString());
|
|
const url_color_mode: ThemeMode | null = url.searchParams.get(
|
|
"__theme"
|
|
) as ThemeMode | null;
|
|
new_theme_mode = theme_mode || url_color_mode || "system";
|
|
}
|
|
|
|
if (new_theme_mode === "dark" || new_theme_mode === "light") {
|
|
apply_theme(target, new_theme_mode);
|
|
} else {
|
|
new_theme_mode = sync_system_theme(target);
|
|
}
|
|
return new_theme_mode;
|
|
}
|
|
|
|
function sync_system_theme(target: HTMLDivElement): "light" | "dark" {
|
|
const theme = update_scheme();
|
|
window
|
|
?.matchMedia("(prefers-color-scheme: dark)")
|
|
?.addEventListener("change", update_scheme);
|
|
|
|
function update_scheme(): "light" | "dark" {
|
|
let _theme: "light" | "dark" = window?.matchMedia?.(
|
|
"(prefers-color-scheme: dark)"
|
|
).matches
|
|
? "dark"
|
|
: "light";
|
|
|
|
apply_theme(target, _theme);
|
|
return _theme;
|
|
}
|
|
return theme;
|
|
}
|
|
|
|
function apply_theme(target: HTMLDivElement, theme: "dark" | "light"): void {
|
|
const dark_class_element = is_embed ? target.parentElement! : document.body;
|
|
if (theme === "dark") {
|
|
dark_class_element.classList.add("dark");
|
|
} else {
|
|
dark_class_element.classList.remove("dark");
|
|
}
|
|
}
|
|
|
|
let active_theme_mode: Exclude<ThemeMode, "system"> = "light";
|
|
let parent_container: HTMLDivElement;
|
|
|
|
let code_editor_container: HTMLDivElement;
|
|
onMount(() => {
|
|
active_theme_mode = handle_theme_mode(parent_container);
|
|
|
|
code_editor_container.addEventListener("keydown", shortcut_run, true);
|
|
|
|
return () => {
|
|
code_editor_container.removeEventListener("keydown", shortcut_run, true);
|
|
};
|
|
});
|
|
|
|
$: loading_text;
|
|
$: loaded;
|
|
$: code;
|
|
</script>
|
|
|
|
<div class="parent-container" bind:this={parent_container}>
|
|
<div class="wrapper">
|
|
<div class="loading-panel">
|
|
<div class="code-header">app.py</div>
|
|
{#if !loaded}
|
|
<div style="display: flex;"></div>
|
|
<div class="loading-section">
|
|
<div class="loading-dot"></div>
|
|
{loading_text}
|
|
</div>
|
|
{:else}
|
|
<div class="buttons">
|
|
<div class="run">
|
|
<button
|
|
class="button"
|
|
on:click={() => {
|
|
dispatch("code", { code });
|
|
}}
|
|
>
|
|
Run
|
|
<div class="shortcut">⌘+↵</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div style="flex-grow: 1"></div>
|
|
<div class="loading-section">
|
|
<img src={lightning} alt="lightning icon" class="lightning-logo" />
|
|
Interactive
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div
|
|
class:horizontal={layout === "horizontal"}
|
|
class:vertical={layout === "vertical"}
|
|
class="child-container"
|
|
>
|
|
<div
|
|
class:code-editor-border={loaded}
|
|
class="code-editor"
|
|
bind:this={code_editor_container}
|
|
>
|
|
<Block variant={"solid"} padding={false}>
|
|
<Code
|
|
bind:value={code}
|
|
language="python"
|
|
lines={10}
|
|
readonly={!loaded}
|
|
dark_mode={active_theme_mode === "dark"}
|
|
/>
|
|
</Block>
|
|
</div>
|
|
{#if loaded}
|
|
<div class="preview">
|
|
<slot></slot>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.parent-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border: 1px solid rgb(229 231 235);
|
|
border-radius: 0.375rem;
|
|
}
|
|
:global(.dark .parent-container) {
|
|
border-color: #374151 !important;
|
|
color-scheme: dark !important;
|
|
}
|
|
|
|
.child-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.horizontal {
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
.vertical {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.vertical .code-editor-border {
|
|
border-right: none !important;
|
|
}
|
|
|
|
.horizontal .code-editor-border {
|
|
border-right: 1px solid rgb(229 231 235);
|
|
border-bottom: none;
|
|
}
|
|
:global(.dark .horizontal .code-editor-border) {
|
|
border-right: 1px solid #374151 !important;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.child-container {
|
|
flex-direction: row;
|
|
}
|
|
.code-editor-border {
|
|
border-right: 1px solid rgb(229 231 235);
|
|
}
|
|
:global(.dark .code-editor-border) {
|
|
border-right: 1px solid #374151 !important;
|
|
}
|
|
}
|
|
|
|
.code-editor {
|
|
flex: 1 1 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: 1px solid;
|
|
border-color: rgb(229 231 235);
|
|
}
|
|
:global(.dark .code-editor) {
|
|
border-color: #374151 !important;
|
|
}
|
|
|
|
.loading-panel {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
vertical-align: middle;
|
|
height: 2rem;
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
border-bottom: 1px solid rgb(229 231 235);
|
|
}
|
|
|
|
:global(.dark .loading-panel) {
|
|
background: #1f2937 !important;
|
|
border-color: #374151 !important;
|
|
}
|
|
|
|
.code-header {
|
|
align-self: center;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
font-weight: lighter;
|
|
margin-right: 4px;
|
|
color: #535d6d;
|
|
}
|
|
:global(.dark .code-header) {
|
|
color: white !important;
|
|
}
|
|
|
|
.loading-section {
|
|
align-items: center;
|
|
display: flex;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
color: #999b9e;
|
|
font-family: sans-serif;
|
|
font-size: 15px;
|
|
align-self: center;
|
|
}
|
|
:global(.dark .loading-section) {
|
|
color: white !important;
|
|
}
|
|
|
|
.lightning-logo {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: 0.125rem;
|
|
}
|
|
|
|
.preview {
|
|
flex: 1 1 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: middle;
|
|
height: 2rem;
|
|
}
|
|
|
|
.run {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999b9e;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.button {
|
|
display: flex;
|
|
height: 80%;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
padding-left: 0.8rem;
|
|
padding-right: 0.8rem;
|
|
border-radius: 0.375rem;
|
|
float: right;
|
|
margin: 0.25rem;
|
|
border: 1px solid #e5e7eb;
|
|
background: linear-gradient(to bottom right, #f3f4f6, #e5e7eb);
|
|
color: #374151;
|
|
cursor: pointer;
|
|
font-family: sans-serif;
|
|
}
|
|
:global(.dark .button) {
|
|
border-color: #374151 !important;
|
|
background: linear-gradient(to bottom right, #4b5563, #374151) !important;
|
|
color: white !important;
|
|
}
|
|
.shortcut {
|
|
align-self: center;
|
|
margin-top: 2px;
|
|
font-size: 10px;
|
|
font-weight: lighter;
|
|
padding-left: 0.15rem;
|
|
color: #374151;
|
|
}
|
|
:global(.dark .shortcut) {
|
|
color: white !important;
|
|
}
|
|
|
|
:global(div.code-editor div.block) {
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
|
|
:global(div.code-editor div.block .cm-gutters) {
|
|
background-color: white;
|
|
}
|
|
:global(.dark div.code-editor div.block .cm-gutters) {
|
|
background: #1f2937 !important;
|
|
}
|
|
|
|
:global(div.code-editor div.block .cm-content) {
|
|
width: 0;
|
|
}
|
|
|
|
:global(div.lite-demo div.gradio-container) {
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
:global(.gradio-container) {
|
|
max-width: none !important;
|
|
}
|
|
|
|
.code-editor :global(label) {
|
|
display: none;
|
|
}
|
|
|
|
.code-editor :global(.codemirror-wrappper) {
|
|
border-radius: var(--block-radius);
|
|
}
|
|
|
|
.code-editor :global(> .block) {
|
|
border: none !important;
|
|
}
|
|
|
|
.code-editor :global(.cm-scroller) {
|
|
height: 100% !important;
|
|
}
|
|
:global(.code-editor .block) {
|
|
border-style: none !important;
|
|
height: 100%;
|
|
}
|
|
:global(.code-editor .container) {
|
|
padding: 2px;
|
|
padding-right: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
:global(.code-editor .container a) {
|
|
display: block;
|
|
width: 65%;
|
|
color: #9095a0;
|
|
margin: auto;
|
|
}
|
|
|
|
:global(.code-editor .block button) {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #9095a0;
|
|
height: 100%;
|
|
padding: 5px;
|
|
padding-left: 0;
|
|
}
|
|
|
|
:global(.code-editor .block .check) {
|
|
width: 65%;
|
|
color: #ff7c00;
|
|
margin: auto;
|
|
}
|
|
:global(.gradio-container) {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.loading-dot {
|
|
position: relative;
|
|
left: -9999px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: #fd7b00;
|
|
color: #fd7b00;
|
|
box-shadow: 9999px 0 0 -1px;
|
|
animation: loading-dot 2s infinite linear;
|
|
animation-delay: 0.25s;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
@keyframes loading-dot {
|
|
0% {
|
|
box-shadow: 9999px 0 0 -1px;
|
|
}
|
|
50% {
|
|
box-shadow: 9999px 0 0 2px;
|
|
}
|
|
100% {
|
|
box-shadow: 9999px 0 0 -1px;
|
|
}
|
|
}
|
|
</style>
|
|
|
