support multiple pages

.env

@@ -14,7 +14,7 @@ RENDERING_ENGINE="INFERENCE_API"
 LLM_ENGINE="INFERENCE_API"
 
 # set this to control the number of pages
-MAX_NB_PAGES=2
+MAX_NB_PAGES=6
 
 # Set to "true" to create artificial delays and smooth out traffic
 NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"

README.md

@@ -15,7 +15,11 @@ hf_oauth_scopes: [inference-api]
 
 # AI Comic Factory
 
-*(note: the website "aicomicfactory.com" is not affiliated with the AI Comic Factory project, nor it is created or maintained by the AI Comic Factory team. If you see their website has an issue, please contact them directly)*
+Last release: AI Comic Factory 1.2
+
+The AI Comic Factory will soon have an official website: [aicomicfactory.app](https://aicomicfactory.app)
+
+For more information about my other projects please check [linktr.ee/FLNGR](https://linktr.ee/FLNGR).
 
 ## Running the project at home
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbilcke/comic-factory",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/interface/about/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { ReactNode, useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
@@ -6,9 +6,20 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Login } from "../login"
 
 const APP_NAME = `AI Comic Factory`
-const APP_VERSION = `1.1`
+const APP_DOMAIN = `aicomicfactory.app`
+const APP_URL = `https://aicomicfactory.app`
+const APP_VERSION = `1.2`
 const APP_RELEASE_DATE = `March 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)
 
@@ -22,17 +33,20 @@ export function About() {
       </DialogTrigger>
       <DialogContent className="w-full sm:max-w-[500px] md:max-w-[600px] overflow-y-scroll h-[100vh] sm:h-[550px]">
         <DialogHeader>
-          <DialogTitle>{APP_NAME} {APP_VERSION}</DialogTitle>
+          <DialogTitle><ExternalLink url={APP_URL}>{APP_DOMAIN}</ExternalLink> {APP_VERSION}</DialogTitle>
           <DialogDescription className="w-full text-center text-2xl font-bold text-stone-700">
-          {APP_NAME} {APP_VERSION} ({APP_RELEASE_DATE})
+          <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="">
-            The {APP_NAME} generates stories using AI in a few clicks.
+            {APP_DOMAIN} generates stories using AI in a few clicks.
+          </p>
+          <p>
+           App is free for Hugging Face users 👉 <Login />
           </p>
           <p>
-            The app is free for Hugging Face users 👉 <Login />
+            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>

src/app/main.tsx

@@ -259,7 +259,10 @@ export default function Main() {
         `flex items-start w-screen h-screen pt-24 md:pt-[72px] overflow-y-scroll`,
         `transition-all duration-200 ease-in-out`,
         zoomLevel > 105 ? `px-0` : `pl-1 pr-8 md:pl-16 md:pr-16`,
-        `print:pt-0 print:px-0 print:pl-0 print:pr-0`,
+
+        // important: in "print" mode we need to allow going out of the screen
+        `print:pt-0 print:px-0 print:pl-0 print:pr-0 print:h-auto print:w-auto print:overflow-visible`,
+
         fonts.actionman.className
       )}>
         <div
@@ -270,8 +273,15 @@ export default function Main() {
           <div
             className={cn(
               `comic-page`,
-              `flex flex-col md:flex-row md:space-x-8 lg:space-x-12 xl:space-x-16 md:items-center md:justify-start`,
-              `print:space-x-4 print:flex-row`,
+
+              `grid grid-cols-1`,
+              currentNbPages > 1 ? `md:grid-cols-2` : ``,
+
+              // spaces between pages
+              `gap-x-3 gap-y-4 md:gap-x-8 lg:gap-x-12 xl:gap-x-16`,
+
+              // when printed
+              `print:gap-x-3 print:gap-y-4 print:grid-cols-1`,
             )}
             style={{
               width: `${zoomLevel}%`
@@ -280,7 +290,10 @@ export default function Main() {
           </div>
           {
           showNextPageButton &&
-            <div className="flex flex-col space-y-2 pt-2 pb-6 text-gray-600 dark:text-gray-600">
+            <div className={cn(
+              `flex flex-col space-y-2 pt-2 pb-6 text-gray-600 dark:text-gray-600`,
+              `print:hidden`
+            )}>
               <div>Happy with your story?</div>
               <div>You can <Button onClick={() => {
                 setCurrentNbPages(currentNbPages + 1)

src/app/page.tsx

@@ -5,6 +5,7 @@ import Head from "next/head"
 import Main from "./main"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import Script from "next/script"
+import { cn } from "@/lib/utils"
 // import { Maintenance } from "./interface/maintenance"
 
 // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
@@ -17,10 +18,13 @@ export default async function IndexPage({ params: { ownerId } }: { params: { own
         <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
         <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
       </Head>
-      <main className={
-        `light fixed inset-0 w-screen h-screen flex flex-col items-center
-         bg-zinc-50 text-stone-900 overflow-y-scroll
-        `}>
+      <main className={cn(
+        `light fixed inset-0 w-screen h-screen flex flex-col items-center`,
+         `bg-zinc-50 text-stone-900 overflow-y-scroll`,
+
+         // important: in "print" mode we need to allowing going out of the screen
+         `inset-auto print:h-auto print:w-auto print:overflow-visible print:relative print:flex-none`
+        )}>
         <TooltipProvider delayDuration={100}>
           
           <Main />