Spaces:

LandingAI
/

vision-agent

Sleeping

App Files Files Community

MingruiZhang commited on Feb 28, 2024

Commit

42501f7

1 Parent(s): 52b4c36

select image

Browse files

Files changed (12) hide show

app/api/chat/route.ts +1 -1
app/layout.tsx +51 -51
components/chat-list.tsx +63 -21
components/chat.tsx +46 -34
components/empty-screen.tsx +57 -3
package.json +1 -0
public/apple-touch-icon.png +0 -0
public/favicon-16x16.png +0 -0
public/favicon.ico +0 -0
public/landing.png +0 -0
state/index.ts +1 -3
yarn.lock +21 -0

app/api/chat/route.ts CHANGED Viewed

@@ -20,7 +20,7 @@ export async function POST(req: Request) {
 		messages: ChatCompletionMessageParam[];
 		image: string;
 	};
-	console.log('[Ming] ~ POST ~ messages:', messages);
 	const userId = (await auth())?.user.id;
 	if (!userId) {

 		messages: ChatCompletionMessageParam[];
 		image: string;
 	};
 	const userId = (await auth())?.user.id;
 	if (!userId) {

app/layout.tsx CHANGED Viewed

@@ -1,62 +1,62 @@
-import { Toaster } from 'react-hot-toast'
-import { GeistSans } from 'geist/font/sans'
-import { GeistMono } from 'geist/font/mono'
-import '@/app/globals.css'
-import { cn } from '@/lib/utils'
-import { TailwindIndicator } from '@/components/tailwind-indicator'
-import { Providers } from '@/components/providers'
-import { Header } from '@/components/header'
 export const metadata = {
-  metadataBase: new URL(`https://${process.env.VERCEL_URL}`),
-  title: {
-    default: 'Next.js AI Chatbot',
-    template: `%s - Next.js AI Chatbot`
-  },
-  description: 'An AI-powered chatbot template built with Next.js and Vercel.',
-  icons: {
-    icon: '/favicon.ico',
-    shortcut: '/favicon-16x16.png',
-    apple: '/apple-touch-icon.png'
-  }
-}
 export const viewport = {
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: 'white' },
-    { media: '(prefers-color-scheme: dark)', color: 'black' }
-  ]
-}
 interface RootLayoutProps {
-  children: React.ReactNode
 }
 export default function RootLayout({ children }: RootLayoutProps) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={cn(
-          'font-sans antialiased',
-          GeistSans.variable,
-          GeistMono.variable
-        )}
-      >
-        <Toaster />
-        <Providers
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <div className="flex flex-col min-h-screen">
-            <Header />
-            <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
-          </div>
-          <TailwindIndicator />
-        </Providers>
-      </body>
-    </html>
-  )
 }

+import { Toaster } from 'react-hot-toast';
+import { GeistSans } from 'geist/font/sans';
+import { GeistMono } from 'geist/font/mono';
+import '@/app/globals.css';
+import { cn } from '@/lib/utils';
+import { TailwindIndicator } from '@/components/tailwind-indicator';
+import { Providers } from '@/components/providers';
+import { Header } from '@/components/header';
 export const metadata = {
+	metadataBase: new URL(`https://${process.env.VERCEL_URL}`),
+	title: {
+		default: 'Vision Agent',
+		template: `%s - Vision Agent`,
+	},
+	description: 'By Landing AI',
+	icons: {
+		icon: '/landing.png',
+		shortcut: '/landing.png',
+		apple: '/landing.png',
+	},
+};
 export const viewport = {
+	themeColor: [
+		{ media: '(prefers-color-scheme: light)', color: 'white' },
+		{ media: '(prefers-color-scheme: dark)', color: 'black' },
+	],
+};
 interface RootLayoutProps {
+	children: React.ReactNode;
 }
 export default function RootLayout({ children }: RootLayoutProps) {
+	return (
+		<html lang="en" suppressHydrationWarning>
+			<body
+				className={cn(
+					'font-sans antialiased',
+					GeistSans.variable,
+					GeistMono.variable,
+				)}
+			>
+				<Toaster />
+				<Providers
+					attribute="class"
+					defaultTheme="system"
+					enableSystem
+					disableTransitionOnChange
+				>
+					<div className="flex flex-col min-h-screen">
+						<Header />
+						<main className="flex flex-col flex-1 bg-muted/50">{children}</main>
+					</div>
+					<TailwindIndicator />
+				</Providers>
+			</body>
+		</html>
+	);
 }

components/chat-list.tsx CHANGED Viewed

