Merge pull request #142 from wandb/feature/agent-mode

Feature/agent mode
wandb · May 25, 2024 · 908b7f7 · 908b7f7
2 parents 43edb01 + a810066
commit 908b7f7
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 46 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -23,13 +23,14 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/png" href="/favicon.png" />
 		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+		<link rel="manifest" href="/manifest.json" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta name="description" content="OpenUI" />
 		<meta
 			name="apple-mobile-web-app-status-bar-style"
 			content="black-translucent"
 		/>
-		<meta name="theme-color" content="rgb(217,87,155)" />
+		<meta name="theme-color" content="#12B5C7" />
 		<title>OpenUI by W&B</title>
 	</head>
 	<body>

diff --git a/frontend/package.json b/frontend/package.json
@@ -35,6 +35,7 @@
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-slider": "^1.1.2",
 		"@radix-ui/react-slot": "^1.0.2",
+		"@radix-ui/react-switch": "^1.0.3",
 		"@radix-ui/react-tooltip": "^1.0.7",
 		"@tailwindcss/typography": "^0.5.13",
 		"@tanstack/react-query": "^5.36.0",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,20 @@
+{
+	"name": "OpenUI by Weights & Biases",
+	"short_name": "OpenUI",
+	"display": "standalone",
+	"background_color": "#000000",
+	"theme_color": "#12B5C7",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"start_url": "/ai?app=pwa"
+}
diff --git a/frontend/src/api/openai.ts b/frontend/src/api/openai.ts
@@ -5,8 +5,14 @@ function host() {
 	const port = window.location.port ? `:${window.location.port}` : ''
 	return `${protocol}//${hostname}${port}`
 }
