Spaces:
Running
Running
File size: 4,266 Bytes
38448fc d0a1b70 0d6f04b 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 0d6f04b 38448fc 54a4eaa 38448fc 76fdff4 fcd4478 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 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 |
'use client';
import ImageSelector from '@/components/chat/ImageSelector';
import { generateInputImageMarkdown } from '@/lib/messageUtils';
import { ChatEntity, MessageBase } from '@/lib/types';
import { fetcher } from '@/lib/utils';
import Image from 'next/image';
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';
const exampleMessages = [
{
heading: 'Counting',
subheading: 'number of cereals in an image',
url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
initMessages: [
{
role: 'user',
content:
'how many cereals are there in the image?' +
'\n\n' +
generateInputImageMarkdown(
'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
),
id: 'fake-id-1',
},
],
},
// {
// 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<ChatEntity>('/api/upload', {
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>
);
}
|