add new model and lighten prompt system

app/api/ask/route.ts

@@ -7,11 +7,12 @@ import { InferenceClient } from "@huggingface/inference";
 import { MODELS } from "@/lib/providers";
 import {
   FOLLOW_UP_SYSTEM_PROMPT,
+  FOLLOW_UP_SYSTEM_PROMPT_LIGHT,
   INITIAL_SYSTEM_PROMPT,
+  INITIAL_SYSTEM_PROMPT_LIGHT,
   MAX_REQUESTS_PER_IP,
   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 { isAuthenticated } from "@/lib/auth";
@@ -100,21 +101,20 @@ export async function POST(request: NextRequest) {
     });
 
     (async () => {
-      // let completeResponse = "";
       try {
         const client = new InferenceClient(token);
         
-        const systemPrompt = INITIAL_SYSTEM_PROMPT;
+        // Use light prompt for MiniMax model
+        const systemPrompt = selectedModel.value.includes('MiniMax') 
+          ? INITIAL_SYSTEM_PROMPT_LIGHT 
+          : INITIAL_SYSTEM_PROMPT;
         
         const userPrompt = rewrittenPrompt;
-        const estimatedInputTokens = estimateInputTokens(systemPrompt, userPrompt);
-        const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, true);
-        const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
         
         const chatCompletion = client.chatCompletionStream(
           {
             model: selectedModel.value,
-            provider: selectedProvider.provider,
+            provider: selectedProvider,
             messages: [
               {
                 role: "system",
@@ -127,7 +127,6 @@ export async function POST(request: NextRequest) {
 3. I want to use the following theme: ${enhancedSettings.theme} mode.` : "")
               },
             ],
-            ...providerConfig,
           },
           billTo ? { billTo } : {}
         );
@@ -283,7 +282,10 @@ export async function PUT(request: NextRequest) {
       try {
         const client = new InferenceClient(token);
 
-        const systemPrompt = FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : "");
+        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 allPages = pages || [];
@@ -296,14 +298,10 @@ export async function PUT(request: NextRequest) {
             : ""
           }. 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,
+            provider: selectedProvider,
             messages: [
               {
                 role: "system",
@@ -322,7 +320,6 @@ export async function PUT(request: NextRequest) {
                 content: prompt,
               },
             ],
-            ...providerConfig,
           },
           billTo ? { billTo } : {}
         );

lib/best-provider.ts

@@ -3,18 +3,13 @@ export const getBestProvider = async (model: string, provider?: string) => {
   const { data } = await response.json()
   let bestProvider = null;
   if (provider === "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]
+    return "auto";
   } else {
     const providerData = data.providers.find((p: any) => p.provider === provider)
     if (providerData?.status === "live") {
-      bestProvider = providerData
+      bestProvider = providerData.provider;
     } else {
-      bestProvider = data.providers?.find((p: any) => p.status === "live")
+      bestProvider = "auto"
     }
   }
 

lib/prompts.ts

@@ -15,79 +15,168 @@ 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.
+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 src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.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/navbar.js, components/footer.js)
+- Create each component as a separate .js file in components/ folder (e.g., components/example.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/navbar.js"></script>
-- Use them in HTML pages with custom element tags (e.g., <custom-navbar></custom-navbar>)
+- 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>)
 - 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/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 {
+Example components/example.js:
+class CustomExample extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = \`
       <style>
-        footer {
-          background: #1a202c;
-          color: white;
-          padding: 2rem;
-          text-align: center;
-        }
+        /* Add your styles here */
       </style>
-      <footer>
-        <p>&copy; 2024 My Website. All rights reserved.</p>
-      </footer>
+      <div>
+        <h1>Example Component</h1>
+      </div>
     \`;
   }
 }
-customElements.define('custom-footer', CustomFooter);
-
+customElements.define('custom-example', CustomExample);
 Then in HTML, include the component scripts and use the tags:
-<script src="components/navbar.js"></script>
-<script src="components/footer.js"></script>
-<custom-navbar></custom-navbar>
-<custom-footer></custom-footer>
+<script src="components/example.js"></script>
+<custom-example></custom-example>
 ${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.
@@ -96,15 +185,14 @@ 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 (components/navbar.js, components/footer.js, etc.), then other HTML pages.
+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 (index.html, style.css, script.js, components/navbar.js, about.html, etc.) right after the start tag.
+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 (\`\`\`html, \`\`\`css, or \`\`\`javascript).
+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.
-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}
@@ -122,83 +210,15 @@ ${NEW_FILE_START}index.html${NEW_FILE_END}
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body>
-    <custom-navbar></custom-navbar>
-    <h1>Hello World</h1>
-    <custom-footer></custom-footer>
-    <script src="components/navbar.js"></script>
-    <script src="components/footer.js"></script>
+<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>
 \`\`\`
-${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>.`
+CRITICAL: The first file MUST always be index.html.`
 
 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.