Fix Dockerfile and ensure package-lock.json is present for Hugging Face Spaces deployment

Dockerfile

@@ -1,5 +1,4 @@
-# Use Node.js 20 Alpine as base image
-FROM node:20-alpine AS base
+FROM node:18-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps
@@ -8,9 +7,8 @@ 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 --only=production && \
-    npm ci --only=development
+COPY package.json package-lock.json ./
+RUN npm ci
 
 # Rebuild the source code only when needed
 FROM base AS builder
@@ -21,9 +19,8 @@ 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
+# ENV NEXT_TELEMETRY_DISABLED 1
 
-# Build the Next.js application
 RUN npm run build
 
 # Production image, copy all the files and run next
@@ -32,30 +29,29 @@ WORKDIR /app
 
 ENV NODE_ENV production
 # Uncomment the following line in case you want to disable telemetry during runtime.
-ENV NEXT_TELEMETRY_DISABLED 1
+# ENV NEXT_TELEMETRY_DISABLED 1
 
-# Create a non-root user
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-# Copy built application
 COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next/standalone ./
-COPY --from=builder /app/.next/static ./.next/static
 
 # Set the correct permission for prerender cache
-RUN mkdir -p .next
+RUN mkdir .next
 RUN chown nextjs:nodejs .next
 
-# Switch to the non-root user
+# 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
+
 USER nextjs
 
-# Expose port 7860 (Hugging Face Spaces default)
 EXPOSE 7860
 
-# Set environment variable for the port
 ENV PORT 7860
 ENV HOSTNAME "0.0.0.0"
 
-# Start the application
-CMD ["node", "server.js"]
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]

components/HuggingFaceQRGenerator.tsx

@@ -24,17 +24,17 @@ const HuggingFaceQRGenerator = () => {
   const [showQR, setShowQR] = useState(false);
   const [gradientIndex, setGradientIndex] = useState(0);
   const [showColorPicker, setShowColorPicker] = useState(false);
-  const [customColor, setCustomColor] = useState<string | null>(null);
+  const [customColor, setCustomColor] = useState<string | null>('#f59e0b');
   
   const gradients = [
-    { name: 'Sunset Orange', colors: ['#f1c40f', '#f39c12'], type: 'gradient' },
-    { name: 'Ocean Blue', colors: ['#60a5fa', '#3b82f6'], type: 'gradient' },
-    { name: 'Emerald Green', colors: ['#34d399', '#10b981'], type: 'gradient' },
-    { name: 'Purple Dream', colors: ['#a78bfa', '#7c3aed'], type: 'gradient' },
-    { name: 'Rose Pink', colors: ['#fb7185', '#f472b6'], type: 'gradient' },
-    { name: 'Amber Gold', colors: ['#fbbf24', '#f59e0b'], type: 'gradient' },
-    { name: 'Teal Breeze', colors: ['#2dd4bf', '#14b8a6'], type: 'gradient' },
-    { name: 'Indigo Night', colors: ['#6366f1', '#4f46e5'], type: 'gradient' },
+    { name: 'Sunset', colors: ['#f59e0b', '#f43f5e'], type: 'gradient' },           // orange → rose
+    { name: 'Aqua Blue', colors: ['#06b6d4', '#3b82f6'], type: 'gradient' },        // cyan → blue
+    { name: 'Purple Orange', colors: ['#8b5cf6', '#f59e0b'], type: 'gradient' },    // purple → orange
+    { name: 'Emerald Gold', colors: ['#10b981', '#fbbf24'], type: 'gradient' },     // green → amber
+    { name: 'Indigo Pink', colors: ['#4f46e5', '#ec4899'], type: 'gradient' },      // indigo → pink
+    { name: 'Teal Violet', colors: ['#14b8a6', '#7c3aed'], type: 'gradient' },      // teal → violet
+    { name: 'Sky Purple', colors: ['#38bdf8', '#a78bfa'], type: 'gradient' },       // sky → purple
+    { name: 'Slate Blue', colors: ['#64748b', '#3b82f6'], type: 'gradient' },       // slate → blue
   ];
   
   const solidColors = [
@@ -140,7 +140,7 @@ const HuggingFaceQRGenerator = () => {
           pixelRatio: 2,
           width: Math.ceil(rect.width),
           height: Math.ceil(rect.height),
-          style: { margin: '0' }
+          style: { margin: '0' },
         });
         const response = await fetch(dataUrl);
         const blob = await response.blob();
@@ -234,7 +234,7 @@ const HuggingFaceQRGenerator = () => {
         pixelRatio: 2,
         width: Math.ceil(rect.width),
         height: Math.ceil(rect.height),
-        style: { margin: '0' }
+        style: { margin: '0' },
       });
 
       // Convert data URL to blob
@@ -362,7 +362,7 @@ const HuggingFaceQRGenerator = () => {
               <div className="qr-card-v2" id="qr-card" ref={cardRef} onClick={(e) => e.stopPropagation()}>
                 <div className="qr-avatar-wrap">
                   <img
-                    src={profileData.avatarUrl}
+                    src={profileData.originalAvatarUrl || profileData.avatarUrl}
                     alt={profileData.fullName}
                     className="qr-avatar"
                     crossOrigin="anonymous"