add live preview

app/api/me/projects/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, createRepo, listCommits, uploadFiles } from "@huggingface/hub";
+import { RepoDesignation, createRepo, listCommits, spaceInfo, uploadFiles } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
 import { Commit, Page } from "@/types";
@@ -55,15 +55,16 @@ This project was created with [DeepSite](https://deepsite.hf.co).
   });
 
   try {
-    const { repoUrl } = await createRepo({
+    const { repoUrl} = await createRepo({
       repo,
       accessToken: user.token as string,
     });
+    const commitTitle = !prompt || prompt.trim() === "" ? "Redesign my website" : prompt;
     await uploadFiles({
       repo,
       files,
       accessToken: user.token as string,
-      commitTitle: prompt ?? "Redesign my website"
+      commitTitle
     });
 
     const path = repoUrl.split("/").slice(-2).join("/");
@@ -80,12 +81,19 @@ This project was created with [DeepSite](https://deepsite.hf.co).
       });
     }
 
+    const space = await spaceInfo({
+      name: repo.name,
+      accessToken: user.token as string,
+    });
+
     let newProject = {
       files,
       pages,
       commits,
       project: {
-        
+        id: space.id,
+        space_id: space.name,
+        _updatedAt: space.updatedAt,
       }
     }
     

components/editor/ask-ai/loading.tsx

@@ -1,18 +1,45 @@
 import Loading from "@/components/loading";
+import { useState } from "react";
+import { useInterval } from "react-use";
+
+const TEXTS = [
+  "Teaching pixels to dance with style...",
+  "AI is having a creative breakthrough...",
+  "Channeling digital vibes into pure code...",
+  "Summoning the website spirits...",
+  "Brewing some algorithmic magic...",
+  "Composing a symphony of divs and spans...",
+  "Riding the wave of computational creativity...",
+  "Aligning the stars for perfect design...",
+  "Training circus animals to write CSS...",
+  "Launching ideas into the digital stratosphere...",
+];
 
 export const AiLoading = ({
-  text = "Ai is working...",
+  text,
   className,
 }: {
   text?: string;
   className?: string;
 }) => {
+  const [selectedText, setSelectedText] = useState(
+    text ?? TEXTS[Math.floor(Math.random() * TEXTS.length)]
+  );
+  useInterval(() => {
+    if (!text) {
+      if (selectedText === TEXTS[TEXTS.length - 1]) {
+        setSelectedText(TEXTS[0]);
+      } else {
+        setSelectedText(TEXTS[TEXTS.indexOf(selectedText) + 1]);
+      }
+    }
+  }, 12000);
   return (
     <div className={`flex items-center justify-start gap-2 ${className}`}>
-      <Loading overlay={false} className="!size-4 opacity-50" />
+      <Loading overlay={false} className="!size-5 opacity-50" />
       <p className="text-neutral-400 text-sm">
         <span className="inline-flex">
-          {text.split("").map((char, index) => (
+          {selectedText.split("").map((char, index) => (
             <span
               key={index}
               className="bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse"

components/editor/live-preview/index.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import classNames from "classnames";
+
+import { Button } from "@/components/ui/button";
+import { Maximize, Minimize } from "lucide-react";
+
+interface LivePreviewProps {
+  currentPageData: { path: string; html: string } | undefined;
+  isAiWorking: boolean;
+  defaultHTML: string;
+  className?: string;
+}
+
+export const LivePreview = ({
+  currentPageData,
+  isAiWorking,
+  defaultHTML,
+  className,
+}: LivePreviewProps) => {
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [displayedHtml, setDisplayedHtml] = useState<string>("");
+  const latestHtmlRef = useRef<string>("");
+  const displayedHtmlRef = useRef<string>("");
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    displayedHtmlRef.current = displayedHtml;
+  }, [displayedHtml]);
+
+  useEffect(() => {
+    if (currentPageData?.html && currentPageData.html !== defaultHTML) {
+      latestHtmlRef.current = currentPageData.html;
+    }
+  }, [currentPageData?.html, defaultHTML]);
+
+  useEffect(() => {
+    if (!currentPageData?.html || currentPageData.html === defaultHTML) {
+      return;
+    }
+
+    if (!displayedHtml || !isAiWorking) {
+      setDisplayedHtml(currentPageData.html);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+
+    if (isAiWorking && !intervalRef.current) {
+      intervalRef.current = setInterval(() => {
+        if (
+          latestHtmlRef.current &&
+          latestHtmlRef.current !== displayedHtmlRef.current
+        ) {
+          setDisplayedHtml(latestHtmlRef.current);
+        }
+      }, 3000);
+    }
+  }, [currentPageData?.html, defaultHTML, isAiWorking, displayedHtml]);
+
+  useEffect(() => {
+    if (!isAiWorking && intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+      if (latestHtmlRef.current) {
+        setDisplayedHtml(latestHtmlRef.current);
+      }
+    }
+  }, [isAiWorking]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, []);
+
+  if (!displayedHtml) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        "absolute z-40 bg-white/95 backdrop-blur-sm border border-neutral-200 shadow-lg transition-all duration-500 ease-out transform scale-100 opacity-100 animate-in slide-in-from-bottom-4 zoom-in-95 rounded-xl",
+        {
+          "shadow-green-500/20 shadow-2xl border-green-200": isAiWorking,
+        },
+        className
+      )}
+    >
+      <div
+        className={classNames(
+          "flex flex-col animate-in fade-in duration-300",
+          isMaximized ? "w-[60dvw] h-[80dvh]" : "w-80 h-96"
+        )}
+      >
+        <div className="flex items-center justify-between p-3 border-b border-neutral-200">
+          <div className="flex items-center gap-2">
+            <div className="size-2 bg-green-500 rounded-full animate-pulse shadow-sm shadow-green-500/50"></div>
+            <span className="text-xs font-medium text-neutral-800">
+              Live Preview
+            </span>
+            {isAiWorking && (
+              <span className="text-xs text-green-600 font-medium animate-pulse">
+                • Updating
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="iconXs"
+              className="!rounded-md !border-neutral-200 hover:bg-neutral-50"
+              onClick={() => setIsMaximized(!isMaximized)}
+            >
+              {isMaximized ? (
+                <Minimize className="text-neutral-400 size-3" />
+              ) : (
+                <Maximize className="text-neutral-400 size-3" />
+              )}
+            </Button>
+          </div>
+        </div>
+        <div className="flex-1 bg-black overflow-hidden relative rounded-b-xl">
+          <iframe
+            className="w-full h-full border-0"
+            srcDoc={displayedHtml}
+            sandbox="allow-scripts allow-same-origin"
+            title="Live Preview"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

components/editor/preview/index.tsx

@@ -13,6 +13,7 @@ import { AnimatedBlobs } from "@/components/animated-blobs";
 import { AiLoading } from "../ask-ai/loading";
 import { defaultHTML } from "@/lib/consts";
 import { Button } from "@/components/ui/button";
+import { LivePreview } from "../live-preview";
 import {
   MousePointerClick,
   History,
@@ -32,6 +33,7 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     currentTab,
     currentCommit,
     setCurrentCommit,
+    currentPageData,
   } = useEditor();
   const {
     isEditableModeEnabled,
@@ -195,12 +197,12 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
       ) : iframeSrc === "" ||
         isLoadingProject ||
         (isAiWorking && iframeSrc == "") ? (
-        <div className="w-full h-full flex items-center justify-center">
+        <div className="w-full h-full flex items-center justify-center relative">
           <div className="py-10 w-full relative z-1 max-w-3xl mx-auto text-center">
             <AiLoading
               text={
                 isAiWorking && iframeSrc === ""
-                  ? "Creating your Project..."
+                  ? undefined
                   : "Fetching your space..."
               }
               className="flex-col"
@@ -208,6 +210,12 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
             <AnimatedBlobs />
             <AnimatedBlobs />
           </div>
+          <LivePreview
+            currentPageData={currentPageData}
+            isAiWorking={isAiWorking}
+            defaultHTML={defaultHTML}
+            className="bottom-4 left-4"
+          />
         </div>
       ) : (
         <>

lib/prompts.ts

@@ -18,7 +18,7 @@ export const PROMPT_FOR_REWRITE_PROMPT_END = " >>>>>>> PROMPT_FOR_REWRITE_PROMPT
 
 export const PROMPT_FOR_IMAGE_GENERATION = `If you want to use image placeholder, http://Static.photos Usage:Format: http://static.photos/[category]/[dimensions]/[seed] where dimensions must be one of: 200x200, 320x240, 640x360, 1024x576, or 1200x630; seed can be any number (1-999+) for consistent images or omit for random; categories include: nature, office, people, technology, minimal, abstract, aerial, blurred, bokeh, gradient, monochrome, vintage, white, black, blue, red, green, yellow, cityscape, workspace, food, travel, textures, industry, indoor, outdoor, studio, finance, medical, season, holiday, event, sport, science, legal, estate, restaurant, retail, wellness, agriculture, construction, craft, cosmetic, automotive, gaming, or education.
 Examples: http://static.photos/red/320x240/133 (red-themed with seed 133), http://static.photos/640x360 (random category and image), http://static.photos/nature/1200x630/42 (nature-themed with seed 42).`
-export const PROMPT_FOR_PROJECT_NAME = `REQUIRED: Generate a name for the project, based on the user's request. Try to be creative and unique. It should be short and concise (max 6 words). DON'T FORGET IT, IT'S IMPORTANT!`
+export const PROMPT_FOR_PROJECT_NAME = `REQUIRED: Generate a name for the project, based on the user's request. Try to be creative and unique. Add a emoji at the end of the name. It should be short, like 6 words. Be fancy, creative and funny. DON'T FORGET IT, IT'S IMPORTANT!`
 
 export const INITIAL_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End Developer.
 You create website in a way a designer would, using ONLY HTML, CSS and Javascript.

lib/providers.ts

@@ -86,6 +86,7 @@ export const MODELS = [
     value: "deepseek-ai/DeepSeek-V3.1-Terminus",
     label: "DeepSeek V3.1 Terminus",
     providers: ["novita"],
+    autoProvider: "novita",
     isNew: true,
   }
 ];