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"
+    }
 }

src/locales/ja/tools.json

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

src/locales/ko/tools.json

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

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,22 +11,15 @@ 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();
 
-  return (
+  const renderToolLink = (tool) => {
+    const content = (
       <>
-      <SEO
-        title={t('image-tools.title')}
-        description={t('image-tools.description')}
-      />
-      <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`} 
@@ -37,7 +30,38 @@ const ImageTools = () => {
           <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('title')}
+        description={t('slogan')}
+      />
+      <main>
+        <section className="tools-section">
+          <div className="tools-grid">
+            {tools.map(tool => (
+              <React.Fragment key={tool.id}>
+                {renderToolLink(tool)}
+              </React.Fragment>
             ))}
           </div>
         </section>