pull

README.md

@@ -7,7 +7,6 @@ sdk: docker
 pinned: true
 app_port: 3000
 license: mit
-failure_strategy: rollback
 short_description: Generate any application by Vibe Coding
 models:
   - deepseek-ai/DeepSeek-V3-0324
@@ -19,10 +18,12 @@ models:
   - moonshotai/Kimi-K2-Instruct
   - moonshotai/Kimi-K2-Instruct-0905
   - zai-org/GLM-4.6
-  - MiniMaxAI/MiniMax-M2
-  - moonshotai/Kimi-K2-Thinking
 ---
 
 # DeepSite 🐳
 
 DeepSite is a Vibe Coding Platform designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
+
+## How to use it locally
+
+Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)

app/api/ask/route.ts

@@ -6,24 +6,38 @@ import { InferenceClient } from "@huggingface/inference";
 
 import { MODELS } from "@/lib/providers";
 import {
+  DIVIDER,
   FOLLOW_UP_SYSTEM_PROMPT,
-  FOLLOW_UP_SYSTEM_PROMPT_LIGHT,
   INITIAL_SYSTEM_PROMPT,
-  INITIAL_SYSTEM_PROMPT_LIGHT,
   MAX_REQUESTS_PER_IP,
+  NEW_FILE_END,
+  NEW_FILE_START,
+  REPLACE_END,
+  SEARCH_START,
+  UPDATE_FILE_START,
+  UPDATE_FILE_END,
   PROMPT_FOR_PROJECT_NAME,
 } from "@/lib/prompts";
+import { calculateMaxTokens, estimateInputTokens, getProviderSpecificConfig } from "@/lib/max-tokens";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { Page } from "@/types";
+import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
 import { isAuthenticated } from "@/lib/auth";
 import { getBestProvider } from "@/lib/best-provider";
+// import { rewritePrompt } from "@/lib/rewrite-prompt";
+import { COLORS } from "@/lib/utils";
+import { templates } from "@/lib/templates";
+import { injectDeepSiteBadge, isIndexPage } from "@/lib/inject-badge";
 
 const ipAddresses = new Map();
 
