Upload folder using huggingface_hub

code/config/constants.py

@@ -109,6 +109,17 @@ For single-file code, use standard markdown fenced blocks:
 ```typescript for TypeScript
 etc.
 
+JAVASCRIPT / TYPESCRIPT PROJECTS:
+For React, Next.js, Vue.js, Express, NestJS, or any JS/TS framework:
+- ALWAYS use the @@FILE: multi-file format
+- Include a package.json with name, version, scripts, and dependencies
+- Include all source files (src/App.jsx, src/index.js, etc.)
+- For React+Vite: include vite.config.js and index.html
+- For Next.js: include next.config.js with output: 'standalone'
+- For Express: main entry is index.js with app.listen(7860)
+- Server ports MUST be 7860 and bind to 0.0.0.0
+- Do NOT include node_modules or lock files
+
 When generating web apps with HTML/CSS/JS, return a single self-contained HTML document with all CSS and JavaScript inline. Make the page fully responsive: html/body at margin:0 and 100% width/height, use flexbox/grid layouts, and size any canvas to its container.
 
 When generating Gradio apps, create a complete app.py with:

code/huggingface/dockerfile_gen.py

@@ -0,0 +1,626 @@
+"""Dockerfile and package.json generator for JS/TS frameworks.
+
+Auto-generates Dockerfile, package.json, and .dockerignore for
+React, Next.js, Vue.js, Express, NestJS, and plain Node.js projects
+so they can be pushed to HuggingFace Docker Spaces.
+"""
+
+from __future__ import annotations
+
+import re
+from typing import Any
+
+# ─── Framework Detection ────────────────────────────────────────────────
+
+# Keywords in code that identify a framework
+FRAMEWORK_SIGNALS: dict[str, list[str]] = {
+    "nextjs": [
+        "from 'next", 'from "next',
+        "next/link", "next/image", "next/router", "next/head",
+        "NextResponse", "NextRequest", "next/navigation",
+        "getServerSideProps", "getStaticProps",
+    ],
+    "react": [
+        "from 'react", 'from "react',
+        "react-dom", "ReactDOM", "useState", "useEffect",
+        "jsx", "tsx", "React.Component", "React.createElement",
+    ],
+    "vue": [
+        "from 'vue", 'from "vue',
+        "createApp", "Vue.createApp", "<template>",
+        "defineComponent", "ref(", "reactive(",
+    ],
+    "express": [
+        "require('express')", 'require("express")',
+        "from 'express", 'from "express',
+        "express()", "express.Router",
+    ],
+    "nestjs": [
+        "@Module", "@Controller", "@Get", "@Post", "@Put", "@Delete",
+        "from '@nestjs", 'from "@nestjs',
+        "NestFactory.create",
+    ],
+    "nodejs": [
+        "require('http')", "http.createServer",
+        "const http = require", "import http from",
+    ],
+}
+
+
+def detect_framework(files: dict[str, str]) -> str:
+    """Detect the JS/TS framework from project files.
+
+    Returns one of: 'nextjs', 'react', 'vue', 'express', 'nestjs', 'nodejs', 'static'
+    """
+    all_code = "\n".join(files.values())
+
+    # Check file names first (strong signal)
+    has_next_config = any(
+        f.startswith("next.config") for f in files
+    )
+    if has_next_config:
+        return "nextjs"
+
+    # Check package.json if present
+    for fname, content in files.items():
+        if fname == "package.json" or fname.endswith("/package.json"):
+            try:
+                import json
+                pkg = json.loads(content)
+                deps = {**pkg.get("dependencies", {}), **pkg.get("devDependencies", {})}
+                if "next" in deps:
+                    return "nextjs"
+                if "vue" in deps or "@vue/cli-service" in deps:
+                    return "vue"
+                if "@nestjs/core" in deps:
+                    return "nestjs"
+                if "express" in deps:
+                    return "express"
+                if "react" in deps or "react-dom" in deps:
+                    return "react"
+            except Exception:
+                pass
+
+    # Check code content for framework signals
+    for fw, signals in FRAMEWORK_SIGNALS.items():
+        for signal in signals:
+            if signal in all_code:
+                return fw
+
+    # Check file extensions
+    has_jsx_tsx = any(f.endswith((".jsx", ".tsx")) for f in files)
+    has_vue = any(f.endswith(".vue") for f in files)
+
+    if has_vue:
+        return "vue"
+    if has_jsx_tsx:
+        return "react"
+
+    return "static"
+
+
+def is_js_project(files: dict[str, str]) -> bool:
+    """Check if the project is a JavaScript/TypeScript project."""
+    js_extensions = {".js", ".jsx", ".ts", ".tsx", ".vue", ".mjs", ".cjs"}
+    has_package_json = any("package.json" in f for f in files)
+    has_js_files = any(
+        any(f.endswith(ext) for ext in js_extensions)
+        for f in files
+    )
+    return has_package_json or has_js_files
+
+
+# ─── Dockerfile Templates ───────────────────────────────────────────────
+
+def _dockerfile_nextjs() -> str:
+    """Dockerfile for Next.js projects."""
+    return """FROM node:20-slim AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+
+# Rebuild source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+# Production image
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+COPY --from=builder /app/public ./public
+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"]
+"""
+
+
+def _dockerfile_react() -> str:
+    """Dockerfile for React (Vite/CRA) projects — served with nginx."""
+    return """FROM node:20-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html 2>/dev/null || true
+RUN cat > /etc/nginx/conf.d/default.conf << 'EOF'
+server {
+    listen 7860;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+EOF
+EXPOSE 7860
+CMD ["nginx", "-g", "daemon off;"]
+"""
+
+
+def _dockerfile_vue() -> str:
+    """Dockerfile for Vue.js projects — served with nginx."""
+    return """FROM node:20-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+RUN cat > /etc/nginx/conf.d/default.conf << 'EOF'
+server {
+    listen 7860;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+EOF
+EXPOSE 7860
+CMD ["nginx", "-g", "daemon off;"]
+"""
+
+
+def _dockerfile_express() -> str:
+    """Dockerfile for Express/Node.js server projects."""
+    return """FROM node:20-slim
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+COPY . .
+RUN addgroup --system --gid 1001 appuser && adduser --system --uid 1001 appuser
+USER appuser
+EXPOSE 7860
+ENV PORT=7860
+ENV HOST=0.0.0.0
+CMD ["node", "index.js"]
+"""
+
+
+def _dockerfile_nestjs() -> str:
+    """Dockerfile for NestJS projects."""
+    return """FROM node:20-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+COPY . .
+RUN npm run build
+
+FROM node:20-slim
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile --production; \\
+  elif [ -f package-lock.json ]; then npm ci --only=production; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile --prod; \\
+  else npm i --only=production; \\
+  fi
+COPY --from=build /app/dist ./dist
+RUN addgroup --system --gid 1001 appuser && adduser --system --uid 1001 appuser
+USER appuser
+EXPOSE 7860
+ENV PORT=7860
+CMD ["node", "dist/main.js"]
+"""
+
+
+def generate_dockerfile(framework: str) -> str:
+    """Generate a Dockerfile for the given framework.
+
+    Args:
+        framework: One of 'nextjs', 'react', 'vue', 'express', 'nestjs', 'nodejs', 'static'
+
+    Returns:
+        Dockerfile content as string.
+    """
+    templates = {
+        "nextjs": _dockerfile_nextjs,
+        "react": _dockerfile_react,
+        "vue": _dockerfile_vue,
+        "express": _dockerfile_express,
+        "nestjs": _dockerfile_nestjs,
+        "nodejs": _dockerfile_express,  # Same as express for plain Node
+    }
+    gen = templates.get(framework)
+    if gen:
+        return gen()
+    # Fallback: generic node server
+    return _dockerfile_express()
+
+
+# ─── package.json Generator ─────────────────────────────────────────────
+
+def _scan_js_imports(code: str) -> set[str]:
+    """Scan JS/TS code for import/require statements and return package names."""
+    packages = set()
+
+    # ESM: import xxx from 'pkg' / import 'pkg'
+    for m in re.finditer(r"import\s+.*?\s+from\s+['\"](@?[\w-]+/[\w-]+|[\w-]+)", code):
+        packages.add(m.group(1))
+
+    # ESM: import 'pkg'
+    for m in re.finditer(r"import\s+['\"](@?[\w-]+/[\w-]+|[\w-]+)['\"]", code):
+        packages.add(m.group(1))
+
+    # CJS: require('pkg')
+    for m in re.finditer(r"require\s*\(\s*['\"](@?[\w-]+/[\w-]+|[\w-]+)['\"]\s*\)", code):
+        packages.add(m.group(1))
+
+    return packages
+
+
+# Known packages that should NOT go in dependencies (built-in or types)
+_SKIP_PACKAGES = {
+    "react", "react-dom", "next", "vue", "express",
+    "path", "fs", "http", "https", "url", "os", "crypto",
+    "stream", "util", "events", "buffer", "child_process",
+    "net", "tls", "zlib", "assert", "querystring",
+}
+
+# Framework-specific dependency sets
+_FRAMEWORK_DEPS: dict[str, dict[str, str]] = {
+    "nextjs": {
+        "next": "14.2.0",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
+    },
+    "react": {
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
+        "react-scripts": "5.0.1",
+    },
+    "vue": {
+        "vue": "^3.4.0",
+    },
+    "express": {
+        "express": "^4.19.0",
+    },
+    "nestjs": {
+        "@nestjs/core": "^10.3.0",
+        "@nestjs/common": "^10.3.0",
+        "@nestjs/platform-express": "^10.3.0",
+        "reflect-metadata": "^0.2.0",
+        "rxjs": "^7.8.0",
+    },
+    "nodejs": {},
+}
+
+# Common package version mapping
+_PACKAGE_VERSIONS: dict[str, str] = {
+    "axios": "^1.6.0",
+    "lodash": "^4.17.21",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.0",
+    "mongoose": "^8.2.0",
+    "prisma": "^5.10.0",
+    "@prisma/client": "^5.10.0",
+    "zod": "^3.22.0",
+    "socket.io": "^4.7.0",
+    "multer": "^1.4.4",
+    "cookie-parser": "^1.4.6",
+    "express-session": "^1.18.0",
+    "jsonwebtoken": "^9.0.0",
+    "bcrypt": "^5.1.0",
+    "uuid": "^9.0.0",
+    "dayjs": "^1.11.10",
+    "chart.js": "^4.4.0",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.350.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.1.0",
+    "typescript": "^5.3.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/node": "^20.11.0",
+    "tailwind-merge": "^2.2.0",
+    "clsx": "^2.1.0",
+    "class-variance-authority": "^0.7.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "next-themes": "^0.3.0",
+    "recharts": "^2.12.0",
+    "react-hook-form": "^7.50.0",
+    "@hookform/resolvers": "^3.3.0",
+    "zustand": "^4.5.0",
+    "jotai": "^2.6.0",
+    "tanstack": "^5.24.0",
+    "@tanstack/react-query": "^5.24.0",
+    "swr": "^2.2.0",
+    "nodemon": "^3.1.0",
+    "ts-node": "^10.9.0",
+    "ts-node-dev": "^2.0.0",
+}
+
+
+def generate_package_json(
+    framework: str,
+    project_name: str = "my-app",
+    extra_deps: set[str] | None = None,
+    existing_content: str | None = None,
+) -> str:
+    """Generate a package.json for the given framework.
+
+    If existing_content is provided, merges dependencies into it.
+    """
+    import json
+
+    # Start with existing or fresh
+    if existing_content:
+        try:
+            pkg = json.loads(existing_content)
+        except Exception:
+            pkg = {}
+    else:
+        pkg = {}
+
+    pkg.setdefault("name", project_name)
+    pkg.setdefault("version", "1.0.0")
+    pkg.setdefault("private", True)
+
+    deps = pkg.get("dependencies", {})
+    dev_deps = pkg.get("devDependencies", {})
+
+    # Add framework core deps
+    fw_deps = _FRAMEWORK_DEPS.get(framework, {})
+    for name, version in fw_deps.items():
+        deps[name] = version
+
+    # Add scanned extra deps
+    if extra_deps:
+        for dep in extra_deps:
+            if dep in _SKIP_PACKAGES:
+                continue
+            if dep in deps or dep in dev_deps:
+                continue
+            version = _PACKAGE_VERSIONS.get(dep, "^1.0.0")
+            # Dev deps
+            if dep.startswith("@types/") or dep in {"typescript", "nodemon", "ts-node", "ts-node-dev"}:
+                dev_deps[dep] = version
+            else:
+                deps[dep] = version
+
+    pkg["dependencies"] = deps
+    if dev_deps:
+        pkg["devDependencies"] = dev_deps
+
+    # Add scripts based on framework
+    scripts = pkg.get("scripts", {})
+    if framework == "nextjs":
+        scripts.setdefault("dev", "next dev")
+        scripts.setdefault("build", "next build")
+        scripts.setdefault("start", "next start -p 7860")
+    elif framework in ("react",):
+        scripts.setdefault("dev", "vite")
+        scripts.setdefault("build", "vite build")
+        scripts.setdefault("start", "vite preview --port 7860 --host 0.0.0.0")
+        # Ensure vite is in devDeps
+        if "vite" not in dev_deps and "vite" not in deps:
+            dev_deps["vite"] = "^5.1.0"
+        if "@vitejs/plugin-react" not in dev_deps:
+            dev_deps["@vitejs/plugin-react"] = "^4.2.0"
+    elif framework == "vue":
+        scripts.setdefault("dev", "vite")
+        scripts.setdefault("build", "vite build")
+        scripts.setdefault("start", "vite preview --port 7860 --host 0.0.0.0")
+        if "vite" not in dev_deps and "vite" not in deps:
+            dev_deps["vite"] = "^5.1.0"
+    elif framework in ("express", "nodejs"):
+        scripts.setdefault("dev", "node index.js")
+        scripts.setdefault("start", "node index.js")
+    elif framework == "nestjs":
+        scripts.setdefault("build", "nest build")
+        scripts.setdefault("start", "node dist/main.js")
+
+    pkg["scripts"] = scripts
+    pkg["dependencies"] = deps
+    if dev_deps:
+        pkg["devDependencies"] = dev_deps
+
+    return json.dumps(pkg, indent=2) + "\n"
+
+
+# ─── .dockerignore ──────────────────────────────────────────────────────
+
+DOCKERIGNORE = """node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.next
+.git
+.gitignore
+README.md
+.env
+.env.local
+.env.production
+.DS_Store
+"""
+
+
+# ─── Vite Config Generators ─────────────────────────────────────────────
+
+def generate_vite_config(framework: str) -> str | None:
+    """Generate a vite.config.js/ts if needed for React or Vue."""
+    if framework == "react":
+        return """import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 7860,
+  },
+})
+"""
+    if framework == "vue":
+        return """import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: 7860,
+  },
+})
+"""
+    return None
+
+
+# ─── Next.js Config ────────────────────────────────────────────────────
+
+def generate_next_config() -> str:
+    """Generate next.config.js with standalone output for Docker."""
+    return """/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+}
+
+module.exports = nextConfig
+"""
+
+
+# ─── Public index.html for Vite ─────────────────────────────────────────
+
+def generate_index_html(title: str = "App") -> str:
+    """Generate a minimal index.html for Vite projects."""
+    return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{title}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
+"""
+
+
+# ─── Full Project Scaffold ──────────────────────────────────────────────
+
+def scaffold_js_project(
+    files: dict[str, str],
+    framework: str,
+    project_name: str = "my-app",
+) -> dict[str, str]:
+    """Add Dockerfile, package.json, and config files to a JS project.
+
+    Takes existing generated files and returns an augmented dict with
+    Docker support files added.
+    """
+    augmented = dict(files)
+
+    # Detect imports from all JS/TS files
+    all_js_code = "\n".join(
+        content for fname, content in files.items()
+        if fname.endswith((".js", ".jsx", ".ts", ".tsx", ".vue", ".mjs"))
+    )
+    extra_deps = _scan_js_imports(all_js_code)
+
+    # Add Dockerfile
+    if "Dockerfile" not in augmented:
+        augmented["Dockerfile"] = generate_dockerfile(framework)
+
+    # Add .dockerignore
+    if ".dockerignore" not in augmented:
+        augmented[".dockerignore"] = DOCKERIGNORE
+
+    # Add or merge package.json
+    if "package.json" in augmented:
+        augmented["package.json"] = generate_package_json(
+            framework=framework,
+            project_name=project_name,
+            extra_deps=extra_deps,
+            existing_content=augmented["package.json"],
+        )
+    else:
+        augmented["package.json"] = generate_package_json(
+            framework=framework,
+            project_name=project_name,
+            extra_deps=extra_deps,
+        )
+
+    # Framework-specific config files
+    if framework == "nextjs" and "next.config.js" not in augmented and "next.config.mjs" not in augmented:
+        augmented["next.config.js"] = generate_next_config()
+
+    if framework in ("react", "vue"):
+        vite_cfg = generate_vite_config(framework)
+        if vite_cfg and "vite.config.js" not in augmented and "vite.config.ts" not in augmented:
+            augmented["vite.config.js"] = vite_cfg
+
+        # Add index.html entry point for Vite if not present
+        if "index.html" not in augmented:
+            augmented["index.html"] = generate_index_html(project_name)
+
+    return augmented

code/huggingface/push.py

@@ -15,6 +15,11 @@ from pathlib import Path
 from typing import Any
 
 from code.config.constants import MODEL_ID
+from code.huggingface.dockerfile_gen import (
+    detect_framework,
+    is_js_project,
+    scaffold_js_project,
+)
 
 logger = logging.getLogger(__name__)
 
@@ -117,12 +122,18 @@ def _find_entry_point(files: dict[str, str]) -> str:
 
     Looks for app.py, main.py, or any Python file with a launcher pattern.
     """
-    # Priority order for entry points
+    # Priority order for Python entry points
     candidates = ["app.py", "main.py", "index.py", "server.py", "run.py"]
     for c in candidates:
         if c in files:
             return c
 
+    # Priority order for JS entry points
+    js_candidates = ["index.js", "server.js", "src/index.js", "src/main.jsx", "src/main.tsx"]
+    for c in js_candidates:
+        if c in files:
+            return c
+
     # Look for any .py file with if __name__ == "__main__" or .launch()
     for fname, content in files.items():
         if fname.endswith(".py"):
@@ -146,6 +157,11 @@ def _detect_sdk(files: dict[str, str], entry: str) -> str:
         return "streamlit"
     if "import gradio" in all_code or "from gradio" in all_code:
         return "gradio"
+
+    # JS/TS projects → Docker
+    if is_js_project(files):
+        return "docker"
+
     if any(f.endswith(".html") for f in files):
         return "static"
     if entry.endswith(".py"):
@@ -180,7 +196,7 @@ def push_to_huggingface(
     """Push generated project to HuggingFace Hub.
 
     Creates the repo if it doesn't exist, writes all files,
-    and adds README.md and requirements.txt as needed.
+    and adds README.md, Dockerfile, package.json, and requirements.txt as needed.
     """
     try:
         from huggingface_hub import HfApi, create_repo
@@ -199,10 +215,24 @@ def push_to_huggingface(
         entry_point = _find_entry_point(files)
         detected_sdk = _detect_sdk(files, entry_point)
 
-        # Use detected SDK if user left it as "static" but project is Python
+        # Use detected SDK if user left it as "static" but project needs something else
         if space_sdk == "static" and detected_sdk != "static":
             space_sdk = detected_sdk
 
+        # For JS projects, scaffold Docker support files
+        if is_js_project(files) or space_sdk == "docker":
+            framework = detect_framework(files)
+            if framework == "static":
+                # Single HTML file or simple JS — keep as static
+                if any(f.endswith(".html") for f in files) and not is_js_project(files):
+                    space_sdk = "static"
+                else:
+                    framework = "nodejs"
+                    space_sdk = "docker"
+
+            if space_sdk == "docker":
+                files = scaffold_js_project(files, framework, project_name)
+
         try:
             if is_space:
                 create_repo(
@@ -229,8 +259,8 @@ def push_to_huggingface(
                 os.makedirs(os.path.dirname(full_path), exist_ok=True)
                 Path(full_path).write_text(content, encoding="utf-8")
 
-            # Ensure the entry point is named app.py for HF Spaces
-            if entry_point != "app.py" and entry_point.endswith(".py") and is_space:
+            # Ensure the entry point is named app.py for HF Spaces (Python)
+            if entry_point != "app.py" and entry_point.endswith(".py") and is_space and space_sdk in ("gradio", "streamlit"):
                 src = os.path.join(tmp_dir, entry_point)
                 dst = os.path.join(tmp_dir, "app.py")
                 if os.path.exists(src) and not os.path.exists(dst):
@@ -238,13 +268,19 @@ def push_to_huggingface(
                     shutil.copy2(src, dst)
 
             # Determine app_file for README
-            app_file = "app.py" if is_space and space_sdk in ("gradio", "streamlit") else entry_point
-            if is_space and space_sdk == "static":
-                # For static spaces, look for index.html
+            if space_sdk == "docker":
+                app_file = "Dockerfile"
+            elif space_sdk in ("gradio", "streamlit"):
+                app_file = "app.py"
+            elif space_sdk == "static":
                 if "index.html" in files:
                     app_file = "index.html"
                 elif any(f.endswith(".html") for f in files):
                     app_file = next(f for f in files if f.endswith(".html"))
+                else:
+                    app_file = entry_point
+            else:
+                app_file = entry_point
 
             # Add README.md if not present
             readme_path = os.path.join(tmp_dir, "README.md")
@@ -281,7 +317,7 @@ Generated by Fullstack Code Builder using {MODEL_ID}.
             req_path = os.path.join(tmp_dir, "requirements.txt")
             has_python = any(f.endswith(".py") for f in files.keys())
 
-            if has_python:
+            if has_python and space_sdk != "docker":
                 # Scan all Python code for imports
                 all_py_code = "\n".join(
                     content for fname, content in files.items()
@@ -296,9 +332,6 @@ Generated by Fullstack Code Builder using {MODEL_ID}.
                     for line in (existing_reqs + "\n" + auto_reqs).splitlines():
                         line = line.strip()
                         if line and not line.startswith("#"):
-                            # Normalize: take the package name (before >=, ==, etc.)
-                            pkg_name = re.split(r"[><=!~]", line)[0].strip().lower()
-                            # Keep the more specific version spec
                             merged.add(line)
 
                     Path(req_path).write_text("\n".join(sorted(merged)) + "\n", encoding="utf-8")

code/server/routes.py

@@ -475,7 +475,7 @@ def handle_push_hf(
     exec_context_json: str,
     repo_name: str,
     hf_token: str,
-    space_sdk: str = "static",
+    space_sdk: str = "auto",
     is_space: str = "true",
 ) -> str:
     """Push generated project to HuggingFace Hub."""
@@ -488,13 +488,22 @@ def handle_push_hf(
         if not project_files and code:
             lang = execution_context.get("language", "python")
             is_gradio = execution_context.get("is_gradio", False)
-            ext_map = {
-                "python": "app.py", "py": "app.py",
-                "javascript": "index.html", "js": "index.html",
-                "html": "index.html", "web": "index.html",
-                "typescript": "index.ts", "ts": "index.ts",
-            }
-            filename = ext_map.get(lang, "app.py")
+
+            # Map language to entry file — JS/TS single-files get wrapped for Docker
+            if lang in ("javascript", "js", "typescript", "ts"):
+                # For single-file JS/TS code that is HTML (vanilla), keep as index.html
+                if "<!doctype" in code.lower() or "<html" in code.lower():
+                    filename = "index.html"
+                else:
+                    filename = "index.js"
+            elif lang in ("html", "web"):
+                filename = "index.html"
+            else:
+                ext_map = {
+                    "python": "app.py", "py": "app.py",
+                }
+                filename = ext_map.get(lang, "app.py")
+
             project_files = {filename: code}
 
             # Auto-detect SDK for Gradio apps
@@ -513,6 +522,10 @@ def handle_push_hf(
             })
             return
 
+        # "auto" SDK means let push_to_huggingface decide
+        if space_sdk == "auto":
+            space_sdk = "static"  # push_to_huggingface will auto-detect from files
+
         project_name = repo_name.split("/")[-1] if "/" in repo_name else repo_name
 
         result = push_to_huggingface(

index.html

@@ -1202,11 +1202,13 @@ body.hide-thinking .think-block { display: none; }
             <div class="deploy-field">
               <label for="hf-space-sdk">Space SDK</label>
               <select id="hf-space-sdk">
+                <option value="auto">Auto-detect</option>
+                <option value="docker">Docker (React/Next/Vue/Express/Node)</option>
                 <option value="static">Static (HTML/CSS/JS)</option>
-                <option value="gradio">Gradio</option>
-                <option value="streamlit">Streamlit</option>
-                <option value="docker">Docker</option>
+                <option value="gradio">Gradio (Python)</option>
+                <option value="streamlit">Streamlit (Python)</option>
               </select>
+              <div class="deploy-hint">JS frameworks auto-use Docker with Dockerfile build</div>
             </div>
             <button id="btn-push-hf" onclick="pushToHuggingFace()" disabled>&#128640; Push to HuggingFace</button>
             <div class="deploy-status" id="deploy-status"></div>
@@ -1445,7 +1447,37 @@ function onLanguageChange() {
 
   fwSelect.onchange = () => {
     state.targetFramework = fwSelect.value;
+    autoSelectSDK(selectedLang, fwSelect.value);
   };
+
+  // Auto-select SDK based on language/framework
+  autoSelectSDK(selectedLang, fwSelect.value);
+}
+
+function autoSelectSDK(lang, framework) {
+  const sdkSelect = document.getElementById('hf-space-sdk');
+  if (!sdkSelect) return;
+
+  const jsLangs = ['JavaScript', 'TypeScript'];
+  const jsFrameworks = ['React', 'Next.js', 'Vue.js', 'Express.js', 'Node.js', 'NestJS'];
+  const pythonFrameworks = ['Gradio', 'Streamlit', 'Flask', 'Django', 'FastAPI'];
+
+  if (jsLangs.includes(lang) || jsFrameworks.includes(framework)) {
+    // JS frameworks need Docker
+    if (jsFrameworks.includes(framework) || jsLangs.includes(lang)) {
+      sdkSelect.value = 'docker';
+    }
+  } else if (framework === 'Gradio') {
+    sdkSelect.value = 'gradio';
+  } else if (framework === 'Streamlit') {
+    sdkSelect.value = 'streamlit';
+  } else if (lang === 'Python' && pythonFrameworks.includes(framework)) {
+    sdkSelect.value = 'gradio';
+  } else if (lang === 'HTML/CSS/JS' || framework === 'Vanilla' || framework === 'Tailwind CSS' || framework === 'Bootstrap') {
+    sdkSelect.value = 'static';
+  } else {
+    sdkSelect.value = 'auto';
+  }
 }
 
 // ═══════════════════════════════════════════════════════