Spaces:

sameerbanchhor
/

multi-use-api

Sleeping

App Files Files Community

sameerbanchhor commited on 4 days ago

Commit

2064c2f

verified ·

1 Parent(s): a55cbbf

Upload folder using huggingface_hub

Browse files

Files changed (9) hide show

.gitignore +4 -1
app/main.py +200 -3
app/routers/drive/storage.py +363 -52
app/routers/image/bgremover.py +403 -18
app/routers/image/jpgcompressor.py +379 -67
app/routers/pdf/pdf_tools.py +406 -13
app/routers/security/password_generator.py +410 -22
app/routers/testers/help.py +233 -10
app/routers/testers/server_status.py +313 -13

.gitignore CHANGED Viewed

@@ -15,4 +15,7 @@ uploaded_files
 # vs code config
 .vscode
-backend.code-workspace

 # vs code config
 .vscode
+backend.code-workspace
+llm_backend_structure_documentation.md
+raw_api_docs.md

app/main.py CHANGED Viewed

@@ -63,7 +63,204 @@ app.include_router(bgremover.router)                  # Background Remover
 @app.get("/", response_class=HTMLResponse)
 def greet_json():
     return """
-    <h2>Go to the Swagger docs 👇</h2>
-    <a href="/docs">Click here for API Docs</a>
-    <h3>created by sameer banchhor</h3>
     """

 @app.get("/", response_class=HTMLResponse)
 def greet_json():
     return """
+    <!DOCTYPE html>
+    <html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Easy Tools Hub | by Sam</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+        <style>
+            :root {
+                --primary: #6366f1;
+                --primary-hover: #4f46e5;
+                --bg-body: #f8fafc;
+                --bg-card: #ffffff;
+                --text-main: #0f172a;
+                --text-sub: #64748b;
+                --border: #e2e8f0;
+                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+                --gradient-1: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+            }
+            [data-theme="dark"] {
+                --primary: #818cf8;
+                --primary-hover: #6366f1;
+                --bg-body: #0f172a;
+                --bg-card: #1e293b;
+                --text-main: #f8fafc;
+                --text-sub: #94a3b8;
+                --border: #334155;
+                --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+                --gradient-1: linear-gradient(135deg, #4f46e5 0%, #7e22ce 100%);
+            }
+            * { box-sizing: border-box; margin: 0; padding: 0; transition: all 0.3s ease; }
+            body {
+                font-family: 'Plus Jakarta Sans', sans-serif;
+                background-color: var(--bg-body);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 2rem 1rem;
+            }
+            /* Header */
+            .header-container {
+                text-align: center; margin-bottom: 3rem; animation: fadeIn 0.8s ease-out;
+            }
+            .title {
+                font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem;
+                background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+            }
+            .subtitle { color: var(--text-sub); font-size: 1.1rem; }
+            .theme-toggle {
+                position: absolute; top: 1rem; right: 1rem;
+                background: var(--bg-card); border: 1px solid var(--border);
+                color: var(--text-main); padding: 10px; border-radius: 50%; cursor: pointer;
+            }
+            /* Grid */
+            .tools-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+                gap: 1.5rem;
+                width: 100%; max-width: 1000px;
+                animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            /* Cards */
+            .tool-card {
+                background: var(--bg-card);
+                border-radius: 20px;
+                padding: 2rem;
+                border: 1px solid var(--border);
+                box-shadow: var(--shadow);
+                text-decoration: none;
+                color: var(--text-main);
+                display: flex; flex-direction: column; align-items: center; text-align: center;
+                transition: transform 0.2s, box-shadow 0.2s;
+                position: relative; overflow: hidden;
+            }
+            .tool-card:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
+                border-color: var(--primary);
+            }
+            .icon { font-size: 3rem; margin-bottom: 1rem; }
+            .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
+            .card-desc { font-size: 0.9rem; color: var(--text-sub); line-height: 1.5; }
+            /* Footer */
+            .dev-footer {
+                margin-top: 4rem; text-align: center; font-size: 0.9rem; color: var(--text-sub);
+                padding: 2rem; width: 100%; max-width: 600px; border-top: 1px solid var(--border);
+                animation: fadeIn 1.2s ease-out;
+            }
+            .dev-badge {
+                display: inline-block; background: var(--bg-card); padding: 8px 20px;
+                border-radius: 30px; border: 1px solid var(--border); font-weight: 600; margin-top: 10px;
+            }
+            .dev-name { color: var(--primary); font-weight: 800; }
+            .github-link {
+                display: inline-flex; align-items: center; gap: 8px; margin-top: 15px;
+                color: var(--text-main); text-decoration: none; font-weight: 600;
+                padding: 8px 16px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border);
+            }
+            .github-link:hover { background: var(--bg-body); }
+            @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        </style>
+    </head>
+    <body>
+        <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙</button>
+        <div class="header-container">
+            <div class="title">Easy Tools Suite</div>
+            <div class="subtitle">Sameer Banchhor</div>
+        </div>
+        <div class="tools-grid">
+            <a href="/image/ui" class="tool-card">
+                <div class="icon">🖼️</div>
+                <div class="card-title">Image Tools</div>
+                <div class="card-desc">Compress JPEGs to specific sizes & remove backgrounds instantly using AI.</div>
+            </a>
+            <a href="/pdf/ui" class="tool-card">
+                <div class="icon">📄</div>
+                <div class="card-title">PDF Master</div>
+                <div class="card-desc">Merge multiple documents or rotate pages with a simple drag & drop interface.</div>
+            </a>
+            <a href="/drive/storage/ui" class="tool-card">
+                <div class="icon">☁️</div>
+                <div class="card-title">Cloud Drive</div>
+                <div class="card-desc">Upload files locally or use Aria2 for high-speed remote server downloads.</div>
+            </a>
+            <a href="/security/password-generator/ui" class="tool-card">
+                <div class="icon">🔐</div>
+                <div class="card-title">Security</div>
+                <div class="card-desc">Generate cryptographically strong passwords with advanced custom rules.</div>
+            </a>
+            <a href="/server-status/ui" class="tool-card">
+                <div class="icon">📊</div>
+                <div class="card-title">Server Monitor</div>
+                <div class="card-desc">Real-time dashboard for CPU, RAM, Disk usage, and Network traffic.</div>
+            </a>
+            <a href="/docs" class="tool-card" style="border-style: dashed;">
+                <div class="icon">⚡</div>
+                <div class="card-title">API Docs</div>
+                <div class="card-desc">Explore the raw Swagger UI for testing API endpoints directly.</div>
+            </a>
+        </div>
+        <footer class="dev-footer">
+            <div>Designed & Developed by</div>
+            <div class="dev-badge">
+                <span class="dev-name">Sameer Banchhor</span> | Data Scientist
+            </div>
+            <br>
+            <div style="font-size: 0.85rem; margin-top: 5px; opacity: 0.8;">MSc in System Design, Kalyan PG College</div>
+            <a href="https://github.com/sameerbanchhor-git" target="_blank" class="github-link">
+                <svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+                GitHub Profile
+            </a>
+        </footer>
+        <script>
+            // Theme Logic
+            const html = document.documentElement;
+            const themeBtn = document.getElementById('themeBtn');
+            function toggleTheme() {
+                const current = html.getAttribute('data-theme');
+                const next = current === 'light' ? 'dark' : 'light';
+                html.setAttribute('data-theme', next);
+                themeBtn.textContent = next === 'light' ? '🌙' : '☀️';
+                localStorage.setItem('theme', next);
+            }
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+        </script>
+    </body>
+    </html>
     """

app/routers/drive/storage.py CHANGED Viewed

@@ -12,9 +12,16 @@ from fastapi import (
     WebSocket,
     WebSocketDisconnect
 )
-# Import Auth System
-from app.routers.auth.system import get_current_user
 # Router Configuration
 router = APIRouter(
@@ -27,9 +34,8 @@ UPLOAD_DIR = "uploaded_files"
 MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024  # 1GB Limit
 # 🔐 Auth Toggle
-AUTH_ENABLED = False  # <<< set False to disable authentication
-# Auth Wrapper (returns dependency or None)
 def auth_dependency():
     return Depends(get_current_user) if AUTH_ENABLED else None
@@ -40,12 +46,10 @@ os.makedirs(UPLOAD_DIR, exist_ok=True)
 # 🛠️ Helper: Safe Username Extraction
 # ==========================================
 def get_safe_username(user_obj):
-    if not user_obj:
-        return "anonymous"
-    if hasattr(user_obj, "username"):
-        return user_obj.username
-    return user_obj.get("username", "anonymous")
 # ==========================================
 # 📤 Standard File Upload
@@ -80,46 +84,8 @@ async def upload_file(
         "message": "File uploaded successfully"
     }
-# ==========================================
-# 🚀 Remote Upload (Aria2)
-# ==========================================
-@router.post("/remote-upload/")
-async def remote_url_upload(
-    url: str,
-    custom_filename: str = None,
-    current_user: object = auth_dependency()
-):
-    username = get_safe_username(current_user)
-    command = ["aria2c", "-x", "6", "-s", "6", "-d", UPLOAD_DIR, url]
-    if custom_filename:
-        command.extend(["-o", custom_filename])
-    try:
-        process = await asyncio.create_subprocess_exec(
-            *command,
-            stdout=asyncio.subprocess.PIPE,
-            stderr=asyncio.subprocess.PIPE
-        )
-        stdout, stderr = await process.communicate()
-        if process.returncode != 0:
-            raise HTTPException(status_code=500, detail=f"Aria2 Error: {stderr.decode()}")
-    except Exception as e:
-        raise HTTPException(status_code=500, detail=f"System Error: {str(e)}")
-    return {
-        "user": username,
-        "source": url,
-        "filename": custom_filename or "Auto-detected",
-        "message": "Download completed via Aria2"
-    }
 # ==========================================
-# 📡 WebSocket Remote Upload (No Auth Applied)
 # ==========================================
 @router.websocket("/ws/remote-upload/")
 async def websocket_remote_upload(websocket: WebSocket):
@@ -135,11 +101,17 @@ async def websocket_remote_upload(websocket: WebSocket):
             await websocket.close()
             return
-        command = ["aria2c", "-x", "6", "-s", "6", "-d", UPLOAD_DIR, target_url]
         if custom_filename:
             command.extend(["-o", custom_filename])
-        await websocket.send_text(f"🚀 Starting download: {target_url}")
         process = await asyncio.create_subprocess_exec(
             *command,
@@ -147,6 +119,7 @@ async def websocket_remote_upload(websocket: WebSocket):
             stderr=asyncio.subprocess.PIPE
         )
         while True:
             line = await process.stdout.readline()
             if not line:
@@ -160,10 +133,12 @@ async def websocket_remote_upload(websocket: WebSocket):
                 await websocket.send_text(decoded_line)
         await process.wait()
         if process.returncode == 0:
             await websocket.send_text("✅ Download Complete.")
         else:
-            await websocket.send_text("❌ Download Failed.")
         await websocket.close()
@@ -175,3 +150,339 @@ async def websocket_remote_upload(websocket: WebSocket):
             await websocket.close()
         except:
             pass

     WebSocket,
     WebSocketDisconnect
 )
+from fastapi.responses import HTMLResponse
+# Import Auth System (Assuming this exists in your project structure)
+# from app.routers.auth.system import get_current_user
+# Mocking auth for standalone functionality if import fails
+try:
+    from app.routers.auth.system import get_current_user
+except ImportError:
+    def get_current_user(): return "anonymous"
 # Router Configuration
 router = APIRouter(
 MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024  # 1GB Limit
 # 🔐 Auth Toggle
+AUTH_ENABLED = False
 def auth_dependency():
     return Depends(get_current_user) if AUTH_ENABLED else None
 # 🛠️ Helper: Safe Username Extraction
 # ==========================================
 def get_safe_username(user_obj):
+    if not user_obj: return "anonymous"
+    if hasattr(user_obj, "username"): return user_obj.username
+    if isinstance(user_obj, dict): return user_obj.get("username", "anonymous")
+    return str(user_obj)
 # ==========================================
 # 📤 Standard File Upload
         "message": "File uploaded successfully"
     }
 # ==========================================
+# 📡 WebSocket Remote Upload
 # ==========================================
 @router.websocket("/ws/remote-upload/")
 async def websocket_remote_upload(websocket: WebSocket):
             await websocket.close()
             return
+        # Check if aria2c is installed
+        if shutil.which("aria2c") is None:
+            await websocket.send_text("❌ Error: 'aria2c' is not installed on the server.")
+            await websocket.close()
+            return
+        command = ["aria2c", "-x", "8", "-s", "8", "-d", UPLOAD_DIR, target_url]
         if custom_filename:
             command.extend(["-o", custom_filename])
+        await websocket.send_text(f"🚀 Starting download: {target_url}...")
         process = await asyncio.create_subprocess_exec(
             *command,
             stderr=asyncio.subprocess.PIPE
         )
+        # Stream stdout line by line
         while True:
             line = await process.stdout.readline()
             if not line:
                 await websocket.send_text(decoded_line)
         await process.wait()
         if process.returncode == 0:
             await websocket.send_text("✅ Download Complete.")
         else:
+            stderr_data = await process.stderr.read()
+            await websocket.send_text(f"❌ Download Failed: {stderr_data.decode()}")
         await websocket.close()
             await websocket.close()
         except:
             pass
