File size: 3,078 Bytes
bca383d 2f9a87c ec121fd 2f9a87c b48537f ec121fd 2f9a87c bca383d b022cb9 2f9a87c bca383d ec121fd 2f9a87c ec121fd 2f9a87c ec121fd 1c1e6e9 bca383d ec121fd 1c1e6e9 bca383d 1c1e6e9 b48537f bca383d 2f9a87c 1c1e6e9 ec121fd |
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 |
import { ReactNode, useState } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Login } from "../login"
const APP_NAME = `AI Comic Factory`
const APP_DOMAIN = `aicomicfactory.app`
const APP_URL = `https://aicomicfactory.app`
const APP_VERSION = `1.3`
const APP_RELEASE_DATE = `April 2024`
const ExternalLink = ({ url, children }: { url: string; children: ReactNode }) => {
return (
<a
className="text-stone-600 underline"
href={url}
target="_blank">{children}</a>
)
}
export function About() {
const [isOpen, setOpen] = useState(false)
return (
<Dialog open={isOpen} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline">
<span className="hidden md:inline">{APP_NAME.replaceAll(" ", "-")} {APP_VERSION}</span>
<span className="inline md:hidden">Version {APP_VERSION}</span>
</Button>
</DialogTrigger>
<DialogContent className="w-full sm:max-w-[500px] md:max-w-[600px] overflow-y-scroll h-[100vh] sm:h-[550px]">
<DialogHeader>
<DialogDescription className="w-full text-center text-2xl font-bold text-stone-700">
<ExternalLink url={APP_URL}>{APP_DOMAIN}</ExternalLink> {APP_VERSION} ({APP_RELEASE_DATE})
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4 text-stone-700 text-sm md:text-base xl:text-lg">
<p className="">
{APP_DOMAIN} generates stories using AI in a few clicks.
</p>
<p>
App is free for Hugging Face users 👉 <Login />
</p>
<p>
Join us on Discord 👉 <ExternalLink url="https://discord.com/invite/AEruz9B92B">The Latent Space</ExternalLink>
</p>
<p className="pt-2 pb-2">
Are you an artist? Learn <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/discussions/402#654ab848fa25dfb780aa19fb" target="_blank">how to use your own art style</a>
</p>
<p>
👉 Default AI model used for stories is <a className="text-stone-600 underline" href="https://huggingface.co/HuggingFaceH4/zephyr-7b-beta" target="_blank">Zephyr-7b-beta</a>
</p>
<p>
👉 Default AI model used for drawing is <a className="text-stone-600 underline" href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">SDXL</a> by Stability AI
</p>
<p className="pt-2 pb-2">
This is an open-source project, see the <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/blob/main/README.md" target="_blank">README</a> for more info.
</p>
</div>
<DialogFooter>
<Button type="submit" onClick={() => setOpen(false)}>Got it</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
} |