|
'use client'; |
|
|
|
import ImageSelector from '@/components/chat/ImageSelector'; |
|
import { ChatEntity, MessageBase } from '@/lib/types'; |
|
import { fetcher } from '@/lib/utils'; |
|
import Image from 'next/image'; |
|
import { useRouter } from 'next/navigation'; |
|
|
|
type Example = { |
|
url: string; |
|
initMessages: MessageBase[]; |
|
}; |
|
|
|
const examples: Example[] = [ |
|
{ |
|
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?', |
|
id: 'fake-id-1', |
|
}, |
|
], |
|
}, |
|
|
|
|
|
|
|
]; |
|
|
|
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"> |
|
<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. Check out our |
|
discord for updates and roadmap! |
|
</p> |
|
<ImageSelector /> |
|
<p className="mt-4 mb-2"> |
|
You can also choose from below examples we provided |
|
</p> |
|
<div className="flex"> |
|
{examples.map(({ url, initMessages }, index) => ( |
|
<Image |
|
src={url} |
|
key={index} |
|
width={120} |
|
height={120} |
|
alt="example images" |
|
className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform" |
|
onClick={async () => { |
|
const resp = await fetcher<ChatEntity>('/api/upload', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify({ url, initMessages }), |
|
}); |
|
if (resp) { |
|
router.push(`/chat/${resp.id}`); |
|
} |
|
}} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
} |
|
|