Add HF Space configuration

- Add YAML frontmatter to README.md for Space config
- Add Dockerfile for container deployment
- Enable standalone output in next.config.ts
- Specify docker SDK in Space metadata

Dockerfile

@@ -0,0 +1,50 @@
+# Use Node.js 20 LTS as base image
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+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
+ENV NEXT_TELEMETRY_DISABLED=1
+
+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
+
+# Set the correct permission for prerender cache
+mkdir .next
+chown nextjs:nodejs .next
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 7860
+
+ENV PORT=7860
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -1,3 +1,14 @@
+---
+title: Kernel Convolution Visualizer
+emoji: 🔍
+colorFrom: blue
+colorTo: purple
+sdk: docker
+sdk_version: "latest"
+app_file: Dockerfile
+pinned: false
+---
+
 # Interactive Kernel Convolution Visualizer
 
 An educational web application that demonstrates how image convolution works in real-time. Upload any image, choose from predefined kernels or create your own, and watch the convolution process step-by-step with detailed mathematical visualization.

next.config.ts

@@ -1,8 +1,10 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  // Disable Turbopack for now due to webpack config
-  turbopack: {},
+  // Configure Turbopack root to avoid parent directory conflicts
+  turbopack: {
+    root: __dirname,
+  },
   // Enable experimental features for better performance
   experimental: {
     optimizePackageImports: ['lucide-react'],
@@ -16,6 +18,8 @@ const nextConfig: NextConfig = {
       },
     ],
   },
+  // Enable standalone output for Docker
+  output: 'standalone',
 };
 
 export default nextConfig;