jbilcke-hf HF staff commited on
Commit
bca383d
β€’
1 Parent(s): 2f9a87c

support multiple pages

Browse files
.env CHANGED
@@ -14,7 +14,7 @@ RENDERING_ENGINE="INFERENCE_API"
14
  LLM_ENGINE="INFERENCE_API"
15
 
16
  # set this to control the number of pages
17
- MAX_NB_PAGES=2
18
 
19
  # Set to "true" to create artificial delays and smooth out traffic
20
  NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
 
14
  LLM_ENGINE="INFERENCE_API"
15
 
16
  # set this to control the number of pages
17
+ MAX_NB_PAGES=6
18
 
19
  # Set to "true" to create artificial delays and smooth out traffic
20
  NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
README.md CHANGED
@@ -15,7 +15,11 @@ hf_oauth_scopes: [inference-api]
15
 
16
  # AI Comic Factory
17
 
18
- *(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)*
 
 
 
 
19
 
20
  ## Running the project at home
21
 
 
15
 
16
  # AI Comic Factory
17
 
18
+ Last release: AI Comic Factory 1.2
19
+
20
+ The AI Comic Factory will soon have an official website: [aicomicfactory.app](https://aicomicfactory.app)
21
+
22
+ For more information about my other projects please check [linktr.ee/FLNGR](https://linktr.ee/FLNGR).
23
 
24
  ## Running the project at home
25
 
package.json CHANGED
@@ -1,6 +1,6 @@
1
  {
2
  "name": "@jbilcke/comic-factory",
3
- "version": "1.1.0",
4
  "private": true,
5
  "scripts": {
6
  "dev": "next dev",
 
1
  {
2
  "name": "@jbilcke/comic-factory",
3
+ "version": "1.2.0",
4
  "private": true,
5
  "scripts": {
6
  "dev": "next dev",
src/app/interface/about/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { useState } from "react"
2
 
3
  import { Button } from "@/components/ui/button"
4
  import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
@@ -6,9 +6,20 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
6
  import { Login } from "../login"
7
 
8
  const APP_NAME = `AI Comic Factory`
9
- const APP_VERSION = `1.1`
 
 
10
  const APP_RELEASE_DATE = `March 2024`
11
 
 
 
 
 
 
 
 
 
 
12
  export function About() {
13
  const [isOpen, setOpen] = useState(false)
14
 
@@ -22,17 +33,20 @@ export function About() {
22
  </DialogTrigger>
23
  <DialogContent className="w-full sm:max-w-[500px] md:max-w-[600px] overflow-y-scroll h-[100vh] sm:h-[550px]">
24
  <DialogHeader>
25
- <DialogTitle>{APP_NAME} {APP_VERSION}</DialogTitle>
26
  <DialogDescription className="w-full text-center text-2xl font-bold text-stone-700">
27
- {APP_NAME} {APP_VERSION} ({APP_RELEASE_DATE})
28
  </DialogDescription>
29
  </DialogHeader>
30
  <div className="grid gap-4 py-4 text-stone-700 text-sm md:text-base xl:text-lg">
31
  <p className="">
32
- The {APP_NAME} generates stories using AI in a few clicks.
 
 
 
33
  </p>
34
  <p>
35
- The app is free for Hugging Face users πŸ‘‰ <Login />
36
  </p>
37
  <p className="pt-2 pb-2">
38
  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>
 
1
+ import { ReactNode, useState } from "react"
2
 
3
  import { Button } from "@/components/ui/button"
4
  import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 
6
  import { Login } from "../login"
7
 
8
  const APP_NAME = `AI Comic Factory`
9
+ const APP_DOMAIN = `aicomicfactory.app`
10
+ const APP_URL = `https://aicomicfactory.app`
11
+ const APP_VERSION = `1.2`
12
  const APP_RELEASE_DATE = `March 2024`
13
 
14
+ const ExternalLink = ({ url, children }: { url: string; children: ReactNode }) => {
15
+ return (
16
+ <a
17
+ className="text-stone-600 underline"
18
+ href={url}
19
+ target="_blank">{children}</a>
20
+ )
21
+ }
22
+
23
  export function About() {
24
  const [isOpen, setOpen] = useState(false)
25
 
 
33
  </DialogTrigger>
34
  <DialogContent className="w-full sm:max-w-[500px] md:max-w-[600px] overflow-y-scroll h-[100vh] sm:h-[550px]">
35
  <DialogHeader>
36
+ <DialogTitle><ExternalLink url={APP_URL}>{APP_DOMAIN}</ExternalLink> {APP_VERSION}</DialogTitle>
37
  <DialogDescription className="w-full text-center text-2xl font-bold text-stone-700">
38
+ <ExternalLink url={APP_URL}>{APP_DOMAIN}</ExternalLink> {APP_VERSION} ({APP_RELEASE_DATE})
39
  </DialogDescription>
40
  </DialogHeader>
41
  <div className="grid gap-4 py-4 text-stone-700 text-sm md:text-base xl:text-lg">
42
  <p className="">
43
+ {APP_DOMAIN} generates stories using AI in a few clicks.
44
+ </p>
45
+ <p>
46
+ App is free for Hugging Face users πŸ‘‰ <Login />
47
  </p>
48
  <p>
49
+ Join us on Discord πŸ‘‰ <ExternalLink url="https://discord.com/invite/AEruz9B92B">The Latent Space</ExternalLink>
50
  </p>
51
  <p className="pt-2 pb-2">
52
  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 CHANGED
@@ -259,7 +259,10 @@ export default function Main() {
259
  `flex items-start w-screen h-screen pt-24 md:pt-[72px] overflow-y-scroll`,
260
  `transition-all duration-200 ease-in-out`,
261
  zoomLevel > 105 ? `px-0` : `pl-1 pr-8 md:pl-16 md:pr-16`,
262
- `print:pt-0 print:px-0 print:pl-0 print:pr-0`,
 
 
 
263
  fonts.actionman.className
264
  )}>
265
  <div
@@ -270,8 +273,15 @@ export default function Main() {
270
  <div
271
  className={cn(
272
  `comic-page`,
273
- `flex flex-col md:flex-row md:space-x-8 lg:space-x-12 xl:space-x-16 md:items-center md:justify-start`,
274
- `print:space-x-4 print:flex-row`,
 
 
 
 
 
 
 
275
  )}
276
  style={{
277
  width: `${zoomLevel}%`
@@ -280,7 +290,10 @@ export default function Main() {
280
  </div>
281
  {
282
  showNextPageButton &&
283
- <div className="flex flex-col space-y-2 pt-2 pb-6 text-gray-600 dark:text-gray-600">
 
 
 
284
  <div>Happy with your story?</div>
285
  <div>You can <Button onClick={() => {
286
  setCurrentNbPages(currentNbPages + 1)
 
259
  `flex items-start w-screen h-screen pt-24 md:pt-[72px] overflow-y-scroll`,
260
  `transition-all duration-200 ease-in-out`,
261
  zoomLevel > 105 ? `px-0` : `pl-1 pr-8 md:pl-16 md:pr-16`,
262
+
263
+ // important: in "print" mode we need to allow going out of the screen
264
+ `print:pt-0 print:px-0 print:pl-0 print:pr-0 print:h-auto print:w-auto print:overflow-visible`,
265
+
266
  fonts.actionman.className
267
  )}>
268
  <div
 
273
  <div
274
  className={cn(
275
  `comic-page`,
276
+
277
+ `grid grid-cols-1`,
278
+ currentNbPages > 1 ? `md:grid-cols-2` : ``,
279
+
280
+ // spaces between pages
281
+ `gap-x-3 gap-y-4 md:gap-x-8 lg:gap-x-12 xl:gap-x-16`,
282
+
283
+ // when printed
284
+ `print:gap-x-3 print:gap-y-4 print:grid-cols-1`,
285
  )}
286
  style={{
287
  width: `${zoomLevel}%`
 
290
  </div>
291
  {
292
  showNextPageButton &&
293
+ <div className={cn(
294
+ `flex flex-col space-y-2 pt-2 pb-6 text-gray-600 dark:text-gray-600`,
295
+ `print:hidden`
296
+ )}>
297
  <div>Happy with your story?</div>
298
  <div>You can <Button onClick={() => {
299
  setCurrentNbPages(currentNbPages + 1)
src/app/page.tsx CHANGED
@@ -5,6 +5,7 @@ import Head from "next/head"
5
  import Main from "./main"
6
  import { TooltipProvider } from "@/components/ui/tooltip"
7
  import Script from "next/script"
 
8
  // import { Maintenance } from "./interface/maintenance"
9
 
10
  // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
@@ -17,10 +18,13 @@ export default async function IndexPage({ params: { ownerId } }: { params: { own
17
  <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
18
  <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
19
  </Head>
20
- <main className={
21
- `light fixed inset-0 w-screen h-screen flex flex-col items-center
22
- bg-zinc-50 text-stone-900 overflow-y-scroll
23
- `}>
 
 
 
24
  <TooltipProvider delayDuration={100}>
25
 
26
  <Main />
 
5
  import Main from "./main"
6
  import { TooltipProvider } from "@/components/ui/tooltip"
7
  import Script from "next/script"
8
+ import { cn } from "@/lib/utils"
9
  // import { Maintenance } from "./interface/maintenance"
10
 
11
  // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
 
18
  <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
19
  <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
20
  </Head>
21
+ <main className={cn(
22
+ `light fixed inset-0 w-screen h-screen flex flex-col items-center`,
23
+ `bg-zinc-50 text-stone-900 overflow-y-scroll`,
24
+
25
+ // important: in "print" mode we need to allowing going out of the screen
26
+ `inset-auto print:h-auto print:w-auto print:overflow-visible print:relative print:flex-none`
27
+ )}>
28
  <TooltipProvider delayDuration={100}>
29
 
30
  <Main />