fe boilerplate

dashboard/src/lib/addons/deepgram.ts

@@ -5,7 +5,7 @@ export const deepgramConfigValidator = z.object({
   deepgramAPIKey: z.string().nonempty().default("*********"),
   quayUsername: z.string().nonempty().default("username"),
   quaySecret: z.string().nonempty().default("secret"),
-  quayEmail: z.string(),
+  quayEmail: z.string().nonempty().default(""),
   releaseTag: z.string().nonempty().default("release-240426"),
 });
 

dashboard/src/lib/addons/template.ts

@@ -2,6 +2,7 @@ import Logs from "main/home/add-on-dashboard/common/Logs";
 import Settings from "main/home/add-on-dashboard/common/Settings";
 import DatadogForm from "main/home/add-on-dashboard/datadog/DatadogForm";
 import DeepgramForm from "main/home/add-on-dashboard/deepgram/DeepgramForm";
+import DeepgramOverview from "main/home/add-on-dashboard/deepgram/DeepgramOverview";
 import MetabaseForm from "main/home/add-on-dashboard/metabase/MetabaseForm";
 import MezmoForm from "main/home/add-on-dashboard/mezmo/MezmoForm";
 import NewRelicForm from "main/home/add-on-dashboard/newrelic/NewRelicForm";
