chatgpt-4v

.vscode.settings.json

@@ -0,0 +1,3 @@
+{
+  "prettier.prettierPath": "./node_modules/prettier/index.cjs"
+}

app/(chat)/page.tsx

@@ -1,8 +1,19 @@
-import { nanoid } from '@/lib/utils'
-import { Chat } from '@/components/chat'
+import { nanoid } from '@/lib/utils';
+import { Chat } from '@/components/chat';
 
 export default function IndexPage() {
-  const id = nanoid()
+	const id = nanoid();
 
-  return <Chat id={id} />
+	return (
+		<Chat
+			id={id}
+			initialMessages={[
+				{
+					id: '123',
+					content: 'Hi, what do you want to know about this image?',
+					role: 'system',
+				},
+			]}
+		/>
+	);
 }

app/actions.ts

@@ -15,7 +15,7 @@ export async function getChats(userId?: string | null) {
   try {
     const pipeline = kv.pipeline()
     const chats: string[] = await kv.zrange(`user:chat:${userId}`, 0, -1, {
-      rev: true
+      rev: true,
     })
 
     for (const chat of chats) {
@@ -45,7 +45,7 @@ export async function removeChat({ id, path }: { id: string; path: string }) {
 
   if (!session) {
     return {
-      error: 'Unauthorized'
+      error: 'Unauthorized',
     }
   }
 
@@ -54,7 +54,7 @@ export async function removeChat({ id, path }: { id: string; path: string }) {
 
   if (uid !== session?.user?.id) {
     return {
-      error: 'Unauthorized'
+      error: 'Unauthorized',
     }
   }
 
@@ -70,7 +70,7 @@ export async function clearChats() {
 
   if (!session?.user?.id) {
     return {
-      error: 'Unauthorized'
+      error: 'Unauthorized',
     }
   }
 
@@ -106,7 +106,7 @@ export async function shareChat(id: string) {
 
   if (!session?.user?.id) {
     return {
-      error: 'Unauthorized'
+      error: 'Unauthorized',
     }
   }
 
@@ -114,13 +114,13 @@ export async function shareChat(id: string) {
 
   if (!chat || chat.userId !== session.user.id) {
     return {
-      error: 'Something went wrong'
+      error: 'Something went wrong',
     }
   }
 
   const payload = {
     ...chat,
-    sharePath: `/share/${chat.id}`
+    sharePath: `/share/${chat.id}`,
   }
 
   await kv.hmset(`chat:${chat.id}`, payload)

app/api/chat/route.ts

@@ -1,57 +1,82 @@
-import { OpenAIStream, StreamingTextResponse } from 'ai'
-import OpenAI from 'openai'
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import OpenAI from 'openai';
 
-import { auth } from '@/auth'
-import { nanoid } from '@/lib/utils'
+import { auth } from '@/auth';
+import { nanoid } from '@/lib/utils';
+import {
+	ChatCompletionContentPart,
+	ChatCompletionMessageParam,
+} from 'openai/resources';
 
-export const runtime = 'edge'
+export const runtime = 'edge';
 
 const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY
-})
+	apiKey: process.env.OPENAI_API_KEY,
+});
 
 export async function POST(req: Request) {
-  const json = await req.json()
-  const { messages, previewToken } = json
-  const userId = (await auth())?.user.id
-
-  if (!userId) {
-    return new Response('Unauthorized', {
-      status: 401
-    })
-  }
-
-  if (previewToken) {
-    openai.apiKey = previewToken
-  }
-
-  const res = await openai.chat.completions.create({
-    model: 'gpt-3.5-turbo',
-    messages,
-    temperature: 0.7,
-    stream: true
-  })
-
-  const stream = OpenAIStream(res, {
-    async onCompletion(completion) {
-      const title = json.messages[0].content.substring(0, 100)
-      const id = json.id ?? nanoid()
-      const createdAt = Date.now()
-      const payload = {
-        id,
-        title,
-        userId,
-        createdAt,
-        messages: [
-          ...messages,
-          {
-            content: completion,
-            role: 'assistant'
-          }
-        ]
-      }
-    }
-  })
-
-  return new StreamingTextResponse(stream)
+	const json = await req.json();
+	const { messages, image } = json as {
+		messages: ChatCompletionMessageParam[];
+		image: string;
+	};
+	console.log('[Ming] ~ POST ~ messages:', messages);
+	const userId = (await auth())?.user.id;
+
+	if (!userId) {
+		return new Response('Unauthorized', {
+			status: 401,
+		});
+	}
+
+	const messagesWithImage: ChatCompletionMessageParam[] = messages.map(
+		message => {
+			if (message.role !== 'user') return message;
+			const contentWithImage: ChatCompletionContentPart[] = [
+				{
+					type: 'text',
+					text: message.content as string,
+				},
+				{
+					type: 'image_url',
+					image_url: { url: image },
+				},
+			];
+			return {
+				role: 'user',
+				content: contentWithImage,
+			};
+		},
+	);
+
+	const res = await openai.chat.completions.create({
+		model: 'gpt-4-vision-preview',
+		messages: messagesWithImage,
+		temperature: 0.7,
+		stream: true,
+		max_tokens: 300,
+	});
+
+	const stream = OpenAIStream(res, {
+		async onCompletion(completion) {
+			const title = json.messages[0].content.substring(0, 100);
+			const id = json.id ?? nanoid();
+			const createdAt = Date.now();
+			const payload = {
+				id,
+				title,
+				userId,
+				createdAt,
+				messages: [
+					...messages,
+					{
+						content: completion,
+						role: 'assistant',
+					},
+				],
+			};
+		},
+	});
+
+	return new StreamingTextResponse(stream);
 }

app/globals.css

@@ -3,76 +3,97 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
 
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
 
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
 
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
 
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
 
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: ;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: ;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
 
-    --ring: 240 5% 64.9%;
+		--ring: 240 5% 64.9%;
 
-    --radius: 0.5rem;
-  }
+		--radius: 0.5rem;
+	}
 
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
 
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
 
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
 
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
 
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
 
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
 
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
 
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: ;
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: ;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 85.7% 97.3%;
 
-    --ring: 240 3.7% 15.9%;
-  }
+		--ring: 240 3.7% 15.9%;
+	}
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+@layer components {
+	.scroll-fade::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 50px;
+		background: linear-gradient(
+			to bottom,
+			rgba(255, 255, 255, 0),
+			rgba(255, 255, 255, 1)
+		);
+		pointer-events: none;
+	}
+	.scroll-fade:active::after,
+	.scroll-fade:hover::after {
+		background: none;
+	}
 }

