feat: add ai-comic-factory

ai-comic-factory/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

ai-comic-factory/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+pnpm-lock.yaml

ai-comic-factory/.nvmrc

@@ -0,0 +1 @@
+v20.17.0

ai-comic-factory/CONTRIBUTORS.md

@@ -0,0 +1,10 @@
+This project was developed by Julian Bilcke (@jbilcke-hf), as part of his work at Hugging Face.
+
+------------------------------------------
+
+A huge thanks to external developers for their contributions! 
+
+艾逗笔 (@idoubi):
+- [feature] Added support for OpenAI: https://github.com/jbilcke-hf/ai-comic-factory/pull/6
+- [bug] predict import error (use dynamic imports for the LLM provider): https://github.com/jbilcke-hf/ai-comic-factory/pull/9
+

ai-comic-factory/Dockerfile

@@ -0,0 +1,65 @@
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+#     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+
+# If you use yarn, comment out this line and use the line above
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/cache/fetch-cache ./.next/cache/fetch-cache
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

ai-comic-factory/LICENCE.md

@@ -0,0 +1,170 @@
+Apache License
+==============
+
+_Version 2.0, January 2004_  
+_&lt;<http://www.apache.org/licenses/>&gt;_
+
+### Terms and Conditions for use, reproduction, and distribution
+
+#### 1. Definitions
+
+“License” shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+“Licensor” shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+“Legal Entity” shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, “control” means **(i)** the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or **(ii)** ownership of fifty percent (50%) or more of the
+outstanding shares, or **(iii)** beneficial ownership of such entity.
+
+“You” (or “Your”) shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+“Source” form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+“Object” form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+“Work” shall mean the work of authorship, whether in Source or Object form, made
+available under the License, as indicated by a copyright notice that is included
+in or attached to the work (an example is provided in the Appendix below).
+
+“Derivative Works” shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+“Contribution” shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work
+by the copyright owner or by an individual or Legal Entity authorized to submit
+on behalf of the copyright owner. For the purposes of this definition,
+“submitted” means any form of electronic, verbal, or written communication sent
+to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control systems, and
+issue tracking systems that are managed by, or on behalf of, the Licensor for
+the purpose of discussing and improving the Work, but excluding communication
+that is conspicuously marked or otherwise designated in writing by the copyright
+owner as “Not a Contribution.”
+
+“Contributor” shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+#### 2. Grant of Copyright License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
+irrevocable copyright license to reproduce, prepare Derivative Works of,
+publicly display, publicly perform, sublicense, and distribute the Work and such
+Derivative Works in Source or Object form.
+
+#### 3. Grant of Patent License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
+irrevocable (except as stated in this section) patent license to make, have
+made, use, offer to sell, sell, import, and otherwise transfer the Work, where
+such license applies only to those patent claims licensable by such Contributor
+that are necessarily infringed by their Contribution(s) alone or by combination
+of their Contribution(s) with the Work to which such Contribution(s) was
+submitted. If You institute patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Work or a
+Contribution incorporated within the Work constitutes direct or contributory
+patent infringement, then any patent licenses granted to You under this License
+for that Work shall terminate as of the date such litigation is filed.
+
+#### 4. Redistribution
+
+You may reproduce and distribute copies of the Work or Derivative Works thereof
+in any medium, with or without modifications, and in Source or Object form,
+provided that You meet the following conditions:
+
+* **(a)** You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+* **(b)** You must cause any modified files to carry prominent notices stating that You
+changed the files; and
+* **(c)** You must retain, in the Source form of any Derivative Works that You distribute,
+all copyright, patent, trademark, and attribution notices from the Source form
+of the Work, excluding those notices that do not pertain to any part of the
+Derivative Works; and
+* **(d)** If the Work includes a “NOTICE” text file as part of its distribution, then any
+Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the
+Derivative Works; within the Source form or documentation, if provided along
+with the Derivative Works; or, within a display generated by the Derivative
+Works, if and wherever such third-party notices normally appear. The contents of
+the NOTICE file are for informational purposes only and do not modify the
+License. You may add Your own attribution notices within Derivative Works that
+You distribute, alongside or as an addendum to the NOTICE text from the Work,
+provided that such additional attribution notices cannot be construed as
+modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+#### 5. Submission of Contributions
+
+Unless You explicitly state otherwise, any Contribution intentionally submitted
+for inclusion in the Work by You to the Licensor shall be under the terms and
+conditions of this License, without any additional terms or conditions.
+Notwithstanding the above, nothing herein shall supersede or modify the terms of
+any separate license agreement you may have executed with Licensor regarding
+such Contributions.
+
+#### 6. Trademarks
+
+This License does not grant permission to use the trade names, trademarks,
+service marks, or product names of the Licensor, except as required for
+reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+#### 7. Disclaimer of Warranty
+
+Unless required by applicable law or agreed to in writing, Licensor provides the
+Work (and each Contributor provides its Contributions) on an “AS IS” BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied,
+including, without limitation, any warranties or conditions of TITLE,
+NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are
+solely responsible for determining the appropriateness of using or
+redistributing the Work and assume any risks associated with Your exercise of
+permissions under this License.
+
+#### 8. Limitation of Liability
+
+In no event and under no legal theory, whether in tort (including negligence),
+contract, or otherwise, unless required by applicable law (such as deliberate
+and grossly negligent acts) or agreed to in writing, shall any Contributor be
+liable to You for damages, including any direct, indirect, special, incidental,
+or consequential damages of any character arising as a result of this License or
+out of the use or inability to use the Work (including but not limited to
+damages for loss of goodwill, work stoppage, computer failure or malfunction, or
+any and all other commercial damages or losses), even if such Contributor has
+been advised of the possibility of such damages.
+
+#### 9. Accepting Warranty or Additional Liability
+
+While redistributing the Work or Derivative Works thereof, You may choose to
+offer, and charge a fee for, acceptance of support, warranty, indemnity, or
+other liability obligations and/or rights consistent with this License. However,
+in accepting such obligations, You may act only on Your own behalf and on Your
+sole responsibility, not on behalf of any other Contributor, and only if You
+agree to indemnify, defend, and hold each Contributor harmless for any liability
+incurred by, or claims asserted against, such Contributor by reason of your
+accepting any such warranty or additional liability.
+
+_END OF TERMS AND CONDITIONS_

