Rename project to xpaintai_zh in package.json and metadata.json; integrate translation support in various components and hooks

App.tsx

@@ -6,6 +6,8 @@ import ZoomSlider from './components/ZoomSlider';
 import SettingsPanel from './components/SettingsPanel';
 import ConfirmModal from './components/ConfirmModal';
 import { DEFAULT_AI_API_ENDPOINT } from './constants';
+import { getTranslator } from './translations';
+import { TFunction } from './types';
 
 // Custom Hooks
 import { useToasts } from './hooks/useToasts';
@@ -16,6 +18,8 @@ import { useFullscreen } from './hooks/useFullscreen';
 import { useConfirmModal } from './hooks/useConfirmModal';
 import { useCanvasFileUtils } from './hooks/useCanvasFileUtils';
 
+const t: TFunction = getTranslator();
+
 const App: React.FC = () => {
   // Core UI States
   const [zoomLevel, setZoomLevel] = useState<number>(0.5);
@@ -53,8 +57,8 @@ const App: React.FC = () => {
     effectivePenColor,
   } = useDrawingTools();
 
-  const { isFullscreenActive, toggleFullscreen } = useFullscreen(showToast);
-  const { confirmModalInfo, requestConfirmation, closeConfirmModal } = useConfirmModal();
+  const { isFullscreenActive, toggleFullscreen } = useFullscreen(showToast, t);
+  const { confirmModalInfo, requestConfirmation, closeConfirmModal } = useConfirmModal(t);
 
   const {
     handleLoadImageFile,
@@ -66,6 +70,7 @@ const App: React.FC = () => {
     historyActions: { updateCanvasState },
     uiActions: { showToast, setZoomLevel },
     confirmModalActions: { requestConfirmation },
+    t,
   });
 
   const {
@@ -93,6 +98,7 @@ const App: React.FC = () => {
     aiDimensionsMode,
     currentCanvasWidth: canvasWidth, // Pass current canvas dimensions
     currentCanvasHeight: canvasHeight, // Pass current canvas dimensions
+    t,
   });
   
   const handlePromptChange = (newPrompt: string) => {
@@ -116,8 +122,8 @@ const App: React.FC = () => {
                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
             </svg>
-            <p className="text-2xl font-semibold text-slate-700">Loading Your Canvas...</p>
-            <p className="text-sm text-slate-500 mt-1">Getting things ready!</p>
+            <p className="text-2xl font-semibold text-slate-700">{t('loadingCanvasMessage')}</p>
+            <p className="text-sm text-slate-500 mt-1">{t('loadingCanvasSubMessage')}</p>
         </div>
       </div>
     );
@@ -144,6 +150,7 @@ const App: React.FC = () => {
         isMagicUploading={isMagicUploading}
         canShare={canShare}
         onToggleSettings={handleToggleSettingsPanel}
+        t={t}
       />
       <main className="flex-grow grid place-items-center p-4 md:p-6 w-full mt-4 mb-4 overflow-auto">
         <div 
@@ -152,7 +159,7 @@ const App: React.FC = () => {
                 transformOrigin: 'top left',
                 transition: 'transform 0.1s ease-out'
             }}
-            aria-label={`Canvas zoomed to ${Math.round(zoomLevel * 100)}%`}
+            aria-label={t('zoomAria', { percentage: Math.round(zoomLevel * 100) })}
         >
             {currentDataURL ? (
             <CanvasComponent
@@ -165,13 +172,14 @@ const App: React.FC = () => {
                 canvasPhysicalWidth={canvasWidth}
                 canvasPhysicalHeight={canvasHeight}
                 zoomLevel={zoomLevel}
+                t={t}
             />
             ) : ( 
             <div 
                 style={{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }} 
                 className="border-2 border-slate-300 rounded-lg shadow-xl bg-white flex justify-center items-center"
             >
-                <p className="text-slate-500">Initializing Canvas...</p>
+                <p className="text-slate-500">{t('initializingCanvas')}</p>
             </div>
             )}
         </div>
@@ -190,6 +198,7 @@ const App: React.FC = () => {
           isAsking={isAskingAi}
           error={aiEditError}
           askUrl={askUrl}
+          t={t}
         />
       )}
 
@@ -197,6 +206,7 @@ const App: React.FC = () => {
         <ZoomSlider 
             zoomLevel={zoomLevel} 
             onZoomChange={setZoomLevel} 
+            t={t}
         />
       )}
 
@@ -217,6 +227,7 @@ const App: React.FC = () => {
             currentCanvasWidth={canvasWidth}
             currentCanvasHeight={canvasHeight}
             onCanvasSizeChange={handleCanvasSizeChange}
+            t={t}
         />
       )}
       

components/AiEditModal.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { MagicSparkleIcon, CloseIcon, QuestionMarkIcon } from './icons';
+import { TFunction } from '../types';
 
 interface AiEditModalProps {
   isOpen: boolean;
@@ -13,6 +14,7 @@ interface AiEditModalProps {
   isAsking: boolean;
   error: string | null;
   askUrl: string | null;
+  t: TFunction;
 }
 
 const AiEditModal: React.FC<AiEditModalProps> = ({
@@ -27,6 +29,7 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
   isAsking,
   error,
   askUrl,
+  t,
 }) => {
   const iframeContainerRef = useRef<HTMLDivElement>(null);
   
@@ -49,11 +52,11 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
     >
       <div className="bg-white rounded-lg shadow-2xl p-6 w-full max-w-lg transform transition-all max-h-[calc(100vh-5rem)] overflow-y-auto">
         <div className="flex justify-between items-center mb-4">
-          <h2 id="ai-edit-modal-title" className="text-xl font-semibold text-slate-700">Edit or Ask about Image with AI</h2>
+          <h2 id="ai-edit-modal-title" className="text-xl font-semibold text-slate-700">{t('aiModalTitle')}</h2>
           <button
             onClick={onClose}
             className="text-slate-400 hover:text-slate-600 transition-colors"
-            aria-label="Close AI edit modal"
+            aria-label={t('closeAiModalAria')}
             disabled={isAnyLoading}
           >
             <CloseIcon className="w-6 h-6" />
@@ -70,13 +73,13 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
 
         <div className="mb-4">
           <label htmlFor="aiPrompt" className="block text-sm font-medium text-slate-700 mb-1">
-            Describe what you want to change, or ask a question:
+            {t('aiPromptLabel')}
           </label>
           <textarea
             id="aiPrompt"
             value={prompt}
             onChange={(e) => onPromptChange(e.target.value)}
-            placeholder="e.g., 'make the cat wear a party hat' or 'what is in this image?'"
+            placeholder={t('aiPromptPlaceholder')}
             className="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-xl h-[200px]"
             disabled={isAnyLoading}
             aria-describedby={error ? "ai-edit-error" : undefined}
@@ -85,7 +88,7 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
 
         {error && (
           <div id="ai-edit-error" className="mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-md text-sm" role="alert">
-            <p className="font-semibold">Error:</p>
+            <p className="font-semibold">{t('errorPrefix')}</p>
             <p>{error}</p>
           </div>
         )}
@@ -102,12 +105,12 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
                   <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                   <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
-                Asking...
+                {t('aiAsking')}
               </>
             ) : (
               <>
                 <QuestionMarkIcon className="w-4 h-4 mr-1" />
-                Ask
+                {t('aiAsk')}
               </>
             )}
           </button>
