File size: 6,503 Bytes
624088c
 
797cbb8
624088c
 
 
797cbb8
932a7fd
8c5d17c
dbc8f44
cb3fdda
faf4ba4
9bcdb59
faf4ba4
624088c
 
 
 
f4dea7d
 
 
932a7fd
 
 
 
5dd2af5
 
624088c
932a7fd
c32ec0d
624088c
8c5d17c
 
cb3fdda
 
932a7fd
 
 
 
f4dea7d
cb3fdda
f4dea7d
 
28ce999
 
49c4208
4f8f050
690ffd8
81eb27e
 
4f8f050
690ffd8
 
81eb27e
faf4ba4
1f1e7e0
9bcdb59
faf4ba4
690ffd8
9bcdb59
690ffd8
faf4ba4
1f1e7e0
9bcdb59
 
81eb27e
faf4ba4
 
81eb27e
faf4ba4
 
 
 
 
 
 
 
 
 
 
 
 
 
d303a22
faf4ba4
 
26ef0a6
faf4ba4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9bfb451
faf4ba4
 
 
 
 
 
 
 
 
d303a22
 
 
 
81eb27e
 
faf4ba4
81eb27e
 
 
 
faf4ba4
81eb27e
f4dea7d
5dd2af5
624088c
 
8c5d17c
932a7fd
8c5d17c
ec121fd
f4dea7d
ec121fd
974ed41
f4dea7d
8c5d17c
cb3fdda
 
 
 
 
8c5d17c
 
a40bf40
5dd2af5
8c5d17c
82d85df
cb3fdda
 
 
 
 
8c5d17c
 
932a7fd
8c5d17c
dbc8f44
f4dea7d
a40bf40
f4dea7d
 
 
 
3528bf3
 
f4dea7d
 
 
61bb967
f4dea7d
 
 
cb3fdda
 
f4dea7d
 
624088c
 
 
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
"use client"

import { useEffect, useState, useTransition } from "react"

import { cn } from "@/lib/utils"
import { TopMenu } from "./interface/top-menu"
import { fonts } from "@/lib/fonts"
import { useStore } from "./store"
import { Zoom } from "./interface/zoom"
import { BottomBar } from "./interface/bottom-bar"
import { Page } from "./interface/page"
import { GeneratedPanel } from "@/types"
import { joinWords } from "@/lib/joinWords"
import { getStoryContinuation } from "./queries/getStoryContinuation"

