Spaces:
Sleeping
Sleeping
File size: 2,659 Bytes
d0a1b70 38448fc c3e8f3d 38448fc 6b8f69a d0a1b70 38448fc 6b8f69a c3e8f3d 54a4eaa c3e8f3d d0a1b70 c3e8f3d d0a1b70 38448fc 26c4b30 38448fc 26c4b30 54a4eaa 6b8f69a 54a4eaa 6b8f69a 54a4eaa 6b8f69a 26c4b30 38448fc 26c4b30 54a4eaa f80b091 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 973f0d8 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 |
'use client';
import React, { useState } from 'react';
import useImageUpload from '../../lib/hooks/useImageUpload';
import { cn, fetcher } from '@/lib/utils';
import { SignedPayload, MessageBase, ChatEntity } from '@/lib/types';
import { useRouter } from 'next/navigation';
import Loading from '../ui/Loading';
import toast from 'react-hot-toast';
export interface ImageSelectorProps {}
type Example = {
url: string;
initMessages: MessageBase[];
};
const ImageSelector: React.FC<ImageSelectorProps> = () => {
const router = useRouter();
const [isUploading, setUploading] = useState(false);
const { getRootProps, getInputProps, isDragActive } = useImageUpload(
undefined,
async files => {
const formData = new FormData();
if (files.length !== 1) {
throw new Error('Only one image can be uploaded at a time');
}
setUploading(true);
const reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = async () => {
const { id, signedUrl, publicUrl, fields } =
await fetcher<SignedPayload>('/api/sign', {
method: 'POST',
body: JSON.stringify({
fileType: files[0].type,
fileName: files[0].name,
}),
});
const formData = new FormData();
Object.entries(fields).forEach(([key, value]) => {
formData.append(key, value as string);
});
formData.append('file', files[0]);
const uploadResponse = await fetch(signedUrl, {
method: 'POST',
body: formData,
});
if (!uploadResponse.ok) {
toast.error(uploadResponse.statusText);
return;
}
const resp = await fetcher<ChatEntity>('/api/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id,
url: publicUrl,
}),
});
setUploading(false);
if (resp) {
router.push(`/chat/${resp.id}`);
}
};
},
);
return (
<div
{...getRootProps()}
className={cn(
'dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer',
isDragActive && 'bg-gray-500/50 border-solid',
)}
>
<input {...getInputProps()} />
<div className="text-gray-400 text-md">
{isUploading ? (
<Loading />
) : (
'Start using Vision Agent by selecting an image'
)}
</div>
</div>
);
};
export default ImageSelector;
|