Spaces:
Running
Running
File size: 4,034 Bytes
dbc8f44 b6caea7 dbc8f44 b6caea7 dbc8f44 ec121fd dbc8f44 b6caea7 dbc8f44 b6caea7 dbc8f44 a40bf40 61bb967 b6caea7 5495410 b6caea7 5495410 b6caea7 5495410 b6caea7 93303c1 b6caea7 a40bf40 dbc8f44 a40bf40 ec121fd dbc8f44 ec121fd dbc8f44 ec121fd 8d7ed5e ec121fd b6caea7 dbc8f44 |
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 |
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"
export function BottomBar() {
const download = useStore(state => state.download)
const isGeneratingStory = useStore(state => state.isGeneratingStory)
const prompt = useStore(state => state.prompt)
const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
const page = useStore(state => state.page)
const preset = useStore(state => state.preset)
const pageToImage = useStore(state => state.pageToImage)
const allStatus = Object.values(panelGenerationStatus)
const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
/*
const handleUpscale = () => {
startTransition(() => {
we are blocked here, because we don't know the render id
also we will have to store a state about the
})
}
*/
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
? (``)
: (`(please drag & drop your JPG image here)`)}
`;
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`,
`fixed bottom-2 md:bottom-4 left-2 right-0 md:left-3 md:right-1`,
`flex flex-row`,
`justify-between`
)}>
<div className={cn(
`flex flex-row`,
`items-end`,
`animation-all duration-300 ease-in-out`,
isGeneratingStory ? `scale-0 opacity-0` : ``,
`space-x-3`,
`scale-[0.9]`
)}>
<About />
</div>
{/*
<div>
<Button
onClick={handleUpscale}
disabled={!prompt?.length && remainingImages}
>
Upscale
</Button>
</div>
*/}
<div className={cn(
`flex flex-row`,
`animation-all duration-300 ease-in-out`,
isGeneratingStory ? `scale-0 opacity-0` : ``,
`space-x-3`,
`scale-[0.9]`
)}>
<div>
<Button
onClick={handlePrint}
disabled={!prompt?.length}
>
Print
</Button>
</div>
<div>
<Button
onClick={download}
disabled={!prompt?.length}
>
<span className="hidden md:inline">{
remainingImages ? `${allStatus.length - remainingImages}/4 panels ⌛` : `Save`
}</span>
<span className="inline md:hidden">{
remainingImages ? `${allStatus.length - remainingImages}/4 ⌛` : `Save`
}</span>
</Button>
</div>
<div>
<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>
</div>
</div>
</div>
)
} |