Merge pull request #165 from wandb/feature/i18n

Attempt to get i18n working

frontend/integration_tests/basic.spec.ts

@@ -19,9 +19,10 @@ test('test good flow', async ({ page }) => {
 	await page.getByRole('button', { name: 'Orange' }).click()
 	let iframe = await page.frameLocator('#version-0')
 	await expect(iframe.locator('h1')).toHaveText('Hello, world!')
+	// TODO: once we figure out how to get unsplash to work consistently...
 	await expect(iframe.locator('img')).toHaveAttribute(
 		'src',
-		/.*unsplash\.com.*/
+		/.*(unsplash|placehold)\.co.*/
 	)
 	const annotator = await page.$('#version-0')
 	await annotator?.screenshot({

frontend/package.json

@@ -62,6 +62,7 @@
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-i18next": "^14.1.2",
+		"i18next-browser-languagedetector": "^8.0.0",
 		"react-markdown": "^9.0.1",
 		"react-router-dom": "^6.23.1",
 		"react-syntax-highlighter": "^15.5.0",

frontend/src/components/Chat.tsx

@@ -20,6 +20,7 @@ import {
 } from 'lib/utils'
 import { CircleUser, ImageIcon } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import {
 	ItemWrapper,
@@ -56,7 +57,7 @@ export default function Chat({ isShared = false }: { isShared: boolean }) {
 		[rawItem, setRawItem]
 	)
 
-	// const { t } = useTranslation()
+	const { t } = useTranslation()
 	const [uiState, setUiState] = useAtom(uiStateAtom)
 	const uiTheme = useAtomValue(uiThemeAtom)
 	const theme = themes.find(th => th.name === uiTheme)
@@ -207,11 +208,11 @@ export default function Chat({ isShared = false }: { isShared: boolean }) {
 							/>
 						) : undefined}
 						<h1 className='mb-1 flex-row text-center text-2xl font-medium text-zinc-800 dark:text-zinc-300 md:text-3xl'>
-							Describe the UI you&apos;d like to generate.
+							{t('Chat Header')}
 						</h1>
 						{modelSupportsImages ? (
 							<h2 className='mb-4 text-center text-lg font-normal text-muted-foreground md:text-xl'>
-								Pro Tip: You can drag or paste a reference screenshot.
+								{t('Pro Tip')}
 							</h2>
 						) : undefined}
 					</div>

frontend/src/lib/i18n.ts

@@ -0,0 +1,45 @@
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+
+i18n
+	.use(LanguageDetector)
+	.use(initReactI18next)
+	.init({
+		resources: {
+			en: {
+				translation: {
+					'Chat Header': "Describe the UI you'd like to generate.",
+					'Pro Tip': 'Pro Tip: You can drag or paste a reference screenshot.'
+				}
+			},
+			ja: {
+				translation: {
+					'Chat Header': '生成したい UI について説明してください。',
+					'Pro Tip':
+						'ヒント: 参照したいスクリーンショットをドラッグ&ドロップできます。'
+				}
+			},
+			kr: {
+				translation: {
+					'Chat Header': '생성하고 싶은 UI에 대해 설명해주세요.',
+					'Pro Tip':
+						'프로 팁: 참조 스크린샷을 드래그 또는 붙여넣기할 수 있습니다.'
+				}
+			}
+		},
+		fallbackLng: 'en',
+		interpolation: {
+			escapeValue: false
+		}
+	})
+	// eslint-disable-next-line unicorn/prefer-top-level-await
+	.then(
+		() => {
+			const userLang = navigator.language
+			console.log('I18n initialized', userLang)
+		},
+		(error: unknown) => {
+			console.error('I18n error', error)
+		}
+	)

frontend/src/main.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import App from 'App'
+import 'lib/i18n'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'