Spaces:
Sleeping
Sleeping
File size: 4,419 Bytes
38448fc d0a1b70 0d6f04b 38448fc 54a4eaa 5ec491a 38448fc 03e1c17 5ec491a 03e1c17 5ec491a 03e1c17 54a4eaa 38448fc 03e1c17 38448fc 0d6f04b 03e1c17 38448fc 54a4eaa 38448fc 76fdff4 fcd4478 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 54a4eaa 5ec491a 54a4eaa 38448fc 76fdff4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
'use client';
import ImageSelector from '@/components/chat/ImageSelector';
import { generateInputImageMarkdown } from '@/lib/messageUtils';
import { fetcher } from '@/lib/utils';
import { useRouter } from 'next/navigation';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/Tooltip';
import { IconDiscord, IconGitHub } from '@/components/ui/Icons';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import Img from '@/components/ui/Img';
import { ChatWithMessages } from '@/lib/db/types';
// const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
const EXAMPLE_URL =
'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png';
const EXAMPLE_HEADER = 'Counting and find';
const EXAMPLE_SUBHEADER =
'number of flowers, area of largest and smallest flower';
const EXAMPLE_PROMPT =
'Count the number of flowers and find the area of the largest and smallest flower';
const exampleMessages = [
{
heading: EXAMPLE_HEADER,
subheading: EXAMPLE_SUBHEADER,
url: EXAMPLE_URL,
initMessages: [
{
role: 'user',
content:
EXAMPLE_PROMPT + '\n\n' + generateInputImageMarkdown(EXAMPLE_URL),
},
],
},
// {
// heading: 'Detecting',
// url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
// subheading: 'number of cereals in an image',
// message: `How many cereals are there in the image?`,
// },
];
export default function Page() {
const router = useRouter();
return (
<div className="mx-auto max-w-2xl px-4 mt-8">
<div className="rounded-lg border bg-background p-8 mb-6">
<h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
<p>
Vision Agent is a library that helps you utilize agent frameworks for
your vision tasks. Vision Agent aims to provide an in-seconds
experience by allowing users to describe their problem in text and
utilizing agent frameworks to solve the task for them.
</p>
<div className="my-2">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="link" size="icon" asChild className="mr-2">
<Link
href="https://github.com/landing-ai/vision-agent"
target="_blank"
>
<IconGitHub className="size-6" />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>Github</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="link" size="icon" asChild className="mr-2">
<Link href="https://discord.gg/wZ2A7J69" target="_blank">
<IconDiscord className="size-6" />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>Discord</TooltipContent>
</Tooltip>
</div>
<ImageSelector />
</div>
<div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">
{exampleMessages.map((example, index) => (
<div
key={index}
className={`cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
index > 1 && 'hidden md:block'
}`}
onClick={async () => {
const resp = await fetcher<ChatWithMessages>('/api/chat/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: example.url,
initMessages: example.initMessages,
}),
});
if (resp) {
router.push(`/chat/${resp.id}`);
}
}}
>
<Img src={example.url} alt="example images" className="w-1/4" />
<div className="flex items-start flex-col h-full ml-3 w-3/4">
<div className="text-sm font-semibold">{example.heading}</div>
<div className="text-sm text-zinc-600">{example.subheading}</div>
</div>
</div>
))}
</div>
</div>
);
}
|