ui: add docs link button

livepeer · Oct 9, 2024 · bd796d9 · bd796d9
1 parent 36cd50a
commit bd796d9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/packages/www/components/ModelGallery/constants.ts b/packages/www/components/ModelGallery/constants.ts
@@ -217,6 +217,7 @@ const availableModels: Model[] = [
     pipeline: "Text to Image",
     image: "RealVisXL_V4.0_Lightning.png",
     huggingFaceId: "SG161222/RealVisXL_V4.0_Lightning",
+    docs: "https://docs.livepeer.org/api-reference/generate/text-to-image",
     lightning: true,
     inputs: textToImageInputs,
   },
@@ -228,6 +229,7 @@ const availableModels: Model[] = [
     pipeline: "Image to Image",
     image: "instruct-pix2pix.jpg",
     huggingFaceId: "timbrooks/instruct-pix2pix",
+    docs: "https://docs.livepeer.org/api-reference/generate/image-to-image",
     inputs: imageToImageInputs,
   },
   {
@@ -238,6 +240,7 @@ const availableModels: Model[] = [
     pipeline: "Image to Video",
     image: "stable-video-diffusion-img2vid-xt-1-1.gif",
     huggingFaceId: "stabilityai/stable-video-diffusion-img2vid-xt-1-1",
+    docs: "https://docs.livepeer.org/api-reference/generate/image-to-video",
     inputs: imageToVideoInputs,
   },
   {
@@ -248,6 +251,7 @@ const availableModels: Model[] = [
     pipeline: "Upscale Image",
     image: "stable-diffusion-x4-upscaler.png",
     huggingFaceId: "stabilityai/stable-diffusion-x4-upscaler",
+    docs: "https://docs.livepeer.org/api-reference/generate/upscale",
     inputs: upscalerInputs,
   },
   {
@@ -257,6 +261,7 @@ const availableModels: Model[] = [
     pipeline: "Audio to Text",
     image: "whisper-large-v3.png",
     huggingFaceId: "openai/whisper-large-v3",
+    docs: "https://docs.livepeer.org/api-reference/generate/audio-to-text",
     inputs: audioToTextInputs,
   },
   {
@@ -267,6 +272,7 @@ const availableModels: Model[] = [
     pipeline: "Segmentation",
     image: "sam2-hiera-large.png",
     huggingFaceId: "facebook/sam2-hiera-large",
+    docs: "https://docs.livepeer.org/api-reference/generate/segment-anything-2",
     inputs: segmentationInputs,
   },
 ];
@@ -278,6 +284,7 @@ type Model = {
   image: string;
   pipeline: string;
   lightning?: boolean;
+  docs: string;
   huggingFaceId: string;
   inputs?: Input[];
 };

diff --git a/packages/www/components/ModelGallery/model.tsx b/packages/www/components/ModelGallery/model.tsx
@@ -25,7 +25,7 @@ export default function Model({ model }: { model: ModelT }) {
           <Badge>{model.pipeline}</Badge>
         </CardHeader>
         <CardContent className="p-4 py-0">
-          <div className="aspect-video  mb-4 relative">
+          <div className="aspect-video mb-4 relative">
             <img
               src={`/dashboard/ai/${model.image}`}
               className="w-full h-[17rem] object-cover rounded-md"

diff --git a/packages/www/pages/projects/[projectId]/model-gallery/playground/[id]/index.tsx b/packages/www/pages/projects/[projectId]/model-gallery/playground/[id]/index.tsx
@@ -28,6 +28,7 @@ import { useRef, useState } from "react";
 import Output from "./output";
 import Form from "./form";
 import Link from "next/link";
+import { ArrowTopRightIcon } from "@radix-ui/react-icons";
 
 export default function PlaygroundPage() {
   useLoggedIn();
@@ -102,8 +103,14 @@ const PageHeader = ({ model }: { model: ModelT }) => {
             {model?.huggingFaceId}
           </Link>
         </CardDescription>
-        <div className="mt-6">
-          <Badge>{model?.pipeline}</Badge>
+        <div className="mt-6 flex w-full justify-between">
+          <Badge className="h-full">{model?.pipeline}</Badge>
+          <Button asChild variant="outline" className="h-8  px-3 text-xs">
+            <Link target="_blank" href={model?.docs}>
+              Visit Documentation
+              <ArrowTopRightIcon className="ml-2 w-4 h-4" />
+            </Link>
+          </Button>
         </div>
       </CardHeader>
     </Card>