Upload 255 files

.env

@@ -0,0 +1,114 @@
+# Supported values:
+# - VIDEOCHAIN
+# - REPLICATE
+# - INFERENCE_ENDPOINT
+# - INFERENCE_API
+# - OPENAI
+RENDERING_ENGINE="INFERENCE_API"
+
+# Supported values:
+# - INFERENCE_ENDPOINT
+# - INFERENCE_API
+# - OPENAI
+# - GROQ
+# - ANTHROPIC
+LLM_ENGINE="INFERENCE_API"
+
+# set this to control the number of pages
+MAX_NB_PAGES=6
+
+# Set to "true" to create artificial delays and smooth out traffic
+NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
+
+# ------------- HUGGING FACE OAUTH -------------
+ENABLE_HUGGING_FACE_OAUTH=
+ENABLE_HUGGING_FACE_OAUTH_WALL=
+HUGGING_FACE_OAUTH_CLIENT_ID=
+
+# in production this should be the space's domain and/or URL
+HUGGING_FACE_OAUTH_REDIRECT_URL=
+
+# this one must be kept secret (and is unused for now)
+HUGGING_FACE_OAUTH_SECRET=
+
+# ------------- PROVIDER AUTH ------------
+# You only need to configure the access token(s) for the provider(s) you want to use
+
+# HuggingFace.co token: available for the LLM engine and the RENDERING engine
+AUTH_HF_API_TOKEN=
+
+# Replicate.com token: available for the RENDERING engine
+AUTH_REPLICATE_API_TOKEN=
+
+# OpenAI.dom token: available for the LLM engine and the RENDERING engine
+AUTH_OPENAI_API_KEY=
+
+# An experimental RENDERING engine (sorry it is not very documented yet, so you can use one of the other engines)
+AUTH_VIDEOCHAIN_API_TOKEN=
+
+# Groq.com key: available for the LLM engine
+AUTH_GROQ_API_KEY=
+
+# Anthropic.com key: available for the LLM engine
+AUTH_ANTHROPIC_API_KEY=
+
+# ------------- RENDERING API CONFIG --------------
+
+# If you decide to use Replicate for the RENDERING engine
+RENDERING_REPLICATE_API_MODEL="stabilityai/sdxl"
+RENDERING_REPLICATE_API_MODEL_VERSION="da77bc59ee60423279fd632efb4795ab731d9e3ca9705ef3341091fb989b7eaf"
+
+# If you decide to use a private Hugging Face Inference Endpoint for the RENDERING engine
+RENDERING_HF_INFERENCE_ENDPOINT_URL="https://XXXXXXXXXX.endpoints.huggingface.cloud"
+
+# If you decide to use a Hugging Face Inference API model for the RENDERING engine
+RENDERING_HF_INFERENCE_API_BASE_MODEL="stabilityai/stable-diffusion-xl-base-1.0"
+
+# If you decide to use a Hugging Face Inference API model for the RENDERING engine
+RENDERING_HF_INFERENCE_API_REFINER_MODEL="stabilityai/stable-diffusion-xl-refiner-1.0"
+
+# If your model returns a different file type (eg. jpg or webp) change it here
+RENDERING_HF_INFERENCE_API_FILE_TYPE="image/png"
+
+# An experimental RENDERING engine (sorry it is not very documented yet, so you can use one of the other engines)
+RENDERING_VIDEOCHAIN_API_URL="http://localhost:7860"
+
+RENDERING_OPENAI_API_BASE_URL="https://api.openai.com/v1"
+RENDERING_OPENAI_API_MODEL="dall-e-3"
+
+# ------------- LLM API CONFIG ----------------
+
+LLM_GROQ_API_MODEL="mixtral-8x7b-32768"
+
+# If you decide to use OpenAI for the LLM engine
+LLM_OPENAI_API_BASE_URL="https://api.openai.com/v1"
+LLM_OPENAI_API_MODEL="gpt-4-turbo"
+
+# If you decide to use Anthropic (eg. Claude) for the LLM engine
+# https://docs.anthropic.com/claude/docs/models-overview
+LLM_ANTHROPIC_API_MODEL="claude-3-opus-20240229"
+
+# If you decide to use a private Hugging Face Inference Endpoint for the LLM engine
+LLM_HF_INFERENCE_ENDPOINT_URL=""
+
+# If you decide to use a Hugging Face Inference API model for the LLM engine
+# LLM_HF_INFERENCE_API_MODEL="HuggingFaceH4/zephyr-7b-beta"
+LLM_HF_INFERENCE_API_MODEL="HuggingFaceH4/zephyr-7b-beta"
+
+# ----------- COMMUNITY SHARING (OPTIONAL) -----------
+# You don't need those community sharing options to run the AI Comic Factory
+# locally or on your own server (they are meant to be used by the Hugging Face team)
+NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING="false"
+COMMUNITY_API_URL=
+COMMUNITY_API_TOKEN=
+COMMUNITY_API_ID=
+
+# ----------- CENSORSHIP (OPTIONAL) -----------
+# censorship is currently disabled, but will be required when we create a "community roll"
+# (a public repositoruy of user-generated comic strips)
+ENABLE_CENSORSHIP="false"
+
+# Due to the sensitive nature of some of keywords we want to ban (users try all kind of crazy illegal things)
+# the words are are not put in clear in the source code, but behind an encryption key
+# (I don't want the project to be flagged by an AI robot police on GitHub or something)
+SECRET_FINGERPRINT=""

.eslintrc.json

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

.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

.nvmrc

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

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
+

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"]

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_

README.md

@@ -1,12 +1,192 @@
 ---
-title: Comic Test
-emoji: 🏢
-colorFrom: purple
-colorTo: pink
-sdk: gradio
-sdk_version: 5.1.0
-app_file: app.py
-pinned: false
+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]
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 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.

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"
+  }
+}

next.config.js

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

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"
+  }
+}

postcss.config.js

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

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>

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
+		}
+	]
+}

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 ""
+  }
+}