Spaces:
Sleeping
Sleeping
File size: 4,715 Bytes
38448fc d0a1b70 0d6f04b 38448fc 54a4eaa 71679ee 6bcab4c 38448fc 03e1c17 5ec491a 03e1c17 5ec491a 03e1c17 54a4eaa 38448fc 03e1c17 38448fc 71679ee 0d6f04b 03e1c17 38448fc 54a4eaa 38448fc 76fdff4 fcd4478 38448fc 6bcab4c 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 54a4eaa 38448fc 54a4eaa 6bcab4c 54a4eaa 6bcab4c 71679ee 54a4eaa 6bcab4c 54a4eaa 6bcab4c 54a4eaa 38448fc 76fdff4 |
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 126 127 |
'use client';
import ImageSelector from '@/components/chat/ImageSelector';
import { generateInputImageMarkdown } from '@/lib/messageUtils';
import { fetcher } from '@/lib/utils';
import { useRouter } from 'next/navigation';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/Tooltip';
import { IconDiscord, IconGitHub } from '@/components/ui/Icons';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import Img from '@/components/ui/Img';
import { MessageRaw } from '@/lib/db/types';
import { dbPostCreateChat } from '@/lib/db/functions';
import { useState } from 'react';
import Loading from '@/components/ui/Loading';
// const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
const EXAMPLE_URL =
'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png';
const EXAMPLE_HEADER = 'Counting and find';
const EXAMPLE_SUBHEADER =
'number of flowers, area of largest and smallest flower';
const EXAMPLE_PROMPT =
'Count the number of flowers and find the area of the largest and smallest flower';
const exampleMessages = [
{
heading: EXAMPLE_HEADER,
subheading: EXAMPLE_SUBHEADER,
url: EXAMPLE_URL,
initMessages: [
{
role: 'user' as MessageRaw['role'],
content:
EXAMPLE_PROMPT + '\n\n' + generateInputImageMarkdown(EXAMPLE_URL),
},
],
},
// {
// heading: 'Detecting',
// url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
// subheading: 'number of cereals in an image',
// message: `How many cereals are there in the image?`,
// },
];
export default function Page() {
const router = useRouter();
const [isUploading, setUploading] = useState<false | Number>(false);
return (
<div className="mx-auto max-w-2xl px-4 mt-8">
<div className="rounded-lg border bg-background p-8 mb-6">
<h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
<p>
Vision Agent is a library that helps you utilize agent frameworks for
your vision tasks. Vision Agent aims to provide an in-seconds
experience by allowing users to describe their problem in text and
utilizing agent frameworks to solve the task for them.
</p>
<div className="my-2">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="link" size="icon" asChild className="mr-2">
<Link
href="https://github.com/landing-ai/vision-agent"
target="_blank"
>
<IconGitHub className="size-6" />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>Github</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="link" size="icon" asChild className="mr-2">
<Link href="https://discord.gg/wZ2A7J69" target="_blank">
<IconDiscord className="size-6" />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>Discord</TooltipContent>
</Tooltip>
</div>
<ImageSelector />
</div>
<div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">
{exampleMessages.map((example, index) => (
<div
key={index}
className={`relative cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
index > 1 && 'hidden md:block'
}`}
onClick={async () => {
setUploading(index);
const resp = await dbPostCreateChat({
mediaUrl: example.url,
initMessages: example.initMessages,
});
setUploading(false);
if (resp) {
router.push(`/chat/${resp.id}`);
}
}}
>
{isUploading === index && (
<div className="absolute top-0 left-0 size-full flex items-center justify-center bg-white/60">
<Loading />
</div>
)}
<Img src={example.url} alt="example images" className="w-1/4" />
<div className="flex items-start flex-col h-full ml-3 w-3/4">
<div className="text-sm font-semibold">{example.heading}</div>
<div className="text-sm text-zinc-600">{example.subheading}</div>
</div>
</div>
))}
</div>
</div>
);
}
|