@@ -1,27 +1,69 @@
-import { type Message } from 'ai'
-import { Separator } from '@/components/ui/separator'
-import { ChatMessage } from '@/components/chat-message'
 export interface ChatList {
-  messages: Message[]
 }
-export function ChatList({ messages }: ChatList) {
-  if (!messages.length) {
-    return null
-  }
-  return (
-    <div className="relative mx-auto max-w-2xl px-4">
-      {messages.map((message, index) => (
-        <div key={index}>
-          <ChatMessage message={message} />
-          {index < messages.length - 1 && (
-            <Separator className="my-4 md:my-8" />
-          )}
-        </div>
-      ))}
-    </div>
-  )
 }

+import { type Message } from 'ai';
+import { useEffect, useState } from 'react';
+import { Separator } from '@/components/ui/separator';
+import { ChatMessage } from '@/components/chat-message';
 export interface ChatList {
+	messages: Message[];
+	isLoading: boolean;
 }
+export function ChatList({ messages, isLoading }: ChatList) {
+	const [loadingDots, setLoadingDots] = useState('');
+	useEffect(() => {
+		let loadingInterval: NodeJS.Timeout;
+		if (isLoading) {
+			loadingInterval = setInterval(() => {
+				setLoadingDots(prevMessage => {
+					switch (prevMessage) {
+						case '':
+							return '.';
+						case '.':
+							return '..';
+						case '..':
+							return '...';
+						case '...':
+							return '';
+						default:
+							return '';
+					}
+				});
+			}, 500);
+		}
+		return () => {
+			clearInterval(loadingInterval);
+		};
+	}, [isLoading]);
+	if (!messages.length) {
+		return null;
+	}
+	const assistantLoadingMessage: Message = {
+		id: 'loading',
+		content: loadingDots,
+		role: 'assistant',
+	};
+	const messageWithLoading =
+		isLoading && messages[messages.length - 1].role !== 'assistant'
+			? [...messages, assistantLoadingMessage]
+			: messages;
+	return (
+		<div className="relative mx-auto max-w-2xl px-8 pr-12">
+			{messageWithLoading.map((message, index) => (
+				<div key={index}>
+					<ChatMessage message={message} />
+					{index < messageWithLoading.length - 1 && (
+						<Separator className="my-4 md:my-8" />
+					)}
+				</div>
+			))}
+		</div>
+	);
 }

components/chat.tsx CHANGED Viewed

@@ -8,21 +8,12 @@ import { ChatList } from '@/components/chat-list';
 import { ChatPanel } from '@/components/chat-panel';
 import { EmptyScreen } from '@/components/empty-screen';
 import { ChatScrollAnchor } from '@/components/chat-scroll-anchor';
-import { useLocalStorage } from '@/lib/hooks/use-local-storage';
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from '@/components/ui/dialog';
 import { useState } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { toast } from 'react-hot-toast';
 import { usePathname, useRouter } from 'next/navigation';
-import { useAtomValue } from 'jotai';
 import { targetImageAtom } from '@/state';
 import Image from 'next/image';
@@ -34,7 +25,7 @@ export interface ChatProps extends React.ComponentProps<'div'> {
 export function Chat({ id, initialMessages, className }: ChatProps) {
 	const router = useRouter();
 	const path = usePathname();
-	const targetImage = useAtomValue(targetImageAtom);
 	const { messages, append, reload, stop, isLoading, input, setInput } =
 		useChat({
 			initialMessages,
@@ -49,34 +40,55 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
 				}
 			},
 		});
 	return (
 		<>
 			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
-				{targetImage ? (
-					<>
-						<div className="flex h-full">
-							<div className="w-1/2 relative border-r-2 border-gray-200">
-								<div className="relative aspect-[1/1] w-full px-8">
-									<Image
-										src={targetImage}
-										alt="target image"
-										layout="responsive"
-										objectFit="contain"
-										width={1000}
-										height={1000}
-										className="rounded-xl shadow-lg"
 									/>
-								</div>
-							</div>
-							<div className="w-1/2 relative overflow-auto">
-								<ChatList messages={messages} />
-							</div>
 						</div>
-						<ChatScrollAnchor trackVisibility={isLoading} />
-					</>
-				) : (
-					<EmptyScreen setInput={setInput} />
-				)}
 			</div>
 			<ChatPanel
 				id={id}

 import { ChatPanel } from '@/components/chat-panel';
 import { EmptyScreen } from '@/components/empty-screen';
 import { ChatScrollAnchor } from '@/components/chat-scroll-anchor';
 import { useState } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { toast } from 'react-hot-toast';
 import { usePathname, useRouter } from 'next/navigation';
+import { useAtom } from 'jotai';
 import { targetImageAtom } from '@/state';
 import Image from 'next/image';
 export function Chat({ id, initialMessages, className }: ChatProps) {
 	const router = useRouter();
 	const path = usePathname();
+	const [targetImage, setTargetImage] = useAtom(targetImageAtom);
 	const { messages, append, reload, stop, isLoading, input, setInput } =
 		useChat({
 			initialMessages,
 				}
 			},
 		});
