From 0dfdd4c52a9d686af54346ade35e0bcff226c8b9 Mon Sep 17 00:00:00 2001
From: Nate Sesti <33237525+sestinj@users.noreply.github.com>
Date: Fri, 29 Sep 2023 20:20:45 -0700
Subject: Model config UI (#522)

* feat: :sparkles: improved model selection

* feat: :sparkles: add max_tokens option to LLM class

* docs: :memo: update reference with max_tokens

* feat: :loud_sound: add context to dev data loggign

* feat: :sparkles: final work on model config ui
---
 extension/react-app/src/pages/modelconfig.tsx | 261 ++++++++++++++++++++++++++
 1 file changed, 261 insertions(+)
 create mode 100644 extension/react-app/src/pages/modelconfig.tsx

(limited to 'extension/react-app/src/pages/modelconfig.tsx')

diff --git a/extension/react-app/src/pages/modelconfig.tsx b/extension/react-app/src/pages/modelconfig.tsx
new file mode 100644
index 00000000..97e2d76c
--- /dev/null
+++ b/extension/react-app/src/pages/modelconfig.tsx
@@ -0,0 +1,261 @@
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import ModelCard from "../components/ModelCard";
+import styled from "styled-components";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import {
+  TextInput,
+  defaultBorderRadius,
+  lightGray,
+  vscBackground,
+} from "../components";
+import { Form, useNavigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { GUIClientContext } from "../App";
+import { setShowDialog } from "../redux/slices/uiStateSlice";
+import { useParams } from "react-router-dom";
+import {
+  MODEL_INFO,
+  MODEL_PROVIDER_TAG_COLORS,
+  ModelInfo,
+} from "../util/modelData";
+import { RootStore } from "../redux/store";
+import StyledMarkdownPreview from "../components/StyledMarkdownPreview";
+import { getFontSize } from "../util";
+import { FormProvider, useForm } from "react-hook-form";
+
+const GridDiv = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-gap: 2rem;
+  padding: 1rem;
+  justify-items: center;
+  align-items: center;
+`;
+
+const CustomModelButton = styled.div<{ disabled: boolean }>`
+  border: 1px solid ${lightGray};
+  border-radius: ${defaultBorderRadius};
+  padding: 4px 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  transition: all 0.5s;
+
+  ${(props) =>
+    props.disabled
+      ? `
+    opacity: 0.5;
+    `
+      : `
+  &:hover {
+    border: 1px solid #be1b55;
+    background-color: #be1b5522;
+    cursor: pointer;
+  }
+  `}
+`;
+
+function ModelConfig() {
+  const formMethods = useForm();
+  const { modelName } = useParams();
+
+  const [modelInfo, setModelInfo] = useState<ModelInfo | undefined>(undefined);
+
+  useEffect(() => {
+    if (modelName) {
+      setModelInfo(MODEL_INFO[modelName]);
+    }
+  }, [modelName]);
+
+  const client = useContext(GUIClientContext);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const vscMediaUrl = useSelector(
+    (state: RootStore) => state.config.vscMediaUrl
+  );
+
+  const disableModelCards = useCallback(() => {
+    return (
+      modelInfo?.collectInputFor?.some((d) => {
+        if (!d.required) return false;
+        const val = formMethods.watch(d.key);
+        return (
+          typeof val === "undefined" || (typeof val === "string" && val === "")
+        );
+      }) || false
+    );
+  }, [modelInfo, formMethods]);
+
+  return (
+    <FormProvider {...formMethods}>
+      <div className="overflow-y-scroll">
+        <div
+          className="items-center flex m-0 p-0 sticky top-0"
+          style={{
+            borderBottom: `0.5px solid ${lightGray}`,
+            backgroundColor: vscBackground,
+            zIndex: 2,
+          }}
+        >
+          <ArrowLeftIcon
+            width="1.2em"
+            height="1.2em"
+            onClick={() => navigate("/models")}
+            className="inline-block ml-4 cursor-pointer"
+          />
+          <h3 className="text-lg font-bold m-2 inline-block">
+            Configure Model
+          </h3>
+        </div>
+
+        <div className="px-2">
+          <div style={{ display: "flex", alignItems: "center" }}>
+            {vscMediaUrl && (
+              <img
+                src={`${vscMediaUrl}/logos/${modelInfo?.icon}`}
+                height="24px"
+                style={{ marginRight: "10px" }}
+              />
+            )}
+            <h2>{modelInfo?.title}</h2>
+          </div>
+          {modelInfo?.tags?.map((tag) => {
+            return (
+              <span
+                style={{
+                  backgroundColor: `${MODEL_PROVIDER_TAG_COLORS[tag]}55`,
+                  color: "white",
+                  padding: "2px 4px",
+                  borderRadius: defaultBorderRadius,
+                  marginRight: "4px",
+                }}
+              >
+                {tag}
+              </span>
+            );
+          })}
+          <StyledMarkdownPreview
+            className="mt-2"
+            fontSize={getFontSize()}
+            source={modelInfo?.longDescription || modelInfo?.description || ""}
+            wrapperElement={{
+              "data-color-mode": "dark",
+            }}
+            maxHeight={200}
+          />
+          <br />
+
+          {(modelInfo?.collectInputFor?.filter((d) => d.required).length || 0) >
+            0 && (
+            <>
+              <h3 className="mb-2">Enter required parameters</h3>
+
+              {modelInfo?.collectInputFor?.map((d) => {
+                return (
+                  <div>
+                    <label htmlFor={d.key}>{d.key}</label>
+                    <TextInput
+                      id={d.key}
+                      className="border-2 border-gray-200 rounded-md p-2 m-2"
+                      placeholder={d.key}
+                      defaultValue={d.defaultValue}
+                      {...formMethods.register(d.key, {
+                        required: true,
+                      })}
+                    />
+                  </div>
+                );
+              })}
+            </>
+          )}
+
+          {(modelInfo?.collectInputFor?.filter((d) => !d.required).length ||
+            0) > 0 && (
+            <details>
+              <summary className="mb-2">
+                <b>Advanced (optional)</b>
+              </summary>
+
+              {modelInfo?.collectInputFor?.map((d) => {
+                if (d.required) return null;
+                return (
+                  <div>
+                    <label htmlFor={d.key}>{d.key}</label>
+                    <TextInput
+                      id={d.key}
+                      className="border-2 border-gray-200 rounded-md p-2 m-2"
+                      placeholder={d.key}
+                      defaultValue={d.defaultValue}
+                      {...formMethods.register(d.key, {
+                        required: false,
+                      })}
+                    />
+                  </div>
+                );
+              })}
+            </details>
+          )}
+
+          <h3 className="mb-2">Select a model preset</h3>
+        </div>
+        <GridDiv>
+          {modelInfo?.packages.map((pkg) => {
+            return (
+              <ModelCard
+                disabled={disableModelCards()}
+                title={pkg.title}
+                description={pkg.description}
+                tags={pkg.tags}
+                refUrl={pkg.refUrl}
+                icon={pkg.icon || modelInfo.icon}
+                onClick={(e) => {
+                  if (disableModelCards()) return;
+                  const formParams: any = {};
+                  for (const d of modelInfo.collectInputFor || []) {
+                    formParams[d.key] =
+                      d.inputType === "text"
+                        ? formMethods.watch(d.key)
+                        : parseInt(formMethods.watch(d.key));
+                  }
+
+                  client?.addModelForRole("*", modelInfo.class, {
+                    ...pkg.params,
+                    ...modelInfo.params,
+                    ...formParams,
+                  });
+                  navigate("/");
+                }}
+              />
+            );
+          })}
+
+          <CustomModelButton
+            disabled={disableModelCards()}
+            onClick={(e) => {
+              if (!modelInfo || disableModelCards()) return;
+              const formParams: any = {};
+              for (const d of modelInfo.collectInputFor || []) {
+                formParams[d.key] =
+                  d.inputType === "text"
+                    ? formMethods.watch(d.key)
+                    : parseInt(formMethods.watch(d.key));
+              }
+
+              client?.addModelForRole("*", modelInfo.class, {
+                ...modelInfo.packages[0]?.params,
+                ...modelInfo.params,
+                ...formParams,
+              });
+              navigate("/");
+            }}
+          >
+            <h3 className="text-center my-2">Configure Model in config.py</h3>
+          </CustomModelButton>
+        </GridDiv>
+      </div>
+    </FormProvider>
+  );
+}
+
+export default ModelConfig;
-- 
cgit v1.2.3-70-g09d2