-
-const openai = new OpenAI({
+/* I patched OpenAI here so that users can use basic auth behind a proxy if they want */
+class MyOpenAI extends OpenAI {
+	// eslint-disable-next-line class-methods-use-this, @typescript-eslint/class-methods-use-this, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+	protected override authHeaders(_opts: any) {
+		return {}
+	}
+}
+const openai = new MyOpenAI({
 	apiKey: 'sk-fake',
 	baseURL: `${host()}/v1`,
 	dangerouslyAllowBrowser: true

diff --git a/frontend/src/components/FileUpload.tsx b/frontend/src/components/FileUpload.tsx
@@ -86,7 +86,7 @@ export default function FileUpload({
 				htmlFor='file-input'
 				className='relative mx-auto h-64 w-64 cursor-pointer rounded-lg bg-white p-4 text-center text-zinc-600 shadow-lg dark:bg-zinc-800'
 			>
-				<div className='center'>
+				<div className='center -mt-3'>
 					<img
 						src='/android-chrome-192x192.png'
 						className='inline-block w-24'

diff --git a/frontend/src/components/Settings.tsx b/frontend/src/components/Settings.tsx
@@ -21,17 +21,24 @@ import {
 	SelectValue
 } from 'components/ui/select'
 import { Slider } from 'components/ui/slider'
+import { Switch } from 'components/ui/switch'
 import { useAtom } from 'jotai'
 import type { ChangeEvent } from 'react'
 import { useEffect } from 'react'
-import { modelAtom, systemPromptAtom, temperatureAtom } from 'state'
+import {
+	beastModeAtom,
+	modelAtom,
+	systemPromptAtom,
+	temperatureAtom
+} from 'state'
 import { Textarea } from './ui/textarea'
 
 export default function Settings({ trigger }: { trigger: JSX.Element }) {
 	const { isPending, isError, error, data } = useQuery({
 		queryKey: ['models'],
 		queryFn: getModels
 	})
+	const [beastMode, setBeastMode] = useAtom(beastModeAtom)
 	const [model, setModel] = useAtom(modelAtom)
 	const [systemPrompt, setSystemPrompt] = useAtom(systemPromptAtom)
 	const [temperature, setTemperature] = useAtom(temperatureAtom)
@@ -55,12 +62,12 @@ export default function Settings({ trigger }: { trigger: JSX.Element }) {
 				<DialogHeader>
 					<DialogTitle>Settings</DialogTitle>
 					<DialogDescription>
-						Make changes to your settings or logout
+						Choose a different model, adjust settings, or logout
 					</DialogDescription>
 				</DialogHeader>
 				<div className='grid gap-4 py-4'>
-					<div className='grid grid-cols-4 items-center gap-4'>
-						<Label className='text-right' htmlFor='model'>
+					<div className='grid grid-cols-8 items-center gap-4'>
+						<Label className='col-span-2 text-right' htmlFor='model'>
 							Model
 						</Label>
 						<Select
@@ -116,21 +123,21 @@ export default function Settings({ trigger }: { trigger: JSX.Element }) {
 							) : undefined}
 						</Select>
 					</div>
-					<div className='grid grid-cols-4 items-center gap-4'>
-						<Label className='text-right' htmlFor='prompt'>
+					<div className='grid grid-cols-8 items-center gap-4'>
+						<Label className='col-span-2 text-right' htmlFor='prompt'>
 							System Prompt
 						</Label>
 						<Textarea
-							className='col-span-3'
+							className='col-span-6 whitespace-nowrap'
 							id='prompt'
 							onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
 								setSystemPrompt(event.target.value)
 							}
 							value={systemPrompt}
 						/>
 					</div>
-					<div className='grid grid-cols-4 items-center gap-4'>
-						<Label className='text-right' htmlFor='temperature'>
+					<div className='grid grid-cols-8 items-center gap-4'>
+						<Label className='col-span-2 text-right' htmlFor='temperature'>
 							Temperature
 						</Label>
 						<Slider
@@ -139,9 +146,26 @@ export default function Settings({ trigger }: { trigger: JSX.Element }) {
 							step={0.05}
 							onValueChange={val => setTemperature(val[0])}
 							value={[temperature]}
-							className='col-span-3'
+							className='col-span-2'
 							id='temperature'
 						/>
+						<div className='col-span-1'>{temperature.toFixed(2)}</div>
+					</div>
+					<div className='grid grid-cols-8 items-center gap-4'>
+						<Label className='col-span-2 text-right' htmlFor='beast'>
+							Agent Mode
+						</Label>
+						<Switch
+							className='-zoom-1 col-span-1'
+							name='beast'
+							disabled
+							checked={beastMode}
+							onCheckedChange={checked => setBeastMode(checked)}
+						/>
+						<div className='-ml-15 col-span-5 text-xs italic'>
+							Coming soon! Agent mode will make multiple calls to an LLM with
+							vision capabilities to iterate on a design.
+						</div>
 					</div>
 					<div className='mt-3 grid grid-cols-4 items-center gap-4'>
 						<div className='col-start-4 flex justify-end'>

diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
@@ -0,0 +1,28 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from 'react'
+
+import { cn } from 'lib/utils'
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+			className
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+			)}
+		/>
+	</SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+// eslint-disable-next-line import/prefer-default-export
+export { Switch }
diff --git a/frontend/src/pages/AI/index.tsx b/frontend/src/pages/AI/index.tsx
@@ -48,7 +48,11 @@ export default function LayoutWithSidebar() {
 
 	return (
 		<div className='mobile-safe-container flex overflow-hidden bg-secondary'>
-			<Head title={curItem.name ?? 'Create a new Element'} />
+			<Head
+				title={
+					curItem.name ? `${curItem.emoji} ${curItem.name}` : 'Create a new UI'
+				}
+			/>
 			<Register />
 			<div
 				className={cn(

diff --git a/frontend/src/state/index.ts b/frontend/src/state/index.ts
@@ -8,6 +8,7 @@ export const editedHTMLAtom = atom('')
 export const screenshotAtom = atom('')
 export const commentsAtom = atom<string[]>([])
 export const darkModeAtom = atom(false)
+export const beastModeAtom = atom(false)
 const framework = undefined
 export const convertFrameworkAtom = atom<Framework | undefined>(framework)
 export const selectedFrameworkAtom = atom<Framework>('html')
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -2,40 +2,11 @@
 import eslintPlugin from '@nabla/vite-plugin-eslint'
 import react from '@vitejs/plugin-react'
 import type { PluginOption } from 'vite'
-import { defineConfig, splitVendorChunkPlugin } from 'vite'
+import { defineConfig } from 'vite'
 import mkcert from 'vite-plugin-mkcert'
 import { VitePWA } from 'vite-plugin-pwa'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
-// Likely don't need this and was mucking with my build
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const pwaPlugin = VitePWA({
-	registerType: 'autoUpdate',
-	includeAssets: [
-		'favicon.png',
-		'robots.txt',
-		'apple-touch-icon.png',
-		'icons/*.svg',
-		'fonts/*.woff2'
-	],
-	manifest: {
-		theme_color: '#BD34FE',
-		icons: [
-			{
-				src: '/android-chrome-192x192.png',
-				sizes: '192x192',
-				type: 'image/png',
-				purpose: 'any maskable'
-			},
-			{
-				src: '/android-chrome-512x512.png',
-				sizes: '512x512',
-				type: 'image/png'
-			}
-		]
-	}
-})
-
 const inCodespace = process.env.GITHUB_CODESPACE_TOKEN !== undefined
 const plugins: PluginOption[] = [eslintPlugin()]
 // Don't listen on SSL in codespaces
@@ -72,7 +43,7 @@ export default defineConfig(({ mode }) => ({
 	},
 	plugins: [
 		tsconfigPaths(),
-		splitVendorChunkPlugin(),
+		VitePWA(),
 		react(),
 		...(mode === 'test' ? [] : plugins)
 	]