@@ -291,6 +292,11 @@ export const ADDON_TEMPLATE_DEEPGRAM: AddonTemplate<"deepgram"> = {
   icon: "https://play-lh.googleusercontent.com/wczDL05-AOb39FcL58L32h6j_TrzzGTXDLlOrOmJ-aNsnoGsT1Gkk2vU4qyTb7tGxRw=w240-h480-rw",
   tags: ["Networking"],
   tabs: [
+    {
+      name: "overview",
+      displayName: "Overview",
+      component: DeepgramOverview,
+    },
     {
       name: "configuration",
       displayName: "Configuration",
@@ -314,7 +320,7 @@ export const ADDON_TEMPLATE_DEEPGRAM: AddonTemplate<"deepgram"> = {
     quayUsername: "",
     quaySecret: "",
     quayEmail: "",
-    releaseTag: "v1.0.0",
+    releaseTag: "",
   },
   isModelTemplate: true,
 };

dashboard/src/main/home/add-on-dashboard/deepgram/DeepgramForm.tsx

@@ -14,22 +14,6 @@ const DeepgramForm: React.FC = () => {
   } = useFormContext<ClientAddon>();
   return (
     <div>
-      <Text size={16}> Instance type </Text>
-      <Spacer y={0.5} />
-      <Text color="helper">
-        The instance type to run the model on. Deepgram runs only on T4 GPUs and
-        we have prefilled a preferred instance type for now. Make sure the AWS
-        quota is properly set.{" "}
-      </Text>
-      <Spacer y={0.5} />
-      <ControlledInput
-        type="text"
-        width="300px"
-        {...register("config.instanceType")}
-        placeholder="g4dn-xlarge"
-        error={errors.config?.instanceType?.message}
-      />
-      <Spacer y={1} />
       <Text size={16}> Release tag </Text>
       <Spacer y={0.5} />
       <Text color="helper">
@@ -51,9 +35,9 @@ const DeepgramForm: React.FC = () => {
       <ControlledInput
         type="password"
         width="300px"
-        {...register("config.deepgramApiKey")}
+        {...register("config.deepgramAPIKey")}
         placeholder="deepgram-api-key"
-        error={errors.config?.deepgramApiKey?.message}
+        error={errors.config?.deepgramAPIKey?.message}
       />
       <Spacer y={1} />
       <Text size={16}> Quay.io Username </Text>

dashboard/src/main/home/add-on-dashboard/deepgram/DeepgramOverview.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import AceEditor from "react-ace";
+
+import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
+
+const DeepgramOverview: React.FC = () => {
+  return (
+    <div>
+      <Text size={16}>Example usage</Text>
+      <Spacer y={0.5} />
+      <Text color="helper">
+        You can use this model over an auto-generated endpoint from any app
+        running on Porter.
+      </Text>
+      <Spacer y={1} />
+      <AceEditor
+        value={`curl http://my-model.default.svc.cluster.local:8000/v1/completions
+  -H "Content-Type: application/json"
+  -d '{
+      "prompt": "Long Island City is a",
+      "max_tokens": 7,
+      "temperature": 0
+  }'`}
+        theme="porter"
+        name="codeEditor"
+        readOnly={true}
+        height="120px"
+        width="100%"
+        style={{ borderRadius: "10px", color: "#aaaabb" }}
+        showPrintMargin={false}
+        showGutter={true}
+        highlightActiveLine={false}
+      />
+    </div>
+  );
+};
+
+export default DeepgramOverview;

dashboard/src/main/home/inference-dashboard/ExpandedModelTemplate.tsx

@@ -1,112 +0,0 @@
-import React, { useContext, useMemo } from "react";
-import AceEditor from "react-ace";
-import { useHistory, useParams } from "react-router";
-import styled from "styled-components";
-
-import Back from "components/porter/Back";
-import Button from "components/porter/Button";
-import Container from "components/porter/Container";
-import I from "components/porter/I";
-import Image from "components/porter/Image";
-import InfoSection from "components/porter/InfoSection";
-import Line from "components/porter/Line";
-import Link from "components/porter/Link";
-import Spacer from "components/porter/Spacer";
-import Text from "components/porter/Text";
-import {
-  AddonTemplateTagColor,
-  SUPPORTED_MODEL_ADDON_TEMPLATES,
-} from "lib/addons/template";
-
-import { Context } from "shared/Context";
-
-import AddonFormContextProvider from "../add-on-dashboard/AddonFormContextProvider";
-import { Tag } from "../add-on-dashboard/AddonTemplates";
-import DashboardHeader from "../cluster-dashboard/DashboardHeader";
-import { models, tagColor } from "./models";
-
-const ExpandedModelTemplate: React.FC = () => {
-  const { modelType } = useParams<{
-    modelType: string;
-  }>();
-
-  const { currentProject } = useContext(Context);
-  const history = useHistory();
-
-  const templateMatch = SUPPORTED_MODEL_ADDON_TEMPLATES.find(
-    (t) => t.type === modelType
-  );
-
-  if (templateMatch === undefined) {
-    return null;
-  }
-
-  return (
-    <Container style={{ width: "100%" }}>
-      <Back to="/inference/models" />
-      <Container row spaced>
-        <Container row>
-          <Image size={24} src={templateMatch.icon} />
-          <Spacer inline x={1} />
-          <Text size={21}>{templateMatch.displayName}</Text>
-        </Container>
-        <Link to={`/inference/new/${modelType}`}>
-          <Button>
-            <I size={14}>add</I>
-            <Spacer inline x={0.5} />
-            Deploy model
-          </Button>
-        </Link>
-      </Container>
-      <Spacer y={1} />
-      <InfoSection text={templateMatch.description} />
-      <Spacer y={1} />
-      <Container row>
-        {templateMatch.tags?.map((t) => (
-          <>
-            <Tag
-              bottom="10px"
-              left="12px"
-              style={{ background: AddonTemplateTagColor[t] }}
-              key={t}
-            >
-              {t}
-            </Tag>
-            {templateMatch.tags.indexOf(t) !==
-              templateMatch.tags.length - 1 && <Spacer inline x={0.5} />}
-          </>
-        ))}
-      </Container>
-      <Spacer y={1} />
-      <Line />
-      <Spacer y={1} />
-      <Text size={16}>Example usage</Text>
-      <Spacer y={0.5} />
-      <Text color="helper">
-        After deploying this model, you will be able to use it over an
-        auto-generated endpoint from any app running on Porter.
-      </Text>
-      <Spacer y={1} />
-      <AceEditor
-        value={`curl http://my-model.default.svc.cluster.local:8000/v1/completions
-  -H "Content-Type: application/json"
-  -d '{
-      "prompt": "Long Island City is a",
-      "max_tokens": 7,
-      "temperature": 0
-  }'`}
-        theme="porter"
-        name="codeEditor"
-        readOnly={true}
-        height="120px"
-        width="100%"
-        style={{ borderRadius: "10px", color: "#aaaabb" }}
-        showPrintMargin={false}
-        showGutter={true}
-        highlightActiveLine={false}
-      />
-    </Container>
-  );
-};
-
-export default ExpandedModelTemplate;