[dyad] Fixing Hugging Face secret handling - wrote 2 file(s)

Dockerfile

@@ -1,12 +1,7 @@
-# Stage 1: Build the application
 # Use a specific Node.js version for consistency
-FROM node:20-alpine AS builder
-
-# Explicitly declare the build argument we expect from Hugging Face secrets
-ARG VITE_GEMINI_API_KEY
-# Set it as an environment variable for the build process
-ENV VITE_GEMINI_API_KEY=$VITE_GEMINI_API_KEY
+FROM node:20-alpine
 
+# Set the working directory inside the container
 WORKDIR /app
 
 # Copy package files and install dependencies
@@ -16,28 +11,23 @@ RUN npm install
 # Copy the rest of the application source code
 COPY . .
 
-# Build the application. 
-# Vite will now replace import.meta.env.VITE_GEMINI_API_KEY with the value
-# of the environment variable we just set.
-RUN npm run build
-
-# Stage 2: Serve the application
-# Use a slim Node.js image for a smaller final image size
-FROM node:20-alpine
-WORKDIR /app
+# Hugging Face automatically provides secrets as build arguments.
+# We need to ensure Vite can access it during the build.
+# The ARG instruction makes the secret available during the build.
+ARG VITE_GEMINI_API_KEY
 
-# Copy built assets from the builder stage
-COPY --from=builder /app/dist ./dist
+# This is the key part: we must explicitly set it as an environment variable
+# so Vite's build process can replace import.meta.env.VITE_GEMINI_API_KEY
+ENV VITE_GEMINI_API_KEY=${VITE_GEMINI_API_KEY}
 
-# Copy package.json to install 'serve'
-COPY package.json ./
+# Build the application
+RUN npm run build
 
-# Install only the 'serve' dependency for production
+# Install 'serve' to run the built application
 RUN npm install --production serve
 
 # Expose the port that Hugging Face Spaces uses by default
 EXPOSE 7860
 
-# Command to start the server
-# This serves the 'dist' folder and listens on port 7860
+# Command to start the server, serving the 'dist' folder
 CMD ["npx", "serve", "-s", "dist", "-l", "7860"]

src/pages/Index.tsx

@@ -49,14 +49,18 @@ const Index = () => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
-    if (import.meta.env.VITE_GEMINI_API_KEY) {
+    // Explicitly check for the environment variable
+    const apiKey = import.meta.env.VITE_GEMINI_API_KEY;
+    
+    if (apiKey && apiKey !== "undefined") {
       setIsAIReady(true);
     } else {
       setIsAIReady(false);
       toast({
         title: "AI Not Ready",
-        description: "Gemini API key is not configured. Please set it in your deployment environment secrets.",
+        description: "Gemini API key is not configured. Please set VITE_GEMINI_API_KEY in your Hugging Face Space secrets.",
         variant: "destructive",
+        duration: 10000 // Show for longer to ensure visibility
       });
     }
   }, [toast]);