+const STREAMING_TIMEOUT = 180000;
+const REQUEST_TIMEOUT = 240000;
+export const maxDuration = 300;
+
 export async function POST(request: NextRequest) {
   const authHeaders = await headers();
-  const tokenInHeaders = authHeaders.get("Authorization");
-  const userToken = tokenInHeaders ? tokenInHeaders.replace("Bearer ", "") : request.cookies.get(MY_TOKEN_KEY())?.value;
+  const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
   const { prompt, provider, model, redesignMarkdown, enhancedSettings, pages } = body;
@@ -63,7 +77,7 @@ export async function POST(request: NextRequest) {
     ? authHeaders.get("x-forwarded-for")?.split(",")[1].trim()
     : authHeaders.get("x-forwarded-for");
 
-  if (!token || token === "null" || token === "") {
+  if (!token) {
     ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
     if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
       return NextResponse.json(
@@ -80,6 +94,14 @@ export async function POST(request: NextRequest) {
     billTo = "huggingface";
   }
 
+  const selectedProvider = await getBestProvider(selectedModel.value, provider)
+
+  let rewrittenPrompt = redesignMarkdown ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : prompt;
+
+  if (enhancedSettings.isActive) {
+    // rewrittenPrompt = await rewritePrompt(rewrittenPrompt, enhancedSettings, { token, billTo }, selectedModel.value, selectedProvider.provider);
+  }
+
   try {
     const encoder = new TextEncoder();
     const stream = new TransformStream();
@@ -94,27 +116,29 @@ export async function POST(request: NextRequest) {
     });
 
     (async () => {
+      // let completeResponse = "";
+      let timeoutId: NodeJS.Timeout | null = null;
+      let isTimedOut = false;
+      
       try {
         const client = new InferenceClient(token);
         
-        const systemPrompt = selectedModel.value.includes('MiniMax') 
-          ? INITIAL_SYSTEM_PROMPT_LIGHT 
-          : INITIAL_SYSTEM_PROMPT;
+        const systemPrompt = INITIAL_SYSTEM_PROMPT;
+        
+        const userPrompt = rewrittenPrompt;
+        const estimatedInputTokens = estimateInputTokens(systemPrompt, userPrompt);
+        const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, true);
+        const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
         
-        const userPrompt = prompt;
-                
         const chatCompletion = client.chatCompletionStream(
           {
-            model: selectedModel.value + (provider !== "auto" ? `:${provider}` : ""),
+            model: selectedModel.value,
+            provider: selectedProvider.provider,
             messages: [
               {
                 role: "system",
                 content: systemPrompt,
               },
-              ...(redesignMarkdown ? [{
-                role: "assistant",
-                content: `User will ask you to redesign the site based on this markdown. Use the same images as the site, but you can improve the content and the design. Here is the markdown: ${redesignMarkdown}`
-              }] : []),
               {
                 role: "user",
                 content: userPrompt + (enhancedSettings.isActive ? `1. I want to use the following primary color: ${enhancedSettings.primaryColor} (eg: bg-${enhancedSettings.primaryColor}-500).
@@ -122,28 +146,56 @@ export async function POST(request: NextRequest) {
 3. I want to use the following theme: ${enhancedSettings.theme} mode.` : "")
               },
             ],
-            ...(selectedModel.top_k ? { top_k: selectedModel.top_k } : {}),
-            ...(selectedModel.temperature ? { temperature: selectedModel.temperature } : {}),
-            ...(selectedModel.top_p ? { top_p: selectedModel.top_p } : {}),
+            ...providerConfig,
           },
           billTo ? { billTo } : {}
         );
 
-        while (true) {
-          const { done, value } = await chatCompletion.next()
-          if (done) {
-            break;
-          }
-
-          const chunk = value.choices[0]?.delta?.content;
-          if (chunk) {
-            await writer.write(encoder.encode(chunk));
-          }
-        }
+        // Set up timeout
+        const timeoutPromise = new Promise((_, reject) => {
+          timeoutId = setTimeout(() => {
+            isTimedOut = true;
+            reject(new Error('Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model.'));
+          }, STREAMING_TIMEOUT);
+        });
+
+        // Race between streaming and timeout
+        await Promise.race([
+          (async () => {
+            while (true) {
+              const { done, value } = await chatCompletion.next()
+              if (done) {
+                break;
+              }
+
+              const chunk = value.choices[0]?.delta?.content;
+              if (chunk) {
+                await writer.write(encoder.encode(chunk));
+              }
+            }
+          })(),
+          timeoutPromise
+        ]);
+
+        // Clear timeout if successful
+        if (timeoutId) clearTimeout(timeoutId);
         
+        // Explicitly close the writer after successful completion
         await writer.close();
       } catch (error: any) {
-        if (error.message?.includes("exceeded your monthly included credits")) {
+        // Clear timeout on error
+        if (timeoutId) clearTimeout(timeoutId);
+        
+        if (isTimedOut || error.message?.includes('timeout') || error.message?.includes('Request timeout')) {
+          await writer.write(
+            encoder.encode(
+              JSON.stringify({
+                ok: false,
+                message: "Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model.",
+              })
+            )
+          );
+        } else if (error.message?.includes("exceeded your monthly included credits")) {
           await writer.write(
             encoder.encode(
               JSON.stringify({
@@ -207,9 +259,11 @@ export async function PUT(request: NextRequest) {
   const authHeaders = await headers();
 
   const body = await request.json();
-  const { prompt, provider, selectedElementHtml, model, pages, files, repoId, isNew } =
+  const { prompt, provider, selectedElementHtml, model, pages, files, repoId: repoIdFromBody, isNew } =
     body;
 
+  let repoId = repoIdFromBody;
+
   if (!prompt || pages.length === 0) {
     return NextResponse.json(
       { ok: false, error: "Missing required fields" },
@@ -243,7 +297,7 @@ export async function PUT(request: NextRequest) {
     ? authHeaders.get("x-forwarded-for")?.split(",")[1].trim()
     : authHeaders.get("x-forwarded-for");
 
-  if (!token || token === "null" || token === "") {
+  if (!token) {
     ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
     if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
       return NextResponse.json(
@@ -260,131 +314,398 @@ export async function PUT(request: NextRequest) {
     billTo = "huggingface";
   }
 
-  try {
-    const encoder = new TextEncoder();
-    const stream = new TransformStream();
-    const writer = stream.writable.getWriter();
+  const client = new InferenceClient(token);
 
-    const response = new NextResponse(stream.readable, {
-      headers: {
-        "Content-Type": "text/plain; charset=utf-8",
-        "Cache-Control": "no-cache",
-        Connection: "keep-alive",
-      },
-    });
+  const escapeRegExp = (string: string) => {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  };
 
-    (async () => {
-      try {
-        const client = new InferenceClient(token);
+  const createFlexibleHtmlRegex = (searchBlock: string) => {
+    let searchRegex = escapeRegExp(searchBlock)
+      .replace(/\s+/g, '\\s*')
+      .replace(/>\s*</g, '>\\s*<')
+      .replace(/\s*>/g, '\\s*>');
+    
+    return new RegExp(searchRegex, 'g');
+  };
 
-        const basePrompt = selectedModel.value.includes('MiniMax') 
-          ? FOLLOW_UP_SYSTEM_PROMPT_LIGHT 
-          : FOLLOW_UP_SYSTEM_PROMPT;
-        const systemPrompt = basePrompt + (isNew ? PROMPT_FOR_PROJECT_NAME : "");
-        const userContext = "You are modifying the HTML file based on the user's request.";
+  const selectedProvider = await getBestProvider(selectedModel.value, provider)
+
+  try {
+    const systemPrompt = FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : "");
+    const userContext = "You are modifying the HTML file based on the user's request.";
+    
+    const allPages = pages || [];
+    const pagesContext = allPages
+      .map((p: Page) => `- ${p.path}\n${p.html}`)
+      .join("\n\n");
+    
+    const assistantContext = `${
+      selectedElementHtml
+        ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\` Could be in multiple pages, if so, update all the pages.`
+        : ""
+    }. Current pages (${allPages.length} total): ${pagesContext}. ${files?.length > 0 ? `Available images: ${files?.map((f: string) => f).join(', ')}.` : ""}`;
+    
+    const estimatedInputTokens = estimateInputTokens(systemPrompt, prompt, userContext + assistantContext);
+    const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, false);
+    const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
+    
+    const chatCompletion = client.chatCompletionStream(
+      {
+        model: selectedModel.value,
+        provider: selectedProvider.provider,
+        messages: [
+          {
+            role: "system",
+            content: systemPrompt,
+          },
+          {
+            role: "user",
+            content: userContext,
+          },
+          {
+            role: "assistant",
+            content: assistantContext,
+          },
+          {
+            role: "user",
+            content: prompt,
+          },
+        ],
+        ...providerConfig,
+      },
+      billTo ? { billTo } : {}
+    );
 
-        const allPages = pages || [];
-        const pagesContext = allPages
-          .map((p: Page) => `- ${p.path}\n${p.html}`)
-          .join("\n\n");
+    // Set up timeout for AI streaming
+    let chunk = "";
+    let timeoutId: NodeJS.Timeout | null = null;
+    let isTimedOut = false;
 
-        const assistantContext = `${selectedElementHtml
-            ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\` Could be in multiple pages, if so, update all the pages.`
-            : ""
-          }. Current pages (${allPages.length} total): ${pagesContext}. ${files?.length > 0 ? `Available images: ${files?.map((f: string) => f).join(', ')}.` : ""}`;
+    const timeoutPromise = new Promise<never>((_, reject) => {
+      timeoutId = setTimeout(() => {
+        isTimedOut = true;
+        reject(new Error('Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model.'));
+      }, REQUEST_TIMEOUT);
+    });
 
-        const chatCompletion = client.chatCompletionStream(
+    try {
+      await Promise.race([
+        (async () => {
+          while (true) {
+            const { done, value } = await chatCompletion.next();
+            if (done) {
+              break;
+            }
+
+            const deltaContent = value.choices[0]?.delta?.content;
+            if (deltaContent) {
+              chunk += deltaContent;
+            }
+          }
+        })(),
+        timeoutPromise
+      ]);
+
+      // Clear timeout if successful
+      if (timeoutId) clearTimeout(timeoutId);
+    } catch (timeoutError: any) {
+      // Clear timeout on error
+      if (timeoutId) clearTimeout(timeoutId);
+      
+      if (isTimedOut || timeoutError.message?.includes('timeout') || timeoutError.message?.includes('Request timeout')) {
+        return NextResponse.json(
           {
-            model: selectedModel.value + (provider !== "auto" ? `:${provider}` : ""),
-            messages: [
-              {
-                role: "system",
-                content: systemPrompt,
-              },
-              {
-                role: "user",
-                content: userContext,
-              },
-              {
-                role: "assistant",
-                content: assistantContext,
-              },
-              {
-                role: "user",
-                content: prompt,
-              },
-            ],
-            ...(selectedModel.top_k ? { top_k: selectedModel.top_k } : {}),
-            ...(selectedModel.temperature ? { temperature: selectedModel.temperature } : {}),
-            ...(selectedModel.top_p ? { top_p: selectedModel.top_p } : {}),
+            ok: false,
+            message: "Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model.",
           },
-          billTo ? { billTo } : {}
+          { status: 504 }
         );
+      }
+      throw timeoutError;
+    }
+    if (!chunk) {
+      return NextResponse.json(
+        { ok: false, message: "No content returned from the model" },
+        { status: 400 }
+      );
+    }
+
+    if (chunk) {
+      const updatedLines: number[][] = [];
+      let newHtml = "";
+      const updatedPages = [...(pages || [])];
 
-        // Stream the response chunks to the client
-        while (true) {
-          const { done, value } = await chatCompletion.next();
-          if (done) {
-            break;
+      const updateFileRegex = new RegExp(`${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${UPDATE_FILE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
+      let updateFileMatch;
+      
+      while ((updateFileMatch = updateFileRegex.exec(chunk)) !== null) {
+        const [, filePath, fileContent] = updateFileMatch;
+        
+        const pageIndex = updatedPages.findIndex(p => p.path === filePath);
+        if (pageIndex !== -1) {
+          let pageHtml = updatedPages[pageIndex].html;
+          
+          let processedContent = fileContent;
+          const htmlMatch = fileContent.match(/```html\s*([\s\S]*?)\s*```/);
+          if (htmlMatch) {
+            processedContent = htmlMatch[1];
+          }
+          let position = 0;
+          let moreBlocks = true;
+
+          while (moreBlocks) {
+            const searchStartIndex = processedContent.indexOf(SEARCH_START, position);
+            if (searchStartIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const dividerIndex = processedContent.indexOf(DIVIDER, searchStartIndex);
+            if (dividerIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const replaceEndIndex = processedContent.indexOf(REPLACE_END, dividerIndex);
+            if (replaceEndIndex === -1) {
+              moreBlocks = false;
+              continue;
+            }
+
+            const searchBlock = processedContent.substring(
+              searchStartIndex + SEARCH_START.length,
+              dividerIndex
+            );
+            const replaceBlock = processedContent.substring(
+              dividerIndex + DIVIDER.length,
+              replaceEndIndex
+            );
+
+            if (searchBlock.trim() === "") {
+              pageHtml = `${replaceBlock}\n${pageHtml}`;
+              updatedLines.push([1, replaceBlock.split("\n").length]);
+            } else {
+              const regex = createFlexibleHtmlRegex(searchBlock);
+              const match = regex.exec(pageHtml);
+              
+              if (match) {
+                const matchedText = match[0];
+                const beforeText = pageHtml.substring(0, match.index);
+                const startLineNumber = beforeText.split("\n").length;
+                const replaceLines = replaceBlock.split("\n").length;
+                const endLineNumber = startLineNumber + replaceLines - 1;
+
+                updatedLines.push([startLineNumber, endLineNumber]);
+                pageHtml = pageHtml.replace(matchedText, replaceBlock);
+              }
+            }
+
+            position = replaceEndIndex + REPLACE_END.length;
           }
 
-          const chunk = value.choices[0]?.delta?.content;
-          if (chunk) {
-            await writer.write(encoder.encode(chunk));
+          updatedPages[pageIndex].html = pageHtml;
+          
+          if (filePath === '/' || filePath === '/index' || filePath === 'index' || filePath === 'index.html') {
+            newHtml = pageHtml;
           }
         }
+      }
+
+      const newFileRegex = new RegExp(`${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${NEW_FILE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`, 'g');
+      let newFileMatch;
+      
+      while ((newFileMatch = newFileRegex.exec(chunk)) !== null) {
+        const [, filePath, fileContent] = newFileMatch;
+        
+        let fileData = fileContent;
+        // Try to extract content from code blocks
+        const htmlMatch = fileContent.match(/```html\s*([\s\S]*?)\s*```/);
+        const cssMatch = fileContent.match(/```css\s*([\s\S]*?)\s*```/);
+        const jsMatch = fileContent.match(/```javascript\s*([\s\S]*?)\s*```/);
+        
+        if (htmlMatch) {
+          fileData = htmlMatch[1];
+        } else if (cssMatch) {
+          fileData = cssMatch[1];
+        } else if (jsMatch) {
+          fileData = jsMatch[1];
+        }
+        
+        const existingFileIndex = updatedPages.findIndex(p => p.path === filePath);
+        
+        if (existingFileIndex !== -1) {
+          updatedPages[existingFileIndex] = {
+            path: filePath,
+            html: fileData.trim()
+          };
+        } else {
+          updatedPages.push({
+            path: filePath,
+            html: fileData.trim()
+          });
+        }
+      }
 
-        await writer.write(encoder.encode(`\n___METADATA_START___\n${JSON.stringify({
-          repoId,
-          isNew,
-          userName: user.name,
-        })}\n___METADATA_END___\n`));
+      if (updatedPages.length === pages?.length && !chunk.includes(UPDATE_FILE_START)) {
+        let position = 0;
+        let moreBlocks = true;
 
-        await writer.close();
-      } catch (error: any) {
-        if (error.message?.includes("exceeded your monthly included credits")) {
-          await writer.write(
-            encoder.encode(
-              JSON.stringify({
-                ok: false,
-                openProModal: true,
-                message: error.message,
-              })
-            )
-          );
-        } else if (error?.message?.includes("inference provider information")) {
-          await writer.write(
-            encoder.encode(
-              JSON.stringify({
-                ok: false,
-                openSelectProvider: true,
-                message: error.message,
-              })
-            )
+        while (moreBlocks) {
+          const searchStartIndex = chunk.indexOf(SEARCH_START, position);
+          if (searchStartIndex === -1) {
+            moreBlocks = false;
+            continue;
+          }
+
+          const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
+          if (dividerIndex === -1) {
+            moreBlocks = false;
+            continue;
+          }
+
+          const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
+          if (replaceEndIndex === -1) {
+            moreBlocks = false;
+            continue;
+          }
+
+          const searchBlock = chunk.substring(
+            searchStartIndex + SEARCH_START.length,
+            dividerIndex
           );
-        } else {
-          await writer.write(
-            encoder.encode(
-              JSON.stringify({
-                ok: false,
-                message:
-                  error.message ||
-                  "An error occurred while processing your request.",
-              })
-            )
+          const replaceBlock = chunk.substring(
+            dividerIndex + DIVIDER.length,
+            replaceEndIndex
           );
+
+          if (searchBlock.trim() === "") {
+            newHtml = `${replaceBlock}\n${newHtml}`;
+            updatedLines.push([1, replaceBlock.split("\n").length]);
+          } else {
+            const regex = createFlexibleHtmlRegex(searchBlock);
+            const match = regex.exec(newHtml);
+            
+            if (match) {
+              const matchedText = match[0];
+              const beforeText = newHtml.substring(0, match.index);
+              const startLineNumber = beforeText.split("\n").length;
+              const replaceLines = replaceBlock.split("\n").length;
+              const endLineNumber = startLineNumber + replaceLines - 1;
+
+              updatedLines.push([startLineNumber, endLineNumber]);
+              newHtml = newHtml.replace(matchedText, replaceBlock);
+            }
+          }
+
+          position = replaceEndIndex + REPLACE_END.length;
         }
-      } finally {
-        try {
-          await writer?.close();
-        } catch {
-          // ignore
+
+        const mainPageIndex = updatedPages.findIndex(p => p.path === '/' || p.path === '/index' || p.path === 'index');
+        if (mainPageIndex !== -1) {
+          updatedPages[mainPageIndex].html = newHtml;
         }
       }
-    })();
 
-    return response;
+      const files: File[] = [];
+      updatedPages.forEach((page: Page) => {
+        let mimeType = "text/html";
+        if (page.path.endsWith(".css")) {
+          mimeType = "text/css";
+        } else if (page.path.endsWith(".js")) {
+          mimeType = "text/javascript";
+        } else if (page.path.endsWith(".json")) {
+          mimeType = "application/json";
+        }
+        const content = (mimeType === "text/html" && isIndexPage(page.path)) && isNew
+          ? injectDeepSiteBadge(page.html) 
+          : page.html;
+        const file = new File([content], page.path, { type: mimeType });
+        files.push(file);
+      });
+
+      if (isNew) {
+        const projectName = chunk.match(/<<<<<<< PROJECT_NAME_START\s*([\s\S]*?)\s*>>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
+        const formattedTitle = projectName?.toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .split("-")
+          .filter(Boolean)
+          .join("-")
+          .slice(0, 96);
+        const repo: RepoDesignation = {
+          type: "space",
+          name: `${user.name}/${formattedTitle}`,
+        };
+        const { repoUrl} = await createRepo({
+          repo,
+          accessToken: user.token as string,
+        });
+        repoId = repoUrl.split("/").slice(-2).join("/");
+        const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
+        const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
+        const README = `---
+title: ${projectName}
+colorFrom: ${colorFrom}
+colorTo: ${colorTo}
+emoji: 🐳
+sdk: static
+pinned: false
+tags:
+  - deepsite-v3
+---
+
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).
+      `;
+        files.push(new File([README], "README.md", { type: "text/markdown" }));
+      }
+
+      const response = await uploadFiles({
+        repo: {
+          type: "space",
+          name: repoId,
+        },
+        files,
+        commitTitle: prompt,
+        accessToken: user.token as string,
+      });
+
+      return NextResponse.json({
+        ok: true,
+        updatedLines,
+        pages: updatedPages,
+        repoId,
+        commit: {
+          ...response.commit,
+          title: prompt,
+        }
+      });
+    } else {
+      return NextResponse.json(
+        { ok: false, message: "No content returned from the model" },
+        { status: 400 }
+      );
+    }
   } catch (error: any) {
+    if (error.message?.includes('timeout') || error.message?.includes('Request timeout')) {
+      return NextResponse.json(
+        {
+          ok: false,
+          message: "Request timeout: The operation took too long to complete. Please try again with a simpler request or try a different model.",
+        },
+        { status: 504 }
+      );
+    }
+    if (error.message?.includes("exceeded your monthly included credits")) {
+      return NextResponse.json(
+        {
+          ok: false,
+          openProModal: true,
+          message: error.message,
+        },
+        { status: 402 }
+      );
+    }
     return NextResponse.json(
       {
         ok: false,

app/api/me/projects/[namespace]/[repoId]/commits/[commitId]/promote/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, listFiles, spaceInfo, uploadFiles, deleteFiles, downloadFile } from "@huggingface/hub";
+import { RepoDesignation, listFiles, spaceInfo, uploadFiles, deleteFiles } from "@huggingface/hub";
 
 import { isAuthenticated } from "@/lib/auth";
 import { Page } from "@/types";
@@ -49,13 +49,13 @@ export async function POST(
       );
     }
 
+    // Fetch files from the specific commit
     const files: File[] = [];
     const pages: Page[] = [];
-    const mediaFiles: string[] = [];
     const allowedExtensions = ["html", "md", "css", "js", "json", "txt"];
-    const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif", "mp4", "webm", "ogg", "avi", "mov", "mp3", "wav", "ogg", "aac", "m4a"];
     const commitFilePaths: Set<string> = new Set();
     
+    // Get all files from the specific commit
     for await (const fileInfo of listFiles({
       repo,
       accessToken: user.token as string,
@@ -63,24 +63,26 @@ export async function POST(
     })) {
       const fileExtension = fileInfo.path.split('.').pop()?.toLowerCase();
       
-      if (fileInfo.path.endsWith(".html") || fileInfo.path.endsWith(".css") || fileInfo.path.endsWith(".js") || fileInfo.path.endsWith(".json")) {
+      if (allowedExtensions.includes(fileExtension || "")) {
         commitFilePaths.add(fileInfo.path);
         
-        const blob = await downloadFile({ 
-          repo, 
-          accessToken: user.token as string, 
-          path: fileInfo.path, 
-          revision: commitId,
-          raw: true 
-        });
-        const content = await blob?.text();
+        // Fetch the file content from the specific commit
+        const response = await fetch(
+          `https://huggingface.co/spaces/${namespace}/${repoId}/raw/${commitId}/${fileInfo.path}`
+        );
         
-        if (content) {
+        if (response.ok) {
+          const content = await response.text();
           let mimeType = "text/plain";
           
           switch (fileExtension) {
             case "html":
               mimeType = "text/html";
+              // Add HTML files to pages array for client-side setPages
+              pages.push({
+                path: fileInfo.path,
+                html: content,
+              });
               break;
             case "css":
               mimeType = "text/css";
@@ -91,62 +93,18 @@ export async function POST(
             case "json":
               mimeType = "application/json";
               break;
-          }
-          
-          if (fileInfo.path === "index.html") {
-            pages.unshift({
-              path: fileInfo.path,
-              html: content,
-            });
-          } else {
-            pages.push({
-              path: fileInfo.path,
-              html: content,
-            });
+            case "md":
+              mimeType = "text/markdown";
+              break;
           }
           
           const file = new File([content], fileInfo.path, { type: mimeType });
           files.push(file);
         }
       }
-      else if (fileInfo.type === "directory" && (["videos", "images", "audio"].includes(fileInfo.path) || fileInfo.path === "components")) {
-        for await (const subFileInfo of listFiles({
-          repo,
-          accessToken: user.token as string,
-          revision: commitId,
-          path: fileInfo.path,
-        })) {
-          if (subFileInfo.path.includes("components")) {
-            commitFilePaths.add(subFileInfo.path);
-            const blob = await downloadFile({ 
-              repo, 
-              accessToken: user.token as string, 
-              path: subFileInfo.path, 
-              revision: commitId,
-              raw: true 
-            });
-            const content = await blob?.text();
-            
-            if (content) {
-              pages.push({
-                path: subFileInfo.path,
-                html: content,
-              });
-              
-              const file = new File([content], subFileInfo.path, { type: "text/html" });
-              files.push(file);
-            }
-          } else if (allowedFilesExtensions.includes(subFileInfo.path.split(".").pop() || "")) {
-            commitFilePaths.add(subFileInfo.path);
-            mediaFiles.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${subFileInfo.path}`);
-          }
-        }
-      }
-      else if (allowedExtensions.includes(fileExtension || "")) {
-        commitFilePaths.add(fileInfo.path);
-      }
     }
 
+    // Get files currently in main branch to identify files to delete
     const mainBranchFilePaths: Set<string> = new Set();
     for await (const fileInfo of listFiles({
       repo,
@@ -160,6 +118,7 @@ export async function POST(
       }
     }
 
+    // Identify files to delete (exist in main but not in commit)
     const filesToDelete: string[] = [];
     for (const mainFilePath of mainBranchFilePaths) {
       if (!commitFilePaths.has(mainFilePath)) {
@@ -174,6 +133,7 @@ export async function POST(
       );
     }
 
+    // Delete files that exist in main but not in the commit being promoted
     if (filesToDelete.length > 0) {
       await deleteFiles({
         repo,
@@ -184,6 +144,7 @@ export async function POST(
       });
     }
 
+    // Upload the files to the main branch with a promotion commit message
     if (files.length > 0) {
       await uploadFiles({
         repo,
@@ -200,7 +161,6 @@ export async function POST(
         message: "Version promoted successfully",
         promotedCommit: commitId,
         pages: pages,
-        files: mediaFiles,
       },
       { status: 200 }
     );

app/api/me/projects/[namespace]/[repoId]/commits/[commitId]/route.ts

@@ -1,102 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, listFiles, spaceInfo, downloadFile } from "@huggingface/hub";
-
-import { isAuthenticated } from "@/lib/auth";
-import { Page } from "@/types";
-
-export async function GET(
-  req: NextRequest,
-  { params }: { 
-    params: Promise<{ 
-      namespace: string; 
-      repoId: string; 
-      commitId: string; 
-    }> 
-  }
-) {
-  const user = await isAuthenticated();
-
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-
-  const param = await params;
-  const { namespace, repoId, commitId } = param;
-
-  try {
-    const repo: RepoDesignation = {
-      type: "space",
-      name: `${namespace}/${repoId}`,
-    };
-
-    const space = await spaceInfo({
-      name: `${namespace}/${repoId}`,
-      accessToken: user.token as string,
-      additionalFields: ["author"],
-    });
-
-    if (!space || space.sdk !== "static") {
-      return NextResponse.json(
-        { ok: false, error: "Space is not a static space." },
-        { status: 404 }
-      );
-    }
-    
-    if (space.author !== user.name) {
-      return NextResponse.json(
-        { ok: false, error: "Space does not belong to the authenticated user." },
-        { status: 403 }
-      );
-    }
-
-    const pages: Page[] = [];
-    
-    for await (const fileInfo of listFiles({
-      repo,
-      accessToken: user.token as string,
-      revision: commitId,
-    })) {
-      const fileExtension = fileInfo.path.split('.').pop()?.toLowerCase();
-      
-      if (fileInfo.path.endsWith(".html") || fileInfo.path.endsWith(".css") || fileInfo.path.endsWith(".js") || fileInfo.path.endsWith(".json")) {
-        const blob = await downloadFile({ 
-          repo, 
-          accessToken: user.token as string, 
-          path: fileInfo.path, 
-          revision: commitId,
-          raw: true 
-        });
-        const content = await blob?.text();
-        
-        if (content) {
-          if (fileInfo.path === "index.html") {
-            pages.unshift({
-              path: fileInfo.path,
-              html: content,
-            });
-          } else {
-            pages.push({
-              path: fileInfo.path,
-              html: content,
-            });
-          }
-        }
-      }
-    }
-    
-    return NextResponse.json({
-      ok: true,
-      pages,
-    });
-  } catch (error: any) {
-    console.error("Error fetching commit pages:", error);
-    return NextResponse.json(
-      {
-        ok: false,
-        error: error.message || "Failed to fetch commit pages",
-      },
-      { status: 500 }
-    );
-  }
-}
-

app/api/me/projects/[namespace]/[repoId]/download/route.ts

@@ -1,105 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { RepoDesignation, listFiles, spaceInfo, downloadFile } from "@huggingface/hub";
-import JSZip from "jszip";
-
-import { isAuthenticated } from "@/lib/auth";
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ namespace: string; repoId: string }> }
-) {
-  const user = await isAuthenticated();
-
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-
-  const param = await params;
-  const { namespace, repoId } = param;
-
-  try {
-    const space = await spaceInfo({
-      name: `${namespace}/${repoId}`,
-      accessToken: user.token as string,
-      additionalFields: ["author"],
-    });
-
-    if (!space || space.sdk !== "static") {
-      return NextResponse.json(
-        {
-          ok: false,
-          error: "Space is not a static space",
-        },
-        { status: 404 }
-      );
-    }
-
-    if (space.author !== user.name) {
-      return NextResponse.json(
-        {
-          ok: false,
-          error: "Space does not belong to the authenticated user",
-        },
-        { status: 403 }
-      );
-    }
-
-    const repo: RepoDesignation = {
-      type: "space",
-      name: `${namespace}/${repoId}`,
-    };
-
-    const zip = new JSZip();
-
-    for await (const fileInfo of listFiles({ 
-      repo, 
-      accessToken: user.token as string, 
-      recursive: true,
-    })) {
-      if (fileInfo.type === "directory" || fileInfo.path.startsWith(".")) {
-        continue;
-      }
-
-      try {
-        const blob = await downloadFile({ 
-          repo, 
-          accessToken: user.token as string, 
-          path: fileInfo.path, 
-          raw: true 
-        });
-
-        if (blob) {
-          const arrayBuffer = await blob.arrayBuffer();
-          zip.file(fileInfo.path, arrayBuffer);
-        }
-      } catch (error) {
-        console.error(`Error downloading file ${fileInfo.path}:`, error);
-      }
-    }
-
-    const zipBlob = await zip.generateAsync({ 
-      type: "blob",
-      compression: "DEFLATE",
-      compressionOptions: {
-        level: 6
-      }
-    });
-
-    const projectName = `${namespace}-${repoId}`.replace(/[^a-zA-Z0-9-_]/g, '_');
-    const filename = `${projectName}.zip`;
-
-    return new NextResponse(zipBlob, {
-      headers: {
-        "Content-Type": "application/zip",
-        "Content-Disposition": `attachment; filename="${filename}"`,
-        "Content-Length": zipBlob.size.toString(),
-      },
-    });
-  } catch (error: any) {
-    return NextResponse.json(
-      { ok: false, error: error.message || "Failed to create ZIP file" },
-      { status: 500 }
-    );
-  }
-}
-

app/api/me/projects/[namespace]/[repoId]/route.ts

@@ -108,7 +108,7 @@ export async function GET(
     const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif", "mp4", "webm", "ogg", "avi", "mov", "mp3", "wav", "ogg", "aac", "m4a"];
     
     for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
-      if (fileInfo.path.endsWith(".html") || fileInfo.path.endsWith(".css") || fileInfo.path.endsWith(".js") || fileInfo.path.endsWith(".json")) {
+      if (fileInfo.path.endsWith(".html") || fileInfo.path.endsWith(".css") || fileInfo.path.endsWith(".js")) {
         const blob = await downloadFile({ repo, accessToken: user.token as string, path: fileInfo.path, raw: true });
         const html = await blob?.text();
         if (!html) {

app/api/me/projects/[namespace]/[repoId]/update/route.ts

@@ -1,141 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
-
-import { isAuthenticated } from "@/lib/auth";
-import { Page } from "@/types";
-import { COLORS } from "@/lib/utils";
-import { injectDeepSiteBadge, isIndexPage } from "@/lib/inject-badge";
-import { pagesToFiles } from "@/lib/format-ai-response";
-
-/**
- * UPDATE route - for updating existing projects or creating new ones after AI streaming
- * This route handles the HuggingFace upload after client-side AI response processing
- */
-export async function PUT(
-  req: NextRequest,
-  { params }: { params: Promise<{ namespace: string; repoId: string }> }
-) {
-  const user = await isAuthenticated();
-  if (user instanceof NextResponse || !user) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
-
-  const param = await params;
-  let { namespace, repoId } = param;
-  const { pages, commitTitle = "AI-generated changes", isNew, projectName } = await req.json();
-
-  if (!pages || !Array.isArray(pages) || pages.length === 0) {
-    return NextResponse.json(
-      { ok: false, error: "Pages are required" },
-      { status: 400 }
-    );
-  }
-
-  try {
-    let files: File[];
-    
-    if (isNew) {
-      // Creating a new project
-      const title = projectName || "DeepSite Project";
-      const formattedTitle = title
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, "-")
-        .split("-")
-        .filter(Boolean)
-        .join("-")
-        .slice(0, 96);
-
-      const repo: RepoDesignation = {
-        type: "space",
-        name: `${user.name}/${formattedTitle}`,
-      };
-
-      try {
-        const { repoUrl } = await createRepo({
-          repo,
-          accessToken: user.token as string,
-        });
-        namespace = user.name;
-        repoId = repoUrl.split("/").slice(-2).join("/").split("/")[1];
-      } catch (createRepoError: any) {
-        return NextResponse.json(
-          {
-            ok: false,
-            error: `Failed to create repository: ${createRepoError.message || 'Unknown error'}`,
-          },
-          { status: 500 }
-        );
-      }
-
-      // Prepare files with badge injection for new projects
-      files = [];
-      pages.forEach((page: Page) => {
-        let mimeType = "text/html";
-        if (page.path.endsWith(".css")) {
-          mimeType = "text/css";
-        } else if (page.path.endsWith(".js")) {
-          mimeType = "text/javascript";
-        } else if (page.path.endsWith(".json")) {
-          mimeType = "application/json";
-        }
-        const content = (mimeType === "text/html" && isIndexPage(page.path))
-          ? injectDeepSiteBadge(page.html)
-          : page.html;
-        const file = new File([content], page.path, { type: mimeType });
-        files.push(file);
-      });
-
-      // Add README.md for new projects
-      const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
-      const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
-      const README = `---
-title: ${title}
-colorFrom: ${colorFrom}
-colorTo: ${colorTo}
-emoji: 🐳
-sdk: static
-pinned: false
-tags:
-  - deepsite-v3
----
-
-# Welcome to your new DeepSite project!
-This project was created with [DeepSite](https://huggingface.co/deepsite).
-`;
-      files.push(new File([README], "README.md", { type: "text/markdown" }));
-    } else {
-      // Updating existing project - no badge injection
-      files = pagesToFiles(pages);
-    }
-
-    const response = await uploadFiles({
-      repo: {
-        type: "space",
-        name: `${namespace}/${repoId}`,
-      },
-      files,
-      commitTitle,
-      accessToken: user.token as string,
-    });
-
-    return NextResponse.json({
-      ok: true,
-      pages,
-      repoId: `${namespace}/${repoId}`,
-      commit: {
-        ...response.commit,
-        title: commitTitle,
-      }
-    });
-  } catch (error: any) {
-    console.error("Error updating project:", error);
-    return NextResponse.json(
-      {
-        ok: false,
-        error: error.message || "Failed to update project",
-      },
-      { status: 500 }
-    );
-  }
-}
-

app/layout.tsx

@@ -1,18 +1,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Metadata, Viewport } from "next";
 import { Inter, PT_Sans } from "next/font/google";
+import { cookies } from "next/headers";
 import Script from "next/script";
-import { headers } from "next/headers";
-import { redirect } from "next/navigation";
 
 import "@/assets/globals.css";
 import { Toaster } from "@/components/ui/sonner";
+import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+import { apiServer } from "@/lib/api";
 import IframeDetector from "@/components/iframe-detector";
 import AppContext from "@/components/contexts/app-context";
 import TanstackContext from "@/components/contexts/tanstack-query-context";
 import { LoginProvider } from "@/components/contexts/login-context";
 import { ProProvider } from "@/components/contexts/pro-context";
 import { generateSEO, generateStructuredData } from "@/lib/seo";
+import DomainRedirect from "@/components/domain-redirect";
 
 const inter = Inter({
   variable: "--font-inter-sans",
@@ -76,24 +78,6 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  // Domain redirect check
-  const headersList = await headers();
-  const forwardedHost = headersList.get("x-forwarded-host");
-  const host = headersList.get("host");
-  const hostname = (forwardedHost || host || "").split(":")[0];
-
-  const isLocalDev =
-    hostname === "localhost" ||
-    hostname === "127.0.0.1" ||
-    hostname.startsWith("192.168.");
-  const isHuggingFace =
-    hostname === "huggingface.co" || hostname.endsWith(".huggingface.co");
-
-  if (!isHuggingFace && !isLocalDev) {
-    const pathname = headersList.get("x-invoke-path") || "/deepsite";
-    redirect(`https://huggingface.co${pathname}`);
-  }
-
   // const data = await getMe();
 
   // Generate structured data
@@ -130,6 +114,7 @@ export default async function RootLayout({
           data-domain="deepsite.hf.co"
           src="https://plausible.io/js/script.js"
         />
+        <DomainRedirect />
         <IframeDetector />
         <Toaster richColors position="bottom-center" />
         <TanstackContext>

assets/globals.css

@@ -369,12 +369,3 @@ body {
   z-index: 1;
   filter: blur(1px);
 }
-
-.transparent-scroll {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
-
-.transparent-scroll::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
-}

components/discord-promo-modal/index.tsx

@@ -1,225 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useLocalStorage } from "react-use";
-import Image from "next/image";
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { DiscordIcon } from "@/components/icons/discord";
-import Logo from "@/assets/logo.svg";
-
-const DISCORD_PROMO_KEY = "discord-promo-dismissed";
-const DISCORD_URL = "https://discord.gg/KpanwM3vXa";
-
-const Sparkle = ({
-  size = "w-3 h-3",
-  delay = "0s",
-  top = "20%",
-  left = "20%",
-}: {
-  size?: string;
-  delay?: string;
-  top?: string;
-  left?: string;
-}) => (
-  <div
-    className={`absolute ${size}`}
-    style={{ top, left, animationDelay: delay }}
-  >
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="w-full h-full animate-sparkle"
-    >
-      <path
-        d="M12 0L13.5 8.5L22 10L13.5 11.5L12 20L10.5 11.5L2 10L10.5 8.5L12 0Z"
-        fill="url(#sparkle-gradient)"
-      />
-      <defs>
-        <linearGradient id="sparkle-gradient" x1="2" y1="10" x2="22" y2="10">
-          <stop offset="0%" stopColor="#818cf8" />
-          <stop offset="100%" stopColor="#a5b4fc" />
-        </linearGradient>
-      </defs>
-    </svg>
-  </div>
-);
-
-export const DiscordPromoModal = () => {
-  const [open, setOpen] = useState(false);
-  const [dismissed, setDismissed] = useLocalStorage<boolean>(
-    DISCORD_PROMO_KEY,
-    false
-  );
-
-  useEffect(() => {
-    const cookieDismissed = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith(`${DISCORD_PROMO_KEY}=`))
-      ?.split("=")[1];
-
-    if (dismissed || cookieDismissed === "true") {
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      setOpen(true);
-    }, 60000);
-
-    return () => clearTimeout(timer);
-  }, [dismissed]);
-
-  const handleClose = () => {
-    setOpen(false);
-    setDismissed(true);
-
-    const expiryDate = new Date();
-    expiryDate.setDate(expiryDate.getDate() + 5);
-    document.cookie = `${DISCORD_PROMO_KEY}=true; expires=${expiryDate.toUTCString()}; path=/; SameSite=Lax`;
-  };
-
-  const handleJoinDiscord = () => {
-    window.open(DISCORD_URL, "_blank");
-    handleClose();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent
-        className="sm:max-w-[480px] lg:!p-0 !rounded-3xl !bg-gradient-to-b !from-indigo-950/40 !via-neutral-900 !to-neutral-900 !border !border-neutral-800 overflow-hidden"
-        showCloseButton={true}
-      >
-        <DialogTitle className="hidden" />
-
-        <div className="relative">
-          <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-indigo-500/5 to-transparent pointer-events-none" />
-
-          <div className="absolute inset-x-0 top-0 h-48 overflow-hidden pointer-events-none">
-            <Sparkle size="w-2 h-2" delay="0s" top="15%" left="15%" />
-            <Sparkle size="w-3 h-3" delay="0.5s" top="25%" left="75%" />
-            <Sparkle size="w-2 h-2" delay="1s" top="35%" left="20%" />
-            <Sparkle size="w-4 h-4" delay="1.5s" top="10%" left="80%" />
-            <Sparkle size="w-2 h-2" delay="2s" top="30%" left="85%" />
-          </div>
-
-          <div className="relative pt-12 pb-8">
-            <div className="relative z-10 flex justify-center">
-              <div className="relative">
-                <div className="absolute inset-0 bg-gradient-to-br from-indigo-400 via-indigo-500 to-indigo-600 rounded-full blur-md opacity-50" />
-                <div className="relative w-32 h-32 rounded-full bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 p-1 shadow-2xl">
-                  <div className="w-full h-full rounded-full bg-neutral-900 flex items-center justify-center overflow-hidden">
-                    <div className="relative w-20 h-20 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-full flex items-center justify-center">
-                      <DiscordIcon className="w-12 h-12 text-white" />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="absolute -bottom-2 -right-2 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-full p-0.5 shadow-xl border-2 border-neutral-900">
-                  <div className="w-10 h-10 bg-neutral-900 rounded-full flex items-center justify-center">
-                    <Image
-                      src={Logo}
-                      alt="DeepSite"
-                      width={20}
-                      height={20}
-                      className="w-5 h-5"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <main className="px-8 pb-8 pt-4">
-            <div className="text-center mb-6">
-              <h2 className="text-2xl font-bold text-white mb-2">
-                Ready to level up your DeepSite experience?
-              </h2>
-              <p className="text-neutral-400 text-sm">
-                Get help, share your projects and ask for suggestions!
-              </p>
-            </div>
-
-            <div className="flex flex-col gap-3 mb-6">
-              {[
-                "Get exclusive preview to new features",
-                "Share your projects and get feedback",
-                "Priority support from the team",
-                "Enjoy real-time updates",
-              ].map((benefit, index) => (
-                <div
-                  key={index}
-                  className="flex items-start gap-3 text-neutral-200"
-                  style={{
-                    animation: `fadeIn 0.4s ease-out ${index * 0.1}s both`,
-                  }}
-                >
-                  <div className="flex-shrink-0 w-5 h-5 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center mt-0.5">
-                    <svg
-                      className="w-3 h-3 text-white"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={3}
-                        d="M5 13l4 4L19 7"
-                      />
-                    </svg>
-                  </div>
-                  <span className="text-sm leading-6">{benefit}</span>
-                </div>
-              ))}
-            </div>
-
-            {/* CTA Button */}
-            <div className="flex flex-col gap-3 w-full">
-              <Button
-                onClick={handleJoinDiscord}
-                className="w-full !h-12 !text-base font-semibold !bg-gradient-to-r !from-indigo-500 !to-indigo-600 hover:!from-indigo-600 hover:!to-indigo-700 !text-white !border-0 transform hover:scale-[1.02] transition-all duration-200 shadow-lg shadow-indigo-500/25"
-              >
-                <DiscordIcon className="w-5 h-5 mr-2" />
-                Join Discord Community
-              </Button>
-
-              <p className="text-center text-xs text-neutral-500">
-                Free to join. Connect instantly.
-              </p>
-            </div>
-          </main>
-        </div>
-
-        <style jsx>{`
-          @keyframes fadeIn {
-            from {
-              opacity: 0;
-              transform: translateY(5px);
-            }
-            to {
-              opacity: 1;
-              transform: translateY(0);
-            }
-          }
-
-          @keyframes sparkle {
-            0%,
-            100% {
-              opacity: 0;
-              transform: scale(0) rotate(0deg);
-            }
-            50% {
-              opacity: 1;
-              transform: scale(1) rotate(180deg);
-            }
-          }
-
-          :global(.animate-sparkle) {
-            animation: sparkle 2s ease-in-out infinite;
-          }
-        `}</style>
-      </DialogContent>
-    </Dialog>
-  );
-};

components/domain-redirect/index.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function DomainRedirect() {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const host = window.location.host;
+
+    // Check if we're not on hf.co or huggingface.co
+    const isHfCo = host === "hf.co" || host.startsWith("hf.co:");
+    const isHuggingFaceCo =
+      host === "huggingface.co" || host.startsWith("huggingface.co:");
+
+    if (!isHfCo && !isHuggingFaceCo) {
+      // Redirect to the correct URL
+      window.location.replace("https://huggingface.co/deepsite");
+    }
+  }, []);
+
+  return null;
+}

components/editor/ask-ai/context.tsx

@@ -23,8 +23,6 @@ export const Context = () => {
       return <Braces className={size} />;
     } else if (filePath.endsWith(".js")) {
       return <FileCode className={size} />;
-    } else if (filePath.endsWith(".json")) {
-      return <Braces className={size} />;
     } else {
       return <FileText className={size} />;
     }
@@ -54,8 +52,6 @@ export const Context = () => {
               selectedFile && selectedFile.endsWith(".html"),
             "!bg-amber-500/10 !border-amber-500/30 !text-amber-400":
               selectedFile && selectedFile.endsWith(".js"),
-            "!bg-yellow-500/10 !border-yellow-500/30 !text-yellow-400":
-              selectedFile && selectedFile.endsWith(".json"),
           })}
           disabled={
             globalAiLoading || globalEditorLoading || pages.length === 0

components/editor/ask-ai/index.tsx

@@ -22,7 +22,6 @@ import { Settings } from "./settings";
 import { useProModal } from "@/components/contexts/pro-context";
 import { MAX_FREE_PROJECTS } from "@/lib/utils";
 import { PROMPTS_FOR_AI } from "@/lib/prompts";
-import { SelectedRedesignUrl } from "./selected-redesign-url";
 
 export const AskAi = ({
   project,
@@ -39,7 +38,6 @@ export const AskAi = ({
   const {
     isAiWorking,
     isThinking,
-    thinkingContent,
     selectedFiles,
     setSelectedFiles,
     selectedElement,
@@ -53,9 +51,6 @@ export const AskAi = ({
   const { openProModal } = useProModal();
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
-  const [redesignData, setRedesignData] = useState<
-    undefined | { markdown: string; url: string }
-  >(undefined);
   const refThink = useRef<HTMLDivElement>(null);
 
   const [enhancedSettings, setEnhancedSettings, removeEnhancedSettings] =
@@ -71,6 +66,7 @@ export const AskAi = ({
   const [prompt, setPrompt] = useState(
     promptStorage && promptStorage.trim() !== "" ? promptStorage : ""
   );
+  const [think, setThink] = useState("");
   const [openThink, setOpenThink] = useState(false);
   const [randomPromptLoading, setRandomPromptLoading] = useState(false);
 
@@ -80,7 +76,7 @@ export const AskAi = ({
     }
   });
 
-  const callAi = async (redesignMarkdown?: string | undefined) => {
+  const callAi = async (redesignMarkdown?: string) => {
     removePromptStorage();
     if (user && !user.isPro && projects.length >= MAX_FREE_PROJECTS)
       return openProModal([]);
@@ -104,8 +100,7 @@ export const AskAi = ({
         prompt,
         enhancedSettings,
         redesignMarkdown,
-        !!user,
-        user?.name
+        !!user
       );
 
       if (result?.error) {
@@ -146,15 +141,7 @@ export const AskAi = ({
     if (refThink.current) {
       refThink.current.scrollTop = refThink.current.scrollHeight;
     }
-    // Auto-open dropdown when thinking content appears
-    if (thinkingContent && isThinking && !openThink) {
-      setOpenThink(true);
-    }
-    // Auto-collapse when thinking is complete
-    if (thinkingContent && !isThinking && openThink) {
-      setOpenThink(false);
-    }
-  }, [thinkingContent, isThinking]);
+  }, [think]);
 
   const randomPrompt = () => {
     setRandomPromptLoading(true);
@@ -169,7 +156,7 @@ export const AskAi = ({
   return (
     <div className="p-3 w-full">
       <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-20 w-full group">
-        {thinkingContent && (
+        {think && (
           <div className="w-full border-b border-neutral-700 relative overflow-hidden">
             <header
               className="flex items-center justify-between px-5 py-2.5 group hover:bg-neutral-600/20 transition-colors duration-200 cursor-pointer"
@@ -201,7 +188,7 @@ export const AskAi = ({
               )}
             >
               <p className="text-[13px] text-neutral-400 whitespace-pre-line px-5 pb-4 pt-3">
-                {thinkingContent}
+                {think}
               </p>
             </main>
           </div>
@@ -222,15 +209,6 @@ export const AskAi = ({
             />
           </div>
         )}
-        {redesignData && (
-          <div className="px-4 pt-3">
-            <SelectedRedesignUrl
-              url={redesignData.url}
-              isAiWorking={isAiWorking}
-              onDelete={() => setRedesignData(undefined)}
-            />
-          </div>
-        )}
         <div className="w-full relative flex items-center justify-between">
           {(isAiWorking || isUploading || isThinking || isLoadingProject) && (
             <div className="absolute bg-neutral-800 top-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-start pt-3.5 justify-between max-lg:text-sm">
@@ -242,7 +220,7 @@ export const AskAi = ({
                     ? "Uploading images..."
                     : isAiWorking && !isSameHtml
                     ? "DeepSite is working..."
-                    : "DeepSite is working..."
+                    : "DeepSite is thinking..."
                 }
               />
               {isAiWorking && (
@@ -272,8 +250,6 @@ export const AskAi = ({
             placeholder={
               selectedElement
                 ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
-                : redesignData
-                ? "Ask DeepSite anything about the redesign of your site..."
                 : isFollowUp && (!isSameHtml || pages?.length > 1)
                 ? "Ask DeepSite for edits"
                 : "Ask DeepSite anything..."
@@ -318,13 +294,7 @@ export const AskAi = ({
               onClose={setOpenProvider}
             />
             {!isNew && <Uploader project={project} />}
-            {isNew && (
-              <ReImagine
-                onRedesign={(md, url) =>
-                  setRedesignData({ markdown: md, url: url })
-                }
-              />
-            )}
+            {isNew && <ReImagine onRedesign={(md) => callAi(md)} />}
             {!isNew && !isSameHtml && <Selector />}
           </div>
           <div className="flex items-center justify-end gap-2">
@@ -333,11 +303,9 @@ export const AskAi = ({
               variant="outline"
               className="!rounded-md"
               disabled={
-                !!redesignData?.url?.trim()
-                  ? false
-                  : isAiWorking || isUploading || isThinking || !prompt.trim()
+                isAiWorking || isUploading || isThinking || !prompt.trim()
               }
-              onClick={() => callAi(redesignData?.markdown)}
+              onClick={() => callAi()}
             >
               <ArrowUp className="size-4" />
             </Button>
@@ -345,7 +313,7 @@ export const AskAi = ({
         </div>
       </div>
       <audio ref={hookAudio} id="audio" className="hidden">
-        <source src="/deepsite/success.mp3" type="audio/mpeg" />
+        <source src="/success.mp3" type="audio/mpeg" />
         Your browser does not support the audio element.
       </audio>
     </div>

components/editor/ask-ai/prompt-builder/content-modal.tsx

@@ -16,7 +16,7 @@ export const ContentModal = ({
 }) => {
   const [collapsed, setCollapsed] = useState(["colors", "theme"]);
   return (
-    <main className="overflow-x-hidden max-h-[50dvh] overflow-y-auto transparent-scroll">
+    <main className="overflow-x-hidden max-h-[50dvh] overflow-y-auto">
       <section className="w-full border-b border-neutral-800/80 px-6 py-3.5 sticky top-0 bg-neutral-900 z-10">
         <div className="flex items-center justify-between gap-3">
           <p className="text-base font-semibold text-neutral-200">

components/editor/ask-ai/prompt-builder/tailwind-colors.tsx

@@ -26,7 +26,7 @@ export const TailwindColors = ({
   return (
     <div
       ref={ref}
-      className="flex items-center justify-start gap-3 overflow-x-auto px-5 transparent-scroll"
+      className="flex items-center justify-start gap-3 overflow-x-auto px-5 scrollbar-hide"
     >
       {TAILWIND_COLORS.map((color) => (
         <div

components/editor/ask-ai/re-imagine.tsx

@@ -13,12 +13,11 @@ import Loading from "@/components/loading";
 import { api } from "@/lib/api";
 import { useAi } from "@/hooks/useAi";
 import { useEditor } from "@/hooks/useEditor";
-import classNames from "classnames";
 
 export function ReImagine({
   onRedesign,
 }: {
-  onRedesign: (md: string, url: string) => void;
+  onRedesign: (md: string) => void;
 }) {
   const [url, setUrl] = useState<string>("");
   const [open, setOpen] = useState(false);
@@ -50,8 +49,8 @@ export function ReImagine({
     });
     if (response?.data?.ok) {
       setOpen(false);
-      onRedesign(response.data.markdown, url.trim());
       setUrl("");
+      onRedesign(response.data.markdown);
       toast.success("DeepSite is redesigning your site! Let him cook... 🔥");
     } else {
       toast.error(response?.data?.error || "Failed to redesign the site.");
@@ -118,11 +117,6 @@ export function ReImagine({
                   }
                   setUrl(inputUrl);
                 }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    handleClick();
-                  }
-                }}
                 className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
               />
             </div>

components/editor/ask-ai/selected-redesign-url.tsx

@@ -1,37 +0,0 @@
-import classNames from "classnames";
-import { Paintbrush, XCircle } from "lucide-react";
-
-export const SelectedRedesignUrl = ({
-  url,
-  isAiWorking = false,
-  onDelete,
-}: {
-  url: string;
-  isAiWorking: boolean;
-  onDelete?: () => void;
-}) => {
-  return (
-    <div
-      className={classNames(
-        "border border-emerald-500/50 bg-emerald-500/10 rounded-xl p-1.5 pr-3 max-w-max hover:brightness-110 transition-all duration-200 ease-in-out",
-        {
-          "cursor-pointer": !isAiWorking,
-          "opacity-50 cursor-not-allowed": isAiWorking,
-        }
-      )}
-      onClick={() => {
-        if (!isAiWorking && onDelete) {
-          onDelete();
-        }
-      }}
-    >
-      <div className="flex items-center justify-start gap-2">
-        <div className="rounded-lg bg-emerald-500/20 size-6 flex items-center justify-center">
-          <Paintbrush className="text-emerald-300 size-3.5" />
-        </div>
-        <p className="text-sm font-semibold text-emerald-200">{url}</p>
-        <XCircle className="text-emerald-300 size-4 hover:text-emerald-200 transition-colors" />
-      </div>
-    </div>
-  );
-};

components/editor/ask-ai/settings.tsx

@@ -20,14 +20,7 @@ import {
 import { useMemo, useState, useEffect } from "react";
 import { useUpdateEffect } from "react-use";
 import Image from "next/image";
-import {
-  BrainIcon,
-  CheckCheck,
-  ChevronDown,
-  Sparkles,
-  Zap,
-  DollarSign,
-} from "lucide-react";
+import { Brain, BrainIcon, CheckCheck, ChevronDown } from "lucide-react";
 import { useAi } from "@/hooks/useAi";
 import { getProviders } from "@/lib/get-providers";
 import Loading from "@/components/loading";
@@ -69,10 +62,7 @@ export function Settings({
   // }, [model]);
 
   useUpdateEffect(() => {
-    if (
-      !["auto", "fastest", "cheapest"].includes(provider as string) &&
-      !providers.includes(provider as string)
-    ) {
+    if (provider !== "auto" && !providers.includes(provider as string)) {
       setProvider("auto");
     }
   }, [model, provider]);
@@ -215,83 +205,47 @@ export function Settings({
             </div>
           )} */}
           <div className="flex flex-col gap-3">
-            <div>
-              <p className="text-neutral-300 text-sm mb-1">Provider Mode</p>
-              <p className="text-neutral-400 text-xs mb-3 leading-relaxed">
-                Choose how we select providers:{" "}
-                <span className="px-1.5 py-0.5 rounded bg-pink-500/10 text-pink-500">
-                  Auto
-                </span>{" "}
-                (smart),{" "}
-                <span className="px-1.5 py-0.5 rounded bg-yellow-500/10 text-yellow-500">
-                  Fastest
-                </span>{" "}
-                (speed), or{" "}
-                <span className="px-1.5 py-0.5 rounded bg-green-500/10 text-green-500">
-                  Cheapest
-                </span>{" "}
-                (cost).
-              </p>
-              <div className="grid grid-cols-3 gap-1 bg-neutral-800 p-1 rounded-full">
-                <button
-                  className={classNames(
-                    "flex flex-col items-center justify-center cursor-pointer py-1.5 rounded-full transition-all duration-200",
-                    {
-                      "bg-white text-neutral-800": provider === "auto",
-                      "text-neutral-400 hover:text-neutral-200":
-                        provider !== "auto",
-                    }
-                  )}
-                  onClick={() => setProvider("auto")}
-                >
-                  <Sparkles
-                    className={classNames("size-3.5 mb-0.5", {
-                      "text-pink-400": provider !== "auto",
-                    })}
-                  />
-                  <span className="text-[10px] font-medium">Auto</span>
-                </button>
-                <button
-                  className={classNames(
-                    "flex flex-col items-center justify-center cursor-pointer py-1.5 rounded-full transition-all duration-200",
-                    {
-                      "bg-white text-neutral-800": provider === "fastest",
-                      "text-neutral-400 hover:text-neutral-200":
-                        provider !== "fastest",
-                    }
-                  )}
-                  onClick={() => setProvider("fastest")}
-                >
-                  <Zap
-                    className={classNames("size-3.5 mb-0.5", {
-                      "text-yellow-400": provider !== "fastest",
-                    })}
-                  />
-                  <span className="text-[10px] font-medium">Fastest</span>
-                </button>
-                <button
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-neutral-300 text-sm mb-1.5">
+                  Use auto-provider
+                </p>
+                <p className="text-xs text-neutral-400/70">
+                  We&apos;ll automatically select the best provider for you
+                  based on your prompt.
+                </p>
+              </div>
+              <div
+                className={classNames(
+                  "bg-neutral-700 rounded-full min-w-10 w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
+                  {
+                    "!bg-sky-500": provider === "auto",
+                  }
+                )}
+                onClick={() => {
+                  const foundModel = MODELS.find(
+                    (m: { value: string }) => m.value === model
+                  );
+                  if (provider === "auto" && foundModel?.autoProvider) {
+                    setProvider(foundModel.autoProvider);
+                  } else {
+                    setProvider("auto");
+                  }
+                }}
+              >
+                <div
                   className={classNames(
-                    "flex flex-col items-center justify-center cursor-pointer py-1.5 rounded-full transition-all duration-200",
+                    "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-neutral-200",
                     {
-                      "bg-white text-neutral-800": provider === "cheapest",
-                      "text-neutral-400 hover:text-neutral-200":
-                        provider !== "cheapest",
+                      "translate-x-4": provider === "auto",
                     }
                   )}
-                  onClick={() => setProvider("cheapest")}
-                >
-                  <DollarSign
-                    className={classNames("size-3.5 mb-0.5", {
-                      "text-green-400": provider !== "cheapest",
-                    })}
-                  />
-                  <span className="text-[10px] font-medium">Cheapest</span>
-                </button>
+                />
               </div>
             </div>
             <label className="block">
               <p className="text-neutral-300 text-sm mb-2">
-                Or choose a specific provider
+                Inference Provider
               </p>
               <div className="grid grid-cols-2 gap-1.5 relative">
                 {loadingProviders ? (

components/editor/file-browser/index.tsx

@@ -7,7 +7,6 @@ import {
   Folder,
   ChevronRight,
   ChevronDown,
-  FileJson,
 } from "lucide-react";
 import classNames from "classnames";
 
@@ -198,7 +197,27 @@ export function FileBrowser() {
           </svg>
         );
       case "json":
-        return <FileJson className="size-4 shrink-0 text-amber-400" />;
+        return (
+          <svg className="size-4 shrink-0" viewBox="0 0 32 32" fill="none">
+            <rect width="32" height="32" rx="2" fill="#F7DF1E" />
+            <path
+              d="M16 2L4 8v16l12 6 12-6V8L16 2zm8.8 20.4l-8.8 4.4-8.8-4.4V9.6l8.8-4.4 8.8 4.4v12.8z"
+              fill="#000"
+              opacity="0.15"
+            />
+            <text
+              x="50%"
+              y="50%"
+              dominantBaseline="middle"
+              textAnchor="middle"
+              fill="#000"
+              fontSize="14"
+              fontWeight="600"
+            >
+              {}
+            </text>
+          </svg>
+        );
       default:
         return <FileCode2 className="size-4 shrink-0 text-neutral-400" />;
     }
@@ -230,7 +249,7 @@ export function FileBrowser() {
       case "json":
         return {
           name: "JSON",
-          color: "bg-amber-500/20 border-amber-500/30 text-amber-400",
+          color: "bg-yellow-500/20 border-yellow-500/30 text-yellow-400",
         };
       default:
         return {
@@ -439,13 +458,6 @@ export function FileBrowser() {
                         JS: {pages.filter((p) => p.path.endsWith(".js")).length}
                       </span>
                     </div>
-                    <div className="flex items-center gap-2 text-neutral-500">
-                      <div className="size-2 rounded-full bg-yellow-600" />
-                      <span>
-                        JSON:{" "}
-                        {pages.filter((p) => p.path.endsWith(".json")).length}
-                      </span>
-                    </div>
                   </div>
                 </div>
               </SheetContent>

components/editor/header/index.tsx

@@ -23,9 +23,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { DiscordIcon } from "@/components/icons/discord";
 
-export function Header({ isNew }: { isNew: boolean }) {
+export function Header() {
   const { project } = useEditor();
   const { user, openLoginWindow } = useUser();
   return (
@@ -60,26 +59,24 @@ export function Header({ isNew }: { isNew: boolean }) {
       <div className="lg:w-full px-2 lg:px-3 py-2 flex items-center justify-end lg:justify-between lg:border-l lg:border-neutral-800">
         <div className="font-mono text-muted-foreground flex items-center gap-2">
           <SwitchDevice />
-          {isNew && (
-            <Button
-              size="xs"
-              variant="bordered"
-              className="max-lg:hidden"
-              onClick={() => {
-                const iframe = document.getElementById(
-                  "preview-iframe"
-                ) as HTMLIFrameElement;
-                if (iframe) {
-                  iframe.src = iframe.src;
-                }
-              }}
-            >
-              <RefreshCcw className="size-3 mr-0.5" />
-              Refresh Preview
-            </Button>
-          )}
+          <Button
+            size="xs"
+            variant="bordered"
+            className="max-lg:hidden"
+            onClick={() => {
+              const iframe = document.getElementById(
+                "preview-iframe"
+              ) as HTMLIFrameElement;
+              if (iframe) {
+                iframe.src = iframe.src;
+              }
+            }}
+          >
+            <RefreshCcw className="size-3 mr-0.5" />
+            Refresh Preview
+          </Button>
           <Link
-            href="https://discord.gg/KpanwM3vXa"
+            href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/427"
             target="_blank"
             className="max-lg:hidden"
           >
@@ -88,20 +85,6 @@ export function Header({ isNew }: { isNew: boolean }) {
               Help
             </Button>
           </Link>
-          <Link
-            href="https://discord.gg/KpanwM3vXa"
-            target="_blank"
-            className="max-lg:hidden"
-          >
-            <Button
-              size="xs"
-              variant="bordered"
-              className="!border-indigo-500 !text-white !bg-indigo-500"
-            >
-              <DiscordIcon className="size-3 mr-0.5" />
-              Discord Community
-            </Button>
-          </Link>
         </div>
         <div className="flex items-center gap-2">
           {project?.space_id && (
@@ -127,7 +110,6 @@ export function Header({ isNew }: { isNew: boolean }) {
               </Button>
             </Link>
           )}
-
           {project?.private && (
             <Tooltip>
               <TooltipTrigger>

components/editor/index.tsx

@@ -15,7 +15,6 @@ import { FileBrowser } from "./file-browser";
 import { AskAi } from "./ask-ai";
 import { Preview } from "./preview";
 import { SaveChangesPopup } from "./save-changes-popup";
-import { DiscordPromoModal } from "@/components/discord-promo-modal";
 import Loading from "../loading";
 import { Page } from "@/types";
 
@@ -69,7 +68,6 @@ export const AppEditor = ({
     const path = currentPageData.path;
     if (path.endsWith(".css")) return "css";
     if (path.endsWith(".js")) return "javascript";
-    if (path.endsWith(".json")) return "json";
     return "html";
   }, [currentPageData.path]);
 
@@ -78,13 +76,12 @@ export const AppEditor = ({
     if (editorLanguage === "css") return "CSS copied to clipboard!";
     if (editorLanguage === "javascript")
       return "JavaScript copied to clipboard!";
-    if (editorLanguage === "json") return "JSON copied to clipboard!";
     return "HTML copied to clipboard!";
   }, [editorLanguage]);
 
   return (
     <section className="h-screen w-full bg-neutral-950 flex flex-col">
-      <Header isNew={isNew} />
+      <Header />
       <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full relative">
         <div
           ref={editor}
@@ -156,9 +153,10 @@ export const AppEditor = ({
             }}
           />
         </div>
-        <Preview isNew={isNew} namespace={namespace} repoId={repoId} />
+        <Preview isNew={isNew} />
       </main>
 
+      {/* Save Changes Popup */}
       <SaveChangesPopup
         isOpen={showSavePopup}
         onClose={() => setShowSavePopup(false)}
@@ -167,8 +165,6 @@ export const AppEditor = ({
         pages={pages}
         project={project}
       />
-
-      <DiscordPromoModal />
     </section>
   );
 };

components/editor/preview/index.tsx

@@ -15,18 +15,8 @@ import { defaultHTML } from "@/lib/consts";
 import { HistoryNotification } from "../history-notification";
 import { api } from "@/lib/api";
 import { toast } from "sonner";
-import { RefreshCcw, TriangleAlert } from "lucide-react";
-import { Page } from "@/types";
-
-export const Preview = ({
-  isNew,
-  namespace,
-  repoId,
-}: {
-  isNew: boolean;
-  namespace?: string;
-  repoId?: string;
-}) => {
+
+export const Preview = ({ isNew }: { isNew: boolean }) => {
   const {
     project,
     device,
@@ -40,8 +30,6 @@ export const Preview = ({
     setCurrentPage,
     previewPage,
     setPreviewPage,
-    setLastSavedPages,
-    hasUnsavedChanges,
   } = useEditor();
   const {
     isEditableModeEnabled,
@@ -60,10 +48,6 @@ export const Preview = ({
   const [stableHtml, setStableHtml] = useState<string>("");
   const [throttledHtml, setThrottledHtml] = useState<string>("");
   const lastUpdateTimeRef = useRef<number>(0);
-  const [iframeKey, setIframeKey] = useState(0);
-  const [commitPages, setCommitPages] = useState<Page[]>([]);
-  const [isLoadingCommitPages, setIsLoadingCommitPages] = useState(false);
-  const prevCommitRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (!previewPage && pages.length > 0) {
@@ -75,189 +59,29 @@ export const Preview = ({
     }
   }, [pages, previewPage]);
 
-  const pagesToUse = currentCommit ? commitPages : pages;
-
   const previewPageData = useMemo(() => {
-    const found = pagesToUse.find((p) => {
+    const found = pages.find((p) => {
       const normalizedPagePath = p.path.replace(/^\.?\//, "");
       const normalizedPreviewPage = previewPage.replace(/^\.?\//, "");
       return normalizedPagePath === normalizedPreviewPage;
     });
-    return found || (pagesToUse.length > 0 ? pagesToUse[0] : currentPageData);
-  }, [pagesToUse, previewPage, currentPageData]);
-
-  // Fetch commit pages when currentCommit changes
-  useEffect(() => {
-    if (currentCommit && namespace && repoId) {
-      setIsLoadingCommitPages(true);
-      api
-        .get(`/me/projects/${namespace}/${repoId}/commits/${currentCommit}`)
-        .then((res) => {
-          if (res.data.ok) {
-            setCommitPages(res.data.pages);
-            // Set preview page to index.html if available
-            const indexPage = res.data.pages.find(
-              (p: Page) =>
-                p.path === "index.html" || p.path === "index" || p.path === "/"
-            );
-            if (indexPage) {
-              setPreviewPage(indexPage.path);
-            }
-            // Refresh iframe to show commit version
-            setIframeKey((prev) => prev + 1);
-          }
-        })
-        .catch((err) => {
-          toast.error(
-            err.response?.data?.error || "Failed to fetch commit pages"
-          );
-        })
-        .finally(() => {
-          setIsLoadingCommitPages(false);
-        });
-    } else if (!currentCommit && prevCommitRef.current !== null) {
-      // Only clear commitPages when transitioning from a commit to no commit
-      setCommitPages([]);
-    }
-    prevCommitRef.current = currentCommit;
-  }, [currentCommit, namespace, repoId]);
-
-  // Create navigation interception script
-  const createNavigationScript = useCallback((availablePages: Page[]) => {
-    const pagePaths = availablePages.map((p) => p.path.replace(/^\.?\//, ""));
-    return `
-      (function() {
-        const availablePages = ${JSON.stringify(pagePaths)};
-        
-        function normalizePath(path) {
-          let normalized = path.replace(/^\.?\//, "");
-          if (normalized === "" || normalized === "/") {
-            normalized = "index.html";
-          }
-          const hashIndex = normalized.indexOf("#");
-          if (hashIndex !== -1) {
-            normalized = normalized.substring(0, hashIndex);
-          }
-          if (!normalized.includes(".")) {
-            normalized = normalized + ".html";
-          }
-          return normalized;
-        }
-        
-        function handleNavigation(url) {
-          if (!url) return;
-          
-          // Handle hash-only navigation
-          if (url.startsWith("#")) {
-            const targetElement = document.querySelector(url);
-            if (targetElement) {
-              targetElement.scrollIntoView({ behavior: "smooth" });
-            }
-            // Search in shadow DOM
-            const searchInShadows = (root) => {
-              const elements = root.querySelectorAll("*");
-              for (const el of elements) {
-                if (el.shadowRoot) {
-                  const found = el.shadowRoot.querySelector(url);
-                  if (found) {
-                    found.scrollIntoView({ behavior: "smooth" });
-                    return;
-                  }
-                  searchInShadows(el.shadowRoot);
-                }
-              }
-            };
-            searchInShadows(document);
-            return;
-          }
-          
-          // Handle external URLs
-          if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//")) {
-            window.open(url, "_blank");
-            return;
-          }
-          
-          const normalizedPath = normalizePath(url);
-          if (availablePages.includes(normalizedPath)) {
-            // Dispatch custom event to notify parent
-            window.parent.postMessage({ type: 'navigate', path: normalizedPath }, '*');
-          } else {
-            console.warn('Page not found:', normalizedPath);
-          }
-        }
-        
-        // Intercept window.location methods
-        const originalAssign = window.location.assign;
-        const originalReplace = window.location.replace;
-        
-        window.location.assign = function(url) {
-          handleNavigation(url);
-        };
-        
-        window.location.replace = function(url) {
-          handleNavigation(url);
-        };
-        
-        // Intercept window.location.href setter
-        try {
-          let currentHref = window.location.href;
-          Object.defineProperty(window.location, 'href', {
-            get: function() {
-              return currentHref;
-            },
-            set: function(url) {
-              handleNavigation(url);
-            },
-            configurable: true
-          });
-        } catch (e) {
-          // Fallback: use proxy if defineProperty fails
-          console.warn('Could not intercept location.href:', e);
-        }
-        
-        // Intercept link clicks
-        document.addEventListener('click', function(e) {
-          const anchor = e.target.closest('a');
-          if (anchor && anchor.href) {
-            const href = anchor.getAttribute('href');
-            if (href && !href.startsWith('http://') && !href.startsWith('https://') && !href.startsWith('//') && !href.startsWith('mailto:') && !href.startsWith('tel:')) {
-              e.preventDefault();
-              handleNavigation(href);
-            }
-          }
-        }, true);
-        
-        // Intercept form submissions
-        document.addEventListener('submit', function(e) {
-          const form = e.target;
-          if (form.action && !form.action.startsWith('http://') && !form.action.startsWith('https://') && !form.action.startsWith('//')) {
-            e.preventDefault();
-            handleNavigation(form.action);
-          }
-        }, true);
-      })();
-    `;
-  }, []);
+    return found || currentPageData;
+  }, [pages, previewPage, currentPageData]);
 
   const injectAssetsIntoHtml = useCallback(
-    (html: string, pagesToUse: Page[] = pages): string => {
+    (html: string): string => {
       if (!html) return html;
 
-      const cssFiles = pagesToUse.filter(
+      // Find all CSS and JS files (including those in subdirectories)
+      const cssFiles = pages.filter(
         (p) => p.path.endsWith(".css") && p.path !== previewPageData?.path
       );
-      const jsFiles = pagesToUse.filter(
+      const jsFiles = pages.filter(
         (p) => p.path.endsWith(".js") && p.path !== previewPageData?.path
       );
-      const jsonFiles = pagesToUse.filter(
-        (p) => p.path.endsWith(".json") && p.path !== previewPageData?.path
-      );
 
       let modifiedHtml = html;
 
-      // Inject navigation script for srcDoc
-      const navigationScript = createNavigationScript(pagesToUse);
-
       // Inject all CSS files
       if (cssFiles.length > 0) {
         const allCssContent = cssFiles
@@ -278,9 +102,11 @@ export const Preview = ({
             `<head>\n${allCssContent}`
           );
         } else {
+          // If no head tag, prepend to document
           modifiedHtml = allCssContent + "\n" + modifiedHtml;
         }
 
+        // Remove all link tags that reference CSS files we're injecting
         cssFiles.forEach((file) => {
           const escapedPath = file.path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
           modifiedHtml = modifiedHtml.replace(
@@ -293,6 +119,7 @@ export const Preview = ({
         });
       }
 
+      // Inject all JS files
       if (jsFiles.length > 0) {
         const allJsContent = jsFiles
           .map(
@@ -309,9 +136,11 @@ export const Preview = ({
         } else if (modifiedHtml.includes("<body>")) {
           modifiedHtml = modifiedHtml + allJsContent;
         } else {
+          // If no body tag, append to document
           modifiedHtml = modifiedHtml + "\n" + allJsContent;
         }
 
+        // Remove all script tags that reference JS files we're injecting
         jsFiles.forEach((file) => {
           const escapedPath = file.path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
           modifiedHtml = modifiedHtml.replace(
@@ -324,69 +153,9 @@ export const Preview = ({
         });
       }
 
-      // Inject all JSON files as script tags with type="application/json"
-      if (jsonFiles.length > 0) {
-        const allJsonContent = jsonFiles
-          .map(
-            (file) =>
-              `<script type="application/json" data-injected-from="${
-                file.path
-              }" id="${file.path.replace(/[^a-zA-Z0-9]/g, "-")}">\n${
-                file.html
-              }\n</script>`
-          )
-          .join("\n");
-
-        if (modifiedHtml.includes("</body>")) {
-          modifiedHtml = modifiedHtml.replace(
-            "</body>",
-            `${allJsonContent}\n</body>`
-          );
-        } else if (modifiedHtml.includes("<body>")) {
-          modifiedHtml = modifiedHtml + allJsonContent;
-        } else {
-          modifiedHtml = modifiedHtml + "\n" + allJsonContent;
-        }
-
-        jsonFiles.forEach((file) => {
-          const escapedPath = file.path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-          modifiedHtml = modifiedHtml.replace(
-            new RegExp(
-              `<script\\s+[^>]*src=["'][\\.\/]*${escapedPath}["'][^>]*><\\/script>`,
-              "gi"
-            ),
-            ""
-          );
-        });
-      }
-
-      // Inject navigation script early in the document
-      if (navigationScript) {
-        // Try to inject right after <head> or <body> opening tag
-        if (modifiedHtml.includes("<head>")) {
-          modifiedHtml = modifiedHtml.replace(
-            "<head>",
-            `<head>\n<script>${navigationScript}</script>`
-          );
-        } else if (modifiedHtml.includes("<body>")) {
-          modifiedHtml = modifiedHtml.replace(
-            "<body>",
-            `<body>\n<script>${navigationScript}</script>`
-          );
-        } else if (modifiedHtml.includes("</body>")) {
-          modifiedHtml = modifiedHtml.replace(
-            "</body>",
-            `<script>${navigationScript}</script>\n</body>`
-          );
-        } else {
-          modifiedHtml =
-            `<script>${navigationScript}</script>\n` + modifiedHtml;
-        }
-      }
-
       return modifiedHtml;
     },
-    [pages, previewPageData?.path, createNavigationScript]
+    [pages, previewPageData?.path]
   );
 
   useEffect(() => {
@@ -395,33 +164,24 @@ export const Preview = ({
       const timeSinceLastUpdate = now - lastUpdateTimeRef.current;
 
       if (lastUpdateTimeRef.current === 0 || timeSinceLastUpdate >= 3000) {
-        const processedHtml = injectAssetsIntoHtml(
-          previewPageData.html,
-          pagesToUse
-        );
+        const processedHtml = injectAssetsIntoHtml(previewPageData.html);
         setThrottledHtml(processedHtml);
         lastUpdateTimeRef.current = now;
       } else {
         const timeUntilNextUpdate = 3000 - timeSinceLastUpdate;
         const timer = setTimeout(() => {
-          const processedHtml = injectAssetsIntoHtml(
-            previewPageData.html,
-            pagesToUse
-          );
+          const processedHtml = injectAssetsIntoHtml(previewPageData.html);
           setThrottledHtml(processedHtml);
           lastUpdateTimeRef.current = Date.now();
         }, timeUntilNextUpdate);
         return () => clearTimeout(timer);
       }
     }
-  }, [isNew, previewPageData?.html, injectAssetsIntoHtml, pagesToUse]);
+  }, [isNew, previewPageData?.html, injectAssetsIntoHtml]);
 
   useEffect(() => {
     if (!isAiWorking && !globalAiLoading && previewPageData?.html) {
-      const processedHtml = injectAssetsIntoHtml(
-        previewPageData.html,
-        pagesToUse
-      );
+      const processedHtml = injectAssetsIntoHtml(previewPageData.html);
       setStableHtml(processedHtml);
     }
   }, [
@@ -430,7 +190,6 @@ export const Preview = ({
     previewPageData?.html,
     injectAssetsIntoHtml,
     previewPage,
-    pagesToUse,
   ]);
 
   useEffect(() => {
@@ -440,10 +199,7 @@ export const Preview = ({
       !isAiWorking &&
       !globalAiLoading
     ) {
-      const processedHtml = injectAssetsIntoHtml(
-        previewPageData.html,
-        pagesToUse
-      );
+      const processedHtml = injectAssetsIntoHtml(previewPageData.html);
       setStableHtml(processedHtml);
     }
   }, [
@@ -452,13 +208,13 @@ export const Preview = ({
     isAiWorking,
     globalAiLoading,
     injectAssetsIntoHtml,
-    pagesToUse,
   ]);
 
   const setupIframeListeners = () => {
     if (iframeRef?.current?.contentDocument) {
       const iframeDocument = iframeRef.current.contentDocument;
 
+      // Use event delegation to catch clicks on anchors in both light and shadow DOM
       iframeDocument.addEventListener(
         "click",
         handleCustomNavigation as any,
@@ -473,17 +229,6 @@ export const Preview = ({
     }
   };
 
-  // Listen for navigation messages from iframe
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === "navigate" && event.data?.path) {
-        setPreviewPage(event.data.path);
-      }
-    };
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [setPreviewPage]);
-
   useEffect(() => {
     const cleanupListeners = () => {
       if (iframeRef?.current?.contentDocument) {
@@ -512,10 +257,6 @@ export const Preview = ({
     };
   }, [isEditableModeEnabled, stableHtml, throttledHtml, previewPage]);
 
-  const refreshIframe = () => {
-    setIframeKey((prev) => prev + 1);
-  };
-
   const promoteVersion = async () => {
     setIsPromotingVersion(true);
     await api
@@ -527,7 +268,6 @@ export const Preview = ({
           setCurrentCommit(null);
           setPages(res.data.pages);
           setCurrentPage(res.data.pages[0].path);
-          setLastSavedPages(res.data.pages);
           setPreviewPage(res.data.pages[0].path);
           toast.success("Version promoted successfully");
         }
@@ -580,28 +320,17 @@ export const Preview = ({
     if (iframeRef?.current) {
       const iframeDocument = iframeRef.current.contentDocument;
       if (iframeDocument) {
-        const path = event.composedPath();
-        const targetElement = path[0] as HTMLElement;
+        const targetElement = event.target as HTMLElement;
 
         const findClosestAnchor = (
           element: HTMLElement
         ): HTMLAnchorElement | null => {
-          let current: HTMLElement | null = element;
-          while (current) {
-            if (current.tagName?.toUpperCase() === "A") {
+          let current = element;
+          while (current && current !== iframeDocument.body) {
+            if (current.tagName === "A") {
               return current as HTMLAnchorElement;
             }
-            if (current === iframeDocument.body) {
-              break;
-            }
-            const parent: Node | null = current.parentNode;
-            if (parent && parent.nodeType === 11) {
-              current = (parent as ShadowRoot).host as HTMLElement;
-            } else if (parent && parent.nodeType === 1) {
-              current = parent as HTMLElement;
-            } else {
-              break;
-            }
+            current = current.parentElement as HTMLElement;
           }
           return null;
         };
@@ -630,18 +359,15 @@ export const Preview = ({
           element: HTMLElement
         ): HTMLAnchorElement | null => {
           let current: HTMLElement | null = element;
-          while (current) {
-            if (current.tagName?.toUpperCase() === "A") {
+          while (current && current !== iframeDocument.body) {
+            if (current.tagName === "A") {
               return current as HTMLAnchorElement;
             }
-            if (current === iframeDocument.body) {
-              break;
-            }
             const parent: Node | null = current.parentNode;
-            if (parent && parent.nodeType === 11) {
-              current = (parent as ShadowRoot).host as HTMLElement;
-            } else if (parent && parent.nodeType === 1) {
-              current = parent as HTMLElement;
+            if (parent instanceof ShadowRoot) {
+              current = parent.host as HTMLElement;
+            } else if (parent instanceof HTMLElement) {
+              current = parent;
             } else {
               break;
             }
@@ -698,7 +424,7 @@ export const Preview = ({
               normalizedHref = normalizedHref + ".html";
             }
 
-            const isPageExist = pagesToUse.some((page) => {
+            const isPageExist = pages.some((page) => {
               const pagePath = page.path.replace(/^\.?\//, "");
               return pagePath === normalizedHref;
             });
@@ -756,36 +482,7 @@ export const Preview = ({
         </div>
       ) : (
         <>
-          {isLoadingCommitPages && (
-            <div className="top-0 left-0 right-0 z-20 bg-blue-500/90 backdrop-blur-sm border-b border-blue-600 px-4 py-2 flex items-center justify-center gap-3 text-sm w-full">
-              <div className="flex items-center gap-2">
-                <AiLoading
-                  text="Loading commit version..."
-                  className="flex-row"
-                />
-              </div>
-            </div>
-          )}
-          {!isNew && !currentCommit && (
-            <div className="top-0 left-0 right-0 z-20 bg-neutral-900/95 backdrop-blur-sm border-b border-neutral-800 px-4 py-2 max-h-[40px] flex items-center justify-between gap-3 text-xs w-full">
-              <div className="flex items-center gap-2 flex-1">
-                <TriangleAlert className="size-4 text-neutral-500 flex-shrink-0" />
-                <span className="text-neutral-400 font-medium">
-                  Preview version of the project. Try refreshing the preview if
-                  you experience any issues.
-                </span>
-              </div>
-              <button
-                onClick={refreshIframe}
-                className="cursor-pointer text-xs px-3 py-1 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded-md font-medium transition-colors whitespace-nowrap flex items-center gap-1.5"
-              >
-                <RefreshCcw className="size-3 text-neutral-300 flex-shrink-0" />
-                Refresh
-              </button>
-            </div>
-          )}
           <iframe
-            key={iframeKey}
             id="preview-iframe"
             ref={iframeRef}
             className={classNames(
@@ -796,45 +493,37 @@ export const Preview = ({
               }
             )}
             src={
-              !currentCommit &&
-              !isNew &&
-              !hasUnsavedChanges &&
-              project?.space_id &&
-              !project?.private
-                ? `https://${project.space_id.replaceAll(
+              currentCommit
+                ? `https://${project?.space_id?.replaceAll(
                     "/",
                     "-"
-                  )}.static.hf.space`
+                  )}--rev-${currentCommit.slice(0, 7)}.static.hf.space`
                 : undefined
             }
             srcDoc={
-              currentCommit
-                ? commitPages.length > 0 && previewPageData?.html
-                  ? injectAssetsIntoHtml(previewPageData.html, commitPages)
-                  : defaultHTML
-                : isNew || hasUnsavedChanges || project?.private
+              !currentCommit
                 ? isNew
                   ? throttledHtml || defaultHTML
                   : stableHtml
                 : undefined
             }
-            onLoad={() => {
-              if (
-                currentCommit ||
-                isNew ||
-                hasUnsavedChanges ||
-                project?.private
-              ) {
-                if (iframeRef?.current?.contentWindow?.document?.body) {
-                  iframeRef.current.contentWindow.document.body.scrollIntoView({
-                    block: isAiWorking ? "end" : "start",
-                    inline: "nearest",
-                    behavior: isAiWorking ? "instant" : "smooth",
-                  });
-                }
-                setupIframeListeners();
-              }
-            }}
+            onLoad={
+              !currentCommit
+                ? () => {
+                    if (iframeRef?.current?.contentWindow?.document?.body) {
+                      iframeRef.current.contentWindow.document.body.scrollIntoView(
+                        {
+                          block: isAiWorking ? "end" : "start",
+                          inline: "nearest",
+                          behavior: isAiWorking ? "instant" : "smooth",
+                        }
+                      );
+                    }
+                    // Set up event listeners after iframe loads
+                    setupIframeListeners();
+                  }
+                : undefined
+            }
             sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-modals allow-forms"
             allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; serial; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
           />

components/icons/discord.tsx

@@ -1,27 +0,0 @@
-export const DiscordIcon = ({ className }: { className?: string }) => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 127 96"
-      fill="none"
-      aria-hidden="true"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <g clipPath="url(#clip0_1084_3121)">
-        <path
-          d="M81.15 0C79.9124 2.1973 78.8011 4.4704 77.7909 6.794C68.1934 5.3544 58.4191 5.3544 48.7964 6.794C47.8114 4.4704 46.6748 2.1973 45.4373 0C36.4207 1.5407 27.6314 4.2431 19.2968 8.0568C2.77901 32.5304 -1.69139 56.3725 0.531208 79.8863C10.2044 87.0339 21.0395 92.4893 32.5817 95.9747C35.1831 92.4893 37.4815 88.7766 39.4515 84.9124C35.7135 83.5233 32.1018 81.7806 28.6417 79.7601C29.5509 79.1034 30.4349 78.4215 31.2936 77.7648C51.5746 87.3118 75.0632 87.3118 95.3694 77.7648C96.2281 78.472 97.1121 79.1539 98.0213 79.7601C94.5612 81.8058 90.9495 83.5233 87.1863 84.9377C89.1563 88.8019 91.4546 92.5146 94.0561 96C105.598 92.5146 116.433 87.0844 126.107 79.9369C128.733 52.6598 121.611 29.0197 107.29 8.0821C98.9811 4.2684 90.1918 1.5659 81.1752 0.0505L81.15 0ZM42.2802 65.4144C36.0419 65.4144 30.8643 59.7569 30.8643 52.7609C30.8643 45.7649 35.8398 40.0821 42.255 40.0821C48.6702 40.0821 53.7719 45.7901 53.6709 52.7609C53.5699 59.7317 48.6449 65.4144 42.2802 65.4144ZM84.3576 65.4144C78.0939 65.4144 72.9669 59.7569 72.9669 52.7609C72.9669 45.7649 77.9424 40.0821 84.3576 40.0821C90.7728 40.0821 95.8493 45.7901 95.7482 52.7609C95.6472 59.7317 90.7222 65.4144 84.3576 65.4144Z"
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_1084_3121">
-          <rect width="126.644" height="96" fill="currentColor" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};

components/my-projects/project-card.tsx

@@ -1,12 +1,6 @@
 import Link from "next/link";
 import { formatDistance } from "date-fns";
-import {
-  Download,
-  EllipsisVertical,
-  Lock,
-  Settings,
-  Trash,
-} from "lucide-react";
+import { EllipsisVertical, Lock, Settings, Trash } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -17,8 +11,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ProjectType } from "@/types";
-import { toast } from "sonner";
-import { useUser } from "@/hooks/useUser";
 
 // from-red-500 to-red-500
 // from-yellow-500 to-yellow-500
@@ -36,7 +28,6 @@ export function ProjectCard({
   project: ProjectType;
   onDelete: () => void;
 }) {
-  const { token } = useUser();
   const handleDelete = () => {
     if (
       confirm(
@@ -46,46 +37,6 @@ export function ProjectCard({
       onDelete();
     }
   };
-
-  const handleDownload = async () => {
-    try {
-      toast.info("Preparing download...");
-      const response = await fetch(
-        `/deepsite/api/me/projects/${project.name}/download`,
-        {
-          credentials: "include",
-          headers: {
-            Accept: "application/zip",
-            Authorization: `Bearer ${token}`,
-          },
-        }
-      );
-
-      if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Download failed" }));
-        toast.error(error.error || "Failed to download project");
-        return;
-      }
-
-      const blob = await response.blob();
-
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `${project.name.replace(/\//g, "-")}.zip`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(url);
-
-      toast.success("Download started!");
-    } catch (error) {
-      console.error("Download error:", error);
-      toast.error("Failed to download project");
-    }
-  };
   // from-gray-600 to-gray-600
   // from-blue-600 to-blue-600
   // from-green-600 to-green-600
@@ -169,10 +120,6 @@ export function ProjectCard({
                   Project Settings
                 </DropdownMenuItem>
               </a>
-              <DropdownMenuItem onClick={handleDownload}>
-                <Download className="size-4 text-neutral-100" />
-                Download as ZIP
-              </DropdownMenuItem>
               <DropdownMenuItem variant="destructive" onClick={handleDelete}>
                 <Trash className="size-4 text-red-500" />
                 Delete Project

components/public/navigation/index.tsx

@@ -12,7 +12,6 @@ import Logo from "@/assets/logo.svg";
 import { useUser } from "@/hooks/useUser";
 import { UserMenu } from "@/components/user-menu";
 import { ProTag } from "@/components/pro-modal";
-import { DiscordIcon } from "@/components/icons/discord";
 
 const navigationLinks = [
   {
@@ -97,9 +96,7 @@ export default function Navigation() {
             width={64}
             height={64}
           />
-          <p className="font-sans text-white text-xl font-bold max-lg:hidden">
-            DeepSite
-          </p>
+          <p className="font-sans text-white text-xl font-bold">DeepSite</p>
           {user?.isPro && <ProTag className="ml-1" />}
         </Link>
         <ul className="items-center justify-center gap-6 !hidden">
@@ -144,17 +141,7 @@ export default function Navigation() {
             <div className="size-1 bg-white rounded-full" />
           </div>
         </ul>
-        <div className="flex items-center justify-end gap-3">
-          <Link href="https://discord.gg/KpanwM3vXa" target="_blank">
-            <Button
-              variant="bordered"
-              className="!border-indigo-500 !text-white !bg-indigo-500 transition-all duration-300"
-            >
-              <DiscordIcon className="size-4 mr-0.5" />
-              <span className="max-lg:hidden">Discord Community</span>
-              <span className="lg:hidden">Discord</span>
-            </Button>
-          </Link>
+        <div className="flex items-center justify-end gap-2">
           {loading ? (
             <Button
               variant="ghostDarker"

hooks/useAi.ts

@@ -19,7 +19,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
   const [storageProvider, setStorageProvider] = useLocalStorage("provider", "auto");
   const [storageModel, setStorageModel] = useLocalStorage("model", MODELS[0].value);
   const router = useRouter();
-  const { token } = useUser();
+  const { projects, setProjects, token } = useUser();
   const streamingPagesRef = useRef<Set<string>>(new Set());
 
   const { data: isAiWorking = false } = useQuery({
@@ -44,18 +44,6 @@ export const useAi = (onScrollToBottom?: () => void) => {
     client.setQueryData(["ai.isThinking"], newIsThinking);
   };
 
-  const { data: thinkingContent } = useQuery<string>({
-    queryKey: ["ai.thinkingContent"],
-    queryFn: async () => "",
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    refetchOnMount: false,
-    initialData: ""
-  });
-  const setThinkingContent = (newThinkingContent: string) => {
-    client.setQueryData(["ai.thinkingContent"], newThinkingContent);
-  };
-
   const { data: selectedElement } = useQuery<HTMLElement | null>({
     queryKey: ["ai.selectedElement"],
     queryFn: async () => null,
@@ -136,37 +124,27 @@ export const useAi = (onScrollToBottom?: () => void) => {
     client.setQueryData(["ai.model"], newModel);
   };
 
-  const createNewProject = async (prompt: string, htmlPages: Page[], projectName: string | undefined, isLoggedIn?: boolean, userName?: string) => {
-    if (isLoggedIn && userName) {
-      try {
-        const uploadRequest = await fetch(`/deepsite/api/me/projects/${userName}/new/update`, {
-          method: "PUT",
-          body: JSON.stringify({
-            pages: htmlPages,
-            commitTitle: prompt,
-            isNew: true,
-            projectName,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${token}`,
-          },
-        });
-
-        const uploadRes = await uploadRequest.json();
-        
-        if (!uploadRequest.ok || !uploadRes.ok) {
-          throw new Error(uploadRes.error || "Failed to create project");
+  const createNewProject = async (prompt: string, htmlPages: Page[], projectName: string | undefined, isLoggedIn?: boolean) => {
+    if (isLoggedIn) {
+      api.post("/me/projects", {
+        title: projectName,
+        pages: htmlPages,
+        prompt,
+      })
+      .then((response) => {
+        if (response.data.ok) {
+          setIsAiWorking(false);
+          router.replace(`/${response.data.space.project.space_id}`);
+          setProject(response.data.space);
+          setProjects([...projects, response.data.space]);
+          toast.success("AI responded successfully");
+          if (audio.current) audio.current.play();
         }
-
+      })
+      .catch((error) => {
         setIsAiWorking(false);
-        router.replace(`/${uploadRes.repoId}`);
-        toast.success("AI responded successfully");
-        if (audio.current) audio.current.play();
-      } catch (error: any) {
-        setIsAiWorking(false);
-        toast.error(error?.message || "Failed to create project");
-      }
+        toast.error(error?.response?.data?.message || error?.message || "Failed to create project");
+      });
     } else {
       setIsAiWorking(false);
       toast.success("AI responded successfully");
@@ -174,12 +152,11 @@ export const useAi = (onScrollToBottom?: () => void) => {
     }
   }
   
-  const callAiNewProject = async (prompt: string, enhancedSettings?: EnhancedSettings, redesignMarkdown?: string, isLoggedIn?: boolean, userName?: string) => {
+  const callAiNewProject = async (prompt: string, enhancedSettings?: EnhancedSettings, redesignMarkdown?: string, isLoggedIn?: boolean) => {
     if (isAiWorking) return;
     if (!redesignMarkdown && !prompt.trim()) return;
     
     setIsAiWorking(true);
-    setThinkingContent(""); // Reset thinking content
     streamingPagesRef.current.clear(); // Reset tracking for new generation
     
     const abortController = new AbortController();
@@ -212,14 +189,6 @@ export const useAi = (onScrollToBottom?: () => void) => {
           const { done, value } = await reader.read();
           
           if (done) {
-            // Final processing - extract and remove thinking content
-            const thinkMatch = contentResponse.match(/<think>([\s\S]*?)<\/think>/);
-            if (thinkMatch) {
-              setThinkingContent(thinkMatch[1].trim());
-              setIsThinking(false);
-              contentResponse = contentResponse.replace(/<think>[\s\S]*?<\/think>/, '').trim();
-            }
-
             const trimmedResponse = contentResponse.trim();
             if (trimmedResponse.startsWith("{") && trimmedResponse.endsWith("}")) {
               try {
@@ -244,12 +213,12 @@ export const useAi = (onScrollToBottom?: () => void) => {
             const newPages = formatPages(contentResponse, false);
             let projectName = contentResponse.match(/<<<<<<< PROJECT_NAME_START\s*([\s\S]*?)\s*>>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
             if (!projectName) {
-              projectName = prompt.substring(0, 20).replace(/[^a-zA-Z0-9]/g, "-") + "-" + Math.random().toString(36).substring(2, 9);
+              projectName = prompt.substring(0, 40).replace(/[^a-zA-Z0-9]/g, "-").slice(0, 40);
             }
             setPages(newPages);
             setLastSavedPages([...newPages]);
             if (newPages.length > 0 && !isTheSameHtml(newPages[0].html)) {
-              createNewProject(prompt, newPages, projectName, isLoggedIn, userName);
+              createNewProject(prompt, newPages, projectName, isLoggedIn);
             }
             setPrompts([...prompts, prompt]);
 
@@ -259,26 +228,6 @@ export const useAi = (onScrollToBottom?: () => void) => {
           const chunk = decoder.decode(value, { stream: true });
           contentResponse += chunk;
           
-          // Extract thinking content while streaming
-          if (contentResponse.includes('</think>')) {
-            // Thinking is complete, extract final content and stop thinking
-            const thinkMatch = contentResponse.match(/<think>([\s\S]*?)<\/think>/);
-            if (thinkMatch) {
-              setThinkingContent(thinkMatch[1].trim());
-              setIsThinking(false);
-            }
-          } else if (contentResponse.includes('<think>')) {
-            // Still thinking, update content
-            const thinkMatch = contentResponse.match(/<think>([\s\S]*)$/);
-            if (thinkMatch) {
-              const thinkingText = thinkMatch[1].trim();
-              if (thinkingText) {
-                setIsThinking(true);
-                setThinkingContent(thinkingText);
-              }
-            }
-          }
-
           const trimmedResponse = contentResponse.trim();
           if (trimmedResponse.startsWith("{") && trimmedResponse.endsWith("}")) {
             try {
@@ -311,7 +260,6 @@ export const useAi = (onScrollToBottom?: () => void) => {
     } catch (error: any) {
       setIsAiWorking(false);
       setIsThinking(false);
-      setThinkingContent("");
       setController(null);
       
       if (!abortController.signal.aborted) {
@@ -331,7 +279,6 @@ export const useAi = (onScrollToBottom?: () => void) => {
 
     
     setIsAiWorking(true);
-    setThinkingContent(""); // Reset thinking content
     
     const abortController = new AbortController();
     setController(abortController);
@@ -364,191 +311,71 @@ export const useAi = (onScrollToBottom?: () => void) => {
       });
 
       if (request && request.body) {
-        const reader = request.body.getReader();
-        const decoder = new TextDecoder("utf-8");
-        let contentResponse = "";
-        let metadata: any = null;
-
-        const read = async (): Promise<any> => {
-          const { done, value } = await reader.read();
-          
-          if (done) {
-            // Extract and remove thinking content
-            const thinkMatch = contentResponse.match(/<think>([\s\S]*?)<\/think>/);
-            if (thinkMatch) {
-              setThinkingContent(thinkMatch[1].trim());
-              setIsThinking(false);
-              contentResponse = contentResponse.replace(/<think>[\s\S]*?<\/think>/, '').trim();
-            }
-
-            const metadataMatch = contentResponse.match(/___METADATA_START___([\s\S]*?)___METADATA_END___/);
-            if (metadataMatch) {
-              try {
-                metadata = JSON.parse(metadataMatch[1]);
-                contentResponse = contentResponse.replace(/___METADATA_START___[\s\S]*?___METADATA_END___/, '').trim();
-              } catch (e) {
-                console.error("Failed to parse metadata", e);
-              }
-            }
-
-            const trimmedResponse = contentResponse.trim();
-            if (trimmedResponse.startsWith("{") && trimmedResponse.endsWith("}")) {
-              try {
-                const jsonResponse = JSON.parse(trimmedResponse);
-                if (jsonResponse && !jsonResponse.ok) {
-                  setIsAiWorking(false);
-                  if (jsonResponse.openLogin) {
-                    return { error: "login_required" };
-                  } else if (jsonResponse.openSelectProvider) {
-                    return { error: "provider_required", message: jsonResponse.message };
-                  } else if (jsonResponse.openProModal) {
-                    return { error: "pro_required" };
-                  } else {
-                    toast.error(jsonResponse.message);
-                    return { error: "api_error", message: jsonResponse.message };
-                  }
-                }
-              } catch (e) {
-                // Not JSON, continue with normal processing
-              }
-            }
-            
-            const { processAiResponse, extractProjectName } = await import("@/lib/format-ai-response");
-            const { updatedPages, updatedLines } = processAiResponse(contentResponse, pagesToSend);
-            
-            const updatedPagesMap = new Map(updatedPages.map((p: Page) => [p.path, p]));
-            const mergedPages: Page[] = pages.map(page => 
-              updatedPagesMap.has(page.path) ? updatedPagesMap.get(page.path)! : page
-            );
-            updatedPages.forEach((page: Page) => {
-              if (!pages.find(p => p.path === page.path)) {
-                mergedPages.push(page);
-              }
-            });
-
-            let projectName = null;
-            if (isNew) {
-              projectName = extractProjectName(contentResponse);
-              if (!projectName) {
-                projectName = prompt.substring(0, 40).replace(/[^a-zA-Z0-9]/g, "-").slice(0, 40) + "-" + Math.random().toString(36).substring(2, 15);
-              }
-            }
-
-            try {
-              const uploadRequest = await fetch(`/deepsite/api/me/projects/${metadata?.userName || 'unknown'}/${isNew ? 'new' : (project?.space_id?.split('/')[1] || 'unknown')}/update`, {
-                method: "PUT",
-                body: JSON.stringify({
-                  pages: mergedPages,
-                  commitTitle: prompt,
-                  isNew,
-                  projectName,
-                }),
-                headers: {
-                  "Content-Type": "application/json",
-                  "Authorization": `Bearer ${token}`,
-                },
-              });
-
-              const uploadRes = await uploadRequest.json();
-              
-              if (!uploadRequest.ok || !uploadRes.ok) {
-                throw new Error(uploadRes.error || "Failed to upload to HuggingFace");
-              }
-
-              toast.success("AI responded successfully");
-              const iframe = document.getElementById("preview-iframe") as HTMLIFrameElement;
-
-              if (isNew && uploadRes.repoId) {
-                router.push(`/${uploadRes.repoId}`);
-                setIsAiWorking(false);
-              } else {
-                setPages(mergedPages);
-                setLastSavedPages([...mergedPages]);
-                setCommits([uploadRes.commit, ...commits]);
-                setPrompts([...prompts, prompt]);
-                setSelectedElement(null);
-                setSelectedFiles([]);
-                setIsEditableModeEnabled(false);
-                setIsAiWorking(false);
-              }
-
-              if (audio.current) audio.current.play();
-              if (iframe) {
-                setTimeout(() => {
-                  iframe.src = iframe.src;
-                }, 500);
-              }
-
-              return { success: true, updatedLines };
-            } catch (uploadError: any) {
-              setIsAiWorking(false);
-              toast.error(uploadError.message || "Failed to save changes");
-              return { error: "upload_error", message: uploadError.message };
-            }
-          }
-
-          const chunk = decoder.decode(value, { stream: true });
-          contentResponse += chunk;
-          
-          // Extract thinking content while streaming
-          if (contentResponse.includes('</think>')) {
-            // Thinking is complete, extract final content and stop thinking
-            const thinkMatch = contentResponse.match(/<think>([\s\S]*?)<\/think>/);
-            if (thinkMatch) {
-              setThinkingContent(thinkMatch[1].trim());
-              setIsThinking(false);
-            }
-          } else if (contentResponse.includes('<think>')) {
-            // Still thinking, update content
-            const thinkMatch = contentResponse.match(/<think>([\s\S]*)$/);
-            if (thinkMatch) {
-              const thinkingText = thinkMatch[1].trim();
-              if (thinkingText) {
-                setIsThinking(true);
-                setThinkingContent(thinkingText);
-              }
-            }
+        const res = await request.json();
+        
+        if (!request.ok) {
+          if (res.openLogin) {
+            setIsAiWorking(false);
+            return { error: "login_required" };
+          } else if (res.openSelectProvider) {
+            setIsAiWorking(false);
+            return { error: "provider_required", message: res.message };
+          } else if (res.openProModal) {
+            setIsAiWorking(false);
+            return { error: "pro_required" };
+          } else {
+            toast.error(res.message);
+            setIsAiWorking(false);
+            return { error: "api_error", message: res.message };
           }
+        }
 
-          // Check for error responses during streaming
-          const trimmedResponse = contentResponse.trim();
-          if (trimmedResponse.startsWith("{") && trimmedResponse.endsWith("}")) {
-            try {
-              const jsonResponse = JSON.parse(trimmedResponse);
-              if (jsonResponse && !jsonResponse.ok) {
-                setIsAiWorking(false);
-                if (jsonResponse.openLogin) {
-                  return { error: "login_required" };
-                } else if (jsonResponse.openSelectProvider) {
-                  return { error: "provider_required", message: jsonResponse.message };
-                } else if (jsonResponse.openProModal) {
-                  return { error: "pro_required" };
-                } else {
-                  toast.error(jsonResponse.message);
-                  return { error: "api_error", message: jsonResponse.message };
-                }
-              }
-            } catch (e) {
-              // Not complete JSON yet, continue
+        toast.success("AI responded successfully");
+        const iframe = document.getElementById(
+          "preview-iframe"
+        ) as HTMLIFrameElement;
+
+        if (isNew && res.repoId) {
+          router.push(`/${res.repoId}`);
+          setIsAiWorking(false);
+        } else {
+          const returnedPages = res.pages as Page[];
+          const updatedPagesMap = new Map(returnedPages.map((p: Page) => [p.path, p]));
+          const mergedPages: Page[] = pages.map(page => 
+            updatedPagesMap.has(page.path) ? updatedPagesMap.get(page.path)! : page
+          );
+          returnedPages.forEach((page: Page) => {
+            if (!pages.find(p => p.path === page.path)) {
+              mergedPages.push(page);
             }
-          }
+          });
           
-          return read();
-        };
+          setPages(mergedPages);
+          setLastSavedPages([...mergedPages]);
+          setCommits([res.commit, ...commits]);
+          setPrompts(
+            [...prompts, prompt]
+          )
+          setSelectedElement(null);
+          setSelectedFiles([]);
+          // setContextFile(null); not needed yet, keep context for the next request.
+          setIsEditableModeEnabled(false);
+          setIsAiWorking(false);
+        }
 
-        return await read();
+        if (audio.current) audio.current.play();
+        if (iframe) {
+          setTimeout(() => {
+            iframe.src = iframe.src;
+          }, 500);
+        }
+
+        return { success: true, html: res.html, updatedLines: res.updatedLines };
       }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       setIsAiWorking(false);
-      setIsThinking(false);
-      setThinkingContent("");
-      setController(null);
-      
-      if (!abortController.signal.aborted) {
-        toast.error(error.message || "Network error occurred");
-      }
-      
+      toast.error(error.message);
       if (error.openLogin) {
         return { error: "login_required" };
       }
@@ -596,6 +423,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
     if (pages.length > 0) {
       setPages(pages);
       if (isStreaming) {
+        // Find new pages that haven't been shown yet (HTML, CSS, JS, etc.)
         const newPages = pages.filter(p => 
           !streamingPagesRef.current.has(p.path)
         );
@@ -605,6 +433,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
           setCurrentPage(newPage.path);
           streamingPagesRef.current.add(newPage.path);
           
+          // Update preview if it's an HTML file not in components folder
           if (newPage.path.endsWith('.html') && !newPage.path.includes('/components/')) {
             setPreviewPage(newPage.path);
           }
@@ -624,30 +453,41 @@ export const useAi = (onScrollToBottom?: () => void) => {
   const extractFileContent = (chunk: string, filePath: string): string => {
     if (!chunk) return "";
     
+    // Remove backticks first
     let content = chunk.trim();
     
+    // Handle different file types
     if (filePath.endsWith('.css')) {
+      // Try to extract CSS from complete code blocks first
       const cssMatch = content.match(/```css\s*([\s\S]*?)\s*```/);
       if (cssMatch) {
         content = cssMatch[1];
       } else {
+        // Handle incomplete code blocks during streaming (remove opening fence)
         content = content.replace(/^```css\s*/i, "");
       }
+      // Remove any remaining backticks
       return content.replace(/```/g, "").trim();
     } else if (filePath.endsWith('.js')) {
+      // Try to extract JavaScript from complete code blocks first
       const jsMatch = content.match(/```(?:javascript|js)\s*([\s\S]*?)\s*```/);
       if (jsMatch) {
         content = jsMatch[1];
       } else {
+        // Handle incomplete code blocks during streaming (remove opening fence)
         content = content.replace(/^```(?:javascript|js)\s*/i, "");
       }
+      // Remove any remaining backticks
       return content.replace(/```/g, "").trim();
     } else {
+      // Handle HTML files
       const htmlMatch = content.match(/```html\s*([\s\S]*?)\s*```/);
       if (htmlMatch) {
         content = htmlMatch[1];
       } else {
+        // Handle incomplete code blocks during streaming (remove opening fence)
         content = content.replace(/^```html\s*/i, "");
+        // Try to find HTML starting with DOCTYPE
         const doctypeMatch = content.match(/<!DOCTYPE html>[\s\S]*/);
         if (doctypeMatch) {
           content = doctypeMatch[0];
@@ -690,8 +530,6 @@ export const useAi = (onScrollToBottom?: () => void) => {
   return {
     isThinking,
     setIsThinking,
-    thinkingContent,
-    setThinkingContent,
     callAiNewProject,
     callAiFollowUp,
     isAiWorking,

lib/best-provider.ts

@@ -3,13 +3,18 @@ export const getBestProvider = async (model: string, provider?: string) => {
   const { data } = await response.json()
   let bestProvider = null;
   if (provider === "auto") {
-    return "auto";
+    const sortedProviders = data.providers.sort((a: any, b: any) => {
+      if (a.status === "live" && b.status !== "live") return -1
+      if (a.status !== "live" && b.status === "live") return 1
+      return a?.pricing?.output - b?.pricing?.output + a?.pricing?.input - b?.pricing?.input
+    })
+    bestProvider = sortedProviders[0]
   } else {
     const providerData = data.providers.find((p: any) => p.provider === provider)
     if (providerData?.status === "live") {
-      bestProvider = providerData.provider;
+      bestProvider = providerData
     } else {
-      bestProvider = "auto"
+      bestProvider = data.providers?.find((p: any) => p.status === "live")
     }
   }
 

lib/format-ai-response.ts

@@ -1,255 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Page } from "@/types";
-import {
-  DIVIDER,
-  NEW_FILE_END,
-  NEW_FILE_START,
-  REPLACE_END,
-  SEARCH_START,
-  UPDATE_FILE_END,
-  UPDATE_FILE_START,
-} from "./prompts";
-
-/**
- * Escape special regex characters in a string
- */
-export const escapeRegExp = (string: string): string => {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-};
-
-/**
- * Create a flexible HTML regex that accounts for whitespace variations
- */
-export const createFlexibleHtmlRegex = (searchBlock: string): RegExp => {
-  let searchRegex = escapeRegExp(searchBlock)
-    .replace(/\s+/g, '\\s*')
-    .replace(/>\s*</g, '>\\s*<')
-    .replace(/\s*>/g, '\\s*>');
-  
-  return new RegExp(searchRegex, 'g');
-};
-
-/**
- * Process AI response chunk and apply updates to pages
- * Returns updated pages and updated line numbers
- */
-export interface ProcessAiResponseResult {
-  updatedPages: Page[];
-  updatedLines: number[][];
-}
-
-export const processAiResponse = (
-  chunk: string,
-  pages: Page[]
-): ProcessAiResponseResult => {
-  const updatedLines: number[][] = [];
-  const updatedPages = [...pages];
-
-  // Process UPDATE_FILE blocks
-  const updateFileRegex = new RegExp(
-    `${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${UPDATE_FILE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`,
-    'g'
-  );
-  let updateFileMatch;
-
-  while ((updateFileMatch = updateFileRegex.exec(chunk)) !== null) {
-    const [, filePath, fileContent] = updateFileMatch;
-
-    const pageIndex = updatedPages.findIndex(p => p.path === filePath);
-    if (pageIndex !== -1) {
-      let pageHtml = updatedPages[pageIndex].html;
-
-      let processedContent = fileContent;
-      const htmlMatch = fileContent.match(/```html\s*([\s\S]*?)\s*```/);
-      if (htmlMatch) {
-        processedContent = htmlMatch[1];
-      }
-      let position = 0;
-      let moreBlocks = true;
-
-      while (moreBlocks) {
-        const searchStartIndex = processedContent.indexOf(SEARCH_START, position);
-        if (searchStartIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
-
-        const dividerIndex = processedContent.indexOf(DIVIDER, searchStartIndex);
-        if (dividerIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
-
-        const replaceEndIndex = processedContent.indexOf(REPLACE_END, dividerIndex);
-        if (replaceEndIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
-
-        const searchBlock = processedContent.substring(
-          searchStartIndex + SEARCH_START.length,
-          dividerIndex
-        );
-        const replaceBlock = processedContent.substring(
-          dividerIndex + DIVIDER.length,
-          replaceEndIndex
-        );
-
-        if (searchBlock.trim() === "") {
-          pageHtml = `${replaceBlock}\n${pageHtml}`;
-          updatedLines.push([1, replaceBlock.split("\n").length]);
-        } else {
-          const regex = createFlexibleHtmlRegex(searchBlock);
-          const match = regex.exec(pageHtml);
-
-          if (match) {
-            const matchedText = match[0];
-            const beforeText = pageHtml.substring(0, match.index);
-            const startLineNumber = beforeText.split("\n").length;
-            const replaceLines = replaceBlock.split("\n").length;
-            const endLineNumber = startLineNumber + replaceLines - 1;
-
-            updatedLines.push([startLineNumber, endLineNumber]);
-            pageHtml = pageHtml.replace(matchedText, replaceBlock);
-          }
-        }
-
-        position = replaceEndIndex + REPLACE_END.length;
-      }
-
-      updatedPages[pageIndex].html = pageHtml;
-    }
-  }
-
-  // Process NEW_FILE blocks
-  const newFileRegex = new RegExp(
-    `${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([^\\s]+)\\s*${NEW_FILE_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}([\\s\\S]*?)(?=${UPDATE_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${NEW_FILE_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|$)`,
-    'g'
-  );
-  let newFileMatch;
-
-  while ((newFileMatch = newFileRegex.exec(chunk)) !== null) {
-    const [, filePath, fileContent] = newFileMatch;
-
-    let fileData = fileContent;
-    // Try to extract content from code blocks
-    const htmlMatch = fileContent.match(/```html\s*([\s\S]*?)\s*```/);
-    const cssMatch = fileContent.match(/```css\s*([\s\S]*?)\s*```/);
-    const jsMatch = fileContent.match(/```javascript\s*([\s\S]*?)\s*```/);
-
-    if (htmlMatch) {
-      fileData = htmlMatch[1];
-    } else if (cssMatch) {
-      fileData = cssMatch[1];
-    } else if (jsMatch) {
-      fileData = jsMatch[1];
-    }
-
-    const existingFileIndex = updatedPages.findIndex(p => p.path === filePath);
-
-    if (existingFileIndex !== -1) {
-      updatedPages[existingFileIndex] = {
-        path: filePath,
-        html: fileData.trim()
-      };
-    } else {
-      updatedPages.push({
-        path: filePath,
-        html: fileData.trim()
-      });
-    }
-  }
-
-  // Fallback: process SEARCH/REPLACE blocks without UPDATE_FILE wrapper (backward compatibility)
-  if (updatedPages.length === pages.length && !chunk.includes(UPDATE_FILE_START)) {
-    let position = 0;
-    let moreBlocks = true;
-    let newHtml = updatedPages[0]?.html || "";
-
-    while (moreBlocks) {
-      const searchStartIndex = chunk.indexOf(SEARCH_START, position);
-      if (searchStartIndex === -1) {
-        moreBlocks = false;
-        continue;
-      }
-
-      const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
-      if (dividerIndex === -1) {
-        moreBlocks = false;
-        continue;
-      }
-
-      const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
-      if (replaceEndIndex === -1) {
-        moreBlocks = false;
-        continue;
-      }
-
-      const searchBlock = chunk.substring(
-        searchStartIndex + SEARCH_START.length,
-        dividerIndex
-      );
-      const replaceBlock = chunk.substring(
-        dividerIndex + DIVIDER.length,
-        replaceEndIndex
-      );
-
-      if (searchBlock.trim() === "") {
-        newHtml = `${replaceBlock}\n${newHtml}`;
-        updatedLines.push([1, replaceBlock.split("\n").length]);
-      } else {
-        const regex = createFlexibleHtmlRegex(searchBlock);
-        const match = regex.exec(newHtml);
-
-        if (match) {
-          const matchedText = match[0];
-          const beforeText = newHtml.substring(0, match.index);
-          const startLineNumber = beforeText.split("\n").length;
-          const replaceLines = replaceBlock.split("\n").length;
-          const endLineNumber = startLineNumber + replaceLines - 1;
-
-          updatedLines.push([startLineNumber, endLineNumber]);
-          newHtml = newHtml.replace(matchedText, replaceBlock);
-        }
-      }
-
-      position = replaceEndIndex + REPLACE_END.length;
-    }
-
-    const mainPageIndex = updatedPages.findIndex(p => p.path === '/' || p.path === '/index' || p.path === 'index');
-    if (mainPageIndex !== -1) {
-      updatedPages[mainPageIndex].html = newHtml;
-    }
-  }
-
-  return { updatedPages, updatedLines };
-};
-
-/**
- * Convert pages to File objects for upload to HuggingFace
- */
-export const pagesToFiles = (pages: Page[]): File[] => {
-  const files: File[] = [];
-  pages.forEach((page: Page) => {
-    let mimeType = "text/html";
-    if (page.path.endsWith(".css")) {
-      mimeType = "text/css";
-    } else if (page.path.endsWith(".js")) {
-      mimeType = "text/javascript";
-    } else if (page.path.endsWith(".json")) {
-      mimeType = "application/json";
-    }
-    const file = new File([page.html], page.path, { type: mimeType });
-    files.push(file);
-  });
-  return files;
-};
-
-/**
- * Extract project name from AI response
- */
-export const extractProjectName = (chunk: string): string | null => {
-  const projectName = chunk.match(/<<<<<<< PROJECT_NAME_START\s*([\s\S]*?)\s*>>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
-  return projectName || null;
-};
-

lib/prompts.ts

@@ -15,168 +15,79 @@ export const PROMPT_FOR_IMAGE_GENERATION = `If you want to use image placeholder
 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. 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_LIGHT = `You are an expert UI/UX and Front-End Developer.
-No need to explain what you did. Just return the expected result. Use always TailwindCSS, don't forget to import it.
-Return the results following this format:
-1. Start with ${PROJECT_NAME_START}.
-2. Add the name of the project, right after the start tag.
-3. Close the start tag with the ${PROJECT_NAME_END}.
-4. The name of the project should be short and concise.
-5. Generate files in this ORDER: index.html FIRST, then style.css, then script.js, then web components if needed.
-6. For each file, start with ${NEW_FILE_START}.
-7. Add the file name right after the start tag.
-8. Close the start tag with the ${NEW_FILE_END}.
-9. Start the file content with the triple backticks and appropriate language marker
-10. Insert the file content there.
-11. Close with the triple backticks, like \`\`\`.
-12. Repeat for each file.
-Example Code:
-${PROJECT_NAME_START} Project Name ${PROJECT_NAME_END}
-${NEW_FILE_START}index.html${NEW_FILE_END}
-\`\`\`html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Index</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-    <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-</head>
-<body>
-<h1>Hello World</h1>
-<custom-example></custom-example>
-    <script src="components/example.js"></script>
-    <script src="script.js"></script>
-    <script>feather.replace();</script>
-</body>
-</html>
-\`\`\`
-CRITICAL: The first file MUST always be index.html.`
-
-export const FOLLOW_UP_SYSTEM_PROMPT_LIGHT = `You are an expert UI/UX and Front-End Developer modifying existing files (HTML, CSS, JavaScript).
-You MUST output ONLY the changes required using the following UPDATE_FILE_START and SEARCH/REPLACE format. Do NOT output the entire file.
-Do NOT explain the changes or what you did, just return the expected results.
-Update Format Rules:
-1. Start with ${PROJECT_NAME_START}.
-2. Add the name of the project, right after the start tag.
-3. Close the start tag with the ${PROJECT_NAME_END}.
-4. Start with ${UPDATE_FILE_START}
-5. Provide the name of the file you are modifying (index.html, style.css, script.js, etc.).
-6. Close the start tag with the ${UPDATE_FILE_END}.
-7. Start with ${SEARCH_START}
-8. Provide the exact lines from the current code that need to be replaced.
-9. Use ${DIVIDER} to separate the search block from the replacement.
-10. Provide the new lines that should replace the original lines.
-11. End with ${REPLACE_END}
-12. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
-13. To insert code, use an empty SEARCH block (only ${SEARCH_START} and ${DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
-14. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only ${DIVIDER} and ${REPLACE_END} on their lines).
-15. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
-Example Modifying Code:
-\`\`\`
-${PROJECT_NAME_START} Project Name ${PROJECT_NAME_END}
-${UPDATE_FILE_START}index.html${UPDATE_FILE_END}
-${SEARCH_START}
-    <h1>Old Title</h1>
-${DIVIDER}
-    <h1>New Title</h1>
-${REPLACE_END}
-${SEARCH_START}
-  </body>
-${DIVIDER}
-    <script src="script.js"></script>
-  </body>
-${REPLACE_END}
-\`\`\`
-Example Updating CSS:
-\`\`\`
-${UPDATE_FILE_START}style.css${UPDATE_FILE_END}
-${SEARCH_START}
-body {
-    background: white;
-}
-${DIVIDER}
-body {
-    background: linear-gradient(to right, #667eea, #764ba2);
-}
-${REPLACE_END}
-\`\`\`
-Example Deleting Code:
-\`\`\`
-${UPDATE_FILE_START}index.html${UPDATE_FILE_END}
-${SEARCH_START}
-  <p>This paragraph will be deleted.</p>
-${DIVIDER}
-${REPLACE_END}
-\`\`\`
-For creating new files, use the following format:
-1. Start with ${NEW_FILE_START}.
-2. Add the name of the file (e.g., about.html, style.css, script.js, components/navbar.js), right after the start tag.
-3. Close the start tag with the ${NEW_FILE_END}.
-4. Start the file content with the triple backticks and appropriate language marker (\`\`\`html, \`\`\`css, or \`\`\`javascript).
-5. Insert the file content there.
-6. Close with the triple backticks, like \`\`\`.
-7. Repeat for additional files.
-Example Creating New HTML Page:
-${NEW_FILE_START}about.html${NEW_FILE_END}
-\`\`\`html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>About</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-    <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body>
-    <h1>About Page</h1>
-    <script src="script.js"></script>
-</body>
-</html>
-\`\`\`
-No need to explain what you did. Just return the expected result.`
-
 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.
 Try to create the best UI possible. Important: Make the website responsive by using TailwindCSS. Use it as much as you can, if you can't use it, use custom css (make sure to import tailwind with <script src="https://cdn.tailwindcss.com"></script> in the head).
 Also try to elaborate as much as you can, to create something unique, with a great design.
 If you want to use ICONS import Feather Icons (Make sure to add <script src="https://unpkg.com/feather-icons"></script> and <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> in the head., and <script>feather.replace();</script> in the body. Ex : <i data-feather="user"></i>).
+For interactive animations you can use: Vanta.js (Make sure to add <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> and <script>VANTA.GLOBE({...</script> in the body.).
 Don't hesitate to use real public API for the datas, you can find good ones here https://github.com/public-apis/public-apis depending on what the user asks for.
 You can create multiple pages website at once (following the format rules below) or a Single Page Application. But make sure to create multiple pages if the user asks for different pages.
 IMPORTANT: To avoid duplicate code across pages, you MUST create separate style.css and script.js files for shared CSS and JavaScript code. Each HTML file should link to these files using <link rel="stylesheet" href="style.css"> and <script src="script.js"></script>.
 WEB COMPONENTS: For reusable UI elements like navbars, footers, sidebars, headers, etc., create Native Web Components as separate files in components/ folder:
-- Create each component as a separate .js file in components/ folder (e.g., components/example.js)
+- Create each component as a separate .js file in components/ folder (e.g., components/navbar.js, components/footer.js)
 - Each component file defines a class extending HTMLElement and registers it with customElements.define()
 - Use Shadow DOM for style encapsulation
 - Components render using template literals with inline styles
-- Include component files in HTML before using them: <script src="components/example.js"></script>
-- Use them in HTML pages with custom element tags (e.g., <custom-example></custom-example>)
+- Include component files in HTML before using them: <script src="components/navbar.js"></script>
+- Use them in HTML pages with custom element tags (e.g., <custom-navbar></custom-navbar>)
 - If you want to use ICON you can use Feather Icons, as it's already included in the main pages.
 IMPORTANT: NEVER USE ONCLICK FUNCTION TO MAKE A REDIRECT TO NEW PAGE. MAKE SURE TO ALWAYS USE <a href=""/>, OTHERWISE IT WONT WORK WITH SHADOW ROOT AND WEB COMPONENTS.
-Example components/example.js:
-class CustomExample extends HTMLElement {
+Example components/navbar.js:
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = \`
+      <style>
+        nav {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          padding: 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo { color: white; font-weight: bold; }
+        ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
+        a { color: white; text-decoration: none; }
+      </style>
+      <nav>
+        <div class="logo">My Website</div>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+        </ul>
+      </nav>
+    \`;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);
+
+Example components/footer.js:
+class CustomFooter extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = \`
       <style>
-        /* Add your styles here */
+        footer {
+          background: #1a202c;
+          color: white;
+          padding: 2rem;
+          text-align: center;
+        }
       </style>
-      <div>
-        <h1>Example Component</h1>
-      </div>
+      <footer>
+        <p>&copy; 2024 My Website. All rights reserved.</p>
+      </footer>
     \`;
   }
 }
-customElements.define('custom-example', CustomExample);
+customElements.define('custom-footer', CustomFooter);
+
 Then in HTML, include the component scripts and use the tags:
-<script src="components/example.js"></script>
-<custom-example></custom-example>
+<script src="components/navbar.js"></script>
+<script src="components/footer.js"></script>
+<custom-navbar></custom-navbar>
+<custom-footer></custom-footer>
 ${PROMPT_FOR_IMAGE_GENERATION}
 ${PROMPT_FOR_PROJECT_NAME}
 No need to explain what you did. Just return the expected result. AVOID Chinese characters in the code if not asked by the user.
@@ -185,14 +96,15 @@ Return the results following this format:
 2. Add the name of the project, right after the start tag.
 3. Close the start tag with the ${PROJECT_NAME_END}.
 4. The name of the project should be short and concise.
-5. Generate files in this ORDER: index.html FIRST, then style.css, then script.js, then web components if needed.
+5. Generate files in this ORDER: index.html FIRST, then style.css, then script.js, then web components (components/navbar.js, components/footer.js, etc.), then other HTML pages.
 6. For each file, start with ${NEW_FILE_START}.
-7. Add the file name right after the start tag.
+7. Add the file name (index.html, style.css, script.js, components/navbar.js, about.html, etc.) right after the start tag.
 8. Close the start tag with the ${NEW_FILE_END}.
-9. Start the file content with the triple backticks and appropriate language marker
+9. Start the file content with the triple backticks and appropriate language marker (\`\`\`html, \`\`\`css, or \`\`\`javascript).
 10. Insert the file content there.
 11. Close with the triple backticks, like \`\`\`.
 12. Repeat for each file.
+13. Web components should be in separate .js files in components/ folder and included via <script> tags before use.
 Example Code:
 ${PROJECT_NAME_START} Project Name ${PROJECT_NAME_END}
 ${NEW_FILE_START}index.html${NEW_FILE_END}
@@ -210,15 +122,83 @@ ${NEW_FILE_START}index.html${NEW_FILE_END}
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body>
-<h1>Hello World</h1>
-<custom-example></custom-example>
-    <script src="components/example.js"></script>
+    <custom-navbar></custom-navbar>
+    <h1>Hello World</h1>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>feather.replace();</script>
 </body>
 </html>
 \`\`\`
-CRITICAL: The first file MUST always be index.html.`
+${NEW_FILE_START}style.css${NEW_FILE_END}
+\`\`\`css
+/* Shared styles across all pages */
+body {
+    font-family: 'Inter', sans-serif;
+}
+\`\`\`
+${NEW_FILE_START}script.js${NEW_FILE_END}
+\`\`\`javascript
+// Shared JavaScript across all pages
+console.log('App loaded');
+\`\`\`
+${NEW_FILE_START}components/navbar.js${NEW_FILE_END}
+\`\`\`javascript
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = \`
+      <style>
+        nav {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          padding: 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo { color: white; font-weight: bold; font-size: 1.25rem; }
+        ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
+        a { color: white; text-decoration: none; transition: opacity 0.2s; }
+        a:hover { opacity: 0.8; }
+      </style>
+      <nav>
+        <div class="logo">My Website</div>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+        </ul>
+      </nav>
+    \`;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);
+\`\`\`
+${NEW_FILE_START}components/footer.js${NEW_FILE_END}
+\`\`\`javascript
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = \`
+      <style>
+        footer {
+          background: #1a202c;
+          color: white;
+          padding: 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+      </style>
+      <footer>
+        <p>&copy; 2024 My Website. All rights reserved.</p>
+      </footer>
+    \`;
+  }
+}
+customElements.define('custom-footer', CustomFooter);
+\`\`\`
+CRITICAL: The first file MUST always be index.html. Then generate style.css and script.js. If you create web components, place them in components/ folder as separate .js files. All HTML files MUST include <link rel="stylesheet" href="style.css"> and component scripts before using them (e.g., <script src="components/navbar.js"></script>), then <script src="script.js"></script>.`
 
 export const FOLLOW_UP_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End Developer modifying existing files (HTML, CSS, JavaScript).
 The user wants to apply changes and probably add new features/pages/styles/scripts to the website, based on their request.

lib/providers.ts

@@ -2,7 +2,6 @@ import DeepSeekLogo from "@/assets/deepseek.svg";
 import QwenLogo from "@/assets/qwen.svg";
 import KimiLogo from "@/assets/kimi.svg";
 import ZaiLogo from "@/assets/zai.svg";
-import MiniMaxLogo from "@/assets/minimax.svg";
 
 export const PROVIDERS = {
   "fireworks-ai": {
@@ -48,28 +47,29 @@ export const MODELS = [
     logo: DeepSeekLogo,
     companyName: "DeepSeek",
   },
-  // {
-  //   value: "deepseek-ai/DeepSeek-V3.1",
-  //   label: "DeepSeek V3.1",
-  //   providers: ["fireworks-ai", "novita"],
-  //   autoProvider: "fireworks-ai",
-  //   logo: DeepSeekLogo,
-  //   companyName: "DeepSeek",
-  // },
-  // {
-  //   value: "deepseek-ai/DeepSeek-V3.1-Terminus",
-  //   label: "DeepSeek V3.1 Terminus",
-  //   providers: ["novita"],
-  //   autoProvider: "novita",
-  //   logo: DeepSeekLogo,
-  //   companyName: "DeepSeek",
-  // },
+  {
+    value: "deepseek-ai/DeepSeek-V3.1",
+    label: "DeepSeek V3.1",
+    providers: ["fireworks-ai", "novita"],
+    autoProvider: "fireworks-ai",
+    logo: DeepSeekLogo,
+    companyName: "DeepSeek",
+  },
+  {
+    value: "deepseek-ai/DeepSeek-V3.1-Terminus",
+    label: "DeepSeek V3.1 Terminus",
+    providers: ["novita"],
+    autoProvider: "novita",
+    logo: DeepSeekLogo,
+    companyName: "DeepSeek",
+  },
   {
     value: "deepseek-ai/DeepSeek-V3.2-Exp",
     label: "DeepSeek V3.2 Exp",
     providers: ["novita"],
     autoProvider: "novita",
     logo: DeepSeekLogo,
+    isNew: true,
     companyName: "DeepSeek",
   },
   {
@@ -88,35 +88,18 @@ export const MODELS = [
     logo: KimiLogo,
     companyName: "Kimi",
   },
-  // {
-  //   value: "moonshotai/Kimi-K2-Instruct-0905",
-  //   label: "Kimi K2 Instruct 0905",
-  //   providers: ["together", "groq", "novita"],
-  //   autoProvider: "groq",
-  //   logo: KimiLogo,
-  //   companyName: "Kimi",
-  // },
   {
-    value: "moonshotai/Kimi-K2-Thinking",
-    label: "Kimi K2 Thinking",
+    value: "moonshotai/Kimi-K2-Instruct-0905",
+    label: "Kimi K2 Instruct 0905",
+    providers: ["together", "groq", "novita"],
+    autoProvider: "groq",
     logo: KimiLogo,
     companyName: "Kimi",
-    isNew: true,
-    temperature: 1.0,
   },
   {
     value: "zai-org/GLM-4.6",
     label: "GLM-4.6",
     logo: ZaiLogo,
     companyName: "Z.ai",
-  },
-  {
-    value: "MiniMaxAI/MiniMax-M2",
-    label: "MiniMax M2",
-    logo: MiniMaxLogo,
-    companyName: "MiniMax",
-    top_k: 40,
-    temperature: 1.0,
-    top_p: 0.95,
-  },
+  }
 ];

middleware.ts

@@ -1,10 +1,9 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
-export function middleware(request: NextRequest) {  
+export function middleware(request: NextRequest) {
   const headers = new Headers(request.headers);
   headers.set("x-current-host", request.nextUrl.host);
-  headers.set("x-invoke-path", request.nextUrl.pathname + request.nextUrl.search);
   
   const response = NextResponse.next({ headers });
 

next.config.ts

@@ -3,7 +3,6 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   /* config options here */
   basePath: '/deepsite',
-  assetPrefix: '/deepsite',
   async redirects() {
     return [
       {

package-lock.json

@@ -33,7 +33,6 @@
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "framer-motion": "^12.23.22",
-        "jszip": "^3.10.1",
         "log4js": "^6.9.1",
         "log4js-json-layout": "^2.2.3",
         "lucide-react": "^0.542.0",
@@ -320,13 +319,13 @@
       }
     },
     "node_modules/@huggingface/inference": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.13.1.tgz",
-      "integrity": "sha512-tP63myCjsH+2CqkOaDklJ9MDpUzp6esGMS7RHFXpfv66DWub43kaGTDpI49arqLXM+yFH6FW868eIDgespw5Uw==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.7.1.tgz",
+      "integrity": "sha512-gXrMocGDsE6kUZPEj82c3O+/OKnIfbHvg9rYjGA6svbWrYVmHCIAdCrrgCwNl2v5GELfPJrrfIv0bvzCTfa64A==",
       "license": "MIT",
       "dependencies": {
         "@huggingface/jinja": "^0.5.1",
-        "@huggingface/tasks": "^0.19.62"
+        "@huggingface/tasks": "^0.19.35"
       },
       "engines": {
         "node": ">=18"
@@ -342,9 +341,9 @@
       }
     },
     "node_modules/@huggingface/tasks": {
-      "version": "0.19.63",
-      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.63.tgz",
-      "integrity": "sha512-hmd8e5fdjRiIJE7/EYWXS+Pm2SAu89xjZEgfZddN10ubWqlelXLyj2YgHZrVDEVkVA+5+ImMZUpQIez7b2//fw==",
+      "version": "0.19.43",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.43.tgz",
+      "integrity": "sha512-ANO23K3ugclBl6VLwdt+7MxBkRkKEE17USUSqprHb29UB5ISigH+0AJcEuDA064uzn0hqYrG/nOcv1yARRt8bw==",
       "license": "MIT"
     },
     "node_modules/@humanfs/core": {
@@ -3240,12 +3239,6 @@
         "toggle-selection": "^1.0.6"
       }
     },
-    "node_modules/core-util-is": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "license": "MIT"
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4092,12 +4085,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "license": "MIT"
-    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4125,12 +4112,6 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
     "node_modules/inline-style-prefixer": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
@@ -4177,12 +4158,6 @@
         "node": ">=0.12.0"
       }
     },
-    "node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "license": "MIT"
-    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4298,18 +4273,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/jszip": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
-      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-      "license": "(MIT OR GPL-3.0-or-later)",
-      "dependencies": {
-        "lie": "~3.3.0",
-        "pako": "~1.0.2",
-        "readable-stream": "~2.3.6",
-        "setimmediate": "^1.0.5"
-      }
-    },
     "node_modules/kareem": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.6.3.tgz",
@@ -4343,15 +4306,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lie": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
@@ -5132,12 +5086,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pako": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "license": "(MIT AND Zlib)"
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5228,12 +5176,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "license": "MIT"
-    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5404,27 +5346,6 @@
         "react-dom": "*"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "license": "MIT",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/readable-stream/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "license": "MIT"
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -5587,12 +5508,6 @@
         "node": ">=6.9"
       }
     },
-    "node_modules/setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "license": "MIT"
-    },
     "node_modules/sharp": {
       "version": "0.34.3",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
@@ -5788,21 +5703,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/string_decoder/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "license": "MIT"
-    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -6257,12 +6157,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "license": "MIT"
-    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",

package.json

@@ -33,7 +33,6 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^12.23.22",
-    "jszip": "^3.10.1",
     "log4js": "^6.9.1",
     "log4js-json-layout": "^2.2.3",
     "lucide-react": "^0.542.0",