From cc102007446b737e6077626f2e6b4f3bc81dc4d9 Mon Sep 17 00:00:00 2001 From: Jeason Date: Wed, 3 Jul 2024 19:13:29 +0800 Subject: [PATCH] chore: update playground page --- README.md | 32 +- app/components/chat-card.tsx | 49 --- app/components/footer.tsx | 6 +- app/components/layout.tsx | 121 +++++++ app/components/markdown.tsx | 9 - app/components/profile.tsx | 0 app/components/prompt-card.tsx | 59 ---- app/components/settings.tsx | 314 +++++++++++++++++++ app/components/theme-switcher.tsx | 4 +- app/components/ui/badge.tsx | 36 +++ app/components/ui/drawer.tsx | 116 +++++++ app/components/ui/input.tsx | 25 ++ app/components/ui/slider.tsx | 26 ++ app/components/ui/table.tsx | 117 +++++++ app/components/ui/tooltip.tsx | 28 ++ app/orders/page.tsx | 156 +++++++++ app/page.tsx | 231 ++++++++++---- package.json | 11 +- pnpm-lock.yaml | 503 ++++++++++++++---------------- tailwind.config.js | 2 +- 20 files changed, 1393 insertions(+), 452 deletions(-) delete mode 100644 app/components/chat-card.tsx create mode 100644 app/components/layout.tsx delete mode 100644 app/components/markdown.tsx delete mode 100644 app/components/profile.tsx delete mode 100644 app/components/prompt-card.tsx create mode 100644 app/components/settings.tsx create mode 100644 app/components/ui/badge.tsx create mode 100644 app/components/ui/drawer.tsx create mode 100644 app/components/ui/input.tsx create mode 100644 app/components/ui/slider.tsx create mode 100644 app/components/ui/table.tsx create mode 100644 app/components/ui/tooltip.tsx create mode 100644 app/orders/page.tsx diff --git a/README.md b/README.md index bc69aca..9a3aade 100644 --- a/README.md +++ b/README.md @@ -115,7 +115,7 @@ console.log(result); // I am a large language model, trained by Google. ``` -Chrome built-in language models can also be used in the generateObject function: +Chrome built-in language models can also be used in the `generateObject/streamObject` function: ```javascript import { generateObject } from 'ai'; @@ -143,7 +143,35 @@ console.log(object); // { recipe: {...} } ``` -> Due to model reasons, `toolCall` and `streamObject` are not supported. We are making an effort to implement these functions by prompt engineering. +```javascript +import { streamObject } from 'ai'; +import { chromeai } from 'chrome-ai'; +import { z } from 'zod'; + +const { partialObjectStream } = await streamObject({ + model: chromeai(), + schema: z.object({ + recipe: z.object({ + name: z.string(), + ingredients: z.array( + z.object({ + name: z.string(), + amount: z.string(), + }) + ), + steps: z.array(z.string()), + }), + }), + prompt: 'Generate a lasagna recipe.', +}); + +for await (const partialObject of result.partialObjectStream) { + console.log(JSON.stringify(partialObject, null, 2)); + // { recipe: {...} } +} +``` + +> Due to model reasons, `toolCall/functionCall` are not supported. We are making an effort to implement these functions by prompt engineering. ## Enable AI in Chrome diff --git a/app/components/chat-card.tsx b/app/components/chat-card.tsx deleted file mode 100644 index e437d35..0000000 --- a/app/components/chat-card.tsx +++ /dev/null @@ -1,49 +0,0 @@ -'use client'; - -import React from 'react'; -import { MemoizedReactMarkdown } from './markdown'; -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from './ui/card'; -import { Skeleton } from './ui/skeleton'; - -export interface ChatCardProps { - message?: string; - loading?: boolean; -} - -export const ChatCard: React.FC = ({ message, loading }) => { - if (loading && !message) { - return ( -
- - -
- ); - } - if (!message) return null; - return ( - - - ChatBot: - - - {children}

; - }, - }} - > - {message} - - - - ); -}; diff --git a/app/components/footer.tsx b/app/components/footer.tsx index da4a97f..3953371 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -2,9 +2,9 @@ import React from 'react'; export const Footer: React.FC = () => { return ( -
+

- Open source AI demo built with{' '} + Built with{' '} = () => { .

-
+ ); }; diff --git a/app/components/layout.tsx b/app/components/layout.tsx new file mode 100644 index 0000000..c167393 --- /dev/null +++ b/app/components/layout.tsx @@ -0,0 +1,121 @@ +'use client'; + +import React from 'react'; +import { + SquareTerminal, + Chrome, + Github, + Twitter, + SquareKanban, +} from 'lucide-react'; +import { Button } from '../components/ui/button'; +import { + Tooltip, + TooltipContent, + TooltipTrigger, + TooltipProvider, +} from '../components/ui/tooltip'; +import { ThemeSwitcher } from '../components/theme-switcher'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { cn } from '../utils'; + +export interface LayoutProps extends React.HTMLAttributes {} + +export const Layout: React.FC> = ({ + children, +}) => { + const pathname = usePathname(); + + return ( +
+ +
+
+

Chrome AI

+ + {/* */} + + + + +
+ {children} +
+
+ ); +}; diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx deleted file mode 100644 index abdca72..0000000 --- a/app/components/markdown.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactMarkdown, { Options } from 'react-markdown'; - -export const MemoizedReactMarkdown: React.FC = React.memo( - ReactMarkdown, - (prevProps, nextProps) => - prevProps.children === nextProps.children && - prevProps.className === nextProps.className -); diff --git a/app/components/profile.tsx b/app/components/profile.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/app/components/prompt-card.tsx b/app/components/prompt-card.tsx deleted file mode 100644 index 062b378..0000000 --- a/app/components/prompt-card.tsx +++ /dev/null @@ -1,59 +0,0 @@ -'use client'; - -import React from 'react'; -import { Textarea } from './ui/textarea'; -import { Button } from './ui/button'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from './ui/select'; -import { ThemeSwitcher } from './theme-switcher'; - -export interface PromptCardProps { - onPrompt?: (message: string, template?: string) => void | Promise; -} - -export const PromptCard = React.forwardRef( - ({ onPrompt }, ref) => { - const [prompt, setPrompt] = React.useState(''); - - return ( -
-