Deploy to HF Spaces

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+.env.example
 
 # vercel
 .vercel

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "Install and Build",
+			"type": "shell",
+			"command": "npm ci && npm run build",
+			"args": [],
+			"isBackground": false,
+			"problemMatcher": [
+				"$tsc"
+			],
+			"group": "build"
+		}
+	]
+}

Dockerfile

@@ -1,19 +1,22 @@
 FROM node:20-alpine
-USER root
 
+# Ensure non-root user for build/run
 USER 1000
 WORKDIR /usr/src/app
-# Copy package.json and package-lock.json to the container
+
+# Install deps with ci for reproducibility and layer caching
 COPY --chown=1000 package.json package-lock.json ./
+RUN npm ci
 
-# Copy the rest of the application files to the container
+# Copy the rest of the application
 COPY --chown=1000 . .
 
-RUN npm install
+# Build the app
 RUN npm run build
 
-# Expose the application port (assuming your app runs on port 3000)
+# Expose default Next.js port (informational)
 EXPOSE 3000
 
-# Start the application
-CMD ["npm", "start"]
+# HF Spaces provides $PORT. Start Next.js on that port and bind to all interfaces.
+ENV HOST=0.0.0.0
+CMD ["sh", "-c", "npm start -- -p ${PORT:-3000}"]

app/(public)/page.tsx

