chore: 新增背景去除第三方工具BRIA-RMBG-2.0

src/locales/en/tools.json

@@ -185,5 +185,9 @@
       },
       "download": "Download Image",
       "noImage": "Please upload an image"
+    },
+    "imageBackgroundRemover": {
+      "title": "Image Background Remover",
+      "description": "Remove image background"
+    }
 }
-}
\ No newline at end of file

src/locales/ja/tools.json

@@ -185,5 +185,9 @@
       },
       "download": "画像をダウンロード",
       "noImage": "画像をアップロードしてください"
-  }
-}
\ No newline at end of file
+    },
+    "imageBackgroundRemover": {
+      "title": "画像背景の削除",
+      "description": "画像の背景を削除"
+    }
+}

src/locales/ko/tools.json

@@ -186,5 +186,9 @@
       },
       "download": "이미지 다운로드",
       "noImage": "이미지를 업로드하세요"
+  },
+  "imageBackgroundRemover": {
+    "title": "이미지 배경 제거",
+    "description": "이미지 배경 제거"
   }
-}
\ No newline at end of file
+}

src/locales/zh/tools.json

@@ -184,5 +184,9 @@
       },
       "download": "下载图片",
       "noImage": "请上传图片"
+    },
+    "imageBackgroundRemover": {
+      "title": "图片背景去除",
+      "description": "去除图片背景"
     }
 }

src/pages/Home.jsx

@@ -10,6 +10,7 @@ const tools = [
   { id: 'subtitleGenerator', icon: '/assets/icon/subtitle2image.png', path: '/subtitle-to-image' },
   { id: 'imageCompressor', icon: '/assets/icon/image-compressor.png', path: '/image-compressor' },
   { id: 'imageWatermark', icon: '/assets/icon/image-watermark.png', path: '/image-watermark' },
+  { id: 'imageBackgroundRemover', icon: '/assets/icon/image-background-remover.png', path: 'https://huggingface.co/spaces/briaai/BRIA-RMBG-2.0', external: true },
   
   { id: 'latex2image', icon: '/assets/icon/latex2image.png', path: '/latex-to-image' },
   { id: 'jsonFormatter', icon: '/assets/icon/json-format.png', path: '/json-formatter' },

src/pages/ImageTools.jsx

@@ -11,33 +11,57 @@ const tools = [
   { id: 'subtitleGenerator', icon: '/assets/icon/subtitle2image.png', path: '/subtitle-to-image' },
   { id: 'imageCompressor', icon: '/assets/icon/image-compressor.png', path: '/image-compressor' },
   { id: 'imageWatermark', icon: '/assets/icon/image-watermark.png', path: '/image-watermark' },
+  { id: 'imageBackgroundRemover', icon: '/assets/icon/image-background-remover.png', path: 'https://huggingface.co/spaces/briaai/BRIA-RMBG-2.0', external: true },
  ];
 
-const ImageTools = () => {
+ const ImageTools = () => {
   const { t } = useTranslation();
 
+  const renderToolLink = (tool) => {
+    const content = (
+      <>
+        <img 
+          src={tool.icon} 
+          alt={`${t(`tools.${tool.id}.title`)} icon`} 
+          className="tool-icon" 
+          loading="lazy" 
+        />
+        <div className="tool-content">
+          <h3 className="tool-title">{t(`tools.${tool.id}.title`)}</h3>
+          <p className="tool-description">{t(`tools.${tool.id}.description`)}</p>
+        </div>
+      </>
+    );
+
+    return tool.external ? (
+      <a 
+        href={tool.path}
+        className="tool-card"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {content}
+      </a>
+    ) : (
+      <Link to={tool.path} className="tool-card">
+        {content}
+      </Link>
+    );
+  };
+
   return (
     <>
       <SEO
-        title={t('image-tools.title')}
-        description={t('image-tools.description')}
+        title={t('title')}
+        description={t('slogan')}
       />
       <main>
         <section className="tools-section">
           <div className="tools-grid">
             {tools.map(tool => (
-              <Link to={tool.path} key={tool.id} className="tool-card">
-                <img 
-                  src={tool.icon} 
-                  alt={`${t(`tools.${tool.id}.title`)} icon`} 
-                  className="tool-icon" 
-                  loading="lazy" 
-                />
-                <div className="tool-content">
-                  <h3 className="tool-title">{t(`tools.${tool.id}.title`)}</h3>
-                  <p className="tool-description">{t(`tools.${tool.id}.description`)}</p>
-                </div>
-              </Link>
+              <React.Fragment key={tool.id}>
+                {renderToolLink(tool)}
+              </React.Fragment>
             ))}
           </div>
         </section>