From b2ba8f077124abcd0178763806b5bf89c268bf71 Mon Sep 17 00:00:00 2001 From: Developers Digest <124798203+developersdigest@users.noreply.github.com> Date: Wed, 10 Sep 2025 11:12:25 -0400 Subject: [PATCH] final updates for v2 --- README.md | 2 +- app/generation/page.tsx | 79 ++++++++++++++++++++++++----------------- 2 files changed, 48 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 9430302..d394bcf 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ GROQ_API_KEY=your_groq_api_key # https://console.groq.com # ================================================================= # SANDBOX PROVIDER - Choose ONE: E2B or Vercel # ================================================================= -# SANDBOX_PROVIDER=e2b # or 'vercel' +SANDBOX_PROVIDER=e2b # or 'vercel' # E2B Sandbox (default) E2B_API_KEY=your_e2b_api_key # https://e2b.dev diff --git a/app/generation/page.tsx b/app/generation/page.tsx index 10aafda..0c187a7 100644 --- a/app/generation/page.tsx +++ b/app/generation/page.tsx @@ -181,8 +181,9 @@ function AISandboxPage() { // Add details to context if provided if (detailsParam) { setHomeContextInput(detailsParam); - } else if (storedStyle) { - // If we have a style but no details, set the style as context + } else if (storedStyle && !urlParam) { + // Only apply stored style if no screenshot URL is provided + // This prevents unwanted style inheritance when using screenshot search const styleNames: Record = { '1': 'Glassmorphism', '2': 'Neumorphism', @@ -206,6 +207,10 @@ function AISandboxPage() { } setHomeContextInput(contextString); + } else if (storedInstructions && !urlParam) { + // Apply only instructions if no style but instructions are provided + // and no screenshot URL is provided + setHomeContextInput(storedInstructions); } if (storedModel) { @@ -730,10 +735,14 @@ Tip: I automatically detect and install npm packages from your code imports (lik setTimeout(() => { setCodeApplicationState({ stage: null }); }, 3000); + // Reset loading state when complete + setLoading(false); break; case 'error': addChatMessage(`Error: ${data.message || data.error || 'Unknown error'}`, 'system'); + // Reset loading state on error + setLoading(false); break; case 'warning': @@ -1527,26 +1536,6 @@ Tip: I automatically detect and install npm packages from your code imports (lik {/* Loading overlay - only show when actively processing initial generation */} {shouldShowLoadingOverlay && (
- {/* Large animated browser URL bar */} -
-
-
- {/* Browser dots - bigger */} -
-
-
-
-
- {/* URL bar - bigger */} -
-

- {targetUrl || homeUrlInput.replace(/^https?:\/\//i, '') || 'example.com'} -

-
-
-
-
- {/* Loading animation with skeleton */}
{/* Animated skeleton lines */} @@ -1610,13 +1599,7 @@ Tip: I automatically detect and install npm packages from your code imports (lik
- ) : ( -
- - - -
- )} + ) : null}

@@ -2755,12 +2738,44 @@ Tip: I automatically detect and install npm packages from your code imports (lik currentProject: `${url} Clone` })); + // Filter out style-related context when using screenshot/URL-based generation + // Only keep user's explicit instructions, not inherited styles + let filteredContext = homeContextInput; + if (homeUrlInput && homeContextInput) { + // Check if the context contains default style names that shouldn't be inherited + const stylePatterns = [ + 'Glassmorphism style design', + 'Neumorphism style design', + 'Brutalism style design', + 'Minimalist style design', + 'Dark Mode style design', + 'Gradient Rich style design', + '3D Depth style design', + 'Retro Wave style design', + 'Modern clean and minimalist style design', + 'Fun colorful and playful style design', + 'Corporate professional and sleek style design', + 'Creative artistic and unique style design' + ]; + + // If the context exactly matches or starts with a style pattern, filter it out + const startsWithStyle = stylePatterns.some(pattern => + homeContextInput.trim().startsWith(pattern) + ); + + if (startsWithStyle) { + // Extract only the additional instructions part after the style + const additionalMatch = homeContextInput.match(/\. (.+)$/); + filteredContext = additionalMatch ? additionalMatch[1] : ''; + } + } + const prompt = `I want to recreate the ${url} website as a complete React application based on the scraped content below. ${JSON.stringify(scrapeData, null, 2)} -${homeContextInput ? `ADDITIONAL CONTEXT/REQUIREMENTS FROM USER: -${homeContextInput} +${filteredContext ? `ADDITIONAL CONTEXT/REQUIREMENTS FROM USER: +${filteredContext} Please incorporate these requirements into the design and implementation.` : ''} @@ -2773,7 +2788,7 @@ IMPORTANT INSTRUCTIONS: - Create proper component structure - Make sure the app actually renders visible content - Create ALL components that you reference in imports -${homeContextInput ? '- Apply the user\'s context/theme requirements throughout the application' : ''} +${filteredContext ? '- Apply the user\'s context/theme requirements throughout the application' : ''} Focus on the key sections and content, making it clean and modern.`;