Add auto provider

server.js

@@ -213,15 +213,19 @@ app.post("/api/ask-ai", async (req, res) => {
   const client = new InferenceClient(token);
   let completeResponse = "";
 
-  const selectedProvider =
-    PROVIDERS.find((providerItem) => providerItem.id === provider) ??
-    PROVIDERS[0];
-
   let TOKENS_USED = prompt?.length;
   if (previousPrompt) TOKENS_USED += previousPrompt.length;
   if (html) TOKENS_USED += html.length;
 
-  if (TOKENS_USED >= selectedProvider.max_tokens) {
+  const DEFAULT_PROVIDER = PROVIDERS["fireworks-ai"];
+  const selectedProvider =
+    provider === "auto"
+      ? TOKENS_USED < PROVIDERS.sambanova.max_tokens
+        ? PROVIDERS.sambanova
+        : DEFAULT_PROVIDER
+      : PROVIDERS[provider] ?? DEFAULT_PROVIDER;
+
+  if (provider !== "auto" && TOKENS_USED >= selectedProvider.max_tokens) {
     return res.status(400).send({
       ok: false,
       openSelectProvider: true,
@@ -236,8 +240,7 @@ app.post("/api/ask-ai", async (req, res) => {
       messages: [
         {
           role: "system",
-          content:
-            "ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE",
+          content: `ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head). Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE`,
         },
         ...(previousPrompt
           ? [
@@ -260,7 +263,11 @@ app.post("/api/ask-ai", async (req, res) => {
           content: prompt,
         },
       ],
-      max_tokens: selectedProvider.max_tokens,
+      ...(selectedProvider.id !== "sambanova"
+        ? {
+            max_tokens: selectedProvider.max_tokens,
+          }
+        : {}),
     });
 
     while (true) {

src/components/ask-ai/ask-ai.tsx

@@ -27,7 +27,7 @@ function AskAI({
   const [prompt, setPrompt] = useState("");
   const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
-  const [provider, setProvider] = useLocalStorage("provider", "fireworks-ai");
+  const [provider, setProvider] = useLocalStorage("provider", "auto");
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
 

src/components/settings/settings.tsx

@@ -51,55 +51,73 @@ function Settings({
           </span>
           Customize Settings
         </header>
-        <main className="px-4 pt-3 pb-4 space-y-3">
+        <main className="px-4 pt-3 pb-4 space-y-4">
+          {/* toggle using tailwind css */}
+          <div>
+            <div className="flex items-center justify-between">
+              <p className="text-gray-800 text-sm font-medium flex items-center justify-between">
+                Use auto-provider
+              </p>
+              <div
+                className={classNames(
+                  "bg-gray-200 rounded-full w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
+                  {
+                    "!bg-blue-500": provider === "auto",
+                  }
+                )}
+                onClick={() => {
+                  onChange(provider === "auto" ? "fireworks-ai" : "auto");
+                }}
+              >
+                <div
+                  className={classNames(
+                    "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-white",
+                    {
+                      "translate-x-4": provider !== "auto",
+                    }
+                  )}
+                />
+              </div>
+            </div>
+            <p className="text-xs text-gray-500 mt-2">
+              We'll automatically select the best provider for you based on your
+              prompt.
+            </p>
+          </div>
           {error !== "" && (
             <p className="text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md">
               {error}
             </p>
           )}
           <label className="block">
-            <p className="text-gray-500 text-sm font-medium mb-2 flex items-center justify-between">
+            <p className="text-gray-800 text-sm font-medium mb-2 flex items-center justify-between">
               Inference Provider
             </p>
             <div className="grid grid-cols-2 gap-1.5">
-              {PROVIDERS.map((item: any) => (
+              {Object.keys(PROVIDERS).map((id: string) => (
                 <div
-                  key={item.id}
+                  key={id}
                   className={classNames(
                     "text-gray-600 text-sm font-medium cursor-pointer border p-2 rounded-md flex items-center justify-start gap-2",
                     {
                       "bg-blue-500/10 border-blue-500/15 text-blue-500":
-                        item.id === provider,
-                      "hover:bg-gray-100 border-gray-100": item.id !== provider,
+                        id === provider,
+                      "hover:bg-gray-100 border-gray-100": id !== provider,
                     }
                   )}
                   onClick={() => {
-                    onChange(item.id);
+                    onChange(id);
                   }}
                 >
                   <img
-                    src={`/providers/${item.id}.svg`}
-                    alt={item.name}
+                    src={`/providers/${id}.svg`}
+                    alt={PROVIDERS[id].name}
                     className="size-5"
                   />
-                  {item.name}
+                  {PROVIDERS[id].name}
                 </div>
               ))}
             </div>
-            {/* <input
-              type="password"
-              autoComplete="off"
-              className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
-              placeholder="hf_******"
-              value={tokenStorage[0] as string}
-              onChange={(e) => {
-                if (e.target.value.length > 0) {
-                  tokenStorage[1](e.target.value);
-                } else {
-                  tokenStorage[2]();
-                }
-              }}
-            /> */}
           </label>
         </main>
       </div>

utils/providers.js

@@ -1,22 +1,22 @@
-export const PROVIDERS = [
-  {
+export const PROVIDERS = {
+  "fireworks-ai": {
     name: "Fireworks AI",
-    id: "fireworks-ai",
     max_tokens: 131_000,
+    id: "fireworks-ai",
   },
-  {
+  nebius: {
     name: "Nebius AI Studio",
-    id: "nebius",
     max_tokens: 131_000,
+    id: "nebius",
   },
-  {
+  sambanova: {
     name: "SambaNova",
-    id: "sambanova",
     max_tokens: 8_000,
+    id: "sambanova",
   },
-  {
+  hyperbolic: {
     name: "Hyperbolic",
-    id: "hyperbolic",
     max_tokens: 131_000,
+    id: "hyperbolic",
   },
-];
+};