From d6a404c87e443d1eefbb5cff2bc527dfd989344c Mon Sep 17 00:00:00 2001
From: Kresna <kresna@usetada.com>
Date: Sun, 2 Aug 2026 15:02:06 +0700
Subject: [PATCH] feat(i18n): localize all 21 Image tool UIs to Bahasa (wave 2)

Every Image island renders Bahasa on /id/ via the lang prop + local TR:{en,id}
(LegacyLetter pattern). Covers convert/view/svg, monochrome, compress/resize/crop,
annotate, watermark/stamp/qr/merge, upscale, object-remove, portrait/face blur,
OCR + receipt scanner, camera, background remove, metadata scrub. Also threads lang
through shared OcrWorkbench/ReceiptFields/CameraCapture. Logic untouched;
format/brand/acronym terms kept; no 'alat'.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ubfx4XocHcECaL8twp9zsr
---
 src/islands/image/BackgroundRemove.tsx |  71 +++++++++---
 src/islands/image/CameraCapture.tsx    |  29 ++++-
 src/islands/image/CameraTool.tsx       |  14 ++-
 src/islands/image/FaceBlur.tsx         |  76 ++++++++++---
 src/islands/image/ImageAnnotate.tsx    | 115 ++++++++++++++++---
 src/islands/image/ImageCompress.tsx    |  56 +++++++--
 src/islands/image/ImageConvert.tsx     |  65 +++++++++--
 src/islands/image/ImageCrop.tsx        |  56 +++++++--
 src/islands/image/ImageMerge.tsx       | 105 ++++++++++++-----
 src/islands/image/ImageOcr.tsx         |  33 ++++--
 src/islands/image/ImageQr.tsx          |  74 +++++++++---
 src/islands/image/ImageResize.tsx      |  80 ++++++++++---
 src/islands/image/ImageScrub.tsx       |  51 +++++++--
 src/islands/image/ImageStamp.tsx       | 101 +++++++++++++----
 src/islands/image/ImageUpscale.tsx     |  73 +++++++++---
 src/islands/image/ImageViewer.tsx      |  91 ++++++++++++---
 src/islands/image/ImageWatermark.tsx   |  72 +++++++++---
 src/islands/image/Monochrome.tsx       |  57 +++++++---
 src/islands/image/ObjectRemove.tsx     | 151 ++++++++++++++++++++-----
 src/islands/image/OcrWorkbench.tsx     |  69 ++++++++---
 src/islands/image/PortraitBlur.tsx     |  78 ++++++++++---
 src/islands/image/ReceiptFields.tsx    |  42 +++++--
 src/islands/image/ReceiptScanner.tsx   |  15 ++-
 src/islands/image/SvgViewer.tsx        |  57 ++++++++--
 24 files changed, 1321 insertions(+), 310 deletions(-)

diff --git a/src/islands/image/BackgroundRemove.tsx b/src/islands/image/BackgroundRemove.tsx
index 0ff3957..d693ef6 100644
--- a/src/islands/image/BackgroundRemove.tsx
+++ b/src/islands/image/BackgroundRemove.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Download } from 'lucide-react';
+import type { Lang } from '@/i18n/config';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
@@ -10,7 +11,52 @@ import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
 