components/chat-message.tsx

@@ -1,80 +1,77 @@
 // Inspired by Chatbot-UI and modified to fit the needs of this project
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
 
-import { Message } from 'ai'
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
+import { Message } from 'ai';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
 
-import { cn } from '@/lib/utils'
-import { CodeBlock } from '@/components/ui/codeblock'
-import { MemoizedReactMarkdown } from '@/components/markdown'
-import { IconOpenAI, IconUser } from '@/components/ui/icons'
-import { ChatMessageActions } from '@/components/chat-message-actions'
+import { cn } from '@/lib/utils';
+import { CodeBlock } from '@/components/ui/codeblock';
+import { MemoizedReactMarkdown } from '@/components/markdown';
+import { IconOpenAI, IconUser } from '@/components/ui/icons';
+import { ChatMessageActions } from '@/components/chat-message-actions';
 
 export interface ChatMessageProps {
-  message: Message
+	message: Message;
 }
 
 export function ChatMessage({ message, ...props }: ChatMessageProps) {
-  return (
-    <div
-      className={cn('group relative mb-4 flex items-start md:-ml-12')}
-      {...props}
-    >
-      <div
-        className={cn(
-          'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
-          message.role === 'user'
-            ? 'bg-background'
-            : 'bg-primary text-primary-foreground'
-        )}
-      >
-        {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
-      </div>
-      <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
-        <MemoizedReactMarkdown
-          className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
-          remarkPlugins={[remarkGfm, remarkMath]}
-          components={{
-            p({ children }) {
-              return <p className="mb-2 last:mb-0">{children}</p>
-            },
-            code({ node, inline, className, children, ...props }) {
-              if (children.length) {
-                if (children[0] == '▍') {
-                  return (
-                    <span className="mt-1 cursor-default animate-pulse">▍</span>
-                  )
-                }
+	return (
+		<div className={cn('group relative mb-4 flex items-start')} {...props}>
+			<div
+				className={cn(
+					'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
+					message.role === 'user'
+						? 'bg-background'
+						: 'bg-primary text-primary-foreground',
+				)}
+			>
+				{message.role === 'user' ? <IconUser /> : <IconOpenAI />}
+			</div>
+			<div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
+				<MemoizedReactMarkdown
+					className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
+					remarkPlugins={[remarkGfm, remarkMath]}
+					components={{
+						p({ children }) {
+							return <p className="mb-2 last:mb-0">{children}</p>;
+						},
+						code({ node, inline, className, children, ...props }) {
+							if (children.length) {
+								if (children[0] == '▍') {
+									return (
+										<span className="mt-1 cursor-default animate-pulse">▍</span>
+									);
+								}
 
-                children[0] = (children[0] as string).replace('`▍`', '▍')
-              }
+								children[0] = (children[0] as string).replace('`▍`', '▍');
+							}
 
-              const match = /language-(\w+)/.exec(className || '')
+							const match = /language-(\w+)/.exec(className || '');
 
-              if (inline) {
-                return (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                )
-              }
+							if (inline) {
+								return (
+									<code className={className} {...props}>
+										{children}
+									</code>
+								);
+							}
 
-              return (
-                <CodeBlock
-                  key={Math.random()}
-                  language={(match && match[1]) || ''}
-                  value={String(children).replace(/\n$/, '')}
-                  {...props}
-                />
-              )
-            }
-          }}
-        >
-          {message.content}
-        </MemoizedReactMarkdown>
-        <ChatMessageActions message={message} />
-      </div>
-    </div>
-  )
+							return (
+								<CodeBlock
+									key={Math.random()}
+									language={(match && match[1]) || ''}
+									value={String(children).replace(/\n$/, '')}
+									{...props}
+								/>
+							);
+						},
+					}}
+				>
+					{message.content}
+				</MemoizedReactMarkdown>
+				<ChatMessageActions message={message} />
+			</div>
+		</div>
+	);
 }

components/chat.tsx

@@ -1,76 +1,93 @@
-'use client'
+'use client';
 
-import { useChat, type Message } from 'ai/react'
+import { useChat, type Message } from 'ai/react';
+import '@/app/globals.css';
 
-import { cn } from '@/lib/utils'
-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 { cn } from '@/lib/utils';
+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'
+	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';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
-  initialMessages?: Message[]
-  id?: string
+	initialMessages?: Message[];
+	id?: string;
 }
 
 export function Chat({ id, initialMessages, className }: ChatProps) {
-  const router = useRouter()
-  const path = usePathname()
-  const [previewToken, setPreviewToken] = useLocalStorage<string | null>(
-    'ai-token',
-    null
-  )
-  const [previewTokenInput, setPreviewTokenInput] = useState(previewToken ?? '')
-  const { messages, append, reload, stop, isLoading, input, setInput } =
-    useChat({
-      initialMessages,
-      id,
-      body: {
-        id,
-        previewToken
-      },
-      onResponse(response) {
-        if (response.status === 401) {
-          toast.error(response.statusText)
-        }
-      }
-    })
-  return (
-    <>
-      <div className={cn('pb-[200px] pt-4 md:pt-10', className)}>
-        {messages.length ? (
-          <>
-            <ChatList messages={messages} />
-            <ChatScrollAnchor trackVisibility={isLoading} />
-          </>
-        ) : (
-          <EmptyScreen setInput={setInput} />
-        )}
-      </div>
-      <ChatPanel
-        id={id}
-        isLoading={isLoading}
-        stop={stop}
-        append={append}
-        reload={reload}
-        messages={messages}
-        input={input}
-        setInput={setInput}
-      />
-    </>
-  )
+	const router = useRouter();
+	const path = usePathname();
+	const targetImage = useAtomValue(targetImageAtom);
+	const { messages, append, reload, stop, isLoading, input, setInput } =
+		useChat({
+			initialMessages,
+			id,
+			body: {
+				id,
+				image: targetImage,
+			},
+			onResponse(response) {
+				if (response.status === 401) {
+					toast.error(response.statusText);
+				}
+			},
+		});
+	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}
+				isLoading={isLoading}
+				stop={stop}
+				append={append}
+				reload={reload}
+				messages={messages}
+				input={input}
+				setInput={setInput}
+			/>
+		</>
+	);
 }

