feat: Add shark example for quicker test / add time counter / add carousel (#77)


app/page.tsx

@@ -11,10 +11,18 @@ import { IconArrowUpRight } from '@/components/ui/Icons';
 
 const EXAMPLES = [
   {
-    title: 'Counting flowers',
+    title: 'Counting flowers in image',
     mediaUrl:
       'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png',
-    prompt: 'Count the number of flowers in this image.',
+    prompt:
+      'Draw box and output the image, return the number of flowers as output.',
+  },
+  {
+    title: 'Detecting sharks in video',
+    mediaUrl:
+      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/shark3_short.mp4',
+    prompt:
+      'Can you detect any surfboards or sharks in the video, draw a green line between the shark and the nearest paddle boarder and add the distance between them in meters assuming 30 pixels is 1 meter. Make the line red if the shark is within 10 meters of a surfboard. Sample the video at 3 frames per second and save the output video as output.mp4.',
   },
 ];
 

components/CodeResultDisplay.tsx

@@ -14,6 +14,14 @@ import { IconLog, IconTerminalWindow } from './ui/Icons';
 import { Separator } from './ui/Separator';
 import { ResultPayload } from '@/lib/types';
 import Img from './ui/Img';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './ui/carousel';
+import Link from 'next/link';
 
 export interface CodeResultDisplayProps {}
 
@@ -97,29 +105,35 @@ const CodeResultDisplay: React.FC<{
       )}
       {!!imageResults.length && (
         <div className="p-4 text-xs lowercase bg-zinc-900 space-y-4 border-t border-muted">
-          <p>image output</p>
+          <div className="flex items-center justify-between">
+            <p>image output</p>
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="ghost">View all</Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-5xl flex justify-center items-center">
+                <Carousel className="w-3/4">
+                  <CarouselContent>
+                    {imageResults.map((png, index) => (
+                      <CarouselItem key={'png' + index}>
+                        <Img src={png!} width={1200} alt="result-image" />
+                      </CarouselItem>
+                    ))}
+                  </CarouselContent>
+                  <CarouselPrevious />
+                  <CarouselNext />
+                </Carousel>
+              </DialogContent>
+            </Dialog>
+          </div>
           <div className="flex flex-row space-x-4 overflow-auto">
             {imageResults.map((png, index) => (
-              <Dialog key={'png' + index}>
-                <DialogTrigger asChild>
-                  <Img
-                    key={'png' + index}
-                    src={png!}
-                    width={200}
-                    alt="result-image"
-                    className="cursor-zoom-in"
-                  />
-                </DialogTrigger>
-                <DialogContent className="max-w-5xl">
-                  <Img
-                    src={png!}
-                    width={1200}
-                    height={800}
-                    alt="result-image"
-                    quality={100}
-                  />
-                </DialogContent>
-              </Dialog>
+              <Img
+                key={'png' + index}
+                src={png!}
+                width={200}
+                alt="result-image"
+              />
             ))}
           </div>
         </div>

components/chat/ChatMessage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { CodeBlock } from '@/components/ui/CodeBlock';
 import {
   IconCheckCircle,
@@ -29,6 +29,7 @@ import { selectedMessageId } from '@/state/chat';
 import { Message } from '@prisma/client';
 import { Separator } from '../ui/Separator';
 import { cn } from '@/lib/utils';
+import { usePrevious } from '@/lib/hooks/usePrevious';
 
 export interface ChatMessageProps {
   message: Message;
@@ -101,7 +102,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
                         {ChunkStatusToIconDict[section.status]}
                       </TableCell>
                       <TableCell className="font-medium">
-                        {ChunkTypeToTextDict[section.type]}
+                        <ChunkTypeToText chunk={section} />
                       </TableCell>
                       <TableCell className="text-right">
                         <ChunkPayloadAction payload={section.payload} />
@@ -130,11 +131,34 @@ const ChunkStatusToIconDict: Record<ChunkBody['status'], React.ReactElement> = {
   running: <IconGlowingDot className="bg-teal-500/80" />,
   failed: <IconCrossCircle className="text-red-500" />,
 };
-const ChunkTypeToTextDict: Record<ChunkBody['type'], string> = {
-  plans: 'Creating instructions',
-  tools: 'Retrieving tools',
-  code: 'Generating code',
-  final_code: 'Final result',
+const ChunkTypeToText: React.FC<{
+  chunk: ChunkBody;
+}> = ({ chunk }) => {
+  const { status, type } = chunk;
+
+  const [seconds, setSeconds] = useState(0);
+  const isExecution = type === 'code' && status === 'running';
+  const timerId = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (isExecution) {
+      const timerId = setInterval(() => {
+        setSeconds(prevSeconds => Math.round((prevSeconds + 0.2) * 10) / 10);
+      }, 200);
+      return () => clearInterval(timerId);
+    }
+  }, [isExecution]);
+
+  if (type === 'plans') return <p>Creating instructions</p>;
+  if (type === 'tools') return <p>Retrieving tools</p>;
+  if (type === 'code' && status === 'started') return <p>Generating code</p>;
+  if (isExecution) return <p>Executing code ({seconds}s)</p>;
+  if (type === 'code' && status === 'completed')
+    return <p>Code execution success ({seconds}s)</p>;
+  if (type === 'code' && status === 'failed')
+    return <p>Code execution failure ({seconds}s)</p>;
+
+  return null;
 };
 const ChunkPayloadAction: React.FC<{
   payload: ChunkBody['payload'];

components/ui/carousel.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import * as React from 'react';
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from './Button';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = 'horizontal',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
+
+      return () => {
+        api?.off('select', onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn('relative', className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = 'CarouselItem';
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute  h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-left-12 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeftIcon className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRightIcon className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = 'CarouselNext';
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};

lib/hooks/usePrevious.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * A simple hook to return the previous state of a useState
+ * https://usehooks.com/usePrevious/
+ * @param value the current state
+ * @returns the previous state
+ */
+export const usePrevious = <T>(value: T) => {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef<T>();
+
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+};

package.json

@@ -32,6 +32,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.1.3",
     "focus-trap-react": "^10.2.3",
     "framer-motion": "^10.18.0",
     "geist": "^1.2.1",

pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
+      embla-carousel-react:
+        specifier: ^8.1.3
+        version: 8.1.3(react@18.2.0)
       focus-trap-react:
         specifier: ^10.2.3
         version: 10.2.3(prop-types@15.8.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1900,6 +1903,19 @@ packages:
   electron-to-chromium@1.4.789:
     resolution: {integrity: sha512-0VbyiaXoT++Fi2vHGo2ThOeS6X3vgRCWrjPeO2FeIAWL6ItiSJ9BqlH8LfCXe3X1IdcG+S0iLoNaxQWhfZoGzQ==}
 
+  embla-carousel-react@8.1.3:
+    resolution: {integrity: sha512-YrezDPgxPDKa+OKMhSrwuPEU2OgF5147vFW473EWT3bx9DETV3W/RyWTxq0/2pf3M4VXkjqFNbS/W1xM8lTaVg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0
+
+  embla-carousel-reactive-utils@8.1.3:
+    resolution: {integrity: sha512-D8tAK6NRQVEubMWb+b/BJ3VvGPsbEeEFOBM6cCCwfiyfLzNlacOAt0q2dtUEA9DbGxeWkB8ExgXzFRxhGV2Hig==}
+    peerDependencies:
+      embla-carousel: 8.1.3
+
+  embla-carousel@8.1.3:
+    resolution: {integrity: sha512-GiRpKtzidV3v50oVMly8S+D7iE1r96ttt7fSlvtyKHoSkzrAnVcu8fX3c4j8Ol2hZSQlVfDqDIqdrFPs0u5TWQ==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -6154,6 +6170,18 @@ snapshots:
 
   electron-to-chromium@1.4.789: {}
 
+  embla-carousel-react@8.1.3(react@18.2.0):
+    dependencies:
+      embla-carousel: 8.1.3
+      embla-carousel-reactive-utils: 8.1.3(embla-carousel@8.1.3)
+      react: 18.2.0
+
+  embla-carousel-reactive-utils@8.1.3(embla-carousel@8.1.3):
+    dependencies:
+      embla-carousel: 8.1.3
+
+  embla-carousel@8.1.3: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}