Random fixes, new demo video

wandb · Jun 21, 2024 · 8772323 · 8772323
1 parent e611d60
commit 8772323
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ The following command would forward the API keys from the specified shell enviro
 ```bash
 export ANTHROPIC_API_KEY=xxx
 export OPENAI_API_KEY=xxx
-docker run --name openui -p 7878:7878 -e OPENAI_API_KEY -e ANTHROPIC_API_KEY -e OLLAMA_HOST=http://host.docker.internal:11434 gchr.io/wandb/openui
+docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY -e ANTHROPIC_API_KEY -e OLLAMA_HOST=http://host.docker.internal:11434 gchr.io/wandb/openui
 ```
 
 Now you can goto [http://localhost:7878](http://localhost:7878) and generate new UI's!

diff --git a/assets/demo.gif b/assets/demo.gif
diff --git a/backend/openui/dist/annotator/index.html b/backend/openui/dist/annotator/index.html
@@ -621,7 +621,9 @@ <h3 class="text-base font-semibold">How do you want this to change?</h3>
 						return
 					}
 					const isDark = document.documentElement.classList.contains('dark')
-					const newModeDark = event.data.mode === 'dark' || !isDark
+					const newModeDark =
+						event.data.mode === 'dark' ||
+						(!isDark && event.data.mode !== 'light')
 					if (newModeDark) {
 						document.documentElement.classList.add('dark')
 					} else {

diff --git a/frontend/public/annotator/index.html b/frontend/public/annotator/index.html
@@ -621,7 +621,9 @@ <h3 class="text-base font-semibold">How do you want this to change?</h3>
 						return
 					}
 					const isDark = document.documentElement.classList.contains('dark')
