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;