components/empty-screen.tsx

@@ -1,31 +1,12 @@
-import { UseChatHelpers } from 'ai/react'
-
-import { Button } from '@/components/ui/button'
-import { ExternalLink } from '@/components/external-link'
-import { IconArrowRight } from '@/components/ui/icons'
-
-const exampleMessages = [
-  {
-    heading: 'Explain technical concepts',
-    message: `What is a "serverless function"?`
-  },
-  {
-    heading: 'Summarize an article',
-    message: 'Summarize the following article for a 2nd grader: \n'
-  },
-  {
-    heading: 'Draft an email',
-    message: `Draft an email to my boss about the following: \n`
-  }
-]
+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="md-2 text-lg font-semibold">Welcome to Vision Agent</h1>
-        <p>Start by uploading an image</p>
-      </div>
-    </div>
-  )
+	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>
+	);
 }

components/login-button.tsx

@@ -1,42 +1,42 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import { signIn } from 'next-auth/react'
+import * as React from 'react';
+import { signIn } from 'next-auth/react';
 
-import { cn } from '@/lib/utils'
-import { Button, type ButtonProps } from '@/components/ui/button'
-import { IconGitHub, IconSpinner } from '@/components/ui/icons'
+import { cn } from '@/lib/utils';
+import { Button, type ButtonProps } from '@/components/ui/button';
+import { IconGitHub, IconSpinner } from '@/components/ui/icons';
 
 interface LoginButtonProps extends ButtonProps {
-  showGithubIcon?: boolean
-  text?: string
+	showGithubIcon?: boolean;
+	text?: string;
 }
 
 export function LoginButton({
-  text = 'Login with GitHub',
-  showGithubIcon = true,
-  className,
-  ...props
+	text = 'Login with GitHub',
+	showGithubIcon = true,
+	className,
+	...props
 }: LoginButtonProps) {
-  const [isLoading, setIsLoading] = React.useState(false)
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        setIsLoading(true)
-        // next-auth signIn() function doesn't work yet at Edge Runtime due to usage of BroadcastChannel
-        signIn('github', { callbackUrl: `/` })
-      }}
-      disabled={isLoading}
-      className={cn(className)}
-      {...props}
-    >
-      {isLoading ? (
-        <IconSpinner className="mr-2 animate-spin" />
-      ) : showGithubIcon ? (
-        <IconGitHub className="mr-2" />
-      ) : null}
-      {text}
-    </Button>
-  )
+	const [isLoading, setIsLoading] = React.useState(false);
+	return (
+		<Button
+			variant="outline"
+			onClick={() => {
+				setIsLoading(true);
+				// next-auth signIn() function doesn't work yet at Edge Runtime due to usage of BroadcastChannel
+				signIn('github', { callbackUrl: `/` });
+			}}
+			disabled={isLoading}
+			className={cn(className)}
+			{...props}
+		>
+			{isLoading ? (
+				<IconSpinner className="mr-2 animate-spin" />
+			) : showGithubIcon ? (
+				<IconGitHub className="mr-2" />
+			) : null}
+			{text}
+		</Button>
+	);
 }