-export default function BackgroundRemove() {
+const TR: Record<Lang, {
+  preparing: string;
+  downloadingModel: string;
+  removingBg: string;
+  removeFailed: string;
+  dropHere: string;
+  dropSub: string;
+  privacyNote: string;
+  working: string;
+  result: string;
+  transparentPng: string;
+  altRemoved: string;
+  downloadPng: string;
+}> = {
+  en: {
+    preparing: 'Preparing…',
+    downloadingModel: 'Downloading AI model…',
+    removingBg: 'Removing background…',
+    removeFailed: 'Background removal failed.',
+    dropHere: 'Drop an image or click to browse',
+    dropSub: 'Removes the background with an on-device AI model · or paste (⌘V)',
+    privacyNote: "Runs entirely in your browser — the image never leaves your device. The first run downloads the AI model (~40 MB), then it's cached for next time.",
+    working: 'Working…',
+    result: 'Result',
+    transparentPng: 'transparent PNG',
+    altRemoved: 'Background removed',
+    downloadPng: 'Download PNG',
+  },
+  id: {
+    preparing: 'Menyiapkan…',
+    downloadingModel: 'Mengunduh model AI…',
+    removingBg: 'Menghapus latar belakang…',
+    removeFailed: 'Gagal menghapus latar belakang.',
+    dropHere: 'Jatuhkan gambar atau klik untuk menjelajah',
+    dropSub: 'Menghapus latar belakang dengan model AI di perangkat · atau tempel (⌘V)',
+    privacyNote: 'Berjalan sepenuhnya di browser Anda — gambar tidak pernah meninggalkan perangkat Anda. Jalankan pertama kali mengunduh model AI (~40 MB), lalu disimpan di cache untuk berikutnya.',
+    working: 'Memproses…',
+    result: 'Hasil',
+    transparentPng: 'PNG transparan',
+    altRemoved: 'Latar belakang dihapus',
+    downloadPng: 'Unduh PNG',
+  },
+};
+
+export default function BackgroundRemove({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [srcName, setSrcName] = useState('');
   const [result, setResult] = useState<Blob | null>(null);
   const [resultUrl, setResultUrl] = useState('');
@@ -29,7 +75,7 @@ export default function BackgroundRemove() {
     setError('');
     setBusy(true);
     setPercent(0);
-    setStage('Preparing…');
+    setStage(t.preparing);
     try {
       // Loaded lazily: the library pulls in onnxruntime-web + lodash (CJS),
       // which isn't server-render-safe, and this keeps it out of the initial bundle.
@@ -41,7 +87,7 @@ export default function BackgroundRemove() {
         progress: (key, current, total) => {
           const pct = total > 0 ? Math.round((current / total) * 100) : 0;
           setPercent(pct);
-          setStage(key.startsWith('fetch') ? 'Downloading AI model…' : 'Removing background…');
+          setStage(key.startsWith('fetch') ? t.downloadingModel : t.removingBg);
         },
       });
       setResult(blob);
@@ -50,7 +96,7 @@ export default function BackgroundRemove() {
         return URL.createObjectURL(blob);
       });
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Background removal failed.');
+      setError(e instanceof Error ? e.message : t.removeFailed);
     } finally {
       setBusy(false);
       setStage('');
@@ -69,21 +115,20 @@ export default function BackgroundRemove() {
     <div className="space-y-4">
       <Dropzone onDrop={run} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
+          <p className="text-lg font-bold">{t.dropHere}</p>
           <p className="text-sm text-muted-foreground">
-            Removes the background with an on-device AI model · or paste (⌘V)
+            {t.dropSub}
           </p>
         </div>
       </Dropzone>
 
       <p className="text-xs text-muted-foreground">
-        Runs entirely in your browser — the image never leaves your device. The first run downloads
-        the AI model (~40&nbsp;MB), then it's cached for next time.
+        {t.privacyNote}
       </p>
 
       {busy && (
         <div className="space-y-2">
-          <ProgressBar percent={percent} label={stage || 'Working…'} />
+          <ProgressBar percent={percent} label={stage || t.working} />
         </div>
       )}
 
@@ -92,18 +137,18 @@ export default function BackgroundRemove() {
       {result && resultUrl && !busy && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             <span className="font-mono">{formatBytes(result.size)}</span>
-            <span className="text-muted-foreground">transparent PNG</span>
+            <span className="text-muted-foreground">{t.transparentPng}</span>
           </div>
           {/* Checkerboard makes the transparency obvious. */}
           <div className="gwt-checkerboard inline-block max-w-full border-2 border-border p-1">
-            <img src={resultUrl} alt="Background removed" className="block max-h-[70vh] w-auto max-w-full" />
+            <img src={resultUrl} alt={t.altRemoved} className="block max-h-[70vh] w-auto max-w-full" />
           </div>
           <div className="flex flex-wrap gap-2">
             <Button onClick={download}>
               <Download className="h-4 w-4" />
-              Download PNG
+              {t.downloadPng}
             </Button>
             <CopyImageButton blob={result} />
             <EditInAnnotatorButton blob={result} filename={(srcName.replace(/\.[^.]+$/, '') || 'image') + '-no-bg.png'} />
diff --git a/src/islands/image/CameraCapture.tsx b/src/islands/image/CameraCapture.tsx
index 2fcbaed..bed6b44 100644
--- a/src/islands/image/CameraCapture.tsx
+++ b/src/islands/image/CameraCapture.tsx
@@ -3,14 +3,31 @@ import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
 import { useCamera } from '@/hooks/useCamera';
 import { frameToFile } from '@/tools/image/camera.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  useDeviceCamera: string; cancel: string; capturing: string; capture: string; switchCamera: string;
+}> = {
+  en: {
+    useDeviceCamera: 'Use device camera', cancel: 'Cancel', capturing: 'Capturing…',
+    capture: 'Capture', switchCamera: 'Switch camera',
+  },
+  id: {
+    useDeviceCamera: 'Gunakan kamera perangkat', cancel: 'Batal', capturing: 'Mengambil…',
+    capture: 'Ambil', switchCamera: 'Ganti kamera',
+  },
+};
 
 export default function CameraCapture({
   onCapture,
   onCancel,
+  lang = 'en',
 }: {
   onCapture: (file: File) => void;
   onCancel: () => void;
+  lang?: Lang;
 }) {
+  const t = TR[lang] ?? TR.en;
   const { videoRef, stream, error, hasMultiple, start, stop, switchCamera } = useCamera();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [busy, setBusy] = useState(false);
@@ -50,19 +67,19 @@ export default function CameraCapture({
         <div className="space-y-2">
           <Alert variant="error">{error.message}</Alert>
           <div className="flex flex-wrap gap-2">
-            <Button variant="secondary" onClick={useDeviceCamera}>Use device camera</Button>
-            <Button variant="ghost" onClick={cancel}>Cancel</Button>
+            <Button variant="secondary" onClick={useDeviceCamera}>{t.useDeviceCamera}</Button>
+            <Button variant="ghost" onClick={cancel}>{t.cancel}</Button>
           </div>
         </div>
       ) : (
         <div className="space-y-3">
           <video ref={videoRef} playsInline muted className="max-h-96 w-auto border-2 border-border" />
           <div className="flex flex-wrap gap-2">
-            <Button onClick={capture} disabled={busy || !stream}>{busy ? 'Capturing…' : 'Capture'}</Button>
-            {hasMultiple && <Button variant="secondary" onClick={switchCamera}>Switch camera</Button>}
+            <Button onClick={capture} disabled={busy || !stream}>{busy ? t.capturing : t.capture}</Button>
+            {hasMultiple && <Button variant="secondary" onClick={switchCamera}>{t.switchCamera}</Button>}
             {/* Always available — opens the OS camera app on phones. */}
-            <Button variant="secondary" onClick={useDeviceCamera}>Use device camera</Button>
-            <Button variant="ghost" onClick={cancel}>Cancel</Button>
+            <Button variant="secondary" onClick={useDeviceCamera}>{t.useDeviceCamera}</Button>
+            <Button variant="ghost" onClick={cancel}>{t.cancel}</Button>
           </div>
         </div>
       )}
diff --git a/src/islands/image/CameraTool.tsx b/src/islands/image/CameraTool.tsx
index 35d5125..3e2048f 100644
--- a/src/islands/image/CameraTool.tsx
+++ b/src/islands/image/CameraTool.tsx
@@ -1,9 +1,16 @@
 import { useState } from 'react';
+import type { Lang } from '@/i18n/config';
 import { Button } from '@/components/ui/Button';
 import { ImageResult } from '@/components/ui/ImageResult';
 import CameraCapture from './CameraCapture';
 
-export default function CameraTool() {
+const TR: Record<Lang, { openCamera: string; retake: string }> = {
+  en: { openCamera: 'Open camera', retake: 'Retake' },
+  id: { openCamera: 'Buka kamera', retake: 'Ambil ulang' },
+};
+
+export default function CameraTool({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [photo, setPhoto] = useState<File | null>(null);
   const [capturing, setCapturing] = useState(true);
 
@@ -13,20 +20,21 @@ export default function CameraTool() {
     <div className="space-y-4">
       {capturing && (
         <CameraCapture
+          lang={lang}
           onCapture={(file) => { setPhoto(file); setCapturing(false); }}
           onCancel={() => setCapturing(false)}
         />
       )}
 
       {!capturing && !photo && (
-        <Button onClick={() => setCapturing(true)}>Open camera</Button>
+        <Button onClick={() => setCapturing(true)}>{t.openCamera}</Button>
       )}
 
       {photo && (
         <div className="space-y-2">
           {/* ImageResult already renders Download / Copy image / Edit in Annotator. */}
           <ImageResult blob={photo} filename={photo.name} />
-          <Button variant="secondary" onClick={retake}>Retake</Button>
+          <Button variant="secondary" onClick={retake}>{t.retake}</Button>
         </div>
       )}
     </div>
diff --git a/src/islands/image/FaceBlur.tsx b/src/islands/image/FaceBlur.tsx
index fc61bb1..8a917ec 100644
--- a/src/islands/image/FaceBlur.tsx
+++ b/src/islands/image/FaceBlur.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { Download } from 'lucide-react';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
@@ -9,6 +9,7 @@ import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { expandBox, type Box } from '@/tools/image/face-blur.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
 type Effect = 'blur' | 'pixelate' | 'solid';
 
@@ -18,6 +19,46 @@ const EFFECTS: { key: Effect; label: string }[] = [
   { key: 'solid', label: 'Solid' },
 ];
 
+const TR: Record<Lang, {
+  dropTitle: string; dropDesc: string; effect: string; effects: Record<Effect, string>;
+  privacy: ReactNode; loadingDetector: string; detecting: string; working: string;
+  errProcess: string; noFaces: string; result: string; facesHidden: (n: number) => string;
+  altBlurred: string; downloadPng: string;
+}> = {
+  en: {
+    dropTitle: 'Drop an image or click to browse',
+    dropDesc: 'Detects and hides faces with on-device AI · or paste (⌘V)',
+    effect: 'Effect',
+    effects: { blur: 'Blur', pixelate: 'Pixelate', solid: 'Solid' },
+    privacy: <>Runs entirely in your browser — the image never leaves your device. Detection is automatic; for privacy-critical images, prefer <strong>Solid</strong> (blur/pixelate can be partly reversed). The first run downloads a small model, then it's cached.</>,
+    loadingDetector: 'Loading face detector…',
+    detecting: 'Detecting faces…',
+    working: 'Working…',
+    errProcess: 'Could not process this image.',
+    noFaces: 'No faces detected in this image.',
+    result: 'Result',
+    facesHidden: (n) => `${n} face${n === 1 ? '' : 's'} hidden`,
+    altBlurred: 'Faces blurred',
+    downloadPng: 'Download PNG',
+  },
+  id: {
+    dropTitle: 'Letakkan gambar atau klik untuk memilih',
+    dropDesc: 'Mendeteksi dan menyembunyikan wajah dengan AI di perangkat · atau tempel (⌘V)',
+    effect: 'Efek',
+    effects: { blur: 'Blur', pixelate: 'Piksel', solid: 'Blok' },
+    privacy: <>Berjalan sepenuhnya di browser Anda — gambar tidak pernah meninggalkan perangkat Anda. Deteksi berjalan otomatis; untuk gambar yang sangat sensitif, pilih <strong>Blok</strong> (blur/piksel bisa sebagian dipulihkan). Penggunaan pertama mengunduh model kecil, lalu di-cache.</>,
+    loadingDetector: 'Memuat pendeteksi wajah…',
+    detecting: 'Mendeteksi wajah…',
+    working: 'Memproses…',
+    errProcess: 'Tidak dapat memproses gambar ini.',
+    noFaces: 'Tidak ada wajah terdeteksi pada gambar ini.',
+    result: 'Hasil',
+    facesHidden: (n) => `${n} wajah disembunyikan`,
+    altBlurred: 'Wajah diburamkan',
+    downloadPng: 'Unduh PNG',
+  },
+};
+
 // Cache the detector across runs so the model loads once.
 let detectorPromise: Promise<{ detect: (img: ImageBitmap) => { detections: { boundingBox?: { originX: number; originY: number; width: number; height: number } }[] } }> | null = null;
 
@@ -68,7 +109,8 @@ function obscure(ctx: CanvasRenderingContext2D, bmp: ImageBitmap, box: Box, effe
   ctx.restore();
 }
 
-export default function FaceBlur() {
+export default function FaceBlur({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [effect, setEffect] = useState<Effect>('blur');
   const [srcName, setSrcName] = useState('');
   const [result, setResult] = useState<Blob | null>(null);
@@ -88,10 +130,10 @@ export default function FaceBlur() {
     setError('');
     setBusy(true);
     try {
-      setStage('Loading face detector…');
+      setStage(t.loadingDetector);
       const detector = await getDetector();
       const bmp = await createImageBitmap(file);
-      setStage('Detecting faces…');
+      setStage(t.detecting);
       const { detections } = detector.detect(bmp);
 
       const canvas = document.createElement('canvas');
@@ -123,7 +165,7 @@ export default function FaceBlur() {
         return URL.createObjectURL(blob);
       });
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not process this image.');
+      setError(e instanceof Error ? e.message : t.errProcess);
     } finally {
       setBusy(false);
       setStage('');
@@ -153,15 +195,15 @@ export default function FaceBlur() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
           <p className="text-sm text-muted-foreground">
-            Detects and hides faces with on-device AI · or paste (⌘V)
+            {t.dropDesc}
           </p>
         </div>
       </Dropzone>
 
       <div className="space-y-1.5">
-        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Effect</span>
+        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.effect}</span>
         <div className="flex flex-wrap gap-2">
           {EFFECTS.map(e => (
             <Button
@@ -171,37 +213,35 @@ export default function FaceBlur() {
               onClick={() => changeEffect(e.key)}
               disabled={busy}
             >
-              {e.label}
+              {t.effects[e.key]}
             </Button>
           ))}
         </div>
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Runs entirely in your browser — the image never leaves your device. Detection is automatic;
-        for privacy-critical images, prefer <strong>Solid</strong> (blur/pixelate can be partly
-        reversed). The first run downloads a small model, then it's cached.
+        {t.privacy}
       </p>
 
-      {busy && <p className="text-sm text-muted-foreground">{stage || 'Working…'}</p>}
+      {busy && <p className="text-sm text-muted-foreground">{stage || t.working}</p>}
       {error && <Alert variant="error">{error}</Alert>}
 
       {faceCount === 0 && !busy && !error && (
-        <Alert variant="error">No faces detected in this image.</Alert>
+        <Alert variant="error">{t.noFaces}</Alert>
       )}
 
       {result && resultUrl && !busy && faceCount !== null && faceCount > 0 && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
-            <span>{faceCount} face{faceCount === 1 ? '' : 's'} hidden</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
+            <span>{t.facesHidden(faceCount)}</span>
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
           </div>
-          <img src={resultUrl} alt="Faces blurred" className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
+          <img src={resultUrl} alt={t.altBlurred} className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
           <div className="flex flex-wrap gap-2">
             <Button onClick={download}>
               <Download className="h-4 w-4" />
-              Download PNG
+              {t.downloadPng}
             </Button>
             <CopyImageButton blob={result} />
           <EditInAnnotatorButton blob={result} filename={(srcName.replace(/\.[^.]+$/, '') || 'image') + '-blurred.png'} />
diff --git a/src/islands/image/ImageAnnotate.tsx b/src/islands/image/ImageAnnotate.tsx
index 6783b63..c69df79 100644
--- a/src/islands/image/ImageAnnotate.tsx
+++ b/src/islands/image/ImageAnnotate.tsx
@@ -21,6 +21,7 @@ import { CopyImageButton } from '@/components/ui/CopyImageButton';
 import { downloadService } from '@/services/download';
 import { usePasteImage } from '@/hooks/usePasteImage';
 import { takePendingImage } from '@/services/handoff';
+import type { Lang } from '@/i18n/config';
 
 type Tool = 'select' | 'rect' | 'ellipse' | 'line' | 'arrow' | 'pencil' | 'highlighter' | 'text' | 'blur';
 
@@ -54,6 +55,85 @@ const TOOLS: { tool: Tool; label: string; Icon: typeof Square }[] = [
   { tool: 'blur', label: 'Blur', Icon: Droplets },
 ];
 
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropHint: string;
+  tools: Record<Tool, string>;
+  importImage: string;
+  importBtn: string;
+  color: string;
+  width: string;
+  rounded: string;
+  undo: string;
+  undoAria: string;
+  redo: string;
+  redoAria: string;
+  clearAnnotations: string;
+  selectHint: string;
+  textPlaceholder: string;
+  downloadPng: string;
+  clear: string;
+}> = {
+  en: {
+    dropTitle: 'Drop an image or click to browse',
+    dropHint: 'Annotate with shapes, arrows, text, highlighter, and blur · Select to move or rename',
+    tools: {
+      select: 'Select / move',
+      rect: 'Rectangle',
+      ellipse: 'Ellipse',
+      line: 'Line',
+      arrow: 'Arrow',
+      pencil: 'Pencil',
+      highlighter: 'Highlighter',
+      text: 'Text',
+      blur: 'Blur',
+    },
+    importImage: 'Import image',
+    importBtn: 'Import',
+    color: 'Color',
+    width: 'Width',
+    rounded: 'Rounded',
+    undo: 'Undo (⌘/Ctrl+Z)',
+    undoAria: 'Undo',
+    redo: 'Redo (⌘/Ctrl+Shift+Z)',
+    redoAria: 'Redo',
+    clearAnnotations: 'Clear annotations',
+    selectHint: 'Drag to move · drag a handle to resize · double-click text to rename · Delete to remove',
+    textPlaceholder: 'Type, then Enter',
+    downloadPng: 'Download PNG',
+    clear: 'Clear',
+  },
+  id: {
+    dropTitle: 'Jatuhkan gambar atau klik untuk memilih',
+    dropHint: 'Anotasi dengan bentuk, panah, teks, penyorot, dan blur · Pilih untuk memindahkan atau mengganti nama',
+    tools: {
+      select: 'Pilih / pindahkan',
+      rect: 'Persegi panjang',
+      ellipse: 'Elips',
+      line: 'Garis',
+      arrow: 'Panah',
+      pencil: 'Pensil',
+      highlighter: 'Penyorot',
+      text: 'Teks',
+      blur: 'Blur',
+    },
+    importImage: 'Impor gambar',
+    importBtn: 'Impor',
+    color: 'Warna',
+    width: 'Tebal',
+    rounded: 'Membulat',
+    undo: 'Urungkan (⌘/Ctrl+Z)',
+    undoAria: 'Urungkan',
+    redo: 'Ulangi (⌘/Ctrl+Shift+Z)',
+    redoAria: 'Ulangi',
+    clearAnnotations: 'Bersihkan anotasi',
+    selectHint: 'Seret untuk memindahkan · seret pegangan untuk mengubah ukuran · klik dua kali teks untuk mengganti nama · Delete untuk menghapus',
+    textPlaceholder: 'Ketik, lalu Enter',
+    downloadPng: 'Unduh PNG',
+    clear: 'Bersihkan',
+  },
+};
+
 function drawPath(ctx: CanvasRenderingContext2D, points: [number, number][]) {
   ctx.beginPath();
   points.forEach(([x, y], i) => (i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y)));
@@ -326,7 +406,8 @@ function resizeShape(s: Shape, id: HandleId, px: number, py: number, ctx: Canvas
   return { ...s, x: nx, y: ny, w: nw, h: nh };
 }
 
-export default function ImageAnnotate() {
+export default function ImageAnnotate({ lang = 'en' }: { lang?: Lang }) {
+  const tr = TR[lang] ?? TR.en;
   const viewRef = useRef<HTMLCanvasElement>(null);
   const baseRef = useRef<HTMLCanvasElement | null>(null);
   const blurRef = useRef<HTMLCanvasElement | null>(null);
@@ -780,9 +861,9 @@ export default function ImageAnnotate() {
       {!file && (
         <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
           <div className="space-y-1">
-            <p className="text-lg font-bold">Drop an image or click to browse</p>
+            <p className="text-lg font-bold">{tr.dropTitle}</p>
             <p className="text-sm text-muted-foreground">
-              Annotate with shapes, arrows, text, highlighter, and blur · Select to move or rename
+              {tr.dropHint}
             </p>
           </div>
         </Dropzone>
@@ -792,12 +873,12 @@ export default function ImageAnnotate() {
         <>
           {/* Toolbar */}
           <div className="flex flex-wrap items-center gap-2">
-            {TOOLS.map(({ tool: t, label, Icon }) => (
+            {TOOLS.map(({ tool: t, Icon }) => (
               <button
                 key={t}
                 onClick={() => { setTool(t); if (t !== 'select') setSelectedIndex(null); }}
                 aria-pressed={tool === t}
-                title={label}
+                title={tr.tools[t]}
                 className={`border-2 border-border p-2 shadow-brutal-sm press-brutal ${
                   tool === t ? 'bg-accent text-accent-foreground' : 'bg-muted'
                 }`}
@@ -811,11 +892,11 @@ export default function ImageAnnotate() {
             {/* Import an image from disk as a movable/resizable overlay. */}
             <button
               onClick={() => importInputRef.current?.click()}
-              title="Import image"
+              title={tr.importImage}
               className="flex items-center gap-1.5 border-2 border-border bg-muted p-2 text-sm font-bold shadow-brutal-sm press-brutal"
             >
               <ImagePlus className="h-4 w-4" />
-              Import
+              {tr.importBtn}
             </button>
             <input
               ref={importInputRef}
@@ -827,7 +908,7 @@ export default function ImageAnnotate() {
 
             <span className="mx-1 h-6 w-0.5 bg-border" />
 
-            <label className="flex items-center gap-1" title="Color">
+            <label className="flex items-center gap-1" title={tr.color}>
               <input
                 type="color"
                 value={color}
@@ -836,7 +917,7 @@ export default function ImageAnnotate() {
               />
             </label>
             <label className="flex items-center gap-2 text-sm">
-              <span className="text-muted-foreground">Width</span>
+              <span className="text-muted-foreground">{tr.width}</span>
               <input
                 type="range"
                 min={2}
@@ -849,26 +930,26 @@ export default function ImageAnnotate() {
             {tool === 'rect' && (
               <label className="flex cursor-pointer items-center gap-2 border-2 border-border bg-muted px-2 py-1.5 text-sm">
                 <input type="checkbox" checked={rounded} onChange={() => setRounded(r => !r)} className="accent-accent" />
-                Rounded
+                {tr.rounded}
               </label>
             )}
 
             <span className="mx-1 h-6 w-0.5 bg-border" />
 
-            <button onClick={undo} disabled={!shapes.length} title="Undo (⌘/Ctrl+Z)" aria-label="Undo" className="border-2 border-border bg-muted p-2 shadow-brutal-sm press-brutal disabled:opacity-30">
+            <button onClick={undo} disabled={!shapes.length} title={tr.undo} aria-label={tr.undoAria} className="border-2 border-border bg-muted p-2 shadow-brutal-sm press-brutal disabled:opacity-30">
               <Undo2 className="h-4 w-4" />
             </button>
-            <button onClick={redo} disabled={!undone.length} title="Redo (⌘/Ctrl+Shift+Z)" aria-label="Redo" className="border-2 border-border bg-muted p-2 shadow-brutal-sm press-brutal disabled:opacity-30">
+            <button onClick={redo} disabled={!undone.length} title={tr.redo} aria-label={tr.redoAria} className="border-2 border-border bg-muted p-2 shadow-brutal-sm press-brutal disabled:opacity-30">
               <Redo2 className="h-4 w-4" />
             </button>
-            <button onClick={clearAll} disabled={!shapes.length} title="Clear annotations" className="border-2 border-border bg-muted p-2 shadow-brutal-sm press-brutal disabled:opacity-30">
+            <button onClick={clearAll} disabled={!shapes.length} title={tr.clearAnnotations} className="border-2 border-border bg-muted p-2 shadow-brutal-sm press-brutal disabled:opacity-30">
               <Trash2 className="h-4 w-4" />
             </button>
           </div>
 
           {tool === 'select' && (
             <p className="text-xs text-muted-foreground">
-              Drag to move · drag a handle to resize · double-click text to rename · Delete to remove
+              {tr.selectHint}
             </p>
           )}
 
@@ -894,7 +975,7 @@ export default function ImageAnnotate() {
                   if (e.key === 'Enter') commitText();
                   if (e.key === 'Escape') { setTextEdit(null); setTextValue(''); }
                 }}
-                placeholder="Type, then Enter"
+                placeholder={tr.textPlaceholder}
                 className="absolute border-2 border-accent bg-white px-1 text-sm text-black outline-none"
                 style={{ left: textEdit.left, top: textEdit.top }}
               />
@@ -904,11 +985,11 @@ export default function ImageAnnotate() {
           <div className="flex flex-wrap gap-2">
             <Button onClick={download}>
               <Download className="h-4 w-4" />
-              Download PNG
+              {tr.downloadPng}
             </Button>
             <CopyImageButton blob={toPngBlob} />
             <Button variant="ghost" onClick={() => { setFile(null); setReady(false); setShapes([]); setUndone([]); }}>
-              Clear
+              {tr.clear}
             </Button>
           </div>
         </>
diff --git a/src/islands/image/ImageCompress.tsx b/src/islands/image/ImageCompress.tsx
index 4fccc0c..5fb3f77 100644
--- a/src/islands/image/ImageCompress.tsx
+++ b/src/islands/image/ImageCompress.tsx
@@ -5,13 +5,47 @@ import { Alert } from '@/components/ui/Alert';
 import { ImageResult } from '@/components/ui/ImageResult';
 import { processImage, formatBytes } from '@/tools/image/canvas.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
 const FORMATS = [
-  { mime: 'image/webp', ext: 'webp', label: 'WebP (smaller)' },
-  { mime: 'image/jpeg', ext: 'jpg', label: 'JPEG' },
+  { mime: 'image/webp', ext: 'webp', label: { en: 'WebP (smaller)', id: 'WebP (lebih kecil)' } },
+  { mime: 'image/jpeg', ext: 'jpg', label: { en: 'JPEG', id: 'JPEG' } },
 ];
 
-export default function ImageCompress() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropHint: string;
+  format: string;
+  quality: string;
+  compressing: string;
+  compress: string;
+  clear: string;
+  failed: string;
+}> = {
+  en: {
+    dropTitle: 'Drop an image or click to browse',
+    dropHint: 'Shrink an image by re-encoding it · or paste (⌘V)',
+    format: 'Format',
+    quality: 'Quality',
+    compressing: 'Compressing…',
+    compress: 'Compress',
+    clear: 'Clear',
+    failed: 'Compression failed',
+  },
+  id: {
+    dropTitle: 'Jatuhkan gambar atau klik untuk menelusuri',
+    dropHint: 'Perkecil ukuran gambar dengan mengode ulang · atau tempel (⌘V)',
+    format: 'Format',
+    quality: 'Kualitas',
+    compressing: 'Mengompres…',
+    compress: 'Kompres',
+    clear: 'Bersihkan',
+    failed: 'Kompresi gagal',
+  },
+};
+
+export default function ImageCompress({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [mime, setMime] = useState('image/webp');
   const [quality, setQuality] = useState(75);
@@ -39,7 +73,7 @@ export default function ImageCompress() {
       const { blob } = await processImage(file, { mimeType: mime, quality: quality / 100 });
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Compression failed');
+      setError(e instanceof Error ? e.message : t.failed);
     } finally {
       setBusy(false);
     }
@@ -49,8 +83,8 @@ export default function ImageCompress() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
-          <p className="text-sm text-muted-foreground">Shrink an image by re-encoding it · or paste (⌘V)</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropHint}</p>
         </div>
       </Dropzone>
 
@@ -62,7 +96,7 @@ export default function ImageCompress() {
 
       <div className="space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Format
+          {t.format}
         </span>
         <div className="flex flex-wrap gap-2">
           {FORMATS.map(({ mime: value, label }) => (
@@ -72,7 +106,7 @@ export default function ImageCompress() {
               aria-pressed={mime === value}
               onClick={() => setMime(value)}
             >
-              {label}
+              {label[lang] ?? label.en}
             </Button>
           ))}
         </div>
@@ -80,7 +114,7 @@ export default function ImageCompress() {
 
       <label className="block space-y-1.5">
         <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          <span>Quality</span>
+          <span>{t.quality}</span>
           <span>{quality}%</span>
         </span>
         <input
@@ -95,10 +129,10 @@ export default function ImageCompress() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || busy}>
-          {busy ? 'Compressing…' : 'Compress'}
+          {busy ? t.compressing : t.compress}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/image/ImageConvert.tsx b/src/islands/image/ImageConvert.tsx
index fde6bda..c464fa5 100644
--- a/src/islands/image/ImageConvert.tsx
+++ b/src/islands/image/ImageConvert.tsx
@@ -6,6 +6,52 @@ import { ImageResult } from '@/components/ui/ImageResult';
 import { processImage } from '@/tools/image/canvas.lib';
 import { imageToIco, imageToGif, imageToSvg, canvasSupportsType } from '@/tools/image/encode.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  drop: string;
+  sub: (avif: boolean) => string;
+  outputFormat: string;
+  quality: string;
+  converting: string;
+  convertTo: (label: string) => string;
+  clear: string;
+  conversionFailed: string;
+  notes: Record<string, string>;
+}> = {
+  en: {
+    drop: 'Drop an image or click to browse',
+    sub: (avif) => `Convert to PNG, JPEG, WebP${avif ? ', AVIF' : ''}, GIF, ICO, or SVG · or paste (⌘V)`,
+    outputFormat: 'Output format',
+    quality: 'Quality',
+    converting: 'Converting…',
+    convertTo: (label) => `Convert to ${label}`,
+    clear: 'Clear',
+    conversionFailed: 'Conversion failed',
+    notes: {
+      avif: 'AVIF (AV1 image) — great compression, modern browsers.',
+      gif: 'Single frame, 256 colors.',
+      ico: 'Multi-size favicon: 16, 32, and 48px in one .ico.',
+      svg: 'Wraps the image inside an SVG (embedded, not vectorized).',
+    },
+  },
+  id: {
+    drop: 'Letakkan gambar atau klik untuk memilih',
+    sub: (avif) => `Konversi ke PNG, JPEG, WebP${avif ? ', AVIF' : ''}, GIF, ICO, atau SVG · atau tempel (⌘V)`,
+    outputFormat: 'Format keluaran',
+    quality: 'Kualitas',
+    converting: 'Mengonversi…',
+    convertTo: (label) => `Konversi ke ${label}`,
+    clear: 'Bersihkan',
+    conversionFailed: 'Konversi gagal',
+    notes: {
+      avif: 'AVIF (AV1 image) — kompresi bagus, browser modern.',
+      gif: 'Satu frame, 256 warna.',
+      ico: 'Favicon multi-ukuran: 16, 32, dan 48px dalam satu .ico.',
+      svg: 'Membungkus gambar di dalam SVG (disematkan, bukan divektorkan).',
+    },
+  },
+};
 
 type Kind = 'canvas' | 'ico' | 'gif' | 'svg';
 
@@ -51,7 +97,8 @@ const FORMATS: Format[] = [
   },
 ];
 
-export default function ImageConvert() {
+export default function ImageConvert({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [key, setKey] = useState('png');
   const [quality, setQuality] = useState(90);
@@ -95,7 +142,7 @@ export default function ImageConvert() {
       }
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Conversion failed');
+      setError(e instanceof Error ? e.message : t.conversionFailed);
     } finally {
       setBusy(false);
     }
@@ -105,9 +152,9 @@ export default function ImageConvert() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
+          <p className="text-lg font-bold">{t.drop}</p>
           <p className="text-sm text-muted-foreground">
-            Convert to PNG, JPEG, WebP{avifOk ? ', AVIF' : ''}, GIF, ICO, or SVG · or paste (⌘V)
+            {t.sub(avifOk)}
           </p>
         </div>
       </Dropzone>
@@ -116,7 +163,7 @@ export default function ImageConvert() {
 
       <div className="space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Output format
+          {t.outputFormat}
         </span>
         <div className="flex flex-wrap gap-2">
           {available.map(f => (
@@ -130,13 +177,13 @@ export default function ImageConvert() {
             </Button>
           ))}
         </div>
-        {fmt.note && <p className="text-xs text-muted-foreground">{fmt.note}</p>}
+        {fmt.note && <p className="text-xs text-muted-foreground">{t.notes[fmt.key] ?? fmt.note}</p>}
       </div>
 
       {fmt.lossy && (
         <label className="block space-y-1.5">
           <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            <span>Quality</span>
+            <span>{t.quality}</span>
             <span>{quality}%</span>
           </span>
           <input
@@ -152,10 +199,10 @@ export default function ImageConvert() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || busy}>
-          {busy ? 'Converting…' : `Convert to ${fmt.label}`}
+          {busy ? t.converting : t.convertTo(fmt.label)}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/image/ImageCrop.tsx b/src/islands/image/ImageCrop.tsx
index ac1f19a..bb79c6f 100644
--- a/src/islands/image/ImageCrop.tsx
+++ b/src/islands/image/ImageCrop.tsx
@@ -5,6 +5,7 @@ import { Alert } from '@/components/ui/Alert';
 import { ImageResult } from '@/components/ui/ImageResult';
 import { cropImage, keepFormat } from '@/tools/image/canvas.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
 interface Rect {
   x: number;
@@ -15,7 +16,43 @@ interface Rect {
 type Mode = 'draw' | 'body' | 'nw' | 'ne' | 'sw' | 'se';
 const CORNERS = ['nw', 'ne', 'sw', 'se'] as const;
 
-export default function ImageCrop() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropHint: string;
+  sourceAlt: string;
+  fileHint: string;
+  selectFirst: string;
+  cropFailed: string;
+  cropping: string;
+  crop: string;
+  clear: string;
+}> = {
+  en: {
+    dropTitle: 'Drop an image or click to browse',
+    dropHint: 'Drag the crop box; resize it from the corners · or paste (⌘V)',
+    sourceAlt: 'Source',
+    fileHint: ' — drag the box to move, corners to resize · ',
+    selectFirst: 'Draw or adjust a selection first.',
+    cropFailed: 'Crop failed',
+    cropping: 'Cropping…',
+    crop: 'Crop',
+    clear: 'Clear',
+  },
+  id: {
+    dropTitle: 'Jatuhkan gambar atau klik untuk memilih',
+    dropHint: 'Seret kotak crop; ubah ukuran dari sudutnya · atau tempel (⌘V)',
+    sourceAlt: 'Sumber',
+    fileHint: ' — seret kotak untuk memindahkan, sudut untuk mengubah ukuran · ',
+    selectFirst: 'Gambar atau sesuaikan seleksi terlebih dahulu.',
+    cropFailed: 'Crop gagal',
+    cropping: 'Memotong…',
+    crop: 'Potong',
+    clear: 'Bersihkan',
+  },
+};
+
+export default function ImageCrop({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const imgRef = useRef<HTMLImageElement>(null);
   const action = useRef<{ mode: Mode; sx: number; sy: number; start: Rect } | null>(null);
   const [file, setFile] = useState<File | null>(null);
@@ -107,7 +144,7 @@ export default function ImageCrop() {
   const crop = async () => {
     const img = imgRef.current;
     if (!file || !img || !sel || sel.w < 2 || sel.h < 2) {
-      setError('Draw or adjust a selection first.');
+      setError(t.selectFirst);
       return;
     }
     const s = img.naturalWidth / img.clientWidth;
@@ -123,7 +160,7 @@ export default function ImageCrop() {
       });
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Crop failed');
+      setError(e instanceof Error ? e.message : t.cropFailed);
     } finally {
       setBusy(false);
     }
@@ -138,8 +175,8 @@ export default function ImageCrop() {
       {!file && (
         <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
           <div className="space-y-1">
-            <p className="text-lg font-bold">Drop an image or click to browse</p>
-            <p className="text-sm text-muted-foreground">Drag the crop box; resize it from the corners · or paste (⌘V)</p>
+            <p className="text-lg font-bold">{t.dropTitle}</p>
+            <p className="text-sm text-muted-foreground">{t.dropHint}</p>
           </div>
         </Dropzone>
       )}
@@ -147,8 +184,7 @@ export default function ImageCrop() {
       {file && srcUrl && (
         <>
           <p className="text-sm text-muted-foreground">
-            <span className="font-bold text-foreground">{file.name}</span> — drag the box to move,
-            corners to resize · {natW}×{natH}
+            <span className="font-bold text-foreground">{file.name}</span>{t.fileHint}{natW}×{natH}
           </p>
           <div
             className="relative inline-block max-w-full touch-none select-none overflow-hidden border-2 border-border bg-muted"
@@ -159,7 +195,7 @@ export default function ImageCrop() {
             <img
               ref={imgRef}
               src={srcUrl}
-              alt="Source"
+              alt={t.sourceAlt}
               draggable={false}
               onLoad={onImgLoad}
               className="block h-auto w-auto min-w-[70vw] max-w-full"
@@ -219,10 +255,10 @@ export default function ImageCrop() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={crop} disabled={!file || busy}>
-          {busy ? 'Cropping…' : 'Crop'}
+          {busy ? t.cropping : t.crop}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setSrcUrl(''); setSel(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/image/ImageMerge.tsx b/src/islands/image/ImageMerge.tsx
index 7ef6885..c8ac8aa 100644
--- a/src/islands/image/ImageMerge.tsx
+++ b/src/islands/image/ImageMerge.tsx
@@ -6,6 +6,7 @@ import { Alert } from '@/components/ui/Alert';
 import { ImageResult } from '@/components/ui/ImageResult';
 import { mergeImages, type MergeDirection } from '@/tools/image/merge.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
 interface Item {
   id: string;
@@ -15,8 +16,57 @@ interface Item {
 
 let counter = 0;
 
+const TR: Record<Lang, {
+  columns: string;
+  colAria: (c: number) => string;
+  colSummary: (cols: number, rows: number) => string;
+  drop: string; dropSub: string;
+  moveUp: string; moveDown: string; remove: string;
+  direction: string; vertical: string; horizontal: string; grid: string;
+  chooseGridColumns: string; gap: string;
+  match: (horizontal: boolean) => string;
+  transparent: string; background: string;
+  gridSummary: (cols: number, rows: number) => string; change: string;
+  merging: string; mergeBtn: (n: number) => string; clear: string;
+  errMin: string; failed: string;
+}> = {
+  en: {
+    columns: 'Columns',
+    colAria: c => `${c} column${c > 1 ? 's' : ''}`,
+    colSummary: (cols, rows) => `${cols} column${cols > 1 ? 's' : ''} × ${rows} row${rows > 1 ? 's' : ''}`,
+    drop: 'Drop images or click to browse',
+    dropSub: 'Combine multiple images into one · reorder them below · or paste (⌘V)',
+    moveUp: 'Move up', moveDown: 'Move down', remove: 'Remove',
+    direction: 'Direction', vertical: 'Vertical', horizontal: 'Horizontal', grid: 'Grid',
+    chooseGridColumns: 'Choose grid columns', gap: 'Gap (px)',
+    match: horizontal => `Match ${horizontal ? 'heights' : 'widths'}`,
+    transparent: 'Transparent', background: 'Background',
+    gridSummary: (cols, rows) => `${cols} column${cols > 1 ? 's' : ''} × ${rows} rows —`,
+    change: 'change',
+    merging: 'Merging…', mergeBtn: n => `Merge ${n || ''} images`.trim(), clear: 'Clear',
+    errMin: 'Add at least two images to merge.', failed: 'Merge failed',
+  },
+  id: {
+    columns: 'Kolom',
+    colAria: c => `${c} kolom`,
+    colSummary: (cols, rows) => `${cols} kolom × ${rows} baris`,
+    drop: 'Letakkan gambar atau klik untuk telusuri',
+    dropSub: 'Gabungkan beberapa gambar menjadi satu · atur ulang urutannya di bawah · atau tempel (⌘V)',
+    moveUp: 'Naikkan', moveDown: 'Turunkan', remove: 'Hapus',
+    direction: 'Arah', vertical: 'Vertikal', horizontal: 'Horizontal', grid: 'Grid',
+    chooseGridColumns: 'Pilih kolom grid', gap: 'Jarak (px)',
+    match: horizontal => `Samakan ${horizontal ? 'tinggi' : 'lebar'}`,
+    transparent: 'Transparan', background: 'Latar belakang',
+    gridSummary: (cols, rows) => `${cols} kolom × ${rows} baris —`,
+    change: 'ubah',
+    merging: 'Menggabungkan…', mergeBtn: n => `Gabungkan ${n || ''} gambar`.trim(), clear: 'Bersihkan',
+    errMin: 'Tambahkan minimal dua gambar untuk digabungkan.', failed: 'Gagal menggabungkan',
+  },
+};
+
 /** Google-Docs-style grid picker: hover/click a cell to choose the column count. */
-function ColumnPicker({ count, columns, onChange }: { count: number; columns: number; onChange: (cols: number) => void }) {
+function ColumnPicker({ count, columns, onChange, lang }: { count: number; columns: number; onChange: (cols: number) => void; lang: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [hover, setHover] = useState(0);
   const maxCols = Math.min(8, Math.max(1, count));
   const active = hover || columns;
@@ -26,7 +76,7 @@ function ColumnPicker({ count, columns, onChange }: { count: number; columns: nu
 
   return (
     <div className="space-y-1.5">
-      <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Columns</span>
+      <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.columns}</span>
       <div
         className="inline-grid gap-1 border-2 border-border bg-muted p-2"
         style={{ gridTemplateColumns: `repeat(${maxCols}, 1.25rem)` }}
@@ -43,20 +93,21 @@ function ColumnPicker({ count, columns, onChange }: { count: number; columns: nu
               onMouseEnter={() => setHover(c)}
               onFocus={() => setHover(c)}
               onClick={() => onChange(c)}
-              aria-label={`${c} column${c > 1 ? 's' : ''}`}
+              aria-label={t.colAria(c)}
               className={`h-5 w-5 border-2 ${on ? 'border-accent bg-accent/40' : 'border-border bg-background'}`}
             />
           );
         })}
       </div>
       <p className="text-xs text-muted-foreground">
-        {active} column{active > 1 ? 's' : ''} × {Math.ceil(count / active)} row{Math.ceil(count / active) > 1 ? 's' : ''}
+        {t.colSummary(active, Math.ceil(count / active))}
       </p>
     </div>
   );
 }
 
-export default function ImageMerge() {
+export default function ImageMerge({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [items, setItems] = useState<Item[]>([]);
   const [direction, setDirection] = useState<MergeDirection>('vertical');
   const [gap, setGap] = useState(0);
@@ -105,7 +156,7 @@ export default function ImageMerge() {
 
   const run = async () => {
     if (items.length < 2) {
-      setError('Add at least two images to merge.');
+      setError(t.errMin);
       return;
     }
     setBusy(true);
@@ -121,7 +172,7 @@ export default function ImageMerge() {
       });
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Merge failed');
+      setError(e instanceof Error ? e.message : t.failed);
     } finally {
       setBusy(false);
     }
@@ -131,9 +182,9 @@ export default function ImageMerge() {
     <div className="space-y-4">
       <Dropzone onDrop={addFiles} accept="image/*" multiple>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop images or click to browse</p>
+          <p className="text-lg font-bold">{t.drop}</p>
           <p className="text-sm text-muted-foreground">
-            Combine multiple images into one · reorder them below · or paste (⌘V)
+            {t.dropSub}
           </p>
         </div>
       </Dropzone>
@@ -148,7 +199,7 @@ export default function ImageMerge() {
               <button
                 onClick={() => move(i, -1)}
                 disabled={i === 0}
-                title="Move up"
+                title={t.moveUp}
                 className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal disabled:opacity-30"
               >
                 <ArrowUp className="h-4 w-4" />
@@ -156,14 +207,14 @@ export default function ImageMerge() {
               <button
                 onClick={() => move(i, 1)}
                 disabled={i === items.length - 1}
-                title="Move down"
+                title={t.moveDown}
                 className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal disabled:opacity-30"
               >
                 <ArrowDown className="h-4 w-4" />
               </button>
               <button
                 onClick={() => remove(item.id)}
-                title="Remove"
+                title={t.remove}
                 className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal"
               >
                 <X className="h-4 w-4" />
@@ -176,15 +227,15 @@ export default function ImageMerge() {
       {items.length > 0 && (
         <div className="flex flex-wrap items-end gap-4">
           <div ref={directionRef} className="space-y-1.5">
-            <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Direction</span>
+            <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.direction}</span>
             <div className="flex gap-2">
               <Button variant={direction === 'vertical' ? 'primary' : 'secondary'} aria-pressed={direction === 'vertical'} onClick={() => { setDirection('vertical'); setPickerOpen(false); }}>
                 <MoveVertical className="h-4 w-4" />
-                Vertical
+                {t.vertical}
               </Button>
               <Button variant={direction === 'horizontal' ? 'primary' : 'secondary'} aria-pressed={direction === 'horizontal'} onClick={() => { setDirection('horizontal'); setPickerOpen(false); }}>
                 <MoveHorizontal className="h-4 w-4" />
-                Horizontal
+                {t.horizontal}
               </Button>
               {/* The picker anchors to this button, dropping straight below it like a select menu. */}
               <div className="relative">
@@ -196,14 +247,14 @@ export default function ImageMerge() {
                   onClick={() => { if (direction === 'grid') { setPickerOpen(o => !o); } else { setDirection('grid'); setPickerOpen(true); } }}
                 >
                   <LayoutGrid className="h-4 w-4" />
-                  Grid
+                  {t.grid}
                   <ChevronDown className={`h-3.5 w-3.5 transition-transform ${direction === 'grid' && pickerOpen ? 'rotate-180' : ''}`} />
                 </Button>
 
                 {direction === 'grid' && pickerOpen && (
                   <div
                     role="dialog"
-                    aria-label="Choose grid columns"
+                    aria-label={t.chooseGridColumns}
                     className="absolute left-0 bottom-full z-30 mb-2 origin-bottom border-2 border-border bg-background p-3 shadow-brutal"
                     style={{ animation: 'gwtDropup 150ms ease-out' }}
                   >
@@ -211,6 +262,7 @@ export default function ImageMerge() {
                       count={items.length}
                       columns={columns}
                       onChange={c => { setColumns(c); setPickerOpen(false); }}
+                      lang={lang}
                     />
                   </div>
                 )}
@@ -219,7 +271,7 @@ export default function ImageMerge() {
           </div>
 
           <label className="space-y-1.5 text-sm">
-            <span className="block font-bold uppercase tracking-wide text-muted-foreground">Gap (px)</span>
+            <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.gap}</span>
             <input
               type="number"
               min={0}
@@ -231,17 +283,17 @@ export default function ImageMerge() {
 
           <label className="flex cursor-pointer items-center gap-2 border-2 border-border bg-muted px-3 py-2 text-sm">
             <input type="checkbox" checked={match} onChange={() => setMatch(m => !m)} className="accent-accent" />
-            Match {direction === 'horizontal' ? 'heights' : 'widths'}
+            {t.match(direction === 'horizontal')}
           </label>
 
           <label className="flex cursor-pointer items-center gap-2 border-2 border-border bg-muted px-3 py-2 text-sm">
             <input type="checkbox" checked={transparent} onChange={() => setTransparent(t => !t)} className="accent-accent" />
-            Transparent
+            {t.transparent}
           </label>
 
           {!transparent && (
-            <label className="flex items-center gap-2 text-sm" title="Background">
-              <span className="text-muted-foreground">Background</span>
+            <label className="flex items-center gap-2 text-sm" title={t.background}>
+              <span className="text-muted-foreground">{t.background}</span>
               <input
                 type="color"
                 value={background}
@@ -256,20 +308,19 @@ export default function ImageMerge() {
       {/* Summary lives on its own line so entering grid mode never shifts the options row. */}
       {items.length > 0 && direction === 'grid' && (
         <p className="text-xs text-muted-foreground">
-          {Math.min(columns, items.length)} column{Math.min(columns, items.length) > 1 ? 's' : ''} ×{' '}
-          {Math.ceil(items.length / Math.min(columns, items.length || 1))} rows —{' '}
+          {t.gridSummary(Math.min(columns, items.length), Math.ceil(items.length / Math.min(columns, items.length || 1)))}{' '}
           <button type="button" onClick={() => setPickerOpen(true)} className="font-bold text-accent underline">
-            change
+            {t.change}
           </button>
         </p>
       )}
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={items.length < 2 || busy}>
-          {busy ? 'Merging…' : `Merge ${items.length || ''} images`.trim()}
+          {busy ? t.merging : t.mergeBtn(items.length)}
         </Button>
         <Button variant="ghost" onClick={() => { setItems([]); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/image/ImageOcr.tsx b/src/islands/image/ImageOcr.tsx
index 3baeb05..7c49ffe 100644
--- a/src/islands/image/ImageOcr.tsx
+++ b/src/islands/image/ImageOcr.tsx
@@ -7,8 +7,27 @@ import { type OcrResult } from '@/tools/image/ocr.lib';
 import { parseReceipt } from '@/tools/image/receipt.lib';
 import OcrWorkbench from './OcrWorkbench';
 import ReceiptFields from './ReceiptFields';
+import type { Lang } from '@/i18n/config';
 
-export default function ImageOcr() {
+const TR: Record<Lang, {
+  wasmNote: string; recognizedText: string; downloadTxt: string; parseAsReceipt: string;
+}> = {
+  en: {
+    wasmNote: 'Ran in slower CPU (WASM) mode — WebGPU isn’t available in this browser.',
+    recognizedText: 'Recognized text',
+    downloadTxt: 'Download .txt',
+    parseAsReceipt: 'Parse as receipt',
+  },
+  id: {
+    wasmNote: 'Berjalan dalam mode CPU yang lebih lambat (WASM) — WebGPU tidak tersedia di browser ini.',
+    recognizedText: 'Teks yang dikenali',
+    downloadTxt: 'Unduh .txt',
+    parseAsReceipt: 'Uraikan sebagai struk',
+  },
+};
+
+export default function ImageOcr({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [result, setResult] = useState<OcrResult | null>(null);
   const [text, setText] = useState('');
   const [asReceipt, setAsReceipt] = useState(false);
@@ -21,26 +40,26 @@ export default function ImageOcr() {
 
   return (
     <div className="space-y-4">
-      <OcrWorkbench onResult={setResult} onReset={() => setResult(null)} />
+      <OcrWorkbench onResult={setResult} onReset={() => setResult(null)} lang={lang} />
 
       {result && (
         <div className="space-y-2">
           {result.backend === 'wasm' && (
             <p className="text-xs text-muted-foreground">
-              Ran in slower CPU (WASM) mode — WebGPU isn’t available in this browser.
+              {t.wasmNote}
             </p>
           )}
-          <TextArea label="Recognized text" value={text} onChange={(e) => setText(e.target.value)} rows={12} />
+          <TextArea label={t.recognizedText} value={text} onChange={(e) => setText(e.target.value)} rows={12} />
           <div className="flex gap-2">
             <CopyButton value={text} />
-            <Button variant="secondary" onClick={download}>Download .txt</Button>
+            <Button variant="secondary" onClick={download}>{t.downloadTxt}</Button>
           </div>
 
           <label className="flex items-center gap-2 text-sm font-bold">
             <input type="checkbox" checked={asReceipt} onChange={(e) => setAsReceipt(e.target.checked)} />
-            Parse as receipt
+            {t.parseAsReceipt}
           </label>
-          {asReceipt && receipt && <ReceiptFields data={receipt} />}
+          {asReceipt && receipt && <ReceiptFields data={receipt} lang={lang} />}
         </div>
       )}
     </div>
diff --git a/src/islands/image/ImageQr.tsx b/src/islands/image/ImageQr.tsx
index 56c64b1..2af511f 100644
--- a/src/islands/image/ImageQr.tsx
+++ b/src/islands/image/ImageQr.tsx
@@ -6,6 +6,7 @@ import { ImageResult } from '@/components/ui/ImageResult';
 import { keepFormat } from '@/tools/image/canvas.lib';
 import { overlayQr, type QrCorner } from '@/tools/image/qr-overlay.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
 const CORNERS: { value: QrCorner; label: string }[] = [
   { value: 'top-left', label: 'Top left' },
@@ -14,7 +15,54 @@ const CORNERS: { value: QrCorner; label: string }[] = [
   { value: 'bottom-right', label: 'Bottom right' },
 ];
 
-export default function ImageQr() {
+const TR: Record<Lang, {
+  drop: string; dropSub: string; qrContent: string;
+  corner: string; corners: Record<QrCorner, string>;
+  size: string; backing: string; whiteCard: string;
+  add: string; adding: string; clear: string; failed: string;
+}> = {
+  en: {
+    drop: 'Drop an image or click to browse',
+    dropSub: 'Add a QR code to a corner of an image · or paste (⌘V)',
+    qrContent: 'QR content (text or URL)',
+    corner: 'Corner',
+    corners: {
+      'top-left': 'Top left',
+      'top-right': 'Top right',
+      'bottom-left': 'Bottom left',
+      'bottom-right': 'Bottom right',
+    },
+    size: 'Size',
+    backing: 'Backing',
+    whiteCard: 'White card',
+    add: 'Add QR',
+    adding: 'Adding…',
+    clear: 'Clear',
+    failed: 'Could not add the QR code',
+  },
+  id: {
+    drop: 'Letakkan gambar atau klik untuk telusuri',
+    dropSub: 'Tambahkan kode QR ke sudut gambar · atau tempel (⌘V)',
+    qrContent: 'Konten QR (teks atau URL)',
+    corner: 'Sudut',
+    corners: {
+      'top-left': 'Kiri atas',
+      'top-right': 'Kanan atas',
+      'bottom-left': 'Kiri bawah',
+      'bottom-right': 'Kanan bawah',
+    },
+    size: 'Ukuran',
+    backing: 'Alas',
+    whiteCard: 'Kartu putih',
+    add: 'Tambah QR',
+    adding: 'Menambahkan…',
+    clear: 'Bersihkan',
+    failed: 'Tidak dapat menambahkan kode QR',
+  },
+};
+
+export default function ImageQr({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [content, setContent] = useState('https://goodwebtools.com');
   const [corner, setCorner] = useState<QrCorner>('bottom-right');
@@ -50,7 +98,7 @@ export default function ImageQr() {
       });
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not add the QR code');
+      setError(e instanceof Error ? e.message : t.failed);
     } finally {
       setBusy(false);
     }
@@ -60,8 +108,8 @@ export default function ImageQr() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
-          <p className="text-sm text-muted-foreground">Add a QR code to a corner of an image · or paste (⌘V)</p>
+          <p className="text-lg font-bold">{t.drop}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSub}</p>
         </div>
       </Dropzone>
 
@@ -69,7 +117,7 @@ export default function ImageQr() {
 
       <label className="block space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          QR content (text or URL)
+          {t.qrContent}
         </span>
         <input
           value={content}
@@ -80,17 +128,17 @@ export default function ImageQr() {
 
       <div className="space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Corner
+          {t.corner}
         </span>
         <div className="flex flex-wrap gap-2">
-          {CORNERS.map(({ value, label }) => (
+          {CORNERS.map(({ value }) => (
             <Button
               key={value}
               variant={corner === value ? 'primary' : 'secondary'}
               aria-pressed={corner === value}
               onClick={() => setCorner(value)}
             >
-              {label}
+              {t.corners[value]}
             </Button>
           ))}
         </div>
@@ -99,7 +147,7 @@ export default function ImageQr() {
       <div className="flex flex-wrap items-end gap-6">
         <label className="flex-1 space-y-1.5">
           <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            <span>Size</span>
+            <span>{t.size}</span>
             <span>{sizePercent}%</span>
           </span>
           <input
@@ -113,20 +161,20 @@ export default function ImageQr() {
         </label>
         <div className="space-y-1.5">
           <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            Backing
+            {t.backing}
           </span>
           <Button variant={card ? 'primary' : 'secondary'} aria-pressed={card} onClick={() => setCard(c => !c)}>
-            White card
+            {t.whiteCard}
           </Button>
         </div>
       </div>
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || !content.trim() || busy}>
-          {busy ? 'Adding…' : 'Add QR'}
+          {busy ? t.adding : t.add}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/image/ImageResize.tsx b/src/islands/image/ImageResize.tsx
index 1a4155f..5ab446e 100644
--- a/src/islands/image/ImageResize.tsx
+++ b/src/islands/image/ImageResize.tsx
@@ -5,16 +5,68 @@ import { Alert } from '@/components/ui/Alert';
 import { ImageResult } from '@/components/ui/ImageResult';
 import { processImage, scaleToWidth, scaleToHeight } from '@/tools/image/canvas.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
 const MAX_DISPLAY = 760; // px the "fit" preview occupies
 
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropHint: string;
+  couldNotRead: string;
+  original: string;
+  previewAlt: string;
+  dragToResize: string;
+  width: string;
+  height: string;
+  lockAspect: string;
+  reset: string;
+  resizing: string;
+  resize: string;
+  clear: string;
+  failed: string;
+}> = {
+  en: {
+    dropTitle: 'Drop an image or click to browse',
+    dropHint: 'Drag the corner handle or type exact sizes · or paste (⌘V)',
+    couldNotRead: 'Could not read this image.',
+    original: 'original',
+    previewAlt: 'Resize preview',
+    dragToResize: 'Drag to resize',
+    width: 'Width',
+    height: 'Height',
+    lockAspect: 'Lock aspect ratio',
+    reset: 'Reset',
+    resizing: 'Resizing…',
+    resize: 'Resize',
+    clear: 'Clear',
+    failed: 'Resize failed',
+  },
+  id: {
+    dropTitle: 'Jatuhkan gambar atau klik untuk menelusuri',
+    dropHint: 'Seret gagang sudut atau ketik ukuran persis · atau tempel (⌘V)',
+    couldNotRead: 'Tidak dapat membaca gambar ini.',
+    original: 'asli',
+    previewAlt: 'Pratinjau perubahan ukuran',
+    dragToResize: 'Seret untuk mengubah ukuran',
+    width: 'Lebar',
+    height: 'Tinggi',
+    lockAspect: 'Kunci rasio aspek',
+    reset: 'Atur ulang',
+    resizing: 'Mengubah ukuran…',
+    resize: 'Ubah ukuran',
+    clear: 'Bersihkan',
+    failed: 'Perubahan ukuran gagal',
+  },
+};
+
 function outputFormat(type: string): { mime: string; ext: string } {
   if (type === 'image/jpeg') return { mime: 'image/jpeg', ext: 'jpg' };
   if (type === 'image/webp') return { mime: 'image/webp', ext: 'webp' };
   return { mime: 'image/png', ext: 'png' };
 }
 
-export default function ImageResize() {
+export default function ImageResize({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [srcUrl, setSrcUrl] = useState('');
   const [orig, setOrig] = useState<{ w: number; h: number } | null>(null);
@@ -48,7 +100,7 @@ export default function ImageResize() {
       setHeight(bitmap.height);
       bitmap.close?.();
     } catch {
-      setError('Could not read this image.');
+      setError(t.couldNotRead);
       setFile(null);
     }
   };
@@ -113,7 +165,7 @@ export default function ImageResize() {
       });
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Resize failed');
+      setError(e instanceof Error ? e.message : t.failed);
     } finally {
       setBusy(false);
     }
@@ -124,8 +176,8 @@ export default function ImageResize() {
       {!file && (
         <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
           <div className="space-y-1">
-            <p className="text-lg font-bold">Drop an image or click to browse</p>
-            <p className="text-sm text-muted-foreground">Drag the corner handle or type exact sizes · or paste (⌘V)</p>
+            <p className="text-lg font-bold">{t.dropTitle}</p>
+            <p className="text-sm text-muted-foreground">{t.dropHint}</p>
           </div>
         </Dropzone>
       )}
@@ -133,7 +185,7 @@ export default function ImageResize() {
       {file && orig && srcUrl && (
         <>
           <p className="text-sm text-muted-foreground">
-            <span className="font-bold text-foreground">{file.name}</span> — original {orig.w}×
+            <span className="font-bold text-foreground">{file.name}</span> — {t.original} {orig.w}×
             {orig.h}
           </p>
 
@@ -145,7 +197,7 @@ export default function ImageResize() {
             >
               <img
                 src={srcUrl}
-                alt="Resize preview"
+                alt={t.previewAlt}
                 draggable={false}
                 className="block h-full w-full border-2 border-border bg-white"
               />
@@ -157,7 +209,7 @@ export default function ImageResize() {
                 onPointerMove={onHandleMove}
                 onPointerUp={onHandleUp}
                 className="absolute -bottom-2 -right-2 h-5 w-5 cursor-nwse-resize border-2 border-border bg-accent shadow-brutal-sm"
-                aria-label="Drag to resize"
+                aria-label={t.dragToResize}
                 role="slider"
                 aria-valuenow={width}
               />
@@ -167,7 +219,7 @@ export default function ImageResize() {
           <div className="flex flex-wrap items-end gap-4">
             <label className="space-y-1 text-sm">
               <span className="block font-bold uppercase tracking-wide text-muted-foreground">
-                Width
+                {t.width}
               </span>
               <input
                 type="number"
@@ -179,7 +231,7 @@ export default function ImageResize() {
             </label>
             <label className="space-y-1 text-sm">
               <span className="block font-bold uppercase tracking-wide text-muted-foreground">
-                Height
+                {t.height}
               </span>
               <input
                 type="number"
@@ -191,13 +243,13 @@ export default function ImageResize() {
             </label>
             <label className="flex cursor-pointer items-center gap-2 border-2 border-border bg-muted px-3 py-2 text-sm">
               <input type="checkbox" checked={lock} onChange={() => setLock(p => !p)} className="accent-accent" />
-              Lock aspect ratio
+              {t.lockAspect}
             </label>
             <Button
               variant="secondary"
               onClick={() => { changeWidth(orig.w); if (!lock) setHeight(orig.h); }}
             >
-              Reset
+              {t.reset}
             </Button>
           </div>
         </>
@@ -205,10 +257,10 @@ export default function ImageResize() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || busy}>
-          {busy ? 'Resizing…' : 'Resize'}
+          {busy ? t.resizing : t.resize}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setSrcUrl(''); setOrig(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/image/ImageScrub.tsx b/src/islands/image/ImageScrub.tsx
index f02072c..bddf1b2 100644
--- a/src/islands/image/ImageScrub.tsx
+++ b/src/islands/image/ImageScrub.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import type { Lang } from '@/i18n/config';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
@@ -6,13 +7,46 @@ import { ImageResult } from '@/components/ui/ImageResult';
 import { processImage, formatBytes } from '@/tools/image/canvas.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
 
+const TR: Record<Lang, {
+  processFailed: string;
+  dropHere: string;
+  dropSub: string;
+  privacyNote: string;
+  cleaning: string;
+  removeMetadata: string;
+  clear: string;
+  success: string;
+}> = {
+  en: {
+    processFailed: 'Could not process this image',
+    dropHere: 'Drop an image or click to browse',
+    dropSub: 'Strip EXIF, GPS location, and all other metadata · or paste (⌘V)',
+    privacyNote: 'Re-encoding the image in your browser removes camera info, GPS coordinates, timestamps, and any other embedded metadata. Nothing is uploaded.',
+    cleaning: 'Cleaning…',
+    removeMetadata: 'Remove metadata',
+    clear: 'Clear',
+    success: 'Metadata removed — this copy contains no EXIF or GPS data.',
+  },
+  id: {
+    processFailed: 'Tidak dapat memproses gambar ini',
+    dropHere: 'Jatuhkan gambar atau klik untuk menjelajah',
+    dropSub: 'Hapus EXIF, lokasi GPS, dan semua metadata lainnya · atau tempel (⌘V)',
+    privacyNote: 'Menyandikan ulang gambar di browser Anda akan menghapus info kamera, koordinat GPS, cap waktu, dan metadata tertanam lainnya. Tidak ada yang diunggah.',
+    cleaning: 'Membersihkan…',
+    removeMetadata: 'Hapus metadata',
+    clear: 'Bersihkan',
+    success: 'Metadata dihapus — salinan ini tidak berisi data EXIF atau GPS.',
+  },
+};
+
 function outputFormat(type: string): { mime: string; ext: string; quality?: number } {
   if (type === 'image/jpeg') return { mime: 'image/jpeg', ext: 'jpg', quality: 0.95 };
   if (type === 'image/webp') return { mime: 'image/webp', ext: 'webp', quality: 0.95 };
   return { mime: 'image/png', ext: 'png' };
 }
 
-export default function ImageScrub() {
+export default function ImageScrub({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [result, setResult] = useState<Blob | null>(null);
   const [busy, setBusy] = useState(false);
@@ -38,7 +72,7 @@ export default function ImageScrub() {
       const { blob } = await processImage(file, { mimeType: fmt.mime, quality: fmt.quality });
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not process this image');
+      setError(e instanceof Error ? e.message : t.processFailed);
     } finally {
       setBusy(false);
     }
@@ -48,9 +82,9 @@ export default function ImageScrub() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
+          <p className="text-lg font-bold">{t.dropHere}</p>
           <p className="text-sm text-muted-foreground">
-            Strip EXIF, GPS location, and all other metadata · or paste (⌘V)
+            {t.dropSub}
           </p>
         </div>
       </Dropzone>
@@ -62,23 +96,22 @@ export default function ImageScrub() {
       )}
 
       <p className="text-xs text-muted-foreground">
-        Re-encoding the image in your browser removes camera info, GPS coordinates, timestamps, and
-        any other embedded metadata. Nothing is uploaded.
+        {t.privacyNote}
       </p>
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || busy}>
-          {busy ? 'Cleaning…' : 'Remove metadata'}
+          {busy ? t.cleaning : t.removeMetadata}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
       {error && <Alert variant="error">{error}</Alert>}
       {result && (
         <>
-          <Alert variant="success">Metadata removed — this copy contains no EXIF or GPS data.</Alert>
+          <Alert variant="success">{t.success}</Alert>
           <ImageResult blob={result} filename={outName} originalSize={file?.size} />
         </>
       )}
diff --git a/src/islands/image/ImageStamp.tsx b/src/islands/image/ImageStamp.tsx
index 65f0931..356844b 100644
--- a/src/islands/image/ImageStamp.tsx
+++ b/src/islands/image/ImageStamp.tsx
@@ -11,6 +11,7 @@ import {
   type StampPlacement,
 } from '@/tools/image/stamp.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
 const FONTS: { value: StampFont; label: string }[] = [
   { value: 'sans', label: 'Sans' },
@@ -27,7 +28,69 @@ const PLACEMENTS: { value: StampPlacement; label: string }[] = [
   { value: 'bottom-right', label: 'Bottom right' },
 ];
 
-export default function ImageStamp() {
+const TR: Record<Lang, {
+  drop: string; dropSub: string; presets: string; stampText: string;
+  placement: string; placements: Record<StampPlacement, string>;
+  font: string; style: string; bold: string; italic: string; borderBox: string;
+  color: string; scale: string; opacity: string;
+  apply: string; stamping: string; clear: string; failed: string;
+}> = {
+  en: {
+    drop: 'Drop an image or click to browse',
+    dropSub: 'Stamp a status mark onto an image · or paste (⌘V)',
+    presets: 'Presets',
+    stampText: 'Stamp text',
+    placement: 'Placement',
+    placements: {
+      center: 'Center',
+      'top-left': 'Top left',
+      'top-right': 'Top right',
+      'bottom-left': 'Bottom left',
+      'bottom-right': 'Bottom right',
+    },
+    font: 'Font',
+    style: 'Style',
+    bold: 'Bold',
+    italic: 'Italic',
+    borderBox: 'Border box',
+    color: 'Color',
+    scale: 'Scale',
+    opacity: 'Opacity',
+    apply: 'Apply stamp',
+    stamping: 'Stamping…',
+    clear: 'Clear',
+    failed: 'Stamp failed',
+  },
+  id: {
+    drop: 'Letakkan gambar atau klik untuk telusuri',
+    dropSub: 'Stempelkan tanda status ke gambar · atau tempel (⌘V)',
+    presets: 'Preset',
+    stampText: 'Teks stempel',
+    placement: 'Penempatan',
+    placements: {
+      center: 'Tengah',
+      'top-left': 'Kiri atas',
+      'top-right': 'Kanan atas',
+      'bottom-left': 'Kiri bawah',
+      'bottom-right': 'Kanan bawah',
+    },
+    font: 'Font',
+    style: 'Gaya',
+    bold: 'Tebal',
+    italic: 'Miring',
+    borderBox: 'Kotak batas',
+    color: 'Warna',
+    scale: 'Skala',
+    opacity: 'Opasitas',
+    apply: 'Terapkan stempel',
+    stamping: 'Menstempel…',
+    clear: 'Bersihkan',
+    failed: 'Gagal menstempel',
+  },
+};
+
+export default function ImageStamp({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [text, setText] = useState('CONFIDENTIAL');
   const [color, setColor] = useState('#c0392b');
@@ -79,7 +142,7 @@ export default function ImageStamp() {
       });
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Stamp failed');
+      setError(e instanceof Error ? e.message : t.failed);
     } finally {
       setBusy(false);
     }
@@ -89,8 +152,8 @@ export default function ImageStamp() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
-          <p className="text-sm text-muted-foreground">Stamp a status mark onto an image · or paste (⌘V)</p>
+          <p className="text-lg font-bold">{t.drop}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSub}</p>
         </div>
       </Dropzone>
 
@@ -98,7 +161,7 @@ export default function ImageStamp() {
 
       <div className="space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Presets
+          {t.presets}
         </span>
         <div className="flex flex-wrap gap-2">
           {STAMP_PRESETS.map(p => (
@@ -111,7 +174,7 @@ export default function ImageStamp() {
 
       <label className="block space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Stamp text
+          {t.stampText}
         </span>
         <input
           value={text}
@@ -122,17 +185,17 @@ export default function ImageStamp() {
 
       <div className="space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Placement
+          {t.placement}
         </span>
         <div className="flex flex-wrap gap-2">
-          {PLACEMENTS.map(({ value, label }) => (
+          {PLACEMENTS.map(({ value }) => (
             <Button
               key={value}
               variant={placement === value ? 'primary' : 'secondary'}
               aria-pressed={placement === value}
               onClick={() => setPlacement(value)}
             >
-              {label}
+              {t.placements[value]}
             </Button>
           ))}
         </div>
@@ -141,7 +204,7 @@ export default function ImageStamp() {
       <div className="flex flex-wrap items-end gap-6">
         <div className="space-y-1.5">
           <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            Font
+            {t.font}
           </span>
           <div className="flex flex-wrap gap-2">
             {FONTS.map(({ value, label }) => (
@@ -159,24 +222,24 @@ export default function ImageStamp() {
 
         <div className="space-y-1.5">
           <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            Style
+            {t.style}
           </span>
           <div className="flex flex-wrap gap-2">
             <Button variant={bold ? 'primary' : 'secondary'} aria-pressed={bold} onClick={() => setBold(b => !b)}>
-              Bold
+              {t.bold}
             </Button>
             <Button variant={italic ? 'primary' : 'secondary'} aria-pressed={italic} onClick={() => setItalic(i => !i)}>
-              Italic
+              {t.italic}
             </Button>
             <Button variant={bordered ? 'primary' : 'secondary'} aria-pressed={bordered} onClick={() => setBordered(b => !b)}>
-              Border box
+              {t.borderBox}
             </Button>
           </div>
         </div>
 
         <label className="space-y-1.5">
           <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            Color
+            {t.color}
           </span>
           <input
             type="color"
@@ -190,7 +253,7 @@ export default function ImageStamp() {
       <div className="flex flex-wrap items-end gap-6">
         <label className="flex-1 space-y-1.5">
           <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            <span>Scale</span>
+            <span>{t.scale}</span>
             <span>{scale}%</span>
           </span>
           <input
@@ -204,7 +267,7 @@ export default function ImageStamp() {
         </label>
         <label className="flex-1 space-y-1.5">
           <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            <span>Opacity</span>
+            <span>{t.opacity}</span>
             <span>{opacity}%</span>
           </span>
           <input
@@ -220,10 +283,10 @@ export default function ImageStamp() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || !text.trim() || busy}>
-          {busy ? 'Stamping…' : 'Apply stamp'}
+          {busy ? t.stamping : t.apply}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/image/ImageUpscale.tsx b/src/islands/image/ImageUpscale.tsx
index 9d02c64..0899a00 100644
--- a/src/islands/image/ImageUpscale.tsx
+++ b/src/islands/image/ImageUpscale.tsx
@@ -9,6 +9,51 @@ import { EditInAnnotatorButton } from '@/components/ui/EditInAnnotatorButton';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropDesc: string;
+  scale: string;
+  helper: string;
+  tooLarge: (s: number, mp: string, side: number) => string;
+  errFailed: string;
+  stagePass: (s: number, i: number, n: number) => string;
+  stageSingle: (s: number) => string;
+  working: string;
+  result: string;
+  altResult: string;
+  downloadPng: string;
+}> = {
+  en: {
+    dropTitle: 'Drop an image or click to browse',
+    dropDesc: 'Enlarges an image with an on-device AI model (ESRGAN) · or paste (⌘V)',
+    scale: 'Scale',
+    helper: "Runs entirely in your browser — the image never leaves your device. Best on smaller images (icons, logos, old photos). 2–4× use native models; 8× runs two passes (4×→2×). Higher factors need a smaller input so the result fits in memory — the max input shrinks as the scale grows. The models download once (~1 MB each), then they're cached.",
+    tooLarge: (s, mp, side) => `Image is too large to upscale ${s}× in the browser (max ~${mp} MP, about ${side}×${side}). Resize it first.`,
+    errFailed: 'Upscaling failed.',
+    stagePass: (s, i, n) => `Upscaling ${s}× (pass ${i}/${n})…`,
+    stageSingle: (s) => `Upscaling ${s}×…`,
+    working: 'Working…',
+    result: 'Result',
+    altResult: 'Upscaled',
+    downloadPng: 'Download PNG',
+  },
+  id: {
+    dropTitle: 'Jatuhkan gambar atau klik untuk memilih',
+    dropDesc: 'Memperbesar gambar dengan model AI di perangkat (ESRGAN) · atau tempel (⌘V)',
+    scale: 'Skala',
+    helper: 'Berjalan sepenuhnya di browser Anda — gambar tidak pernah meninggalkan perangkat Anda. Paling baik pada gambar kecil (ikon, logo, foto lama). 2–4× memakai model native; 8× menjalankan dua tahap (4×→2×). Faktor lebih tinggi butuh input lebih kecil agar hasilnya muat di memori — batas input mengecil seiring skala membesar. Model diunduh sekali (~1 MB masing-masing), lalu disimpan di cache.',
+    tooLarge: (s, mp, side) => `Gambar terlalu besar untuk diperbesar ${s}× di browser (maks ~${mp} MP, sekitar ${side}×${side}). Ubah ukurannya dulu.`,
+    errFailed: 'Gagal memperbesar.',
+    stagePass: (s, i, n) => `Memperbesar ${s}× (tahap ${i}/${n})…`,
+    stageSingle: (s) => `Memperbesar ${s}×…`,
+    working: 'Sedang bekerja…',
+    result: 'Hasil',
+    altResult: 'Diperbesar',
+    downloadPng: 'Unduh PNG',
+  },
+};
 
 type BaseScale = 2 | 3 | 4;
 type Scale = 2 | 3 | 4 | 8;
@@ -44,7 +89,8 @@ async function loadModel(scale: BaseScale) {
   return new Upscaler({ model });
 }
 
-export default function ImageUpscale() {
+export default function ImageUpscale({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [scale, setScale] = useState<Scale>(4);
   const [file, setFile] = useState<File | null>(null);
   const [srcDims, setSrcDims] = useState<{ w: number; h: number } | null>(null);
@@ -69,7 +115,7 @@ export default function ImageUpscale() {
     const limit = maxInputFor(s);
     if (bmp.width * bmp.height > limit) {
       const side = Math.round(Math.sqrt(limit));
-      setError(`Image is too large to upscale ${s}× in the browser (max ~${(limit / 1_000_000).toFixed(1)} MP, about ${side}×${side}). Resize it first.`);
+      setError(t.tooLarge(s, (limit / 1_000_000).toFixed(1), side));
       return;
     }
 
@@ -82,7 +128,7 @@ export default function ImageUpscale() {
       let revokeSrc = true;
       let dataUrl = '';
       for (let i = 0; i < steps.length; i++) {
-        setStage(steps.length > 1 ? `Upscaling ${s}× (pass ${i + 1}/${steps.length})…` : `Upscaling ${s}×…`);
+        setStage(steps.length > 1 ? t.stagePass(s, i + 1, steps.length) : t.stageSingle(s));
         const upscaler = await loadModel(steps[i]);
         dataUrl = await upscaler.upscale(src, {
           output: 'base64',
@@ -105,7 +151,7 @@ export default function ImageUpscale() {
       setOutDims({ w: out.width, h: out.height });
       out.close?.();
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Upscaling failed.');
+      setError(e instanceof Error ? e.message : t.errFailed);
     } finally {
       setBusy(false);
       setStage('');
@@ -135,15 +181,15 @@ export default function ImageUpscale() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
           <p className="text-sm text-muted-foreground">
-            Enlarges an image with an on-device AI model (ESRGAN) · or paste (⌘V)
+            {t.dropDesc}
           </p>
         </div>
       </Dropzone>
 
       <div className="space-y-1.5">
-        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Scale</span>
+        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.scale}</span>
         <div className="flex flex-wrap gap-2">
           {([2, 3, 4, 8] as Scale[]).map(s => (
             <Button key={s} variant={scale === s ? 'primary' : 'secondary'} aria-pressed={scale === s} onClick={() => changeScale(s)} disabled={busy}>
@@ -154,29 +200,26 @@ export default function ImageUpscale() {
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Runs entirely in your browser — the image never leaves your device. Best on smaller images
-        (icons, logos, old photos). 2–4× use native models; 8× runs two passes (4×→2×). Higher
-        factors need a smaller input so the result fits in memory — the max input shrinks as the scale
-        grows. The models download once (~1 MB each), then they're cached.
+        {t.helper}
       </p>
 
-      {busy && <ProgressBar percent={percent} label={stage || 'Working…'} />}
+      {busy && <ProgressBar percent={percent} label={stage || t.working} />}
       {error && <Alert variant="error">{error}</Alert>}
 
       {result && resultUrl && !busy && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             {srcDims && outDims && (
               <span>{srcDims.w}×{srcDims.h} → <span className="font-bold">{outDims.w}×{outDims.h}</span></span>
             )}
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
           </div>
-          <img src={resultUrl} alt="Upscaled" className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
+          <img src={resultUrl} alt={t.altResult} className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
           <div className="flex flex-wrap gap-2">
             <Button onClick={download}>
               <Download className="h-4 w-4" />
-              Download PNG
+              {t.downloadPng}
             </Button>
             <CopyImageButton blob={result} />
           <EditInAnnotatorButton blob={result} filename={(file?.name ?? 'image').replace(/\.[^.]+$/, '') + '-upscaled.png'} />
diff --git a/src/islands/image/ImageViewer.tsx b/src/islands/image/ImageViewer.tsx
index 3e1bd22..1c81ba2 100644
--- a/src/islands/image/ImageViewer.tsx
+++ b/src/islands/image/ImageViewer.tsx
@@ -8,6 +8,66 @@ import { formatBytes } from '@/tools/image/canvas.lib';
 import { parseIcoEntries, type IcoEntry } from '@/tools/image/ico.lib';
 import { readExifSummary, type ExifSummary } from '@/tools/image/exif.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  drop: string;
+  sub: string;
+  imageAlt: string;
+  name: string;
+  type: string;
+  size: string;
+  dimensions: string;
+  orientation: string;
+  gps: string;
+  gpsPresent: string;
+  gpsNone: string;
+  exif: string;
+  noExif: string;
+  icoSizes: string;
+  unknown: string;
+  download: string;
+  convert: string;
+}> = {
+  en: {
+    drop: 'Drop an image or click to browse',
+    sub: 'View any image (incl. .ico) with its metadata · or paste (⌘V)',
+    imageAlt: 'image',
+    name: 'Name',
+    type: 'Type',
+    size: 'Size',
+    dimensions: 'Dimensions',
+    orientation: 'Orientation',
+    gps: 'GPS',
+    gpsPresent: 'present',
+    gpsNone: 'none',
+    exif: 'EXIF',
+    noExif: 'No EXIF metadata',
+    icoSizes: 'ICO sizes',
+    unknown: 'unknown',
+    download: 'Download',
+    convert: 'Convert…',
+  },
+  id: {
+    drop: 'Letakkan gambar atau klik untuk memilih',
+    sub: 'Lihat gambar apa pun (termasuk .ico) beserta metadatanya · atau tempel (⌘V)',
+    imageAlt: 'gambar',
+    name: 'Nama',
+    type: 'Tipe',
+    size: 'Ukuran',
+    dimensions: 'Dimensi',
+    orientation: 'Orientasi',
+    gps: 'GPS',
+    gpsPresent: 'ada',
+    gpsNone: 'tidak ada',
+    exif: 'EXIF',
+    noExif: 'Tidak ada metadata EXIF',
+    icoSizes: 'Ukuran ICO',
+    unknown: 'tidak diketahui',
+    download: 'Unduh',
+    convert: 'Konversi…',
+  },
+};
 
 interface Meta {
   name: string;
@@ -19,7 +79,8 @@ interface Meta {
   ico: IcoEntry[];
 }
 
-export default function ImageViewer() {
+export default function ImageViewer({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [url, setUrl] = useState('');
   const [meta, setMeta] = useState<Meta | null>(null);
@@ -42,7 +103,7 @@ export default function ImageViewer() {
       const img = new Image();
       img.onload = () => {
         if (!alive) return;
-        setMeta({ name: file.name, type: file.type || (isIco ? 'image/x-icon' : 'unknown'), size: file.size, width: img.naturalWidth, height: img.naturalHeight, exif, ico });
+        setMeta({ name: file.name, type: file.type || (isIco ? 'image/x-icon' : t.unknown), size: file.size, width: img.naturalWidth, height: img.naturalHeight, exif, ico });
       };
       img.src = objectUrl;
     })();
@@ -60,40 +121,40 @@ export default function ImageViewer() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*,.ico" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
-          <p className="text-sm text-muted-foreground">View any image (incl. .ico) with its metadata · or paste (⌘V)</p>
+          <p className="text-lg font-bold">{t.drop}</p>
+          <p className="text-sm text-muted-foreground">{t.sub}</p>
         </div>
       </Dropzone>
 
       {url && (
         <ZoomPane>
-          <img src={url} alt={file?.name ?? 'image'} />
+          <img src={url} alt={file?.name ?? t.imageAlt} />
         </ZoomPane>
       )}
 
       {meta && (
         <div className="space-y-1">
-          {row('Name', meta.name)}
-          {row('Type', meta.type)}
-          {row('Size', formatBytes(meta.size))}
-          {row('Dimensions', `${meta.width} × ${meta.height}`)}
+          {row(t.name, meta.name)}
+          {row(t.type, meta.type)}
+          {row(t.size, formatBytes(meta.size))}
+          {row(t.dimensions, `${meta.width} × ${meta.height}`)}
           {meta.exif ? (
             <>
-              {row('Orientation', meta.exif.orientation ?? '—')}
-              {row('GPS', meta.exif.hasGps ? 'present' : 'none')}
+              {row(t.orientation, meta.exif.orientation ?? '—')}
+              {row(t.gps, meta.exif.hasGps ? t.gpsPresent : t.gpsNone)}
             </>
           ) : (
-            /jpe?g/i.test(meta.type) ? row('EXIF', 'No EXIF metadata') : null
+            /jpe?g/i.test(meta.type) ? row(t.exif, t.noExif) : null
           )}
-          {meta.ico.length > 0 && row('ICO sizes', meta.ico.map((e) => `${e.width}×${e.height}`).join(', '))}
+          {meta.ico.length > 0 && row(t.icoSizes, meta.ico.map((e) => `${e.width}×${e.height}`).join(', '))}
         </div>
       )}
 
       {file && (
         <div className="flex flex-wrap gap-2">
-          <Button variant="secondary" onClick={() => downloadService.download(file, file.name)}>Download</Button>
+          <Button variant="secondary" onClick={() => downloadService.download(file, file.name)}>{t.download}</Button>
           <EditInAnnotatorButton blob={() => file} filename={file.name} />
-          <a href="/tools/image-convert" className="inline-flex items-center border-2 border-border bg-background px-3 py-2 text-sm font-bold shadow-brutal-sm hover:bg-muted">Convert…</a>
+          <a href="/tools/image-convert" className="inline-flex items-center border-2 border-border bg-background px-3 py-2 text-sm font-bold shadow-brutal-sm hover:bg-muted">{t.convert}</a>
         </div>
       )}
     </div>
diff --git a/src/islands/image/ImageWatermark.tsx b/src/islands/image/ImageWatermark.tsx
index be6a7b6..beb1b44 100644
--- a/src/islands/image/ImageWatermark.tsx
+++ b/src/islands/image/ImageWatermark.tsx
@@ -5,6 +5,7 @@ import { Alert } from '@/components/ui/Alert';
 import { ImageResult } from '@/components/ui/ImageResult';
 import { watermarkImage, keepFormat, scaleToFontScale, type WatermarkLayout } from '@/tools/image/canvas.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
 const LAYOUTS: { value: WatermarkLayout; label: string }[] = [
   { value: 'diagonal', label: 'Diagonal' },
@@ -12,7 +13,52 @@ const LAYOUTS: { value: WatermarkLayout; label: string }[] = [
   { value: 'bottom-right', label: 'Corner' },
 ];
 
-export default function ImageWatermark() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropHint: string;
+  watermarkText: string;
+  layout: string;
+  layouts: Record<WatermarkLayout, string>;
+  scale: string;
+  opacity: string;
+  color: string;
+  stamping: string;
+  addWatermark: string;
+  clear: string;
+  watermarkFailed: string;
+}> = {
+  en: {
+    dropTitle: 'Drop an image or click to browse',
+    dropHint: 'Stamp a text watermark onto an image · or paste (⌘V)',
+    watermarkText: 'Watermark text',
+    layout: 'Layout',
+    layouts: { diagonal: 'Diagonal', tiled: 'Tiled', 'bottom-right': 'Corner' },
+    scale: 'Scale',
+    opacity: 'Opacity',
+    color: 'Color',
+    stamping: 'Stamping…',
+    addWatermark: 'Add watermark',
+    clear: 'Clear',
+    watermarkFailed: 'Watermark failed',
+  },
+  id: {
+    dropTitle: 'Jatuhkan gambar atau klik untuk memilih',
+    dropHint: 'Bubuhkan watermark teks ke gambar · atau tempel (⌘V)',
+    watermarkText: 'Teks watermark',
+    layout: 'Tata letak',
+    layouts: { diagonal: 'Diagonal', tiled: 'Ubin', 'bottom-right': 'Sudut' },
+    scale: 'Skala',
+    opacity: 'Opasitas',
+    color: 'Warna',
+    stamping: 'Membubuhkan…',
+    addWatermark: 'Tambah watermark',
+    clear: 'Bersihkan',
+    watermarkFailed: 'Gagal membuat watermark',
+  },
+};
+
+export default function ImageWatermark({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [text, setText] = useState('© GoodWebTools');
   const [layout, setLayout] = useState<WatermarkLayout>('diagonal');
@@ -50,7 +96,7 @@ export default function ImageWatermark() {
       });
       setResult(blob);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Watermark failed');
+      setError(e instanceof Error ? e.message : t.watermarkFailed);
     } finally {
       setBusy(false);
     }
@@ -60,8 +106,8 @@ export default function ImageWatermark() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
-          <p className="text-sm text-muted-foreground">Stamp a text watermark onto an image · or paste (⌘V)</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropHint}</p>
         </div>
       </Dropzone>
 
@@ -69,7 +115,7 @@ export default function ImageWatermark() {
 
       <label className="block space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Watermark text
+          {t.watermarkText}
         </span>
         <input
           value={text}
@@ -80,17 +126,17 @@ export default function ImageWatermark() {
 
       <div className="space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Layout
+          {t.layout}
         </span>
         <div className="flex flex-wrap gap-2">
-          {LAYOUTS.map(({ value, label }) => (
+          {LAYOUTS.map(({ value }) => (
             <Button
               key={value}
               variant={layout === value ? 'primary' : 'secondary'}
               aria-pressed={layout === value}
               onClick={() => setLayout(value)}
             >
-              {label}
+              {t.layouts[value]}
             </Button>
           ))}
         </div>
@@ -98,7 +144,7 @@ export default function ImageWatermark() {
 
       <label className="block space-y-1.5">
         <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          <span>Scale</span>
+          <span>{t.scale}</span>
           <span>{scale}%</span>
         </span>
         <input
@@ -114,7 +160,7 @@ export default function ImageWatermark() {
       <div className="flex flex-wrap items-end gap-6">
         <label className="flex-1 space-y-1.5">
           <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            <span>Opacity</span>
+            <span>{t.opacity}</span>
             <span>{opacity}%</span>
           </span>
           <input
@@ -128,7 +174,7 @@ export default function ImageWatermark() {
         </label>
         <label className="space-y-1.5">
           <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            Color
+            {t.color}
           </span>
           <input
             type="color"
@@ -141,10 +187,10 @@ export default function ImageWatermark() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || !text.trim() || busy}>
-          {busy ? 'Stamping…' : 'Add watermark'}
+          {busy ? t.stamping : t.addWatermark}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/image/Monochrome.tsx b/src/islands/image/Monochrome.tsx
index 66b0781..a6c6de2 100644
--- a/src/islands/image/Monochrome.tsx
+++ b/src/islands/image/Monochrome.tsx
@@ -5,14 +5,45 @@ import { Alert } from '@/components/ui/Alert';
 import { ImageResult } from '@/components/ui/ImageResult';
 import { applyMono, type MonoMode } from '@/tools/image/mono.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
-const MODES: { key: MonoMode; label: string; note: string }[] = [
-  { key: 'grayscale', label: 'Grayscale', note: 'Luminance desaturation.' },
-  { key: 'bw', label: 'Black & White', note: 'Hard threshold to pure black/white.' },
-  { key: 'dither', label: 'Dithered B/W', note: 'Floyd–Steinberg dithering for smoother tone.' },
+const MODES: { key: MonoMode; note: { en: string; id: string } }[] = [
+  { key: 'grayscale', note: { en: 'Luminance desaturation.', id: 'Desaturasi berdasarkan luminans.' } },
+  { key: 'bw', note: { en: 'Hard threshold to pure black/white.', id: 'Ambang batas tegas ke hitam/putih murni.' } },
+  { key: 'dither', note: { en: 'Floyd–Steinberg dithering for smoother tone.', id: 'Dithering Floyd–Steinberg untuk gradasi yang lebih halus.' } },
 ];
 
-export default function Monochrome() {
+const TR: Record<Lang, {
+  modeLabels: Record<MonoMode, string>;
+  dropTitle: string;
+  dropHint: string;
+  mode: string;
+  threshold: string;
+  failed: string;
+  processing: string;
+}> = {
+  en: {
+    modeLabels: { grayscale: 'Grayscale', bw: 'Black & White', dither: 'Dithered B/W' },
+    dropTitle: 'Drop an image or click to browse',
+    dropHint: 'Grayscale, black & white, or dithered · or paste (⌘V)',
+    mode: 'Mode',
+    threshold: 'Threshold',
+    failed: 'Failed',
+    processing: 'Processing…',
+  },
+  id: {
+    modeLabels: { grayscale: 'Grayscale', bw: 'Hitam & Putih', dither: 'B/W Dithered' },
+    dropTitle: 'Jatuhkan gambar atau klik untuk menelusuri',
+    dropHint: 'Grayscale, hitam & putih, atau dithered · atau tempel (⌘V)',
+    mode: 'Mode',
+    threshold: 'Threshold',
+    failed: 'Gagal',
+    processing: 'Memproses…',
+  },
+};
+
+export default function Monochrome({ lang = 'en' }: { lang?: Lang }) {
+  const tr = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [mode, setMode] = useState<MonoMode>('grayscale');
   const [threshold, setThreshold] = useState(128);
@@ -35,7 +66,7 @@ export default function Monochrome() {
     const t = setTimeout(() => {
       applyMono(file, { mode, threshold })
         .then((b) => alive && setResult(b))
-        .catch((e) => alive && setError(e instanceof Error ? e.message : 'Failed'))
+        .catch((e) => alive && setError(e instanceof Error ? e.message : tr.failed))
         .finally(() => alive && setBusy(false));
     }, 150);
     return () => { alive = false; clearTimeout(t); };
@@ -47,29 +78,29 @@ export default function Monochrome() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
-          <p className="text-sm text-muted-foreground">Grayscale, black &amp; white, or dithered · or paste (⌘V)</p>
+          <p className="text-lg font-bold">{tr.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{tr.dropHint}</p>
         </div>
       </Dropzone>
 
       {file && <p className="text-sm font-bold text-foreground">{file.name}</p>}
 
       <div className="space-y-1.5">
-        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Mode</span>
+        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{tr.mode}</span>
         <div className="flex flex-wrap gap-2">
           {MODES.map((m) => (
             <Button key={m.key} variant={mode === m.key ? 'primary' : 'secondary'} aria-pressed={mode === m.key} onClick={() => setMode(m.key)}>
-              {m.label}
+              {tr.modeLabels[m.key]}
             </Button>
           ))}
         </div>
-        <p className="text-xs text-muted-foreground">{MODES.find((m) => m.key === mode)?.note}</p>
+        <p className="text-xs text-muted-foreground">{MODES.find((m) => m.key === mode)?.note[lang] ?? MODES.find((m) => m.key === mode)?.note.en}</p>
       </div>
 
       {mode === 'bw' && (
         <label className="block space-y-1.5">
           <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            <span>Threshold</span>
+            <span>{tr.threshold}</span>
             <span>{threshold}</span>
           </span>
           <input type="range" min={0} max={255} value={threshold} onChange={(e) => setThreshold(Number(e.target.value))} className="w-full accent-accent" />
@@ -78,7 +109,7 @@ export default function Monochrome() {
 
       {error && <Alert variant="error">{error}</Alert>}
       {result && <ImageResult blob={result} filename={outName} originalSize={file?.size} />}
-      {busy && <p className="text-sm text-muted-foreground">Processing…</p>}
+      {busy && <p className="text-sm text-muted-foreground">{tr.processing}</p>}
     </div>
   );
 }
diff --git a/src/islands/image/ObjectRemove.tsx b/src/islands/image/ObjectRemove.tsx
index 6ed071a..49e8806 100644
--- a/src/islands/image/ObjectRemove.tsx
+++ b/src/islands/image/ObjectRemove.tsx
@@ -10,12 +10,112 @@ import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { toCHW, toMaskChannel, fromCHW } from '@/tools/image/object-remove.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  expLabel: string;
+  expBody: string;
+  dropTitle: string;
+  dropDesc: string;
+  brush: string;
+  clearMask: string;
+  paintHint: string;
+  working: string;
+  removeObject: string;
+  clear: string;
+  stageLoad: string;
+  stageRemove: string;
+  errNoMask: string;
+  errMemory: string;
+  errFailed: string;
+  result: string;
+  altResult: string;
+  downloadPng: string;
+  consentTitle: string;
+  consentIntroA: string;
+  consentIntroB: string;
+  liDownloadsA: string;
+  liDownloadsB: string;
+  liDeviceA: string;
+  liDeviceStrong: string;
+  liDeviceB: string;
+  liDeviceC: string;
+  liLocal: string;
+  downloadContinue: string;
+  cancel: string;
+}> = {
+  en: {
+    expLabel: 'Experimental.',
+    expBody: 'This uses a large AI inpainting model — it downloads ~200 MB on first use and needs a powerful device. Results vary.',
+    dropTitle: 'Drop an image or click to browse',
+    dropDesc: 'Paint over an object, then remove it · or paste (⌘V)',
+    brush: 'Brush',
+    clearMask: 'Clear mask',
+    paintHint: 'Paint over the object (or person) you want to remove.',
+    working: 'Working…',
+    removeObject: 'Remove object',
+    clear: 'Clear',
+    stageLoad: 'Loading model (first run downloads ~200 MB)…',
+    stageRemove: 'Removing… (this can take a while)',
+    errNoMask: 'Paint over the object you want to remove first.',
+    errMemory: 'Ran out of memory — this model needs a powerful device. Try a smaller image or a desktop browser.',
+    errFailed: 'Object removal failed.',
+    result: 'Result',
+    altResult: 'Object removed',
+    downloadPng: 'Download PNG',
+    consentTitle: 'Before you continue',
+    consentIntroA: 'The Object Remover uses a large AI model (',
+    consentIntroB: '). It:',
+    liDownloadsA: 'Downloads ',
+    liDownloadsB: " the first time (then it's cached).",
+    liDeviceA: 'Needs a ',
+    liDeviceStrong: 'powerful device',
+    liDeviceB: ' — a modern desktop browser and ',
+    liDeviceC: '. It may take tens of seconds, and can run out of memory on low-end or mobile devices.',
+    liLocal: 'Runs entirely on your device — the image never leaves your browser.',
+    downloadContinue: 'Download & continue',
+    cancel: 'Cancel',
+  },
+  id: {
+    expLabel: 'Eksperimental.',
+    expBody: 'Ini menggunakan model AI inpainting berukuran besar — mengunduh ~200 MB saat pertama kali dipakai dan butuh perangkat yang bertenaga. Hasil bisa bervariasi.',
+    dropTitle: 'Jatuhkan gambar atau klik untuk memilih',
+    dropDesc: 'Cat area objek, lalu hapus · atau tempel (⌘V)',
+    brush: 'Kuas',
+    clearMask: 'Bersihkan mask',
+    paintHint: 'Cat area objek (atau orang) yang ingin Anda hapus.',
+    working: 'Sedang bekerja…',
+    removeObject: 'Hapus objek',
+    clear: 'Bersihkan',
+    stageLoad: 'Memuat model (unduhan pertama ~200 MB)…',
+    stageRemove: 'Menghapus… (ini bisa memakan waktu)',
+    errNoMask: 'Cat dulu area objek yang ingin Anda hapus.',
+    errMemory: 'Kehabisan memori — model ini butuh perangkat yang bertenaga. Coba gambar lebih kecil atau browser desktop.',
+    errFailed: 'Gagal menghapus objek.',
+    result: 'Hasil',
+    altResult: 'Objek dihapus',
+    downloadPng: 'Unduh PNG',
+    consentTitle: 'Sebelum Anda lanjut',
+    consentIntroA: 'Object Remover menggunakan model AI berukuran besar (',
+    consentIntroB: '). Tool ini:',
+    liDownloadsA: 'Mengunduh ',
+    liDownloadsB: ' saat pertama kali (lalu disimpan di cache).',
+    liDeviceA: 'Butuh ',
+    liDeviceStrong: 'perangkat bertenaga',
+    liDeviceB: ' — browser desktop modern dan ',
+    liDeviceC: '. Bisa memakan puluhan detik, dan dapat kehabisan memori pada perangkat kelas bawah atau mobile.',
+    liLocal: 'Berjalan sepenuhnya di perangkat Anda — gambar tidak pernah meninggalkan browser Anda.',
+    downloadContinue: 'Unduh & lanjutkan',
+    cancel: 'Batal',
+  },
+};
 
 // This LaMa export has a fixed 512×512 input; we resize in and scale the result
 // back out (the stretch cancels, so the removed region stays in place).
 const MODEL_SIZE = 512;
 
-export default function ObjectRemove() {
+export default function ObjectRemove({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const viewRef = useRef<HTMLCanvasElement>(null);
   const maskRef = useRef<HTMLCanvasElement | null>(null);
   const bitmapRef = useRef<ImageBitmap | null>(null);
@@ -155,7 +255,7 @@ export default function ObjectRemove() {
       const imageCHW = toCHW(draw(bmp), ww, wh);
       const maskCh = toMaskChannel(draw(mask), ww, wh);
 
-      setStage('Loading model (first run downloads ~200 MB)…');
+      setStage(t.stageLoad);
       const ort = await import('onnxruntime-web');
       ort.env.wasm.wasmPaths = new URL('/models/ort/', location.origin).href;
       ort.env.wasm.numThreads = 1;
@@ -166,7 +266,7 @@ export default function ObjectRemove() {
         );
       }
 
-      setStage('Removing… (this can take a while)');
+      setStage(t.stageRemove);
       const feeds = {
         image: new ort.Tensor('float32', imageCHW, [1, 3, wh, ww]),
         mask: new ort.Tensor('float32', maskCh, [1, 1, wh, ww]),
@@ -208,10 +308,10 @@ export default function ObjectRemove() {
     } catch (e) {
       setError(
         e instanceof Error && /memory|alloc/i.test(e.message)
-          ? 'Ran out of memory — this model needs a powerful device. Try a smaller image or a desktop browser.'
+          ? t.errMemory
           : e instanceof Error
             ? e.message
-            : 'Object removal failed.'
+            : t.errFailed
       );
     } finally {
       setBusy(false);
@@ -221,7 +321,7 @@ export default function ObjectRemove() {
 
   const onRemoveClick = () => {
     if (!hasMask) {
-      setError('Paint over the object you want to remove first.');
+      setError(t.errNoMask);
       return;
     }
     if (!consented) setShowConsent(true);
@@ -236,15 +336,14 @@ export default function ObjectRemove() {
   return (
     <div className="space-y-4">
       <Alert variant="error">
-        <strong>Experimental.</strong> This uses a large AI inpainting model — it downloads ~200 MB
-        on first use and needs a powerful device. Results vary.
+        <strong>{t.expLabel}</strong> {t.expBody}
       </Alert>
 
       {!file && (
         <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
           <div className="space-y-1">
-            <p className="text-lg font-bold">Drop an image or click to browse</p>
-            <p className="text-sm text-muted-foreground">Paint over an object, then remove it · or paste (⌘V)</p>
+            <p className="text-lg font-bold">{t.dropTitle}</p>
+            <p className="text-sm text-muted-foreground">{t.dropDesc}</p>
           </div>
         </Dropzone>
       )}
@@ -253,13 +352,13 @@ export default function ObjectRemove() {
         <>
           <div className="flex flex-wrap items-center gap-4">
             <label className="flex items-center gap-2 text-sm">
-              <span className="font-bold uppercase tracking-wide text-muted-foreground">Brush</span>
+              <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.brush}</span>
               <input type="range" min={8} max={80} value={brush} onChange={e => setBrush(Number(e.target.value))} className="w-32 accent-accent" />
             </label>
-            <Button variant="ghost" onClick={clearMask} disabled={!hasMask}>Clear mask</Button>
+            <Button variant="ghost" onClick={clearMask} disabled={!hasMask}>{t.clearMask}</Button>
           </div>
 
-          <p className="text-xs text-muted-foreground">Paint over the object (or person) you want to remove.</p>
+          <p className="text-xs text-muted-foreground">{t.paintHint}</p>
 
           <div className="relative inline-block max-w-full overflow-auto border-2 border-border bg-muted">
             <canvas
@@ -277,27 +376,27 @@ export default function ObjectRemove() {
           <div className="flex flex-wrap gap-2">
             <Button onClick={onRemoveClick} disabled={busy || !hasMask}>
               <Eraser className="h-4 w-4" />
-              {busy ? 'Working…' : 'Remove object'}
+              {busy ? t.working : t.removeObject}
             </Button>
-            <Button variant="ghost" onClick={() => { setFile(null); setReady(false); setResult(null); setError(''); }}>Clear</Button>
+            <Button variant="ghost" onClick={() => { setFile(null); setReady(false); setResult(null); setError(''); }}>{t.clear}</Button>
           </div>
         </>
       )}
 
-      {busy && <p className="text-sm text-muted-foreground">{stage || 'Working…'}</p>}
+      {busy && <p className="text-sm text-muted-foreground">{stage || t.working}</p>}
       {error && <Alert variant="error">{error}</Alert>}
 
       {result && resultUrl && !busy && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
           </div>
-          <img src={resultUrl} alt="Object removed" className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
+          <img src={resultUrl} alt={t.altResult} className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
           <div className="flex flex-wrap gap-2">
             <Button onClick={download}>
               <Download className="h-4 w-4" />
-              Download PNG
+              {t.downloadPng}
             </Button>
             <CopyImageButton blob={result} />
           <EditInAnnotatorButton blob={result} filename={(file?.name ?? 'image').replace(/\.[^.]+$/, '') + '-removed.png'} />
@@ -306,19 +405,19 @@ export default function ObjectRemove() {
       )}
 
       {showConsent && (
-        <Modal title="Before you continue" onClose={() => setShowConsent(false)}>
+        <Modal title={t.consentTitle} onClose={() => setShowConsent(false)}>
           <div className="space-y-3 text-sm">
-            <p>The Object Remover uses a large AI model (<strong>LaMa</strong>). It:</p>
+            <p>{t.consentIntroA}<strong>LaMa</strong>{t.consentIntroB}</p>
             <ul className="list-disc space-y-1 pl-5">
-              <li>Downloads <strong>~200 MB</strong> the first time (then it's cached).</li>
-              <li>Needs a <strong>powerful device</strong> — a modern desktop browser and <strong>≥ 4 GB RAM</strong>. It may take tens of seconds, and can run out of memory on low-end or mobile devices.</li>
-              <li>Runs entirely on your device — the image never leaves your browser.</li>
+              <li>{t.liDownloadsA}<strong>~200 MB</strong>{t.liDownloadsB}</li>
+              <li>{t.liDeviceA}<strong>{t.liDeviceStrong}</strong>{t.liDeviceB}<strong>≥ 4 GB RAM</strong>{t.liDeviceC}</li>
+              <li>{t.liLocal}</li>
             </ul>
             <div className="flex flex-wrap gap-2 pt-1">
               <Button onClick={() => { setConsented(true); setShowConsent(false); runInference(); }}>
-                Download &amp; continue
+                {t.downloadContinue}
               </Button>
-              <Button variant="ghost" onClick={() => setShowConsent(false)}>Cancel</Button>
+              <Button variant="ghost" onClick={() => setShowConsent(false)}>{t.cancel}</Button>
             </div>
           </div>
         </Modal>
diff --git a/src/islands/image/OcrWorkbench.tsx b/src/islands/image/OcrWorkbench.tsx
index a682090..17da431 100644
--- a/src/islands/image/OcrWorkbench.tsx
+++ b/src/islands/image/OcrWorkbench.tsx
@@ -7,9 +7,44 @@ import { applyCleanup, rotate90 } from '@/tools/image/ocr-preprocess.lib';
 import { recognize, OcrError, type OcrResult } from '@/tools/image/ocr.lib';
 import { getPdfPageCount, renderPdfPage } from '@/tools/image/ocr-pdf.lib';
 import CameraCapture from './CameraCapture';
+import type { Lang } from '@/i18n/config';
 
 const MAX_DIM = 2000;
 
+const TR: Record<Lang, {
+  errLoadFile: string; errRenderPage: string; errOcr: string;
+  dropTitle: string; dropDesc: string; useCamera: string;
+  prev: string; page: string; next: string; rotate: string; cleanup: string;
+  threshold: string; runOcr: string; reading: string; extracting: string; retry: string;
+}> = {
+  en: {
+    errLoadFile: 'Could not load that file.',
+    errRenderPage: 'Could not render that page.',
+    errOcr: 'OCR failed.',
+    dropTitle: 'Drop an image or PDF, or click to browse',
+    dropDesc: 'Runs on-device · or paste (⌘V). First use downloads the OCR model once.',
+    useCamera: 'Use camera',
+    prev: 'Prev', page: 'Page', next: 'Next', rotate: 'Rotate 90°',
+    cleanup: 'Clean up image', threshold: 'Threshold',
+    runOcr: 'Run OCR', reading: 'Reading…',
+    extracting: 'Extracting text… (first run downloads the OCR model once)',
+    retry: 'Retry',
+  },
+  id: {
+    errLoadFile: 'Tidak dapat memuat berkas itu.',
+    errRenderPage: 'Tidak dapat menampilkan halaman itu.',
+    errOcr: 'OCR gagal.',
+    dropTitle: 'Letakkan gambar atau PDF, atau klik untuk memilih',
+    dropDesc: 'Berjalan di perangkat · atau tempel (⌘V). Penggunaan pertama mengunduh model OCR sekali.',
+    useCamera: 'Gunakan kamera',
+    prev: 'Sebelumnya', page: 'Halaman', next: 'Berikutnya', rotate: 'Putar 90°',
+    cleanup: 'Bersihkan gambar', threshold: 'Ambang',
+    runOcr: 'Jalankan OCR', reading: 'Membaca…',
+    extracting: 'Mengekstrak teks… (penggunaan pertama mengunduh model OCR sekali)',
+    retry: 'Coba lagi',
+  },
+};
+
 async function blobToImageData(blob: Blob): Promise<ImageData> {
   const bitmap = await createImageBitmap(blob);
   const scale = Math.min(1, MAX_DIM / Math.max(bitmap.width, bitmap.height));
@@ -46,10 +81,13 @@ function buildAdjusted(
 export default function OcrWorkbench({
   onResult,
   onReset,
+  lang = 'en',
 }: {
   onResult: (result: OcrResult) => void;
   onReset: () => void;
+  lang?: Lang;
 }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [isPdf, setIsPdf] = useState(false);
   const [pageCount, setPageCount] = useState(0);
@@ -85,7 +123,7 @@ export default function OcrWorkbench({
         setBase(await blobToImageData(f));
       }
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not load that file.');
+      setError(e instanceof Error ? e.message : t.errLoadFile);
     }
   };
   usePasteImage((f) => onDrop([f]));
@@ -96,7 +134,7 @@ export default function OcrWorkbench({
     renderPdfPage(file, page)
       .then(blobToImageData)
       .then((d) => alive && setBase(d))
-      .catch((e) => alive && setError(e instanceof Error ? e.message : 'Could not render that page.'));
+      .catch((e) => alive && setError(e instanceof Error ? e.message : t.errRenderPage));
     return () => { alive = false; };
   }, [file, isPdf, page, pageCount]);
 
@@ -120,7 +158,7 @@ export default function OcrWorkbench({
         setError(e.message);
         setRetryable(e.reason === 'model-download');
       } else {
-        setError(e instanceof Error ? e.message : 'OCR failed.');
+        setError(e instanceof Error ? e.message : t.errOcr);
       }
     } finally {
       setBusy(false);
@@ -133,16 +171,17 @@ export default function OcrWorkbench({
         <CameraCapture
           onCapture={(f) => { setCameraOpen(false); onDrop([f]); }}
           onCancel={() => setCameraOpen(false)}
+          lang={lang}
         />
       ) : (
         <div className="space-y-2">
           <Dropzone onDrop={onDrop} accept="image/*,application/pdf" multiple={false}>
             <div className="space-y-1">
-              <p className="text-lg font-bold">Drop an image or PDF, or click to browse</p>
-              <p className="text-sm text-muted-foreground">Runs on-device · or paste (⌘V). First use downloads the OCR model once.</p>
+              <p className="text-lg font-bold">{t.dropTitle}</p>
+              <p className="text-sm text-muted-foreground">{t.dropDesc}</p>
             </div>
           </Dropzone>
-          <Button variant="secondary" onClick={() => setCameraOpen(true)}>Use camera</Button>
+          <Button variant="secondary" onClick={() => setCameraOpen(true)}>{t.useCamera}</Button>
         </div>
       )}
 
@@ -150,9 +189,9 @@ export default function OcrWorkbench({
 
       {isPdf && pageCount > 1 && (
         <div className="flex items-center gap-2 text-sm">
-          <Button variant="secondary" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>Prev</Button>
-          <span>Page {page} / {pageCount}</span>
-          <Button variant="secondary" disabled={page >= pageCount} onClick={() => setPage((p) => p + 1)}>Next</Button>
+          <Button variant="secondary" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>{t.prev}</Button>
+          <span>{t.page} {page} / {pageCount}</span>
+          <Button variant="secondary" disabled={page >= pageCount} onClick={() => setPage((p) => p + 1)}>{t.next}</Button>
         </div>
       )}
 
@@ -160,22 +199,22 @@ export default function OcrWorkbench({
         <div className="space-y-3">
           <canvas ref={previewRef} className="max-h-96 w-auto border-2 border-border" />
           <div className="flex flex-wrap items-center gap-3">
-            <Button variant="secondary" onClick={() => setQuarters((q) => (q + 1) % 4)}>Rotate 90°</Button>
+            <Button variant="secondary" onClick={() => setQuarters((q) => (q + 1) % 4)}>{t.rotate}</Button>
             <label className="flex items-center gap-2 text-sm font-bold">
               <input type="checkbox" checked={cleanup} onChange={(e) => setCleanup(e.target.checked)} />
-              Clean up image
+              {t.cleanup}
             </label>
             {cleanup && (
               <label className="flex items-center gap-2 text-sm">
-                <span className="uppercase tracking-wide text-muted-foreground">Threshold {threshold}</span>
+                <span className="uppercase tracking-wide text-muted-foreground">{t.threshold} {threshold}</span>
                 <input type="range" min={0} max={255} value={threshold} onChange={(e) => setThreshold(Number(e.target.value))} className="accent-accent" />
               </label>
             )}
-            <Button onClick={runOcr} disabled={busy}>{busy ? 'Reading…' : 'Run OCR'}</Button>
+            <Button onClick={runOcr} disabled={busy}>{busy ? t.reading : t.runOcr}</Button>
           </div>
           {busy && (
             <p className="animate-pulse text-sm text-muted-foreground">
-              Extracting text… (first run downloads the OCR model once)
+              {t.extracting}
             </p>
           )}
         </div>
@@ -184,7 +223,7 @@ export default function OcrWorkbench({
       {error && (
         <Alert variant="error">
           {error}
-          {retryable && <> <button className="underline" onClick={runOcr}>Retry</button></>}
+          {retryable && <> <button className="underline" onClick={runOcr}>{t.retry}</button></>}
         </Alert>
       )}
     </div>
diff --git a/src/islands/image/PortraitBlur.tsx b/src/islands/image/PortraitBlur.tsx
index 987f8a0..6c03742 100644
--- a/src/islands/image/PortraitBlur.tsx
+++ b/src/islands/image/PortraitBlur.tsx
@@ -9,8 +9,57 @@ import { EditInAnnotatorButton } from '@/components/ui/EditInAnnotatorButton';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
 
-export default function PortraitBlur() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropDesc: string;
+  bgBlur: string;
+  helper: string;
+  stagePreparing: string;
+  stageFinding: string;
+  stageDownloading: string;
+  stageBlurring: string;
+  errFailed: string;
+  working: string;
+  result: string;
+  altResult: string;
+  downloadPng: string;
+}> = {
+  en: {
+    dropTitle: 'Drop a photo or click to browse',
+    dropDesc: 'Keeps the subject sharp and blurs the background (portrait mode) · or paste (⌘V)',
+    bgBlur: 'Background blur',
+    helper: 'Runs entirely in your browser — the photo never leaves your device. Uses the same on-device AI as the Background Remover to isolate the subject; the model downloads once, then caches.',
+    stagePreparing: 'Preparing…',
+    stageFinding: 'Finding the subject…',
+    stageDownloading: 'Downloading AI model…',
+    stageBlurring: 'Blurring background…',
+    errFailed: 'Could not process this image.',
+    working: 'Working…',
+    result: 'Result',
+    altResult: 'Portrait blur',
+    downloadPng: 'Download PNG',
+  },
+  id: {
+    dropTitle: 'Jatuhkan foto atau klik untuk memilih',
+    dropDesc: 'Menjaga subjek tetap tajam dan mengaburkan latar belakang (mode portrait) · atau tempel (⌘V)',
+    bgBlur: 'Blur latar belakang',
+    helper: 'Berjalan sepenuhnya di browser Anda — foto tidak pernah meninggalkan perangkat Anda. Memakai AI di perangkat yang sama dengan Background Remover untuk mengisolasi subjek; model diunduh sekali, lalu disimpan di cache.',
+    stagePreparing: 'Menyiapkan…',
+    stageFinding: 'Mencari subjek…',
+    stageDownloading: 'Mengunduh model AI…',
+    stageBlurring: 'Mengaburkan latar belakang…',
+    errFailed: 'Tidak dapat memproses gambar ini.',
+    working: 'Sedang bekerja…',
+    result: 'Hasil',
+    altResult: 'Blur portrait',
+    downloadPng: 'Unduh PNG',
+  },
+};
+
+export default function PortraitBlur({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [strength, setStrength] = useState(16);
   const [result, setResult] = useState<Blob | null>(null);
@@ -54,10 +103,10 @@ export default function PortraitBlur() {
     setError('');
     setBusy(true);
     setPercent(0);
-    setStage('Preparing…');
+    setStage(t.stagePreparing);
     try {
       const original = await createImageBitmap(target);
-      setStage('Finding the subject…');
+      setStage(t.stageFinding);
       const { removeBackground } = await import('@imgly/background-removal');
       const cutoutBlob = await removeBackground(target, {
         publicPath: new URL('/models/imgly/', location.origin).href,
@@ -65,15 +114,15 @@ export default function PortraitBlur() {
         progress: (key, current, total) => {
           const pct = total > 0 ? Math.round((current / total) * 100) : 0;
           setPercent(pct);
-          setStage(key.startsWith('fetch') ? 'Downloading AI model…' : 'Finding the subject…');
+          setStage(key.startsWith('fetch') ? t.stageDownloading : t.stageFinding);
         },
       });
       const cutout = await createImageBitmap(cutoutBlob);
       cutoutRef.current = { cutout, original };
-      setStage('Blurring background…');
+      setStage(t.stageBlurring);
       setOut(await composite(original, cutout, blurPx));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not process this image.');
+      setError(e instanceof Error ? e.message : t.errFailed);
     } finally {
       setBusy(false);
       setStage('');
@@ -103,16 +152,16 @@ export default function PortraitBlur() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a photo or click to browse</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
           <p className="text-sm text-muted-foreground">
-            Keeps the subject sharp and blurs the background (portrait mode) · or paste (⌘V)
+            {t.dropDesc}
           </p>
         </div>
       </Dropzone>
 
       <label className="block space-y-1.5">
         <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          <span>Background blur</span>
+          <span>{t.bgBlur}</span>
           <span>{strength}px</span>
         </span>
         <input
@@ -127,24 +176,23 @@ export default function PortraitBlur() {
       </label>
 
       <p className="text-xs text-muted-foreground">
-        Runs entirely in your browser — the photo never leaves your device. Uses the same on-device
-        AI as the Background Remover to isolate the subject; the model downloads once, then caches.
+        {t.helper}
       </p>
 
-      {busy && <ProgressBar percent={percent} label={stage || 'Working…'} />}
+      {busy && <ProgressBar percent={percent} label={stage || t.working} />}
       {error && <Alert variant="error">{error}</Alert>}
 
       {result && resultUrl && !busy && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
           </div>
-          <img src={resultUrl} alt="Portrait blur" className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
+          <img src={resultUrl} alt={t.altResult} className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
           <div className="flex flex-wrap gap-2">
             <Button onClick={download}>
               <Download className="h-4 w-4" />
-              Download PNG
+              {t.downloadPng}
             </Button>
             <CopyImageButton blob={result} />
           <EditInAnnotatorButton blob={result} filename={(file?.name ?? 'image').replace(/\.[^.]+$/, '') + '-portrait.png'} />
diff --git a/src/islands/image/ReceiptFields.tsx b/src/islands/image/ReceiptFields.tsx
index dce3527..acfb377 100644
--- a/src/islands/image/ReceiptFields.tsx
+++ b/src/islands/image/ReceiptFields.tsx
@@ -4,6 +4,7 @@ import { CopyButton } from '@/components/ui/CopyButton';
 import { downloadService } from '@/services/download';
 import type { ReceiptData } from '@/tools/image/receipt.lib';
 import { receiptToJson, receiptToCsv } from '@/tools/image/receipt-export.lib';
+import type { Lang } from '@/i18n/config';
 
 const FIELDS: { key: keyof ReceiptData; label: string }[] = [
   { key: 'merchant', label: 'Merchant' },
@@ -15,6 +16,30 @@ const FIELDS: { key: keyof ReceiptData; label: string }[] = [
   { key: 'total', label: 'Total' },
 ];
 
+const TR: Record<Lang, {
+  heading: string; fields: Record<keyof ReceiptData, string>; someMissing: string;
+  downloadJson: string; downloadCsv: string; copyJson: string;
+}> = {
+  en: {
+    heading: 'Receipt fields',
+    fields: {
+      merchant: 'Merchant', dateRaw: 'Date (as printed)', dateIso: 'Date (ISO)',
+      currency: 'Currency', subtotal: 'Subtotal', tax: 'Tax', total: 'Total',
+    },
+    someMissing: 'Some fields couldn’t be detected — fill them in above.',
+    downloadJson: 'Download JSON', downloadCsv: 'Download CSV', copyJson: 'Copy JSON',
+  },
+  id: {
+    heading: 'Kolom struk',
+    fields: {
+      merchant: 'Merchant', dateRaw: 'Tanggal (seperti tercetak)', dateIso: 'Tanggal (ISO)',
+      currency: 'Mata uang', subtotal: 'Subtotal', tax: 'Pajak', total: 'Total',
+    },
+    someMissing: 'Beberapa kolom tidak dapat terdeteksi — isi di atas.',
+    downloadJson: 'Unduh JSON', downloadCsv: 'Unduh CSV', copyJson: 'Salin JSON',
+  },
+};
+
 // Editable string form of ReceiptData.
 type Form = Record<keyof ReceiptData, string>;
 
@@ -35,7 +60,8 @@ function toData(f: Form): ReceiptData {
   };
 }
 
-export default function ReceiptFields({ data }: { data: ReceiptData }) {
+export default function ReceiptFields({ data, lang = 'en' }: { data: ReceiptData; lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [form, setForm] = useState<Form>(() => toForm(data));
   useEffect(() => { setForm(toForm(data)); }, [data]);
 
@@ -48,11 +74,11 @@ export default function ReceiptFields({ data }: { data: ReceiptData }) {
 
   return (
     <div className="space-y-3 border-2 border-border p-3">
-      <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Receipt fields</p>
+      <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.heading}</p>
       <div className="grid gap-2 sm:grid-cols-2">
-        {FIELDS.map(({ key, label }) => (
+        {FIELDS.map(({ key }) => (
           <label key={key} className="space-y-1 text-sm">
-            <span className="block font-bold text-muted-foreground">{label}</span>
+            <span className="block font-bold text-muted-foreground">{t.fields[key]}</span>
             <input
               value={form[key]}
               onChange={(e) => set(key, e.target.value)}
@@ -62,12 +88,12 @@ export default function ReceiptFields({ data }: { data: ReceiptData }) {
         ))}
       </div>
       {someMissing && (
-        <p className="text-xs text-muted-foreground">Some fields couldn’t be detected — fill them in above.</p>
+        <p className="text-xs text-muted-foreground">{t.someMissing}</p>
       )}
       <div className="flex flex-wrap gap-2">
-        <Button variant="secondary" onClick={downloadJson}>Download JSON</Button>
-        <Button variant="secondary" onClick={downloadCsv}>Download CSV</Button>
-        <CopyButton value={receiptToJson(current)} label="Copy JSON" />
+        <Button variant="secondary" onClick={downloadJson}>{t.downloadJson}</Button>
+        <Button variant="secondary" onClick={downloadCsv}>{t.downloadCsv}</Button>
+        <CopyButton value={receiptToJson(current)} label={t.copyJson} />
       </div>
     </div>
   );
diff --git a/src/islands/image/ReceiptScanner.tsx b/src/islands/image/ReceiptScanner.tsx
index f6724d3..07f822a 100644
--- a/src/islands/image/ReceiptScanner.tsx
+++ b/src/islands/image/ReceiptScanner.tsx
@@ -3,21 +3,28 @@ import { type OcrResult } from '@/tools/image/ocr.lib';
 import { parseReceipt } from '@/tools/image/receipt.lib';
 import OcrWorkbench from './OcrWorkbench';
 import ReceiptFields from './ReceiptFields';
+import type { Lang } from '@/i18n/config';
 
-export default function ReceiptScanner() {
+const TR: Record<Lang, { rawText: string }> = {
+  en: { rawText: 'Raw recognized text' },
+  id: { rawText: 'Teks mentah yang dikenali' },
+};
+
+export default function ReceiptScanner({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [result, setResult] = useState<OcrResult | null>(null);
   // Stable per OCR result so re-renders don't reset the editable fields.
   const receipt = useMemo(() => (result ? parseReceipt(result) : null), [result]);
 
   return (
     <div className="space-y-4">
-      <OcrWorkbench onResult={setResult} onReset={() => setResult(null)} />
+      <OcrWorkbench onResult={setResult} onReset={() => setResult(null)} lang={lang} />
 
       {result && receipt && (
         <>
-          <ReceiptFields data={receipt} />
+          <ReceiptFields data={receipt} lang={lang} />
           <details className="border-2 border-border p-3">
-            <summary className="cursor-pointer text-sm font-bold text-muted-foreground">Raw recognized text</summary>
+            <summary className="cursor-pointer text-sm font-bold text-muted-foreground">{t.rawText}</summary>
             <pre className="mt-2 whitespace-pre-wrap break-words text-sm">{result.text}</pre>
           </details>
         </>
diff --git a/src/islands/image/SvgViewer.tsx b/src/islands/image/SvgViewer.tsx
index 3fbddbb..a2984af 100644
--- a/src/islands/image/SvgViewer.tsx
+++ b/src/islands/image/SvgViewer.tsx
@@ -6,6 +6,42 @@ import { Alert } from '@/components/ui/Alert';
 import { ImageResult } from '@/components/ui/ImageResult';
 import { ZoomPane } from '@/components/ui/ZoomPane';
 import { parseSvgSize, rasterizeSvg } from '@/tools/image/svg.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  dropError: string;
+  rasterizeFailed: string;
+  drop: string;
+  sub: string;
+  placeholder: string;
+  exportFormat: string;
+  scale: string;
+  quality: string;
+  exportLabel: (label: string) => string;
+}> = {
+  en: {
+    dropError: 'Please drop an SVG file.',
+    rasterizeFailed: 'Rasterize failed',
+    drop: 'Drop an SVG or click to browse',
+    sub: 'View it, then export to PNG, JPEG, or WebP',
+    placeholder: '…or paste SVG markup here',
+    exportFormat: 'Export format',
+    scale: 'Scale',
+    quality: 'Quality',
+    exportLabel: (label) => `Export ${label}`,
+  },
+  id: {
+    dropError: 'Silakan letakkan berkas SVG.',
+    rasterizeFailed: 'Rasterisasi gagal',
+    drop: 'Letakkan SVG atau klik untuk memilih',
+    sub: 'Lihat, lalu ekspor ke PNG, JPEG, atau WebP',
+    placeholder: '…atau tempel markup SVG di sini',
+    exportFormat: 'Format ekspor',
+    scale: 'Skala',
+    quality: 'Kualitas',
+    exportLabel: (label) => `Ekspor ${label}`,
+  },
+};
 
 const FORMATS = [
   { key: 'png', type: 'image/png' as const, label: 'PNG', lossy: false },
@@ -13,7 +49,8 @@ const FORMATS = [
   { key: 'webp', type: 'image/webp' as const, label: 'WebP', lossy: true },
 ];
 
-export default function SvgViewer() {
+export default function SvgViewer({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [markup, setMarkup] = useState('');
   const [fmt, setFmt] = useState('png');
   const [scale, setScale] = useState(1);
@@ -23,7 +60,7 @@ export default function SvgViewer() {
 
   const onDrop = async (files: File[]) => {
     const f = files.find((x) => x.type === 'image/svg+xml' || x.name.toLowerCase().endsWith('.svg'));
-    if (!f) { setError('Please drop an SVG file.'); return; }
+    if (!f) { setError(t.dropError); return; }
     setError('');
     setResult(null);
     setMarkup(await f.text());
@@ -42,7 +79,7 @@ export default function SvgViewer() {
     try {
       setResult(await rasterizeSvg(clean, { type: format.type, scale, quality: format.lossy ? quality / 100 : undefined }));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Rasterize failed');
+      setError(e instanceof Error ? e.message : t.rasterizeFailed);
     }
   };
 
@@ -50,15 +87,15 @@ export default function SvgViewer() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/svg+xml,.svg" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an SVG or click to browse</p>
-          <p className="text-sm text-muted-foreground">View it, then export to PNG, JPEG, or WebP</p>
+          <p className="text-lg font-bold">{t.drop}</p>
+          <p className="text-sm text-muted-foreground">{t.sub}</p>
         </div>
       </Dropzone>
 
       <textarea
         value={markup}
         onChange={(e) => { setMarkup(e.target.value); setResult(null); }}
-        placeholder="…or paste SVG markup here"
+        placeholder={t.placeholder}
         className="h-32 w-full border-2 border-border bg-background p-2 font-mono text-xs"
       />
 
@@ -75,7 +112,7 @@ export default function SvgViewer() {
           </ZoomPane>
 
           <div className="space-y-1.5">
-            <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Export format</span>
+            <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.exportFormat}</span>
             <div className="flex flex-wrap gap-2">
               {FORMATS.map((f) => (
                 <Button key={f.key} variant={fmt === f.key ? 'primary' : 'secondary'} aria-pressed={fmt === f.key} onClick={() => setFmt(f.key)}>{f.label}</Button>
@@ -84,18 +121,18 @@ export default function SvgViewer() {
           </div>
 
           <label className="block space-y-1.5">
-            <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground"><span>Scale</span><span>{scale}×</span></span>
+            <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground"><span>{t.scale}</span><span>{scale}×</span></span>
             <input type="range" min={1} max={8} step={1} value={scale} onChange={(e) => setScale(Number(e.target.value))} className="w-full accent-accent" />
           </label>
 
           {format.lossy && (
             <label className="block space-y-1.5">
-              <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground"><span>Quality</span><span>{quality}%</span></span>
+              <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground"><span>{t.quality}</span><span>{quality}%</span></span>
               <input type="range" min={10} max={100} value={quality} onChange={(e) => setQuality(Number(e.target.value))} className="w-full accent-accent" />
             </label>
           )}
 
-          <Button onClick={convert}>Export {format.label}</Button>
+          <Button onClick={convert}>{t.exportLabel(format.label)}</Button>
         </>
       )}