UI: Switch to Arabic language

DEPLOYMENT.md

@@ -0,0 +1,91 @@
+# Hugging Face Spaces Deployment Guide
+
+This project is configured for deployment on **Hugging Face Spaces** using the **Docker SDK**.
+
+## Prerequisites
+
+1.  A [Hugging Face Account](https://huggingface.co/join).
+2.  [Git](https://git-scm.com/downloads) installed on your machine.
+
+---
+
+## 1. Create a New Space
+
+1.  Go to [huggingface.co/new-space](https://huggingface.co/new-space).
+2.  **Space Name**: `rmbg-studio` (or your preferred name).
+3.  **License**: `MIT`.
+4.  **SDK**: Select **Docker** (This is crucial!).
+5.  **Hardware**: `CPU basic` (Free) is sufficient, though `CPU upgrade` or `T4 small` will be faster.
+6.  **Visibility**: Public or Private.
+7.  Click **Create Space**.
+
+---
+
+## 2. Connect and Push Code
+
+Open your terminal in the project folder and run these commands (replace `YOUR_USERNAME` with your HF username):
+
+```bash
+# 1. Initialize Git (if not already done)
+git init
+
+# 2. Add the Hugging Face remote
+git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/rmbg-studio
+
+# 3. Add all files
+git add .
+git add -f Dockerfile 
+
+# 4. Commit
+git commit -m "Initial commit"
+
+# 5. Push to deploy
+git push -u origin main
+```
+
+**Note:** If you get an error about "unrelated histories", use `git push -f origin main` to force overwrite the initial empty repo.
+
+---
+
+## 3. Important Configurations
+
+### Binary Files (Images/Icons)
+Hugging Face prohibits pushing large binary files (like images) directly to git without LFS. To avoid errors, this project's `.gitignore` excludes:
+- `*.png`, `*.jpg`, `*.jpeg`
+- `icon.png`
+- `screenshots/`
+
+If you *need* to upload these, you must set up [Git LFS](https://git-lfs.com/) first.
+
+### Dependencies (`Dockerfile`)
+The included `Dockerfile` is optimized for Spaces:
+- Base Image: `python:3.10-slim`
+- System Libs: `libgl1`, `libglib2.0-0` (required for OpenCV)
+- User: Runs as non-root user `user` (ID 1000) for security.
+- Output: Creates `/app/output_images` with correct permissions.
+
+---
+
+## 4. Updates & Troubleshooting
+
+### How to Update
+Whenever you make code changes:
+```bash
+git add .
+git commit -m "Describe your changes"
+git push
+```
+The Space will automatically rebuild and restart.
+
+### Common Errors
+
+**Error: `libgl1-mesa-glx` not found**
+- **Cause**: Deprecated package in newer Debian versions.
+- **Fix**: Use `libgl1` instead. (Already fixed in current `Dockerfile`).
+
+**Error: Push rejected (binary files)**
+- **Cause**: Trying to upload images without LFS.
+- **Fix**: Run `git rm --cached icon.png` (and other images) to stop tracking them, then commit and push.
+
+**Error: Application Error / Build Failed**
+- Go to your Space's **Logs** tab to see the detailed error message. most issues are missing `requirements.txt` packages or path issues.

app/static/app.js

@@ -53,7 +53,7 @@ document.addEventListener('DOMContentLoaded', () => {
             // Skip non-images
             if (!file.type.startsWith('image/')) continue;
             
-            progressText.textContent = `Processing ${i + 1}/${totalFiles}: ${file.name}`;
+            progressText.textContent = `جاري المعالجة ${i + 1}/${totalFiles}: ${file.name}`;
             
             const formData = new FormData();
             formData.append('images', file); // API expects list but we act like size 1 batch
@@ -70,7 +70,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
             } catch (error) {
                 console.error(`Error processing ${file.name}:`, error);
-                showToast(`Failed to process ${file.name}`, 'error');
+                showToast(`فشل معالجة ${file.name}`, 'error');
             }
 
             // Update Progress
@@ -79,11 +79,11 @@ document.addEventListener('DOMContentLoaded', () => {
             progressBar.style.width = `${percent}%`;
         }
 
-        progressText.textContent = 'Processing Complete!';
+        progressText.textContent = 'اكتملت المعالجة!';
         setTimeout(() => {
              loadingContainer.style.display = 'none';
         }, 1500);
-        showToast(`Processed ${processedCount} images!`);
+        showToast(`تمت معالجة ${processedCount} صورة!`);
     }
 
     function createResultCard(result) {
@@ -93,14 +93,14 @@ document.addEventListener('DOMContentLoaded', () => {
         card.innerHTML = `
             <div class="result-image-wrapper">
                 <img src="${result.url}" alt="${result.original_name}">
-                <button class="delete-btn" title="Remove image">
+                <button class="delete-btn" title="حذف الصورة">
                     <i class="ph ph-x"></i>
                 </button>
             </div>
             <div class="result-footer">
                 <div class="file-name" title="${result.original_name}">${result.original_name}</div>
                 <a href="${result.url}" download="${result.filename}" class="btn btn-primary" style="padding: 0.4rem 0.8rem; font-size: 0.8rem;">
-                    <i class="ph ph-download-simple"></i> Save
+                    <i class="ph ph-download-simple"></i> حفظ
                 </a>
             </div>
         `;
@@ -122,7 +122,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Clear All Logic
     clearAllBtn.addEventListener('click', () => {
-        if(confirm('Are you sure you want to clear all processed images?')) {
+        if(confirm('هل أنت متأكد من مسح جميع الصور المعالجة؟')) {
             resultsGrid.innerHTML = '';
             resultsHeader.style.display = 'none';
         }
@@ -134,7 +134,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (cards.length === 0) return;
 
         downloadAllBtn.disabled = true;
-        downloadAllBtn.innerHTML = '<div class="spinner" style="width:16px;height:16px;border-width:2px;display:inline-block"></div> Zipping...';
+        downloadAllBtn.innerHTML = '<div class="spinner" style="width:16px;height:16px;border-width:2px;display:inline-block"></div> جاري الضغط...';
 
         const filenames = Array.from(cards).map(card => card.dataset.filename);
 
@@ -155,16 +155,16 @@ document.addEventListener('DOMContentLoaded', () => {
                 a.click();
                 window.URL.revokeObjectURL(url);
                 a.remove();
-                showToast('Batch download started!');
+                showToast('بدأ تحميل الملف المضغوط!');
             } else {
-                showToast('Failed to create zip', 'error');
+                showToast('فشل إنشاء الملف المضغوط', 'error');
             }
         } catch (error) {
             console.error(error);
-            showToast('Network error during zip', 'error');
+            showToast('خطأ في الشبكة', 'error');
         } finally {
             downloadAllBtn.disabled = false;
-            downloadAllBtn.innerHTML = '<i class="ph ph-download-simple"></i> Download All (ZIP)';
+            downloadAllBtn.innerHTML = '<i class="ph ph-download-simple"></i> تحميل الكل (ZIP)';
         }
     });
 

app/static/style.css

@@ -11,7 +11,7 @@
     --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
     --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
-    --font-main: 'Outfit', sans-serif;
+    --font-main: 'Cairo', sans-serif;
     --radius: 12px;
     --radius-lg: 16px;
 }
@@ -39,11 +39,11 @@ body {
 .sidebar {
     width: 280px;
     background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-    border-right: 1px solid var(--border);
+    border-left: 1px solid var(--border); /* Changed from border-right */
     display: flex;
     flex-direction: column;
     padding: 1.5rem;
-    box-shadow: 2px 0 10px rgba(0,0,0,0.03);
+    box-shadow: -2px 0 10px rgba(0,0,0,0.03); /* Flipped shadow direction */
 }
 
 .logo {
@@ -86,7 +86,7 @@ body {
     cursor: pointer;
     border-radius: var(--radius);
     transition: all 0.2s ease;
-    text-align: left;
+    text-align: right; /* Changed from left */
 }
 
 .nav-item i {
@@ -380,7 +380,7 @@ body {
 .delete-btn {
     position: absolute;
     top: 12px;
-    right: 12px;
+    left: 12px; /* Changed from right to left for RTL */
     background: rgba(255, 255, 255, 0.95);
     border: none;
     color: #ef4444;
@@ -435,7 +435,7 @@ body {
 .toast {
     position: fixed;
     bottom: 24px;
-    right: 24px;
+    left: 24px; /* Changed from right to left */
     padding: 1rem 1.5rem;
     border-radius: var(--radius);
     box-shadow: var(--shadow-lg);

app/templates/index.html

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RMBG-2 Studio | AI Background Removal</title>
+    <title>RMBG-2 Studio | إزالة الخلفية بالذكاء الاصطناعي</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <!-- Phosphor Icons -->
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Google Fonts: Cairo -->
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="app-container">
@@ -22,14 +22,14 @@
             <nav class="nav-menu">
                 <button class="nav-item active">
                     <i class="ph ph-eraser"></i>
-                    Remove Background
+                    إزالة الخلفية
                 </button>
             </nav>
 
             <div class="sidebar-footer">
                 <div class="status-indicator" id="status-indicator">
                     <span class="dot"></span>
-                    <span class="text">Ready</span>
+                    <span class="text">جاهز</span>
                 </div>
             </div>
         </aside>
@@ -37,8 +37,8 @@
         <!-- Main Content -->
         <main class="main-content">
             <header class="section-header">
-                <h1>Remove Background</h1>
-                <p>Upload one or more images to remove backgrounds instantly.</p>
+                <h1>إزالة الخلفية</h1>
+                <p>قم برفع صورة أو أكثر لإزالة الخلفية فوراً.</p>
             </header>
 
             <div class="workspace">
@@ -46,9 +46,9 @@
                     <input type="file" id="file-input" accept="image/*" multiple hidden>
                     <div class="upload-content">
                         <i class="ph ph-cloud-arrow-up"></i>
-                        <h3>Upload Images</h3>
-                        <p>Drag & drop folders or files here</p>
-                        <span class="supported-formats">JPG, PNG, WEBP (Max 50MB)</span>
+                        <h3>رفع الصور</h3>
+                        <p>اسحب وأفلت الملفات هنا</p>
+                        <span class="supported-formats">JPG, PNG, WEBP (بحد أقصى 50 ميجابايت)</span>
                     </div>
                 </div>
                 
@@ -56,17 +56,17 @@
                     <div class="loading-bar">
                         <div class="progress" id="progress-bar"></div>
                     </div>
-                    <span id="progress-text">Processing...</span>
+                    <span id="progress-text">جاري المعالجة...</span>
                 </div>
 
                 <div class="results-header" id="results-header" style="display: none;">
-                    <h2>Processed Images</h2>
+                    <h2>الصور المعالجة</h2>
                     <div class="results-actions">
                         <button id="download-all-btn" class="btn btn-primary">
-                            <i class="ph ph-download-simple"></i> Download All (ZIP)
+                            <i class="ph ph-download-simple"></i> تحميل الكل (ZIP)
                         </button>
                         <button id="clear-all-btn" class="btn btn-secondary">
-                            <i class="ph ph-trash"></i> Clear All
+                            <i class="ph ph-trash"></i> مسح الكل
                         </button>
                     </div>
                 </div>