WaledRashed24/comics

1import { useStore } from "@/app/store"2import { HuggingClap } from "@/components/icons/hugging-clap"3import { Button } from "@/components/ui/button"4import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"5import { useState } from "react"6 7export function Share() {8  const [isOpen, setOpen] = useState(false)9  const preset = useStore(s => s.preset)10  const prompt = useStore(s => s.prompt)11  const panelGenerationStatus = useStore(s => s.panelGenerationStatus)12  const allStatus = Object.values(panelGenerationStatus)13  const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)14 15 16  const handlePrint = () => {17    window.print()18  }19 20  const handleShare = async () => {21    /*22 23    ------------------------------------------------------------------24    Legacy mode: PNG export doesn't work well, so we are disabling it.25    ------------------------------------------------------------------26 27    const dataUrl = await pageToImage()28    // console.log("dataUrl:", dataUrl)29    const fileToUpload = base64ToFile(dataUrl, "comic.png")30    let uploadUrl = ""31    try {32      uploadUrl = await uploadToHuggingFace(fileToUpload)33      // console.log("uploadUrl:", uploadUrl)34    } catch (err) {35      console.error("Failed to upload the image to Hugging Face")36    }37 38    const comicFileMd = `39#### Comic:40${uploadUrl41  ? (`![${prompt}](${uploadUrl})`)42  : (`(please drag & drop a capture of your comic here - we recommend you to print the PDF and convert it to JPG for best quality!)`)}43`;44    */45     46    const storyPrompt = (prompt.split("||")[1] || "")47 48    const storyPromptMd = storyPrompt ? `49#### Story prompt:50\`\`\`${storyPrompt}\`\`\`51` : ``52 53    const stylePrompt = (prompt.split("||")[0] || "")54 55    const stylePromptMd = stylePrompt ? `56#### Style/character prompt:57\`\`\`${stylePrompt}\`\`\`58` : ``59 60    const comicFileMd =61`### Comic:62 63Drag & drop your comic image (converted to JPG) here!64`65 66    const descriptionMd = `67${storyPromptMd}68${stylePromptMd}69#### Preset:70\`\`\`${preset.label}\`\`\`71 72${comicFileMd}`;73 74    // console.log("descriptionMd:", descriptionMd)75 76    const slicedStory = storyPrompt.slice(0, 77)77 78    const params = new URLSearchParams({79      title: `[Comic] ${80        slicedStory81      }${82        slicedStory !== storyPrompt ? '...' : ''83      }${84        stylePrompt ? `(${stylePrompt.slice(0, 77)85      })` : ''}`,86      description: descriptionMd,87      });88    const paramsStr = params.toString();89    window.open(`https://huggingface.co/spaces/jbilcke-hf/comic-factory/discussions/new?${paramsStr}`, '_blank');90  }91  92  return (93    <Dialog open={isOpen} onOpenChange={setOpen}>94      <DialogTrigger asChild>95        <Button96          disabled={!prompt?.length}97          className="space-x-1 md:space-x-2"98          >99          <div className="scale-105"><HuggingClap /></div>100          <div>101          <span className="hidden md:inline">{remainingImages ? `⌛` : `Share`}</span>102        <span className="inline md:hidden">{remainingImages ? `⌛` : `Share`}</span>103          </div>104        </Button> 105      </DialogTrigger>106      <DialogContent className="sm:max-w-[425px]">107        <DialogHeader>108          <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">109            Sharing Your Comic110          </DialogDescription>111        </DialogHeader>112        <div className="grid gap-4 py-4 text-stone-800">113          <p className="">114            To ensure optimal output quality comics are saved as PDF files:115          </p>116          <p>117            👉 Step 1: Click on <Button118            onClick={handlePrint}119            disabled={!prompt?.length}120          >121            <span className="hidden md:inline">{122            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Get PDF`123            }</span>124            <span className="inline md:hidden">{125              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `PDF`126            }</span>127        </Button>128          </p>129          <p>130            👉 Step 2: Select &quot;Print to PDF&quot; in the printing options (Note: if you use Safari, print from the OS menu)131          </p>132          <p>133            👉 Step 3: Open your PDF and convert it to a JPG image (using &quot;Export to&quot; or &quot;Convert to&quot;)134          </p>135          <p>136            👉 Step 4: Click here to post: <Button137            onClick={handleShare}138            className="space-x-2"139          >140            <div className="scale-105"><HuggingClap /></div>141            <div>142              Share143            </div>144          </Button> 145          </p>146        </div>147        <DialogFooter>148          <Button type="submit" onClick={() => setOpen(false)}>Close</Button>149        </DialogFooter>150      </DialogContent>151    </Dialog>152  )153}