ai-comic-factory/README.md

@@ -0,0 +1,192 @@
+---
+title: AI Comic Factory
+emoji: 👩‍🎨
+colorFrom: red
+colorTo: yellow
+sdk: docker
+pinned: true
+app_port: 3000
+disable_embedding: false
+short_description: Create your own AI comic with a single prompt
+hf_oauth: true
+hf_oauth_expiration_minutes: 43200
+hf_oauth_scopes: [inference-api]
+---
+
+# AI Comic Factory
+
+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
+
+First, I would like to highlight that everything is open-source (see [here](https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/tree/main), [here](https://huggingface.co/spaces/jbilcke-hf/VideoChain-API/tree/main), [here](https://huggingface.co/spaces/hysts/SD-XL/tree/main), [here](https://github.com/huggingface/text-generation-inference)).
+
+However the project isn't a monolithic Space that can be duplicated and ran immediately:
+it requires various components to run for the frontend, backend, LLM, SDXL etc.
+
+If you try to duplicate the project, open the `.env` you will see it requires some variables.
+
+Provider config:
+- `LLM_ENGINE`: can be one of `INFERENCE_API`, `INFERENCE_ENDPOINT`, `OPENAI`, `GROQ`, `ANTHROPIC`
+- `RENDERING_ENGINE`: can be one of: "INFERENCE_API", "INFERENCE_ENDPOINT", "REPLICATE", "VIDEOCHAIN", "OPENAI" for now, unless you code your custom solution
+
+Auth config:
+- `AUTH_HF_API_TOKEN`:  if you decide to use Hugging Face for the LLM engine (inference api model or a custom inference endpoint)
+- `AUTH_OPENAI_API_KEY`: to use OpenAI for the LLM engine
+- `AUTH_GROQ_API_KEY`: to use Groq for the LLM engine
+- `AUTH_ANTHROPIC_API_KEY`: to use Anthropic (Claude) for the LLM engine
+- `AUTH_VIDEOCHAIN_API_TOKEN`: secret token to access the VideoChain API server
+- `AUTH_REPLICATE_API_TOKEN`: in case you want to use Replicate.com
+
+Rendering config:
+- `RENDERING_HF_INFERENCE_ENDPOINT_URL`: necessary if you decide to use a custom inference endpoint
+- `RENDERING_REPLICATE_API_MODEL_VERSION`: url to the VideoChain API server
+- `RENDERING_HF_INFERENCE_ENDPOINT_URL`: optional, default to nothing
+- `RENDERING_HF_INFERENCE_API_BASE_MODEL`: optional, defaults to "stabilityai/stable-diffusion-xl-base-1.0"
+- `RENDERING_HF_INFERENCE_API_REFINER_MODEL`: optional, defaults to "stabilityai/stable-diffusion-xl-refiner-1.0"
+- `RENDERING_REPLICATE_API_MODEL`: optional, defaults to "stabilityai/sdxl"
+- `RENDERING_REPLICATE_API_MODEL_VERSION`: optional, in case you want to change the version
+
+Language model config (depending on the LLM engine you decide to use):
+- `LLM_HF_INFERENCE_ENDPOINT_URL`: "<use your own>"
+- `LLM_HF_INFERENCE_API_MODEL`: "HuggingFaceH4/zephyr-7b-beta"
+- `LLM_OPENAI_API_BASE_URL`: "https://api.openai.com/v1"
+- `LLM_OPENAI_API_MODEL`: "gpt-4-turbo"
+- `LLM_GROQ_API_MODEL`: "mixtral-8x7b-32768"
+- `LLM_ANTHROPIC_API_MODEL`: "claude-3-opus-20240229"
+
+In addition, there are some community sharing variables that you can just ignore.
+Those variables are not required to run the AI Comic Factory on your own website or computer
+(they are meant to create a connection with the Hugging Face community,
+and thus only make sense for official Hugging Face apps):
+- `NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING`: you don't need this
+- `COMMUNITY_API_URL`: you don't need this
+- `COMMUNITY_API_TOKEN`: you don't need this
+- `COMMUNITY_API_ID`: you don't need this
+
+Please read the `.env` default config file for more informations.
+To customise a variable locally, you should create a `.env.local`
+(do not commit this file as it will contain your secrets).
+
+-> If you intend to run it with local, cloud-hosted and/or proprietary models **you are going to need to code 👨‍💻**.
+
+## The LLM API (Large Language Model)
+
+Currently the AI Comic Factory uses [zephyr-7b-beta](https://huggingface.co/HuggingFaceH4/zephyr-7b-beta) through an [Inference Endpoint](https://huggingface.co/docs/inference-endpoints/index).
+
+You have multiple options:
+
+### Option 1: Use an Inference API model
+
+This is a new option added recently, where you can use one of the models from the Hugging Face Hub. By default we suggest to use [zephyr-7b-beta](https://huggingface.co/HuggingFaceH4/zephyr-7b-beta) as it will provide better results than the 7b model.
+
+To activate it, create a `.env.local` configuration file:
+
+```bash
+LLM_ENGINE="INFERENCE_API"
+
+HF_API_TOKEN="Your Hugging Face token"
+
+# "HuggingFaceH4/zephyr-7b-beta" is used by default, but you can change this
+# note: You should use a model able to generate JSON responses,
+# so it is storngly suggested to use at least the 34b model
+HF_INFERENCE_API_MODEL="HuggingFaceH4/zephyr-7b-beta"
+```
+
+### Option 2: Use an Inference Endpoint URL
+
+If you would like to run the AI Comic Factory on a private LLM running on the Hugging Face Inference Endpoint service, create a `.env.local` configuration file:
+
+```bash
+LLM_ENGINE="INFERENCE_ENDPOINT"
+
+HF_API_TOKEN="Your Hugging Face token"
+
+HF_INFERENCE_ENDPOINT_URL="path to your inference endpoint url"
+```
+
+To run this kind of LLM locally, you can use [TGI](https://github.com/huggingface/text-generation-inference) (Please read [this post](https://github.com/huggingface/text-generation-inference/issues/726) for more information about the licensing).
+
+### Option 3: Use an OpenAI API Key
+
+This is a new option added recently, where you can use OpenAI API with an OpenAI API Key.
+
+To activate it, create a `.env.local` configuration file:
+
+```bash
+LLM_ENGINE="OPENAI"
+
+# default openai api base url is: https://api.openai.com/v1
+LLM_OPENAI_API_BASE_URL="A custom OpenAI API Base URL if you have some special privileges"
+
+LLM_OPENAI_API_MODEL="gpt-4-turbo"
+
+AUTH_OPENAI_API_KEY="Yourown OpenAI API Key"
+```
+### Option 4: (new, experimental) use Groq
+
+```bash
+LLM_ENGINE="GROQ"
+
+LLM_GROQ_API_MODEL="mixtral-8x7b-32768"
+
+AUTH_GROQ_API_KEY="Your own GROQ API Key"
+```
+### Option 5: (new, experimental) use Anthropic (Claude)
+
+```bash
+LLM_ENGINE="ANTHROPIC"
+
+LLM_ANTHROPIC_API_MODEL="claude-3-opus-20240229"
+
+AUTH_ANTHROPIC_API_KEY="Your own ANTHROPIC API Key"
+```
+
+### Option 6: Fork and modify the code to use a different LLM system
+
+Another option could be to disable the LLM completely and replace it with another LLM protocol and/or provider (eg. Claude, Replicate), or a human-generated story instead (by returning mock or static data).
+
+### Notes
+
+It is possible that I modify the AI Comic Factory to make it easier in the future (eg. add support for Claude or Replicate)
+
+## The Rendering API
+
+This API is used to generate the panel images. This is an API I created for my various projects at Hugging Face.
+
+I haven't written documentation for it yet, but basically it is "just a wrapper ™" around other existing APIs:
+
+- The [hysts/SD-XL](https://huggingface.co/spaces/hysts/SD-XL?duplicate=true) Space by [@hysts](https://huggingface.co/hysts)
+- And other APIs for making videos, adding audio etc.. but you won't need them for the AI Comic Factory
+
+### Option 1: Deploy VideoChain yourself
+
+You will have to [clone](https://huggingface.co/spaces/jbilcke-hf/VideoChain-API?duplicate=true) the [source-code](https://huggingface.co/spaces/jbilcke-hf/VideoChain-API/tree/main)
+
+Unfortunately, I haven't had the time to write the documentation for VideoChain yet.
+(When I do I will update this document to point to the VideoChain's README)
+
+
+### Option 2: Use Replicate
+
+To use Replicate, create a `.env.local` configuration file:
+
+```bash
+RENDERING_ENGINE="REPLICATE"
+
+RENDERING_REPLICATE_API_MODEL="stabilityai/sdxl"
+
+RENDERING_REPLICATE_API_MODEL_VERSION="da77bc59ee60423279fd632efb4795ab731d9e3ca9705ef3341091fb989b7eaf"
+
+AUTH_REPLICATE_API_TOKEN="Your Replicate token"
+```
+
+### Option 3: Use another SDXL API
+
+If you fork the project you will be able to modify the code to use the Stable Diffusion technology of your choice (local, open-source, proprietary, your custom HF Space etc).
+
+It would even be something else, such as Dall-E.

ai-comic-factory/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

ai-comic-factory/next.config.js

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '8mb',
+    },
+  }
+}
+
+module.exports = nextConfig

ai-comic-factory/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@jbilcke/comic-factory",
+  "version": "1.2.3",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@aitube/clap": "0.2.4",
+    "@anthropic-ai/sdk": "^0.25.0",
+    "@huggingface/hub": "^0.15.1",
+    "@huggingface/inference": "^2.0.0",
+    "@mediapipe/tasks-vision": "0.10.15",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.3",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@types/node": "20.4.2",
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.0",
+    "@types/uuid": "^9.0.2",
+    "autoprefixer": "10.4.18",
+    "class-variance-authority": "^0.6.1",
+    "clsx": "^2.1.0",
+    "cmdk": "^0.2.0",
+    "cookies-next": "^2.1.2",
+    "date-fns": "^2.30.0",
+    "encoding": "^0.1.13",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.10",
+    "groq-sdk": "^0.3.1",
+    "html2canvas": "^1.4.1",
+    "i": "^0.3.7",
+    "konva": "^9.2.2",
+    "lucide-react": "^0.260.0",
+    "next": "14.2.7",
+    "npm": "^10.7.0",
+    "openai": "^4.29.2",
+    "pick": "^0.0.1",
+    "postcss": "8.4.37",
+    "query-string": "^9.0.0",
+    "react": "18.3.1",
+    "react-circular-progressbar": "^2.1.0",
+    "react-contenteditable": "^3.3.7",
+    "react-dom": "18.3.1",
+    "react-draggable": "^4.4.6",
+    "react-hook-consent": "^3.5.3",
+    "react-icons": "^4.11.0",
+    "react-konva": "^18.2.10",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "replicate": "^0.32.0",
+    "sbd": "^1.0.19",
+    "sharp": "^0.33.4",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss": "3.4.1",
+    "tailwindcss-animate": "^1.0.6",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.4.5",
+    "use-file-picker": "^2.1.2",
+    "usehooks-ts": "2.9.1",
+    "uuid": "^9.0.0",
+    "yaml": "^2.4.5",
+    "zustand": "^4.5.1"
+  },
+  "devDependencies": {
+    "@types/qs": "^6.9.7",
+    "@types/react-virtualized": "^9.21.22",
+    "@types/sbd": "^1.0.3"
+  }
+}

ai-comic-factory/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

ai-comic-factory/public/favicon/index.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<head>
+    <title>
+        Favicons
+    </title>
+    <meta charset="utf-8" />
+    
+    <!-- For old IEs -->
+    <link rel="shortcut icon" href="favicon.ico" />
+    
+    <!-- For new browsers multisize ico  -->
+    <link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="favicon.ico">
+        
+        <!-- Chrome for Android -->
+        <link rel="icon" sizes="192x192" href="favicon-192.png">
+            
+            <!-- For iPhone 6+ downscaled for other devices -->
+            <link rel="apple-touch-icon" sizes="180x180" href="favicon-180-precomposed.png">
+                
+                <!-- For IE10 Metro -->
+                <meta name="msapplication-TileColor" content="#FFFFFF">
+                    <meta name="msapplication-TileImage" content="favicon-114-precomposed.png">
+                        
+                        <style>
+                            
+                            body {
+                                background-color: #f5f5f5;
+                                border: 0px;
+                                margin: 0px;
+                                padding: 0px;
+                                font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
+                                color: black;
+                            }
+                        
+                        pre {
+                            margin: 0px;
+                            color: black;
+                            padding: 0px 5%;
+                        }
+                        
+                        code {
+                            
+                        }
+                        
+                        .container {
+                            background-color: white;
+                            max-width: 800px;
+                            width: 100%;
+                            margin: 0 auto;
+                            padding: 1% 0;
+                            height: 100%;
+                        }
+                        
+                        .comment {
+                            color: gray;
+                            padding: 0px;
+                            margin: 0px;
+                        }
+                        
+                        hr {
+                            width: 80%;
+                            padding: 0 5%;
+                            border-color: #f5f5f5;
+                            background-color: #D1D1D1;
+                        }
+                        
+                        p {
+                            padding: 1% 5%;
+                        }
+                        
+                            </style>
+                        
+                        </head>
+<body class="">
+    
+    <div class="container">
+        <p>
+        To use the favicons insert into your  head section some of these tags accordly to your needs.
+        </p>
+        <hr>
+        <pre>
+            <code>
+                <span class="comment">&lt;!-- For old IEs --&gt;</span>
+                &lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot; /&gt;
+                
+                <span class="comment">&lt;!-- For new browsers - multisize ico  --&gt;</span>
+                &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; sizes=&quot;16x16 32x32&quot; href=&quot;favicon.ico&quot;&gt;
+                
+                <span class="comment">&lt;!-- For iPad with high-resolution Retina display running iOS &ge; 7: --&gt;</span>
+                &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;152x152&quot; href=&quot;favicon-152-precomposed.png&quot;&gt;
+                
+                <span class="comment">&lt;!-- For iPad with high-resolution Retina display running iOS &le; 6: --&gt;</span>
+                &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;144x144&quot; href=&quot;favicon-144-precomposed.png&quot;&gt;
+                
+                <span class="comment">&lt;!-- For iPhone with high-resolution Retina display running iOS &ge; 7: --&gt;</span>
+                &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;120x120&quot; href=&quot;favicon-120-precomposed.png&quot;&gt;
+                
+                <span class="comment">&lt;!-- For iPhone with high-resolution Retina display running iOS &le; 6: --&gt;</span>
+                &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;114x114&quot; href=&quot;favicon-114-precomposed.png&quot;&gt;
+                
+                <span class="comment">&lt;!-- For iPhone 6+ --&gt;</span>
+                &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;favicon-180-precomposed.png&quot;&gt;
+                
+                <span class="comment">&lt;!-- For first- and second-generation iPad: --&gt;</span>
+                &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;72x72&quot; href=&quot;favicon-72-precomposed.png&quot;&gt;
+                
+                <span class="comment">&lt;!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;</span>
+                &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;57x57&quot; href=&quot;favicon-57.png&quot;&gt;
+                
+                <span class="comment">&lt;!-- For Old Chrome --&gt;</span>
+                &lt;link rel=&quot;icon&quot; sizes=&quot;32x32&quot; href=&quot;favicon-32.png&quot; &gt;
+                
+                <span class="comment">&lt;!-- For IE10 Metro --&gt;</span>
+                &lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#FFFFFF&quot;&gt;
+                &lt;meta name=&quot;msapplication-TileImage&quot; content=&quot;favicon-144.png&quot;&gt;
+                &lt;meta name=&quot;theme-color&quot; content=&quot;#ffffff&quot;&gt;
+                
+                <span class="comment">&lt;!-- Chrome for Android --&gt;</span>
+                &lt;link rel=&quot;manifest&quot; href=&quot;manifest.json&quot;&gt;
+                &lt;link rel=&quot;icon&quot; sizes=&quot;192x192&quot; href=&quot;favicon-192.png&quot;&gt;
+                
+            </code>
+        </pre>
+        
+        <hr>
+        
+        <p>
+        For more informations about favicons consult <a href="https://github.com/audreyr/favicon-cheat-sheet">The Favicon Cheat Sheet</a> by Audrey Roy.
+        </p>
+        
+    </div>
+    
+</body>

ai-comic-factory/public/favicon/manifest.json

@@ -0,0 +1,41 @@
+{
+	"name": "pollo",
+	"icons": [
+		{
+			"src": "\/favicon-36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": 0.75
+		},
+		{
+			"src": "\/favicon-48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": 1
+		},
+		{
+			"src": "\/favicon-72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": 1.5
+		},
+		{
+			"src": "\/favicon-96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": 2
+		},
+		{
+			"src": "\/favicon-144.png",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": 3
+		},
+		{
+			"src": "\/favicon-192.png",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": 4
+		}
+	]
+}

ai-comic-factory/src/app/engine/caption.ts

@@ -0,0 +1,54 @@
+"use server"
+
+import { ImageAnalysisRequest, ImageAnalysisResponse } from "@/types"
+
+const apiUrl = `${process.env.RENDERING_VIDEOCHAIN_API_URL || ""}`
+
+export async function see({
+  prompt,
+  imageBase64
+}: {
+  prompt: string
+  imageBase64: string
+}): Promise<string> {
+  if (!prompt) {
+    console.error(`cannot call the API without an image, aborting..`)
+    throw new Error(`cannot call the API without an image, aborting..`)
+  }
+
+  try {
+    const request = {
+      prompt,
+      image: imageBase64
+
+    } as ImageAnalysisRequest
+
+    console.log(`calling ${apiUrl}/analyze called with: `, {
+      prompt: request.prompt,
+      image: request.image.slice(0, 20)
+    })
+
+    const res = await fetch(`${apiUrl}/analyze`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        // Authorization: `Bearer ${videochainApi}`,
+      },
+      body: JSON.stringify(request),
+      cache: 'no-store',
+    // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+    // next: { revalidate: 1 }
+    })
+
+    if (res.status !== 200) {
+      throw new Error('Failed to fetch data')
+    }
+
+    const response = (await res.json()) as ImageAnalysisResponse
+    return response.result
+  } catch (err) {
+    console.error(err)
+    return ""
+  }
+}

ai-comic-factory/src/app/engine/censorship.ts

@@ -0,0 +1,184 @@
+
+// I don't want to be banned by Replicate because bad actors are asking
+// for some naked anime stuff or whatever
+// I also want to avoid a PR scandal due to some bad user generated content
+
+import { computeSecretFingerprint } from "@/lib/computeSecretFingerprint"
+
+// those keywords have been generated by looking at the logs of the panorama and the AI Comic Factory
+// those are real requests some users tried to attempt.. :|
+
+const chickens = [
+  "fcb4dacbd99b21368c50f29c1d47071c87cf2225ab9192282c785460391cd365",
+  "68840b60ac27eacaa7afe17e898d3c4a2dc71acff8c74d6782c1bcaafd14963d",
+  "67f745224fd6e1a7a3a244514d5807fcc994cbb62ca4ec8fa44cd14244a515ae",
+  "681fea565117808c6dbe002520d2cfeeb3e5c67e68630afb4a453449a9da587b",
+  "2f3d913b3db9e15a930aac43eb2d6fe8817db8e4bcf37794bf0227b06b718d1b",
+  "922a700b807e4994df82eba2b48a6ac131fe8d8d1035d06b3592d622fb232161",
+  "cb69ee6774eafcc720adb1f689d28acbb9f47998cbea0299ec66a58dedf91c37"
+]
+
+const ducks = [
+  "1c52cb20c0cbc76349fa63232b982bd394cf0850ebc17240dcf33c19fb15a26d",
+  "e1d4de9b8d464d7da07c276b63a42c1c9922224f0a6cab6b0826427ce4a7461a",
+  "0be3174bfb1a48a65875c2f035b1ae14fbc8f232f55785018de0cfe2132fa952",
+  "0f174769641b2e5d2c79b5a83e8ef91e004f6f3e62531cd70cfdff02159268cb",
+  "e9fb8ae8ff720acd91025229478a21e43e8e976e30119a76c293201adf572736",
+  "f65a0dc0e07b5d084ff24c69dcdb953f7b57101d2ebb716d4dfb5963076ef807",
+  "2bf38af1646489c2c086f811d082054cd29e23fa7bb5c525396bec01b3ab688e"
+]
+
+const cats = [
+  "fcffc3e997d952007d1b902a9cf40b750ba4a410ac65bfd95475996bf51359e4",
+  "3172a5fa159754d703489dfba5af520b8ace107cdf170f4c4cb38a6797aa163f",
+  "500012dbff4498a9c4513369d6b9b373fab9330ffd2cb1e622294043cc21b610",
+  "84e3a8d34ee7d0c8e7a2926dd1acad46a0b66b9d27725b3a7e5053550f490301"
+]
+
+const roasted = [
+  "a2bfbce0046c9a52a0eabf98f73e0f8e09959970431fc892ebdb4e1c97031b50",
+  "6eca1adf06851f99e9cdfbb496c27d46ff81106903d11f3346a146e96082b016",
+  "49a124c9ed6fbbad4105b3657dc25de369bcafb9d6787f610c08f584cd607d0f",
+  "c3afb59420c812cbc7c8f57ad3e8d79407f10106a99f829aa65316c99d0b29c4",
+  "2b808858836a5c205080f5b93201ef92e098cff931d8de6d9f20dc722997d077",
+  "07bef89d1a7d63c9c5ed64ba0f73d6cff689811847c2e20c8b3fbfb060e1d64e",
+  "baeb994922d5473f534aa54322d83effe74c6c4dac807e6b523a677d7acdc17b",
+  "ea4735a879edd5cc94ca7db26edd5a970df69a41f0009d3444486647e44175af",
+  "f2412249030454cd13ac6f7965871d924c16daacda0123de81892adb19ce49ac",
+  "9958c56e12bab8549cf752bcd8bec4ac36cf79c404b1faf5611f057bb71bc0e1",
+  "76cdade0b3d4caf0888f60318a5cbca00f830a3b0bf37735fc64fdaeb67c34d3",
+  "1bf53c97869e1ea89bda19da64a9173d48fe4ec823e949e2c898f8abb3fbf457",
+  "1bf53c97869e1ea89bda19da64a9173d48fe4ec823e949e2c898f8abb3fbf457",
+  "3d7f973fab8f4a19c0a3e59efe970ed7bd55a1cb795752d9cbe3c19e8a7d81ec"
+]
+
+const banned = [
+  "8a05d4869d9d6ce388c6cd2db13ca12b88097b90f9be027d5ffaaa467c7a6e5e",
+  "0c475212a608138244c5fc150b1563e5ef79c516234fd78dcd5993f726c359a0",
+  "df17388805f99f2ff3e5ae97a0f55e5c927eb47f17ca65822bf8c88f02bac3dd",
+  "86c3355d1bd581cdf7306729d8dd0ee9b7a317b9cfd6d7a6f5fad9c0dafe2167",
+  "23a2484cd420c9ffbfcc2c0075a9b330664450ced1fc64ab6a65e278086b8c6e",
+  "fb4cabe709b62eea1b4cc0030c76f5e4a43ee677ce19124e8e7bafa86c78ab66",
+  "d99c26daee85f7dc81c46c061a5874cff7179ed72d884d2316d664d36ffe7ab5",
+  "b93c38af5aa221d76c60ee3eb762efee0cdb0daf29ceb235b7dda6d46c06490d",
+  "8cf6c8765dc757319461dd9a785e77c201b8e5a604d36b817cd987c6a5e62500",
+  "f4a1cb290745717f86c3cee30fc324c0d80a9945fcbc7bbeb010579f58792f1e",
+  "7c87c47c42fc983119551342be9ddd5b32e530c0504ccdbbaa1e12b1d9f1bbcb",
+  "d04fad4f21d030da7a1301afbf480ef6246eb7bbf0f26e31865b2e015a25f747",
+  "d685ff22fb9da01ee949db212770729603989850864ef7a7085e1f086cfa7deb",
+  "533b90588d9ccf7967da54691f575e9fd4926c6e0b5fd94a47b932bcea270bee",
+  "9c2d61f28f5bb7f3f1dc9122be64cda8a428b46ce68b70120da4c41dba96ba4c",
+  "5d4b1a3eebe64dfa631d0e3b084bd96ee9364c3669269f838ca17a4900276264",
+  "d56f56413b9679fc0820a2c0237224ded8554c61fab8959c174123c8b68ba029",
+  "323a9ab60739726070d615ff3a05d7ff6bb6e3c4dd9ff16ce24f253ecd7b8851",
+  "975c6739de7d4999db15972f707f5f4e95649275f1c0c48e895b8c537e8638ec",
+  "67ee26eb9e1c1c7124797321b02bca90a19c18171782917cd4a487b722484dce",
+  "6df5aa7b72a4e6e3fb726489ff1437daa5752047507f4da912680b1d6647c7d6",
+  "b0864805364359e8c5810c233b1bf2c74dedce9055ae5f7680ba05b4e39db8e2",
+  "a8f841472ecffdd6266151148320c8e36847a24ead9d3338e0313b075c16649d",
+  "f9b127cd90e85b0ff68dd220361671663f0154b2b827f1f7ea797b020ca0018c",
+  "d5c20e9a1ecf01c82da24c514d867498b3e5f522adc1523ce29404a6563641d5",
+  "241022b49d7c0aba24a61eea1137a804f36e4bcb47af42950275baac9b4e7aac",
+  "fc99a70e17b6c86ef1b537654b0f50353567a7b59912c3ba955f3fca4d1ea696",
+  "255306e968009003d295cb2a7256f27bfcdb5d1743bf4d9f2aa4b8adf1a7734d",
+  "048c7b709763dd9c43794d241c369f0abcb079d546ddcbbba9968a1ed1da7ed7",
+  "520cbfeef3e4c405d79478eedccb97a4d476be585626dd2b1c53292797491bc7",
+  "f9f28a7ae7e8b1719b350a04dc087a4b8e33478d109ceeef6ba892b32d1105c9",
+  "d177f1bfe603647ef4c1c0e6f1a7172081fb9bbc2ea859705949f2c5aa5d4f22",
+  "302feef2c09247fbd23789581f7f5e2219f88ae0a937880954938573c2a52a84",
+  "99edd6f57b864873835f16f19c805dd94bed9da8967b84e3a62782f106d9ebcc",
+  "e75e5f01dcd8351c9553e89558085bd68e6feb295dee5d8da0c9b43ee303ce36",
+  "135e52a026aea9d2e12de358a85e05cf21121a18269269b7c62678c3bc846f5b",
+  "28e5b2d3eb5f1ef4cc7b570878b03acf303a6ca4ca95893591e0fb943b0beab0",
+  "a26b26340f8d0363633490556d20bcc250726d10e1431eb8c22d6b1ff3f2b14a",
+  "27e4ddde96ec6a1dbe1cf12d79448b3e72f144944c15b299629542d1b65fbabf",
+  "efd9c0a391ee93251046a58326d1b21b33fe21d71a3fb1855b9048ade53df77c",
+  "6d505fcce416c26a606878aab4d249a034ba2a9846cb1f883e0f9e3fb76ba6da",
+  "3a37b8a1b72f9bca51233536d50f9c8d33a787434684787871e0049c82347cda",
+  "16f9b451184a7c3148344c7d0315f5312ca20553d2271912ecaad91810d977e6",
+  "7406537eb74d1885bd05e191228de313b13702a64d90ae1736c6377b25ab579a",
+  "7e4d1395ae18980015cab16c85ffa20b4cb90a2db594126e893d0f7ac6eecaa8",
+  "ba813ee6c25698f0f68a07121d38bb47c9aa404c1ab0a6e767595cb75e1747b8",
+  "6586c93f3ece83e01ecc1eb84a7711e7975826a388d478a009468ea0ed9dc03e",
+  "8960174c74d86e03ae88fb6774580170e49952f2286d960be08c556bbd0dda95",
+  "4d611454369aa1a4e2b7eed1734fac5d480f08fb86b87a162967e416370f2a8e",
+  "59d48440f85eabf565fe8d3bc6b973ba64c70df3b36b0511e0e67ceca91762b3",
+  "cd926926e2af74e43d1a6a420a7e1933b78662320477a3c018b2711d8765e339",
+  "80e90057df6a59823f51aafac36ed5bc4e5ac26d675d9c1467501590c82f12d4",
+  "a9cf28b869b70e258adde5639a048f866ec86f8f3f3d53bfc960b86aa6da9239",
+  "cc2adbf8ac0cddeefa304d7b20f14a7e047a4b2299cc5e8f898f5c59660bd964",
+  "92a150a46146e9d3f84899cf15e12514af684e7ee18d7add782ddd4f4a15ef18",
+  "d9b2e84ef6dc0ce449357d52c9095f69b173a1b848ea2921199d33b0ec10024a",
+  "a9329a7e4d367a0135c1ca86c6ce5ecabcc26529235229d71b6bf991f7689e21",
+  "8f160c6fd8ccc3fb2a371a4b52748f0bd030766627c4322e2911fe82f6b10497",
+  "620e96eae4f3e88cbe0770292b33724c5df3866d83f39df6380441f7271c80e2",
+  "cafa3481fa3c45ed1e55cd0129c12b477eeab5aa3d6da20cae6d6292f19b0e6d",
+  "be07994e9a83aa3689e79b6e96123676ccc4fa29f523c28c750c6d60505531ee",
+  "f6498069768cd3aa79b2b0c91879694f05a259c8ee4a6bb343f0435f74eb1b53",
+  "c9b6b26cb3a694eb78fcac0a14ad18d46d50907186a9add41022d31d191b2b65"
+]
+
+const young = [
+  "ffdf66787b4a33b78b18c18822e334cfe2c8406caf442851deef451bd43140a1",
+  "858f22219afc4b32a7ba9a27a213d7f495e77c3cceed8147eae5282bf3e23d39",
+  "8c3c46df84ace3d58d4ce0fbc513017986b33c6002ae369d9f7dd1f892a898cb",
+  "66caa22b9483fdf026ce67de61067d81535a7c9b3169cbc5c2a455ac8dcc7bec",
+  "76893047b1eff9fadc7be07b13adb5aaed9c73bcdeea46ee07098605e2c7ff76",
+  "526cb848754e2baaa17376a5693d90ba3f69f71fd2a866f22876ac8a075849a7",
+  "f59c38e31d0f64dc1bfcdf34451723bc1a65570e209e5496c8d1d7f6d3d649db",
+  "e013a67e275c62c1402ccbbb11ad14afb8b8a82318a44c07d67599ed5ac874de",
+  "3bef34219fb07f867ecbff4d6748f598d6cc0761e17dd0d431ee1f4ec3281374",
+  "8211bf5f613fac06cd5d074d34c16dfacc9367c8afaa6ad3aff99d145e5221be"
+]
+
+const getFingerprint = (word: string) => {
+  return computeSecretFingerprint(
+    word.toLocaleLowerCase().replaceAll(/[^a-zA-Z0-9]/gi, "")
+    )
+}
+
+const encode = (list: string[]) => {
+  console.log(JSON.stringify(
+    list.sort((a, b) => (b.length - a.length))
+    .map(item => getFingerprint(item)), null, 2))
+}
+
+// encode([ "badword" ])
+
+export const filterOutBadWords = (sentence: string) => {
+  if (process.env.ENABLE_CENSORSHIP !== "true") { return sentence }
+
+  let requireCensorship = false
+
+  const words = sentence.replaceAll(/[^a-zA-Z0-9]/gi, " ").replaceAll(/\s+/gi, " ").trim().split(" ")
+  
+  const sanitized = words.map(word => {
+    const fingerprint = getFingerprint(word)
+  
+    let result: string = word
+    // some users want to play it smart and bypass our system so let's play too
+    if (chickens.includes(fingerprint)) {
+      result = "large chicken"
+    } else if (ducks.includes(fingerprint)) {
+      result = "big duck"
+    } else if (cats.includes(fingerprint)) {
+      result = "cat"
+    } else if (roasted.includes(fingerprint)) {
+      result = "roasted chicken"
+    } else if (young.includes(fingerprint)) {
+      result = "adult"
+    } else if (banned.includes(fingerprint)) {
+      result = "_BANNED_"
+    }
+
+    if (result !== word) {
+      requireCensorship = true
+    }
+    return result
+  }).filter(item => item !== "_BANNED_").join(" ")
+
+  // if the user didn't try to use a bad word, we leave it untouched 
+  // he words array has been degraded by the replace operation, but it removes commas etc which isn't great
+  // so if the request was genuine and SFW, it's best to return the original prompt
+  return requireCensorship ? sanitized : sentence
+}