Spaces:

enzostvs
/

deepsite

Running

App Files Files Community

550

Upload 7 files

#464

by Gorantlahari123 - opened Oct 12, 2025

base: refs/heads/main

←

from: refs/pr/464

Discussion Files changed

+262

-83

Files changed (11) hide show

.gitattributes +2 -0
CakezyWebsite/images/Chocolate_Truffle_Cake.jpg.jpg +3 -0
CakezyWebsite/images/Red_Velvet_Cake.jpg.jpg +3 -0
CakezyWebsite/images/black_forest_cake.jpg.jpg +0 -0
CakezyWebsite/images/fresh_lime_soda.jpg.jpg +0 -0
CakezyWebsite/images/iced_mocha_frappe.jpg.jpg +0 -0
CakezyWebsite/images/mango_smoothie.jpg.jpg +0 -0
CakezyWebsite/index.html.html +121 -0
Dockerfile +11 -14
app/api/ask/route.ts +119 -60
hooks/useAi.ts +3 -9

.gitattributes ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ CakezyWebsite/images/Chocolate_Truffle_Cake.jpg.jpg filter=lfs diff=lfs merge=lfs -text
2	+ CakezyWebsite/images/Red_Velvet_Cake.jpg.jpg filter=lfs diff=lfs merge=lfs -text

CakezyWebsite/images/Chocolate_Truffle_Cake.jpg.jpg ADDED Viewed

Git LFS Details

SHA256: c421e73443952e93755c66164d729f97c33f996d3929d4257fe8b203f4c6015c
Pointer size: 131 Bytes
Size of remote file: 128 kB

CakezyWebsite/images/Red_Velvet_Cake.jpg.jpg ADDED Viewed

Git LFS Details

SHA256: 364d0f49ac19c903d17d10fc62da54c1910468477f0d29129214978c96cca5fc
Pointer size: 131 Bytes
Size of remote file: 179 kB

CakezyWebsite/images/black_forest_cake.jpg.jpg ADDED Viewed

CakezyWebsite/images/fresh_lime_soda.jpg.jpg ADDED Viewed

CakezyWebsite/images/iced_mocha_frappe.jpg.jpg ADDED Viewed

CakezyWebsite/images/mango_smoothie.jpg.jpg ADDED Viewed

CakezyWebsite/index.html.html ADDED Viewed

	@@ -0,0 +1,121 @@

