Spaces:
Running
Running
File size: 3,445 Bytes
d0a1b70 c3e8f3d d0a1b70 c3e8f3d d0a1b70 a86b547 d0a1b70 c3e8f3d d0a1b70 26c4b30 f80b091 d0a1b70 f80b091 d0a1b70 f80b091 d0a1b70 f80b091 d0a1b70 f80b091 26c4b30 d0a1b70 f80b091 c3e8f3d |
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 |
'use client';
import React from 'react';
import Image from 'next/image';
import useImageUpload from '../../lib/hooks/useImageUpload';
import { fetcher } from '@/lib/utils';
import { ChatEntity, MessageBase } from '@/lib/types';
import { useRouter } from 'next/navigation';
export interface ImageSelectorProps {}
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',
},
],
},
// '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',
];
const ImageSelector: React.FC<ImageSelectorProps> = () => {
const router = useRouter();
const { getRootProps, getInputProps } = useImageUpload(
undefined,
async files => {
const formData = new FormData();
if (files.length !== 1) {
throw new Error('Only one image can be uploaded at a time');
}
console.log();
const reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = async () => {
const resp = await fetcher<ChatEntity>('/api/upload', {
method: 'POST',
body: JSON.stringify({
base64: reader.result as string,
fileType: files[0].type,
}),
});
if (resp) {
router.push(`/chat/${resp.id}`);
}
};
},
);
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>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(({ 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>
);
};
export default ImageSelector;
|