Add dependency health checks and warning banner

Readme.md

@@ -40,6 +40,19 @@ This project is a comprehensive full‑stack web app for doing simple, local fil
 
 The backend is a Flask API and the frontend is a React app (Vite).
 
+### Manual dependency installation
+
+If you run the backend outside Docker, make sure the native tools required by
+the conversion pipeline are installed on the host:
+
+```bash
+sudo apt-get update
+sudo apt-get install poppler-utils tesseract-ocr ghostscript
+```
+
+You can also check whether the server image is missing anything by calling
+`GET /health/dependencies`.
+
 ### Project Rules
 
 These rules define how this project must be implemented and extended:

backend/app/__init__.py

@@ -1,7 +1,9 @@
-from flask import Flask, request
+from flask import Flask, jsonify, request
 import os
 from flask_cors import CORS
 
+from utils.dependency_checker import check_dependency_status
+
 def create_app():
     app = Flask(__name__)
 
@@ -46,6 +48,10 @@ def home():
     @app.route("/health", methods=["GET", "OPTIONS"])
     def _health():
         return {"status": "ok"}, 200
+
+    @app.route("/health/dependencies", methods=["GET", "OPTIONS"])
+    def _dependency_health():
+        return jsonify(check_dependency_status()), 200
 
     app.config["MAX_CONTENT_LENGTH"] = 10 * 1024 * 1024
 

backend/utils/dependency_checker.py

@@ -0,0 +1,46 @@
+from shutil import which
+
+
+def _tool_status(name, binary_names, required_for, install_command, optional=False):
+    installed = any(which(binary) for binary in binary_names)
+    return {
+        "installed": installed,
+        "required_for": required_for,
+        "install_command": install_command,
+        "optional": optional,
+        "binary_names": binary_names,
+    }
+
+
+def check_dependency_status():
+    dependencies = {
+        "poppler-utils": _tool_status(
+            "poppler-utils",
+            ["pdfinfo", "pdftoppm"],
+            ["PDF to PNG", "PDF info", "PDF merge validation"],
+            "apt-get install poppler-utils",
+        ),
+        "tesseract-ocr": _tool_status(
+            "tesseract-ocr",
+            ["tesseract"],
+            ["Image OCR"],
+            "apt-get install tesseract-ocr",
+        ),
+        "ghostscript": _tool_status(
+            "ghostscript",
+            ["gs"],
+            ["PDF compression", "PDF post-processing"],
+            "apt-get install ghostscript",
+            optional=True,
+        ),
+    }
+
+    required_missing = [
+        name for name, data in dependencies.items() if not data["optional"] and not data["installed"]
+    ]
+
+    return {
+        "status": "degraded" if required_missing else "ok",
+        "dependencies": dependencies,
+        "missing_required_dependencies": required_missing,
+    }

frontend/src/components/DependencyWarning.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { AlertTriangle, ExternalLink } from "lucide-react";
+
+const DependencyWarning = ({ dependencies = [], status = "ok" }) => {
+  if (status !== "degraded" || dependencies.length === 0) {
+    return null;
+  }
+
+  const labels = dependencies.map((item) => item.name).join(", ");
+
+  return (
+    <div className="w-full max-w-[960px] mx-auto px-4 pt-4">
+      <div className="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-amber-900 shadow-sm dark:border-amber-900/40 dark:bg-amber-950/40 dark:text-amber-100">
+        <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
+        <div className="min-w-0 flex-1 text-sm leading-relaxed">
+          <p className="font-semibold">
+            Some server dependencies are missing or unavailable.
+          </p>
+          <p className="mt-1 text-amber-800 dark:text-amber-200">
+            {labels} may be unavailable until the server image includes the
+            required packages.
+          </p>
+          <a
+            href="https://github.com/Durgeshwar-AI/pdfToPng#manual-dependency-installation"
+            target="_blank"
+            rel="noreferrer"
+            className="mt-2 inline-flex items-center gap-1.5 font-semibold text-amber-900 underline-offset-4 hover:underline dark:text-amber-100"
+          >
+            Learn how to fix this
+            <ExternalLink className="h-4 w-4" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DependencyWarning;

frontend/src/components/Layout/Layout.jsx

@@ -2,12 +2,17 @@ import React, { useState, useEffect } from "react";
 import { useLocation, Outlet, useNavigate } from "react-router-dom";
 import Sidebar from "../Sidebar/Sidebar";
 import { Menu, Sun, Moon, Home } from "lucide-react";
+import DependencyWarning from "../DependencyWarning";
 
 const Layout = () => {
   const  isDark = false;
   const toggleTheme = () => {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const [dependencyState, setDependencyState] = useState({
+    status: "ok",
+    dependencies: [],
+  });
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -22,6 +27,42 @@ const Layout = () => {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadDependencyStatus = async () => {
+      try {
+        const baseUrl = import.meta.env.VITE_API_URL || "http://localhost:5000";
+        const response = await fetch(`${baseUrl}/health/dependencies`);
+        if (!response.ok) return;
+
+        const payload = await response.json();
+        if (cancelled) return;
+
+        const missingDependencies = Object.entries(payload.dependencies || {})
+          .filter(([, meta]) => !meta.installed)
+          .map(([name, meta]) => ({
+            name,
+            requiredFor: meta.required_for || [],
+            installCommand: meta.install_command || "",
+          }));
+
+        setDependencyState({
+          status: payload.status || "ok",
+          dependencies: missingDependencies,
+        });
+      } catch (error) {
+        console.warn("Unable to load dependency health:", error);
+      }
+    };
+
+    loadDependencyStatus();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
   const closeMobileMenu = () => setIsMobileMenuOpen(false);
   const isLandingPage = location.pathname === "/";
@@ -103,12 +144,18 @@ const Layout = () => {
         )}
 
         {/* Adjusted padding top for mobile so content isn't hidden under sticky header */}
-        <div className={`min-h-full flex justify-center items-center pb-8 ${isMobile ? 'pt-4' : 'py-8'}`}>
-          <Outlet />
+        <div className={`min-h-full flex flex-col items-stretch pb-8 ${isMobile ? 'pt-4' : 'py-8'}`}>
+          <DependencyWarning
+            status={dependencyState.status}
+            dependencies={dependencyState.dependencies}
+          />
+          <div className="flex justify-center items-center w-full">
+            <Outlet />
+          </div>
         </div>
       </main>
     </div>
   );
 };
 
-export default Layout;
+export default Layout;