Spaces:
Running
Running
File size: 3,662 Bytes
932a7fd 241036e 932a7fd 8c5d17c dbc8f44 932a7fd 241036e 932a7fd 8c5d17c dbc8f44 f4dea7d 932a7fd 241036e 8c5d17c dbc8f44 f4dea7d 932a7fd dbc8f44 932a7fd 11443d4 932a7fd 241036e 8c5d17c 974ed41 dbc8f44 f4dea7d 932a7fd 241036e d71abf1 241036e d71abf1 241036e d71abf1 241036e 932a7fd 241036e 932a7fd 8c5d17c dbc8f44 f4dea7d 932a7fd dbc8f44 932a7fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
"use client"
import { create } from "zustand"
import { FontName } from "@/lib/fonts"
import { Preset, getPreset } from "@/app/engine/presets"
import { LayoutName, getRandomLayoutName } from "../layouts"
import html2canvas from "html2canvas"
export const useStore = create<{
prompt: string
font: FontName
preset: Preset
panels: string[]
captions: Record<string, string>
layout: LayoutName
zoomLevel: number
page: HTMLDivElement
isGeneratingStory: boolean
panelGenerationStatus: Record<number, boolean>
isGeneratingText: boolean
atLeastOnePanelIsBusy: boolean
setPrompt: (prompt: string) => void
setFont: (font: FontName) => void
setPreset: (preset: Preset) => void
setPanels: (panels: string[]) => void
setLayout: (layout: LayoutName) => void
setCaption: (panelId: number, caption: string) => void
setZoomLevel: (zoomLevel: number) => void
setPage: (page: HTMLDivElement) => void
setGeneratingStory: (isGeneratingStory: boolean) => void
setGeneratingImages: (panelId: number, value: boolean) => void
setGeneratingText: (isGeneratingText: boolean) => void
download: () => void
}>((set, get) => ({
prompt: "",
font: "actionman",
preset: getPreset("japanese_manga"),
panels: [],
captions: {},
layout: getRandomLayoutName(),
zoomLevel: 60,
page: undefined as unknown as HTMLDivElement,
isGeneratingStory: false,
panelGenerationStatus: {},
isGeneratingText: false,
atLeastOnePanelIsBusy: false,
setPrompt: (prompt: string) => {
const existingPrompt = get().prompt
if (prompt === existingPrompt) { return }
set({
prompt,
layout: getRandomLayoutName(),
panels: [],
captions: {},
})
},
setFont: (font: FontName) => {
const existingFont = get().font
if (font === existingFont) { return }
set({
font,
layout: getRandomLayoutName(),
panels: [],
captions: {}
})
},
setPreset: (preset: Preset) => {
const existingPreset = get().preset
if (preset.label === existingPreset.label) { return }
set({
preset,
layout: getRandomLayoutName(),
panels: [],
captions: {}
})
},
setPanels: (panels: string[]) => set({ panels }),
setCaption: (panelId: number, caption: string) => {
set({
captions: {
...get().captions,
[panelId]: caption
}
})
},
setLayout: (layout: LayoutName) => set({ layout }),
setZoomLevel: (zoomLevel: number) => set({ zoomLevel }),
setPage: (page: HTMLDivElement) => {
if (!page) { return }
set({ page })
},
setGeneratingStory: (isGeneratingStory: boolean) => set({ isGeneratingStory }),
setGeneratingImages: (panelId: number, value: boolean) => {
const panelGenerationStatus: Record<number, boolean> = {
...get().panelGenerationStatus,
[panelId]: value
}
const atLeastOnePanelIsBusy = Object.values(panelGenerationStatus).includes(true)
set({
panelGenerationStatus,
atLeastOnePanelIsBusy
})
},
setGeneratingText: (isGeneratingText: boolean) => set({ isGeneratingText }),
download: async () => {
console.log("download called!")
const { page } = get()
console.log("page:", page)
if (!page) { return }
const canvas = await html2canvas(page)
console.log("canvas:", canvas)
const data = canvas.toDataURL('image/jpg')
const link = document.createElement('a')
if (typeof link.download === 'string') {
link.href = data
link.download = 'comic.jpg'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
} else {
window.open(data)
}
}
}))
|