Inference fe

dashboard/package.json

@@ -107,7 +107,7 @@
     "@babel/preset-typescript": "^7.15.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@porter-dev/api-contracts": "^0.2.164",
+    "@porter-dev/api-contracts": "^0.2.168",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

dashboard/src/components/porter/DashboardHeader.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import styled from "styled-components";
+
+import TitleSection from "../TitleSection";
+import Container from "./Container";
+import Spacer from "./Spacer";
+import Tooltip from "./Tooltip";
+
+type Props = {
+  image?: string;
+  title: React.ReactNode;
+  description?: string;
+  materialIconClass?: string;
+  capitalize?: boolean;
+  prefix?: React.ReactNode;
+};
+
+const DashboardHeader: React.FC<Props> = ({
+  image,
+  title,
+  description,
+  materialIconClass,
+  capitalize,
+  prefix,
+}) => {
+  return (
+    <>
+      <Container row>
+        {prefix}
+        <TitleSection
+          capitalize={capitalize === undefined || capitalize}
+          icon={image}
+          materialIconClass={materialIconClass}
+        >
+          {title}
+        </TitleSection>
+      </Container>
+
+      {description && (
+        <>
+          <Spacer y={1} />
+          <InfoSection>
+            <TopRow>
+              <Tooltip content="TestInfo" position="bottom" hidden={true}>
+                <InfoLabel>
+                  <i className="material-icons">info</i> Info
+                </InfoLabel>
+              </Tooltip>
+            </TopRow>
+            <Description>{description}</Description>
+          </InfoSection>
+        </>
+      )}
+      <Spacer height="35px" />
+    </>
+  );
+};
+
+export default DashboardHeader;
+
+const TopRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Description = styled.div`
+  color: #aaaabb;
+  margin-top: 13px;
+  margin-left: 1px;
+  font-size: 13px;
+`;
+
+const InfoLabel = styled.div`
+  width: 72px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  color: #aaaabb;
+  font-size: 13px;
+  > i {
+    color: #aaaabb;
+    font-size: 18px;
+    margin-right: 5px;
+  }
+`;
+
+const InfoSection = styled.div`
+  font-family: "Work Sans", sans-serif;
+  margin-left: 0px;
+`;

dashboard/src/components/porter/Dropdown.tsx

@@ -4,8 +4,6 @@ import styled, { keyframes } from "styled-components";
 
 import Container from "./Container";
 import Spacer from "./Spacer";
