Spaces:
Sleeping
Sleeping
File size: 2,960 Bytes
cfb938a 60612a5 cfb938a c3e8f3d cfb938a a1c5622 cfb938a abc1963 cfb938a abc1963 ba9285c abc1963 4a72a82 cfb938a a1c5622 cfb938a a1c5622 cfb938a 3c3ac54 |
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 |
'use client';
import { useRouter } from 'next/navigation';
import { useRef, useState } from 'react';
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';
const EXAMPLES = [
{
title: 'Counting flowers in image',
mediaUrl:
'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png',
prompt:
'Detect flowers in this image, draw boxes and output the image, also return total number of flowers',
},
{
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 surfboard 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 1 frames per second and save the output video as output.mp4.',
},
];
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]">
<h1 className="mb-4 text-center relative">
Vision Agent
<Chip className="absolute bg-green-100 text-green-500">BETA</Chip>
</h1>
<h4 className="text-center">
Generate code to solve your vision problem with simple prompts.
</h4>
<div className="my-8">
<Composer
ref={composerRef}
onSubmit={async ({ input, mediaUrl }) => {
const newId = nanoid();
const resp = await dbPostCreateChat({
id: newId,
title: `conversation-${newId}`,
mediaUrl,
message: {
prompt: input,
mediaUrl,
},
});
if (resp) {
router.push(`/chat/${newId}`);
}
}}
/>
</div>
{EXAMPLES.map((example, index) => {
return (
<Chip
key={index}
className="bg-transparent border border-zinc-500 cursor-pointer px-4"
onClick={() => {
composerRef.current?.setInput(example.prompt);
composerRef.current?.setMediaUrl(example.mediaUrl);
}}
>
<div className="flex flex-row items-center space-x-2">
<p className="text-primary text-sm">{example.title}</p>
<IconArrowUpRight className="text-primary" />
</div>
</Chip>
);
})}
</div>
</div>
);
}
|