+    <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cakezy Delights - Premium Cakes & Beverages</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .hero-gradient {
+            background: linear-gradient(135deg, #f3e8ff 0%, #fce4ec 50%, #fff0f6 100%);
+        }
+        .cake-card:hover, .beverage-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+        }
+    </style>
+</head>
+<body class="font-sans antialiased text-gray-800">
+<!-- Navigation -->
+<nav class="bg-white shadow-sm">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between h-16">
+            <div class="flex items-center">
+                <i data-feather="cake" class="h-8 w-8 text-pink-500"></i>
+                <span class="ml-2 text-xl font-bold text-gray-900">Cakezy Delights</span>
+            </div>
+            <div class="hidden sm:flex sm:items-center sm:space-x-8">
+                <a href="#cakes" class="text-gray-900 border-b-2 border-pink-500 px-1 pt-1 text-sm font-medium">Cakes</a>
+                <a href="#beverages" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Beverages</a>
+                <a href="#contact" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Contact</a>
+            </div>
+        </div>
+    </div>
+</nav>
+<!-- Hero Section -->
+<section class="hero-gradient">
+    <div class="max-w-7xl mx-auto py-16 px-4 text-center">
+        <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+            Sip. Slice. Smile.
+        </h1>
+        <span class="block text-pink-500 text-4xl md:text-5xl font-bold">Cakezy Delights</span>
+        <p class="mt-4 text-gray-500 text-lg md:text-xl">
+            Freshly baked cakes & refreshing beverages delivered to your doorstep.
+        </p>
+    </div>
+</section>
+<!-- Cakes Section -->
+<section id="cakes" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-10">Our Best-Selling Cakes 🍰</h2>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+        <!-- Cake 1 -->
+        <div class="cake-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
+            <img src="images/Chocolate_Truffle_Cake.jpg" alt="Chocolate Truffle Cake" class="w-full h-64 object-cover">
+            <div class="p-4">
+                <h3 class="text-lg font-medium text-gray-900">Chocolate Truffle Cake</h3>
+                <p class="text-gray-500 text-sm mt-1">Rich chocolate layers with truffle cream</p>
+            </div>
+        </div>
+        <!-- Cake 2 -->
+        <div class="cake-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
+            <img src="images/Red_Velvet_Cake.jpg" alt="Red Velvet Cake" class="w-full h-64 object-cover">
+            <div class="p-4">
+                <h3 class="text-lg font-medium text-gray-900">Red Velvet Cake</h3>
+                <p class="text-gray-500 text-sm mt-1">Classic velvet with cream cheese frosting</p>
+            </div>
+        </div>
+        <!-- Cake 3 -->
+        <div class="cake-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
+            <img src="images/black_forest_cake.jpg" alt="Black Forest Cake" class="w-full h-64 object-cover">
+            <div class="p-4">
+                <h3 class="text-lg font-medium text-gray-900">Black Forest Cake</h3>
+                <p class="text-gray-500 text-sm mt-1">Chocolate layers with cherry filling</p>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- Beverages Section -->
+<section id="beverages" class="bg-gray-100 py-12">
+    <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-10">Refreshing Beverages 🥤</h2>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Beverage 1 -->
+        <div class="beverage-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
+            <img src="images/mango_smoothie.jpg" alt="Mango Smoothie" class="w-full h-64 object-cover">
+            <div class="p-4">
+                <h3 class="text-lg font-medium text-gray-900">Mango Smoothie</h3>
+                <p class="text-gray-500 text-sm mt-1">350ml</p>
+            </div>
+        </div>
+        <!-- Beverage 2 -->
+        <div class="beverage-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
+            <img src="images/iced_mocha_frappe.jpg" alt="Cold Coffee Frappe" class="w-full h-64 object-cover">
+            <div class="p-4">
+                <h3 class="text-lg font-medium text-gray-900">Cold Coffee Frappe</h3>
+                <p class="text-gray-500 text-sm mt-1">400ml</p>
+            </div>
+        </div>
+        <!-- Beverage 3 -->
+        <div class="beverage-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
+            <img src="images/fresh_lime_soda.jpg" alt="Fresh Lime Soda" class="w-full h-64 object-cover">
+            <div class="p-4">
+                <h3 class="text-lg font-medium text-gray-900">Fresh Lime Soda</h3>
+                <p class="text-gray-500 text-sm mt-1">300ml</p>
+            </div>
+        </div>
+    </div>
+</section>
+<script>
+    feather.replace()
+</script>
+</body>
+</html>

Dockerfile CHANGED Viewed

@@ -1,19 +1,16 @@
-FROM node:20-alpine
-USER root
-USER 1000
-WORKDIR /usr/src/app
-# Copy package.json and package-lock.json to the container
-COPY --chown=1000 package.json package-lock.json ./
-# Copy the rest of the application files to the container
-COPY --chown=1000 . .
-RUN npm install
-RUN npm run build
-# Expose the application port (assuming your app runs on port 3000)
-EXPOSE 3000
-# Start the application
-CMD ["npm", "start"]

+FROM registry.hf.space/enzostvs-deepsite:cpu-bbc7882
+# FROM node:22
+# USER 1000
+# WORKDIR /usr/src/app
+# # Copy the rest of the application files to the container
+# COPY --chown=1000 . .
+# RUN npm ci && npm run build
+# # Expose the application port (assuming your app runs on port 3000)
+# EXPOSE 3000
+# # Start the application
+# CMD ["npm", "start"]

app/api/ask/route.ts CHANGED Viewed

@@ -285,11 +285,35 @@ export async function PUT(request: NextRequest) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   };
   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');
   };