export default function Main() {
  const [_isPending, startTransition] = useTransition()

  const isGeneratingStory = useStore(state => state.isGeneratingStory)
  const setGeneratingStory = useStore(state => state.setGeneratingStory)

  const font = useStore(state => state.font)
  const preset = useStore(state => state.preset)
  const prompt = useStore(state => state.prompt)

  const nbPages = useStore(state => state.nbPages)
  const nbTotalPanels = useStore(state => state.nbTotalPanels)

  const setPanels = useStore(state => state.setPanels)
  const setCaptions = useStore(state => state.setCaptions)

  const zoomLevel = useStore(state => state.zoomLevel)

  const [waitABitMore, setWaitABitMore] = useState(false)

  // react to prompt changes
  useEffect(() => {
    if (!prompt) { return }

    startTransition(async () => {
      setWaitABitMore(false)
      setGeneratingStory(true)

      // I don't think we are going to need a rate limiter on the LLM part anymore
      const enableRateLimiter = false // `${process.env.NEXT_PUBLIC_ENABLE_RATE_LIMITER}`  === "true"

      const [stylePrompt, userStoryPrompt] = prompt.split("||").map(x => x.trim())

      // we have to limit the size of the prompt, otherwise the rest of the style won't be followed

      let limitedStylePrompt = stylePrompt.trim().slice(0, 77).trim()
      if (limitedStylePrompt.length !== stylePrompt.length) {
        console.log("Sorry folks, the style prompt was cut to:", limitedStylePrompt)
      }
    
      // new experimental prompt: let's drop the user prompt, and only use the style
      const lightPanelPromptPrefix = joinWords(preset.imagePrompt(limitedStylePrompt))
    
      // this prompt will be used if the LLM generation failed
      const degradedPanelPromptPrefix = joinWords([
        ...preset.imagePrompt(limitedStylePrompt),
    
        // we re-inject the story, then
        userStoryPrompt
      ])

      let existingPanels: GeneratedPanel[] = []
      const newPanelsPrompts: string[] = []
      const newCaptions: string[] = []

      const nbPanelsToGenerate = 2

      for (
        let currentPanel = 0;
        currentPanel < nbTotalPanels;
        currentPanel += nbPanelsToGenerate
      ) {
        try {
          const candidatePanels = await getStoryContinuation({
            preset,
            stylePrompt,
            userStoryPrompt,
            nbPanelsToGenerate,
            nbTotalPanels,
            existingPanels,
          })
          console.log("LLM generated some new panels:", candidatePanels)

          existingPanels.push(...candidatePanels)

          console.log(`Converting the ${nbPanelsToGenerate} new panels into image prompts..`)
         
          const startAt = currentPanel
          const endAt = currentPanel + nbPanelsToGenerate
          for (let p = startAt; p < endAt; p++) {
            newCaptions.push(existingPanels[p]?.caption.trim() || "...")
            const newPanel = joinWords([
    
              // what we do here is that ideally we give full control to the LLM for prompting,
              // unless there was a catastrophic failure, in that case we preserve the original prompt
              existingPanels[p]?.instructions
              ? lightPanelPromptPrefix
              : degradedPanelPromptPrefix,
    
              existingPanels[p]?.instructions
            ])
            newPanelsPrompts.push(newPanel)

            console.log(`Image prompt for panel ${p} => "${newPanel}"`)
          }

          // update the frontend
          // console.log("updating the frontend..")
          setCaptions(newCaptions)
          setPanels(newPanelsPrompts)    

          setGeneratingStory(false)
        } catch (err) {
          console.log("failed to generate the story, aborting here")
          setGeneratingStory(false)
          break
        }
        if (currentPanel > (nbTotalPanels / 2)) {
          console.log("good, we are half way there, hold tight!")
          // setWaitABitMore(true)
        }
      }
   
      /*
      setTimeout(() => {
        setGeneratingStory(false)
        setWaitABitMore(false)
      }, enableRateLimiter ? 12000 : 0)
      */
 
    })
  }, [prompt, preset?.label, nbTotalPanels]) // important: we need to react to preset changes too

  return (
    <div>
      <TopMenu />
      <div className={cn(
        `flex items-start w-screen h-screen pt-24 md:pt-[72px] overflow-y-scroll`,
        `transition-all duration-200 ease-in-out`,
        zoomLevel > 105 ? `px-0` : `pl-1 pr-8 md:pl-16 md:pr-16`,
        `print:pt-0 print:px-0 print:pl-0 print:pr-0`,
        fonts.actionman.className
      )}>
        <div
          className={cn(
            `flex flex-col w-full`,
            zoomLevel > 105 ? `items-start` : `items-center`
          )}>
          <div
            className={cn(
              `comic-page`,
              `flex flex-col md:flex-row md:space-x-8 lg:space-x-12 xl:space-x-16 md:items-center md:justify-start print:space-x-4`,
            )}
            style={{
              width: `${zoomLevel}%`
            }}>
            <Page page={0} />

            <Page page={1} />
          </div>
        </div>
      </div>
      <Zoom />
      <BottomBar />
      <div className={cn(
        `print:hidden`,
        `z-20 fixed inset-0`,
        `flex flex-row items-center justify-center`,
        `transition-all duration-300 ease-in-out`,
        isGeneratingStory
          ? `bg-zinc-50/30 backdrop-blur-md`
          : `bg-zinc-50/0 backdrop-blur-none pointer-events-none`,
        fonts.actionman.className
      )}>
        <div className={cn(
          `text-center text-xl text-stone-700 w-[70%]`,
          isGeneratingStory ? ``: `scale-0 opacity-0`,
          `transition-all duration-300 ease-in-out`,
        )}>
          {waitABitMore ? `Story is ready, but server is a bit busy!`: 'Generating a new story..'}<br/>
          {waitABitMore ? `Please hold tight..` : ''}
        </div>
      </div>
    </div>
  )
}