Add Simplified Chinese localization for UI-TARS Desktop

apps/ui-tars/src/renderer/src/components/AlertDialog/delSessionDialog.tsx

@@ -12,6 +12,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@renderer/components/ui/alert-dialog';
+import { useI18n } from '../../i18n';
 
 interface DeleteSessionDialogProps {
   open: boolean;
@@ -24,23 +25,24 @@ export function DeleteSessionDialog({
   onOpenChange,
   onConfirm,
 }: DeleteSessionDialogProps) {
+  const { t } = useI18n();
+
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Delete Session</AlertDialogTitle>
+          <AlertDialogTitle>{t('deleteSession')}</AlertDialogTitle>
           <AlertDialogDescription>
-            The current session is running. Navigating away will forcibly stop
-            the session. Do you still want to proceed?
+            {t('deleteSessionDescription')}
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
           <AlertDialogAction
             className="bg-red-500 hover:bg-red-600"
             onClick={onConfirm}
           >
-            Delete
+            {t('delete')}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

apps/ui-tars/src/renderer/src/components/AlertDialog/freeTrialDialog.tsx

@@ -15,6 +15,7 @@ import {
 } from '@renderer/components/ui/alert-dialog';
 import { Checkbox } from '@renderer/components/ui/checkbox';
 import { Label } from '@renderer/components/ui/label';
+import { useI18n } from '../../i18n';
 
 interface FreeTrialDialog {
   open: boolean;
@@ -24,6 +25,7 @@ interface FreeTrialDialog {
 
 export const FreeTrialDialog = memo(
   ({ open, onOpenChange, onConfirm }: FreeTrialDialog) => {
+    const { t } = useI18n();
     const [dontShowAgain, setDontShowAgain] = useState(false);
 
     const onCheck = (status: boolean) => {
@@ -41,41 +43,29 @@ export const FreeTrialDialog = memo(
       <AlertDialog open={open} onOpenChange={onOpenChange}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Free Trial Service Agreement</AlertDialogTitle>
+            <AlertDialogTitle>{t('freeTrialAgreement')}</AlertDialogTitle>
             <AlertDialogDescription className="hidden" />
             <div className="text-muted-foreground text-sm">
-              <p>
-                As part of our research, we offer a 30-minute free trial of our
-                cloud service powered by Volcano Engine, where you can
-                experience UI-TARS with remote computer and browser operations
-                without purchasing model service and computing resources.
-              </p>
-              <p className="my-4">
-                <b>
-                  By agreeing to use this service, your data will be transmitted
-                  to the servers. Please note that.
-                </b>{' '}
-                In compliance with relevant regulations, you should avoid
-                entering any sensitive personal information. All records on the
-                servers will be exclusively used for academic research purposes
-                and will not be utilized for any other activities.
-              </p>
+              <p>{t('freeTrialIntro')}</p>
               <p className="my-4">
-                Thank you for your support of the UI-TARS research project!
+                <b>{t('freeTrialDataNotice')}</b> {t('freeTrialDataCompliance')}
               </p>
+              <p className="my-4">{t('freeTrialThanks')}</p>
               <div className="flex items-center gap-2 mb-4 text-foreground">
                 <Checkbox
                   id="free"
                   checked={dontShowAgain}
                   onCheckedChange={onCheck}
                 />
-                <Label htmlFor="free">I agree. Don't show this again</Label>
+                <Label htmlFor="free">{t('freeTrialDontShow')}</Label>
               </div>
             </div>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={onClick}>Agree</AlertDialogAction>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={onClick}>
+              {t('agree')}
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>

apps/ui-tars/src/renderer/src/components/AlertDialog/navDialog.tsx

@@ -14,6 +14,7 @@ import {
   AlertDialogTitle,
 } from '@renderer/components/ui/alert-dialog';
 import { memo } from 'react';
+import { useI18n } from '../../i18n';
 
 interface NavDialogStore {
   isOpen: boolean;
@@ -37,23 +38,24 @@ export const useNavDialog = create<NavDialogStore>((set) => ({
 
 export const NavDialog = memo(
   ({ open, onOpenChange, onConfirm }: NavDialogProps) => {
+    const { t } = useI18n();
+
     return (
       <AlertDialog open={open} onOpenChange={onOpenChange}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Navigation Alert</AlertDialogTitle>
+            <AlertDialogTitle>{t('navigationAlert')}</AlertDialogTitle>
             <AlertDialogDescription>
-              The current instance is running. Navigating away will forcibly
-              stop the instance. Do you still want to proceed?
+              {t('navigationAlertDescription')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
             <AlertDialogAction
               className="bg-red-500 hover:bg-red-600"
               onClick={onConfirm}
             >
-              Confirm
+              {t('confirm')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

apps/ui-tars/src/renderer/src/components/AlertDialog/terminateDialog.tsx

@@ -13,6 +13,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@renderer/components/ui/alert-dialog';
+import { useI18n } from '../../i18n';
 
 interface TerminateDialogProps {
   open: boolean;
@@ -22,25 +23,24 @@ interface TerminateDialogProps {
 
 export const TerminateDialog = memo(
   ({ open, onOpenChange, onConfirm }: TerminateDialogProps) => {
+    const { t } = useI18n();
+
     return (
       <AlertDialog open={open} onOpenChange={onOpenChange}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>
-              Terminate the current instance ?
-            </AlertDialogTitle>
+            <AlertDialogTitle>{t('terminateCurrentInstance')}</AlertDialogTitle>
             <AlertDialogDescription>
-              After termination, the current remote instance will be reclaimed,
-              and the task will be paused
+              {t('terminateDescription')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
             <AlertDialogAction
               className="bg-red-500 hover:bg-red-600"
               onClick={onConfirm}
             >
-              Terminate
+              {t('terminate')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

apps/ui-tars/src/renderer/src/components/ChatInput/index.tsx

@@ -26,6 +26,7 @@ import { useSession } from '@renderer/hooks/useSession';
 
 import { Operator } from '@main/store/types';
 import { useSetting } from '../../hooks/useSetting';
+import { useI18n } from '../../i18n';
 
 const ChatInput = ({
   operator,
@@ -38,6 +39,7 @@ const ChatInput = ({
   disabled: boolean;
   checkBeforeRun?: () => Promise<boolean>;
 }) => {
+  const { t } = useI18n();
   const {
     status,
     instructions: savedInstructions,
@@ -187,10 +189,7 @@ const ChatInput = ({
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p className="whitespace-pre-line">
-                send last instructions when you done for ui-tars&apos;s
-                &apos;CALL_USER&apos;
-              </p>
+              <p className="whitespace-pre-line">{t('callUserTooltip')}</p>
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
@@ -221,7 +220,7 @@ const ChatInput = ({
                 ? `${savedInstructions}`
                 : running && lastHumanMessage && messages?.length > 1
                   ? lastHumanMessage
-                  : 'What can I do for you today?'
+                  : t('chatPlaceholder')
             }
             className="min-h-[120px] rounded-2xl resize-none px-4 pb-16" // 调整内边距
             value={localInstructions}

apps/ui-tars/src/renderer/src/components/Settings/category/chat.tsx

@@ -25,6 +25,7 @@ import {
   SelectValue,
 } from '@renderer/components/ui/select';
 import { Input } from '@renderer/components/ui/input';
+import { useI18n } from '../../../i18n';
 
 const formSchema = z.object({
   language: z.enum(['en', 'zh']),
@@ -33,6 +34,7 @@ const formSchema = z.object({
 });
 
 export function ChatSettings() {
+  const { t } = useI18n();
   const { settings, updateSetting } = useSetting();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -97,17 +99,15 @@ export function ChatSettings() {
             render={({ field }) => {
               return (
                 <FormItem>
-                  <FormLabel>Language</FormLabel>
-                  <FormDescription>
-                    Control the language used in LLM conversations
-                  </FormDescription>
+                  <FormLabel>{t('language')}</FormLabel>
+                  <FormDescription>{t('languageDescription')}</FormDescription>
                   <Select onValueChange={field.onChange} value={field.value}>
                     <SelectTrigger>
-                      <SelectValue placeholder="Select language" />
+                      <SelectValue placeholder={t('selectLanguage')} />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="en">English</SelectItem>
-                      <SelectItem value="zh">中文</SelectItem>
+                      <SelectItem value="en">{t('english')}</SelectItem>
+                      <SelectItem value="zh">{t('chinese')}</SelectItem>
                     </SelectContent>
                   </Select>
                 </FormItem>
@@ -121,10 +121,8 @@ export function ChatSettings() {
               // console.log('field', field);
               return (
                 <FormItem>
-                  <FormLabel>Max Loop</FormLabel>
-                  <FormDescription>
-                    Enter a number between 25-200
-                  </FormDescription>
+                  <FormLabel>{t('maxLoop')}</FormLabel>
+                  <FormDescription>{t('maxLoopDescription')}</FormDescription>
                   <FormControl>
                     <Input
                       type="number"
@@ -143,12 +141,12 @@ export function ChatSettings() {
             name="loopIntervalInMs"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Loop Wait Time (ms)</FormLabel>
-                <FormDescription>Enter a number between 0-3000</FormDescription>
+                <FormLabel>{t('loopWaitTime')}</FormLabel>
+                <FormDescription>{t('loopWaitDescription')}</FormDescription>
                 <FormControl>
                   <Input
                     type="number"
-                    placeholder="Enter a number between 0-3000"
+                    placeholder={t('loopWaitDescription')}
                     {...field}
                     value={field.value === 0 ? '' : field.value}
                     onChange={(e) => field.onChange(Number(e.target.value))}

apps/ui-tars/src/renderer/src/components/Settings/category/general.tsx

@@ -5,8 +5,10 @@ import { api } from '@/renderer/src/api';
 import { toast } from 'sonner';
 
 import { REPO_OWNER, REPO_NAME } from '@main/shared/constants';
+import { useI18n } from '../../../i18n';
 
 export const GeneralSettings = () => {
+  const { t } = useI18n();
   const [updateLoading, setUpdateLoading] = useState(false);
   const [updateDetail, setUpdateDetail] = useState<{
     currentVersion: string;
@@ -28,10 +30,12 @@ export const GeneralSettings = () => {
         });
         return;
       } else if (!detail.isPackaged) {
-        toast.info('Unpackaged version does not support update check!');
+        toast.info(t('unpackagedNoUpdate'));
       } else {
-        toast.success('No update available', {
-          description: `current version: ${detail.currentVersion} is the latest version`,
+        toast.success(t('noUpdateAvailable'), {
+          description: t('currentVersionLatest', {
+            version: detail.currentVersion,
+          }),
           position: 'top-right',
           richColors: true,
         });
@@ -54,7 +58,7 @@ export const GeneralSettings = () => {
         <RefreshCcw
           className={`h-4 w-4 mr-2 ${updateLoading ? 'animate-spin' : ''}`}
         />
-        {updateLoading ? 'Checking...' : 'Check Updates'}
+        {updateLoading ? t('checking') : t('checkUpdates')}
       </Button>
       {updateDetail?.version && (
         <div className="text-sm text-gray-500">
@@ -63,7 +67,7 @@ export const GeneralSettings = () => {
       )}
       {updateDetail?.link && (
         <div className="text-sm text-gray-500">
-          Release Notes:{' '}
+          {t('releaseNotes')}{' '}
           <a
             href={updateDetail.link}
             target="_blank"

apps/ui-tars/src/renderer/src/components/Settings/category/localBrowser.tsx

@@ -28,12 +28,14 @@ import { SearchEngineForSettings } from '@/main/store/types';
 import googleIcon from '@resources/icons/google-color.svg?url';
 import bingIcon from '@resources/icons/bing-color.svg?url';
 import baiduIcon from '@resources/icons/baidu-color.svg?url';
+import { useI18n } from '../../../i18n';
 
 const formSchema = z.object({
   searchEngineForBrowser: z.nativeEnum(SearchEngineForSettings),
 });
 
 export function LocalBrowserSettings() {
+  const { t } = useI18n();
   const { settings, updateSetting } = useSetting();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -82,11 +84,11 @@ export function LocalBrowserSettings() {
             name="searchEngineForBrowser"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Default Search Engine:</FormLabel>
+                <FormLabel>{t('defaultSearchEngine')}</FormLabel>
                 <Select onValueChange={field.onChange} value={field.value}>
                   <FormControl>
                     <SelectTrigger className="w-[124px]">
-                      <SelectValue placeholder="Select a search engine" />
+                      <SelectValue placeholder={t('selectSearchEngine')} />
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>

apps/ui-tars/src/renderer/src/components/Settings/category/report.tsx

@@ -17,6 +17,7 @@ import {
   FormMessage,
 } from '@renderer/components/ui/form';
 import { Input } from '@renderer/components/ui/input';
+import { useI18n } from '../../../i18n';
 
 const formSchema = z.object({
   reportStorageBaseUrl: z.string().optional(),
@@ -28,6 +29,7 @@ export interface VLMSettingsRef {
 }
 
 export function ReportSettings() {
+  const { t } = useI18n();
   const { settings, updateSetting } = useSetting();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -85,7 +87,7 @@ export function ReportSettings() {
             name="reportStorageBaseUrl"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Report Storage Base URL</FormLabel>
+                <FormLabel>{t('reportStorageBaseUrl')}</FormLabel>
                 <FormControl>
                   <Input
                     placeholder="https://your-report-storage-endpoint.com/upload"
@@ -102,7 +104,7 @@ export function ReportSettings() {
             name="utioBaseUrl"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>UTIO Base URL</FormLabel>
+                <FormLabel>{t('utioBaseUrl')}</FormLabel>
                 <FormControl>
                   <Input
                     placeholder="https://your-utio-endpoint.com/collect"