@@ -300,41 +324,9 @@ export async function PUT(request: NextRequest) {
     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 getRelevantPages = (pages: Page[], prompt: string, maxPages: number = 2): Page[] => {
-      if (pages.length <= maxPages) return pages;
-      const indexPage = pages.find(p => p.path === '/' || p.path === '/index' || p.path === 'index');
-      const otherPages = pages.filter(p => p !== indexPage);
-      if (selectedElementHtml) {
-        const elementKeywords = selectedElementHtml.toLowerCase().match(/class=["']([^"']*)["']|id=["']([^"']*)["']/g) || [];
-        const relevantPages = otherPages.filter(page => {
-          const pageContent = page.html.toLowerCase();
-          return elementKeywords.some((keyword: string) => pageContent.includes(keyword.toLowerCase()));
-        });
-        return indexPage ? [indexPage, ...relevantPages.slice(0, maxPages - 1)] : relevantPages.slice(0, maxPages);
-      }
-      const keywords = prompt.toLowerCase().split(/\s+/).filter(word => word.length > 3);
-      const scoredPages = otherPages.map(page => {
-        const pageContent = (page.path + ' ' + page.html).toLowerCase();
-        const score = keywords.reduce((acc, keyword) => {
-          return acc + (pageContent.includes(keyword) ? 1 : 0);
-        }, 0);
-        return { page, score };
-      });
-      const topPages = scoredPages
-        .sort((a, b) => b.score - a.score)
-        .slice(0, maxPages - (indexPage ? 1 : 0))
-        .map(item => item.page);
-      return indexPage ? [indexPage, ...topPages] : topPages;
-    };
-    const relevantPages = getRelevantPages(pages || [], prompt);
-    const pagesContext = relevantPages
       .map((p: Page) => `- ${p.path}\n${p.html}`)
       .join("\n\n");
@@ -342,7 +334,7 @@ export async function PUT(request: NextRequest) {
       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 (${relevantPages.length}/${pages?.length || 0} shown): ${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);
@@ -450,17 +442,49 @@ export async function PUT(request: NextRequest) {
               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);
               }
             }
@@ -539,17 +563,54 @@ export async function PUT(request: NextRequest) {
             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);
             }
           }
@@ -598,7 +659,6 @@ pinned: false
 tags:
   - deepsite-v3
 ---
 # Welcome to your new DeepSite project!
 This project was created with [DeepSite](https://deepsite.hf.co).
       `;
@@ -652,5 +712,4 @@ This project was created with [DeepSite](https://deepsite.hf.co).
       { status: 500 }
     );
   }
-}

     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   };
+  const normalizeHtml = (html: string): string => {
+    return html
+      // Normalize whitespace within tags
+      .replace(/\s+/g, ' ')
+      // Remove spaces before closing >
+      .replace(/\s+>/g, '>')
+      // Remove spaces before />
+      .replace(/\s+\/>/g, '/>')
+      // Normalize spaces around = in attributes
+      .replace(/\s*=\s*/g, '=')
+      // Normalize quotes (convert single to double)
+      .replace(/='([^']*)'/g, '="$1"')
+      // Remove trailing spaces in opening/closing tags
+      .replace(/<([^>]*?)\s+>/g, '<$1>')
+      // Normalize self-closing tags
+      .replace(/\/\s*>/g, '/>')
+      .trim();
+  };
   const createFlexibleHtmlRegex = (searchBlock: string) => {
+    // Normalize both the search block for comparison
+    const normalizedSearch = normalizeHtml(searchBlock);
+    // Escape regex special characters
+    let searchRegex = escapeRegExp(normalizedSearch)
+      // Make whitespace flexible (but only between elements, not within tags)
       .replace(/>\s*</g, '>\\s*<')
+      // Make line breaks and spaces around content flexible
+      .replace(/>\s*([^<]+)\s*</g, '>\\s*$1\\s*<');
     return new RegExp(searchRegex, 'g');
   };
     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.";
+    // Send all pages without filtering
+    const allPages = pages || [];
+    const pagesContext = allPages
       .map((p: Page) => `- ${p.path}\n${p.html}`)
       .join("\n\n");
       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);
               updatedLines.push([1, replaceBlock.split("\n").length]);
             } else {
               const regex = createFlexibleHtmlRegex(searchBlock);
+              // Normalize the pageHtml for matching
+              const normalizedPageHtml = normalizeHtml(pageHtml);
+              const match = regex.exec(normalizedPageHtml);
               if (match) {
+                // Find the original match in the non-normalized HTML
+                const normalizedSearch = normalizeHtml(searchBlock);
+                const originalMatchIndex = pageHtml.indexOf(searchBlock);
+                if (originalMatchIndex !== -1) {
+                  const beforeText = pageHtml.substring(0, originalMatchIndex);
+                  const startLineNumber = beforeText.split("\n").length;
+                  const replaceLines = replaceBlock.split("\n").length;
+                  const endLineNumber = startLineNumber + replaceLines - 1;
+                  updatedLines.push([startLineNumber, endLineNumber]);
+                  pageHtml = pageHtml.replace(searchBlock, replaceBlock);
+                } else {
+                  // Fallback: try to find similar pattern in the original HTML
+                  const flexibleRegex = new RegExp(
+                    escapeRegExp(searchBlock)
+                      .replace(/\s+/g, '\\s+')
+                      .replace(/\s*=\s*/g, '\\s*=\\s*')
+                      .replace(/'\s*([^']*)\s*'/g, "'\\s*$1\\s*'")
+                      .replace(/"\s*([^"]*)\s*"/g, '"\\s*$1\\s*"')
+                      .replace(/\s*>/g, '\\s*>')
+                      .replace(/\s*\/>/g, '\\s*/>'),
+                    'g'
+                  );
+                  const flexibleMatch = flexibleRegex.exec(pageHtml);
+                  if (flexibleMatch) {
+                    const matchedText = flexibleMatch[0];
+                    const beforeText = pageHtml.substring(0, flexibleMatch.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);
+                  }
+                }
               }
             }
             updatedLines.push([1, replaceBlock.split("\n").length]);
           } else {
             const regex = createFlexibleHtmlRegex(searchBlock);
+            // Get the main page HTML (first page or index page)
+            const mainPage = updatedPages.find(p => p.path === '/' || p.path === '/index' || p.path === 'index') || updatedPages[0];
+            if (!mainPage) continue;
+            newHtml = mainPage.html;
+            // Normalize the newHtml for matching
+            const normalizedNewHtml = normalizeHtml(newHtml);
+            const match = regex.exec(normalizedNewHtml);
             if (match) {
+              // Find the original match in the non-normalized HTML
+              const originalMatchIndex = newHtml.indexOf(searchBlock);
+              if (originalMatchIndex !== -1) {
+                const beforeText = newHtml.substring(0, originalMatchIndex);
+                const startLineNumber = beforeText.split("\n").length;
+                const replaceLines = replaceBlock.split("\n").length;
+                const endLineNumber = startLineNumber + replaceLines - 1;
+                updatedLines.push([startLineNumber, endLineNumber]);
+                newHtml = newHtml.replace(searchBlock, replaceBlock);
+              } else {
+                // Fallback: try to find similar pattern in the original HTML
+                const flexibleRegex = new RegExp(
+                  escapeRegExp(searchBlock)
+                    .replace(/\s+/g, '\\s+')
+                    .replace(/\s*=\s*/g, '\\s*=\\s*')
+                    .replace(/'\s*([^']*)\s*'/g, "'\\s*$1\\s*'")
+                    .replace(/"\s*([^"]*)\s*"/g, '"\\s*$1\\s*"')
+                    .replace(/\s*>/g, '\\s*>')
+                    .replace(/\s*\/>/g, '\\s*/>'),
+                  'g'
+                );
+                const flexibleMatch = flexibleRegex.exec(newHtml);
+                if (flexibleMatch) {
+                  const matchedText = flexibleMatch[0];
+                  const beforeText = newHtml.substring(0, flexibleMatch.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);
+                }
+              }
             }
           }
 tags:
   - deepsite-v3
 ---
 # Welcome to your new DeepSite project!
 This project was created with [DeepSite](https://deepsite.hf.co).
       `;
       { status: 500 }
     );
   }