next.config.js

@@ -1,13 +1,11 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'avatars.githubusercontent.com',
-        port: '',
-        pathname: '**'
-      }
-    ]
-  }
-}
+	images: {
+		remotePatterns: [
+			{
+				protocol: 'https',
+				hostname: '**',
+			},
+		],
+	},
+};

package.json

@@ -30,6 +30,7 @@
     "focus-trap-react": "^10.2.3",
     "framer-motion": "^10.18.0",
     "geist": "^1.2.1",
+    "jotai": "^2.7.0",
     "nanoid": "^5.0.4",
     "next": "14.1.0",
     "next-auth": "5.0.0-beta.4",

prettier.config.cjs

@@ -1,12 +1,13 @@
 /** @type {import('prettier').Config} */
 module.exports = {
   endOfLine: 'lf',
-  semi: false,
-  useTabs: false,
+  semi: true,
+  useTabs: true,
   singleQuote: true,
   arrowParens: 'avoid',
   tabWidth: 2,
-  trailingComma: 'none',
+  trailingComma: 'all',
+  bracketSpacing: true,
   importOrder: [
     '^(react/(.*)$)|^(react$)',
     '^(next/(.*)$)|^(next$)',
@@ -23,12 +24,12 @@ module.exports = {
     '^@/styles/(.*)$',
     '^@/app/(.*)$',
     '',
-    '^[./]'
+    '^[./]',
   ],
   importOrderSeparation: false,
   importOrderSortSpecifiers: true,
   importOrderBuiltinModulesToTop: true,
   importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
   importOrderMergeDuplicateImports: true,
-  importOrderCombineTypeAndValueImports: true
+  importOrderCombineTypeAndValueImports: true,
 }

state/index.ts

@@ -0,0 +1,5 @@
+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',
+);

yarn.lock

@@ -2550,6 +2550,11 @@ jose@^5.1.0:
   resolved "https://registry.yarnpkg.com/jose/-/jose-5.2.2.tgz#b91170e9ba6dbe609b0c0a86568f9a1fbe4335c0"
   integrity sha512-/WByRr4jDcsKlvMd1dRJnPfS1GVO3WuKyaurJ/vvXcOaUQO8rnNObCQMlv/5uCceVQIq5Q4WLF44ohsdiTohdg==
 
+jotai@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.7.0.tgz#50efe98b94ec742e1c4cf3f4307c2cac4766392c"
+  integrity sha512-4qsyFKu4MprI39rj2uoItyhu24NoCHzkOV7z70PQr65SpzV6CSyhQvVIfbNlNqOIOspNMdf5OK+kTXLvqe63Jw==
+
 "js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -4065,6 +4070,7 @@ streamsearch@^1.1.0:
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==