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" 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 upscaleQueue = useStore(state => state.upscaleQueue) const renderedScenes = useStore(state => state.renderedScenes) const removeFromUpscaleQueue = useStore(state => state.removeFromUpscaleQueue) const setRendered = useStore(state => state.setRendered) const [isUpscaling, setUpscaling] = useState(false) const handleUpscale = () => { setUpscaling(true) startTransition(() => { const fn = async () => { for (let [panelId, renderedScene] of Object.entries(upscaleQueue)) { try { console.log(`upscaling panel ${panelId} (${renderedScene.renderId})`) const result = await upscaleImage(renderedScene.assetUrl) await sleep(1000) if (result.assetUrl) { console.log(`upscale successful, removing ${panelId} (${renderedScene.renderId}) from upscale queue`) setRendered(panelId, { ...renderedScene, assetUrl: result.assetUrl }) removeFromUpscaleQueue(panelId) } } catch (err) { console.error(`failed to upscale: ${err}`) } } setUpscaling(false) } fn() }) } 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 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 (
{ // there is an issue, this env check doesn't work.. // process.env.NEXT_PUBLIC_CAN_UPSCALE === "true" ? // : null }
{ // there is an issue, this env check doesn't work.. // process.env.NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING === "true" ? //: null }
) }