adapt to using ERNIE models

Signed-off-by: Zhang Jun <jzhang533@gmail.com>

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,4 +1,4 @@
-
+This is being adapted for using ERNIE4.5 models
 
 
 # DeepSite v2 🚀

app/api/ask-ai/route.ts

@@ -1,4 +1,11 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disab  const { prompt, model, redesignMarkdown, html, apiKey, baseUrl, maxTokens } = body;
+
+  const openai = new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY || apiKey || "",
+    baseURL: process.env.OPENAI_BASE_URL || baseUrl,
+  });
+
+  if (!model || (!prompt && !redesignMarkdown)) {script-eslint/no-explicit-any */
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import OpenAI from "openai";
@@ -45,6 +52,7 @@ export async function POST(request: NextRequest) {
       try {
         const chatCompletion = await openai.chat.completions.create({
           model,
+          max_completion_tokens: 64000,
           stream: true,
           messages: [
             { role: "system", content: INITIAL_SYSTEM_PROMPT },
@@ -71,14 +79,13 @@ export async function POST(request: NextRequest) {
             encoder.encode("\n[ERROR] Model returned empty response.\n")
           );
         }
-      } catch (error: any) {
+      } catch (error: unknown) {
         await writer.write(
           encoder.encode(
             JSON.stringify({
               ok: false,
               message:
-                error.message ||
-                "An error occurred while processing your request.",
+                error instanceof Error ? error.message : "An error occurred while processing your request.",
             })
           )
         );
@@ -88,12 +95,12 @@ export async function POST(request: NextRequest) {
     })();
 
     return response;
-  } catch (error: any) {
+  } catch (error: unknown) {
     return NextResponse.json(
       {
         ok: false,
         message:
-          error?.message || "An error occurred while processing your request.",
+          error instanceof Error ? error.message : "An error occurred while processing your request.",
       },
       { status: 500 }
     );
@@ -113,8 +120,8 @@ export async function PUT(request: NextRequest) {
   } = body;
 
   const openai = new OpenAI({
-    apiKey: apiKey || process.env.OPENAI_API_KEY || "",
-    baseURL: baseUrl || process.env.OPENAI_BASE_URL,
+    apiKey: process.env.OPENAI_API_KEY || apiKey || "",
+    baseURL: process.env.OPENAI_BASE_URL || baseUrl,
   });
 
   if (!prompt || !html) {
@@ -127,6 +134,7 @@ export async function PUT(request: NextRequest) {
   try {
     const response = await openai.chat.completions.create({
       model,
+      max_completion_tokens: 64000,
       messages: [
         { role: "system", content: FOLLOW_UP_SYSTEM_PROMPT },
         {
@@ -213,12 +221,12 @@ export async function PUT(request: NextRequest) {
       html: newHtml,
       updatedLines,
     });
-  } catch (error: any) {
+  } catch (error: unknown) {
     return NextResponse.json(
       {
         ok: false,
         message:
-          error.message || "An error occurred while processing your request.",
+          error instanceof Error ? error.message : "An error occurred while processing your request.",
       },
       { status: 500 }
     );

components/editor/ask-ai/index.tsx

@@ -54,24 +54,24 @@ export function AskAI({
   const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
   const [provider, setProvider] = useLocalStorage("provider", "auto");
-  const [openProvider, setOpenProvider] = useState(false);
-  const [providerError, setProviderError] = useState("");
   const [think, setThink] = useState<string | undefined>(undefined);
   const [openThink, setOpenThink] = useState(false);
   const [isThinking, setIsThinking] = useState(true);
   const [controller, setController] = useState<AbortController | null>(null);
   const [isFollowUp, setIsFollowUp] = useState(true);
+  const [currentModel, setCurrentModel] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("openai_model") || MODELS[0].value;
+    }
+    return MODELS[0].value;
+  });
 
-  const getModel = () =>
-  typeof window !== "undefined"
-    ? localStorage.getItem("openai_model") || "gpt-4o-mini"
-    : "gpt-4o-mini";
+  const getModel = () => currentModel;
 
   const callAi = async (redesignMarkdown?: string) => {
     if (isAiWorking) return;
     if (!redesignMarkdown && !prompt.trim()) return;
     setisAiWorking(true);
-    setProviderError("");
     setThink("");
     setOpenThink(false);
     setIsThinking(true);
@@ -88,8 +88,6 @@ export function AskAI({
         const selectedElementHtml = selectedElement
           ? selectedElement.outerHTML
           : "";
-        const apiKey = localStorage.getItem("openai_api_key");
-        const baseUrl = localStorage.getItem("openai_base_url");
         const model = getModel();
         const request = await fetch("/api/ask-ai", {
           method: "PUT",
@@ -100,8 +98,6 @@ export function AskAI({
             model,
             html,
             selectedElementHtml,
-            apiKey,
-            baseUrl,
           }),
           headers: {
             "Content-Type": "application/json",
@@ -124,8 +120,6 @@ export function AskAI({
           if (audio.current) audio.current.play();
         }
       } else {
-        const apiKey = localStorage.getItem("openai_api_key");
-        const baseUrl = localStorage.getItem("openai_base_url");
         const model = getModel();
         const request = await fetch("/api/ask-ai", {
           method: "POST",
@@ -135,8 +129,6 @@ export function AskAI({
             model,
             html: isSameHtml ? "" : html,
             redesignMarkdown,
-            apiKey,
-            baseUrl,
           }),
           headers: {
             "Content-Type": "application/json",
@@ -413,16 +405,11 @@ export function AskAI({
           </div>
           <div className="flex items-center justify-end gap-2">
             <Settings
-              provider={provider as string}
               model={getModel()}
-              onChange={setProvider}
               onModelChange={(newModel: string) => {
+                setCurrentModel(newModel);
                 localStorage.setItem("openai_model", newModel);
               }}
-              open={openProvider}
-              error={providerError}
-              isFollowUp={!isSameHtml && isFollowUp}
-              onClose={setOpenProvider}
             />
             <Button
               size="iconXs"

components/editor/ask-ai/settings.tsx

@@ -1,142 +1,39 @@
-import { PiGearSixFill } from "react-icons/pi";
-import { useState, useEffect } from "react";
-
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { PROVIDERS, MODELS } from "@/lib/providers";
-import { Button } from "@/components/ui/button";
-import { useMemo } from "react";
-import { useUpdateEffect } from "react-use";
-import { Input } from "@/components/ui/input";
-import { toast } from "sonner";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { MODELS } from "@/lib/providers";
 
 export function Settings({
-  open,
-  onClose,
-  provider,
   model,
-  error,
-  onChange,
+  onModelChange,
 }: {
-  open: boolean;
-  provider: string;
   model: string;
-  error?: string;
-  isFollowUp?: boolean;
-  onClose: React.Dispatch<React.SetStateAction<boolean>>;
-  onChange: (provider: string) => void;
   onModelChange: (model: string) => void;
 }) {
-  const [apiKey, setApiKey] = useState("");
-  const [baseUrl, setBaseUrl] = useState("");
-  const [customModel, setCustomModel] = useState("");
-
-  useEffect(() => {
-    setApiKey(localStorage.getItem("openai_api_key") || "");
-    setBaseUrl(localStorage.getItem("openai_base_url") || "");
-    setCustomModel(localStorage.getItem("openai_model") || "");
-  }, [open]);
-
-  const modelAvailableProviders = useMemo(() => {
-    const availableProviders = MODELS.find(
-      (m: { value: string }) => m.value === model
-    )?.providers;
-    if (!availableProviders) return Object.keys(PROVIDERS);
-    return Object.keys(PROVIDERS).filter((id) =>
-      availableProviders.includes(id)
-    );
-  }, [model]);
-
-  useUpdateEffect(() => {
-    if (provider !== "auto" && !modelAvailableProviders.includes(provider)) {
-      onChange("auto");
-    }
-  }, [model, provider]);
-
-  const handleSaveSettings = () => {
-    localStorage.setItem("openai_api_key", apiKey);
-    localStorage.setItem("openai_base_url", baseUrl);
-    localStorage.setItem("openai_model", customModel);
-    toast.success("Settings saved!");
-    onClose(false);
+  const handleModelChange = (newModel: string) => {
+    onModelChange(newModel);
   };
 
   return (
-    <div className="">
-      <Popover open={open} onOpenChange={onClose}>
-        <PopoverTrigger asChild>
-          <Button variant="black" size="sm">
-            <PiGearSixFill className="size-4" />
-            Settings
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="!rounded-2xl p-0 !w-96 overflow-hidden !bg-neutral-900"
-          align="center"
-        >
-          <header className="flex items-center justify-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
-            Customize Settings
-          </header>
-          <main className="px-4 pt-5 pb-6 space-y-5">
-            {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-neutral-300 text-sm mb-2.5">
-                API Key
-              </p>
-              <Input
-                type="password"
-                placeholder="Enter your api key"
-                value={apiKey}
-                onChange={(e) => setApiKey(e.target.value)}
-                className="!bg-neutral-800 !border-neutral-700 !text-neutral-200"
-              />
-            </label>
-            <label className="block">
-              <p className="text-neutral-300 text-sm mb-2.5">
-                Base URL
-              </p>
-              <Input
-                type="text"
-                placeholder="e.g., http://127.0.0.1:11434/v1"
-                value={baseUrl}
-                onChange={(e) => setBaseUrl(e.target.value)}
-                className="!bg-neutral-800 !border-neutral-700 !text-neutral-200"
-              />
-            </label>
-            <label className="block">
-              <p className="text-neutral-300 text-sm mb-2.5">
-                Custom Model
-              </p>
-              <Input
-                type="text"
-                placeholder="e.g., gemma3:1b"
-                value={customModel || "gemma3:1b"}
-                onChange={(e) => setCustomModel(e.target.value)}
-                className="!bg-neutral-800 !border-neutral-700 !text-neutral-200"
-              />
-            </label>
-            <Button
-              variant="default"
-              size="sm"
-              onClick={handleSaveSettings}
-              className="mt-2 w-full"
-            >
-              Save Settings
-            </Button>
-            <div className="bg-amber-500/10 border-amber-500/10 p-3 text-xs text-amber-500 border rounded-lg">
-              Accepts any OpenAI-compatible provider. Enter the corresponding API key and base URL (e.g., OpenRouter, DeepSeek, etc.).
-            </div>
-
-          </main>
-        </PopoverContent>
-      </Popover>
-    </div>
+    <Select value={model} onValueChange={handleModelChange}>
+      <SelectTrigger className="bg-neutral-800 border-neutral-700 text-neutral-200 h-8 min-w-[180px]">
+        <SelectValue placeholder="Select a model" />
+      </SelectTrigger>
+      <SelectContent className="bg-neutral-800 border-neutral-700">
+        {MODELS.map((modelOption) => (
+          <SelectItem 
+            key={modelOption.value} 
+            value={modelOption.value}
+            className="text-neutral-200 hover:bg-neutral-700 focus:bg-neutral-700"
+          >
+            {modelOption.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   );
 }

components/editor/footer/index.tsx

@@ -51,16 +51,7 @@ export function Footer({
   return (
     <footer className="border-t bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 py-2 flex items-center justify-between sticky bottom-0 z-20">
       <div className="flex items-center gap-2">
-        {user &&
-          (user?.isLocalUse ? (
-            <>
-              <div className="max-w-max bg-amber-500/10 rounded-full px-3 py-1 text-amber-500 border border-amber-500/20 text-sm font-semibold">
-                Local Usage
-              </div>
-            </>
-          ) : (
-            <UserMenu className="!p-1 !pr-3 !h-auto" />
-          ))}
+        {user && <UserMenu className="!p-1 !pr-3 !h-auto" />}
         {user && <p className="text-neutral-700">|</p>}
         <Button size="sm" variant="secondary" onClick={onReset}>
           <MdAdd className="text-sm" />
@@ -81,6 +72,13 @@ export function Footer({
               50% { opacity: 0.2; }
             }
           `}</style>
+          <span className="max-lg:hidden"><a
+            href="https://github.com/MartinsMessias/deepsite-locally"
+            target="_blank"
+            className="text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center  transition-all duration-100 cursor-pointer"
+          >
+            <span style={{ animation: 'blink-star 2s infinite' }}>✨</span> <span>Visit ERNIE Bot</span>
+          </a></span>
           <span className="max-lg:hidden"><a
             href="https://github.com/MartinsMessias/deepsite-locally"
             target="_blank"

lib/providers.ts

@@ -8,10 +8,17 @@ export const PROVIDERS = {
 
 export const MODELS = [
   {
-    value: "gpt-4o-mini", // Default model, can be overridden by user
-    label: "GPT-4o Mini (Default)",
+    value: "ernie-x1.1-preview",
+    label: "ERNIE X1.1 Preview",
     providers: ["openai-compatible"],
     autoProvider: "openai-compatible",
-    isThinker: false,
+    isThinker: true,
+  },
+  {
+    value: "ernie-4.5-21b-a3b-thinking",
+    label: "ERNIE-4.5-21B-A3B-Thinking",
+    providers: ["openai-compatible"],
+    autoProvider: "openai-compatible",
+    isThinker: true,
   },
 ];