Spaces:
Sleeping
Sleeping
File size: 3,460 Bytes
d0a1b70 bc0330e c3e8f3d 38448fc 6b8f69a d0a1b70 38448fc 6b8f69a bc0330e c3e8f3d 54a4eaa c3e8f3d d0a1b70 c3e8f3d d0a1b70 38448fc bc0330e 38448fc 26c4b30 38448fc 26c4b30 bc0330e 6b8f69a bc0330e 6b8f69a bc0330e 26c4b30 38448fc bc0330e 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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
'use client';
import React, { useCallback, 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';
import {
generateVideoThumbnails,
getVideoCover,
} from '@rajesh896/video-thumbnails-generator';
export interface ImageSelectorProps {}
type Example = {
url: string;
initMessages: MessageBase[];
};
const ImageSelector: React.FC<ImageSelectorProps> = () => {
const router = useRouter();
const [isUploading, setUploading] = useState(false);
const upload = useCallback(async (file: File, chatId?: string) => {
const { id, signedUrl, publicUrl, fields } = await fetcher<SignedPayload>(
'/api/sign',
{
method: 'POST',
body: JSON.stringify({
id: chatId,
fileType: file.type,
fileName: file.name,
}),
},
);
const formData = new FormData();
Object.entries(fields).forEach(([key, value]) => {
formData.append(key, value as string);
});
formData.append('file', file);
const uploadResponse = await fetch(signedUrl, {
method: 'POST',
body: formData,
});
if (!uploadResponse.ok) {
toast.error(uploadResponse.statusText);
return;
}
return {
id,
publicUrl,
};
}, []);
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 file = files[0];
const resp = await upload(file);
if (!resp) {
return;
}
if (file.type === 'video/mp4') {
const thumbnails = await generateVideoThumbnails(file, 1, 'file');
fetch(thumbnails[0])
.then(res => res.blob())
.then(blob => {
const thumbnailFile = new File(
[blob],
file.name.replace('.mp4', '.png').replace('.MP4', '.png'),
{
type: 'image/png',
},
);
return upload(thumbnailFile, resp.id);
});
}
await fetcher<ChatEntity>('/api/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: resp.id,
url: resp.publicUrl,
}),
});
setUploading(false);
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;
|