106 lines
2.9 KiB
Svelte
106 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
|
|
import queueState from "$lib/stores/queueState";
|
|
import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
|
|
import { getNodeInfo } from "$lib/utils"
|
|
import { Image, LayoutTextSidebarReverse } from "svelte-bootstrap-icons";
|
|
|
|
import { Link, Toolbar } from "framework7-svelte"
|
|
import ProgressBar from "$lib/components/ProgressBar.svelte";
|
|
import Progressbar from "$lib/components/f7/progressbar.svelte";
|
|
import Indicator from "./Indicator.svelte";
|
|
import interfaceState from "$lib/stores/interfaceState";
|
|
import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
|
|
|
|
export let subworkflowID: number = -1;
|
|
export let app: ComfyApp = undefined;
|
|
let layoutState: WritableLayoutStateStore = null;
|
|
let fileInput: HTMLInputElement = undefined;
|
|
let workflow: ComfyBoxWorkflow | null = null;
|
|
|
|
$: workflow = $workflowState.activeWorkflow;
|
|
|
|
function queuePrompt() {
|
|
navigator.vibrate(20)
|
|
app.runDefaultQueueAction()
|
|
}
|
|
|
|
async function refreshCombos() {
|
|
navigator.vibrate(20)
|
|
await app.refreshComboInNodes()
|
|
}
|
|
|
|
function doSave(): void {
|
|
if (!fileInput)
|
|
return;
|
|
|
|
navigator.vibrate(20)
|
|
app.querySave()
|
|
}
|
|
|
|
function doLoad(): void {
|
|
if (!fileInput)
|
|
return;
|
|
|
|
navigator.vibrate(20)
|
|
fileInput.value = null;
|
|
fileInput.click();
|
|
}
|
|
|
|
function loadWorkflow(): void {
|
|
app.handleFile(fileInput.files[0]);
|
|
}
|
|
|
|
function doSaveLocal(): void {
|
|
navigator.vibrate(20)
|
|
app.saveStateToLocalStorage();
|
|
}
|
|
|
|
let queued: false;
|
|
$: queued = Boolean($queueState.runningNodeID || $queueState.progress)
|
|
|
|
let running = false;
|
|
$: running = typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0;
|
|
|
|
let progress;
|
|
$: progress = $queueState.progress
|
|
|
|
let progressPercent = 0
|
|
let progressText = ""
|
|
$: if (progress) {
|
|
progressPercent = (progress.value / progress.max) * 100;
|
|
progressText = progressPercent.toFixed(1) + "%";
|
|
} else {
|
|
progressPercent = 0
|
|
progressText = "??.?%"
|
|
}
|
|
|
|
let centerHref = "/workflows/"
|
|
$: if ($interfaceState.selectedWorkflowID) {
|
|
centerHref = `/workflows/${$interfaceState.selectedWorkflowID}/`
|
|
}
|
|
else {
|
|
centerHref = "/workflows/";
|
|
}
|
|
|
|
</script>
|
|
|
|
<Toolbar bottom color="red" style="bottom: calc(var(--f7-toolbar-height))">
|
|
{#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
|
|
<Link on:click={queuePrompt}>
|
|
{workflow.attrs.queuePromptButtonName}
|
|
</Link>
|
|
{/if}
|
|
<Link on:click={refreshCombos}>🔄</Link>
|
|
<Link on:click={doSave}>Save</Link>
|
|
<Link on:click={doSaveLocal}>Save Local</Link>
|
|
<Link on:click={doLoad}>Load</Link>
|
|
<input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
|
|
</Toolbar>
|
|
|
|
<style lang="scss">
|
|
#comfy-file-input {
|
|
display: none;
|
|
}
|
|
</style>
|