Spaces:
Running
Running
File size: 2,066 Bytes
42501f7 052672d 42501f7 052672d 3ba9c0c 42501f7 f80b091 42501f7 f80b091 3ba9c0c |
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 |
import { useAtom } from 'jotai';
import { useDropzone } from 'react-dropzone';
import { datasetAtom } from '../../state';
import Image from 'next/image';
import useImageUpload from '../../lib/hooks/useImageUpload';
const examples = [
'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
];
export function EmptyScreen() {
const [, setTarget] = useAtom(datasetAtom);
const { getRootProps, getInputProps } = useImageUpload();
return (
<div className="mx-auto max-w-2xl px-4">
<div className="rounded-lg border bg-background p-8">
<h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
<p>Lets start by choosing an image</p>
<div
{...getRootProps()}
className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
>
<input {...getInputProps()} />
<p className="text-gray-400 text-lg">
Drag or drop image here, or click to select images
</p>
</div>
<p className="mt-4 mb-2">
You can also choose from below examples we provided
</p>
<div className="flex">
{examples.map((example, index) => (
<Image
src={example}
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={() =>
setTarget([{ url: example, name: 'i-1', selected: false }])
}
/>
))}
</div>
</div>
</div>
);
}
|