UI improvement + about

src/app/interface/about/index.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { useState } from "react"
+
+export function About() {
+  const [isOpen, setOpen] = useState(false)
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <span className="hidden md:inline">About this project</span>
+          <span className="inline md:hidden">About</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>The AI Comic Factory</DialogTitle>
+          <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
+            What is the AI Comic Factory?
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4 text-stone-800">
+        <p className="">
+           The AI Comic Factory is a free and open-source application made to demonstrate the capabilities of AI models.
+         </p>
+         <p>
+         👉 The language model used to generate the descriptions of each panel is <a className="text-stone-600 underline" href="https://huggingface.co/blog/llama2" target="_blank">Llama-2 70b</a>.
+         </p>
+         <p>
+         👉 The stable diffusion model used to generate the images is the base <a className="text-stone-600 underline" href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">SDXL 1.0</a>.
+        </p>
+         <p>
+           The code is public and can be deployed at home with some changes in the code. 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 details about the architecture.
+         </p>
+        </div>
+        <DialogFooter>
+          <Button type="submit" onClick={() => setOpen(false)}>Got it</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/interface/bottom-bar/index.tsx

@@ -4,6 +4,7 @@ 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)
@@ -59,13 +60,20 @@ ${uploadUrl
   return (
     <div className={cn(
       `print:hidden`,
-      `fixed bottom-6 right-3`,
+      `fixed bottom-2 md:bottom-4 left-2 right-0 md:left-3 md:right-1`,
       `flex flex-row`,
-      `animation-all duration-300 ease-in-out`,
-      isGeneratingStory ? `scale-0 opacity-0` : ``,
-      `space-x-3`,
-      `scale-[0.9]`
+      `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
@@ -75,32 +83,48 @@ ${uploadUrl
           Upscale
         </Button>
       </div>
-    */}
-      <div>
-        <Button
-          onClick={handlePrint}
-          disabled={!prompt?.length}
-        >
-          Print
-        </Button>
-      </div>
-      <div>
-        <Button
-          onClick={download}
-          disabled={!prompt?.length}
-        >{
-          remainingImages ? `${allStatus.length - remainingImages}/4 panels ⌛` : `Save`
-        }</Button>
-      </div>
-      <div>
-        <Button
-          onClick={handleShare}
-          disabled={!prompt?.length}
-          className="space-x-2"
-        >
-          <span className="scale-105"><HuggingClap /></span>
-          <span>Share to community</span>
-        </Button>
+      */}
+      <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>
   )

src/app/interface/panel/index.tsx

@@ -231,7 +231,7 @@ export function Panel({
     )
   }
 
-
+  console.log("eoomLevel:", zoomLevel)
   return (
     <div className={cn(
       frameClassName,
@@ -251,13 +251,29 @@ export function Panel({
         `print:border-b-[1.5px]`,
         showCaptions ? `block` : `hidden`,
         `truncate`,
-        `max-h-32`,
-        `p-2`
+
+        zoomLevel > 200 ? `p-4 md:p-8` :
+        zoomLevel > 180 ? `p-[14px] md:p-8` :
+        zoomLevel > 160 ? `p-[12px] md:p-[28px]` :
+        zoomLevel > 140 ? `p-[10px] md:p-[26px]` :
+        zoomLevel > 120 ? `p-2 md:p-6` :
+        zoomLevel > 100 ? `p-1.5 md:p-[20px]` :
+        zoomLevel > 90 ? `p-1.5 md:p-4` :
+        zoomLevel > 40 ? `p-1 md:p-2` :
+        `p-0.5 md:p-2`,
+
+        zoomLevel > 220 ? `text-xl md:text-4xl` :
+        zoomLevel > 200 ? `text-lg md:text-3xl` :
+        zoomLevel > 180 ? `text-md md:text-2xl` :
+        zoomLevel > 140 ? `text-2xs md:text-2xl` :
+        zoomLevel > 120 ? `text-3xs md:text-xl` :
+        zoomLevel > 100 ? `text-4xs md:text-lg` :
+        zoomLevel > 90 ? `text-5xs md:text-sm` :
+        zoomLevel > 40 ? `hidden md:block md:text-xs` :
+        `hidden md:block md:text-2xs`,
       )}
-      style={{
-        fontSize: zoomLevel * 0.2
-      }}
-      >{caption}</div>
+      >{caption || "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, "}
+        </div>
         {rendered.assetUrl &&
         <img
           ref={ref}

src/app/interface/top-menu/index.tsx

@@ -89,13 +89,14 @@ export function TopMenu() {
       `bg-stone-900/70 dark:bg-stone-900/70 text-gray-50 dark:text-gray-50`,
       `space-y-2 md:space-y-0 md:space-x-3 lg:space-x-6`
     )}>
-      <div className="flex flex-row space-x-6 md:space-x-3">
-      <div className={cn(
+      <div className="flex flex-row space-x-2 md:space-x-3 w-full md:w-auto">
+        <div className={cn(
           `transition-all duration-200 ease-in-out`,
-          `flex flex-row items-center justify-start space-x-3 font-mono w-1/2 md:w-auto`
+          `flex flex-row items-center justify-start space-x-3 font-mono`,
+          `flex-grow`
           )}>
 
-          {/* <Label className="flex text-xs md:text-sm md:w-24">Style:</Label> */}
+          {/* <Label className="flex text-2xs md:text-sm md:w-24">Style:</Label> */}
 
           <Select
             defaultValue={defaultPreset}
@@ -103,7 +104,7 @@ export function TopMenu() {
             disabled={isBusy}
             >
             <SelectTrigger className="flex-grow">
-              <SelectValue className="text-xs md:text-sm" placeholder="Style" />
+              <SelectValue className="text-2xs md:text-sm" placeholder="Style" />
             </SelectTrigger>
             <SelectContent>
               {nonRandomPresets.map(key =>
@@ -114,10 +115,11 @@ export function TopMenu() {
         </div>
         <div className={cn(
           `transition-all duration-200 ease-in-out`,
-          `flex flex-row items-center justify-start space-x-3 font-mono w-1/2 md:w-auto`
+          `flex flex-row items-center justify-start space-x-3 font-mono`,
+          `w-40`
           )}>
 
-          {/* <Label className="flex text-xs md:text-sm md:w-24">Style:</Label> */}
+          {/* <Label className="flex text-2xs md:text-sm md:w-24">Style:</Label> */}
 
           <Select
             defaultValue={defaultLayout}
@@ -125,7 +127,7 @@ export function TopMenu() {
             disabled={isBusy}
             >
             <SelectTrigger className="flex-grow">
-              <SelectValue className="text-xs md:text-sm" placeholder="Layout" />
+              <SelectValue className="text-2xs md:text-sm" placeholder="Layout" />
             </SelectTrigger>
             <SelectContent>
               {nonRandomLayouts.map(key =>
@@ -150,19 +152,29 @@ export function TopMenu() {
             </SelectContent>
           </Select>
         </div>
+        <div className="flex flex-row items-center space-x-3">
+        <Switch
+          checked={showCaptions}
+          onCheckedChange={setShowCaptions}
+        />
+        <Label>
+          <span className="hidden md:inline">Caption</span>
+          <span className="inline md:hidden">Cap.</span>
+        </Label>
+        </div>
         {/*
         <div className={cn(
           `transition-all duration-200 ease-in-out`,
           `flex flex-row items-center space-x-3 font-mono w-1/2 md:w-auto md:hidden`
         )}>
-          <Label className="flex text-xs md:text-sm md:w-24">Font:</Label>
+          <Label className="flex text-2xs md:text-sm md:w-24">Font:</Label>
           <Select
             defaultValue={fontList.includes(preset.font) ? preset.font : "cartoonist"}
             onValueChange={(value) => { setFont(value as FontName) }}
             disabled={atLeastOnePanelIsBusy}
             >
             <SelectTrigger className="flex-grow">
-              <SelectValue className="text-xs md:text-sm" placeholder="Type" />
+              <SelectValue className="text-2xs md:text-sm" placeholder="Type" />
             </SelectTrigger>
             <SelectContent>
               {Object.keys(fonts)
@@ -180,11 +192,12 @@ export function TopMenu() {
       </div>
       <div className={cn(
           `transition-all duration-200 ease-in-out`,
-          `flex flex-row flex-grow items-center space-x-3 font-mono w-full md:w-auto`
+          `flex  flex-grow flex-col space-y-2 md:space-y-0 md:flex-row items-center md:space-x-3 font-mono w-full md:w-auto`
         )}>
+          <div className="flex flex-row flex-grow w-full">
         <Input
           placeholder="Story"
-          className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800"
+          className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 rounded-r-none"
           // disabled={atLeastOnePanelIsBusy}
           onChange={(e) => {
             setDraftPrompt(e.target.value)
@@ -197,20 +210,18 @@ export function TopMenu() {
           value={draftPrompt}
          />
         <Button
+          className={cn(
+            `rounded-l-none cursor-pointer`,
+            `transition-all duration-200 ease-in-out`,
+            )}
           onClick={() => {
             handleSubmit()
           }}
           disabled={!draftPrompt?.trim().length || isBusy}
         >
-          Generate
+          Go
         </Button>
-        <Switch
-          checked={showCaptions}
-          onCheckedChange={setShowCaptions}
-        />
-        <Label>
-          Caption
-        </Label>
+        </div>
       </div>
       {/*
         Let's add this feature later, because right now people
@@ -219,7 +230,7 @@ export function TopMenu() {
           `transition-all duration-200 ease-in-out`,
           `hidden md:flex flex-row items-center space-x-3 font-mono w-full md:w-auto`
       )}>
-        <Label className="flex text-xs md:text-sm w-24">Font:</Label>
+        <Label className="flex text-2xs md:text-sm w-24">Font:</Label>
         <Select
           defaultValue={fontList.includes(preset.font) ? preset.font : "actionman"}
           onValueChange={(value) => { setFont(value as FontName) }}
@@ -227,7 +238,7 @@ export function TopMenu() {
           disabled={true}
           >
           <SelectTrigger className="flex-grow">
-            <SelectValue className="text-xs md:text-sm" placeholder="Type" />
+            <SelectValue className="text-2xs md:text-sm" placeholder="Type" />
           </SelectTrigger>
           <SelectContent>
             {Object.keys(fonts)

src/app/interface/zoom/index.tsx

@@ -11,11 +11,11 @@ export function Zoom() {
     <div className={cn(
       `print:hidden`,
       // `fixed flex items-center justify-center bottom-8 top-32 right-8 z-10 h-screen`,
-      `fixed flex flex-col items-center bottom-8 top-32 md:top-20 right-6 z-10`,
+      `fixed flex flex-col items-center bottom-8 top-28 right-2 md:top-20 md:right-6 z-10`,
       `animation-all duration-300 ease-in-out`,
       isGeneratingStory ? `scale-0 opacity-0` : ``,
     )}>
-      <div className="font-mono text-xs pb-1 text-stone-700 bg-stone-50 p-1 rounded-sm">
+      <div className="font-mono font-bold text-xs pb-2 text-stone-600 bg-stone-50 p-1 rounded-sm">
         Zoom
       </div>
       <div className="w-2">
@@ -26,7 +26,7 @@ export function Zoom() {
           step={1}
           onValueChange={value => setZoomLevel(value[0] || 10)}
           value={[zoomLevel]}
-          className="h-48"
+          className="h-64 md:h-80"
           orientation="vertical"
         />
       </div>

src/app/main.tsx

@@ -80,9 +80,9 @@ export default function Main() {
     <div>
       <TopMenu />
       <div className={cn(
-        `flex items-start w-screen h-screen pt-[120px] md:pt-[72px] overflow-y-scroll`,
+        `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-2 pr-16 md:pl-16 md:pr-16`,
+        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`,
         fonts.actionman.className
       )}>