feat: add docker file to deploy to hf (#37)

Dockerfile

@@ -0,0 +1,49 @@
+FROM node:20 AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+FROM base AS deps
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm i --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps --link /app/node_modules ./node_modules
+COPY --link  . .
+
+RUN --mount=type=secret,id=AUTH_SECRET \
+--mount=type=secret,id=OPENAI_API_KEY \
+AUTH_SECRET="$(cat /run/secrets/AUTH_SECRET)" \ 
+OPENAI_API_KEY="$(cat /run/secrets/OPENAI_API_KEY)" \
+NEXT_SHARP_PATH="/app/node_modules/sharp" \
+USE_STANDALONE_BUILD=True \
+pnpm run build
+
+RUN mkdir -p /app/.next/cache/images
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+COPY --from=builder --link /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --chown=nextjs:nodejs --from=builder /app/ ./
+COPY --from=builder --link --chown=1000:1000 /app/.next/standalone ./
+COPY --from=builder --link --chown=1000:1000 /app/.next/static ./.next/static
+COPY --from=builder --link --chown=1000:1000 /app/.next/cache/images ./.next/cache/images
+
+USER nextjs
+
+EXPOSE 7860
+
+ENV PORT 7860
+ENV HOSTNAME 0.0.0.0
+
+CMD ["node", "server.js"]

README.md

@@ -1,3 +1,12 @@
+---
+title: Vision Agent
+emoji: 🏃
+colorFrom: yellow
+colorTo: indigo
+sdk: docker
+pinned: false
+---
+
 <a href="https://chat.vercel.ai/">
   <img alt="Next.js 14 and App Router-ready AI chatbot." src="https://chat.vercel.ai/opengraph-image.png">
   <h1 align="center">Next.js AI Chatbot</h1>

app/layout.tsx

@@ -51,7 +51,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
           disableTransitionOnChange
         >
           <div className="flex flex-col min-h-screen">
-            <Header />
+            {!process.env.NEXT_PUBLIC_IS_HUGGING_FACE && <Header />}
             <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
           </div>
           <TailwindIndicator />

components/chat/ChatList.tsx

@@ -22,13 +22,23 @@ export function ChatList({ messages, session }: ChatList) {
               <IconExclamationTriangle />
             </div>
             <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
-              <p className="text-muted-foreground leading-normal">
-                Please{' '}
-                <Link href="/sign-in" className="underline">
-                  log in
-                </Link>{' '}
-                to save and revisit your chat history!
-              </p>
+              {!process.env.NEXT_PUBLIC_IS_HUGGING_FACE ? (
+                <p className="text-muted-foreground leading-normal">
+                  Please visit and login into{' '}
+                  <Link href="https://va.landing.ai/" className="underline">
+                    our landing website
+                  </Link>{' '}
+                  to save and revisit your chat history!
+                </p>
+              ) : (
+                <p className="text-muted-foreground leading-normal">
+                  Please{' '}
+                  <Link href="/sign-in" className="underline">
+                    log in
+                  </Link>{' '}
+                  to save and revisit your chat history!
+                </p>
+              )}
             </div>
           </div>
           <Separator className="my-4" />

components/ui/Img.tsx

@@ -39,6 +39,10 @@ const Img = React.forwardRef<
     generateThumbnail();
   }, [isVideo, src]);
 
+  if (isVideo && !thumbnail) {
+    return null;
+  }
+
   return (
     <Image
       src={isVideo ? thumbnail : src}

next.config.js

@@ -12,4 +12,5 @@ module.exports = {
   experimental: {
     serverComponentsExternalPackages: ['pino', 'pino-loki'],
   },
+  ...(process.env.USE_STANDALONE_BUILD ? { output: 'standalone' } : {}),
 };