+# ==========================================
+# 🎨 Modern UI Endpoint
+# ==========================================
+# Path becomes: /drive/storage/ui
+@router.get("/storage/ui", response_class=HTMLResponse)
+async def drive_ui():
+    html_content = """
+    <!DOCTYPE html>
+    <html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Cloud Drive | by Sam</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+        <style>
+            /* --- Shared Theme Config --- */
+            :root {
+                --primary: #3b82f6;
+                --primary-hover: #2563eb;
+                --bg-body: #f8fafc;
+                --bg-card: #ffffff;
+                --text-main: #0f172a;
+                --text-sub: #64748b;
+                --border: #e2e8f0;
+                --drop-bg: #f1f5f9;
+                --drop-hover: #dbeafe;
+                --term-bg: #1e293b;
+                --term-text: #34d399;
+                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            }
+            [data-theme="dark"] {
+                --primary: #60a5fa;
+                --primary-hover: #3b82f6;
+                --bg-body: #0f172a;
+                --bg-card: #1e293b;
+                --text-main: #f8fafc;
+                --text-sub: #94a3b8;
+                --border: #334155;
+                --drop-bg: #1e293b;
+                --drop-hover: #1e3a8a;
+                --term-bg: #0f172a;
+                --term-text: #34d399;
+                --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+            }
+            * { box-sizing: border-box; margin: 0; padding: 0; transition: background-color 0.3s ease, color 0.3s ease; }
+            body {
+                font-family: 'Plus Jakarta Sans', sans-serif;
+                background-color: var(--bg-body);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 1rem;
+            }
+            /* --- Navbar --- */
+            .navbar {
+                width: 100%; max-width: 1000px; display: flex;
+                justify-content: space-between; align-items: center; margin-bottom: 2rem;
+                animation: fadeIn 0.8s ease-out;
+            }
+            .brand { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
+            .brand span { color: var(--primary); }
+            .theme-toggle {
+                background: none; border: none; cursor: pointer; color: var(--text-main);
+                font-size: 1.2rem; padding: 8px; border-radius: 50%;
+                background-color: var(--bg-card); border: 1px solid var(--border);
+            }
+            /* --- Container & Tabs --- */
+            .container {
+                background: var(--bg-card); width: 100%; max-width: 800px;
+                border-radius: 24px; box-shadow: var(--shadow);
+                border: 1px solid var(--border); overflow: hidden;
+            }
+            .tabs { display: flex; border-bottom: 1px solid var(--border); }
+            .tab-btn {
+                flex: 1; padding: 1rem; border: none; background: transparent;
+                font-family: inherit; font-weight: 600; color: var(--text-sub);
+                cursor: pointer; transition: all 0.2s; border-bottom: 3px solid transparent;
+            }
+            .tab-btn:hover { background-color: var(--drop-bg); }
+            .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
+            .tab-content { padding: 2.5rem; display: none; animation: fadeIn 0.4s ease; }
+            .tab-content.active { display: block; }
+            /* --- Forms --- */
+            .input-group { margin-bottom: 1.5rem; }
+            .input-group label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-sub); margin-bottom: 0.5rem; }
+            .input-field {
+                width: 100%; padding: 0.8rem; border-radius: 12px; border: 1px solid var(--border);
+                background-color: var(--bg-body); color: var(--text-main); font-family: inherit;
+            }
+            .input-field:focus { outline: 2px solid var(--primary); border-color: transparent; }
+            /* --- Upload Zone --- */
+            .drop-area {
+                border: 2px dashed var(--border); border-radius: 16px; padding: 3rem 1rem;
+                text-align: center; cursor: pointer; background-color: var(--drop-bg);
+                transition: all 0.3s; margin-bottom: 1rem;
+            }
+            .drop-area:hover, .drop-area.dragover {
+                border-color: var(--primary); background-color: var(--drop-hover); transform: scale(1.01);
+            }
+            .drop-icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
+            /* --- Terminal --- */
+            .terminal {
+                background-color: var(--term-bg); color: var(--term-text);
+                font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
+                padding: 1rem; border-radius: 12px; height: 250px;
+                overflow-y: auto; margin-top: 1.5rem; display: none;
+                border: 1px solid var(--border); box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
+            }
+            .terminal-line { margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 2px; }
+            /* --- Buttons --- */
+            .btn {
+                padding: 0.8rem 2rem; border-radius: 12px; font-weight: 600; width: 100%;
+                cursor: pointer; border: none; font-size: 1rem; background-color: var(--primary); color: white;
+                transition: transform 0.2s, opacity 0.2s;
+            }
+            .btn:hover { opacity: 0.9; transform: translateY(-1px); }
+            .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+            /* --- Footer --- */
+            .dev-footer {
+                margin-top: 3rem; text-align: center; font-size: 0.9rem; color: var(--text-sub);
+                padding: 1rem; border-top: 1px solid var(--border); width: 100%; max-width: 600px;
+            }
+            .dev-badge {
+                display: inline-block; background: var(--bg-card); padding: 5px 15px;
+                border-radius: 20px; border: 1px solid var(--border); font-weight: 500; margin-top: 5px;
+            }
+            .dev-name { color: var(--primary); font-weight: 700; }
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        </style>
+    </head>
+    <body>
+        <nav class="navbar">
+            <div class="brand">☁️ Cloud Storage <span>Manager</span></div>
+            <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙</button>
+        </nav>
+        <div class="container">
+            <div class="tabs">
+                <button class="tab-btn active" onclick="switchTab('upload')">File Upload</button>
+                <button class="tab-btn" onclick="switchTab('remote')">Remote URL (Aria2)</button>
+            </div>
+            <div id="tab-upload" class="tab-content active">
+                <div class="drop-area" id="dropArea">
+                    <input type="file" id="fileInput" hidden>
+                    <span class="drop-icon">📂</span>
+                    <h3 id="dropText" style="font-weight: 600; margin-bottom: 0.5rem;">Click to upload or drag & drop</h3>
+                    <p style="color: var(--text-sub); font-size: 0.9rem;">Max file size: 1GB</p>
+                </div>
+                <button class="btn" id="uploadBtn" onclick="uploadFile()" disabled>Upload File</button>
+                <p id="uploadStatus" style="text-align: center; margin-top: 1rem; font-weight: 500;"></p>
+            </div>
+            <div id="tab-remote" class="tab-content">
+                <div class="input-group">
+                    <label>Target URL</label>
+                    <input type="text" id="remoteUrl" class="input-field" placeholder="https://example.com/file.zip">
+                </div>
+                <div class="input-group">
+                    <label>Custom Filename (Optional)</label>
+                    <input type="text" id="remoteName" class="input-field" placeholder="my_downloaded_file.zip">
+                </div>
+                <button class="btn" onclick="startRemoteUpload()">Start Remote Download</button>
+                <div class="terminal" id="terminal"></div>
+            </div>
+        </div>
+        <footer class="dev-footer">
+            <div>Designed & Developed by</div>
+            <div class="dev-badge">
+                <span class="dev-name">Sameer Banchhor</span> | Data Scientist
+            </div>
+        </footer>
+        <script>
+            // --- Theme Logic ---
+            const html = document.documentElement;
+            const themeBtn = document.getElementById('themeBtn');
+            function toggleTheme() {
+                const current = html.getAttribute('data-theme');
+                const next = current === 'light' ? 'dark' : 'light';
+                html.setAttribute('data-theme', next);
+                themeBtn.textContent = next === 'light' ? '🌙' : '☀️';
+                localStorage.setItem('theme', next);
+            }
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+            // --- Tab Logic ---
+            function switchTab(tab) {
+                document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
+                document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
+                document.getElementById('tab-' + tab).classList.add('active');
+                // Find button by text roughly or index - simple hack for 2 tabs
+                const btns = document.querySelectorAll('.tab-btn');
+                if(tab === 'upload') btns[0].classList.add('active');
+                else btns[1].classList.add('active');
+            }
+            // --- Local Upload Logic ---
+            const dropArea = document.getElementById('dropArea');
+            const fileInput = document.getElementById('fileInput');
+            const uploadBtn = document.getElementById('uploadBtn');
+            const dropText = document.getElementById('dropText');
+            const uploadStatus = document.getElementById('uploadStatus');
+            dropArea.addEventListener('click', () => fileInput.click());
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropArea.addEventListener(eventName, (e) => { e.preventDefault(); e.stopPropagation(); }, false);
+            });
+            dropArea.addEventListener('dragover', () => dropArea.classList.add('dragover'));
+            dropArea.addEventListener('dragleave', () => dropArea.classList.remove('dragover'));
+            dropArea.addEventListener('drop', (e) => {
+                if(e.dataTransfer.files.length) {
+                    fileInput.files = e.dataTransfer.files;
+                    handleFileSelect();
+                }
+            });
+            fileInput.addEventListener('change', handleFileSelect);
+            function handleFileSelect() {
+                const file = fileInput.files[0];
+                if(file) {
+                    dropText.textContent = "Selected: " + file.name;
+                    uploadBtn.disabled = false;
+                    uploadStatus.textContent = "";
+                }
+            }
+            async function uploadFile() {
+                const file = fileInput.files[0];
+                if(!file) return;
+                uploadBtn.disabled = true;
+                uploadBtn.textContent = "Uploading...";
+                const formData = new FormData();
+                formData.append('file', file);
+                try {
+                    const res = await fetch('/drive/upload/', { method: 'POST', body: formData });
+                    const data = await res.json();
+                    if(res.ok) {
+                        uploadStatus.style.color = "var(--primary)";
+                        uploadStatus.textContent = "✅ " + data.message;
+                    } else {
+                        throw new Error(data.detail || "Upload failed");
+                    }
+                } catch(err) {
+                    uploadStatus.style.color = "#ef4444";
+                    uploadStatus.textContent = "❌ Error: " + err.message;
+                } finally {
+                    uploadBtn.disabled = false;
+                    uploadBtn.textContent = "Upload File";
+                }
+            }
+            // --- Remote Upload Logic (WebSocket) ---
+            const terminal = document.getElementById('terminal');
+            function logToTerminal(msg) {
+                terminal.style.display = 'block';
+                const div = document.createElement('div');
+                div.className = 'terminal-line';
+                div.textContent = "> " + msg;
+                terminal.appendChild(div);
+                terminal.scrollTop = terminal.scrollHeight;
+            }
+            function startRemoteUpload() {
+                const url = document.getElementById('remoteUrl').value;
+                const filename = document.getElementById('remoteName').value;
+                if(!url) { alert("Please enter a URL"); return; }
+                terminal.innerHTML = ""; // Clear logs
+                logToTerminal("Initializing WebSocket connection...");
+                // Determine protocol (ws or wss)
+                const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+                // Note: The websocket endpoint remains the same, logic is handled by router prefix
+                const wsUrl = `${protocol}://${window.location.host}/drive/ws/remote-upload/`;
+                const ws = new WebSocket(wsUrl);
+                ws.onopen = () => {
+                    logToTerminal("Connected. Sending download command...");
+                    ws.send(JSON.stringify({ url: url, filename: filename }));
+                };
+                ws.onmessage = (event) => {
+                    logToTerminal(event.data);
+                };
+                ws.onerror = (error) => {
+                    logToTerminal("❌ WebSocket Error");
+                    console.error(error);
+                };
+                ws.onclose = () => {
+                    logToTerminal("Connection closed.");
+                };
+            }
+        </script>
+    </body>
+    </html>
+    """
+    return html_content

app/routers/image/bgremover.py CHANGED Viewed

@@ -1,5 +1,6 @@
 from fastapi import APIRouter, UploadFile, File, Depends, HTTPException
-from fastapi.responses import Response
 from rembg import remove
 from PIL import Image
 import io
