File size: 3,964 Bytes
932a7fd
241036e
932a7fd
 
 
 
cb3fdda
dbc8f44
932a7fd
 
 
 
 
cb3fdda
932a7fd
241036e
cb3fdda
8c5d17c
dbc8f44
f4dea7d
932a7fd
 
 
 
 
 
 
cb3fdda
241036e
8c5d17c
dbc8f44
f4dea7d
932a7fd
 
dbc8f44
932a7fd
 
11443d4
932a7fd
cb3fdda
932a7fd
241036e
cb3fdda
974ed41
dbc8f44
f4dea7d
932a7fd
 
 
241036e
 
 
 
 
cb3fdda
241036e
 
 
 
 
 
 
 
 
cb3fdda
241036e
 
 
 
 
 
 
 
 
cb3fdda
 
 
 
 
 
 
 
 
 
 
241036e
 
 
 
932a7fd
241036e
 
 
 
 
 
 
 
cb3fdda
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
133
134
135
136
137
138
139
140
141
142
143
144
"use client"

import { create } from "zustand"

import { FontName } from "@/lib/fonts"
import { Preset, getPreset } from "@/app/engine/presets"
import { LayoutName, getRandomLayoutNames } from "../layouts"
import html2canvas from "html2canvas"

export const useStore = create<{
  prompt: string
  font: FontName
  preset: Preset
  nbFrames: number
  panels: string[]
  captions: Record<string, string>
  layouts: 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
  setLayouts: (layouts: 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"),
  nbFrames: 1,
  panels: [],
  captions: {},
  layouts: getRandomLayoutNames(),
  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,
      layouts: getRandomLayoutNames(),
      panels: [],
      captions: {},
    })
  },
  setFont: (font: FontName) => {
    const existingFont = get().font
    if (font === existingFont) { return }
    set({
      font,
      layouts: getRandomLayoutNames(),
      panels: [],
      captions: {}
    })
  },
  setPreset: (preset: Preset) => {
    const existingPreset = get().preset
    if (preset.label === existingPreset.label) { return }
    set({
      preset,
      layouts: getRandomLayoutNames(),
      panels: [],
      captions: {}
    })
  },
  setNbFrames: (nbFrames: number) => {
    const existingNbFrames = get().nbFrames
    if (nbFrames === existingNbFrames) { return }
    set({
      nbFrames,
      layouts: getRandomLayoutNames(),
      panels: [],
      captions: {}
    })
  },
  setPanels: (panels: string[]) => set({ panels }),
  setCaption: (panelId: number, caption: string) => {
    set({
      captions: {
        ...get().captions,
        [panelId]: caption
      }
    })
  },
  setLayouts: (layouts: LayoutName[]) => set({ layouts }),
  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)
    }
  }
}))