feat: tips and new example (#119)


app/globals.css

@@ -108,3 +108,31 @@ h1 {
       drop-shadow(0 0 20px transparent);
   }
 }
+
+.CollapsibleContent {
+  overflow: hidden;
+}
+.CollapsibleContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.CollapsibleContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

app/page.tsx

@@ -7,15 +7,28 @@ import Composer, { ComposerRef } from '@/components/chat/Composer';
 import { dbPostCreateChat } from '@/lib/db/functions';
 import { nanoid } from '@/lib/utils';
 import Chip from '@/components/ui/Chip';
-import { IconArrowUpRight } from '@/components/ui/Icons';
+import {
+  IconArrowDown,
+  IconArrowUpRight,
+  IconCaretDown,
+  IconSpark,
+} from '@/components/ui/Icons';
 import { EXAMPLES } from '@/lib/constants';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { ThumbsDown, ThumbsUp } from 'lucide-react';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { CodeBlock } from '@/components/ui/CodeBlock';
 
 export default function Page() {
   const router = useRouter();
   const composerRef = useRef<ComposerRef>(null);
   return (
     <div className="h-screen w-screen homepage">
-      <div className="mx-auto w-[42rem] max-w-full px-4 mt-[200px]">
+      <div className="mx-auto w-[42rem] max-w-full px-4 mt-24">
         <h1 className="mb-4 text-center relative">
           Vision Agent
           <Chip className="absolute bg-green-100 text-green-500">BETA</Chip>
@@ -47,7 +60,7 @@ export default function Page() {
           return (
             <Chip
               key={index}
-              className="bg-transparent border border-zinc-500 cursor-pointer px-4"
+              className="bg-transparent border border-zinc-500 cursor-pointer px-2 py-0.5"
               onClick={() => {
                 composerRef.current?.setInput(example.prompt);
                 composerRef.current?.setMediaUrl(example.mediaUrl);
@@ -60,6 +73,65 @@ export default function Page() {
             </Chip>
           );
         })}
+        <Collapsible className="mt-8 bg-zinc-800 relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7">
+          <CollapsibleTrigger className="flex flex-row items-center space-x-4 w-full">
+            <IconSpark />
+            <h4 className="font-bold grow text-left">
+              Vision Agent prompting tips
+            </h4>
+            <IconCaretDown />
+          </CollapsibleTrigger>
+          <CollapsibleContent className="mt-4 CollapsibleContent text-sm space-y-2 [&_p]:leading-relaxed">
+            <p>
+              <span className="font-bold">Be specific:</span> Give concrete
+              instructions to what you desire as output, avoid vague questions.
+            </p>
+            <div className="flex flex-row space-x-2 justify-start items-center w-full">
+              <div className="w-1/8">
+                <ThumbsUp className="text-green-500 size-5" />
+              </div>
+              <p className="italic w-7/8">
+                Detect people wearing helmet by detecting people, then detecting
+                helmets, a person is wearing a helmet if the helmet is detected
+                near the person.
+              </p>
+            </div>
+            <div className="flex flex-row space-x-2 justify-start items-center w-full">
+              <div className="w-1/8">
+                <ThumbsDown className="text-red-500 size-5" />
+              </div>
+              <p className="italic w-7/8">Detect people wearing helmet</p>
+            </div>
+            <p>
+              <span className="font-bold">Start simple:</span> Start with simple
+              prompt to understand underlying tool performance first
+            </p>
+            <div className="flex flex-row space-x-2 justify-start items-center w-full">
+              <div className="w-1/8"> - </div>
+              <p className="italic w-7/8">
+                Can you run OCR on this image and plot the detected text?
+              </p>
+            </div>
+            <div className="flex flex-row space-x-2 justify-start items-center w-full">
+              <div className="w-1/8"> - </div>
+              <p className="italic w-7/8">
+                Can you detect the people in this image and visualize the
+                result?
+              </p>
+            </div>
+            <p>
+              <span className="font-bold">Focus on single problem:</span> Each
+              conversation should focus on solving single problem, start new
+              conversations when switching task
+            </p>
+            <p>
+              <span className="font-bold">Ask for visualization:</span> You can
+              simply add{' '}
+              <span className="font-bold font-sans">Visualize the result</span>{' '}
+              at the end of your prompt to visualize the result
+            </p>
+          </CollapsibleContent>
+        </Collapsible>
       </div>
     </div>
   );

components/ui/Icons.tsx

@@ -775,6 +775,70 @@ function IconGlowingDot({ className, ...props }: React.ComponentProps<'div'>) {
   return <div className={cn('size-3 svg-shadow', className)} {...props} />;
 }
 
+function IconSpark({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"
+      ></path>
+    </svg>
+  );
+}
+
+function IconThumbsUp({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z"
+      ></path>
+    </svg>
+  );
+}
+
+function IconThumbsDown({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z"
+      ></path>
+    </svg>
+  );
+}
+
+function IconCaretDown({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
+      ></path>
+    </svg>
+  );
+}
+
 export {
   IconEdit,
   IconLandingAI,
@@ -818,4 +882,8 @@ export {
   IconLog,
   IconOutput,
   IconGlowingDot,
+  IconSpark,
+  IconThumbsUp,
+  IconThumbsDown,
+  IconCaretDown,
 };

components/ui/alert.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn(
+      'mb-3 mt-1 font-medium leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm space-y-2 [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

lib/constants.ts

@@ -1,10 +1,10 @@
 export const EXAMPLES = [
   {
-    title: 'Counting flowers in image',
+    title: 'Counting workers hearing helmets',
     mediaUrl:
-      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png',
+      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/workers.png',
     prompt:
-      'Detect flowers in this image, draw boxes and output the image, also return total number of flowers',
+      'Can you write a program to check if each person is wearing a helmet? First detect all the people in the image, then detect the helmets, check whether or not a person is wearing a helmet if the helmet is on the worker. Return a dictionary with the count of people with helmets and people without helmets. Visualize the result',
   },
   {
     title: 'Detecting sharks in video',

package.json

@@ -20,6 +20,7 @@
     "@aws-sdk/s3-presigned-post": "^3.556.0",
     "@prisma/client": "5.14.0",
     "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@radix-ui/react-checkbox':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -825,6 +828,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collapsible@1.1.0':
+    resolution: {integrity: sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.0.3':
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
@@ -5153,6 +5169,22 @@ snapshots:
       '@types/react': 18.2.79
       '@types/react-dom': 18.2.25
 
+  '@radix-ui/react-collapsible@1.1.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.79)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.79
+      '@types/react-dom': 18.2.25
+
   '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4