+	if (!targetImage)
+		return (
+			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
+				<EmptyScreen />/
+			</div>
+		);
 	return (
 		<>
 			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
+				<div className="flex h-full">
+					<div className="w-1/2 relative border-r-2 border-gray-200">
+						<div className="relative aspect-[1/1] w-full px-12">
+							<Image
+								src={targetImage}
+								alt="target image"
+								layout="responsive"
+								objectFit="contain"
+								width={1000}
+								height={1000}
+								className="rounded-xl shadow-lg"
+							/>
+							<button
+								className="px-2 py-1 rounded-lg text-blue-500 border-2 border-blue-400 flex items-center mt-4"
+								onClick={() => setTargetImage(null)}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									className="size-4"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M15 19l-7-7 7-7"
 									/>
+								</svg>
+								Back
+							</button>
 						</div>
+					</div>
+					<div className="w-1/2 relative overflow-auto">
+						<ChatList messages={messages} isLoading={isLoading} />
+					</div>
+				</div>
+				<ChatScrollAnchor trackVisibility={isLoading} />
 			</div>
 			<ChatPanel
 				id={id}

components/empty-screen.tsx CHANGED Viewed

@@ -1,11 +1,65 @@
-import { UseChatHelpers } from 'ai/react';
-export function EmptyScreen({ setInput }: Pick<UseChatHelpers, 'setInput'>) {
 	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>Start by uploading an image</p>
 			</div>
 		</div>
 	);

+import { useAtom } from 'jotai';
+import { useDropzone } from 'react-dropzone';
+import { targetImageAtom } from '../state';
+import Image from 'next/image';
+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(targetImageAtom);
+	const { getRootProps, getInputProps } = useDropzone({
+		accept: {
+			'image/*': ['.jpeg', '.png'],
+		},
+		multiple: false,
+		onDrop: async acceptedFiles => {
+			try {
+				const file = acceptedFiles[0];
+				const reader = new FileReader();
+				reader.onloadend = () => {
+					setTarget(reader.result as string);
+				};
+				reader.readAsDataURL(file);
+			} catch (err) {
+				console.error(err);
+			}
+		},
+	});
 	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-blue-300 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
+				>
+					<input {...getInputProps()} />
+					<p className="text-blue-300 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(example)}
+						/>
+					))}
+				</div>
 			</div>
 		</div>
 	);

package.json CHANGED Viewed

@@ -38,6 +38,7 @@
     "openai": "^4.24.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.5.3",
     "react-markdown": "^8.0.7",

     "openai": "^4.24.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.5.3",
     "react-markdown": "^8.0.7",

public/apple-touch-icon.png DELETED Viewed

Binary file (10.4 kB)

public/favicon-16x16.png DELETED Viewed

Binary file (539 Bytes)

public/favicon.ico DELETED Viewed

Binary file (15.4 kB)

public/landing.png ADDED Viewed

state/index.ts CHANGED Viewed

@@ -1,5 +1,3 @@
 import { atom } from 'jotai';
-export const targetImageAtom = atom<string | null>(
-	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/9908.jpg',
-);


1	import { atom } from 'jotai';
2
3	+ export const targetImageAtom = atom<string \| null>(null);

yarn.lock CHANGED Viewed

@@ -1054,6 +1054,11 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 autoprefixer@^10.4.17:
   version "10.4.17"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.17.tgz#35cd5695cbbe82f536a50fa025d561b01fdec8be"
@@ -1914,6 +1919,13 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -3682,6 +3694,15 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 react-hot-toast@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"

   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+attr-accept@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 autoprefixer@^10.4.17:
   version "10.4.17"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.17.tgz#35cd5695cbbe82f536a50fa025d561b01fdec8be"
   dependencies:
     flat-cache "^3.0.4"
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
+  dependencies:
+    tslib "^2.4.0"
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
+react-dropzone@^14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
+  integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
+  dependencies:
+    attr-accept "^2.2.2"
+    file-selector "^0.6.0"
+    prop-types "^15.8.1"
 react-hot-toast@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"