add model

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 = ["chatyuan", "chatvaala", "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,6 +382,23 @@ pre > code {
         className={cn(styles.main, "px-2 md:px-16 xl:px-64")}
         style={{ width: "100dvw", height: "100dvh" }}
       >
+        <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"
+            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 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 value={m}>{m}</option>
+            ))}
+          </select>
+        </div>
         <div style={{ maxHeight: "calc(100dvh - 75px)", overflowY: "auto" }}>
           {context?.map((qa, i) => {
             return (
@@ -387,7 +409,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 +429,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 +519,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