better instructions for sharing

src/app/interface/ai-clip-factory/index.tsx

@@ -9,7 +9,7 @@ export function AIClipFactory() {
         window.open("https://huggingface.co/spaces/jbilcke-hf/ai-clip-factory?postId=f63df23d-de2f-4dee-961c-a56f160dd159&prompt=pikachu%2C+working+on+a+computer%2C+office%2C+serious%2C+typing%2C+keyboard&model=TheLastBen%2FPikachu_SDXL", "_blank")
       }}>
       <span className="hidden md:inline">Try the clip factory!</span>
-      <span className="inline md:hidden">AI Clips</span>
+      <span className="inline md:hidden">Clips</span>
     </Button>
   )
 }

src/app/interface/bottom-bar/index.tsx

@@ -1,14 +1,12 @@
 import { useStore } from "@/app/store"
-import { HuggingClap } from "@/components/icons/hugging-clap"
 import { Button } from "@/components/ui/button"
-import { base64ToFile } from "@/lib/base64ToFile"
-import { uploadToHuggingFace } from "@/lib/uploadToHuggingFace"
 import { cn } from "@/lib/utils"
 import { About } from "../about"
 import { startTransition, useState } from "react"
 import { upscaleImage } from "@/app/engine/render"
 import { sleep } from "@/lib/sleep"
 import { AIClipFactory } from "../ai-clip-factory"
+import { Share } from "../share"
 
 export function BottomBar() {
   const download = useStore(state => state.download)
@@ -58,45 +56,10 @@ export function BottomBar() {
     })
   }
 
-  const handleShare = async () => {
-    const dataUrl = await pageToImage()
-    // console.log("dataUrl:", dataUrl)
-    const fileToUpload = base64ToFile(dataUrl, "comic.png")
-    let uploadUrl = ""
-    try {
-      uploadUrl = await uploadToHuggingFace(fileToUpload)
-      // console.log("uploadUrl:", uploadUrl)
-    } catch (err) {
-      console.error("Failed to upload the image to Hugging Face")
-    }
-
-
-    const descriptionMd = `
-#### Prompt:
-\`\`\`${prompt}\`\`\`
-
-#### Preset:
-\`\`\`${preset.label}\`\`\`
-
-#### Comic:
-${uploadUrl
-  ? (`![${prompt}](${uploadUrl})`)
-  : (`(please drag & drop a capture of your comic here - we recommend you to print the PDF and convert it to JPG for best quality!)`)}
-`;
-
-    // console.log("descriptionMd:", descriptionMd)
-
-    const params = new URLSearchParams({
-      title: `[Comic] ${prompt}`,
-      description: descriptionMd,
-      });
-    const paramsStr = params.toString();
-    window.open(`https://huggingface.co/spaces/jbilcke-hf/comic-factory/discussions/new?${paramsStr}`, '_blank');
-  }
-
   const handlePrint = () => {
     window.print()
   }