-					const newModeDark = event.data.mode === 'dark' || !isDark
+					const newModeDark =
+						event.data.mode === 'dark' ||
+						(!isDark && event.data.mode !== 'light')
 					if (newModeDark) {
 						document.documentElement.classList.add('dark')
 					} else {

diff --git a/frontend/src/api/openai.ts b/frontend/src/api/openai.ts
@@ -68,6 +68,7 @@ Prefer using these colors when appropriate, for example:
 \`\`\`
 
 *Implementation Rules:*
+- Only implement elements within the \`<body>\` tag, don't bother with \`<html>\` or \`<head>\` tags.
 - Avoid using SVGs directly. Instead, use the \`<img>\` tag with a descriptive title as the alt attribute and add .svg to the placehold.co url, for example:
 
 \`\`\`html

diff --git a/frontend/src/components/Settings.tsx b/frontend/src/components/Settings.tsx
@@ -134,7 +134,7 @@ export default function Settings({ trigger }: { trigger: JSX.Element }) {
 					<h2 className='font-bold'>Settings</h2>
 					<p className='flex'>
 						<span className='font-semibold'>Model:</span>{' '}
-						{slugToNiceName(model, false)}
+						{slugToNiceName(model.split('/').at(-1), false)}
 					</p>
 					<p>
 						<span className='font-semibold'>Temperature:</span> {temperature}

diff --git a/frontend/src/components/VersionPreview.tsx b/frontend/src/components/VersionPreview.tsx
@@ -1,13 +1,16 @@
 import { TrashIcon } from '@radix-ui/react-icons'
 import { useVersion } from 'hooks'
 import { useAtomValue } from 'jotai'
+import { themes } from 'lib/themes'
 import { cn } from 'lib/utils'
 import { nanoid } from 'nanoid'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
 	darkModeAtom,
 	historySidebarStateAtom,
 	imageDB,
+	uiStateAtom,
+	uiThemeAtom,
 	useSaveHistory,
 	type ItemWrapper
 } from 'state'
@@ -27,6 +30,10 @@ export default function VersionPreview({
 	const iframeRef = useRef<HTMLIFrameElement | null>(null)
 	const [isFrameReady, setIsFrameReady] = useState(false)
 	const isVisible = useAtomValue(historySidebarStateAtom) === 'versions'
+	const uiState = useAtomValue(uiStateAtom)
+	const isRendering = uiState.rendering
+	const uiTheme = useAtomValue(uiThemeAtom)
+	const theme = themes.find(t => t.name === uiTheme) ?? themes[0]
 	const [html, setHtml] = useState<string | undefined>()
 	const id = useMemo(() => nanoid(8), [])
 	const saveHistory = useSaveHistory()
@@ -50,7 +57,11 @@ export default function VersionPreview({
 				'*'
 			)
 		}
-	}, [darkMode, previewDarkMode])
+		iframeRef.current?.contentWindow?.postMessage(
+			{ action: 'theme', theme },
+			'*'
+		)
+	}, [darkMode, previewDarkMode, theme])
 
 	useEffect(() => {
 		item
@@ -80,12 +91,17 @@ export default function VersionPreview({
 					html,
 					js: [],
 					darkMode: previewDarkMode === 'dark',
-					action: 'hydrate'
+					action: 'hydrate',
+					rendering: isRendering
 				},
 				'*'
 			)
+			iframeRef.current?.contentWindow?.postMessage(
+				{ action: 'theme', theme },
+				'*'
+			)
 		}
-	}, [isFrameReady, html, isVisible, previewDarkMode, id])
+	}, [isFrameReady, html, isVisible, previewDarkMode, id, isRendering, theme])
 
 	const W = 1524
 	const H = 960

diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts
@@ -1,5 +1,5 @@
 export const EXAMPLES = [
-	// 'Make me a flashy landing page for an AI SaaS startup.  Use some gradients and animations on hover.  Come up with an exciting name and create a navigation bar up top.',
+	'Make me a flashy landing page for an AI SaaS startup. Come up with an exciting name and create a navigation bar up top.',
 	'Create a responsive navigation bar with dropdown menus, using a dark theme.',
 	'I need a user profile card with an avatar, name, and social media links in Tailwind CSS.',
 	'Generate a modal popup for user feedback, including text area and submit button.',

diff --git a/frontend/src/lib/markdown.ts b/frontend/src/lib/markdown.ts
@@ -70,14 +70,14 @@ export function parseMarkdown(
 	}
 	/* This is supposed to prevent us from writing frontmatter to the UI 
 		 TODO: this is brittle, and doesn't seem to work consistently :/
-	*/
 	if (rendering && cleanMarkdown.slice(0, 1000).includes('---')) {
 		const offset = cleanMarkdown.split('---').slice(0, -1).join('---').length
 		cleanMarkdown = cleanMarkdown.slice(offset)
 		if (cleanMarkdown.slice(0, 100).includes('---')) {
 			cleanMarkdown = ''
 		}
 	}
+	*/
 
 	const parsed = unified().use(remarkParse).parse(cleanMarkdown)
 
@@ -103,7 +103,7 @@ export function parseMarkdown(
 		!rendering &&
 		htmlBlocks.filter(h => h.value.trim() !== '').length === 0
 	) {
-		console.warn('No HTML found, parse results:', parsed)
+		console.warn('No HTML found, parse results:', parsed.children)
 		htmlBlocks = [
 			{
 				type: 'code',

diff --git a/frontend/src/state/atoms/history.ts b/frontend/src/state/atoms/history.ts
@@ -497,20 +497,34 @@ export const useSaveHistory = () => {
 					}
 					safeValue = JSON.stringify(parsed)
 				}
+				// TODO: move this shit to indexed DB!!!
 				for (const key of Object.keys(parsed.historyMap)) {
 					const item = parsed.historyMap[key] as HistoryItem
 					const html = item.html ?? ''
 					if (html !== '') {
 						delete item.html
-						localStorage.setItem(`${key}.html`, html)
+						try {
+							localStorage.setItem(`${key}.html`, html)
+						} catch (error) {
+							console.error('Error saving HTML', error)
+						}
 					}
 					const markdown = item.markdown ?? ''
 					if (markdown !== '') {
 						delete item.markdown
-						localStorage.setItem(`${key}.md`, markdown)
+						try {
+							localStorage.setItem(`${key}.md`, markdown)
+						} catch (error) {
+							console.error('Error saving markdown', error)
+						}
 					}
 				}
-				localStorage.setItem('serializedHistory', safeValue)
+				console.log('Saving history', safeValue.length)
+				try {
+					localStorage.setItem('serializedHistory', safeValue)
+				} catch (error) {
+					console.error('Error saving history', error)
+				}
 			}
 		})
 	}

diff --git a/frontend/src/state/index.ts b/frontend/src/state/index.ts
@@ -21,7 +21,8 @@ export const historySidebarStateAtom = atom<'closed' | 'history' | 'versions'>(
 export const screenshotAtom = atom('')
 export const facetsAtom = atomWithStorage<string[]>('facets', [])
 export const commentsAtom = atom<string[]>([])
-export const uiThemeAtom = atomWithStorage<string>('uiTheme', 'zinc')
+const theme = undefined
+export const uiThemeAtom = atomWithStorage<string | undefined>('uiTheme', theme)
 export const darkModeAtom = atomWithStorage<string>('darkMode', 'system')
 export const beastModeAtom = atom(false)
 export const draggingAtom = atom(false)