-import Tag from "./Tag";
-import Text from "./Text";
 
 type Props = {
   key: string;

dashboard/src/components/porter/Tag.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 type Props = {
+  size?: number;
   backgroundColor?: string;
   children: React.ReactNode;
   hoverable?: boolean;
@@ -13,6 +14,7 @@ type Props = {
 };
 
 const Tag: React.FC<Props> = ({
+  size,
   backgroundColor,
   hoverable = true,
   hoverColor,
@@ -23,6 +25,7 @@ const Tag: React.FC<Props> = ({
 }) => {
   return (
     <StyledTag
+      size={size}
       backgroundColor={backgroundColor ?? "#ffffff22"}
       hoverable={hoverable}
       hoverColor={hoverColor ?? "#ffffff44"}
@@ -38,6 +41,7 @@ const Tag: React.FC<Props> = ({
 export default Tag;
 
 const StyledTag = styled.div<{
+  size?: number;
   hoverable: boolean;
   backgroundColor: string;
   hoverColor: string;
@@ -46,7 +50,7 @@ const StyledTag = styled.div<{
 }>`
   display: flex;
   justify-content: center;
-  font-size: 13px;
+  font-size: ${({ size }) => size ?? 13}px;
   padding: 3px 5px;
   border-radius: ${({ borderRadiusPixels }) => borderRadiusPixels}px;
   background: ${({ backgroundColor }) => backgroundColor};

dashboard/src/components/porter/Toggle.tsx

@@ -46,14 +46,26 @@ const StyledToggle = styled.div`
   align-items: center;
 `;
 
-const Item = styled.div<{ active: boolean; activeColor?: string; inactiveColor?: string }>`
+const Item = styled.div<{
+  active: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+}>`
   display: flex;
   align-items: center;
   height: 100%;
   cursor: pointer;
   justify-content: center;
   padding: 10px;
-  opacity: ${(props) => props.active ? "1" : "0.4"};
+  opacity: ${(props) => (props.active ? "1" : "0.4")};
   background: ${(props) =>
-    props.active ? props.activeColor ?? "#ffffff11" : props.inactiveColor ?? "transparent"};
-`;
+    props.active
+      ? props.activeColor ?? "#ffffff11"
+      : props.inactiveColor ?? "transparent"};
+`;
+
+export const ToggleIcon = styled.img`
+  height: 12px;
+  margin: 0 5px;
+  min-width: 12px;
+`;

dashboard/src/lib/addons/deepgram.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+
+const modelUrlValidator = z.object({
+  url: z.string().nonempty(),
+});
+export const deepgramConfigValidator = z.object({
+  type: z.literal("deepgram"),
+  deepgramAPIKey: z.string().nonempty().default("*********"),
+  quayUsername: z.string().nonempty().default("username"),
+  quaySecret: z.string().nonempty().default("secret"),
+  quayEmail: z.string().nonempty().default(""),
+  releaseTag: z.string().nonempty().default("release-240426"),
+  modelUrls: z.array(modelUrlValidator).default([]),
+});
+
+export type DeepgramConfigValidator = z.infer<typeof deepgramConfigValidator>;

dashboard/src/lib/addons/index.ts

@@ -3,6 +3,7 @@ import {
   Addon,
   AddonType,
   Datadog,
+  Deepgram,
   Metabase,
   Mezmo,
   Newrelic,
@@ -17,6 +18,7 @@ import { z } from "zod";
 import { serviceStringValidator } from "lib/porter-apps/values";
 
 import { datadogConfigValidator } from "./datadog";
+import { deepgramConfigValidator } from "./deepgram";
 import { metabaseConfigValidator } from "./metabase";
 import { mezmoConfigValidator } from "./mezmo";
 import { newrelicConfigValidator } from "./newrelic";
@@ -26,6 +28,7 @@ import { redisConfigValidator } from "./redis";
 import { tailscaleConfigValidator } from "./tailscale";
 import {
   ADDON_TEMPLATE_DATADOG,
+  ADDON_TEMPLATE_DEEPGRAM,
   ADDON_TEMPLATE_METABASE,
   ADDON_TEMPLATE_MEZMO,
   ADDON_TEMPLATE_NEWRELIC,
@@ -58,6 +61,7 @@ export const clientAddonValidator = z.object({
     metabaseConfigValidator,
     newrelicConfigValidator,
     tailscaleConfigValidator,
+    deepgramConfigValidator,
     quivrConfigValidator,
   ]),
 });
@@ -67,6 +71,13 @@ export type ClientAddonType = z.infer<
 export type ClientAddon = z.infer<typeof clientAddonValidator> & {
   template: AddonTemplate<ClientAddonType>;
 };
+export type ClientModelAddon = ClientAddon & {
+  template: AddonTemplate<ClientAddonType> & { isModelTemplate: true };
+};
+export const isClientModelAddon = (
+  addon: ClientAddon
+): addon is ClientModelAddon => addon.template.isModelTemplate ?? false;
+
 export const legacyAddonValidator = z.object({
   name: z.string(),
   namespace: z.string(),
@@ -157,6 +168,16 @@ export function defaultClientAddon(
       }),
       template: ADDON_TEMPLATE_TAILSCALE,
     }))
+    .with("deepgram", () => ({
+      ...clientAddonValidator.parse({
+        expanded: true,
+        name: { readOnly: false, value: "deepgram" },
+        config: deepgramConfigValidator.parse({
+          type: "deepgram",
+        }),
+      }),
+      template: ADDON_TEMPLATE_DEEPGRAM,
+    }))
     .with("quivr", () => ({
       ...clientAddonValidator.parse({
         expanded: true,
@@ -179,6 +200,7 @@ function addonTypeEnumProto(type: ClientAddon["config"]["type"]): AddonType {
     .with("metabase", () => AddonType.METABASE)
     .with("newrelic", () => AddonType.NEWRELIC)
     .with("tailscale", () => AddonType.TAILSCALE)
+    .with("deepgram", () => AddonType.DEEPGRAM)
     .with("quivr", () => AddonType.QUIVR)
     .exhaustive();
 }
@@ -269,6 +291,17 @@ export function clientAddonToProto(
       }),
       case: "tailscale" as const,
     }))
+    .with({ type: "deepgram" }, (data) => ({
+      value: new Deepgram({
+        apiKey: data.deepgramAPIKey,
+        ecrUsername: data.quayUsername,
+        ecrPassword: data.quaySecret,
+        ecrEmail: data.quayEmail,
+        releaseTag: data.releaseTag,
+        modelUrls: data.modelUrls.map(({ url }) => url),
+      }),
+      case: "deepgram" as const,
+    }))
     .with({ type: "quivr" }, (data) => ({
       value: new Quivr({
         ingressEnabled: data.exposedToExternalTraffic,
@@ -405,6 +438,15 @@ export function clientAddonFromProto({
       authKey: data.value.authKey ?? "",
       subnetRoutes: data.value.subnetRoutes.map((r) => ({ route: r })),
     }))
+    .with({ case: "deepgram" }, (data) => ({
+      type: "deepgram" as const,
+      deepgramAPIKey: data.value.apiKey ?? "",
+      quayUsername: data.value.ecrUsername ?? "",
+      quaySecret: data.value.ecrPassword ?? "",
+      quayEmail: data.value.ecrEmail ?? "",
+      releaseTag: data.value.releaseTag ?? "",
+      modelUrls: data.value.modelUrls.map((url) => ({ url })) ?? [],
+    }))
     .with({ case: "quivr" }, (data) => ({
       type: "quivr" as const,
       exposedToExternalTraffic: data.value.ingressEnabled ?? false,
@@ -434,6 +476,7 @@ export function clientAddonFromProto({
     .with({ case: "metabase" }, () => ADDON_TEMPLATE_METABASE)
     .with({ case: "newrelic" }, () => ADDON_TEMPLATE_NEWRELIC)
     .with({ case: "tailscale" }, () => ADDON_TEMPLATE_TAILSCALE)
+    .with({ case: "deepgram" }, () => ADDON_TEMPLATE_DEEPGRAM)
     .with({ case: "quivr" }, () => ADDON_TEMPLATE_QUIVR)
     .exhaustive();