@@ -1,4 +1,3 @@
-import { AskAi } from "@/components/space/ask-ai";
 import { redirect } from "next/navigation";
 export default function Home() {
   redirect("/projects/new");
@@ -14,9 +13,6 @@ export default function Home() {
         <p className="text-2xl text-neutral-300/80 mt-4 text-center max-w-2xl">
           Vibe Coding has never been so easy.
         </p>
-        <div className="mt-14 max-w-2xl w-full mx-auto">
-          <AskAi />
-        </div>
         <div className="absolute inset-0 pointer-events-none -z-[1]">
           <div className="w-full h-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-10 blur-3xl rounded-full" />
           <div className="w-2/3 h-3/4 bg-gradient-to-r from-blue-500 to-teal-500 opacity-24 blur-3xl absolute -top-20 right-10 transform rotate-12" />

app/api/ask-ai/route.ts

@@ -1,10 +1,12 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+// Avoid depending on @types/node in this project: declare minimal process type
+declare const process: { env: Record<string, string | undefined> };
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import { headers } from "next/headers";
 import { InferenceClient } from "@huggingface/inference";
 
 import { MODELS, PROVIDERS } from "@/lib/providers";
+import { DEFAULT_MODEL as DEFAULT_MODEL_FLAG, DEFAULT_PROVIDER as DEFAULT_PROVIDER_FLAG, EMBED_MODE, MAX_REQUESTS_PER_IP_ENV, MAX_OUTPUT_TOKENS } from "@/lib/flags";
 import {
   DIVIDER,
   FOLLOW_UP_SYSTEM_PROMPT,
@@ -27,7 +29,14 @@ export async function POST(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, provider, model, redesignMarkdown, previousPrompts, pages } = body;
+  const { prompt, redesignMarkdown, previousPrompts, pages } = body;
+  let { provider, model } = body;
+
+  // In embed mode, lock down model/provider to configured defaults (e.g., Kimi K2 on Groq)
+  if (EMBED_MODE) {
+    provider = DEFAULT_PROVIDER_FLAG as string;
+    model = (DEFAULT_MODEL_FLAG as string) ?? model;
+  }
 
   if (!model || (!prompt && !redesignMarkdown)) {
     return NextResponse.json(
@@ -76,7 +85,10 @@ export async function POST(request: NextRequest) {
 
   if (!token) {
     ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
-    if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
+    const RATE_LIMIT = Number.isFinite(MAX_REQUESTS_PER_IP_ENV)
+      ? MAX_REQUESTS_PER_IP_ENV
+      : MAX_REQUESTS_PER_IP;
+    if (ipAddresses.get(ip) > RATE_LIMIT) {
       return NextResponse.json(
         {
           ok: false,
@@ -121,14 +133,17 @@ export async function POST(request: NextRequest) {
       // let completeResponse = "";
       try {
         const client = new InferenceClient(token);
+        const SYSTEM_PROMPT = EMBED_MODE
+          ? `${INITIAL_SYSTEM_PROMPT}\n\nConstraints for demo mode: Keep outputs concise and efficient. Prefer tiny, single-purpose components. Avoid heavy libraries; use minimal Tailwind. Keep HTML/CSS small. Limit total output to roughly ${Math.min( MAX_OUTPUT_TOKENS, 1200 )} tokens.`
+          : INITIAL_SYSTEM_PROMPT;
         const chatCompletion = client.chatCompletionStream(
           {
             model: selectedModel.value,
-            provider: selectedProvider.id as any,
+            provider: selectedProvider.id as import("@/lib/providers").ProviderId,
             messages: [
               {
                 role: "system",
-                content: INITIAL_SYSTEM_PROMPT,
+                content: SYSTEM_PROMPT,
               },
               ...(pages?.length > 1 ? [{
                 role: "assistant",
@@ -141,7 +156,7 @@ export async function POST(request: NextRequest) {
                   : rewrittenPrompt,
               },
             ],
-            max_tokens: selectedProvider.max_tokens,
+            max_tokens: Math.min(selectedProvider.max_tokens, MAX_OUTPUT_TOKENS),
           },
           billTo ? { billTo } : {}
         );
@@ -157,14 +172,16 @@ export async function POST(request: NextRequest) {
             await writer.write(encoder.encode(chunk));
           }
         }
-      } catch (error: any) {
-        if (error.message?.includes("exceeded your monthly included credits")) {
+      } catch (error: unknown) {
+        const message =
+          (error as Error)?.message ?? (typeof error === "string" ? error : "");
+        if (message?.includes("exceeded your monthly included credits")) {
           await writer.write(
             encoder.encode(
               JSON.stringify({
                 ok: false,
                 openProModal: true,
-                message: error.message,
+                message,
               })
             )
           );
@@ -174,7 +191,7 @@ export async function POST(request: NextRequest) {
               JSON.stringify({
                 ok: false,
                 message:
-                  error.message ||
+                  message ||
                   "An error occurred while processing your request.",
               })
             )
@@ -186,13 +203,14 @@ export async function POST(request: NextRequest) {
     })();
 
     return response;
-  } catch (error: any) {
+  } catch (error: unknown) {
     return NextResponse.json(
       {
         ok: false,
         openSelectProvider: true,
         message:
-          error?.message || "An error occurred while processing your request.",
+          (error as Error)?.message ||
+          (typeof error === "string" ? error : "An error occurred while processing your request."),
       },
       { status: 500 }
     );
@@ -204,8 +222,14 @@ export async function PUT(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, previousPrompts, provider, selectedElementHtml, model, pages, files, } =
-    body;
+  const { prompt, previousPrompts, selectedElementHtml, pages, files } = body;
+  let { provider, model } = body;
+
+  // In embed mode, lock down model/provider to configured defaults
+  if (EMBED_MODE) {
+    provider = DEFAULT_PROVIDER_FLAG as string;
+    model = (DEFAULT_MODEL_FLAG as string) ?? model;
+  }
 
   if (!prompt || pages.length === 0) {
     return NextResponse.json(
@@ -242,7 +266,10 @@ export async function PUT(request: NextRequest) {
 
   if (!token) {
     ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
-    if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
+    const RATE_LIMIT = Number.isFinite(MAX_REQUESTS_PER_IP_ENV)
+      ? MAX_REQUESTS_PER_IP_ENV
+      : MAX_REQUESTS_PER_IP;
+    if (ipAddresses.get(ip) > RATE_LIMIT) {
       return NextResponse.json(
         {
           ok: false,
@@ -269,11 +296,13 @@ export async function PUT(request: NextRequest) {
     const response = await client.chatCompletion(
       {
         model: selectedModel.value,
-        provider: selectedProvider.id as any,
+  provider: selectedProvider.id as import("@/lib/providers").ProviderId,
         messages: [
           {
             role: "system",
-            content: FOLLOW_UP_SYSTEM_PROMPT,
+            content: EMBED_MODE
+              ? `${FOLLOW_UP_SYSTEM_PROMPT}\n\nConstraints for demo mode: Keep edits minimal and concise. Prefer small diffs and tiny components; avoid large rewrites. Limit output to roughly ${Math.min( MAX_OUTPUT_TOKENS, 1200 )} tokens.`
+              : FOLLOW_UP_SYSTEM_PROMPT,
           },
           {
             role: "user",
@@ -297,7 +326,7 @@ export async function PUT(request: NextRequest) {
         ],
         ...(selectedProvider.id !== "sambanova"
           ? {
-              max_tokens: selectedProvider.max_tokens,
+              max_tokens: Math.min(selectedProvider.max_tokens, MAX_OUTPUT_TOKENS),
             }
           : {}),
       },
@@ -486,13 +515,15 @@ export async function PUT(request: NextRequest) {
         { status: 400 }
       );
     }
-  } catch (error: any) {
-    if (error.message?.includes("exceeded your monthly included credits")) {
+  } catch (error: unknown) {
+    const message =
+      (error as Error)?.message ?? (typeof error === "string" ? error : "");
+    if (message?.includes("exceeded your monthly included credits")) {
       return NextResponse.json(
         {
           ok: false,
           openProModal: true,
-          message: error.message,
+          message,
         },
         { status: 402 }
       );
@@ -502,7 +533,7 @@ export async function PUT(request: NextRequest) {
         ok: false,
         openSelectProvider: true,
         message:
-          error.message || "An error occurred while processing your request.",
+          message || "An error occurred while processing your request.",
       },
       { status: 500 }
     );

app/layout.tsx

@@ -10,7 +10,6 @@ import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { apiServer } from "@/lib/api";
 import AppContext from "@/components/contexts/app-context";
 import Script from "next/script";
-import IframeDetector from "@/components/iframe-detector";
 
 const inter = Inter({
   variable: "--font-inter-sans",
@@ -101,7 +100,7 @@ export default async function RootLayout({
       <body
         className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
       >
-        <IframeDetector />
+  {/* Iframe embed warning removed; EMBED_MODE controls behavior */}
         <Toaster richColors position="bottom-center" />
         <TanstackProvider>
           <AppContext me={data}>{children}</AppContext>

components/editor/ask-ai/index.tsx

@@ -1,5 +1,4 @@
 "use client";
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useMemo, useRef } from "react";
 import classNames from "classnames";
 import { toast } from "sonner";
@@ -10,6 +9,7 @@ import { FaStopCircle } from "react-icons/fa";
 import ProModal from "@/components/pro-modal";
 import { Button } from "@/components/ui/button";
 import { MODELS } from "@/lib/providers";
+import { DEFAULT_MODEL, DEFAULT_PROVIDER, EMBED_MODE, HIDE_LOGIN } from "@/lib/flags";
 import { HtmlHistory, Page, Project } from "@/types";
 // import { InviteFriends } from "@/components/invite-friends";
 import { Settings } from "@/components/editor/ask-ai/settings";
@@ -73,8 +73,15 @@ export function AskAI({
 
   const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
-  const [provider, setProvider] = useLocalStorage("provider", "auto");
-  const [model, setModel] = useLocalStorage("model", MODELS[0].value);
+  // Defaults: pin to flags so we can run a simple demo (e.g., Kimi K2 on Groq)
+  const [provider, setProvider] = useLocalStorage(
+    "provider",
+    DEFAULT_PROVIDER || "auto"
+  );
+  const [model, setModel] = useLocalStorage(
+    "model",
+    (DEFAULT_MODEL as string) || MODELS[0].value
+  );
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
   const [openProModal, setOpenProModal] = useState(false);
@@ -373,8 +380,8 @@ export function AskAI({
               selectedElement
                 ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
                 : isFollowUp && (!isSameHtml || pages?.length > 1)
-                ? "Ask DeepSite for edits"
-                : "Ask DeepSite anything..."
+                ? "Ask DeepSite for edits (keep it short)"
+                : "Describe a tiny component or change (1–2 sentences)"
             }
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
@@ -384,6 +391,9 @@ export function AskAI({
               }
             }}
           />
+          <div className="px-4 pb-1 -mt-2 text-[11px] text-neutral-400">
+            Tip: Small prompts → small, fast apps. We cap output length in demo mode.
+          </div>
         </div>
         <div className="flex items-center justify-between gap-2 px-4 pb-3 mt-2">
           <div className="flex-1 flex items-center justify-start gap-1.5">
@@ -434,16 +444,18 @@ export function AskAI({
             {/* <InviteFriends /> */}
           </div>
           <div className="flex items-center justify-end gap-2">
-            <Settings
-              provider={provider as string}
-              model={model as string}
-              onChange={setProvider}
-              onModelChange={setModel}
-              open={openProvider}
-              error={providerError}
-              isFollowUp={!isSameHtml && isFollowUp}
-              onClose={setOpenProvider}
-            />
+            {!EMBED_MODE && (
+              <Settings
+                provider={provider as string}
+                model={model as string}
+                onChange={setProvider}
+                onModelChange={setModel}
+                open={openProvider}
+                error={providerError}
+                isFollowUp={!isSameHtml && isFollowUp}
+                onClose={setOpenProvider}
+              />
+            )}
             <Button
               size="iconXs"
               disabled={isAiWorking || !prompt.trim()}
@@ -453,7 +465,9 @@ export function AskAI({
             </Button>
           </div>
         </div>
-        <LoginModal open={open} onClose={() => setOpen(false)} pages={pages} />
+        {!HIDE_LOGIN && (
+          <LoginModal open={open} onClose={() => setOpen(false)} pages={pages} />
+        )}
         <ProModal
           pages={pages}
           open={openProModal}

components/editor/deploy-button/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
 import { MdSave } from "react-icons/md";
 

components/editor/footer/index.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { MdAdd } from "react-icons/md";
 import { History } from "@/components/editor/history";
 import { UserMenu } from "@/components/user-menu";
+import { HIDE_DEPLOY, HIDE_LOGIN } from "@/lib/flags";
 import { useUser } from "@/hooks/useUser";
 import Link from "next/link";
 import { useLocalStorage } from "react-use";
@@ -64,7 +65,7 @@ export function Footer({
   return (
     <footer className="border-t bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 py-2 flex items-center justify-between sticky bottom-0 z-20">
       <div className="flex items-center gap-2">
-        {user ? (
+        {!HIDE_LOGIN && user ? (
           user?.isLocalUse ? (
             <>
               <div className="max-w-max bg-amber-500/10 rounded-full px-3 py-1 text-amber-500 border border-amber-500/20 text-sm font-semibold">
@@ -74,14 +75,14 @@ export function Footer({
           ) : (
             <UserMenu className="!p-1 !pr-3 !h-auto" />
           )
-        ) : (
+        ) : !HIDE_LOGIN ? (
           <Button size="sm" variant="default" onClick={handleClick}>
             <LogIn className="text-sm" />
             Log In
           </Button>
-        )}
-        {user && !isNew && <p className="text-neutral-700">|</p>}
-        {!isNew && (
+        ) : null}
+        {!HIDE_LOGIN && user && !isNew && <p className="text-neutral-700">|</p>}
+        {!HIDE_DEPLOY && !isNew && (
           <Link href="/projects/new">
             <Button size="sm" variant="secondary">
               <MdAdd className="text-sm" />
@@ -100,6 +101,7 @@ export function Footer({
         <a
           href="https://huggingface.co/spaces/victor/deepsite-gallery"
           target="_blank"
+          rel="noopener noreferrer"
         >
           <Button size="sm" variant="ghost">
             <SparkleIcon className="size-3.5" />
@@ -109,6 +111,7 @@ export function Footer({
         <a
           target="_blank"
           href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/157"
+          rel="noopener noreferrer"
         >
           <Button size="sm" variant="outline">
             <HelpCircle className="size-3.5" />
@@ -138,6 +141,7 @@ export function Footer({
                   "hover:bg-neutral-800": device !== deviceItem.name,
                 }
               )}
+              aria-label={`Switch to ${deviceItem.name} preview`}
               onClick={() => setDevice(deviceItem.name as "desktop" | "mobile")}
             >
               <deviceItem.icon className="text-sm" />

components/editor/index.tsx

@@ -27,6 +27,7 @@ import { SaveButton } from "./save-button";
 import { LoadProject } from "../my-projects/load-project";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
 import { ListPages } from "./pages";
+import { HIDE_DEPLOY, HIDE_LOGIN } from "@/lib/flags";
 
 export const AppEditor = ({
   project,
@@ -195,16 +196,22 @@ export const AppEditor = ({
   return (
     <section className="h-[100dvh] bg-neutral-950 flex flex-col">
       <Header tab={currentTab} onNewTab={setCurrentTab}>
-        <LoadProject
-          onSuccess={(project: Project) => {
-            router.push(`/projects/${project.space_id}`);
-          }}
-        />
+        {!HIDE_LOGIN && (
+          <LoadProject
+            onSuccess={(project: Project) => {
+              router.push(`/projects/${project.space_id}`);
+            }}
+          />
+        )}
         {/* for these buttons pass the whole pages */}
-        {project?._id ? (
-          <SaveButton pages={pages} prompts={prompts} />
-        ) : (
-          <DeployButton pages={pages} prompts={prompts} />
+        {!HIDE_DEPLOY && (
+          <>
+            {project?._id ? (
+              <SaveButton pages={pages} prompts={prompts} />
+            ) : (
+              <DeployButton pages={pages} prompts={prompts} />
+            )}
+          </>
         )}
       </Header>
       <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full max-lg:h-[calc(100%-82px)] relative">

lib/flags.ts

@@ -0,0 +1,36 @@
+// Centralized feature flags and defaults for embed/lite mode
+// Use NEXT_PUBLIC_* for values read in client components
+// Avoid Node type dependency
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const process: any;
+
+export const EMBED_MODE = (process.env.NEXT_PUBLIC_EMBED_MODE ?? "false") === "true";
+export const DISABLE_AUTH = EMBED_MODE || (process.env.NEXT_PUBLIC_DISABLE_AUTH ?? process.env.DISABLE_AUTH ?? "false") === "true";
+
+// Default model/provider for simplified UI
+// Choose a responsive general-purpose coding model from the existing list
+export const DEFAULT_MODEL = process.env.NEXT_PUBLIC_DEFAULT_MODEL
+  || process.env.DEFAULT_MODEL
+  || "moonshotai/Kimi-K2-Instruct-0905"; // fast on Groq if configured
+
+export const DEFAULT_PROVIDER = process.env.NEXT_PUBLIC_DEFAULT_PROVIDER
+  || process.env.DEFAULT_PROVIDER
+  || "groq"; // fallback; will be validated against model/providers list
+
+// Anonymous/IP rate limit for no-login usage
+export const MAX_REQUESTS_PER_IP_ENV = Number(
+  process.env.NEXT_PUBLIC_MAX_REQUESTS_PER_IP
+  || process.env.MAX_REQUESTS_PER_IP
+  || 2
+);
+
+// Hard cap on model output tokens to control cost in demo/embed mode
+export const MAX_OUTPUT_TOKENS = Number(
+  process.env.NEXT_PUBLIC_MAX_OUTPUT_TOKENS
+  || process.env.MAX_OUTPUT_TOKENS
+  || (EMBED_MODE ? 1000 : 2000)
+);
+
+// UI toggles derived from flags
+export const HIDE_LOGIN = DISABLE_AUTH || EMBED_MODE;
+export const HIDE_DEPLOY = EMBED_MODE; // hide deploy/save in embedded demo

lib/providers.ts

@@ -34,7 +34,9 @@ export const PROVIDERS = {
     max_tokens: 16_384,
     id: "groq",
   },
-};
+} as const;
+
+export type ProviderId = keyof typeof PROVIDERS;
 
 export const MODELS = [
   {

next.config.ts

@@ -25,7 +25,11 @@ const nextConfig: NextConfig = {
     return config;
   },
   images: {
-    remotePatterns: [new URL('https://huggingface.co/**')],
+    remotePatterns: [
+      { protocol: 'https', hostname: 'huggingface.co', pathname: '/**' },
+      { protocol: 'https', hostname: 'cdn-lfs.huggingface.co', pathname: '/**' },
+      { protocol: 'https', hostname: 'hf.co', pathname: '/**' },
+    ],
   },
 };