config

Dockerfile

@@ -0,0 +1,59 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# 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
+
+# Create .env.local if environment variables are provided
+RUN touch .env.local
+RUN if [ -n "$GEMINI_API_KEY" ]; then \
+    echo "GEMINI_API_KEY=$GEMINI_API_KEY" >> .env.local; \
+    fi
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.env.local ./.env.local
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"] 

README.md

@@ -1,3 +1,16 @@
+---
+title: HandSpew
+emoji: 👋
+colorFrom: green
+colorTo: blue
+sdk: docker
+sdk_version: 3.0.0
+app_port: 3000
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
 # HandSpew
 
 HandSpew is a simple web application that uses MediaPipe for hand landmark detection and Gemini 2.0 Flash for generating thoughts based on hand gestures. When you open your hand like a puppet mouth (thumb not touching other fingers), the app generates a thought related to what the camera sees.
@@ -59,7 +72,7 @@ npm run dev
 
 1. Create a new Space on Hugging Face
 2. Connect your GitHub repository
-3. Add your Gemini API key as a secret in the Space settings
+3. Add your Gemini API key as a secret in the Space settings with the name `GEMINI_API_KEY`
 4. Deploy the app
 
 ## Technologies Used

next.config.mjs

@@ -1,8 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  env: {
-    GEMINI_API_KEY: process.env.GEMINI_API_KEY,
+  output: 'standalone',
+  images: {
+    domains: ['localhost'],
+    unoptimized: true,
   },
 };