+  
   return (
     <div className={cn(
       `print:hidden`,
@@ -163,7 +126,6 @@ ${uploadUrl
            </Button>
         </div>
           */}
-          <div>
           <Button
             onClick={handlePrint}
             disabled={!prompt?.length}
@@ -172,28 +134,10 @@ ${uploadUrl
             remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save PDF`
             }</span>
             <span className="inline md:hidden">{
-              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save PDF`
+              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
             }</span>
-           </Button>
-        </div>
-        <div>
-          {
-          // there is an issue, this env check doesn't work..
-          // process.env.NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING === "true" ? 
-          <Button
-            onClick={handleShare}
-            disabled={!prompt?.length}
-            className="space-x-2"
-          >
-            <div className="scale-105"><HuggingClap /></div>
-            <div>
-              <span className="hidden md:inline">Share to community</span>
-              <span className="inline md:hidden">Share</span>
-            </div>
-          </Button> 
-          //: null
-        }
-        </div>
+        </Button>
+        <Share />
       </div>
     </div>
   )

src/app/interface/share/index.tsx

@@ -0,0 +1,164 @@
+import { useStore } from "@/app/store"
+import { HuggingClap } from "@/components/icons/hugging-clap"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { useState } from "react"
+
+export function Share() {
+  const [isOpen, setOpen] = useState(false)
+  const preset = useStore(state => state.preset)
+  const prompt = useStore(state => state.prompt)
+  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
+  const allStatus = Object.values(panelGenerationStatus)
+  const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
+
+
+  const handlePrint = () => {
+    window.print()
+  }
+
+  const handleShare = async () => {
+    /*
+
+    ------------------------------------------------------------------
+    Legacy mode: PNG export doesn't work well, so we are disabling it.
+    ------------------------------------------------------------------
+
+    const dataUrl = await pageToImage()
+    // console.log("dataUrl:", dataUrl)
+    const fileToUpload = base64ToFile(dataUrl, "comic.png")
+    let uploadUrl = ""
+    try {
+      uploadUrl = await uploadToHuggingFace(fileToUpload)
+      // console.log("uploadUrl:", uploadUrl)
+    } catch (err) {
+      console.error("Failed to upload the image to Hugging Face")
+    }
+
+    const comicFileMd = `
+#### Comic:
+${uploadUrl
+  ? (`![${prompt}](${uploadUrl})`)
+  : (`(please drag & drop a capture of your comic here - we recommend you to print the PDF and convert it to JPG for best quality!)`)}
+`;
+    */
+     
+    const storyPrompt = (prompt.split("||")[1] || "")
+
+    const storyPromptMd = storyPrompt ? `
+#### Story prompt:
+\`\`\`${storyPrompt}\`\`\`
+` : ``
+
+    const stylePrompt = (prompt.split("||")[0] || "")
+
+    const stylePromptMd = stylePrompt ? `
+#### Style prompt:
+\`\`\`${stylePrompt}\`\`\`
+` : ``
+
+    const comicFileMd =
+`### Comic:
+
+Drag & drop your comic image (converted to JPG) here!
+`
+
+    const descriptionMd = `
+${storyPromptMd}
+${stylePromptMd}
+#### Preset:
+\`\`\`${preset.label}\`\`\`
+
+${comicFileMd}`;
+
+    // console.log("descriptionMd:", descriptionMd)
+
+    const params = new URLSearchParams({
+      title: `[Comic] ${prompt}`,
+      description: descriptionMd,
+      });
+    const paramsStr = params.toString();
+    window.open(`https://huggingface.co/spaces/jbilcke-hf/comic-factory/discussions/new?${paramsStr}`, '_blank');
+  }
+
+  <div>
+    {
+    // there is an issue, this env check doesn't work..
+    // process.env.NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING === "true" ? 
+    <Button
+      onClick={handleShare}
+      disabled={!prompt?.length}
+      className="space-x-2"
+    >
+      <div className="scale-105"><HuggingClap /></div>
+      <div>
+        <span className="hidden md:inline">{remainingImages ? `⌛` : `Share to community`}</span>
+        <span className="inline md:hidden">{remainingImages ? `⌛` : `Share`}</span>
+      </div>
+    </Button> 
+    //: null
+  }
+  </div>
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          disabled={!prompt?.length}
+          className="space-x-1 md:space-x-2"
+          >
+          <div className="scale-105"><HuggingClap /></div>
+          <div>
+          <span className="hidden md:inline">{remainingImages ? `⌛` : `Share to community`}</span>
+        <span className="inline md:hidden">{remainingImages ? `⌛` : `Share`}</span>
+          </div>
+        </Button> 
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
+            Sharing Your Comic
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4 text-stone-800">
+          <p className="">
+            To ensure optimal output quality comics are saved as PDF files:
+          </p>
+          <p>
+            👉 Step 1: Click on <Button
+            onClick={handlePrint}
+            disabled={!prompt?.length}
+          >
+            <span className="hidden md:inline">{
+            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save PDF`
+            }</span>
+            <span className="inline md:hidden">{
+              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
+            }</span>
+        </Button>
+          </p>
+          <p>
+            👉 Step 2: Select &quot;Print to PDF&quot; in the printing options
+          </p>
+          <p>
+            👉 Step 3: Open your PDF and convert it to a JPG image (using &quot;Export to&quot; or &quot;Convert to&quot;)
+          </p>
+          <p>
+            👉 Step 4: Click here to post: <Button
+            onClick={handleShare}
+            className="space-x-2"
+          >
+            <div className="scale-105"><HuggingClap /></div>
+            <div>
+              Share
+            </div>
+          </Button> 
+          </p>
+        </div>
+        <DialogFooter>
+          <Button type="submit" onClick={() => setOpen(false)}>Close</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/interface/top-menu/index.tsx

@@ -202,7 +202,7 @@ export function TopMenu() {
         <div className="flex flex-row flex-grow w-full">
           <div className="flex flex-row flex-grow w-full">
             <Input
-              placeholder="1. Little story.."
+              placeholder="1. Story prompt"
               className="w-1/2 bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 rounded-r-none border-r-stone-100"
               // disabled={atLeastOnePanelIsBusy}
               onChange={(e) => {
@@ -216,7 +216,7 @@ export function TopMenu() {
               value={draftPromptB}
             />
             <Input
-              placeholder="2. Global style (optional)"
+              placeholder="2. Style prompt (optional)"
               className="w-1/2 bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 border-l-stone-100 rounded-l-none rounded-r-none"
               // disabled={atLeastOnePanelIsBusy}
               onChange={(e) => {