add new turbo mode

src/app/engine/presets.ts

@@ -57,7 +57,7 @@ export const presets: Record<string, Preset> = {
     llmPrompt: "japanese manga",
     imagePrompt: (prompt: string) => [
       `grayscale`,
-      `intricate details`,
+      `detailed drawing`,
       `japanese manga`,
       prompt,
       // "single panel",
@@ -90,6 +90,7 @@ export const presets: Record<string, Preset> = {
       "ancient japanese painting",
       "intricate",
       "detailed",
+      "detailed painting"
       // "drawing"
     ],
     negativePrompt: () => [
@@ -116,6 +117,7 @@ export const presets: Record<string, Preset> = {
       "franco-belgian comic",
       `franco-belgian color comic about ${prompt}`,
       "comic album",
+      "detailed drawing"
       // "color drawing"
     ],
     negativePrompt: () => [
@@ -139,6 +141,7 @@ export const presets: Record<string, Preset> = {
     imagePrompt: (prompt: string) => [
       "digital color comicbook style",
       `modern american comic about ${prompt}`,
+      "detailed drawing"
       //"single panel",
       // "2010s",
       // "digital print",
@@ -199,6 +202,7 @@ export const presets: Record<string, Preset> = {
       "1950",
       "50s",
       `vintage american color comic about ${prompt}`,
+      "detailed drawing"
       // "single panel",
      //  "comicbook style",
       // "color comicbook",
@@ -261,6 +265,7 @@ export const presets: Record<string, Preset> = {
       "color pulp comic panel",
       "1940",
       `${prompt}`,
+      "detailed drawing"
       // "single panel",
       // "comic album"
     ],
@@ -287,12 +292,11 @@ export const presets: Record<string, Preset> = {
       `color comic panel`,
       "style of Moebius",
       `${prompt}`,
-      "by Moebius",
+      "detailed drawing",
       "french comic panel",
       "franco-belgian style",
       "bande dessinée",
       "single panel",
-      "intricate"
       // "comic album"
     ],
     negativePrompt: () => [
@@ -406,6 +410,8 @@ export const presets: Record<string, Preset> = {
       `funny`,
       `Unreal engine`,
       `${prompt}`,
+      `crisp`,
+      `sharp`
     ],
     negativePrompt: () => [
       "manga",
@@ -428,8 +434,9 @@ export const presets: Record<string, Preset> = {
       `patchwork`,
       `style of Gustav Klimt`,
       `Gustav Klimt painting`,
-      `intricate details`,
       `${prompt}`,
+      `detailed painting`,
+      `intricate details`
     ],
     negativePrompt: () => [
       "manga",
@@ -451,9 +458,9 @@ export const presets: Record<string, Preset> = {
       `medieval illuminated manuscript`,
       `illuminated manuscript of`,
       `medieval`,
-      `intricate details`,
       // `medieval color engraving`,
       `${prompt}`,
+      `intricate details`,
       // `medieval`
     ],
     negativePrompt: () => [
@@ -627,6 +634,7 @@ export const presets: Record<string, Preset> = {
       `instagram`,
       `photoshoot`,
       `${prompt}`,
+      `crisp details`
     ],
     negativePrompt: () => [
       "manga",

src/app/engine/render.ts

@@ -44,7 +44,6 @@ export async function newRender({
   settings: Settings
 }) {
   // throw new Error("Planned maintenance")
-
   if (!prompt) {
     const error = `cannot call the rendering API without a prompt, aborting..`
     console.error(error)
@@ -81,6 +80,8 @@ export async function newRender({
 
   const placeholder = "<USE YOUR OWN TOKEN>"
 
+  // console.log("settings:", JSON.stringify(settings, null, 2))
+
   if (
     settings.renderingModelVendor === "OPENAI" && 
     settings.openaiApiKey &&
@@ -170,7 +171,7 @@ export async function newRender({
       
       const response = (await res.json()) as { data: { url: string }[] }
 
-      console.log("response:", response)
+      // console.log("response:", response)
       return {
         renderId: uuidv4(),
         status: "completed",
@@ -352,6 +353,29 @@ export async function newRender({
         segments: []
       } as RenderedScene
     } else {
+      console.log("sending:", {
+        prompt,
+        // negativePrompt, unused for now
+        nbFrames: 1,
+        nbSteps: nbInferenceSteps, // 20 = fast, 30 = better, 50 = best
+        actionnables: [], // ["text block"],
+        segmentation: "disabled", // "firstframe", // one day we will remove this param, to make it automatic
+        width,
+        height,
+
+        // no need to upscale right now as we generate tiny panels
+        // maybe later we can provide an "export" button to PDF
+        // unfortunately there are too many requests for upscaling,
+        // the server is always down
+        upscalingFactor: 1, // 2,
+
+        turbo: settings.renderingUseTurbo,
+
+        // analyzing doesn't work yet, it seems..
+        analyze: false, // analyze: true,
+
+        cache: "ignore"
+      })
       const res = await fetch(`${videochainApiUrl}${videochainApiUrl.endsWith("/") ? "" : "/"}render`, {
         method: "POST",
         headers: {
@@ -375,6 +399,8 @@ export async function newRender({
           // the server is always down
           upscalingFactor: 1, // 2,
 
+          turbo: settings.renderingUseTurbo,
+
           // analyzing doesn't work yet, it seems..
           analyze: false, // analyze: true,
 

src/app/interface/panel/index.tsx

@@ -140,15 +140,34 @@ export function Panel({
             withCache: revision === 0,
             settings: getSettings(),
           })
+          if (!newRendered.status || newRendered.status === "error") {
+            throw new Error("invalid status")
+          }
         } catch (err) {
           // "Failed to load the panel! Don't worry, we are retrying..")
-          newRendered = await newRender({
-            prompt: cacheInvalidationHack + "   " + prompt,
-            width,
-            height,
-            withCache,
-            settings: getSettings(),
-          })
+
+          try {
+            newRendered = await newRender({
+              prompt: cacheInvalidationHack + "   " + prompt,
+              width,
+              height,
+              withCache,
+              settings: getSettings(),
+            })
+            if (!newRendered.status || newRendered.status === "error") {
+              throw new Error("invalid status")
+            }
+          } catch (err2) {
+            newRendered = {
+              renderId: "",
+              status: "error",
+              assetUrl: "",
+              alt: "",
+              maskUrl: "",
+              error: `${err2 || "unknown error"}`,
+              segments: []
+            }
+          }
         }
 
         if (newRendered) {
@@ -157,17 +176,22 @@ export function Panel({
           if (newRendered.status === "completed") {
             setGeneratingImages(panelId, false)
             addToUpscaleQueue(panelId, newRendered)
+          } else if (!newRendered.status || newRendered.status === "error") {
+            setGeneratingImages(panelId, false)
+          } else {
+            // still loading
           }
 
-          // but we are still loading!
+
         } else {
+          // 
           setRendered(panelId, {
             renderId: "",
-            status: "pending",
+            status: "error",
             assetUrl: "",
             alt: "",
             maskUrl: "",
-            error: "",
+            error: "empty newRendered",
             segments: []
           })
           setGeneratingImages(panelId, false)
@@ -198,9 +222,10 @@ export function Panel({
 
         if (newRendered.status === "pending") {
           timeoutRef.current = setTimeout(checkStatus, delay)
-        } else if (newRendered.status === "error" || 
+        } else if (!newRendered.status || newRendered.status === "error" || 
         (newRendered.status === "completed" && !newRendered.assetUrl?.length)) {
           try {
+            // we try only once
             const newAttempt = await newRender({
               prompt,
               width,
@@ -208,6 +233,9 @@ export function Panel({
               withCache: false,
               settings: getSettings(),
             })
+            if (!newAttempt.status || newAttempt.status === "error") {
+              throw new Error("invalid status")
+            }
             setRendered(panelId, newAttempt)
           } catch (err) {
             console.error("yeah sorry, something is wrong.. aborting", err)
@@ -217,6 +245,7 @@ export function Panel({
           console.log("panel finished!")
           setGeneratingImages(panelId, false)
           addToUpscaleQueue(panelId, newRendered)
+  
         }
       } catch (err) {
         console.error(err)

src/app/interface/settings-dialog/defaultSettings.ts

@@ -2,6 +2,7 @@ import { RenderingModelVendor, Settings } from "@/types"
 
 export const defaultSettings: Settings = {
   renderingModelVendor: "SERVER" as RenderingModelVendor,
+  renderingUseTurbo: false,
   huggingfaceApiKey: "",
   huggingfaceInferenceApiModel: "stabilityai/stable-diffusion-xl-base-1.0",
   huggingfaceInferenceApiModelTrigger: "",

src/app/interface/settings-dialog/getSettings.ts

@@ -3,11 +3,13 @@ import { RenderingModelVendor, Settings } from "@/types"
 import { getValidString } from "@/lib/getValidString"
 import { localStorageKeys } from "./localStorageKeys"
 import { defaultSettings } from "./defaultSettings"
+import { getValidBoolean } from "@/lib/getValidBoolean"
 
 export function getSettings(): Settings {
   try {
     return {
       renderingModelVendor: getValidString(localStorage?.getItem?.(localStorageKeys.renderingModelVendor), defaultSettings.renderingModelVendor) as RenderingModelVendor,
+      renderingUseTurbo: getValidBoolean(localStorage?.getItem?.(localStorageKeys.renderingUseTurbo), defaultSettings.renderingUseTurbo),
       huggingfaceApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceApiKey), defaultSettings.huggingfaceApiKey),
       huggingfaceInferenceApiModel: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceInferenceApiModel), defaultSettings.huggingfaceInferenceApiModel),
       huggingfaceInferenceApiModelTrigger: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceInferenceApiModelTrigger), defaultSettings.huggingfaceInferenceApiModelTrigger),

src/app/interface/settings-dialog/index.tsx

@@ -18,6 +18,8 @@ import { Label } from "./label"
 import { Field } from "./field"
 import { localStorageKeys } from "./localStorageKeys"
 import { defaultSettings } from "./defaultSettings"
+import { Switch } from "@/components/ui/switch"
+import { cn } from "@/lib/utils"
 
 export function SettingsDialog() {
   const [isOpen, setOpen] = useState(false)
@@ -25,6 +27,10 @@ export function SettingsDialog() {
     localStorageKeys.renderingModelVendor,
     defaultSettings.renderingModelVendor
   )
+  const [renderingUseTurbo, setRenderingUseTurbo] = useLocalStorage<boolean>(
+    localStorageKeys.renderingUseTurbo,
+    defaultSettings.renderingUseTurbo
+  )
   const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
     localStorageKeys.huggingfaceApiKey,
     defaultSettings.huggingfaceApiKey
@@ -71,7 +77,7 @@ export function SettingsDialog() {
           </div>
         </Button> 
       </DialogTrigger>
-      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[700px] overflow-y-auto h-[100vh] md:h-[80vh]">
+      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[700px] overflow-y-auto h-max-[100vh] md:h-max-[80vh]">
         <DialogHeader>
           <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
             Custom Settings
@@ -103,6 +109,21 @@ export function SettingsDialog() {
             </Select>
           </Field>
 
+          {renderingModelVendor === "SERVER" && <>
+            <Field>
+              <Label>Quality over performance ratio:</Label>
+              <div className="flex flex-row space-x-2 text-zinc-500">
+                <Switch
+                  checked={renderingUseTurbo}
+                  onCheckedChange={setRenderingUseTurbo}
+                />
+                <span
+                  onClick={() => setRenderingUseTurbo(!renderingUseTurbo)}
+                  className={cn("cursor-pointer", { "text-zinc-800": renderingUseTurbo })}>Use a faster model, but with inferior quality of images (you are warned!).</span>
+              </div>
+            </Field>
+          </>}
+
           {renderingModelVendor === "HUGGINGFACE" && <>
             <Field>
               <Label>Hugging Face API Token (<a className="text-stone-600 underline" href="https://huggingface.co/subscribe/pro" target="_blank">PRO account</a> recommended for higher rate limit):</Label>

src/app/interface/settings-dialog/localStorageKeys.ts

@@ -2,6 +2,7 @@ import { Settings } from "@/types"
 
 export const localStorageKeys: Record<keyof Settings, string> = {
   renderingModelVendor: "CONF_RENDERING_MODEL_VENDOR",
+  renderingUseTurbo: "CONF_RENDERING_USE_TURBO",
   huggingfaceApiKey: "CONF_AUTH_HF_API_TOKEN",
   huggingfaceInferenceApiModel: "CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL",
   huggingfaceInferenceApiModelTrigger: "CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL_TRIGGER",

src/app/main.tsx

@@ -45,7 +45,7 @@ export default function Main() {
 
       let llmResponse: LLMResponse = []
 
-      const [stylePrompt, userStoryPrompt] = prompt.split("||")
+      const [stylePrompt, userStoryPrompt] = prompt.split("||").map(x => x.trim())
 
       try {
         llmResponse = await getStory({
@@ -57,7 +57,9 @@ export default function Main() {
             // + the LLM may reject some of the styles
             // stylePrompt ? `in the following context: ${stylePrompt}` : ''
 
-          ].filter(x => x).join(", "), nbTotalPanels })
+          ].map(x => x.trim()).filter(x => x).join(", "),
+          nbTotalPanels
+        })
         console.log("LLM responded:", llmResponse)
 
       } catch (err) {
@@ -68,7 +70,11 @@ export default function Main() {
         for (let p = 0; p < nbTotalPanels; p++) {
           llmResponse.push({
             panel: p,
-            instructions: `${prompt} ${".".repeat(p)}`,
+            instructions: [
+              stylePrompt,
+              userStoryPrompt,
+              `${".".repeat(p)}`,
+            ].map(x => x.trim()).filter(x => x).join(", "),
             caption: "(Sorry, LLM generation failed: using degraded mode)"
           })
         }
@@ -77,20 +83,20 @@ export default function Main() {
 
       // we have to limit the size of the prompt, otherwise the rest of the style won't be followed
 
-      let limitedStylePrompt = stylePrompt.slice(0, 77)
+      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 = preset.imagePrompt(limitedStylePrompt).filter(x => x).join(", ")
+      const lightPanelPromptPrefix = preset.imagePrompt(limitedStylePrompt).map(x => x.trim()).filter(x => x).join(", ")
 
       // this prompt will be used if the LLM generation failed
       const degradedPanelPromptPrefix = [
         ...preset.imagePrompt(limitedStylePrompt),
 
         // we re-inject the story, then
-        userStoryPrompt,
+        userStoryPrompt.trim(),
       ].filter(x => x).join(", ")
 
       const newPanels: string[] = []
@@ -98,7 +104,7 @@ export default function Main() {
       setWaitABitMore(true)
       console.log("Panel prompts for SDXL:")
       for (let p = 0; p < nbTotalPanels; p++) {
-        newCaptions.push(llmResponse[p]?.caption || "...")
+        newCaptions.push(llmResponse[p]?.caption.trim() || "...")
         const newPanel = [
 
           // what we do here is that ideally we give full control to the LLM for prompting,
@@ -108,7 +114,7 @@ export default function Main() {
           : degradedPanelPromptPrefix,
 
           llmResponse[p]?.instructions || ""
-        ].map(chunk => chunk).join(", ")
+        ].map(x => x.trim()).filter(x => x).join(", ")
         newPanels.push(newPanel)
         console.log(newPanel)
       }

src/app/queries/getStory.ts

@@ -43,19 +43,20 @@ export const getStory = async ({
   let result = ""
 
   try {
+    // console.log(`calling predict(${query}, ${nbTotalPanels})`)
     result = `${await predict(query, nbTotalPanels) || ""}`.trim()
     if (!result.length) {
       throw new Error("empty result!")
     }
   } catch (err) {
-    console.log(`prediction of the story failed, trying again..`)
+    // console.log(`prediction of the story failed, trying again..`)
     try {
       result = `${await predict(query+".", nbTotalPanels) || ""}`.trim()
       if (!result.length) {
         throw new Error("empty result!")
       }
     } catch (err) {
-      console.error(`prediction of the story failed again!`)
+      console.error(`prediction of the story failed again 💩`)
       throw new Error(`failed to generate the story ${err}`)
     }
   }
@@ -68,8 +69,8 @@ export const getStory = async ({
   try {
     llmResponse = dirtyLLMJsonParser(tmp)
   } catch (err) {
-    console.log(`failed to read LLM response: ${err}`)
-    console.log(`original response was:`, result)
+    // console.log(`failed to read LLM response: ${err}`)
+    // console.log(`original response was:`, result)
 
       // in case of failure here, it might be because the LLM hallucinated a completely different response,
       // such as markdown. There is no real solution.. but we can try a fallback:

src/lib/getValidBoolean.ts

@@ -0,0 +1,9 @@
+export const getValidBoolean = (something: any, defaultValue: boolean) => {
+  if (typeof something === "boolean") {
+    return something
+  }
+
+  const strValue = `${something || defaultValue}`.toLowerCase()
+  
+  return strValue === "true" || strValue === "1" || strValue === "on"
+}

src/types.ts

@@ -39,6 +39,14 @@ export interface RenderRequest {
 
   projection: ProjectionMode
 
+  /**
+   * Use turbo mode
+   * 
+   * At the time of writing this will use SSD-1B + LCM
+   * https://huggingface.co/spaces/jbilcke-hf/fast-image-server
+   */
+  turbo: boolean
+
   cache: CacheMode
 
   wait: boolean // wait until the job is completed
@@ -142,6 +150,7 @@ export type LayoutProps = {
 
 export type Settings = {
   renderingModelVendor: RenderingModelVendor
+  renderingUseTurbo: boolean
   huggingfaceApiKey: string
   huggingfaceInferenceApiModel: string
   huggingfaceInferenceApiModelTrigger: string