@@ -15,32 +16,416 @@ router = APIRouter(
 # ==========================================
 # 🔐 Auth Toggle
 # ==========================================
-AUTH_ENABLED = False  # <<< set False to disable authentication
-# Logic to conditionally apply authentication
-# If True, the endpoint will require a valid token.
-# If False, the dependency list is empty.
 security_dependencies = [Depends(get_current_user)] if AUTH_ENABLED else []
 @router.post("/remove-bg", dependencies=security_dependencies)
 async def remove_background(file: UploadFile = File(...)):
-    """
-    Upload an image and receive it back with the background removed (PNG).
-    """
-    # 1. Validate file type
     if not file.content_type.startswith("image/"):
         raise HTTPException(status_code=400, detail="Invalid file type. Please upload an image.")
     try:
-        # 2. Read image data
         image_data = await file.read()
-        # 3. Process image using rembg
-        # We pass the raw bytes to remove() and it returns bytes (PNG)
         output_data = remove(image_data)
-        # 4. Return the result as a raw image response
         return Response(content=output_data, media_type="image/png")
     except Exception as e:
-        raise HTTPException(status_code=500, detail=f"Image processing failed: {str(e)}")

+from plistlib import UID
 from fastapi import APIRouter, UploadFile, File, Depends, HTTPException
+from fastapi.responses import Response, HTMLResponse
 from rembg import remove
 from PIL import Image
 import io
 # ==========================================
 # 🔐 Auth Toggle
 # ==========================================
+AUTH_ENABLED = False
 security_dependencies = [Depends(get_current_user)] if AUTH_ENABLED else []
 @router.post("/remove-bg", dependencies=security_dependencies)
 async def remove_background(file: UploadFile = File(...)):
     if not file.content_type.startswith("image/"):
         raise HTTPException(status_code=400, detail="Invalid file type. Please upload an image.")
     try:
         image_data = await file.read()
         output_data = remove(image_data)
         return Response(content=output_data, media_type="image/png")
     except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Image processing failed: {str(e)}")
+# =================================
+# MODERN UI ENDPOINT
+# =================================
+@router.get("/ui", response_class=HTMLResponse)
+async def image_ui():
+    html_content = """
+    <!DOCTYPE html>
+    <html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>RemBG Pro | AI Background Remover</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+        <style>
+            /* --- CSS Variables & Theme Config --- */
+            :root {
+                --primary: #6366f1;
+                --primary-hover: #4f46e5;
+                --bg-body: #f8fafc;
+                --bg-card: #ffffff;
+                --text-main: #0f172a;
+                --text-sub: #64748b;
+                --border: #e2e8f0;
+                --drop-bg: #f1f5f9;
+                --drop-hover: #e0e7ff;
+                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+                --checker-1: #e2e8f0;
+                --checker-2: transparent;
+            }
+            [data-theme="dark"] {
+                --primary: #818cf8;
+                --primary-hover: #6366f1;
+                --bg-body: #0f172a;
+                --bg-card: #1e293b;
+                --text-main: #f8fafc;
+                --text-sub: #94a3b8;
+                --border: #334155;
+                --drop-bg: #1e293b;
+                --drop-hover: #312e81;
+                --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+                --checker-1: #334155;
+                --checker-2: #1e293b;
+            }
+            * { box-sizing: border-box; margin: 0; padding: 0; transition: background-color 0.3s ease, color 0.3s ease; }
+            body {
+                font-family: 'Plus Jakarta Sans', sans-serif;
+                background-color: var(--bg-body);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 1rem;
+            }
+            /* --- Animations --- */
+            @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+            @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }
+            /* --- Layout Components --- */
+            .navbar {
+                width: 100%;
+                max-width: 1000px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 2rem;
+                animation: fadeIn 0.8s ease-out;
+            }
+            .brand { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
+            .brand span { color: var(--primary); }
+            .theme-toggle {
+                background: none; border: none; cursor: pointer; color: var(--text-main);
+                font-size: 1.2rem; padding: 8px; border-radius: 50%;
+                background-color: var(--bg-card); border: 1px solid var(--border);
+            }
+            .theme-toggle:hover { background-color: var(--drop-bg); }
+            .container {
+                background: var(--bg-card);
+                width: 100%;
+                max-width: 900px;
+                border-radius: 24px;
+                box-shadow: var(--shadow);
+                padding: 2.5rem;
+                border: 1px solid var(--border);
+                animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            h1 { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
+            p.subtitle { text-align: center; color: var(--text-sub); margin-bottom: 2rem; }
+            /* --- Drop Zone --- */
+            .drop-area {
+                border: 2px dashed var(--border);
+                border-radius: 16px;
+                padding: 3rem 1rem;
+                text-align: center;
+                cursor: pointer;
+                background-color: var(--drop-bg);
+                position: relative;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+            .drop-area:hover, .drop-area.dragover {
+                border-color: var(--primary);
+                background-color: var(--drop-hover);
+                transform: scale(1.01);
+            }
+            .drop-icon { font-size: 3rem; margin-bottom: 1rem; display: block; animation: bounce 2s infinite; }
+            /* --- Buttons --- */
+            .btn-action {
+                margin-top: 1.5rem;
+                display: flex; justify-content: center; gap: 1rem;
+            }
+            .btn {
+                padding: 0.8rem 2rem;
+                border-radius: 12px;
+                font-weight: 600;
+                cursor: pointer;
+                border: none;
+                font-size: 1rem;
+                transition: transform 0.2s;
+                display: inline-flex; align-items: center; gap: 8px;
+            }
+            .btn-primary {
+                background-color: var(--primary);
+                color: white;
+                box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+            }
+            .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
+            .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+            .btn-download {
+                background-color: #10b981; color: white; text-decoration: none;
+            }
+            .btn-download:hover { background-color: #059669; }
+            /* --- Results --- */
+            .results-container {
+                display: none;
+                grid-template-columns: 1fr 1fr;
+                gap: 1.5rem;
+                margin-top: 2rem;
+                animation: fadeIn 0.5s ease;
+            }
+            .img-card {
+                background: var(--bg-body);
+                padding: 1rem;
+                border-radius: 16px;
+                border: 1px solid var(--border);
+            }
+            .card-header { font-size: 0.9rem; font-weight: 600; color: var(--text-sub); margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
+            .img-wrapper {
+                width: 100%; height: 250px;
+                border-radius: 12px;
+                overflow: hidden;
+                display: flex; align-items: center; justify-content: center;
+                /* Checkered pattern */
+                background-image:
+                    linear-gradient(45deg, var(--checker-1) 25%, var(--checker-2) 25%),
+                    linear-gradient(-45deg, var(--checker-1) 25%, var(--checker-2) 25%),
+                    linear-gradient(45deg, var(--checker-2) 75%, var(--checker-1) 75%),
+                    linear-gradient(-45deg, var(--checker-2) 75%, var(--checker-1) 75%);
+                background-size: 20px 20px;
+                background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+            }
+            .img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }
+            /* --- Footer --- */
+            .dev-footer {
+                margin-top: 3rem;
+                text-align: center;
+                font-size: 0.9rem;
+                color: var(--text-sub);
+                padding: 1rem;
+                border-top: 1px solid var(--border);
+                width: 100%;
+                max-width: 600px;
+                animation: fadeIn 1.2s ease-out;
+            }
+            .dev-badge {
+                display: inline-block;
+                background: var(--bg-card);
+                padding: 5px 15px;
+                border-radius: 20px;
+                border: 1px solid var(--border);
+                font-weight: 500;
+                margin-top: 5px;
+            }
+            .dev-name { color: var(--primary); font-weight: 700; }
+            /* --- Loaders --- */
+            .loading-spinner {
+                display: none; width: 24px; height: 24px;
+                border: 3px solid rgba(255,255,255,0.3);
+                border-radius: 50%; border-top-color: white;
+                animation: spin 1s ease-in-out infinite;
+            }
+            @keyframes spin { to { transform: rotate(360deg); } }
+            /* --- Responsive Design --- */
+            @media (max-width: 768px) {
+                .results-container { grid-template-columns: 1fr; }
+                h1 { font-size: 1.5rem; }
+                .container { padding: 1.5rem; }
+            }
+        </style>
+    </head>
+    <body>
+        <nav class="navbar">
+            <div class="brand">✨ Background removal tool <span>by sam</span></div>
+            <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn" title="Toggle Dark Mode">
+                🌙
+            </button>
+        </nav>
+        <div class="container">
+            <h1>Remove Backgrounds Instantly</h1>
+            <p class="subtitle">Upload your image and let our AI handle the magic.</p>
+            <div class="drop-area" id="dropArea">
+                <input type="file" id="fileInput" accept="image/*" hidden>
+                <span class="drop-icon">📤</span>
+                <h3 style="font-weight: 600; margin-bottom: 0.5rem;">Click to upload or drag & drop</h3>
+                <p style="color: var(--text-sub); font-size: 0.9rem;">SVG, PNG, JPG or GIF</p>
+            </div>
+            <div class="btn-action">
+                <button class="btn btn-primary" id="processBtn" onclick="processImage()" disabled>
+                    <div class="loading-spinner" id="spinner"></div>
+                    <span id="btnText">Remove Background</span>
+                </button>
+            </div>
+            <p id="errorMsg" style="color: #ef4444; text-align: center; margin-top: 10px; display: none;"></p>
+            <div class="results-container" id="resultsGrid">
+                <div class="img-card">
+                    <div class="card-header">Original</div>
+                    <div class="img-wrapper">
+                        <img id="originalImg" src="" alt="Original">
+                    </div>
+                </div>
+                <div class="img-card">
+                    <div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
+                        <span>Result</span>
+                        <a id="downloadLink" href="#" download="rembg_result.png" class="btn btn-download" style="padding: 0.3rem 0.8rem; font-size: 0.8rem; border-radius: 6px;">
+                            ⬇ Save
+                        </a>
+                    </div>
+                    <div class="img-wrapper">
+                        <img id="processedImg" src="" alt="Processed">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer class="dev-footer">
+            <div>Designed & Developed by</div>
+            <div class="dev-badge">
+                <span class="dev-name">Sameer Banchhor</span> | Data Scientist
+            </div>
+        </footer>
+        <script>
+            // --- DOM Elements ---
+            const dropArea = document.getElementById('dropArea');
+            const fileInput = document.getElementById('fileInput');
+            const processBtn = document.getElementById('processBtn');
+            const spinner = document.getElementById('spinner');
+            const btnText = document.getElementById('btnText');
+            const resultsGrid = document.getElementById('resultsGrid');
+            const originalImg = document.getElementById('originalImg');
+            const processedImg = document.getElementById('processedImg');
+            const downloadLink = document.getElementById('downloadLink');
+            const errorMsg = document.getElementById('errorMsg');
+            const themeBtn = document.getElementById('themeBtn');
+            const html = document.documentElement;
+            // --- Theme Logic ---
+            function toggleTheme() {
+                const current = html.getAttribute('data-theme');
+                const next = current === 'light' ? 'dark' : 'light';
+                html.setAttribute('data-theme', next);
+                themeBtn.textContent = next === 'light' ? '🌙' : '☀️';
+                localStorage.setItem('theme', next);
+            }
+            // Init Theme
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+            // --- Upload Logic ---
+            dropArea.addEventListener('click', () => fileInput.click());
+            fileInput.addEventListener('change', handleFileSelect);
+            // Drag & Drop events
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropArea.addEventListener(eventName, preventDefaults, false);
+            });
+            function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropArea.addEventListener(eventName, () => dropArea.classList.add('dragover'), false);
+            });
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropArea.addEventListener(eventName, () => dropArea.classList.remove('dragover'), false);
+            });
+            dropArea.addEventListener('drop', (e) => {
+                const dt = e.dataTransfer;
+                const files = dt.files;
+                if(files.length) {
+                    fileInput.files = files;
+                    handleFileSelect();
+                }
+            });
+            function handleFileSelect() {
+                const file = fileInput.files[0];
+                if (file) {
+                    originalImg.src = URL.createObjectURL(file);
+                    processBtn.disabled = false;
+                    processBtn.style.animation = "pulse 1.5s infinite";
+                    resultsGrid.style.display = 'none'; // Hide old results
+                    errorMsg.style.display = 'none';
+                    // Update Drop Area Text to show selection
+                    dropArea.querySelector('h3').textContent = "Selected: " + file.name;
+                }
+            }
+            // --- API Logic ---
+            async function processImage() {
+                const file = fileInput.files[0];
+                if (!file) return;
+                // Loading State
+                processBtn.disabled = true;
+                processBtn.style.animation = "none";
+                spinner.style.display = 'block';
+                btnText.textContent = 'Processing...';
+                errorMsg.style.display = 'none';
+                const formData = new FormData();
+                formData.append('file', file);
+                try {
+                    const response = await fetch('/image/remove-bg', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    if (!response.ok) throw new Error('Failed to process image');
+                    const blob = await response.blob();
+                    const objectURL = URL.createObjectURL(blob);
+                    processedImg.src = objectURL;
+                    downloadLink.href = objectURL;
+                    // Show result with animation
+                    resultsGrid.style.display = 'grid';
+                    resultsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                } catch (err) {
+                    console.error(err);
+                    errorMsg.textContent = "Error: " + err.message;
+                    errorMsg.style.display = 'block';
+                } finally {
+                    processBtn.disabled = false;
+                    spinner.style.display = 'none';
+                    btnText.textContent = 'Remove Background';
+                }
+            }
+        </script>
+    </body>
+    </html>
+    """
+    return html_content

app/routers/image/jpgcompressor.py CHANGED Viewed

@@ -1,5 +1,5 @@
 from fastapi import APIRouter, UploadFile, File, Form, HTTPException
-from fastapi.responses import StreamingResponse
 from PIL import Image
 from io import BytesIO
@@ -8,46 +8,29 @@ from io import BytesIO
 # ==========================
 router = APIRouter(
     prefix="/image",
-    tags=["Image Processing"]
 )
 # ==========================
-# 📦 JPG Target Size Endpoint
 # ==========================
-@router.post("/compress_jpg_to_size")
 async def compress_jpg_to_size(
     file: UploadFile = File(..., description="The JPG image file to compress."),
     target_size_kb: int = Form(..., description="Target file size in KB (e.g., 240).")
 ):
     """
     🔧 Compresses a JPEG image to fit within a specific file size (in KB).
-    Uses binary search to find the best quality and, if necessary, resizes dimensions.
     """
-    # --------------------------
-    # 🛑 Validation Checks
-    # --------------------------
     if file.content_type not in ["image/jpeg", "image/jpg"]:
-        raise HTTPException(
-            status_code=400,
-            detail="Invalid file type. Only JPEG files are supported."
-        )
     if target_size_kb <= 0:
-        raise HTTPException(
-            status_code=400,
-            detail="Target size must be greater than 0 KB."
-        )
-    # Calculate target bytes
     target_bytes = target_size_kb * 1024
-    # --------------------------
-    # 📥 Read Image Bytes
-    # --------------------------
     content = await file.read()
-    # ⚡ Optimization: If original is already smaller than target, return original
     if len(content) <= target_bytes:
         return StreamingResponse(
             BytesIO(content),
@@ -59,86 +42,415 @@ async def compress_jpg_to_size(
     try:
         img = Image.open(input_buffer)
-        # Convert to RGB if necessary (e.g., if input was RGBA)
         if img.mode != 'RGB':
             img = img.convert('RGB')
         output_buffer = BytesIO()
-        # --------------------------
-        # 📉 Binary Search Algorithm
-        # --------------------------
-        # We search for the best quality between 1 and 95
-        min_quality = 1
-        max_quality = 95
         best_buffer = None
         while min_quality <= max_quality:
             quality = (min_quality + max_quality) // 2
-            # Clear buffer and save with current quality
             output_buffer.seek(0)
             output_buffer.truncate()
             img.save(output_buffer, format="JPEG", quality=quality)
-            size = output_buffer.tell()
-            if size <= target_bytes:
-                # This fits! But can we get better quality?
-                best_buffer = BytesIO(output_buffer.getvalue()) # Store success
-                min_quality = quality + 1 # Try higher quality
             else:
-                # Too big, reduce quality
                 max_quality = quality - 1
-        # --------------------------
-        # ⚠️ Fallback: Resize
-        # --------------------------
-        # If even quality=1 is too big, we must reduce image dimensions
         if best_buffer is None:
             resize_factor = 0.9
             while True:
                 width, height = img.size
-                new_width = int(width * resize_factor)
-                new_height = int(height * resize_factor)
-                # Stop if image gets too tiny (sanity check)
-                if new_width < 10 or new_height < 10:
-                    break
                 img = img.resize((new_width, new_height), Image.Resampling.LANCZOS)
                 output_buffer.seek(0)
                 output_buffer.truncate()
-                img.save(output_buffer, format="JPEG", quality=5) # Low quality + resize
                 if output_buffer.tell() <= target_bytes:
                     best_buffer = output_buffer
                     break
-                resize_factor *= 0.9 # Reduce size by another 10%
-        # If we still failed (extremely rare), just return the last attempt
         if best_buffer is None:
             output_buffer.seek(0)
             best_buffer = output_buffer
         best_buffer.seek(0)
-        # --------------------------
-        # 📤 Return as Stream
-        # --------------------------
         return StreamingResponse(
             best_buffer,
             media_type="image/jpeg",
-            headers={
-                "Content-Disposition": f"attachment; filename=compressed_{file.filename}"
-            }
         )
     except Exception as e:
-        raise HTTPException(
-            status_code=500,
-            detail=f"Image processing error: {e}"
-        )

 from fastapi import APIRouter, UploadFile, File, Form, HTTPException
+from fastapi.responses import StreamingResponse, HTMLResponse
 from PIL import Image
 from io import BytesIO
 # ==========================
 router = APIRouter(
     prefix="/image",
+    tags=["Image Compression"]
 )
 # ==========================
+# 📦 API Endpoint (Backend)
 # ==========================
+@router.post("/compress-jpg")
 async def compress_jpg_to_size(
     file: UploadFile = File(..., description="The JPG image file to compress."),
     target_size_kb: int = Form(..., description="Target file size in KB (e.g., 240).")
 ):
     """
     🔧 Compresses a JPEG image to fit within a specific file size (in KB).
     """
     if file.content_type not in ["image/jpeg", "image/jpg"]:
+        raise HTTPException(status_code=400, detail="Invalid file type. Only JPEG files are supported.")
     if target_size_kb <= 0:
+        raise HTTPException(status_code=400, detail="Target size must be greater than 0 KB.")
     target_bytes = target_size_kb * 1024
     content = await file.read()
     if len(content) <= target_bytes:
         return StreamingResponse(
             BytesIO(content),
     try:
         img = Image.open(input_buffer)
         if img.mode != 'RGB':
             img = img.convert('RGB')
         output_buffer = BytesIO()
+        # Binary Search
+        min_quality, max_quality = 1, 95
         best_buffer = None
         while min_quality <= max_quality:
             quality = (min_quality + max_quality) // 2
             output_buffer.seek(0)
             output_buffer.truncate()
             img.save(output_buffer, format="JPEG", quality=quality)
+            if output_buffer.tell() <= target_bytes:
+                best_buffer = BytesIO(output_buffer.getvalue())
+                min_quality = quality + 1
             else:
                 max_quality = quality - 1
+        # Resize Fallback
         if best_buffer is None:
             resize_factor = 0.9
             while True:
                 width, height = img.size
+                new_width, new_height = int(width * resize_factor), int(height * resize_factor)
+                if new_width < 10 or new_height < 10: break
                 img = img.resize((new_width, new_height), Image.Resampling.LANCZOS)
                 output_buffer.seek(0)
                 output_buffer.truncate()
+                img.save(output_buffer, format="JPEG", quality=5)
                 if output_buffer.tell() <= target_bytes:
                     best_buffer = output_buffer
                     break
+                resize_factor *= 0.9
         if best_buffer is None:
             output_buffer.seek(0)
             best_buffer = output_buffer
         best_buffer.seek(0)
         return StreamingResponse(
             best_buffer,
             media_type="image/jpeg",
+            headers={"Content-Disposition": f"attachment; filename=compressed_{file.filename}"}
         )
     except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Image processing error: {str(e)}")
+# ==========================
+# 🎨 Modern UI Endpoint
+# ==========================
+@router.get("/compress-jpg/ui", response_class=HTMLResponse)
+async def compressor_ui():
+    html_content = """
+    <!DOCTYPE html>
+    <html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>JPEG Compressor | by Sam</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+        <style>
+            /* --- Shared Theme Config --- */
+            :root {
+                --primary: #10b981;
+                --primary-hover: #059669;
+                --bg-body: #f8fafc;
+                --bg-card: #ffffff;
+                --text-main: #0f172a;
+                --text-sub: #64748b;
+                --border: #e2e8f0;
+                --drop-bg: #f1f5f9;
+                --drop-hover: #d1fae5;
+                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            }
+            [data-theme="dark"] {
+                --primary: #34d399;
+                --primary-hover: #10b981;
+                --bg-body: #0f172a;
+                --bg-card: #1e293b;
+                --text-main: #f8fafc;
+                --text-sub: #94a3b8;
+                --border: #334155;
+                --drop-bg: #1e293b;
+                --drop-hover: #064e3b;
+                --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+            }
+            * { box-sizing: border-box; margin: 0; padding: 0; transition: background-color 0.3s ease, color 0.3s ease; }
+            body {
+                font-family: 'Plus Jakarta Sans', sans-serif;
+                background-color: var(--bg-body);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 1rem;
+            }
+            /* --- Animations --- */
+            @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+            /* --- Navbar --- */
+            .navbar {
+                width: 100%; max-width: 1000px; display: flex;
+                justify-content: space-between; align-items: center; margin-bottom: 2rem;
+                animation: fadeIn 0.8s ease-out;
+            }
+            .brand { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
+            .brand span { color: var(--primary); }
+            .theme-toggle {
+                background: none; border: none; cursor: pointer; color: var(--text-main);
+                font-size: 1.2rem; padding: 8px; border-radius: 50%;
+                background-color: var(--bg-card); border: 1px solid var(--border);
+            }
+            /* --- Main Container --- */
+            .container {
+                background: var(--bg-card); width: 100%; max-width: 900px;
+                border-radius: 24px; box-shadow: var(--shadow); padding: 2.5rem;
+                border: 1px solid var(--border);
+                animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            h1 { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
+            p.subtitle { text-align: center; color: var(--text-sub); margin-bottom: 2rem; }
+            /* --- Controls --- */
+            .controls {
+                display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem;
+                align-items: center; flex-wrap: wrap;
+            }
+            .input-group {
+                display: flex; flex-direction: column; gap: 0.5rem;
+            }
+            .input-group label { font-size: 0.9rem; font-weight: 600; color: var(--text-sub); }
+            .input-field {
+                padding: 0.8rem; border-radius: 12px; border: 1px solid var(--border);
+                background-color: var(--bg-body); color: var(--text-main);
+                font-family: inherit; font-size: 1rem; width: 150px;
+            }
+            /* --- Drop Zone --- */
+            .drop-area {
+                border: 2px dashed var(--border); border-radius: 16px; padding: 2rem 1rem;
+                text-align: center; cursor: pointer; background-color: var(--drop-bg);
+                transition: all 0.3s;
+            }
+            .drop-area:hover, .drop-area.dragover {
+                border-color: var(--primary); background-color: var(--drop-hover); transform: scale(1.01);
+            }
+            .drop-icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
+            /* --- Buttons --- */
+            .btn-action { margin-top: 1.5rem; display: flex; justify-content: center; }
+            .btn {
+                padding: 0.8rem 2rem; border-radius: 12px; font-weight: 600;
+                cursor: pointer; border: none; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px;
+                transition: transform 0.2s;
+            }
+            .btn-primary {
+                background-color: var(--primary); color: white;
+                box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+            }
+            .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
+            .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+            .btn-download {
+                background-color: var(--primary); color: white; text-decoration: none;
+                padding: 0.4rem 1rem; border-radius: 8px; font-size: 0.9rem;
+            }
+            .btn-download:hover { opacity: 0.9; }
+            /* --- Results --- */
+            .results-container {
+                display: none; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem;
+                animation: fadeIn 0.5s ease;
+            }
+            .img-card {
+                background: var(--bg-body); padding: 1rem; border-radius: 16px; border: 1px solid var(--border);
+            }
+            .card-header {
+                font-size: 0.9rem; font-weight: 600; color: var(--text-sub);
+                margin-bottom: 0.8rem; text-transform: uppercase;
+                display: flex; justify-content: space-between; align-items: center;
+            }
+            .img-wrapper {
+                width: 100%; height: 250px; border-radius: 12px; overflow: hidden;
+                display: flex; align-items: center; justify-content: center;
+                background-color: var(--drop-bg);
+            }
+            .img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }
+            .loading-spinner {
+                display: none; width: 24px; height: 24px;
+                border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white;
+                animation: spin 1s infinite linear;
+            }
+            @keyframes spin { to { transform: rotate(360deg); } }
+            /* --- Developer Footer --- */
+            .dev-footer {
+                margin-top: 3rem;
+                text-align: center;
+                font-size: 0.9rem;
+                color: var(--text-sub);
+                padding: 1rem;
+                border-top: 1px solid var(--border);
+                width: 100%;
+                max-width: 600px;
+                animation: fadeIn 1.2s ease-out;
+            }
+            .dev-badge {
+                display: inline-block;
+                background: var(--bg-card);
+                padding: 5px 15px;
+                border-radius: 20px;
+                border: 1px solid var(--border);
+                font-weight: 500;
+                margin-top: 5px;
+            }
+            .dev-name { color: var(--primary); font-weight: 700; }
+            @media (max-width: 768px) {
+                .results-container { grid-template-columns: 1fr; }
+            }
+        </style>
+    </head>
+    <body>
+        <nav class="navbar">
+            <div class="brand">⚡ JPEG Compressor <span>by sam</span></div>
+            <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙</button>
+        </nav>
+        <div class="container">
+            <h1>Smart Image Compression</h1>
+            <p class="subtitle">Reduce file size without sacrificing quality.</p>
+            <div class="controls">
+                <div class="input-group">
+                    <label for="sizeInput">Target Size (KB)</label>
+                    <input type="number" id="sizeInput" class="input-field" value="200" min="10" placeholder="e.g. 200">
+                </div>
+            </div>
+            <div class="drop-area" id="dropArea">
+                <input type="file" id="fileInput" accept="image/jpeg, image/jpg" hidden>
+                <span class="drop-icon">📦</span>
+                <h3 id="dropText" style="font-weight: 600; margin-bottom: 0.5rem;">Click to upload or drag & drop</h3>
+                <p style="color: var(--text-sub); font-size: 0.9rem;">JPG or JPEG only</p>
+            </div>
+            <div class="btn-action">
+                <button class="btn btn-primary" id="processBtn" onclick="processImage()" disabled>
+                    <div class="loading-spinner" id="spinner"></div>
+                    <span id="btnText">Compress Image</span>
+                </button>
+            </div>
+            <p id="errorMsg" style="color: #ef4444; text-align: center; margin-top: 10px; display: none;"></p>
+            <div class="results-container" id="resultsGrid">
+                <div class="img-card">
+                    <div class="card-header">Original</div>
+                    <div class="img-wrapper">
+                        <img id="originalImg" src="" alt="Original">
+                    </div>
+                </div>
+                <div class="img-card">
+                    <div class="card-header">
+                        <span>Compressed</span>
+                        <a id="downloadLink" href="#" class="btn-download">⬇ Save</a>
+                    </div>
+                    <div class="img-wrapper">
+                        <img id="processedImg" src="" alt="Compressed">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer class="dev-footer">
+            <div>Designed & Developed by</div>
+            <div class="dev-badge">
+                <span class="dev-name">Sameer Banchhor</span> | Data Scientist
+            </div>
+        </footer>
+        <script>
+            // Elements
+            const dropArea = document.getElementById('dropArea');
+            const fileInput = document.getElementById('fileInput');
+            const processBtn = document.getElementById('processBtn');
+            const sizeInput = document.getElementById('sizeInput');
+            const spinner = document.getElementById('spinner');
+            const btnText = document.getElementById('btnText');
+            const resultsGrid = document.getElementById('resultsGrid');
+            const originalImg = document.getElementById('originalImg');
+            const processedImg = document.getElementById('processedImg');
+            const downloadLink = document.getElementById('downloadLink');
+            const errorMsg = document.getElementById('errorMsg');
+            const dropText = document.getElementById('dropText');
+            // Theme Logic
+            const html = document.documentElement;
+            const themeBtn = document.getElementById('themeBtn');
+            function toggleTheme() {
+                const current = html.getAttribute('data-theme');
+                const next = current === 'light' ? 'dark' : 'light';
+                html.setAttribute('data-theme', next);
+                themeBtn.textContent = next === 'light' ? '🌙' : '☀️';
+                localStorage.setItem('theme', next);
+            }
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+            // Drag & Drop
+            dropArea.addEventListener('click', () => fileInput.click());
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropArea.addEventListener(eventName, (e) => {
+                    e.preventDefault(); e.stopPropagation();
+                }, false);
+            });
+            ['dragenter', 'dragover'].forEach(name => dropArea.classList.add('dragover'));
+            ['dragleave', 'drop'].forEach(name => dropArea.classList.remove('dragover'));
+            dropArea.addEventListener('drop', (e) => {
+                if(e.dataTransfer.files.length) {
+                    fileInput.files = e.dataTransfer.files;
+                    handleFileSelect();
+                }
+            });
+            fileInput.addEventListener('change', handleFileSelect);
+            function handleFileSelect() {
+                const file = fileInput.files[0];
+                if (file) {
+                    originalImg.src = URL.createObjectURL(file);
+                    processBtn.disabled = false;
+                    dropText.textContent = "Selected: " + file.name;
+                    resultsGrid.style.display = 'none';
+                    errorMsg.style.display = 'none';
+                }
+            }
+            // Process Logic
+            async function processImage() {
+                const file = fileInput.files[0];
+                const kbSize = sizeInput.value;
+                if (!file || !kbSize) return;
+                processBtn.disabled = true;
+                spinner.style.display = 'block';
+                btnText.textContent = 'Compressing...';
+                const formData = new FormData();
+                formData.append('file', file);
+                formData.append('target_size_kb', kbSize);
+                try {
+                    const response = await fetch('/image/compress-jpg', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    if (!response.ok) throw new Error(await response.text());
+                    const blob = await response.blob();
+                    const objectURL = URL.createObjectURL(blob);
+                    processedImg.src = objectURL;
+                    downloadLink.href = objectURL;
+                    downloadLink.download = "compressed_" + file.name;
+                    resultsGrid.style.display = 'grid';
+                    resultsGrid.scrollIntoView({ behavior: 'smooth' });
+                } catch (err) {
+                    console.error(err);
+                    errorMsg.textContent = "Error: " + (err.message || "Compression failed");
+                    errorMsg.style.display = 'block';
+                } finally {
+                    processBtn.disabled = false;
+                    spinner.style.display = 'none';
+                    btnText.textContent = 'Compress Image';
+                }
+            }
+        </script>
+    </body>
+    </html>
+    """
+    return html_content

app/routers/pdf/pdf_tools.py CHANGED Viewed

@@ -1,9 +1,10 @@
-from fastapi import APIRouter, UploadFile, File, HTTPException, Security
-from fastapi.responses import FileResponse
 from pypdf import PdfReader, PdfWriter
 import os
 import shutil
 import tempfile
 # Define the APIRouter object
 router = APIRouter(
@@ -11,8 +12,11 @@ router = APIRouter(
     tags=["PDF Manipulation"],
 )
 @router.post("/merge")
-async def merge_pdfs(files: list[UploadFile] = File(description="List of PDFs to merge")):
     """
     Merges multiple uploaded PDF files into a single PDF.
     """
@@ -22,9 +26,13 @@ async def merge_pdfs(files: list[UploadFile] = File(description="List of PDFs to
     pdf_writer = PdfWriter()
     # Create a temporary directory to store files
-    with tempfile.TemporaryDirectory() as temp_dir:
-        output_path = os.path.join(temp_dir, "merged_output.pdf")
         for file in files:
             # Save the uploaded file temporarily
             temp_file_path = os.path.join(temp_dir, file.filename)
@@ -43,13 +51,19 @@ async def merge_pdfs(files: list[UploadFile] = File(description="List of PDFs to
         with open(output_path, "wb") as output_file:
             pdf_writer.write(output_file)
-        # Return the merged file as a response
         return FileResponse(output_path, media_type="application/pdf", filename="merged_document.pdf")
 @router.post("/rotate")
 async def rotate_pdf(
-    file: UploadFile = File(description="PDF file to rotate"),
-    degrees: int = 90  # Default rotation is 90 degrees clockwise
 ):
     """
     Rotates all pages of a single PDF by a specified degree (90, 180, or 270).
@@ -59,10 +73,11 @@ async def rotate_pdf(
     pdf_writer = PdfWriter()
-    with tempfile.TemporaryDirectory() as temp_dir:
-        input_path = os.path.join(temp_dir, file.filename)
-        output_path = os.path.join(temp_dir, "rotated_output.pdf")
         # Save the uploaded file temporarily
         with open(input_path, "wb") as buffer:
             shutil.copyfileobj(file.file, buffer)
@@ -80,4 +95,382 @@ async def rotate_pdf(
         with open(output_path, "wb") as output_file:
             pdf_writer.write(output_file)
-        return FileResponse(output_path, media_type="application/pdf", filename=f"rotated_{degrees}.pdf")

+from fastapi import APIRouter, UploadFile, File, HTTPException, Form
+from fastapi.responses import FileResponse, HTMLResponse
 from pypdf import PdfReader, PdfWriter
 import os
 import shutil
 import tempfile
+from typing import List
 # Define the APIRouter object
 router = APIRouter(
     tags=["PDF Manipulation"],
 )
+# ==========================
+# 🧩 PDF Merge Endpoint
+# ==========================
 @router.post("/merge")
+async def merge_pdfs(files: List[UploadFile] = File(..., description="List of PDFs to merge")):
     """
     Merges multiple uploaded PDF files into a single PDF.
     """
     pdf_writer = PdfWriter()
     # Create a temporary directory to store files
+    # Note: We rely on the OS to clean up the temp dir eventually,
+    # or we return a FileResponse which keeps the file handle open briefly.
+    # For a robust production app, consider BackgroundTasks for cleanup.
+    temp_dir = tempfile.mkdtemp()
+    output_path = os.path.join(temp_dir, "merged_output.pdf")
+    try:
         for file in files:
             # Save the uploaded file temporarily
             temp_file_path = os.path.join(temp_dir, file.filename)
         with open(output_path, "wb") as output_file:
             pdf_writer.write(output_file)
         return FileResponse(output_path, media_type="application/pdf", filename="merged_document.pdf")
+    except Exception as e:
+        shutil.rmtree(temp_dir) # Cleanup on error
+        raise HTTPException(status_code=500, detail=str(e))
+# ==========================
+# 🔄 PDF Rotate Endpoint
+# ==========================
 @router.post("/rotate")
 async def rotate_pdf(
+    file: UploadFile = File(..., description="PDF file to rotate"),
+    degrees: int = 90
 ):
     """
     Rotates all pages of a single PDF by a specified degree (90, 180, or 270).
     pdf_writer = PdfWriter()
+    temp_dir = tempfile.mkdtemp()
+    input_path = os.path.join(temp_dir, file.filename)
+    output_path = os.path.join(temp_dir, f"rotated_{degrees}.pdf")
+    try:
         # Save the uploaded file temporarily
         with open(input_path, "wb") as buffer:
             shutil.copyfileobj(file.file, buffer)
         with open(output_path, "wb") as output_file:
             pdf_writer.write(output_file)
+        return FileResponse(output_path, media_type="application/pdf", filename=f"rotated_{degrees}.pdf")
+    except Exception as e:
+        shutil.rmtree(temp_dir)
+        raise HTTPException(status_code=500, detail=str(e))
+# ==========================
+# 🎨 Modern UI Endpoint
+# ==========================
+@router.get("/ui", response_class=HTMLResponse)
+async def pdf_tools_ui():
+    html_content = """
+    <!DOCTYPE html>
+    <html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>PDF Tools | by Sam</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+        <style>
+            /* --- Shared Theme Config --- */
+            :root {
+                --primary: #ef4444; /* PDF Red */
+                --primary-hover: #dc2626;
+                --bg-body: #f8fafc;
+                --bg-card: #ffffff;
+                --text-main: #0f172a;
+                --text-sub: #64748b;
+                --border: #e2e8f0;
+                --drop-bg: #fef2f2;
+                --drop-hover: #fee2e2;
+                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            }
+            [data-theme="dark"] {
+                --primary: #f87171;
+                --primary-hover: #ef4444;
+                --bg-body: #0f172a;
+                --bg-card: #1e293b;
+                --text-main: #f8fafc;
+                --text-sub: #94a3b8;
+                --border: #334155;
+                --drop-bg: #1e293b;
+                --drop-hover: #450a0a;
+                --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+            }
+            * { box-sizing: border-box; margin: 0; padding: 0; transition: background-color 0.3s ease, color 0.3s ease; }
+            body {
+                font-family: 'Plus Jakarta Sans', sans-serif;
+                background-color: var(--bg-body);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 1rem;
+            }
+            /* --- Navbar --- */
+            .navbar {
+                width: 100%; max-width: 1000px; display: flex;
+                justify-content: space-between; align-items: center; margin-bottom: 2rem;
+                animation: fadeIn 0.8s ease-out;
+            }
+            .brand { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
+            .brand span { color: var(--primary); }
+            .theme-toggle { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 8px; border-radius: 50%; background-color: var(--bg-card); border: 1px solid var(--border); }
+            /* --- Container & Tabs --- */
+            .container {
+                background: var(--bg-card); width: 100%; max-width: 800px;
+                border-radius: 24px; box-shadow: var(--shadow);
+                border: 1px solid var(--border); overflow: hidden;
+                animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            .tabs { display: flex; border-bottom: 1px solid var(--border); }
+            .tab-btn {
+                flex: 1; padding: 1rem; border: none; background: transparent;
+                font-family: inherit; font-weight: 600; color: var(--text-sub);
+                cursor: pointer; transition: all 0.2s; border-bottom: 3px solid transparent;
+            }
+            .tab-btn:hover { background-color: var(--drop-bg); }
+            .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
+            .tab-content { padding: 2.5rem; display: none; animation: fadeIn 0.4s ease; }
+            .tab-content.active { display: block; }
+            /* --- Controls --- */
+            .drop-area {
+                border: 2px dashed var(--border); border-radius: 16px; padding: 3rem 1rem;
+                text-align: center; cursor: pointer; background-color: var(--drop-bg);
+                transition: all 0.3s; margin-bottom: 1.5rem;
+            }
+            .drop-area:hover, .drop-area.dragover { border-color: var(--primary); background-color: var(--drop-hover); transform: scale(1.01); }
+            .drop-icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
+            .file-list { margin-bottom: 1rem; text-align: left; background: var(--bg-body); padding: 1rem; border-radius: 8px; display: none; }
+            .file-item { font-size: 0.9rem; color: var(--text-sub); padding: 4px 0; border-bottom: 1px solid var(--border); }
+            .rotate-options { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; }
+            .rotate-btn {
+                padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px;
+                background: var(--bg-body); color: var(--text-sub); cursor: pointer;
+            }
+            .rotate-btn.selected { background: var(--primary); color: white; border-color: var(--primary); }
+            .btn {
+                padding: 0.8rem 2rem; border-radius: 12px; font-weight: 600; width: 100%;
+                cursor: pointer; border: none; font-size: 1rem; background-color: var(--primary); color: white;
+                display: flex; justify-content: center; align-items: center; gap: 10px;
+            }
+            .btn:disabled { opacity: 0.6; cursor: not-allowed; }
+            /* --- Footer --- */
+            .dev-footer {
+                margin-top: 3rem; text-align: center; font-size: 0.9rem; color: var(--text-sub);
+                padding: 1rem; border-top: 1px solid var(--border); width: 100%; max-width: 600px;
+            }
+            .dev-badge {
+                display: inline-block; background: var(--bg-card); padding: 5px 15px;
+                border-radius: 20px; border: 1px solid var(--border); font-weight: 500; margin-top: 5px;
+            }
+            .dev-name { color: var(--primary); font-weight: 700; }
+            .spinner { width: 20px; height: 20px; border: 2px solid #ffffff; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
+            @keyframes spin { to { transform: rotate(360deg); } }
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+            @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        </style>
+    </head>
+    <body>
+        <nav class="navbar">
+            <div class="brand">📄 PDF Tools <span>Suite</span></div>
+            <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙</button>
+        </nav>
+        <div class="container">
+            <div class="tabs">
+                <button class="tab-btn active" onclick="switchTab('merge')">Merge PDFs</button>
+                <button class="tab-btn" onclick="switchTab('rotate')">Rotate PDF</button>
+            </div>
+            <div id="tab-merge" class="tab-content active">
+                <p style="text-align: center; color: var(--text-sub); margin-bottom: 1rem;">Combine multiple PDF files into one.</p>
+                <div class="drop-area" id="mergeDrop">
+                    <input type="file" id="mergeInput" accept="application/pdf" multiple hidden>
+                    <span class="drop-icon">📑</span>
+                    <h3 style="font-weight: 600;">Drag & Drop PDFs here</h3>
+                    <p style="color: var(--text-sub); font-size: 0.9rem;">or click to browse</p>
+                </div>
+                <div class="file-list" id="mergeFileList"></div>
+                <button class="btn" id="mergeBtn" onclick="processMerge()" disabled>
+                    <div class="spinner" id="mergeSpinner"></div>
+                    <span id="mergeBtnText">Merge Files</span>
+                </button>
+                <p id="mergeError" style="color: #ef4444; text-align: center; margin-top: 10px; display: none;"></p>
+            </div>
+            <div id="tab-rotate" class="tab-content">
+                <p style="text-align: center; color: var(--text-sub); margin-bottom: 1rem;">Rotate all pages in a PDF document.</p>
+                <div class="drop-area" id="rotateDrop">
+                    <input type="file" id="rotateInput" accept="application/pdf" hidden>
+                    <span class="drop-icon">🔄</span>
+                    <h3 id="rotateText" style="font-weight: 600;">Upload PDF to Rotate</h3>
+                </div>
+                <div class="rotate-options">
+                    <button class="rotate-btn selected" onclick="setRotation(90)">90° CW</button>
+                    <button class="rotate-btn" onclick="setRotation(180)">180°</button>
+                    <button class="rotate-btn" onclick="setRotation(270)">270° CW</button>
+                </div>
+                <button class="btn" id="rotateBtn" onclick="processRotate()" disabled>
+                    <div class="spinner" id="rotateSpinner"></div>
+                    <span id="rotateBtnText">Rotate PDF</span>
+                </button>
+                <p id="rotateError" style="color: #ef4444; text-align: center; margin-top: 10px; display: none;"></p>
+            </div>
+        </div>
+        <footer class="dev-footer">
+            <div>Designed & Developed by</div>
+            <div class="dev-badge">
+                <span class="dev-name">Sameer Banchhor</span> | Data Scientist
+            </div>
+        </footer>
+        <script>
+            // --- Theme & Tab Logic ---
+            const html = document.documentElement;
+            const themeBtn = document.getElementById('themeBtn');
+            function toggleTheme() {
+                const current = html.getAttribute('data-theme');
+                const next = current === 'light' ? 'dark' : 'light';
+                html.setAttribute('data-theme', next);
+                themeBtn.textContent = next === 'light' ? '🌙' : '☀️';
+                localStorage.setItem('theme', next);
+            }
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+            function switchTab(tab) {
+                document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
+                document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
+                document.getElementById('tab-' + tab).classList.add('active');
+                // Simple active class toggle for buttons
+                const btns = document.querySelectorAll('.tab-btn');
+                if(tab === 'merge') btns[0].classList.add('active');
+                else btns[1].classList.add('active');
+            }
+            // --- Merge Logic ---
+            const mergeDrop = document.getElementById('mergeDrop');
+            const mergeInput = document.getElementById('mergeInput');
+            const mergeFileList = document.getElementById('mergeFileList');
+            const mergeBtn = document.getElementById('mergeBtn');
+            let mergeFiles = [];
+            mergeDrop.addEventListener('click', () => mergeInput.click());
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
+                mergeDrop.addEventListener(evt, (e) => { e.preventDefault(); e.stopPropagation(); });
+            });
+            mergeDrop.addEventListener('drop', (e) => {
+                if(e.dataTransfer.files.length) handleMergeFiles(e.dataTransfer.files);
+            });
+            mergeInput.addEventListener('change', () => handleMergeFiles(mergeInput.files));
+            function handleMergeFiles(files) {
+                mergeFiles = Array.from(files); // Convert FileList to Array
+                if(mergeFiles.length < 2) {
+                    alert("Please select at least 2 PDF files.");
+                    return;
+                }
+                updateFileList();
+                mergeBtn.disabled = false;
+            }
+            function updateFileList() {
+                mergeFileList.style.display = 'block';
+                mergeFileList.innerHTML = mergeFiles.map((f, i) =>
+                    `<div class="file-item">${i+1}. ${f.name} (${(f.size/1024/1024).toFixed(2)} MB)</div>`
+                ).join('');
+            }
+            async function processMerge() {
+                if(mergeFiles.length < 2) return;
+                setLoading('merge', true);
+                const formData = new FormData();
+                mergeFiles.forEach(file => formData.append('files', file));
+                try {
+                    const res = await fetch('/pdf/merge', { method: 'POST', body: formData });
+                    if(!res.ok) throw new Error("Merge failed");
+                    const blob = await res.blob();
+                    downloadBlob(blob, 'merged_document.pdf');
+                } catch(e) {
+                    showError('merge', e.message);
+                } finally {
+                    setLoading('merge', false);
+                }
+            }
+            // --- Rotate Logic ---
+            const rotateDrop = document.getElementById('rotateDrop');
+            const rotateInput = document.getElementById('rotateInput');
+            const rotateText = document.getElementById('rotateText');
+            const rotateBtn = document.getElementById('rotateBtn');
+            let rotateFile = null;
+            let currentRotation = 90;
+            rotateDrop.addEventListener('click', () => rotateInput.click());
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
+                rotateDrop.addEventListener(evt, (e) => { e.preventDefault(); e.stopPropagation(); });
+            });
+            rotateDrop.addEventListener('drop', (e) => {
+                if(e.dataTransfer.files.length) handleRotateFile(e.dataTransfer.files[0]);
+            });
+            rotateInput.addEventListener('change', () => handleRotateFile(rotateInput.files[0]));
+            function handleRotateFile(file) {
+                if(!file || file.type !== 'application/pdf') {
+                    alert("Please select a valid PDF."); return;
+                }
+                rotateFile = file;
+                rotateText.textContent = "Selected: " + file.name;
+                rotateBtn.disabled = false;
+            }
+            function setRotation(deg) {
+                currentRotation = deg;
+                document.querySelectorAll('.rotate-btn').forEach(b => b.classList.remove('selected'));
+                // Identify button by onclick text content or order.
+                // Hardcoding logic for simplicity:
+                const btns = document.querySelectorAll('.rotate-btn');
+                if(deg === 90) btns[0].classList.add('selected');
+                if(deg === 180) btns[1].classList.add('selected');
+                if(deg === 270) btns[2].classList.add('selected');
+            }
+            async function processRotate() {
+                if(!rotateFile) return;
+                setLoading('rotate', true);
+                const formData = new FormData();
+                formData.append('file', rotateFile);
+                try {
+                    const res = await fetch(`/pdf/rotate?degrees=${currentRotation}`, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    if(!res.ok) throw new Error("Rotation failed");
+                    const blob = await res.blob();
+                    downloadBlob(blob, `rotated_${currentRotation}_${rotateFile.name}`);
+                } catch(e) {
+                    showError('rotate', e.message);
+                } finally {
+                    setLoading('rotate', false);
+                }
+            }
+            // --- Helpers ---
+            function downloadBlob(blob, filename) {
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = filename;
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+            }
+            function setLoading(type, isLoading) {
+                const btn = document.getElementById(`${type}Btn`);
+                const spinner = document.getElementById(`${type}Spinner`);
+                const text = document.getElementById(`${type}BtnText`);
+                const error = document.getElementById(`${type}Error`);
+                error.style.display = 'none';
+                if(isLoading) {
+                    btn.disabled = true;
+                    spinner.style.display = 'block';
+                    text.textContent = 'Processing...';
+                } else {
+                    btn.disabled = false;
+                    spinner.style.display = 'none';
+                    text.textContent = type === 'merge' ? 'Merge Files' : 'Rotate PDF';
+                }
+            }
+            function showError(type, msg) {
+                const el = document.getElementById(`${type}Error`);
+                el.textContent = "Error: " + msg;
+                el.style.display = 'block';
+            }
+        </script>
+    </body>
+    </html>
+    """
+    return html_content

app/routers/security/password_generator.py CHANGED Viewed

@@ -1,44 +1,432 @@
 import random
 import string
-from fastapi import APIRouter, Query, Depends  # Added 'Depends'
-from app.routers.auth.system import get_current_user  # Import our Auth System
-# Define the APIRouter object as per documentation standards
 router = APIRouter(
-    prefix="/security",         # Endpoints will start with /security
     tags=["Password Tools"],
 )
 @router.get("/generate-password")
 def generate_password(
-    length: int = Query(12, ge=8, le=64, description="Length of the password (8-64)"),
     include_uppercase: bool = True,
     include_numbers: bool = True,
     include_symbols: bool = True,
-    # 👇 This line locks the endpoint!
-    current_user: dict = Depends(get_current_user)
 ):
     """
-    Generates a secure, random password.
-    **Requires Authentication.**
     """
-    # Base character set
-    chars = string.ascii_lowercase
-    # Advanced logic to append character sets based on flags
     if include_uppercase:
-        chars += string.ascii_uppercase
     if include_numbers:
-        chars += string.digits
     if include_symbols:
-        chars += string.punctuation
-    # Generate the password
-    generated_password = "".join(random.choice(chars) for _ in range(length))
     return {
-        "requested_by": current_user.username, # We can now see who asked for it!
-        "password": generated_password,
         "length": length,
-        "complexity": "Advanced"
-    }

 import random
 import string
+from fastapi import APIRouter, Query, Depends, HTTPException
+from fastapi.responses import HTMLResponse
+from typing import Optional
+# ==========================
+# 🔐 Auth & Configuration
+# ==========================
+# Try to import the auth system, otherwise mock it for standalone use
+try:
+    from app.routers.auth.system import get_current_user
+except ImportError:
+    def get_current_user(): return {"username": "Anonymous"}
+AUTH_ENABLED = False # Set to True to enforce login
+def auth_dependency():
+    return Depends(get_current_user) if AUTH_ENABLED else None
+# ==========================
+# 🛠️ Router Setup
+# ==========================
 router = APIRouter(
+    prefix="/security",
     tags=["Password Tools"],
 )
+# ==========================
+# 🎲 Password Logic (API)
+# ==========================
 @router.get("/generate-password")
 def generate_password(
+    length: int = Query(16, ge=8, le=128, description="Length of the password"),
     include_uppercase: bool = True,
+    include_lowercase: bool = True,
     include_numbers: bool = True,
     include_symbols: bool = True,
+    exclude_ambiguous: bool = False,
+    current_user: dict = auth_dependency()
 ):
     """
+    Generates a cryptographically strong random password with advanced options.
     """
+    # Character Sets
+    lower = string.ascii_lowercase
+    upper = string.ascii_uppercase
+    nums = string.digits
+    syms = "!@#$%^&*()_+-=[]{}|;:,.<>?"
+    ambiguous = "il1Lo0O"
+    # Filter ambiguous characters if requested
+    if exclude_ambiguous:
+        lower = "".join([c for c in lower if c not in ambiguous])
+        upper = "".join([c for c in upper if c not in ambiguous])
+        nums = "".join([c for c in nums if c not in ambiguous])
+        syms = "".join([c for c in syms if c not in ambiguous])
+    # Build Pool
+    pool = ""
+    guaranteed_chars = []
+    if include_lowercase:
+        pool += lower
+        guaranteed_chars.append(random.choice(lower))
     if include_uppercase:
+        pool += upper
+        guaranteed_chars.append(random.choice(upper))
     if include_numbers:
+        pool += nums
+        guaranteed_chars.append(random.choice(nums))
     if include_symbols:
+        pool += syms
+        guaranteed_chars.append(random.choice(syms))
+    if not pool:
+        raise HTTPException(status_code=400, detail="At least one character type must be selected.")
+    # Generate remaining characters
+    remaining_length = length - len(guaranteed_chars)
+    if remaining_length < 0:
+        password_chars = guaranteed_chars[:length]
+    else:
+        password_chars = guaranteed_chars + [random.choice(pool) for _ in range(remaining_length)]
+    # Shuffle to remove predictable patterns
+    random.shuffle(password_chars)
+    final_password = "".join(password_chars)
+    # Calculate basic entropy/strength
+    pool_size = len(pool)
+    entropy = length * (len(bin(pool_size)) - 2)
+    strength = "Weak"
+    if entropy > 50: strength = "Medium"
+    if entropy > 80: strength = "Strong"
+    if entropy > 120: strength = "Very Strong"
+    user_info = current_user.get("username", "Anonymous") if current_user else "Anonymous"
     return {
+        "requested_by": user_info,
+        "password": final_password,
         "length": length,
+        "strength": strength,
+        "entropy_bits": int(entropy)
+    }
+# ==========================
+# 🎨 Modern UI Endpoint
+# ==========================
+# Path becomes: /security/password-generator/ui
+@router.get("/password-generator/ui", response_class=HTMLResponse)
+async def password_ui():
+    html_content = """
+    <!DOCTYPE html>
+    <html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Password Tool</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
+        <style>
+            :root {
+                --primary: #6366f1;
+                --primary-hover: #4f46e5;
+                --bg-body: #f8fafc;
+                --bg-card: #ffffff;
+                --text-main: #0f172a;
+                --text-sub: #64748b;
+                --border: #e2e8f0;
+                --input-bg: #f1f5f9;
+                --success: #10b981;
+                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            }
+            [data-theme="dark"] {
+                --primary: #818cf8;
+                --primary-hover: #6366f1;
+                --bg-body: #0f172a;
+                --bg-card: #1e293b;
+                --text-main: #f8fafc;
+                --text-sub: #94a3b8;
+                --border: #334155;
+                --input-bg: #0f172a;
+                --success: #34d399;
+                --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+            }
+            * { box-sizing: border-box; margin: 0; padding: 0; transition: background-color 0.3s, color 0.3s; }
+            body {
+                font-family: 'Plus Jakarta Sans', sans-serif;
+                background-color: var(--bg-body);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 1rem;
+            }
+            /* Navbar */
+            .navbar {
+                width: 100%; max-width: 600px; display: flex;
+                justify-content: space-between; align-items: center; margin-bottom: 2rem;
+            }
+            .brand { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
+            .brand span { color: var(--primary); }
+            .theme-toggle { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 8px; border-radius: 50%; background-color: var(--bg-card); border: 1px solid var(--border); }
+            /* Card */
+            .container {
+                background: var(--bg-card); width: 100%; max-width: 500px;
+                border-radius: 24px; box-shadow: var(--shadow);
+                border: 1px solid var(--border); padding: 2rem;
+            }
+            /* Password Display */
+            .password-box {
+                background: var(--input-bg);
+                border-radius: 12px;
+                padding: 1.5rem;
+                margin-bottom: 2rem;
+                position: relative;
+                border: 1px solid var(--border);
+                display: flex; align-items: center; justify-content: space-between;
+            }
+            .password-text {
+                font-family: 'JetBrains Mono', monospace;
+                font-size: 1.5rem;
+                word-break: break-all;
+                color: var(--text-main);
+                font-weight: 500;
+            }
+            .copy-btn {
+                background: var(--bg-card);
+                border: 1px solid var(--border);
+                border-radius: 8px;
+                padding: 0.5rem;
+                cursor: pointer;
+                color: var(--text-sub);
+                transition: all 0.2s;
+                margin-left: 1rem; flex-shrink: 0;
+            }
+            .copy-btn:hover { border-color: var(--primary); color: var(--primary); }
+            .copy-btn.copied { background-color: var(--success); color: white; border-color: var(--success); }
+            /* Controls */
+            .controls { display: grid; gap: 1rem; }
+            .range-group { margin-bottom: 1rem; }
+            .range-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; }
+            input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--primary); }
+            .options-grid {
+                display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
+            }
+            .checkbox-wrapper {
+                display: flex; align-items: center; gap: 0.5rem;
+                font-size: 0.9rem; color: var(--text-sub);
+                cursor: pointer;
+            }
+            input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); cursor: pointer; }
+            /* Action Button */
+            .btn-generate {
+                width: 100%;
+                margin-top: 1.5rem;
+                padding: 1rem;
+                border-radius: 12px;
+                background-color: var(--primary);
+                color: white;
+                font-weight: 700;
+                font-size: 1rem;
+                border: none;
+                cursor: pointer;
+                transition: transform 0.1s, background-color 0.2s;
+                box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+            }
+            .btn-generate:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
+            .btn-generate:active { transform: scale(0.98); }
+            /* Footer */
+            .dev-footer {
+                margin-top: 3rem; text-align: center; font-size: 0.9rem; color: var(--text-sub);
+                padding: 1rem; width: 100%;
+            }
+            .dev-badge {
+                display: inline-block; background: var(--bg-card); padding: 5px 15px;
+                border-radius: 20px; border: 1px solid var(--border); font-weight: 500; margin-top: 5px;
+            }
+            .dev-name { color: var(--primary); font-weight: 700; }
+            .strength-tag {
+                font-size: 0.75rem; padding: 2px 8px; border-radius: 4px;
+                background: #e2e8f0; color: #64748b; font-weight: 600; margin-top: 5px; display: inline-block;
+            }
+        </style>
+    </head>
+    <body>
+        <nav class="navbar">
+            <div class="brand">🔐 password generator</div>
+            <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙</button>
+        </nav>
+        <div class="container">
+            <div class="password-box">
+                <div style="width: 100%;">
+                    <div id="passwordResult" class="password-text">...</div>
+                    <div id="strengthLabel" class="strength-tag">Strength: -</div>
+                </div>
+                <button class="copy-btn" id="copyBtn" onclick="copyPassword()" title="Copy to Clipboard">
+                    📋
+                </button>
+            </div>
+            <div class="controls">
+                <div class="range-group">
+                    <div class="range-header">
+                        <label>Password Length</label>
+                        <span id="lengthVal" style="color: var(--primary);">16</span>
+                    </div>
+                    <input type="range" id="lengthInput" min="8" max="64" value="16" oninput="updateLength(this.value)">
+                </div>
+                <div class="options-grid">
+                    <label class="checkbox-wrapper">
+                        <input type="checkbox" id="chkUpper" checked> Uppercase (A-Z)
+                    </label>
+                    <label class="checkbox-wrapper">
+                        <input type="checkbox" id="chkLower" checked> Lowercase (a-z)
+                    </label>
+                    <label class="checkbox-wrapper">
+                        <input type="checkbox" id="chkNumbers" checked> Numbers (0-9)
+                    </label>
+                    <label class="checkbox-wrapper">
+                        <input type="checkbox" id="chkSymbols" checked> Symbols (!@#)
+                    </label>
+                    <label class="checkbox-wrapper">
+                        <input type="checkbox" id="chkAmbiguous"> Exclude Ambiguous
+                    </label>
+                </div>
+                <button class="btn-generate" onclick="generate()">⚡ Generate Password</button>
+            </div>
+        </div>
+        <footer class="dev-footer">
+            <div>Designed & Developed by</div>
+            <div class="dev-badge">
+                <span class="dev-name">Sameer Banchhor</span> | Data Scientist
+            </div>
+        </footer>
+        <script>
+            // --- Theme Logic ---
+            const html = document.documentElement;
+            const themeBtn = document.getElementById('themeBtn');
+            function toggleTheme() {
+                const current = html.getAttribute('data-theme');
+                const next = current === 'light' ? 'dark' : 'light';
+                html.setAttribute('data-theme', next);
+                themeBtn.textContent = next === 'light' ? '🌙' : '☀️';
+                localStorage.setItem('theme', next);
+            }
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+            // --- UI Logic ---
+            function updateLength(val) {
+                document.getElementById('lengthVal').textContent = val;
+            }
+            async function generate() {
+                const length = document.getElementById('lengthInput').value;
+                const upper = document.getElementById('chkUpper').checked;
+                const lower = document.getElementById('chkLower').checked;
+                const nums = document.getElementById('chkNumbers').checked;
+                const syms = document.getElementById('chkSymbols').checked;
+                const ambig = document.getElementById('chkAmbiguous').checked;
+                // Validation
+                if(!upper && !lower && !nums && !syms) {
+                    alert("Please select at least one character type.");
+                    return;
+                }
+                const params = new URLSearchParams({
+                    length: length,
+                    include_uppercase: upper,
+                    include_lowercase: lower,
+                    include_numbers: nums,
+                    include_symbols: syms,
+                    exclude_ambiguous: ambig
+                });
+                try {
+                    const res = await fetch(`/security/generate-password?${params}`);
+                    const data = await res.json();
+                    if(res.ok) {
+                        const pwd = data.password;
+                        const strength = data.strength;
+                        // Animate text change
+                        const resultEl = document.getElementById('passwordResult');
+                        resultEl.style.opacity = 0;
+                        setTimeout(() => {
+                            resultEl.textContent = pwd;
+                            document.getElementById('strengthLabel').textContent = `Strength: ${strength}`;
+                            updateStrengthColor(strength);
+                            resultEl.style.opacity = 1;
+                        }, 150);
+                        // Reset copy button
+                        const copyBtn = document.getElementById('copyBtn');
+                        copyBtn.classList.remove('copied');
+                        copyBtn.textContent = "📋";
+                    } else {
+                        alert(data.detail || "Error generating password");
+                    }
+                } catch(e) {
+                    console.error(e);
+                    alert("Network error");
+                }
+            }
+            function updateStrengthColor(strength) {
+                const badge = document.getElementById('strengthLabel');
+                let color = "#64748b";
+                let bg = "#e2e8f0";
+                if(strength === "Strong") { color = "#10b981"; bg = "#d1fae5"; }
+                if(strength === "Very Strong") { color = "#6366f1"; bg = "#e0e7ff"; }
+                if(strength === "Weak") { color = "#ef4444"; bg = "#fee2e2"; }
+                badge.style.color = color;
+                badge.style.backgroundColor = bg;
+            }
+            function copyPassword() {
+                const text = document.getElementById('passwordResult').textContent;
+                if(text === "...") return;
+                navigator.clipboard.writeText(text).then(() => {
+                    const btn = document.getElementById('copyBtn');
+                    btn.classList.add('copied');
+                    btn.textContent = "✅";
+                    setTimeout(() => {
+                        btn.classList.remove('copied');
+                        btn.textContent = "📋";
+                    }, 2000);
+                });
+            }
+            // Generate one on load
+            window.onload = generate;
+        </script>
+    </body>
+    </html>
+    """
+    return html_content

app/routers/testers/help.py CHANGED Viewed

@@ -1,22 +1,245 @@
-from fastapi import APIRouter , Depends
-from app.routers.auth.system import get_current_user  # Import our Auth System
-# Create the router for help/info endpoints
 router = APIRouter(
     prefix="/help",
     tags=["Information"]
 )
 @router.get("/")
-def get_api_info(current_user: dict = Depends(get_current_user) ):
     """
     Returns general information about the API and available endpoints.
     """
     return {
-        "requested_by": current_user.username,
-        "api_name": "My Awesome FastAPI",
-        "version": "1.0",
-        "available_sections": ["/random", "/help"],
-        "message": "Use the /docs endpoint for interactive API documentation."
-    }

+from fastapi import APIRouter
+from fastapi.responses import HTMLResponse
+# ==========================
+# 🛠️ Router Setup
+# ==========================
 router = APIRouter(
     prefix="/help",
     tags=["Information"]
 )
+# ==========================
+# ℹ️ API Info Endpoint
+# ==========================
 @router.get("/")
+def get_api_info():
     """
     Returns general information about the API and available endpoints.
+    No authentication required.
     """
     return {
+        "requested_by": "Guest",
+        "api_name": "Easy Tools API",
+        "developer": "Sameer Banchhor",
+        "version": "1.0.0",
+        "available_tools": [
+            "/image (Compressor & BG Remover)",
+            "/pdf (Merge & Rotate)",
+            "/drive (File Storage & Aria2)",
+            "/security (Password Generator)",
+            "/server-status (System Monitor)"
+        ],
+        "message": "Use the /help/ui endpoint to access the visual dashboard.",
+        "developer_info": "Created by Sameer Banchhor, Data Scientist (MSc in System Design, Kalyan PG College).",
+        "git_link": "https://github.com/sameerbanchhor-git"
+    }
+# ==========================
+# 🧭 Central Hub UI
+# ==========================
+@router.get("/ui", response_class=HTMLResponse)
+async def help_ui():
+    html_content = """
+    <!DOCTYPE html>
+    <html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Easy Tools Hub | by Sam</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+        <style>
+            :root {
+                --primary: #6366f1;
+                --primary-hover: #4f46e5;
+                --bg-body: #f8fafc;
+                --bg-card: #ffffff;
+                --text-main: #0f172a;
+                --text-sub: #64748b;
+                --border: #e2e8f0;
+                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+                --gradient-1: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+            }
+            [data-theme="dark"] {
+                --primary: #818cf8;
+                --primary-hover: #6366f1;
+                --bg-body: #0f172a;
+                --bg-card: #1e293b;
+                --text-main: #f8fafc;
+                --text-sub: #94a3b8;
+                --border: #334155;
+                --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+                --gradient-1: linear-gradient(135deg, #4f46e5 0%, #7e22ce 100%);
+            }
+            * { box-sizing: border-box; margin: 0; padding: 0; transition: all 0.3s ease; }
+            body {
+                font-family: 'Plus Jakarta Sans', sans-serif;
+                background-color: var(--bg-body);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 2rem 1rem;
+            }
+            /* Header */
+            .header-container {
+                text-align: center; margin-bottom: 3rem; animation: fadeIn 0.8s ease-out;
+            }
+            .title {
+                font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem;
+                background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+            }
+            .subtitle { color: var(--text-sub); font-size: 1.1rem; }
+            .theme-toggle {
+                position: absolute; top: 1rem; right: 1rem;
+                background: var(--bg-card); border: 1px solid var(--border);
+                color: var(--text-main); padding: 10px; border-radius: 50%; cursor: pointer;
+            }
+            /* Grid */
+            .tools-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+                gap: 1.5rem;
+                width: 100%; max-width: 1000px;
+                animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            /* Cards */
+            .tool-card {
+                background: var(--bg-card);
+                border-radius: 20px;
+                padding: 2rem;
+                border: 1px solid var(--border);
+                box-shadow: var(--shadow);
+                text-decoration: none;
+                color: var(--text-main);
+                display: flex; flex-direction: column; align-items: center; text-align: center;
+                transition: transform 0.2s, box-shadow 0.2s;
+                position: relative; overflow: hidden;
+            }
+            .tool-card:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
+                border-color: var(--primary);
+            }
+            .icon { font-size: 3rem; margin-bottom: 1rem; }
+            .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
+            .card-desc { font-size: 0.9rem; color: var(--text-sub); line-height: 1.5; }
+            /* Footer */
+            .dev-footer {
+                margin-top: 4rem; text-align: center; font-size: 0.9rem; color: var(--text-sub);
+                padding: 2rem; width: 100%; max-width: 600px; border-top: 1px solid var(--border);
+                animation: fadeIn 1.2s ease-out;
+            }
+            .dev-badge {
+                display: inline-block; background: var(--bg-card); padding: 8px 20px;
+                border-radius: 30px; border: 1px solid var(--border); font-weight: 600; margin-top: 10px;
+            }
+            .dev-name { color: var(--primary); font-weight: 800; }
+            .github-link {
+                display: inline-flex; align-items: center; gap: 8px; margin-top: 15px;
+                color: var(--text-main); text-decoration: none; font-weight: 600;
+                padding: 8px 16px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border);
+            }
+            .github-link:hover { background: var(--bg-body); }
+            @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        </style>
+    </head>
+    <body>
+        <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙</button>
+        <div class="header-container">
+            <div class="title">Easy Tools Suite</div>
+            <div class="subtitle">All your essential utilities in one place.</div>
+        </div>
+        <div class="tools-grid">
+            <a href="/image/ui" class="tool-card">
+                <div class="icon">🖼️</div>
+                <div class="card-title">Image Tools</div>
+                <div class="card-desc">Compress JPEGs to specific sizes & remove backgrounds instantly using AI.</div>
+            </a>
+            <a href="/pdf/ui" class="tool-card">
+                <div class="icon">📄</div>
+                <div class="card-title">PDF Master</div>
+                <div class="card-desc">Merge multiple documents or rotate pages with a simple drag & drop interface.</div>
+            </a>
+            <a href="/drive/storage/ui" class="tool-card">
+                <div class="icon">☁️</div>
+                <div class="card-title">Cloud Drive</div>
+                <div class="card-desc">Upload files locally or use Aria2 for high-speed remote server downloads.</div>
+            </a>
+            <a href="/security/password-generator/ui" class="tool-card">
+                <div class="icon">🔐</div>
+                <div class="card-title">Security</div>
+                <div class="card-desc">Generate cryptographically strong passwords with advanced custom rules.</div>
+            </a>
+            <a href="/server-status/ui" class="tool-card">
+                <div class="icon">📊</div>
+                <div class="card-title">Server Monitor</div>
+                <div class="card-desc">Real-time dashboard for CPU, RAM, Disk usage, and Network traffic.</div>
+            </a>
+            <a href="/docs" class="tool-card" style="border-style: dashed;">
+                <div class="icon">⚡</div>
+                <div class="card-title">API Docs</div>
+                <div class="card-desc">Explore the raw Swagger UI for testing API endpoints directly.</div>
+            </a>
+        </div>
+        <footer class="dev-footer">
+            <div>Designed & Developed by</div>
+            <div class="dev-badge">
+                <span class="dev-name">Sameer Banchhor</span> | Data Scientist
+            </div>
+            <br>
+            <div style="font-size: 0.85rem; margin-top: 5px; opacity: 0.8;">MSc in System Design, Kalyan PG College</div>
+            <a href="https://github.com/sameerbanchhor-git" target="_blank" class="github-link">
+                <svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+                GitHub Profile
+            </a>
+        </footer>
+        <script>
+            // Theme Logic
+            const html = document.documentElement;
+            const themeBtn = document.getElementById('themeBtn');
+            function toggleTheme() {
+                const current = html.getAttribute('data-theme');
+                const next = current === 'light' ? 'dark' : 'light';
+                html.setAttribute('data-theme', next);
+                themeBtn.textContent = next === 'light' ? '🌙' : '☀️';
+                localStorage.setItem('theme', next);
+            }
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+        </script>
+    </body>
+    </html>
+    """
+    return html_content

app/routers/testers/server_status.py CHANGED Viewed

@@ -1,5 +1,5 @@
 from fastapi import APIRouter, status
-from fastapi.responses import JSONResponse
 import platform
 import psutil
@@ -10,6 +10,9 @@ router = APIRouter(
     responses={404: {"description": "Not found"}},
 )
 @router.get(
     "/full-info",
     summary="Get complete server/PC status and information",
@@ -31,11 +34,14 @@ def get_server_status():
     }
     # --- CPU Information ---
     cpu_info = {
         "physical_cores": psutil.cpu_count(logical=False),
         "total_cores": psutil.cpu_count(logical=True),
-        "cpu_usage_percent": psutil.cpu_percent(interval=1),
-        "cpu_frequency_mhz": f"{psutil.cpu_freq().current:.2f}",
     }
     # --- Memory Information (RAM) ---
@@ -48,18 +54,22 @@ def get_server_status():
     }
     # --- Disk Usage Information (Root partition) ---
-    disk_usage = psutil.disk_usage('/')
-    disk_info = {
-        "total_gb": f"{disk_usage.total / (1024**3):.2f}",
-        "used_gb": f"{disk_usage.used / (1024**3):.2f}",
-        "free_gb": f"{disk_usage.free / (1024**3):.2f}",
-        "usage_percent": disk_usage.percent,
-    }
     # --- Network Information (Simple) ---
     network_info = {
-        "bytes_sent_mb": f"{psutil.net_io_counters().bytes_sent / (1024**2):.2f}",
-        "bytes_recv_mb": f"{psutil.net_io_counters().bytes_recv / (1024**2):.2f}",
     }
     response_data = {
@@ -70,4 +80,294 @@ def get_server_status():
         "network_io": network_info,
     }
-    return JSONResponse(content=response_data, status_code=status.HTTP_200_OK)

 from fastapi import APIRouter, status
+from fastapi.responses import JSONResponse, HTMLResponse
 import platform
 import psutil
     responses={404: {"description": "Not found"}},
 )
+# ==========================
+# 📊 API Endpoint
+# ==========================
 @router.get(
     "/full-info",
     summary="Get complete server/PC status and information",
     }
     # --- CPU Information ---
+    # Note: cpu_percent(interval=None) is non-blocking but requires a previous call
+    # or it returns 0.0 on first call. For an API, interval=0.1 is a good compromise.
+    freq = psutil.cpu_freq()
     cpu_info = {
         "physical_cores": psutil.cpu_count(logical=False),
         "total_cores": psutil.cpu_count(logical=True),
+        "cpu_usage_percent": psutil.cpu_percent(interval=0.1),
+        "cpu_frequency_mhz": f"{freq.current:.2f}" if freq else "N/A",
     }
     # --- Memory Information (RAM) ---
     }
     # --- Disk Usage Information (Root partition) ---
+    try:
+        disk_usage = psutil.disk_usage('/')
+        disk_info = {
+            "total_gb": f"{disk_usage.total / (1024**3):.2f}",
+            "used_gb": f"{disk_usage.used / (1024**3):.2f}",
+            "free_gb": f"{disk_usage.free / (1024**3):.2f}",
+            "usage_percent": disk_usage.percent,
+        }
+    except Exception:
+        disk_info = {"error": "Could not read disk usage"}
     # --- Network Information (Simple) ---
+    net_io = psutil.net_io_counters()
     network_info = {
+        "bytes_sent_mb": f"{net_io.bytes_sent / (1024**2):.2f}",
+        "bytes_recv_mb": f"{net_io.bytes_recv / (1024**2):.2f}",
     }
     response_data = {
         "network_io": network_info,
     }
+    return JSONResponse(content=response_data, status_code=status.HTTP_200_OK)
+# ==========================
+# 🖥️ Dashboard UI Endpoint
+# ==========================
+@router.get("/ui", response_class=HTMLResponse)
+async def server_status_ui():
+    html_content = """
+    <!DOCTYPE html>
+    <html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Server Monitor | by Sam</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
+        <style>
+            :root {
+                --primary: #3b82f6;
+                --primary-hover: #2563eb;
+                --bg-body: #f8fafc;
+                --bg-card: #ffffff;
+                --text-main: #0f172a;
+                --text-sub: #64748b;
+                --border: #e2e8f0;
+                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+                --success: #10b981;
+                --warning: #f59e0b;
+                --danger: #ef4444;
+            }
+            [data-theme="dark"] {
+                --primary: #60a5fa;
+                --bg-body: #0f172a;
+                --bg-card: #1e293b;
+                --text-main: #f8fafc;
+                --text-sub: #94a3b8;
+                --border: #334155;
+                --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+            }
+            * { box-sizing: border-box; margin: 0; padding: 0; transition: all 0.3s ease; }
+            body {
+                font-family: 'Plus Jakarta Sans', sans-serif;
+                background-color: var(--bg-body);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 2rem 1rem;
+            }
+            .navbar {
+                width: 100%; max-width: 1000px; display: flex;
+                justify-content: space-between; align-items: center; margin-bottom: 2rem;
+            }
+            .brand { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
+            .brand span { color: var(--primary); }
+            .theme-toggle {
+                background: var(--bg-card); border: 1px solid var(--border);
+                color: var(--text-main); padding: 8px; border-radius: 50%; cursor: pointer;
+            }
+            /* Grid Layout */
+            .dashboard {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+                gap: 1.5rem;
+                width: 100%;
+                max-width: 1000px;
+            }
+            .card {
+                background: var(--bg-card);
+                border-radius: 16px;
+                padding: 1.5rem;
+                border: 1px solid var(--border);
+                box-shadow: var(--shadow);
+            }
+            .card-header {
+                font-size: 0.9rem; font-weight: 600; color: var(--text-sub);
+                text-transform: uppercase; letter-spacing: 0.5px;
+                margin-bottom: 1rem; display: flex; justify-content: space-between;
+            }
+            .stat-value {
+                font-size: 2rem; font-weight: 700; color: var(--text-main);
+                font-family: 'JetBrains Mono', monospace;
+            }
+            .stat-sub { font-size: 0.9rem; color: var(--text-sub); margin-top: 0.2rem; }
+            /* Progress Bars */
+            .progress-container {
+                height: 12px; background: var(--border); border-radius: 6px;
+                margin-top: 1rem; overflow: hidden;
+            }
+            .progress-bar {
+                height: 100%; width: 0%; background: var(--primary);
+                border-radius: 6px; transition: width 0.5s ease-in-out;
+            }
+            /* System List */
+            .sys-list { list-style: none; }
+            .sys-list li {
+                display: flex; justify-content: space-between;
+                padding: 0.5rem 0; border-bottom: 1px solid var(--border);
+                font-size: 0.9rem;
+            }
+            .sys-list li:last-child { border-bottom: none; }
+            .sys-label { color: var(--text-sub); }
+            .sys-val { font-weight: 600; }
+            /* Footer */
+            .dev-footer {
+                margin-top: 3rem; text-align: center; font-size: 0.9rem; color: var(--text-sub);
+                padding: 1rem; border-top: 1px solid var(--border); width: 100%; max-width: 600px;
+            }
+            .dev-badge {
+                display: inline-block; background: var(--bg-card); padding: 5px 15px;
+                border-radius: 20px; border: 1px solid var(--border); font-weight: 500; margin-top: 5px;
+            }
+            .dev-name { color: var(--primary); font-weight: 700; }
+            .refresh-dot {
+                width: 10px; height: 10px; background-color: var(--success);
+                border-radius: 50%; display: inline-block; animation: pulse 2s infinite;
+            }
+            @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
+        </style>
+    </head>
+    <body>
+        <nav class="navbar">
+            <div class="brand">📊 Server Monitor <span class="refresh-dot" title="Live Updates"></span></div>
+            <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙</button>
+        </nav>
+        <div class="dashboard">
+            <div class="card">
+                <div class="card-header">
+                    <span>CPU Usage</span>
+                    <span id="cpuCores">-- Cores</span>
+                </div>
+                <div class="stat-value" id="cpuPercent">0%</div>
+                <div class="progress-container">
+                    <div class="progress-bar" id="cpuBar"></div>
+                </div>
+                <div class="stat-sub" id="cpuFreq">Freq: -- MHz</div>
+            </div>
+            <div class="card">
+                <div class="card-header">Memory (RAM)</div>
+                <div class="stat-value" id="memPercent">0%</div>
+                <div class="progress-container">
+                    <div class="progress-bar" id="memBar"></div>
+                </div>
+                <div class="stat-sub" id="memDetails">Used: -- / -- GB</div>
+            </div>
+            <div class="card">
+                <div class="card-header">Disk (Root)</div>
+                <div class="stat-value" id="diskPercent">0%</div>
+                <div class="progress-container">
+                    <div class="progress-bar" id="diskBar"></div>
+                </div>
+                <div class="stat-sub" id="diskDetails">Free: -- GB</div>
+            </div>
+            <div class="card">
+                <div class="card-header">Network I/O</div>
+                <div class="sys-list">
+                    <li>
+                        <span class="sys-label">⬇️ Received</span>
+                        <span class="sys-val" id="netRecv">-- MB</span>
+                    </li>
+                    <li>
+                        <span class="sys-label">⬆️ Sent</span>
+                        <span class="sys-val" id="netSent">-- MB</span>
+                    </li>
+                </div>
+            </div>
+            <div class="card" style="grid-column: 1 / -1;">
+                <div class="card-header">System Information</div>
+                <ul class="sys-list" id="sysList">
+                    </ul>
+            </div>
+        </div>
+        <footer class="dev-footer">
+            <div>Designed & Developed by</div>
+            <div class="dev-badge">
+                <span class="dev-name">Sameer Banchhor</span> | Data Scientist
+            </div>
+        </footer>
+        <script>
+            // Theme Logic
+            const html = document.documentElement;
+            const themeBtn = document.getElementById('themeBtn');
+            function toggleTheme() {
+                const current = html.getAttribute('data-theme');
+                const next = current === 'light' ? 'dark' : 'light';
+                html.setAttribute('data-theme', next);
+                themeBtn.textContent = next === 'light' ? '🌙' : '☀️';
+                localStorage.setItem('theme', next);
+            }
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            html.setAttribute('data-theme', savedTheme);
+            themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+            // Data Fetching Logic
+            async function fetchData() {
+                try {
+                    const res = await fetch('/server-status/full-info');
+                    const data = await res.json();
+                    updateUI(data);
+                } catch (error) {
+                    console.error("Failed to fetch status:", error);
+                }
+            }
+            function updateUI(data) {
+                // CPU
+                const cpuP = data.cpu_status.cpu_usage_percent;
+                document.getElementById('cpuPercent').textContent = cpuP + '%';
+                document.getElementById('cpuBar').style.width = cpuP + '%';
+                setColor('cpuBar', cpuP);
+                document.getElementById('cpuCores').textContent = `${data.cpu_status.physical_cores}P / ${data.cpu_status.total_cores}L Cores`;
+                document.getElementById('cpuFreq').textContent = `Freq: ${data.cpu_status.cpu_frequency_mhz} MHz`;
+                // RAM
+                const memP = data.memory_status.usage_percent;
+                document.getElementById('memPercent').textContent = memP + '%';
+                document.getElementById('memBar').style.width = memP + '%';
+                setColor('memBar', memP);
+                document.getElementById('memDetails').textContent = `Used: ${data.memory_status.used_gb} / ${data.memory_status.total_gb} GB`;
+                // Disk
+                const diskP = data.disk_status.usage_percent;
+                document.getElementById('diskPercent').textContent = diskP + '%';
+                document.getElementById('diskBar').style.width = diskP + '%';
+                setColor('diskBar', diskP);
+                document.getElementById('diskDetails').textContent = `Free: ${data.disk_status.free_gb} GB`;
+                // Network
+                document.getElementById('netRecv').textContent = data.network_io.bytes_recv_mb + ' MB';
+                document.getElementById('netSent').textContent = data.network_io.bytes_sent_mb + ' MB';
+                // System Info (Only populate once if empty)
+                const sysList = document.getElementById('sysList');
+                if(sysList.children.length === 0) {
+                    const info = data.system_information;
+                    for (const [key, value] of Object.entries(info)) {
+                        const li = document.createElement('li');
+                        li.innerHTML = `<span class="sys-label">${key}</span><span class="sys-val">${value}</span>`;
+                        sysList.appendChild(li);
+                    }
+                }
+            }
+            function setColor(id, percent) {
+                const el = document.getElementById(id);
+                if(percent < 60) el.style.backgroundColor = 'var(--primary)';
+                else if(percent < 85) el.style.backgroundColor = 'var(--warning)';
+                else el.style.backgroundColor = 'var(--danger)';
+            }
+            // Init
+            fetchData();
+            // Refresh every 2 seconds
+            setInterval(fetchData, 2000);
+        </script>
+    </body>
+    </html>
+    """
+    return html_content