chore: add more model

.drone.yml

@@ -7,10 +7,9 @@ steps:
     commands:
       - |
         npm config set registry https://registry.npmmirror.com
-        npm i -g pnpm
-        pnpm install
-        pnpm build
-        pnpm next export
+        npm install
+        npm run build
+        npx next export
 
   - name: deploy
     image: git.vaala.cloud/vaalacat/python:3.6

pages/index.tsx

@@ -263,6 +263,7 @@ const Markdown = ({ children }: { children: string }) => {
 const ask = async (
   query: string,
   context: [string, string][],
+  model: string,
   jwt?: string
 ) => {
   const res = await fetch(`/ai/ask`, {
@@ -276,6 +277,7 @@ const ask = async (
         .slice(1)
         .filter((c) => c[1] !== p429)
         .map((c) => ({ query: c[0], answer: c[1] })),
+      model,
     }),
   });
   if (res.status === 429) {
@@ -291,7 +293,10 @@ let contexts = [
   ],
 ];
 
+const models = ["newbing", "chatvaala", "chatyuan", "chatglm"];
+
 function Home() {
+  const [model, setModel] = useState(models[0]);
   const [query, setQuery] = useState("");
   const [question, setQuestion] = useState("");
   const [answer, setAnswer] = useState("");
@@ -323,7 +328,7 @@ function Home() {
 
     setTimeout(() => document.querySelector("#anchor")?.scrollIntoView(), 100);
     (async () => {
-      const ans = await ask(query, context, jwt || "").finally(() => {
+      const ans = await ask(query, context, model, jwt || "").finally(() => {
         setTimeout(
           () => document.querySelector("#anchor")?.scrollIntoView(),
           300
@@ -377,7 +382,41 @@ pre > code {
         className={cn(styles.main, "px-2 md:px-16 xl:px-64")}
         style={{ width: "100dvw", height: "100dvh" }}
       >
-        <div style={{ maxHeight: "calc(100dvh - 75px)", overflowY: "auto" }}>
+        <div className="flex justify-end items-center w-full h-12">
+          <label
+            htmlFor="model"
+            className="mr-2 block text-sm font-medium text-gray-900 dark:text-white"
+          >
+            Model:
+          </label>
+          <select
+            id="model"
+            style={{
+              // @ts-ignore
+              "-webkit-appearance": "none",
+              "-moz-appearance": "none",
+              appearance: "none",
+              backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>")`,
+              backgroundSize: "14px",
+              backgroundPosition: "calc(100% - 10px) 9px",
+              backgroundRepeat: "no-repeat",
+            }}
+            className="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            onChange={(e) => setModel(e.target.value)}
+          >
+            {models.map((m) => (
+              <option key={m} value={m}>
+                {m}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div
+          style={{
+            maxHeight: "calc(100dvh - 123px)",
+            overflowY: "auto",
+          }}
+        >
           {context?.map((qa, i) => {
             return (
               <div
@@ -387,7 +426,7 @@ pre > code {
                 <div className="p-4 w-full bg-white dark:bg-slate-800">
                   <Markdown>{`ME: ${qa[0]}`}</Markdown>
                 </div>
-                <div className="p-4 w-full bg-slate-100  dark:bg-slate-700">
+                <div className="p-4 w-full bg-slate-50  dark:bg-slate-900">
                   {qa[1] === p429 ? (
                     <span className="text-red-500">{qa[1]}</span>
                   ) : (
@@ -407,7 +446,7 @@ pre > code {
                 <Markdown>{`ME: ${question}`}</Markdown>
               </div>
               <div
-                className="p-4 w-full flex items-center bg-slate-100  dark:bg-slate-700"
+                className="p-4 w-full flex items-center bg-slate-50  dark:bg-slate-900"
                 style={{ lineHeight: "18px" }}
               >
                 {answer ? (
@@ -497,14 +536,14 @@ pre > code {
           ></textarea>
           <button
             type="submit"
-            className="text-white bg-sky-500 border-sky-500 border border-solid rounded h-12 p-2 ml-4 hover:border-sky-300 hover:bg-sky-300"
+            className="text-white bg-sky-500 border-sky-500 border border-solid rounded h-12 p-2 ml-4 hover:border-sky-600 hover:bg-sky-600"
             onClick={() => handleAsk.mutate()}
             onSubmit={() => handleAsk.mutate()}
           >
             Send
           </button>
           <button
-            className="text-white bg-sky-500 border-sky-500 border border-solid rounded h-12 p-2 ml-4 hover:border-sky-300 hover:bg-sky-300"
+            className="text-white bg-sky-500 border-sky-500 border border-solid rounded h-12 p-2 ml-4 hover:border-sky-600 hover:bg-sky-600"
             onClick={() => setContext(contexts as any)}
           >
             Clear