88 lines
2.4 KiB
Svelte
88 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { ListIcon as List, ImageIcon as Image, SettingsIcon as Settings } from "svelte-feather-icons";
|
|
import ComfyApp, { type A1111PromptAndInfo, type SerializedAppState } from "./ComfyApp";
|
|
import uiState from "$lib/stores/uiState";
|
|
import { SvelteToast, toast } from '@zerodevx/svelte-toast'
|
|
|
|
import LightboxModal from "./LightboxModal.svelte";
|
|
import Sidebar from "./Sidebar.svelte";
|
|
import SidebarItem from "./SidebarItem.svelte";
|
|
// import Modal from "./Modal.svelte";
|
|
// import A1111PromptDisplay from "./A1111PromptDisplay.svelte";
|
|
import notify from "$lib/notify";
|
|
import ComfyWorkflowsView from "./ComfyWorkflowsView.svelte";
|
|
|
|
|
|
export let app: ComfyApp = undefined;
|
|
let hasShownUIHelpToast: boolean = false;
|
|
let uiTheme: string = "gradio-dark";
|
|
|
|
const toastOptions = {
|
|
intro: { duration: 200 },
|
|
theme: {
|
|
'--toastBarHeight': 0
|
|
}
|
|
}
|
|
|
|
$: if ($uiState.uiUnlocked && !hasShownUIHelpToast) {
|
|
hasShownUIHelpToast = true;
|
|
notify("Right-click to open context menu.")
|
|
}
|
|
|
|
$: if (uiTheme === "gradio-dark") {
|
|
document.getElementById("app-root").classList.add("dark")
|
|
}
|
|
else {
|
|
document.getElementById("app-root").classList.remove("dark")
|
|
}
|
|
|
|
// let showModal: boolean = false;
|
|
//
|
|
// $: showModal = $a1111Prompt != null
|
|
//
|
|
// let selectedTab
|
|
</script>
|
|
|
|
<svelte:head>
|
|
{#if uiTheme === "anapnoe"}
|
|
<link rel="stylesheet" href="/src/scss/ux.scss">
|
|
{/if}
|
|
</svelte:head>
|
|
|
|
<!--
|
|
<Modal bind:showModal on:close={() => ($a1111Prompt = null)}>
|
|
<div slot="header" class="prompt-modal-header">
|
|
<h1 style="padding-bottom: 1rem;">A1111 Prompt Details</h1>
|
|
</div>
|
|
<A1111PromptDisplay prompt={$a1111Prompt} />
|
|
<div slot="buttons" let:closeDialog>
|
|
<Button variant="secondary" on:click={closeDialog}>
|
|
Close
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
-->
|
|
|
|
<div id="main" class:dark={uiTheme === "gradio-dark"}>
|
|
<div id="container">
|
|
<Sidebar selected="generate">
|
|
<SidebarItem id="generate" name="Generate" icon={Image}>
|
|
<ComfyWorkflowsView {app} {uiTheme} />
|
|
</SidebarItem>
|
|
<SidebarItem id="settings" name="Settings" icon={Settings}>
|
|
</SidebarItem>
|
|
</Sidebar>
|
|
</div>
|
|
<LightboxModal />
|
|
</div>
|
|
<SvelteToast options={toastOptions} />
|
|
|
|
<style lang="scss">
|
|
#container {
|
|
height: 100vh;
|
|
max-width: 100vw;
|
|
display: relative;
|
|
width: 100%;
|
|
}
|
|
</style>
|