@@ -122,12 +125,12 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
                   <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                   <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
-                Generating...
+                {t('aiGenerating')}
               </>
             ) : (
               <>
                 <MagicSparkleIcon className="w-4 h-4 mr-1" />
-                Generate Image
+                {t('aiGenerateImage')}
               </>
             )}
           </button>

components/CanvasComponent.tsx

@@ -1,4 +1,5 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { TFunction } from '../types';
 
 interface CanvasComponentProps {
   penColor: string;
@@ -9,6 +10,7 @@ interface CanvasComponentProps {
   canvasPhysicalWidth: number;
   canvasPhysicalHeight: number;
   zoomLevel: number; // New prop
+  t: TFunction;
 }
 
 const CanvasComponent: React.FC<CanvasComponentProps> = ({
@@ -20,6 +22,7 @@ const CanvasComponent: React.FC<CanvasComponentProps> = ({
   canvasPhysicalWidth,
   canvasPhysicalHeight,
   zoomLevel, // Use zoomLevel
+  t,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isDrawing, setIsDrawing] = useState(false);
@@ -194,7 +197,7 @@ const CanvasComponent: React.FC<CanvasComponentProps> = ({
       // Style for imageRendering is good for pixel art, ensure it doesn't conflict with scaling needs.
       // Visual scaling is handled by the parent div's transform.
       style={{ imageRendering: 'pixelated' }} 
-      aria-label="Drawing canvas"
+      aria-label={t('drawingCanvas')}
     />
   );
 };

components/SettingsPanel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CloseIcon, FullscreenEnterIcon, FullscreenExitIcon } from './icons'; // Import fullscreen icons
 import { AiImageQuality, AiDimensionsMode } from '../hooks/useAiFeatures';
+import { TFunction } from '../types';
 
 interface SettingsPanelProps {
   isOpen: boolean;
@@ -18,6 +19,7 @@ interface SettingsPanelProps {
   currentCanvasWidth: number;
   currentCanvasHeight: number;
   onCanvasSizeChange: (width: number, height: number) => void;
+  t: TFunction;
 }
 
 const CANVAS_SIZE_OPTIONS = [
@@ -31,14 +33,14 @@ const CANVAS_SIZE_OPTIONS = [
 
 const AI_API_OPTIONS = [
     {
-        label: 'Pollinations AI',
+        labelKey: 'pollinationsApi',
         value: 'https://rpfor.deno.dev/proxy?url=https://image.pollinations.ai/prompt/{prompt}?nologo=true&model=gptimage&image={imgurl.url}&quality={quality}{size_params}'
     },
     {
-        label: 'Gemini Simple Get',
+        labelKey: 'geminiSimpleGetApi',
         value: 'https://geminisimpleget.deno.dev/prompt/{prompt}?image={imgurl.url}'
     }
-];
+] as const;
 
 
 const SettingsPanel: React.FC<SettingsPanelProps> = ({
@@ -57,13 +59,14 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
   currentCanvasWidth,
   currentCanvasHeight,
   onCanvasSizeChange,
+  t,
 }) => {
   if (!isOpen) return null;
 
   const qualityOptions: { label: string; value: AiImageQuality }[] = [
-    { label: 'Low', value: 'low' },
-    { label: 'Medium', value: 'medium' },
-    { label: 'High (HD)', value: 'hd' },
+    { label: t('qualityLow'), value: 'low' },
+    { label: t('qualityMedium'), value: 'medium' },
+    { label: t('qualityHigh'), value: 'hd' },
   ];
 
   const handleSizeSelection = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -86,12 +89,12 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
       <div className="bg-white rounded-lg shadow-2xl p-6 w-full max-w-md transform transition-all overflow-y-auto max-h-[90vh]">
         <div className="flex justify-between items-center mb-6">
           <h2 id="settings-panel-title" className="text-xl font-semibold text-slate-800">
-            Application Settings
+            {t('settingsTitle')}
           </h2>
           <button
             onClick={onClose}
             className="text-slate-400 hover:text-slate-600 transition-colors"
-            aria-label="Close settings panel"
+            aria-label={t('closeSettingsAria')}
           >
             <CloseIcon className="w-6 h-6" />
           </button>
@@ -99,12 +102,12 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
 
         {/* Interface Settings */}
         <div className="mb-6">
-          <h3 className="text-md font-medium text-slate-700 mb-2">Interface</h3>
+          <h3 className="text-md font-medium text-slate-700 mb-2">{t('interface')}</h3>
           <div className="space-y-3">
             {/* Zoom Slider Toggle */}
             <div className="flex items-center justify-between bg-slate-50 p-3 rounded-md border border-slate-200">
               <label htmlFor="showZoomSliderToggle" className="text-sm text-slate-600">
-                Show Zoom Slider
+                {t('showZoomSlider')}
               </label>
               <button
                   id="showZoomSliderToggle"
@@ -115,7 +118,7 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
                   showZoomSlider ? 'bg-blue-600' : 'bg-slate-300'
                   }`}
               >
-                  <span className="sr-only">Toggle Zoom Slider Visibility</span>
+                  <span className="sr-only">{t('toggleZoomSliderAria')}</span>
                   <span
                   className={`inline-block w-4 h-4 transform bg-white rounded-full transition-transform duration-200 ease-in-out ${
                       showZoomSlider ? 'translate-x-6' : 'translate-x-1'
@@ -129,14 +132,14 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
                 <button
                     onClick={onToggleFullscreen}
                     className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
-                    aria-label={isFullscreenActive ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+                    aria-label={isFullscreenActive ? t('exitFullscreenAria') : t('fullscreenAria')}
                 >
                     {isFullscreenActive ? (
                         <FullscreenExitIcon className="w-5 h-5 mr-2" />
                     ) : (
                         <FullscreenEnterIcon className="w-5 h-5 mr-2" />
                     )}
-                    {isFullscreenActive ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+                    {isFullscreenActive ? t('exitFullscreen') : t('enterFullscreen')}
                 </button>
             </div>
           </div>
@@ -144,10 +147,10 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
 
         {/* Canvas Dimensions Settings */}
         <div className="mb-6">
-          <h3 className="text-md font-medium text-slate-700 mb-2">Canvas Dimensions</h3>
+          <h3 className="text-md font-medium text-slate-700 mb-2">{t('canvasDimensions')}</h3>
           <div className="bg-slate-50 p-3 rounded-md border border-slate-200">
             <label htmlFor="canvasSizeSelect" className="block text-sm text-slate-600 mb-1">
-              Canvas Size
+              {t('canvasSize')}
             </label>
             <select
               id="canvasSizeSelect"
@@ -163,7 +166,7 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
               ))}
             </select>
             <p id="canvas-size-description" className="text-xs text-slate-500 mt-1">
-              Changing size will clear the current canvas and history.
+              {t('canvasSizeDescription')}
             </p>
           </div>
         </div>
@@ -171,11 +174,11 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
 
         {/* AI Image Generation Settings */}
         <div className="mb-6">
-          <h3 className="text-md font-medium text-slate-700 mb-2">AI Image Generation</h3>
+          <h3 className="text-md font-medium text-slate-700 mb-2">{t('aiImageGeneration')}</h3>
           
           <div className="bg-slate-50 p-3 rounded-md border border-slate-200 mb-4">
             <label htmlFor="aiApiEndpointSelect" className="block text-sm text-slate-600 mb-1">
-              API Endpoint
+              {t('apiEndpoint')}
             </label>
             <select
                 id="aiApiEndpointSelect"
@@ -186,18 +189,18 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
             >
                 {AI_API_OPTIONS.map((option) => (
                     <option key={option.value} value={option.value}>
-                        {option.label}
+                        {t(option.labelKey)}
                     </option>
                 ))}
             </select>
             <p id="ai-api-description" className="text-xs text-slate-500 mt-1">
-              Select an API for image generation. Placeholders are filled automatically.
+              {t('apiEndpointDescription')}
             </p>
           </div>
           
           <div className="bg-slate-50 p-3 rounded-md border border-slate-200 mb-4">
             <label htmlFor="aiDimensionsModeSelect" className="block text-sm text-slate-600 mb-1">
-                AI Image Dimensions
+                {t('aiImageDimensions')}
             </label>
             <select
                 id="aiDimensionsModeSelect"
@@ -206,18 +209,18 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
                 className="w-full p-2 border border-slate-300 rounded-md focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
                 aria-describedby="ai-dimensions-description"
             >
-                <option value="api_default">API Default (no size)</option>
-                <option value="match_canvas">Match Canvas Size</option>
-                <option value="fixed_1024">Fixed 1024x1024</option>
+                <option value="api_default">{t('apiDefault')}</option>
+                <option value="match_canvas">{t('matchCanvasSize')}</option>
+                <option value="fixed_1024">{t('fixed1024')}</option>
             </select>
             <p id="ai-dimensions-description" className="text-xs text-slate-500 mt-1">
-                Controls `width` & `height` params for APIs that support them (e.g., Pollinations AI).
+                {t('aiImageDimensionsDescription')}
             </p>
           </div>
 
           <div className="bg-slate-50 p-3 rounded-md border border-slate-200">
             <label htmlFor="aiImageQualitySelect" className="block text-sm text-slate-600 mb-1">
-              Image Quality
+              {t('imageQuality')}
             </label>
             <select
               id="aiImageQualitySelect"
@@ -233,7 +236,7 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
               ))}
             </select>
             <p id="ai-quality-description" className="text-xs text-slate-500 mt-1">
-              Used for APIs that support a 'quality' parameter (e.g., Pollinations AI).
+              {t('imageQualityDescription')}
             </p>
           </div>
         </div>
@@ -243,7 +246,7 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
             onClick={onClose}
             className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors text-sm font-medium"
           >
-            Done
+            {t('done')}
           </button>
         </div>
       </div>

components/Toolbar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { UndoIcon, RedoIcon, UploadIcon, DownloadIcon, ClearIcon, BrushIcon, EraserIcon, MagicSparkleIcon, SettingsIcon } from './icons';
+import { TFunction } from '../types';
 
 interface ToolbarProps {
   penColor: string;
@@ -18,7 +19,8 @@ interface ToolbarProps {
   onMagicUpload: () => void;
   isMagicUploading: boolean;
   canShare: boolean;
-  onToggleSettings: () => void; // New prop for settings
+  onToggleSettings: () => void;
+  t: TFunction;
 }
 
 const Toolbar: React.FC<ToolbarProps> = ({
@@ -38,7 +40,8 @@ const Toolbar: React.FC<ToolbarProps> = ({
   onMagicUpload,
   isMagicUploading,
   canShare,
-  onToggleSettings, // New prop
+  onToggleSettings,
+  t,
 }) => {
   const fileInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -53,9 +56,9 @@ const Toolbar: React.FC<ToolbarProps> = ({
         <button
           onClick={onUndo}
           disabled={!canUndo}
-          title="Undo"
+          title={t('undo')}
           className="p-2   rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors   border-gray-300"
-          aria-label="Undo last action"
+          aria-label={t('undoAria')}
         >
           <UndoIcon className="w-5 h-5 text-gray-700" />
         </button>
@@ -63,9 +66,9 @@ const Toolbar: React.FC<ToolbarProps> = ({
         <button
           onClick={onRedo}
           disabled={!canRedo}
-          title="Redo"
+          title={t('redo')}
           className="p-2   rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors   border-gray-300"
-          aria-label="Redo last undone action"
+          aria-label={t('redoAria')}
         >
           <RedoIcon className="w-5 h-5 text-gray-700" />
         </button>
@@ -76,41 +79,41 @@ const Toolbar: React.FC<ToolbarProps> = ({
           onChange={onLoadImage}
           accept="image/png, image/jpeg"
           className="hidden"
-          aria-label="Load image from file"
+          aria-label={t('loadImageAria')}
         />
         <button
           onClick={handleUploadClick}
-          title="Load Image"
+          title={t('loadImage')}
           className="p-2   rounded-md hover:bg-gray-100 transition-colors  border-gray-300"
-          aria-label="Load image"
+          aria-label={t('loadImageAria')}
         >
           <UploadIcon className="w-5 h-5 text-gray-700" />
         </button>
 
         <button
           onClick={onExportImage}
-          title="Export Image"
+          title={t('exportImage')}
           className="p-2   rounded-md hover:bg-gray-100 transition-colors   border-gray-300"
-          aria-label="Export canvas as image"
+          aria-label={t('exportImageAria')}
         >
           <DownloadIcon className="w-5 h-5 text-gray-700" />
         </button>
         
         <button
           onClick={onMagicUpload}
-          title="Share Canvas & Edit with AI"
+          title={t('shareAndEditWithAI')}
           disabled={isMagicUploading || !canShare}
           className="p-2   rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors   border-gray-300"
-          aria-label="Share canvas by uploading and open AI edit options"
+          aria-label={t('shareAndEditWithAIAria')}
         >
           <MagicSparkleIcon className="w-5 h-5 text-purple-600" />
         </button>
 
         <button
           onClick={onClearCanvas}
-          title="Clear Canvas"
+          title={t('clearCanvas')}
           className="p-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors tool-button"
-          aria-label="Clear canvas"
+          aria-label={t('clearCanvasAria')}
         >
           <ClearIcon className="w-5 h-5" />
         </button>
@@ -120,40 +123,40 @@ const Toolbar: React.FC<ToolbarProps> = ({
       <div className="flex flex-wrap items-center justify-start gap-x-3 gap-y-2 mt-2">
         <button
           onClick={onToggleEraser}
-          title={isEraserMode ? "Switch to Brush" : "Switch to Eraser"}
+          title={isEraserMode ? t('switchToBrush') : t('switchToEraser')}
           className={`p-2 rounded-md transition-colors ${isEraserMode ? 'bg-blue-500 text-white hover:bg-blue-600' : '  hover:bg-gray-100 text-gray-700   border-gray-300'}`}
-          aria-label={isEraserMode ? "Switch to Brush mode" : "Switch to Eraser mode"}
+          aria-label={isEraserMode ? t('switchToBrushAria') : t('switchToEraserAria')}
           aria-pressed={isEraserMode}
         >
           {isEraserMode ? <BrushIcon className="w-5 h-5" /> : <EraserIcon className="w-5 h-5" />}
         </button>
         
         <div className="flex items-center gap-2 p-1 rounded-md hover:bg-slate-300 transition-colors">
-          <label htmlFor="penColor" className="text-sm font-medium text-gray-700 sr-only">Color:</label>
+          <label htmlFor="penColor" className="text-sm font-medium text-gray-700 sr-only">{t('penColor')}:</label>
           <input
             type="color"
             id="penColor"
-            title="Pen Color"
+            title={t('penColor')}
             value={penColor}
             onChange={(e) => onColorChange(e.target.value)}
             className={`w-8 h-8 rounded-full cursor-pointer border-2 ${isEraserMode ? 'border-gray-400 opacity-50' : 'border-white shadow-sm'}`}
             disabled={isEraserMode}
-            aria-label="Select pen color"
+            aria-label={t('selectPenColorAria')}
           />
         </div>
 
         <div className="flex items-center gap-2 p-1 rounded-md hover:bg-slate-300 transition-colors">
-          <label htmlFor="penSize" className="text-sm font-medium text-gray-700 sr-only">Size:</label>
+          <label htmlFor="penSize" className="text-sm font-medium text-gray-700 sr-only">{t('penSize', { size: penSize })}:</label>
           <input
             type="range"
             id="penSize"
-            title={`Pen Size: ${penSize}`}
+            title={t('penSize', { size: penSize })}
             min="1"
             max="50"
             value={penSize}
             onChange={(e) => onSizeChange(parseInt(e.target.value, 10))}
             className="w-24 md:w-32 cursor-pointer accent-blue-600"
-            aria-label={`Pen size ${penSize} pixels`}
+            aria-label={t('penSizeAria', { size: penSize })}
             aria-valuemin={1}
             aria-valuemax={50}
             aria-valuenow={penSize}
@@ -163,9 +166,9 @@ const Toolbar: React.FC<ToolbarProps> = ({
         
         <button
           onClick={onToggleSettings}
-          title="Open Settings"
+          title={t('openSettings')}
           className="p-2   rounded-md hover:bg-gray-100 transition-colors   border-gray-300"
-          aria-label="Open application settings"
+          aria-label={t('openSettings')}
         >
           <SettingsIcon className="w-5 h-5 text-gray-700" />
         </button>
@@ -174,4 +177,4 @@ const Toolbar: React.FC<ToolbarProps> = ({
   );
 };
 
-export default Toolbar;
+export default Toolbar;

components/ZoomSlider.tsx

@@ -1,12 +1,15 @@
 
+
 import React from 'react';
+import { TFunction } from '../types';
 
 interface ZoomSliderProps {
   zoomLevel: number;
   onZoomChange: (newZoomLevel: number) => void;
+  t: TFunction;
 }
 
-const ZoomSlider: React.FC<ZoomSliderProps> = ({ zoomLevel, onZoomChange }) => {
+const ZoomSlider: React.FC<ZoomSliderProps> = ({ zoomLevel, onZoomChange, t }) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onZoomChange(parseFloat(event.target.value));
   };
@@ -20,7 +23,7 @@ const ZoomSlider: React.FC<ZoomSliderProps> = ({ zoomLevel, onZoomChange }) => {
       aria-label="Zoom controls"
     >
       <label htmlFor="zoom-slider" className="text-xs font-medium whitespace-nowrap">
-        Zoom: <span className="font-bold">{zoomPercentage}%</span>
+        {t('zoom', { percentage: zoomPercentage })}
       </label>
       <input
         type="range"
@@ -34,7 +37,7 @@ const ZoomSlider: React.FC<ZoomSliderProps> = ({ zoomLevel, onZoomChange }) => {
         aria-valuemin={20}
         aria-valuemax={300}
         aria-valuenow={zoomPercentage}
-        aria-label={`Current zoom level ${zoomPercentage} percent`}
+        aria-label={t('zoomAria', { percentage: zoomPercentage })}
       />
     </div>
   );

hooks/useAiFeatures.ts

@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react';
 import { ToastMessage } from './useToasts';
 import { dataURLtoBlob, calculateSHA256, copyToClipboard } from '../utils/canvasUtils';
 import { CanvasHistoryHook } from './useCanvasHistory';
+import { TFunction } from '../types';
 
 const SHARE_API_URL = 'https://sharefile.suisuy.eu.org';
 const ASK_API_URL = 'https://getai.deno.dev/';
@@ -37,6 +38,7 @@ interface UseAiFeaturesProps {
   aiDimensionsMode: AiDimensionsMode;
   currentCanvasWidth: number; 
   currentCanvasHeight: number; 
+  t: TFunction;
 }
 
 export const useAiFeatures = ({
@@ -48,7 +50,8 @@ export const useAiFeatures = ({
   aiApiEndpoint,
   aiDimensionsMode,
   currentCanvasWidth, 
-  currentCanvasHeight, 
+  currentCanvasHeight,
+  t,
 }: UseAiFeaturesProps): AiFeaturesHook => {
   const [isMagicUploading, setIsMagicUploading] = useState<boolean>(false);
   const [showAiEditModal, setShowAiEditModal] = useState<boolean>(false);
@@ -107,37 +110,37 @@ export const useAiFeatures = ({
             updateCanvasState(newCanvasState, currentCanvasWidth, currentCanvasHeight);
 
             setShowAiEditModal(false);
-            showToast('AI image applied to canvas!', 'success');
+            showToast(t('aiImageApplied'), 'success');
             setAiPrompt(''); 
             setSharedImageUrlForAi(null);
         } else {
-            setAiEditError('Failed to create drawing context for AI image.');
+            setAiEditError(t('failedToCreateContext'));
         }
         setIsGeneratingAiImage(false);
     };
     img.onerror = () => {
-        setAiEditError('Failed to load the generated AI image. It might be an invalid image format.');
+        setAiEditError(t('failedToLoadAiImage'));
         setIsGeneratingAiImage(false);
     };
     img.crossOrigin = "anonymous"; 
     img.src = aiImageDataUrl;
-  }, [showToast, updateCanvasState, currentCanvasWidth, currentCanvasHeight]);
+  }, [showToast, updateCanvasState, currentCanvasWidth, currentCanvasHeight, t]);
 
   const handleMagicUpload = useCallback(async () => {
     if (isMagicUploading || !currentDataURL) {
-        showToast('No canvas content to share.', 'info');
+        showToast(t('noCanvasContentToShare'), 'info');
         return;
     }
 
     setIsMagicUploading(true);
     setAiEditError(null);
-    showToast('Uploading image...', 'info');
+    showToast(t('uploadingImage'), 'info');
 
     try {
         const blob = await dataURLtoBlob(currentDataURL);
 
         if (blob.size > MAX_UPLOAD_SIZE_BYTES) {
-            showToast(`Image too large (${(blob.size / 1024 / 1024).toFixed(2)}MB). Max 50MB.`, 'error');
+            showToast(t('imageTooLarge', { size: (blob.size / 1024 / 1024).toFixed(2) }), 'error');
             setIsMagicUploading(false);
             return;
         }
@@ -153,8 +156,8 @@ export const useAiFeatures = ({
         });
 
         if (!response.ok) {
-            let errorMsg = `Upload failed: ${response.statusText}`;
-            try { const errorBody = await response.text(); errorMsg = `Upload failed: ${errorBody || response.statusText}`; } catch (e) { /* ignore */ }
+            let errorMsg = t('uploadFailed', { statusText: response.statusText });
+            try { const errorBody = await response.text(); errorMsg = t('uploadFailed', { statusText: errorBody || response.statusText }); } catch (e) { /* ignore */ }
             throw new Error(errorMsg);
         }
 
@@ -169,21 +172,21 @@ export const useAiFeatures = ({
 
     } catch (error: any) {
         console.error('Magic upload error:', error);
-        showToast(error.message || 'Magic upload failed. Check console.', 'error');
+        showToast(error.message || t('magicUploadError'), 'error');
     } finally {
         setIsMagicUploading(false); 
     }
-  }, [isMagicUploading, currentDataURL, showToast, clearAskUrl]);
+  }, [isMagicUploading, currentDataURL, showToast, clearAskUrl, t]);
 
   const handleGenerateAiImage = useCallback(async () => {
     if (!aiPrompt.trim() || !sharedImageUrlForAi) {
-      setAiEditError('Please enter a prompt and ensure an image was uploaded.');
+      setAiEditError(t('enterPrompt'));
       return;
     }
     setIsGeneratingAiImage(true);
     setAiEditError(null);
     clearAskUrl();
-    showToast('Generating AI image...', 'info');
+    showToast(t('generatingAiImage'), 'info');
 
     const encodedPrompt = encodeURIComponent(aiPrompt);
     const encodedImageUrl = encodeURIComponent(sharedImageUrlForAi);
@@ -209,7 +212,7 @@ export const useAiFeatures = ({
     try {
       const response = await fetch(finalApiUrl);
       if (!response.ok) {
-        let errorMsg = `AI image generation failed: ${response.status} ${response.statusText}`;
+        let errorMsg = t('aiGenFailed', { status: response.status, statusText: response.statusText });
         try {
             const errorBody = await response.text(); 
             if (errorBody && !errorBody.toLowerCase().includes('<html')) {
@@ -221,7 +224,7 @@ export const useAiFeatures = ({
       
       const imageBlob = await response.blob();
       if (!imageBlob.type.startsWith('image/')) {
-        throw new Error('AI service did not return a valid image. Please try a different prompt or check the API endpoint.');
+        throw new Error(t('aiGenInvalidImage'));
       }
 
       const reader = new FileReader();
@@ -229,26 +232,26 @@ export const useAiFeatures = ({
         if (typeof reader.result === 'string') {
           loadAiImageOntoCanvas(reader.result);
         } else {
-          setAiEditError('Failed to read AI image data as string.');
+          setAiEditError(t('failedToReadAiData'));
           setIsGeneratingAiImage(false);
         }
       };
       reader.onerror = () => {
-        setAiEditError('Failed to read AI image data.');
+        setAiEditError(t('failedToReadAiData'));
         setIsGeneratingAiImage(false);
       }
       reader.readAsDataURL(imageBlob);
 
     } catch (error: any) {
       console.error('AI image generation error:', error);
-      setAiEditError(error.message || 'An unknown error occurred during AI image generation.');
+      setAiEditError(error.message || t('unknownAiError'));
       setIsGeneratingAiImage(false);
     }
-  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint, aiDimensionsMode, currentCanvasWidth, currentCanvasHeight, clearAskUrl]);
+  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint, aiDimensionsMode, currentCanvasWidth, currentCanvasHeight, clearAskUrl, t]);
 
   const handleAskAi = useCallback(async () => {
     if (!aiPrompt.trim() || !sharedImageUrlForAi) {
-      setAiEditError('Please enter a question about the image.');
+      setAiEditError(t('enterQuestion'));
       return;
     }
     setIsAskingAi(true);
@@ -263,19 +266,19 @@ export const useAiFeatures = ({
 
     } catch (error: any) {
         console.error('AI ask error:', error);
-        setAiEditError(error.message || 'An unknown error occurred while asking AI.');
+        setAiEditError(error.message || t('unknownAskError'));
     } finally {
         setIsAskingAi(false);
     }
-  }, [aiPrompt, sharedImageUrlForAi]);
+  }, [aiPrompt, sharedImageUrlForAi, t]);
   
 
   const handleCancelAiEdit = () => {
     setShowAiEditModal(false);
     if (sharedImageUrlForAi) {
-        copyToClipboard(sharedImageUrlForAi, (msg, type) => showToast(msg,type as 'info' | 'error')).then(copied => {
+        copyToClipboard(sharedImageUrlForAi, (msg, type) => showToast(msg,type as 'info' | 'error'), t).then(copied => {
             if(copied) {
-                 showToast(`Image uploaded! URL: ${sharedImageUrlForAi} (Copied!)`, 'success');
+                 showToast(t('imageUploadedAndCopied', { url: sharedImageUrlForAi }), 'success');
             }
         });
     }

hooks/useCanvasFileUtils.ts

@@ -3,6 +3,7 @@ import { getBlankCanvasDataURL } from '../utils/canvasUtils';
 import { CanvasHistoryHook } from './useCanvasHistory';
 import { ConfirmModalHook } from './useConfirmModal';
 import { ToastMessage } from './useToasts';
+import { TFunction } from '../types';
 
 
 interface UseCanvasFileUtilsProps {
@@ -21,6 +22,7 @@ interface UseCanvasFileUtilsProps {
   confirmModalActions: {
     requestConfirmation: ConfirmModalHook['requestConfirmation'];
   };
+  t: TFunction;
 }
 
 export interface CanvasFileUtilsHook {
@@ -35,6 +37,7 @@ export const useCanvasFileUtils = ({
   historyActions,
   uiActions,
   confirmModalActions,
+  t,
 }: UseCanvasFileUtilsProps): CanvasFileUtilsHook => {
   const { currentDataURL, canvasWidth, canvasHeight } = canvasState;
   const { updateCanvasState } = historyActions;
@@ -81,18 +84,18 @@ export const useCanvasFileUtils = ({
               const compositeDataURL = tempCanvas.toDataURL('image/png');
               
               updateCanvasState(compositeDataURL, finalCanvasWidth, finalCanvasHeight);
-              showToast('Image loaded successfully.', 'success');
+              showToast(t('imageLoadedSuccess'), 'success');
             }
           };
-          img.onerror = () => showToast("Error loading image file for processing.", 'error');
+          img.onerror = () => showToast(t('imageLoadError'), 'error');
           img.src = imageDataUrl;
         }
       };
-      reader.onerror = () => showToast("Error reading image file.", 'error');
+      reader.onerror = () => showToast(t('imageReadError'), 'error');
       reader.readAsDataURL(file);
       if(event.target) event.target.value = ''; 
     }
-  }, [canvasWidth, canvasHeight, updateCanvasState, showToast]);
+  }, [canvasWidth, canvasHeight, updateCanvasState, showToast, t]);
   
   const handleExportImage = useCallback(() => {
     if (currentDataURL) {
@@ -102,34 +105,34 @@ export const useCanvasFileUtils = ({
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
-      showToast('Image exported!', 'success');
+      showToast(t('imageExported'), 'success');
     } else {
-      showToast('No image to export.', 'info');
+      showToast(t('noImageToExport'), 'info');
     }
-  }, [currentDataURL, showToast]);
+  }, [currentDataURL, showToast, t]);
 
   const handleClearCanvas = useCallback(() => {
     const blankCanvas = getBlankCanvasDataURL(canvasWidth, canvasHeight);
     updateCanvasState(blankCanvas, canvasWidth, canvasHeight);
-    showToast("Canvas cleared.", "info");
-  }, [canvasWidth, canvasHeight, updateCanvasState, showToast]);
+    showToast(t("canvasCleared"), "info");
+  }, [canvasWidth, canvasHeight, updateCanvasState, showToast, t]);
 
   const handleCanvasSizeChange = useCallback((newWidth: number, newHeight: number) => {
     if (newWidth === canvasWidth && newHeight === canvasHeight) {
       return;
     }
     requestConfirmation(
-      "Confirm Canvas Size Change",
-      "Changing canvas size will clear the current drawing and history. Are you sure you want to continue?",
+      t('confirmCanvasSizeChangeTitle'),
+      t('confirmCanvasSizeChangeMessage'),
       () => {
         const blankCanvas = getBlankCanvasDataURL(newWidth, newHeight);
         updateCanvasState(blankCanvas, newWidth, newHeight);
         setZoomLevel(0.5);
-        showToast(`Canvas resized to ${newWidth}x${newHeight}px. Drawing cleared.`, 'info');
+        showToast(t('canvasResized', { width: newWidth, height: newHeight }), 'info');
       },
       { isDestructive: true }
     );
-  }, [canvasWidth, canvasHeight, requestConfirmation, updateCanvasState, setZoomLevel, showToast]);
+  }, [canvasWidth, canvasHeight, requestConfirmation, updateCanvasState, setZoomLevel, showToast, t]);
 
   return { handleLoadImageFile, handleExportImage, handleClearCanvas, handleCanvasSizeChange };
 };

hooks/useConfirmModal.ts

@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react';
+import { TFunction } from '../types';
 
 export interface ConfirmModalInfo {
   isOpen: boolean;
@@ -35,7 +36,7 @@ export interface ConfirmModalHook {
   closeConfirmModal: () => void;
 }
 
-export const useConfirmModal = (): ConfirmModalHook => {
+export const useConfirmModal = (t: TFunction): ConfirmModalHook => {
   const [confirmModalInfo, setConfirmModalInfo] = useState<ConfirmModalInfo>(initialConfirmModalState);
 
   const requestConfirmation = useCallback(
@@ -58,11 +59,11 @@ export const useConfirmModal = (): ConfirmModalHook => {
           setConfirmModalInfo(prev => ({ ...prev, isOpen: false })); // Close modal after action
         },
         isDestructive: options.isDestructive ?? false,
-        confirmText: options.confirmText ?? 'Confirm',
-        cancelText: options.cancelText ?? 'Cancel',
+        confirmText: options.confirmText ?? t('confirm'),
+        cancelText: options.cancelText ?? t('cancel'),
       });
     },
-    []
+    [t]
   );
 
   const closeConfirmModal = useCallback(() => {

hooks/useFullscreen.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
+import { TFunction } from '../types';
 
 export interface FullscreenHook {
   isFullscreenActive: boolean;
@@ -7,7 +8,8 @@ export interface FullscreenHook {
 }
 
 export const useFullscreen = (
-  showToast?: (message: string, type: 'info' | 'error') => void
+  showToast?: (message: string, type: 'info' | 'error') => void,
+  t?: TFunction,
 ): FullscreenHook => {
   const [isFullscreenActive, setIsFullscreenActive] = useState<boolean>(false);
   const [requestFullscreenSupportError, setRequestFullscreenSupportError] = useState<string | undefined>();
@@ -50,7 +52,7 @@ export const useFullscreen = (
         } else if (element.msRequestFullscreen) { // IE/Edge
           await element.msRequestFullscreen();
         } else {
-            const errorMsg = "Fullscreen API is not supported by this browser.";
+            const errorMsg = t ? t('fullscreenNotSupported') : "Fullscreen API is not supported by this browser.";
             setRequestFullscreenSupportError(errorMsg);
             if (showToast) showToast(errorMsg, "error");
             return;
@@ -65,7 +67,7 @@ export const useFullscreen = (
         } else if ((document as any).msExitFullscreen) {
           await (document as any).msExitFullscreen();
         } else {
-            const errorMsg = "Could not exit fullscreen. API not found.";
+            const errorMsg = t ? t('fullscreenExitError') : "Could not exit fullscreen. API not found.";
              setRequestFullscreenSupportError(errorMsg);
             if (showToast) showToast(errorMsg, "error");
             return;
@@ -74,7 +76,7 @@ export const useFullscreen = (
       setRequestFullscreenSupportError(undefined);
     } catch (err: any) {
       console.error("Fullscreen API error:", err);
-      const errorMsg = `Fullscreen mode change failed: ${err.message || 'Unknown error'}`;
+      const errorMsg = t ? t('fullscreenChangeError', { message: err.message || 'Unknown error' }) : `Fullscreen mode change failed: ${err.message || 'Unknown error'}`;
       setRequestFullscreenSupportError(errorMsg);
       if (showToast) showToast(errorMsg, "error");
       handleFullscreenChange(); // Ensure state reflects reality

metadata.json

@@ -1,5 +1,5 @@
 {
-  "name": "xpaintai",
+  "name": "xpaintai_zh",
   "description": "A simple web-based paint application with features like pen customization, undo/redo, image loading/exporting, and autosave to IndexedDB.",
   "requestFramePermissions": [],
   "prompt": ""

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "xpaintai",
+  "name": "xpaintai_zh",
   "private": true,
   "version": "0.0.0",
   "type": "module",

translations.ts

@@ -0,0 +1,260 @@
+
+const translations = {
+  en: {
+    // Toolbar
+    undo: 'Undo',
+    redo: 'Redo',
+    loadImage: 'Load Image',
+    exportImage: 'Export Image',
+    shareAndEditWithAI: 'Share Canvas & Edit with AI',
+    clearCanvas: 'Clear Canvas',
+    switchToBrush: 'Switch to Brush',
+    switchToEraser: 'Switch to Eraser',
+    penColor: 'Pen Color',
+    penSize: 'Pen Size: {size}',
+    penSizeAria: 'Pen size {size} pixels',
+    openSettings: 'Open Settings',
+    undoAria: 'Undo last action',
+    redoAria: 'Redo last undone action',
+    loadImageAria: 'Load image from file',
+    exportImageAria: 'Export canvas as image',
+    shareAndEditWithAIAria: 'Share canvas by uploading and open AI edit options',
+    clearCanvasAria: 'Clear canvas',
+    switchToBrushAria: 'Switch to Brush mode',
+    switchToEraserAria: 'Switch to Eraser mode',
+    selectPenColorAria: 'Select pen color',
+
+    // AI Modal
+    aiModalTitle: 'Edit or Ask about Image with AI',
+    closeAiModalAria: 'Close AI edit modal',
+    aiPromptLabel: 'Describe what you want to change, or ask a question:',
+    aiPromptPlaceholder: "e.g., 'make the cat wear a party hat' or 'what is in this image?'",
+    errorPrefix: 'Error:',
+    aiAsk: 'Ask',
+    aiAsking: 'Asking...',
+    aiGenerateImage: 'Generate Image',
+    aiGenerating: 'Generating...',
+    
+    // Settings Panel
+    settingsTitle: 'Application Settings',
+    closeSettingsAria: 'Close settings panel',
+    interface: 'Interface',
+    showZoomSlider: 'Show Zoom Slider',
+    toggleZoomSliderAria: 'Toggle Zoom Slider Visibility',
+    enterFullscreen: 'Enter Fullscreen',
+    exitFullscreen: 'Exit Fullscreen',
+    fullscreenAria: 'Enter Fullscreen',
+    exitFullscreenAria: 'Exit Fullscreen',
+    canvasDimensions: 'Canvas Dimensions',
+    canvasSize: 'Canvas Size',
+    canvasSizeDescription: 'Changing size will clear the current canvas and history.',
+    aiImageGeneration: 'AI Image Generation',
+    apiEndpoint: 'API Endpoint',
+    apiEndpointDescription: 'Select an API for image generation. Placeholders are filled automatically.',
+    pollinationsApi: 'Pollinations AI',
+    geminiSimpleGetApi: 'Gemini Simple Get',
+    aiImageDimensions: 'AI Image Dimensions',
+    aiImageDimensionsDescription: "Controls `width` & `height` params for APIs that support them (e.g., Pollinations AI).",
+    apiDefault: 'API Default (no size)',
+    matchCanvasSize: 'Match Canvas Size',
+    fixed1024: 'Fixed 1024x1024',
+    imageQuality: 'Image Quality',
+    imageQualityDescription: "Used for APIs that support a 'quality' parameter (e.g., Pollinations AI).",
+    qualityLow: 'Low',
+    qualityMedium: 'Medium',
+    qualityHigh: 'High (HD)',
+    done: 'Done',
+    
+    // Confirm Modal
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    confirmCanvasSizeChangeTitle: 'Confirm Canvas Size Change',
+    confirmCanvasSizeChangeMessage: 'Changing canvas size will clear the current drawing and history. Are you sure you want to continue?',
+    
+    // Zoom Slider
+    zoom: 'Zoom: {percentage}%',
+    zoomAria: 'Current zoom level {percentage} percent',
+    
+    // Canvas
+    drawingCanvas: 'Drawing canvas',
+    initializingCanvas: 'Initializing Canvas...',
+
+    // App Loading
+    loadingCanvasMessage: 'Loading Your Canvas...',
+    loadingCanvasSubMessage: 'Getting things ready!',
+    
+    // Toasts
+    imageLoadedSuccess: 'Image loaded successfully.',
+    imageLoadError: 'Error loading image file for processing.',
+    imageReadError: 'Error reading image file.',
+    imageExported: 'Image exported!',
+    noImageToExport: 'No image to export.',
+    canvasCleared: 'Canvas cleared.',
+    canvasResized: 'Canvas resized to {width}x{height}px. Drawing cleared.',
+    noCanvasContentToShare: 'No canvas content to share.',
+    uploadingImage: 'Uploading image...',
+    imageTooLarge: 'Image too large ({size}MB). Max 50MB.',
+    uploadFailed: 'Upload failed: {statusText}',
+    magicUploadError: 'Magic upload failed. Check console.',
+    imageUploadedAndCopied: 'Image uploaded! URL: {url} (Copied!)',
+    aiImageApplied: 'AI image applied to canvas!',
+    failedToCreateContext: 'Failed to create drawing context for AI image.',
+    failedToLoadAiImage: 'Failed to load the generated AI image. It might be an invalid image format.',
+    generatingAiImage: 'Generating AI image...',
+    aiGenFailed: 'AI image generation failed: {status} {statusText}',
+    aiGenInvalidImage: 'AI service did not return a valid image. Please try a different prompt or check the API endpoint.',
+    failedToReadAiData: 'Failed to read AI image data.',
+    unknownAiError: 'An unknown error occurred during AI image generation.',
+    enterPrompt: 'Please enter a prompt and ensure an image was uploaded.',
+    enterQuestion: 'Please enter a question about the image.',
+    unknownAskError: 'An unknown error occurred while asking AI.',
+    clipboardApiNotAvailable: 'Clipboard API not available.',
+    failedToCopyUrl: 'Failed to copy URL to clipboard.',
+    fullscreenNotSupported: 'Fullscreen API is not supported by this browser.',
+    fullscreenExitError: 'Could not exit fullscreen. API not found.',
+    fullscreenChangeError: 'Fullscreen mode change failed: {message}',
+  },
+  zh: {
+    // Toolbar
+    undo: '撤销',
+    redo: '重做',
+    loadImage: '加载图片',
+    exportImage: '导出图片',
+    shareAndEditWithAI: '分享并用AI编辑',
+    clearCanvas: '清空画布',
+    switchToBrush: '切换到画笔',
+    switchToEraser: '切换到橡皮擦',
+    penColor: '画笔颜色',
+    penSize: '画笔大小: {size}',
+    penSizeAria: '画笔大小 {size} 像素',
+    openSettings: '打开设置',
+    undoAria: '撤销上一步操作',
+    redoAria: '重做上一步撤销的操作',
+    loadImageAria: '从文件加载图片',
+    exportImageAria: '将画布导出为图片',
+    shareAndEditWithAIAria: '通过上传分享画布并打开AI编辑选项',
+    clearCanvasAria: '清空画布',
+    switchToBrushAria: '切换到画笔模式',
+    switchToEraserAria: '切换到橡皮擦模式',
+    selectPenColorAria: '选择画笔颜色',
+
+    // AI Modal
+    aiModalTitle: '使用 AI 编辑或询问图片',
+    closeAiModalAria: '关闭AI编辑窗口',
+    aiPromptLabel: '描述您想更改的内容，或提出一个问题：',
+    aiPromptPlaceholder: "例如，“给猫带上派对帽”或“这张图里有什么？”",
+    errorPrefix: '错误：',
+    aiAsk: '提问',
+    aiAsking: '提问中...',
+    aiGenerateImage: '生成图片',
+    aiGenerating: '生成中...',
+
+    // Settings Panel
+    settingsTitle: '应用设置',
+    closeSettingsAria: '关闭设置面板',
+    interface: '界面',
+    showZoomSlider: '显示缩放滑块',
+    toggleZoomSliderAria: '切换缩放滑块可见性',
+    enterFullscreen: '进入全屏',
+    exitFullscreen: '退出全屏',
+    fullscreenAria: '进入全屏',
+    exitFullscreenAria: '退出全屏',
+    canvasDimensions: '画布尺寸',
+    canvasSize: '画布大小',
+    canvasSizeDescription: '更改尺寸将清除当前画布和历史记录。',
+    aiImageGeneration: 'AI 图像生成',
+    apiEndpoint: 'API 端点',
+    apiEndpointDescription: '选择用于图像生成的 API。占位符会自动填充。',
+    pollinationsApi: 'Pollinations AI',
+    geminiSimpleGetApi: 'Gemini Simple Get',
+    aiImageDimensions: 'AI 图像尺寸',
+    aiImageDimensionsDescription: "控制支持它们的 API 的 `width` 和 `height` 参数（例如 Pollinations AI）。",
+    apiDefault: 'API 默认（无尺寸）',
+    matchCanvasSize: '匹配画布尺寸',
+    fixed1024: '固定 1024x1024',
+    imageQuality: '图像质量',
+    imageQualityDescription: "用于支持 'quality' 参数的 API（例如 Pollinations AI）。",
+    qualityLow: '低',
+    qualityMedium: '中',
+    qualityHigh: '高 (HD)',
+    done: '完成',
+
+    // Confirm Modal
+    confirm: '确认',
+    cancel: '取消',
+    confirmCanvasSizeChangeTitle: '确认更改画布尺寸',
+    confirmCanvasSizeChangeMessage: '更改画布尺寸将清除当前绘图和历史记录。您确定要继续吗？',
+
+    // Zoom Slider
+    zoom: '缩放: {percentage}%',
+    zoomAria: '当前缩放级别 {percentage} percent',
+
+    // Canvas
+    drawingCanvas: '绘画画布',
+    initializingCanvas: '正在初始化画布...',
+
+    // App Loading
+    loadingCanvasMessage: '正在加载您的画布...',
+    loadingCanvasSubMessage: '正在准备中！',
+    
+    // Toasts
+    imageLoadedSuccess: '图片加载成功。',
+    imageLoadError: '处理图片文件时出错。',
+    imageReadError: '读取图片文件时出错。',
+    imageExported: '图片已导出！',
+    noImageToExport: '没有可导出的图片。',
+    canvasCleared: '画布已清空。',
+    canvasResized: '画布尺寸已调整为 {width}x{height}px。绘图已清除。',
+    noCanvasContentToShare: '没有可分享的画布内容。',
+    uploadingImage: '正在上传图片...',
+    imageTooLarge: '图片太大 ({size}MB)。最大 50MB。',
+    uploadFailed: '上传失败: {statusText}',
+    magicUploadError: '魔法上传失败。请检查控制台。',
+    imageUploadedAndCopied: '图片已上传！URL: {url} (已复制!)',
+    aiImageApplied: 'AI 图片已应用到画布！',
+    failedToCreateContext: '为 AI 图片创建绘图上下文失败。',
+    failedToLoadAiImage: '加载生成的 AI 图片失败。可能为无效的图片格式。',
+    generatingAiImage: '正在生成 AI 图片...',
+    aiGenFailed: 'AI 图片生成失败: {status} {statusText}',
+    aiGenInvalidImage: 'AI 服务未返回有效图片。请尝试其他提示或检查 API 端点。',
+    failedToReadAiData: '读取 AI 图片数据失败。',
+    unknownAiError: 'AI 图片生成期间发生未知错误。',
+    enterPrompt: '请输入提示并确保已上传图片。',
+    enterQuestion: '请输入关于图片的问题。',
+    unknownAskError: '询问 AI 时发生未知错误。',
+    clipboardApiNotAvailable: '剪贴板 API 不可用。',
+    failedToCopyUrl: '复制 URL 到剪贴板失败。',
+    fullscreenNotSupported: '此浏览器不支持全屏 API。',
+    fullscreenExitError: '无法退出全屏。未找到 API。',
+    fullscreenChangeError: '全屏模式更改失败: {message}',
+  },
+};
+
+type Language = keyof typeof translations;
+export type TranslationKey = keyof typeof translations['en'];
+
+const getLanguage = (): Language => {
+    if (typeof navigator !== 'undefined' && navigator.language) {
+        if (navigator.language.startsWith('zh')) {
+            return 'zh';
+        }
+    }
+    return 'en';
+}
+
+const currentLang = getLanguage();
+
+export const getTranslator = () => {
+  const langDict = translations[currentLang];
+  const fallbackDict = translations.en;
+
+  return (key: TranslationKey, replacements?: Record<string, string | number>): string => {
+    let text: string = (langDict as any)[key] || (fallbackDict as any)[key];
+    if (replacements) {
+      Object.entries(replacements).forEach(([placeholder, value]) => {
+        text = text.replace(`{${placeholder}}`, String(value));
+      });
+    }
+    return text;
+  };
+};

types.ts

@@ -1,3 +1,6 @@
+import { TranslationKey } from './translations';
+
 // No global shared complex types needed for now.
 // Specific types/interfaces are defined within components or services where they are used.
 // Example: export interface Point { x: number; y: number; } if it were broadly used.
+export type TFunction = (key: TranslationKey, replacements?: Record<string, string | number>) => string;

utils/canvasUtils.ts

@@ -1,4 +1,6 @@
 
+import { TFunction } from '../types';
+
 export const getBlankCanvasDataURL = (width: number, height: number): string => {
   const tempCanvas = document.createElement('canvas');
   tempCanvas.width = width;
@@ -25,10 +27,11 @@ export const calculateSHA256 = async (blob: Blob): Promise<string> => {
 
 export const copyToClipboard = async (
     text: string,
-    showInfoToast: (message: string, type: 'info' | 'error') => void // Callback for toast
+    showInfoToast: (message: string, type: 'info' | 'error') => void, // Callback for toast
+    t: TFunction
 ): Promise<boolean> => {
   if (!navigator.clipboard) {
-    showInfoToast('Clipboard API not available.', 'info');
+    showInfoToast(t('clipboardApiNotAvailable'), 'info');
     return false;
   }
   try {
@@ -36,7 +39,7 @@ export const copyToClipboard = async (
     return true;
   } catch (err) {
     console.error('Failed to copy text: ', err);
-    showInfoToast('Failed to copy URL to clipboard.', 'error');
+    showInfoToast(t('failedToCopyUrl'), 'error');
     return false;
   }
 };