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/character 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 slicedStory = storyPrompt.slice(0, 77) const params = new URLSearchParams({ title: `[Comic] ${ slicedStory }${ slicedStory !== storyPrompt ? '...' : '' }${ stylePrompt ? `(${stylePrompt.slice(0, 77) })` : ''}`, description: descriptionMd, }); const paramsStr = params.toString(); window.open(`https://huggingface.co/spaces/jbilcke-hf/comic-factory/discussions/new?${paramsStr}`, '_blank'); } return ( Sharing Your Comic

To ensure optimal output quality comics are saved as PDF files:

👉 Step 1: Click on

👉 Step 2: Select "Print to PDF" in the printing options (Note: if you use Safari, print from the OS menu)

👉 Step 3: Open your PDF and convert it to a JPG image (using "Export to" or "Convert to")

👉 Step 4: Click here to post:

) }