Hugging Face's logo

Spaces:
jbilcke-hf
/
ai-comic-factory
Running on CPU Upgrade

App Files Community
928
ai-comic-factory
File size: 4,927 Bytes 
6cc7c15
 
 
 
 
 
 
 
3b81d2d
 
 
6cc7c15
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fca9691
6cc7c15
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8e2433b
 
6cc7c15
8e2433b
 
 
 
 
 
 
6cc7c15
 
 
 
 
11d758a
6cc7c15
 
 
 
 
 
 
 
 
26ef0a6
6cc7c15
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
421fbba
6cc7c15
 
421fbba
6cc7c15
 
 
 
bab3a4d
6cc7c15
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
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(s => s.preset)
  const prompt = useStore(s => s.prompt)
  const panelGenerationStatus = useStore(s => s.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 (
    <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`}</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 ⌛` : `Get PDF`
            }</span>
            <span className="inline md:hidden">{
              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `PDF`
            }</span>
        </Button>
          </p>
          <p>
            👉 Step 2: Select &quot;Print to PDF&quot; in the printing options (Note: if you use Safari, print from the OS menu)
          </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>
  )
}