+}

hooks/useAi.ts CHANGED Viewed

@@ -10,7 +10,6 @@ import { api } from "@/lib/api";
 import { useRouter } from "next/navigation";
 import { useUser } from "./useUser";
 import { LivePreviewRef } from "@/components/editor/live-preview";
-import { isTheSameHtml } from "@/lib/compare-html-diff";
 export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefObject<LivePreviewRef | null>) => {
   const client = useQueryClient();
@@ -199,15 +198,10 @@ export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefO
             }
             const newPages = formatPages(contentResponse);
-            let projectName = contentResponse.match(/<<<<<<< PROJECT_NAME_START ([\s\S]*?) >>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
-            if (!projectName) {
-              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);
-            }
             setPrompts([...prompts, prompt]);
             return { success: true, pages: newPages };

 import { useRouter } from "next/navigation";
 import { useUser } from "./useUser";
 import { LivePreviewRef } from "@/components/editor/live-preview";
 export const useAi = (onScrollToBottom?: () => void, livePreviewRef?: React.RefObject<LivePreviewRef | null>) => {
   const client = useQueryClient();
             }
             const newPages = formatPages(contentResponse);
+            const projectName = contentResponse.match(/<<<<<<< PROJECT_NAME_START ([\s\S]*?) >>>>>>> PROJECT_NAME_END/)?.[1]?.trim();
             setPages(newPages);
+            setLastSavedPages([...newPages]); // Mark initial pages as saved
+            createNewProject(prompt, newPages, projectName, isLoggedIn);
             setPrompts([...prompts, prompt]);
             return { success: true, pages: newPages };