Add application file

Dockerfile

@@ -0,0 +1,34 @@
+# Use an official Python runtime as a parent image
+FROM python:3.12-slim
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1
+
+# Set work directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements file
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy project files
+COPY . .
+
+# Expose the port
+EXPOSE 5001
+
+# Set healthcheck
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:5001/ || exit 1
+
+# Run the application
+CMD ["python", "run.py"]

LICENSE

@@ -0,0 +1,23 @@
+Copyright (c) 2025 Kumud Raj, TellusDigital. All rights reserved.
+
+CONFIDENTIAL AND PROPRIETARY INFORMATION
+
+This software and its accompanying documentation are the confidential and proprietary
+information of TellusDigital ("Company"). This software is provided for internal use
+within TellusDigital only and may not be used, copied, modified, merged, published,
+distributed, sublicensed, or sold without explicit written permission from the Company.
+
+Terms of Use:
+
+1. This software is restricted to internal use within TellusDigital only.
+2. No part of this software may be reproduced, distributed, or transmitted in any form
+   or by any means without the prior written permission of TellusDigital.
+3. Unauthorized copying or distribution of this software, via any medium, is strictly
+   prohibited.
+4. The software is provided "AS IS", without warranty of any kind, express or implied.
+
+For permission requests, please contact:
+TellusDigital
+[kumud.raj01@telusinternational.com]
+
+This license supersedes any prior agreements or licenses.

Makefile

@@ -0,0 +1,87 @@
+# Docker image and container configuration
+IMAGE_NAME = api-comparator
+CONTAINER_NAME = api-comparator-app
+PORT = 5001
+
+# Colors for terminal output
+CYAN = \033[0;36m
+RESET = \033[0m
+
+.PHONY: help build run stop remove clean logs restart ps test lint coverage
+
+# Display help information
+help:
+	@echo "$(CYAN)Available commands:$(RESET)"
+	@echo "  make build    - Build Docker image"
+	@echo "  make run      - Run container (builds if image doesn't exist)"
+	@echo "  make stop     - Stop running container"
+	@echo "  make remove   - Remove container"
+	@echo "  make clean    - Remove container and image"
+	@echo "  make logs     - View container logs"
+	@echo "  make restart  - Restart container"
+	@echo "  make ps       - Show container status"
+	@echo "  make test     - Run all tests"
+	@echo "  make coverage - Run tests with coverage report"
+
+# Build Docker image
+build:
+	@echo "$(CYAN)Building Docker image...$(RESET)"
+	docker build -t $(IMAGE_NAME) .
+
+# Run container
+run:
+	@echo "$(CYAN)Checking for existing container...$(RESET)"
+	@if [ "$$(docker ps -aq -f name=$(CONTAINER_NAME))" ]; then \
+		echo "$(CYAN)Removing existing container...$(RESET)"; \
+		docker rm -f $(CONTAINER_NAME) || true; \
+	fi
+	@if [ "$$(docker images -q $(IMAGE_NAME) 2> /dev/null)" = "" ]; then \
+		echo "$(CYAN)Image not found, building first...$(RESET)"; \
+		make build; \
+	fi
+	@echo "$(CYAN)Starting new container...$(RESET)"
+	docker run -d \
+		--name $(CONTAINER_NAME) \
+		-p $(PORT):$(PORT) \
+		--restart unless-stopped \
+		$(IMAGE_NAME)
+	@echo "$(CYAN)Container started! Access the application at http://localhost:$(PORT)$(RESET)"
+
+
+# Stop container
+stop:
+	@echo "$(CYAN)Stopping container...$(RESET)"
+	@docker stop $(CONTAINER_NAME) 2>/dev/null || true
+
+# Remove container
+remove: stop
+	@echo "$(CYAN)Removing container...$(RESET)"
+	@docker rm $(CONTAINER_NAME) 2>/dev/null || true
+
+# Clean everything (container and image)
+clean: remove
+	@echo "$(CYAN)Removing image...$(RESET)"
+	@docker rmi $(IMAGE_NAME) 2>/dev/null || true
+
+# View container logs
+logs:
+	@echo "$(CYAN)Showing container logs...$(RESET)"
+	@docker logs -f $(CONTAINER_NAME)
+
+# Restart container
+restart: stop run
+
+# Show container status
+ps:
+	@echo "$(CYAN)Container status:$(RESET)"
+	@docker ps -a --filter name=$(CONTAINER_NAME)
+
+# Run tests
+test:
+	@echo "$(CYAN)Running tests...$(RESET)"
+	pytest
+
+# Run tests with coverage
+coverage:
+	@echo "$(CYAN)Running tests with coverage...$(RESET)"
+	pytest --cov=. --cov-report=term-missing

main.py

@@ -0,0 +1,427 @@
+"""
+TellusDigital API Response Comparator - Main Application Module
+
+This module implements the FastAPI application for comparing responses from two different APIs.
+It provides authentication, WebSocket support for real-time updates, and comparison functionality.
+"""
+
+import html
+import json
+import secrets
+from datetime import datetime
+from typing import Any
+
+from fastapi import FastAPI, Request, Form, HTTPException, status, WebSocket, Depends
+from fastapi.responses import HTMLResponse, RedirectResponse, Response
+from fastapi.security import HTTPBasic
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from starlette.middleware.sessions import SessionMiddleware
+from starlette.responses import JSONResponse
+
+from utils.logger import structlog
+from utils.utility import (
+    USER_CREDENTIALS,
+    parse_json_input,
+    fetch_api_responses,
+    compare_responses,
+    json_line_diff,
+    validate_urls,
+    validate_json_inputs
+)
+from utils.middleware import SmartSchemeMiddleware
+
+log = structlog.get_logger()
+
+
+class CustomJSONEncoder(json.JSONEncoder):
+    """Custom JSON encoder that handles DeepDiff types."""
+
+    def default(self, obj: Any) -> Any:
+        """Convert DeepDiff types to JSON-serializable format.
+        
+        Args:
+            obj: The object to serialize
+            
+        Returns:
+            JSON serializable format of the object
+        """
+        try:
+            values = getattr(obj, '_values', None)
+            if values is not None:
+                return list(values)
+            return json.JSONEncoder.default(self, obj)
+        except TypeError:
+            return str(obj)
+
+
+# Generate a random secret key
+SECRET_KEY = secrets.token_urlsafe(32)
+
+# Session settings
+SESSION_TIMEOUT = 20 * 60  # 20 minutes in seconds
+
+# Create FastAPI app
+app = FastAPI(
+    title="API Response Comparator",
+    description="TellusDigital Internal API Comparison Tool",
+    version="1.0.0",
+    terms_of_service="Internal use only",
+    contact={
+        "name": "Kumud Raj",
+        "organization": "TellusDigital",
+        "email": "kumud.raj01@telusdigital.com"
+    },
+    license_info={
+        "name": "Proprietary - TellusDigital",
+        "url": "https://www.telusdigital.com/",
+    }
+)
+
+# custom middleware for URL check/convert
+app.add_middleware(SmartSchemeMiddleware)
+
+# Custom middleware for authentication before session middleware
+@app.middleware("http")
+async def auth_middleware(request: Request, call_next):
+    """Authentication middleware to handle redirects consistently."""
+    # Allow access to login, static files and root without authentication
+    if request.url.path in ["/login", "/"] or request.url.path.startswith("/static/"):
+        return await call_next(request)
+
+    # Check authentication for all other routes
+    if not hasattr(request, "session") or "username" not in request.session:
+        return RedirectResponse(
+            url="/login",
+            status_code=status.HTTP_302_FOUND
+        )
+
+    # Proceed with authenticated request
+    response = await call_next(request)
+
+    # Convert 401 responses to 302 redirects
+    if response.status_code == status.HTTP_401_UNAUTHORIZED:
+        return RedirectResponse(
+            url="/login",
+            status_code=status.HTTP_302_FOUND
+        )
+
+    return response
+
+
+# Add session middleware after auth middleware
+app.add_middleware(
+    SessionMiddleware,
+    secret_key=SECRET_KEY,
+    session_cookie="api_comparator_session",
+    max_age=SESSION_TIMEOUT
+)
+
+# Mount static files and templates
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+security = HTTPBasic()
+
+# WebSocket connections store
+active_connections: list[WebSocket] = []
+
+
+# Update get_current_user to return the username directly
+async def get_current_user(request: Request) -> str:
+    """Validate current user session and return username."""
+    if not hasattr(request, "session") or "username" not in request.session:
+        return RedirectResponse(
+            url="/login",
+            status_code=status.HTTP_302_FOUND
+        )
+    return request.session["username"]
+
+
+@app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket) -> None:
+    """Handle WebSocket connections for real-time progress updates.
+    
+    Args:
+        websocket: The WebSocket connection
+    """
+    await websocket.accept()
+    active_connections.append(websocket)
+    try:
+        while True:
+            await websocket.receive_text()
+    except WebSocketDisconnect:
+        active_connections.remove(websocket)
+    except Exception as e:
+        log.error("WebSocket error", error=str(e))
+        if websocket in active_connections:
+            active_connections.remove(websocket)
+
+
+async def broadcast_progress(message: str) -> None:
+    """Broadcast progress updates to all connected WebSocket clients.
+    
+    Args:
+        message: The status message to broadcast
+    """
+    connections = active_connections.copy()
+    for connection in connections:
+        try:
+            await connection.send_json({"type": "processing", "status": message})
+        except Exception as e:
+            log.error("Broadcast error", error=str(e))
+            if connection in active_connections:
+                active_connections.remove(connection)
+
+
+@app.get("/", response_class=RedirectResponse)
+async def root() -> RedirectResponse:
+    """Redirect root path to login page."""
+    return RedirectResponse("/login")
+
+
+@app.get("/login", response_class=HTMLResponse)
+async def login_page(request: Request) -> Response:
+    """Render the login page."""
+    return templates.TemplateResponse("login.html", {"request": request})
+
+
+@app.post("/login")
+async def login(
+        request: Request,
+        username: str = Form(...),
+        password: str = Form(...)
+) -> Response:
+    """Handle user login."""
+    if username in USER_CREDENTIALS and USER_CREDENTIALS[username] == password:
+        request.session["username"] = username
+        request.session["last_activity"] = datetime.now().timestamp()
+        return RedirectResponse(url="/compare", status_code=status.HTTP_302_FOUND)
+
+    return templates.TemplateResponse(
+        "login.html",
+        {"request": request, "error": "Invalid credentials"},
+        status_code=status.HTTP_401_UNAUTHORIZED
+    )
+
+
+@app.get("/compare", response_class=HTMLResponse)
+async def compare_page(request: Request) -> Response:
+    """Render the API comparison page."""
+    if not hasattr(request, "session") or "username" not in request.session:
+        return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)
+    return templates.TemplateResponse("compare.html", {
+        "request": request,
+        "username": request.session["username"],
+        "methods": ["GET", "POST", "PUT", "DELETE", "PATCH"]
+    })
+
+
+@app.post("/compare")
+async def compare_apis(
+        request: Request,
+        api1_url: str = Form(...),
+        api1_method: str = Form(...),
+        api1_payload: str = Form(...),
+        api1_headers: str = Form(...),
+        api2_url: str = Form(...),
+        api2_method: str = Form(...),
+        api2_payload: str = Form(...),
+        api2_headers: str = Form(...),
+        view_mode: str = Form(default="line"),
+        username: str = Depends(get_current_user)
+) -> Response:
+    """Compare responses from two APIs and render the results page."""
+    try:
+        await broadcast_progress("starting")
+
+        # Validate inputs
+        validate_urls(api1_url, api2_url)
+        validate_json_inputs(
+            (api1_payload, "API 1 Payload"),
+            (api2_payload, "API 2 Payload"),
+            (api1_headers, "API 1 Headers"),
+            (api2_headers, "API 2 Headers")
+        )
+
+        await broadcast_progress("validating")
+
+        # Parse inputs
+        payload1 = parse_json_input(api1_payload, "API 1 Payload")
+        payload2 = parse_json_input(api2_payload, "API 2 Payload")
+        headers1 = parse_json_input(api1_headers, "API 1 Headers")
+        headers2 = parse_json_input(api2_headers, "API 2 Headers")
+
+        await broadcast_progress("processing")
+
+        # Fetch API responses
+        responses = await fetch_api_responses(
+            api1_url, api1_method, payload1, headers1,
+            api2_url, api2_method, payload2, headers2
+        )
+        (response1, execution_time_api1), (response2, execution_time_api2) = responses
+
+        await broadcast_progress("comparing")
+
+        # Get JSON data from responses
+        json1 = response1['data']
+        json2 = response2['data']
+
+        # Generate diffs
+        diff_tree = compare_responses(json1, json2, view='tree')
+        diff_text = compare_responses(json1, json2, view='text')
+        diff_html = json_line_diff(json1, json2)
+
+        # Prepare results
+        api1_result = html.escape(json.dumps(json1, indent=4))
+        api2_result = html.escape(json.dumps(json2, indent=4))
+
+        diff_result = (
+            html.escape(diff_tree) if isinstance(diff_tree, str) else
+            html.escape(
+                json.dumps(diff_tree, indent=4, cls=CustomJSONEncoder))
+        ) if view_mode == "tree" else diff_html
+
+        return templates.TemplateResponse(
+            "results.html",
+            {
+                "request": request,
+                "username": username,
+                "execution_time_api1": f"{execution_time_api1:.2f}",
+                "execution_time_api2": f"{execution_time_api2:.2f}",
+                "status_code1": response1['status'],
+                "status_code2": response2['status'],
+                "api1_result": api1_result,
+                "api2_result": api2_result,
+                "diff_result": diff_result,
+                "view_mode": view_mode,
+                "diff_text": html.escape(str(diff_text)),
+                "api1_url": api1_url,
+                "api2_url": api2_url,
+                "api1_method": api1_method,
+                "api2_method": api2_method
+            }
+        )
+    except Exception as e:
+        return templates.TemplateResponse(
+            "compare.html",
+            {
+                "request": request,
+                "username": username,
+                "error": str(e),
+                "methods": ["GET", "POST", "PUT", "DELETE", "PATCH"]
+            }
+        )
+
+
+@app.post("/extend-session")
+async def extend_session(
+    request: Request,
+    username: str = Depends(get_current_user)
+) -> JSONResponse:
+    """Extend the user session."""
+    request.session["last_activity"] = datetime.now().timestamp()
+    return JSONResponse({"status": "success"})
+
+
+@app.get("/logout")
+async def logout(request: Request) -> RedirectResponse:
+    """Log out the user and clear the session."""
+    if not hasattr(request, "session") or "username" not in request.session:
+        return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)
+    request.session.clear()
+    return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)
+
+
+@app.post("/download/")
+async def download_result(
+        request: Request,
+        content: str = Form(...),
+        filename: str = Form(...),
+        username: str = Form(...)
+) -> Response:
+    """Handle file download requests."""
+    try:
+        # Verify authentication
+        if username != request.session.get("username"):
+            log.error("Authentication failed for download", username=username)
+            return RedirectResponse(
+                url="/login",
+                status_code=status.HTTP_302_FOUND
+            )
+
+        content_type = "application/json" if filename.endswith(".json") else "text/plain"
+
+        # Handle JSON content
+        if content_type == "application/json":
+            try:
+                # Try to parse and re-format JSON content
+                json_data = json.loads(html.unescape(content))  # Unescape HTML entities
+                formatted_content = json.dumps(json_data, indent=2)
+            except json.JSONDecodeError as e:
+                log.error("Invalid JSON content in download", error=str(e))
+                return templates.TemplateResponse(
+                    "error.html",
+                    {
+                        "request": request,
+                        "error": "Invalid JSON content",
+                        "detail": f"The content could not be parsed as JSON: {str(e)}"
+                    },
+                    status_code=400
+                )
+        else:
+            # For text content, use as is but unescape HTML entities
+            formatted_content = html.unescape(content)
+
+        headers = {
+            "Content-Disposition": f'attachment; filename="{filename}"',
+            "Content-Type": content_type
+        }
+
+        return Response(
+            content=formatted_content,
+            headers=headers
+        )
+
+    except HTTPException as he:
+        raise he
+    except Exception as e:
+        log.error("Download error", error=str(e))
+        return templates.TemplateResponse(
+            "error.html",
+            {
+                "request": request,
+                "error": "Something went wrong",
+                "detail": "Failed to process your download request. Please try again."
+            },
+            status_code=500
+        )
+
+
+@app.exception_handler(401)
+async def unauthorized_handler(request: Request, exc: HTTPException) -> Response:
+    """Handle unauthorized access errors with redirect."""
+    return RedirectResponse(
+        url="/login",
+        status_code=status.HTTP_302_FOUND
+    )
+
+
+@app.exception_handler(Exception)
+async def general_exception_handler(request: Request, exc: Exception) -> Response:
+    """Handle general exceptions."""
+    # For authentication errors, redirect to login
+    if isinstance(exc, HTTPException) and exc.status_code in [401, 403]:
+        return RedirectResponse(
+            url="/login",
+            status_code=status.HTTP_302_FOUND
+        )
+
+    return templates.TemplateResponse(
+        "error.html",
+        {
+            "request": request,
+            "error": "An unexpected error occurred. Please try again.",
+            "detail": str(exc) if app.debug else None
+        },
+        status_code=500
+    )

pytest.ini

@@ -0,0 +1,35 @@
+[pytest]
+testpaths = tests
+python_files = test_*.py
+python_classes = Test
+python_functions = test_*
+asyncio_mode = auto
+pythonpath = .
+
+addopts =
+    -v
+    --tb=short
+    --cov=.
+    --cov-report=term-missing
+    --cov-report=html
+    --cov-fail-under=80
+    --no-cov-on-fail
+
+# Ignore some directories from coverage
+[coverage:run]
+omit =
+    tests/*
+    venv/*
+    */site-packages/*
+    .pytest_cache/*
+    __pycache__/*
+    .venv/*
+
+[coverage:report]
+exclude_lines =
+    pragma: no cover
+    def __repr__
+    if __name__ == .__main__.:
+    raise NotImplementedError
+    pass
+    raise ImportError

requirements.txt

@@ -0,0 +1,23 @@
+streamlit==1.29.0
+requests==2.31.0
+deepdiff==6.3.1
+httpx==0.25.0
+black==25.1.0
+fastapi==0.104.0
+uvicorn[standard]==0.24.0
+jinja2==3.1.2
+python-multipart==0.0.6
+aiofiles==23.2.1
+python-jose[cryptography]==3.3.0
+passlib[bcrypt]==1.7.4
+itsdangerous==2.1.2
+starlette==0.27.0  
+structlog==23.2.0
+pytest==8.0.0
+pytest-asyncio==0.23.5
+pytest-cov==4.1.0
+pytest-mock==3.12.0
+aiohttp==3.11.18
+beautifulsoup4==4.12.2
+pyrefly==0.15.2
+

run.py

@@ -0,0 +1,26 @@
+"""
+API Comparator Service Runner
+
+This module is the entry point for the API Comparator service. It configures and starts
+the FastAPI application using uvicorn server with specified host and port settings.
+"""
+
+import uvicorn
+from utils.logger import structlog
+
+log = structlog.get_logger()
+
+# Constants for server configuration
+HOST = "0.0.0.0"
+PORT = 5001
+
+if __name__ == "__main__":
+    log.info("Starting API Comparator service, Host:%s, Port:%d", HOST, PORT)
+    uvicorn.run(
+        "main:app",
+        host=HOST,
+        port=PORT,
+        reload=True,
+        log_level="warning",
+        access_log=False
+    )

static/css/styles.css

@@ -0,0 +1,236 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: #f5f5f5;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.logo {
+    width: 100px;
+    height: auto;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.form-control {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.button:hover {
+    background-color: #45a049;
+}
+
+.error {
+    color: #dc3545;
+    margin-bottom: 10px;
+}
+
+.success {
+    color: #28a745;
+    margin-bottom: 10px;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.results {
+    margin-top: 20px;
+    padding: 20px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+}
+
+.download-button {
+    display: inline-block;
+    margin: 5px;
+    padding: 8px 15px;
+    background-color: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+}
+
+.download-button:hover {
+    background-color: #0056b3;
+}
+
+.radio-group {
+    margin: 10px 0;
+}
+
+.radio-group label {
+    margin-right: 15px;
+}
+
+pre {
+    background-color: #f8f9fa;
+    padding: 15px;
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+.login-container {
+    max-width: 400px;
+    margin: 100px auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.error-container {
+    max-width: 600px;
+    margin: 100px auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.error-detail {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    color: #666;
+    font-family: monospace;
+    white-space: pre-wrap;
+}
+
+.json-content {
+    background-color: #f8f9fa;
+    padding: 15px;
+    border-radius: 4px;
+    margin-top: 10px;
+    max-height: 500px;
+    overflow-y: auto;
+}
+
+.json-content pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.diff-content {
+    background-color: #f8f9fa;
+    padding: 15px;
+    border-radius: 4px;
+    margin-top: 10px;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.diff-content span {
+    display: block;
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    line-height: 1.4;
+}
+
+.user-menu {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.user-menu-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    border-radius: 4px;
+}
+
+.user-menu-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.user-menu-content a:hover {
+    background-color: #f1f1f1;
+}
+
+.user-menu:hover .user-menu-content {
+    display: block;
+}
+
+.session-timeout-warning {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    text-align: center;
+}
+
+.session-timeout-warning button {
+    margin: 10px 5px;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.session-timeout-warning button.continue {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.session-timeout-warning button.logout {
+    background-color: #dc3545;
+    color: white;
+}

templates/compare.html

@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Compare APIs</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', path='/css/styles.css') }}"
+    />
+    <style>
+      .progress-container {
+        display: none;
+        width: 100%;
+        margin: 20px 0;
+        text-align: center;
+      }
+      .progress-bar {
+        width: 100%;
+        height: 20px;
+        background-color: #f3f3f3;
+        border-radius: 10px;
+        overflow: hidden;
+      }
+      .progress {
+        width: 0%;
+        height: 100%;
+        background-color: #4caf50;
+        transition: width 0.3s ease;
+      }
+      .loading-text {
+        margin-top: 10px;
+        color: #666;
+      }
+      .spinner {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border: 3px solid #f3f3f3;
+        border-top: 3px solid #4caf50;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-right: 10px;
+      }
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      #processingStatus {
+        margin-top: 10px;
+        font-weight: bold;
+        color: #4caf50;
+      }
+      .progress-steps {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        position: relative;
+      }
+      .progress-step {
+        background: #f3f3f3;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        z-index: 1;
+      }
+      .progress-step.active {
+        background: #4caf50;
+        color: white;
+      }
+      .progress-step-label {
+        position: absolute;
+        top: 35px;
+        font-size: 12px;
+        width: 80px;
+        text-align: center;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .step-line {
+        position: absolute;
+        top: 15px;
+        height: 2px;
+        background: #f3f3f3;
+        width: calc(100% - 30px);
+        left: 15px;
+      }
+      .step-line-progress {
+        height: 100%;
+        width: 0;
+        background: #4caf50;
+        transition: width 0.3s ease;
+      }
+      .session-timeout-warning {
+        display: none;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: white;
+        border: 1px solid #ccc;
+        padding: 20px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+      }
+      .session-timeout-warning h3 {
+        margin: 0 0 10px;
+      }
+      .session-timeout-warning p {
+        margin: 0 0 20px;
+      }
+      .session-timeout-warning button {
+        margin-right: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <img
+          src="{{ url_for('static', path='/images/TD-logo.jpeg') }}"
+          alt="Logo"
+          class="logo"
+        />
+        <div class="user-menu">
+          <div>Welcome, {{ username }}!</div>
+          <div class="user-menu-content">
+            <a href="/logout">Logout</a>
+          </div>
+        </div>
+      </div>
+
+      {% if error %}
+      <div class="error">{{ error }}</div>
+      {% endif %}
+
+      <div id="session-timeout" class="session-timeout-warning">
+        <h3>Session Timeout Warning</h3>
+        <p>
+          Your session will expire in
+          <span id="timeout-countdown">60</span> seconds due to inactivity.
+        </p>
+        <button class="continue" onclick="extendSession()">
+          Continue Session
+        </button>
+        <button class="logout" onclick="window.location.href='/logout'">
+          Logout
+        </button>
+      </div>
+
+      <div class="progress-container" id="progressContainer">
+        <div class="progress-steps">
+          <div class="step-line">
+            <div class="step-line-progress" id="stepLineProgress"></div>
+          </div>
+          <div class="progress-step" id="step1">
+            1
+            <div class="progress-step-label">Validating</div>
+          </div>
+          <div class="progress-step" id="step2">
+            2
+            <div class="progress-step-label">Processing</div>
+          </div>
+          <div class="progress-step" id="step3">
+            3
+            <div class="progress-step-label">Fetching</div>
+          </div>
+          <div class="progress-step" id="step4">
+            4
+            <div class="progress-step-label">Comparing</div>
+          </div>
+        </div>
+        <div class="progress-bar">
+          <div class="progress" id="progressBar"></div>
+        </div>
+        <div class="loading-text">
+          <span class="spinner"></span>
+          <span id="loadingText">Processing API requests...</span>
+        </div>
+        <div id="processingStatus"></div>
+      </div>
+
+      <form method="POST" action="/compare" id="compareForm">
+        <div class="grid">
+          <div>
+            <h3>First API</h3>
+            <div class="form-group">
+              <label for="api1_url">URL:</label>
+              <input
+                type="url"
+                id="api1_url"
+                name="api1_url"
+                class="form-control"
+                required
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="api1_method">Method:</label>
+              <select
+                id="api1_method"
+                name="api1_method"
+                class="form-control"
+                required
+              >
+                {% for method in methods %}
+                <option value="{{ method }}">{{ method }}</option>
+                {% endfor %}
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="api1_headers">Headers (JSON):</label>
+              <textarea
+                id="api1_headers"
+                name="api1_headers"
+                class="form-control"
+                rows="4"
+              >
+{}</textarea
+              >
+            </div>
+
+            <div class="form-group">
+              <label for="api1_payload">Payload (JSON):</label>
+              <textarea
+                id="api1_payload"
+                name="api1_payload"
+                class="form-control"
+                rows="6"
+              >
+{}</textarea
+              >
+            </div>
+          </div>
+
+          <div>
+            <h3>Second API</h3>
+            <div class="form-group">
+              <label for="api2_url">URL:</label>
+              <input
+                type="url"
+                id="api2_url"
+                name="api2_url"
+                class="form-control"
+                required
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="api2_method">Method:</label>
+              <select
+                id="api2_method"
+                name="api2_method"
+                class="form-control"
+                required
+              >
+                {% for method in methods %}
+                <option value="{{ method }}">{{ method }}</option>
+                {% endfor %}
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="api2_headers">Headers (JSON):</label>
+              <textarea
+                id="api2_headers"
+                name="api2_headers"
+                class="form-control"
+                rows="4"
+              >
+{}</textarea
+              >
+            </div>
+
+            <div class="form-group">
+              <label for="api2_payload">Payload (JSON):</label>
+              <textarea
+                id="api2_payload"
+                name="api2_payload"
+                class="form-control"
+                rows="6"
+              >
+{}</textarea
+              >
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label>View Mode:</label>
+          <div class="radio-group">
+            <input
+              type="radio"
+              id="line"
+              name="view_mode"
+              value="line"
+              checked
+            />
+            <label for="line">Line by Line</label>
+            <input type="radio" id="tree" name="view_mode" value="tree" />
+            <label for="tree">Tree View</label>
+          </div>
+        </div>
+
+        <button type="submit" class="button" id="compareButton">
+          Compare APIs
+        </button>
+      </form>
+    </div>
+
+    <script>
+      // Session timeout handling
+      let warningTimeout;
+      let logoutTimeout;
+      const activityEvents = [
+        "mousedown",
+        "mousemove",
+        "keypress",
+        "scroll",
+        "touchstart",
+      ];
+      const warningTime = 19 * 60 * 1000; // Show warning 1 minute before timeout (19 minutes)
+      const logoutTime = 20 * 60 * 1000; // Logout after 20 minutes
+
+      function resetTimers() {
+        clearTimeout(warningTimeout);
+        clearTimeout(logoutTimeout);
+        startTimers();
+      }
+
+      function startTimers() {
+        warningTimeout = setTimeout(showTimeoutWarning, warningTime);
+        logoutTimeout = setTimeout(logout, logoutTime);
+      }
+
+      function showTimeoutWarning() {
+        const warningDialog = document.getElementById("session-timeout");
+        warningDialog.style.display = "block";
+
+        // Start countdown
+        let countdown = 60;
+        const countdownElement = document.getElementById("timeout-countdown");
+        const countdownInterval = setInterval(() => {
+          countdown--;
+          countdownElement.textContent = countdown;
+          if (countdown <= 0) {
+            clearInterval(countdownInterval);
+          }
+        }, 1000);
+      }
+
+      function extendSession() {
+        const warningDialog = document.getElementById("session-timeout");
+        warningDialog.style.display = "none";
+        resetTimers();
+
+        // Call backend to extend session
+        fetch("/extend-session", { method: "POST" });
+      }
+
+      function logout() {
+        window.location.href = "/logout";
+      }
+
+      // Add activity event listeners
+      activityEvents.forEach((event) => {
+        document.addEventListener(event, resetTimers);
+      });
+
+      // Start timers when page loads
+      startTimers();
+
+      document
+        .getElementById("compareForm")
+        .addEventListener("submit", function (e) {
+          // Show progress container
+          document.getElementById("progressContainer").style.display = "block";
+          document.getElementById("compareButton").disabled = true;
+
+          // Connect to WebSocket for progress updates
+          const ws = new WebSocket(`ws://${window.location.host}/ws`);
+          ws.onmessage = function (event) {
+            const data = JSON.parse(event.data);
+            if (data.type === "processing") {
+              updateProgress(data.status);
+            }
+          };
+
+          function updateProgress(status) {
+            const progressBar = document.getElementById("progressBar");
+            const loadingText = document.getElementById("loadingText");
+            const processingStatus =
+              document.getElementById("processingStatus");
+            const steps = {
+              starting: {
+                step: 1,
+                progress: 25,
+                text: "Starting API comparison...",
+              },
+              validating: {
+                step: 1,
+                progress: 50,
+                text: "Validating inputs...",
+              },
+              processing: {
+                step: 2,
+                progress: 60,
+                text: "Processing request...",
+              },
+              fetching: {
+                step: 3,
+                progress: 75,
+                text: "Fetching API responses...",
+              },
+              comparing: {
+                step: 4,
+                progress: 90,
+                text: "Comparing results...",
+              },
+            };
+
+            if (steps[status]) {
+              const { step, progress, text } = steps[status];
+              progressBar.style.width = `${progress}%`;
+              loadingText.textContent = text;
+              processingStatus.textContent = text;
+
+              // Update step indicators
+              for (let i = 1; i <= 4; i++) {
+                const stepEl = document.getElementById(`step${i}`);
+                if (i <= step) {
+                  stepEl.classList.add("active");
+                }
+              }
+
+              // Update progress line
+              document.getElementById("stepLineProgress").style.width = `${
+                (step - 1) * 33.33
+              }%`;
+            }
+          }
+        });
+
+      // Validate JSON input
+      function validateJson(input, fieldName) {
+        try {
+          if (input.value.trim()) {
+            JSON.parse(input.value);
+          }
+          input.style.borderColor = "";
+          return true;
+        } catch (e) {
+          input.style.borderColor = "red";
+          alert(`Invalid JSON in ${fieldName}`);
+          return false;
+        }
+      }
+
+      // Add JSON validation to payload and headers fields
+      ["api1_payload", "api2_payload", "api1_headers", "api2_headers"].forEach(
+        (id) => {
+          const element = document.getElementById(id);
+          element.addEventListener("blur", () => validateJson(element, id));
+        }
+      );
+    </script>
+    <div
+      style="text-align: center; margin-top: 20px; color: #666; font-size: 12px"
+    >
+      Copyright © 2025 TellusDigital. All rights reserved.<br />
+      For internal use only.
+    </div>
+  </body>
+</html>

templates/error.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Error - API Comparator</title>
+    <style>
+      /* Inline critical CSS */
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 20px;
+        background-color: #f5f5f5;
+      }
+      .container {
+        max-width: 600px;
+        margin: 100px auto;
+        padding: 20px;
+        background-color: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        text-align: center;
+      }
+      .header {
+        margin-bottom: 20px;
+      }
+      .logo {
+        width: 100px;
+        height: auto;
+      }
+      .error {
+        color: #dc3545;
+        margin: 20px 0;
+      }
+      .error-detail {
+        margin-top: 10px;
+        padding: 10px;
+        background-color: #f8f9fa;
+        border-radius: 4px;
+        color: #666;
+        font-family: monospace;
+        white-space: pre-wrap;
+      }
+      .button {
+        display: inline-block;
+        background-color: #4caf50;
+        color: white;
+        padding: 10px 20px;
+        text-decoration: none;
+        border-radius: 4px;
+        margin-top: 20px;
+      }
+      .button:hover {
+        background-color: #45a049;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <img src="/static/images/TD-logo.jpeg" alt="Logo" class="logo" />
+      </div>
+
+      <div class="error-container">
+        <h2>Error</h2>
+        <div class="error">{{ error }}</div>
+        {% if detail %}
+        <div class="error-detail">{{ detail }}</div>
+        {% endif %}
+        <div style="margin-top: 20px">
+          <a href="/" class="button">Return to Home</a>
+        </div>
+      </div>
+    </div>
+    <div
+      style="text-align: center; margin-top: 20px; color: #666; font-size: 12px"
+    >
+      Copyright © 2025 TellusDigital. All rights reserved.<br />
+      For internal use only.
+    </div>
+  </body>
+</html>

templates/login.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Login - API Comparator</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', path='/css/styles.css') }}"
+    />
+  </head>
+  <body>
+    <div class="login-container">
+      <div class="header">
+        <img
+          src="{{ url_for('static', path='/images/TD-logo.jpeg') }}"
+          alt="Logo"
+          class="logo"
+        />
+      </div>
+
+      {% if error %}
+      <div class="error">{{ error }}</div>
+      {% endif %}
+
+      <form method="POST" action="/login">
+        <div class="form-group">
+          <label for="username">Username:</label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            class="form-control"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">Password:</label>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            class="form-control"
+            required
+          />
+        </div>
+
+        <button type="submit" class="button">Login</button>
+      </form>
+    </div>
+    <div
+      style="text-align: center; margin-top: 20px; color: #666; font-size: 12px"
+    >
+      Copyright © 2025 TellusDigital. All rights reserved.<br />
+      For internal use only.
+    </div>
+  </body>
+</html>

templates/results.html

@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>API Comparison Results</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', path='/css/styles.css') }}"
+    />
+    <style>
+      .diff-highlight-add {
+        background-color: #e6ffe6;
+        color: green;
+      }
+      .diff-highlight-remove {
+        background-color: #ffe6e6;
+        color: red;
+      }
+      .spinner {
+        display: none;
+        width: 50px;
+        height: 50px;
+        border: 5px solid #f3f3f3;
+        border-top: 5px solid #4caf50;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin: 20px auto;
+      }
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      .api-info {
+        background-color: #f8f9fa;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+        border-left: 4px solid #4caf50;
+      }
+      .api-endpoint {
+        font-family: monospace;
+        color: #0056b3;
+        word-break: break-all;
+      }
+      .session-timeout-warning {
+        display: none;
+        background-color: #fff3cd;
+        border: 1px solid #ffeeba;
+        padding: 10px;
+        border-radius: 4px;
+        margin: 20px auto;
+        text-align: center;
+      }
+      .session-timeout-warning h3 {
+        margin: 0;
+        font-size: 18px;
+        color: #856404;
+      }
+      .session-timeout-warning p {
+        margin: 10px 0;
+        font-size: 14px;
+        color: #856404;
+      }
+      .session-timeout-warning button {
+        margin: 5px;
+        padding: 5px 10px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .session-timeout-warning .continue {
+        background-color: #4caf50;
+        color: white;
+      }
+      .session-timeout-warning .logout {
+        background-color: #f44336;
+        color: white;
+      }
+      .alert {
+        padding: 15px;
+        margin-bottom: 20px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+      }
+      .alert-error {
+        color: #721c24;
+        background-color: #f8d7da;
+        border-color: #f5c6cb;
+      }
+      .alert-error .close {
+        float: right;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 20px;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <a href="/compare">
+          <img
+            src="{{ url_for('static', path='/images/TD-logo.jpeg') }}"
+            alt="Logo"
+            class="logo"
+          />
+        </a>
+        <div class="user-menu">
+          <div>Welcome, {{ username }}!</div>
+          <div class="user-menu-content">
+            <a href="/logout">Logout</a>
+          </div>
+        </div>
+      </div>
+
+      <div id="errorAlert" class="alert alert-error" style="display: none">
+        <span class="close" onclick="this.parentElement.style.display='none';"
+          >&times;</span
+        >
+        <strong>Error!</strong> <span id="errorMessage"></span>
+      </div>
+
+      <div id="session-timeout" class="session-timeout-warning">
+        <h3>Session Timeout Warning</h3>
+        <p>
+          Your session will expire in
+          <span id="timeout-countdown">60</span> seconds due to inactivity.
+        </p>
+        <button class="continue" onclick="extendSession()">
+          Continue Session
+        </button>
+        <button class="logout" onclick="window.location.href='/logout'">
+          Logout
+        </button>
+      </div>
+
+      <div class="results">
+        <h2>API Comparison Results</h2>
+        <div id="loading-spinner" class="spinner"></div>
+
+        <div class="grid">
+          <div>
+            <h3>First API</h3>
+            <div class="api-info">
+              <p>
+                <strong>Endpoint:</strong>
+                <span class="api-endpoint"
+                  >{{ api1_url }} ({{ api1_method }})</span
+                >
+              </p>
+              <p>Execution Time: {{ execution_time_api1 }}s</p>
+              <p>Status Code: {{ status_code1 }}</p>
+            </div>
+            <form
+              method="POST"
+              action="/download/"
+              style="display: inline"
+              onsubmit="return handleDownload(event, this)"
+            >
+              <input type="hidden" name="content" value="{{ api1_result }}" />
+              <input type="hidden" name="filename" value="api1_result.json" />
+              <input type="hidden" name="username" value="{{ username }}" />
+              <button type="submit" class="download-button">
+                Download API 1 Result
+              </button>
+            </form>
+            <div class="json-content">
+              <pre id="api1-content">{{ api1_result | safe }}</pre>
+            </div>
+          </div>
+
+          <div>
+            <h3>Second API</h3>
+            <div class="api-info">
+              <p>
+                <strong>Endpoint:</strong>
+                <span class="api-endpoint"
+                  >{{ api2_url }} ({{ api2_method }})</span
+                >
+              </p>
+              <p>Execution Time: {{ execution_time_api2 }}s</p>
+              <p>Status Code: {{ status_code2 }}</p>
+            </div>
+            <form
+              method="POST"
+              action="/download/"
+              style="display: inline"
+              onsubmit="return handleDownload(event, this)"
+            >
+              <input type="hidden" name="content" value="{{ api2_result }}" />
+              <input type="hidden" name="filename" value="api2_result.json" />
+              <input type="hidden" name="username" value="{{ username }}" />
+              <button type="submit" class="download-button">
+                Download API 2 Result
+              </button>
+            </form>
+            <div class="json-content">
+              <pre id="api2-content">{{ api2_result | safe }}</pre>
+            </div>
+          </div>
+        </div>
+
+        <div class="comparison-results">
+          <h3>Differences</h3>
+          <form
+            method="POST"
+            action="/download/"
+            style="display: inline"
+            onsubmit="return handleDownload(event, this)"
+          >
+            <input type="hidden" name="content" value="{{ diff_text }}" />
+            <input
+              type="hidden"
+              name="filename"
+              value="comparison_result.txt"
+            />
+            <input type="hidden" name="username" value="{{ username }}" />
+            <button type="submit" class="download-button">
+              Download Comparison Result
+            </button>
+          </form>
+
+          <div class="results-view">
+            {% if view_mode == "line" %} {% if diff_result.strip() == '' %}
+            <div class="success">Both responses are identical.</div>
+            {% else %}
+            <div class="diff-content">{{ diff_result | safe }}</div>
+            {% endif %} {% else %}
+            <pre>{{ diff_result | safe }}</pre>
+            {% endif %}
+          </div>
+        </div>
+
+        <div style="margin-top: 20px">
+          <a href="/compare" class="button">Compare More APIs</a>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      function highlightDifferences() {
+        const api1Content = document.getElementById("api1-content");
+        const api2Content = document.getElementById("api2-content");
+
+        if (!api1Content || !api2Content) return;
+
+        const lines1 = api1Content.textContent.split("\n");
+        const lines2 = api2Content.textContent.split("\n");
+
+        let html1 = "";
+        let html2 = "";
+
+        const maxLines = Math.max(lines1.length, lines2.length);
+
+        for (let i = 0; i < maxLines; i++) {
+          const line1 = lines1[i] || "";
+          const line2 = lines2[i] || "";
+
+          if (line1 !== line2) {
+            html1 += `<span class="diff-highlight-remove">${line1}</span>\n`;
+            html2 += `<span class="diff-highlight-remove">${line2}</span>\n`;
+          } else {
+            html1 += line1 + "\n";
+            html2 += line2 + "\n";
+          }
+        }
+
+        api1Content.innerHTML = html1;
+        api2Content.innerHTML = html2;
+      }
+
+      document.addEventListener("DOMContentLoaded", highlightDifferences);
+
+      function extendSession() {
+        document.getElementById("session-timeout").style.display = "none";
+      }
+
+      setTimeout(() => {
+        document.getElementById("session-timeout").style.display = "block";
+      }, 300000);
+
+      async function handleDownload(event, form) {
+        event.preventDefault();
+
+        try {
+          const formData = new FormData(form);
+          const response = await fetch(form.action, {
+            method: "POST",
+            body: formData,
+          });
+
+          if (!response.ok) {
+            const data = await response.json().catch(() => null);
+            throw new Error(
+              data?.detail || "Failed to download file. Please try again."
+            );
+          }
+
+          const blob = await response.blob();
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = formData.get("filename");
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+        } catch (error) {
+          showError(error.message || "Something went wrong. Please try again.");
+        }
+        return false;
+      }
+
+      function showError(message) {
+        const errorAlert = document.getElementById("errorAlert");
+        const errorMessage = document.getElementById("errorMessage");
+        errorMessage.textContent = message;
+        errorAlert.style.display = "block";
+
+        setTimeout(() => {
+          errorAlert.style.display = "none";
+        }, 5000);
+      }
+
+      window.addEventListener("unhandledrejection", function (event) {
+        showError(
+          "Network error occurred. Please check your connection and try again."
+        );
+      });
+    </script>
+
+    <div
+      style="text-align: center; margin-top: 20px; color: #666; font-size: 12px"
+    >
+      Copyright © 2025 TellusDigital. All rights reserved.<br />
+      For internal use only.
+    </div>
+  </body>
+</html>

templates/session_timeout.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Session Timeout - API Comparator</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', path='/css/styles.css') }}"
+    />
+    <style>
+      .timeout-container {
+        max-width: 500px;
+        margin: 100px auto;
+        padding: 30px;
+        text-align: center;
+        background-color: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .timeout-icon {
+        font-size: 48px;
+        color: #dc3545;
+        margin-bottom: 20px;
+      }
+      .timeout-message {
+        margin: 20px 0;
+        color: #666;
+      }
+      .login-button {
+        display: inline-block;
+        margin-top: 20px;
+        padding: 10px 30px;
+        background-color: #4caf50;
+        color: white;
+        text-decoration: none;
+        border-radius: 4px;
+        transition: background-color 0.3s;
+      }
+      .login-button:hover {
+        background-color: #45a049;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="timeout-container">
+      <div class="timeout-icon">⏰</div>
+      <h2>Session Expired</h2>
+      <div class="timeout-message">
+        Your session has timed out due to inactivity.<br />
+        Please log in again to continue.
+      </div>
+      <a href="/login" class="login-button">Log In Again</a>
+    </div>
+    <div
+      style="text-align: center; margin-top: 20px; color: #666; font-size: 12px"
+    >
+      Copyright © 2025 TellusDigital. All rights reserved.<br />
+      For internal use only.
+    </div>
+  </body>
+</html>

templates/unauthorized.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Authentication Required - API Comparator</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', path='/css/styles.css') }}"
+    />
+    <style>
+      .unauthorized-container {
+        max-width: 500px;
+        margin: 100px auto;
+        padding: 30px;
+        text-align: center;
+        background-color: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .unauthorized-icon {
+        font-size: 48px;
+        color: #dc3545;
+        margin-bottom: 20px;
+      }
+      .unauthorized-message {
+        margin: 20px 0;
+        color: #666;
+      }
+      .login-button {
+        display: inline-block;
+        margin-top: 20px;
+        padding: 10px 30px;
+        background-color: #4caf50;
+        color: white;
+        text-decoration: none;
+        border-radius: 4px;
+        transition: background-color 0.3s;
+      }
+      .login-button:hover {
+        background-color: #45a049;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="unauthorized-container">
+      <div class="unauthorized-icon">🔒</div>
+      <h2>Authentication Required</h2>
+      <div class="unauthorized-message">
+        You need to be logged in to access this page.<br />
+        Please log in to continue.
+      </div>
+      <a href="/login" class="login-button">Log In</a>
+    </div>
+    <div
+      style="text-align: center; margin-top: 20px; color: #666; font-size: 12px"
+    >
+      Copyright © 2025 TellusDigital. All rights reserved.<br />
+      For internal use only.
+    </div>
+  </body>
+</html>

tests/conftest.py

@@ -0,0 +1,65 @@
+"""Pytest fixtures for testing FastAPI application components"""
+
+import pytest
+from fastapi import FastAPI
+from fastapi.testclient import TestClient
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from starlette.middleware.sessions import SessionMiddleware
+from utils.utility import USER_CREDENTIALS
+from main import app, SECRET_KEY, SESSION_TIMEOUT
+
+
+@pytest.fixture
+def client():
+    """Create a test client with session middleware"""
+    # Create a fresh FastAPI application for testing
+    test_app = FastAPI()
+
+    # Add SessionMiddleware
+    test_app.add_middleware(
+        SessionMiddleware,
+        secret_key=SECRET_KEY,
+        session_cookie="api_comparator_session",
+        max_age=SESSION_TIMEOUT
+    )
+
+    # Configure templates and static files
+    test_app.mount("/static", StaticFiles(directory="static"), name="static")
+    templates = Jinja2Templates(directory="templates")
+    test_app.state.templates = templates
+
+    # Include all routes from the main app
+    for route in app.routes:
+        test_app.router.routes.append(route)
+
+    # Create and return the test client
+    return TestClient(test_app)
+
+
+@pytest.fixture
+def test_user():
+    """Return test user credentials"""
+    return {
+        "username": next(iter(USER_CREDENTIALS.keys())),
+        "password": next(iter(USER_CREDENTIALS.values()))
+    }
+
+
+@pytest.fixture
+def mock_apis():
+    """Return mock API configurations"""
+    return {
+        "api1": {
+            "url": "http://api1.example.com",
+            "method": "GET",
+            "payload": "{}",
+            "headers": "{}"
+        },
+        "api2": {
+            "url": "http://api2.example.com",
+            "method": "GET",
+            "payload": "{}",
+            "headers": "{}"
+        }
+    }

tests/test_api_comparison.py

@@ -0,0 +1,128 @@
+"""Test module for API comparison functionality"""
+
+from unittest.mock import AsyncMock, patch  # Standard library
+
+import aiohttp
+import pytest  # Third-party
+from fastapi import status
+
+
+def test_compare_page_protected(client):
+    """Verify that compare page requires authentication"""
+    response = client.get("/compare", follow_redirects=False)
+    assert response.status_code == status.HTTP_302_FOUND
+    assert response.headers["location"] == "/login"
+
+
+def test_compare_page_authenticated(client, test_user):
+    """Verify authenticated user can access compare page"""
+    client.post("/login", data=test_user)
+    response = client.get("/compare")
+    assert response.status_code == status.HTTP_200_OK
+
+
+def test_compare_apis_validation(client, test_user):
+    """Test API comparison form validation"""
+    client.post("/login", data=test_user)
+
+    response = client.post("/compare", data={
+        "api1_url": "not-a-url",
+        "api1_method": "GET",
+        "api1_payload": "{}",
+        "api1_headers": "{}",
+        "api2_url": "http://example.com",
+        "api2_method": "GET",
+        "api2_payload": "{}",
+        "api2_headers": "{}",
+        "view_mode": "line"
+    })
+    assert "valid URL" in response.text
+
+
+@pytest.mark.asyncio
+async def test_compare_apis_success(client, test_user):
+    """Test successful API comparison with mocked responses, including SSL setting."""
+    mock_data1 = {"test": "data1"}
+    mock_data2 = {"test": "data2"}
+
+    # Mock responses
+    mock_response1 = AsyncMock()
+    mock_response1.json.return_value = mock_data1
+    mock_response1.status = 200
+    mock_response1.__aenter__.return_value = mock_response1
+
+    mock_response2 = AsyncMock()
+    mock_response2.json.return_value = mock_data2
+    mock_response2.status = 200
+    mock_response2.__aenter__.return_value = mock_response2
+
+    # Mock session
+    mock_session = AsyncMock(spec=aiohttp.ClientSession)
+    mock_session.__aenter__.return_value = mock_session
+    mock_session.request.side_effect = [mock_response1, mock_response2]
+
+    # Login the test user
+    client.post("/login", data=test_user)
+
+    # Patch aiohttp ClientSession
+    with patch('aiohttp.ClientSession', return_value=mock_session):
+        response = client.post("/compare", data={
+            "api1_url": "http://api1.example.com",
+            "api1_method": "GET",
+            "api1_payload": "{}",
+            "api1_headers": "{}",
+            "api2_url": "http://api2.example.com",
+            "api2_method": "GET",
+            "api2_payload": "{}",
+            "api2_headers": "{}",
+            "view_mode": "line"
+        }, follow_redirects=True)
+
+        assert response.status_code == status.HTTP_200_OK
+        assert "data1" in response.text
+        assert "data2" in response.text
+        assert mock_session.request.call_count == 2
+
+        # Check that requests include the ssl argument (which can be None or a context)
+        mock_session.request.assert_any_call(
+            method='GET',
+            url="http://api1.example.com",
+            json=None,
+            params={},
+            headers={},
+            timeout=30,
+            ssl=None  # 🛡️ Include SSL param check
+        )
+        mock_session.request.assert_any_call(
+            method='GET',
+            url="http://api2.example.com",
+            json=None,
+            params={},
+            headers={},
+            timeout=30,
+            ssl=None
+        )
+
+
+def test_download_result_protected(client):
+    """Test that download requires authentication"""
+    response = client.post("/download/", data={
+        "content": "{}",
+        "filename": "test.json",
+        "username": "admin"
+    }, follow_redirects=False)
+    assert response.status_code == status.HTTP_302_FOUND
+    assert response.headers["location"] == "/login"
+
+
+def test_download_result_authenticated(client, test_user):
+    """Test authenticated download with valid JSON"""
+    client.post("/login", data=test_user)
+
+    response = client.post("/download/", data={
+        "content": '{"test": "data"}',
+        "filename": "test.json",
+        "username": test_user["username"]
+    })
+    assert response.status_code == status.HTTP_200_OK
+    assert response.headers["content-type"] == "application/json"

tests/test_auth.py

@@ -0,0 +1,70 @@
+"""Test module for authentication functionality"""
+from fastapi import status
+
+
+def test_login_success(client, test_user):
+    """Test successful login"""
+    response = client.post(
+        "/login",
+        data=test_user,
+        follow_redirects=False
+    )
+    assert response.status_code == status.HTTP_302_FOUND
+    assert response.headers["location"] == "/compare"
+
+    # Verify session is set
+    response = client.get("/compare")
+    assert response.status_code == status.HTTP_200_OK
+
+
+def test_login_failure(client):
+    """Test login with invalid credentials"""
+    response = client.post(
+        "/login",
+        data={"username": "invalid", "password": "wrong"},
+        follow_redirects=False
+    )
+    assert response.status_code == status.HTTP_401_UNAUTHORIZED
+    assert "Invalid credentials" in response.text
+
+
+def test_session_timeout(client, test_user):
+    """Test session timeout behavior"""
+    # First login
+    client.post("/login", data=test_user)
+
+    # Access protected route should succeed
+    response = client.get("/compare")
+    assert response.status_code == status.HTTP_200_OK
+
+    # Clear session cookie to simulate timeout
+    client.cookies.clear()
+
+    # Access should redirect to login
+    response = client.get("/compare", follow_redirects=False)
+    assert response.status_code == status.HTTP_302_FOUND
+    assert response.headers["location"] == "/login"
+
+
+def test_session_timeout_page(client):
+    """Test session timeout page content"""
+    # When session times out, user is redirected to login
+    response = client.get("/login")
+    assert response.status_code == status.HTTP_200_OK
+    assert "Login" in response.text
+
+
+def test_logout(client, test_user):
+    """Test logout functionality"""
+    # First login
+    client.post("/login", data=test_user)
+
+    # Then logout
+    response = client.get("/logout", follow_redirects=False)
+    assert response.status_code == status.HTTP_302_FOUND
+    assert response.headers["location"] == "/login"
+
+    # Verify can't access protected route anymore
+    response = client.get("/compare", follow_redirects=False)
+    assert response.status_code == status.HTTP_302_FOUND
+    assert response.headers["location"] == "/login"

tests/test_frontend.py

@@ -0,0 +1,101 @@
+"""Test module for frontend functionality"""
+from bs4 import BeautifulSoup
+from fastapi import status
+
+
+def test_compare_form_validation(client, test_user):
+    """Test form validation for API comparison"""
+    client.post("/login", data=test_user)
+
+    response = client.post("/compare", data={
+        "api1_url": "not-a-url",
+        "api1_method": "GET",
+        "api1_payload": "{}",
+        "api1_headers": "{}",
+        "api2_url": "http://example.com",
+        "api2_method": "GET",
+        "api2_payload": "{}",
+        "api2_headers": "{}",
+        "view_mode": "line"
+    })
+    assert "valid URL" in response.text
+
+
+def test_download_error_handling(client, test_user):
+    """Test error handling for file downloads"""
+    client.post("/login", data=test_user)
+
+    response = client.post("/download/", data={
+        "content": "{invalid-json}",
+        "filename": "test.json",
+        "username": test_user["username"]
+    })
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    assert "Invalid JSON content" in response.text
+
+
+def test_session_timeout_redirect(client, test_user):
+    """Test session timeout redirects to login page"""
+    client.post("/login", data=test_user)
+
+    response = client.get("/compare")
+    assert response.status_code == status.HTTP_200_OK
+
+    client.cookies.clear()
+
+    response = client.get("/compare", follow_redirects=False)
+    assert response.status_code == status.HTTP_302_FOUND
+    assert response.headers["location"] == "/login"
+
+
+def test_session_timeout_page_content(client):
+    """Test session timeout page content"""
+    response = client.get("/login")
+    assert response.status_code == status.HTTP_200_OK
+
+    soup = BeautifulSoup(response.text, 'html.parser')
+
+    assert soup.find('form', {'action': '/login'}) is not None
+    assert soup.find('input', {'name': 'username'}) is not None
+    assert soup.find('input', {'name': 'password'}) is not None
+
+
+def test_error_page_content(client, test_user):
+    """Test error page content"""
+    client.post("/login", data=test_user)
+
+    response = client.post("/compare", data={
+        "api1_url": "http://example.com",
+        "api1_method": "GET",
+        "api1_payload": "{}",
+        "api1_headers": "{}",
+        "api2_url": "http://example.com",
+        "api2_method": "GET",
+        "api2_payload": "{}",
+        "api2_headers": "{}"
+    })
+    assert response.status_code == status.HTTP_200_OK
+    assert "API URLs cannot be identical" in response.text
+
+
+def test_error_handler_internal_server_error(client, test_user):
+    """Test internal server error handling"""
+    client.post("/login", data=test_user)
+
+    response = client.post("/compare", data={
+        "api1_url": "http://api1.example.com",
+        "api1_method": "GET",
+        "api1_payload": "{invalid-json}",
+        "api1_headers": "{}",
+        "api2_url": "http://api2.example.com",
+        "api2_method": "GET",
+        "api2_payload": "{}",
+        "api2_headers": "{}"
+    })
+    assert response.status_code == status.HTTP_200_OK
+    assert "error" in response.text.lower()
+    soup = BeautifulSoup(response.text, 'html.parser')
+    error_div = soup.find('div', {'class': 'error'})
+    assert error_div is not None
+    assert "invalid" in error_div.text.lower()
+

tests/test_utility.py

@@ -0,0 +1,143 @@
+"""Unit tests for utility functions used in API comparison."""
+
+from unittest.mock import AsyncMock, patch
+
+import aiohttp
+import pytest
+
+from utils.utility import (
+    validate_urls,
+    validate_json_inputs,
+    parse_json_input,
+    compare_responses,
+    json_line_diff,
+    highlight_json_diff,
+    fetch_api_responses
+)
+
+
+def test_validate_urls():
+    """Test URL validation including valid, invalid, and duplicate cases."""
+    validate_urls("http://example.com", "http://api.example.com")
+
+    with pytest.raises(ValueError):
+        validate_urls("not-a-url", "http://example.com")
+
+    with pytest.raises(ValueError):
+        validate_urls("http://example.com", "http://example.com")
+
+
+def test_validate_json_inputs():
+    """Test validation of JSON inputs, including valid and invalid cases."""
+    validate_json_inputs(
+        ('{"key": "value"}', "Test 1"),
+        ('[]', "Test 2")
+    )
+
+    with pytest.raises(ValueError):
+        validate_json_inputs(
+            ('{invalid}', "Test Invalid"),
+            ('{}', "Test Valid")
+        )
+
+
+def test_parse_json_input():
+    """Test parsing of valid and invalid JSON strings."""
+    assert parse_json_input('{"test": "data"}', "Test") == {"test": "data"}
+    assert parse_json_input('[]', "Test") == []
+    assert parse_json_input('{}', "Test") == {}
+
+    with pytest.raises(ValueError):
+        parse_json_input('{invalid}', "Test Invalid")
+
+
+def test_compare_responses():
+    """Test comparison of two JSON responses in tree and text views."""
+    json1 = {"key1": "val1", "key2": "val2"}
+    json2 = {"key1": "val1", "key3": "val3"}
+
+    tree_diff = compare_responses(json1, json2, view="tree")
+    assert isinstance(tree_diff, dict)
+    assert "dictionary_item_removed" in str(tree_diff)
+    assert "dictionary_item_added" in str(tree_diff)
+
+    text_diff = compare_responses(json1, json2, view="text")
+    assert isinstance(text_diff, str)
+    assert "key2" in text_diff
+    assert "key3" in text_diff
+
+
+def test_json_line_diff():
+    """Test line-by-line difference between two JSON objects."""
+    json1 = {"test": "data1"}
+    json2 = {"test": "data2"}
+
+    diff = json_line_diff(json1, json2)
+    assert isinstance(diff, str)
+    assert "data1" in diff
+    assert "data2" in diff
+
+
+def test_highlight_json_diff():
+    """Test HTML highlighting of differences between two JSON objects."""
+    json1 = {"test": "data1"}
+    json2 = {"test": "data2"}
+
+    html1, html2 = highlight_json_diff(json1, json2)
+    assert isinstance(html1, str)
+    assert isinstance(html2, str)
+    assert "data1" in html1
+    assert "data2" in html2
+
+
+@pytest.mark.asyncio
+async def test_fetch_api_responses():
+    """Test the fetch_api_responses function with proper async mocks, including SSL."""
+    mock_data = {"test": "data"}
+
+    # Mock a single response
+    mock_response = AsyncMock()
+    mock_response.json.return_value = mock_data
+    mock_response.status = 200
+    mock_response.__aenter__.return_value = mock_response
+
+    # Create session mock
+    mock_session = AsyncMock(spec=aiohttp.ClientSession)
+    mock_session.__aenter__.return_value = mock_session
+    mock_session.request.side_effect = [mock_response, mock_response]
+
+    with patch('aiohttp.ClientSession', return_value=mock_session):
+        responses = await fetch_api_responses(
+            "http://api1.example.com", "GET", {}, {},
+            "http://api2.example.com", "GET", {}, {}
+        )
+
+        assert len(responses) == 2
+        response1, time1 = responses[0]
+        response2, time2 = responses[1]
+
+        assert response1['data'] == mock_data
+        assert response2['data'] == mock_data
+        assert response1['status'] == 200
+        assert response2['status'] == 200
+        assert isinstance(time1, float)
+        assert isinstance(time2, float)
+        assert mock_session.request.call_count == 2
+
+        expected_kwargs = {
+            'method': 'GET',
+            'json': None,
+            'params': {},
+            'headers': {},
+            'timeout': 30,
+            'ssl': None
+        }
+
+        mock_session.request.assert_any_call(
+            url="http://api1.example.com",
+            **expected_kwargs
+        )
+        mock_session.request.assert_any_call(
+            url="http://api2.example.com",
+            **expected_kwargs
+        )

utils/api_comparator.py

@@ -0,0 +1,284 @@
+"""
+API Comparator Module
+
+This module provides the Streamlit-based web interface for comparing API responses.
+It implements the UI components, API request handling, and response comparison functionality.
+"""
+
+import difflib
+import json
+from json.decoder import JSONDecodeError
+
+import streamlit as st
+from requests.exceptions import RequestException
+
+from utility import compare_responses, json_line_diff, USER_CREDENTIALS
+from utility import validate_urls, validate_json_inputs, parse_json_input, fetch_api_responses
+from utils.logger import structlog
+
+log = structlog.get_logger()
+
+st.set_page_config(page_title="ARC", layout="wide")
+
+# Custom CSS including download buttons
+CUSTOM_CSS = """
+div.stButton > button:first-child, div.stDownloadButton > button:first-child {
+    background-color: #4CAF50;
+    color: white;
+    border-radius: 8px;
+    border: none;
+    padding: 10px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    transition-duration: 0.4s;
+}
+div.stButton > button:first-child:hover, 
+div.stDownloadButton > button:first-child:hover {
+    background-color: #45a049;
+}
+"""
+
+# Apply custom CSS
+st.markdown(CUSTOM_CSS, unsafe_allow_html=True)
+
+# Move logo to upper right corner with smaller size
+_, logo_col = st.columns([9, 1])
+with logo_col:
+    st.image("TD-logo.jpeg", width=100)
+
+# Streamlit UI
+st.title("API Response Comparator")
+
+col1, col2 = st.columns(2)
+
+
+def get_supported_methods():
+    """Return list of supported HTTP methods."""
+    return ["GET", "POST", "PUT", "DELETE", "PATCH"]
+
+
+def login():
+    """Handle user login through Streamlit interface."""
+    st.title("Login")
+
+    username = st.text_input("Username")
+    password = st.text_input("Password", type="password")
+
+    if st.button("Login"):
+        if username in USER_CREDENTIALS and USER_CREDENTIALS[username] == password:
+            st.session_state.logged_in = True
+            st.session_state.username = username
+            log.info("User logged in successfully", username=username)
+            st.success(f"Welcome, {username}!")
+            st.rerun()
+        else:
+            log.warning("Failed login attempt", username=username)
+            st.error("Invalid username or password")
+
+
+if "logged_in" not in st.session_state:
+    st.session_state.logged_in = False
+
+if not st.session_state.logged_in:
+    login()
+    st.stop()
+
+# Set defaults before widgets
+defaults = {
+    "api1_url": "",
+    "api1_method": "GET",
+    "api1_payload": "{}",
+    "api2_url": "",
+    "api2_method": "GET",
+    "api2_payload": "{}",
+}
+
+with col1:
+    st.header("API 1")
+    api1_url = st.text_input("Enter API 1 URL:", key="api1_url", value="")
+    api1_method = st.selectbox("Select API 1 Method:", get_supported_methods(), key="api1_method")
+    api1_payload = st.text_area(
+        "Enter API 1 Payload (JSON format):",
+        key="api1_payload",
+        value="{}"
+    )
+    api1_headers = st.text_area(
+        "Enter API 1 Headers (JSON format):",
+        key="api1_headers",
+        value="{}"
+    )
+
+with col2:
+    st.header("API 2")
+    api2_url = st.text_input("Enter API 2 URL:", key="api2_url", value="")
+    api2_method = st.selectbox("Select API 2 Method:", get_supported_methods(), key="api2_method")
+    api2_payload = st.text_area(
+        "Enter API 2 Payload (JSON format):",
+        key="api2_payload", value="{}"
+    )
+    api2_headers = st.text_area(
+        "Enter API 2 Headers (JSON format):",
+        key="api2_headers",
+        value="{}"
+    )
+
+# Add diff view selection
+view_mode = st.radio(
+    "Comparison View Mode:",
+    ["Line-by-line Diff",
+     "Tree (DeepDiff)"],
+    horizontal=True,
+    index=0
+)  # Setting index=0 makes Line-by-line the default
+
+# Place Compare and Clear buttons in parallel
+button_col1, button_col2 = st.columns([1, 1])
+with button_col1:
+    compare_clicked = st.button("Compare APIs")
+
+if compare_clicked:
+    try:
+        log.info("Starting API comparison",
+                 api1_url=api1_url,
+                 api2_url=api2_url)
+
+        # Input validation
+        try:
+            validate_urls(api1_url, api2_url)
+            validate_json_inputs(
+                (api1_payload, "API 1 Payload"),
+                (api2_payload, "API 2 Payload"),
+                (api1_headers, "API 1 Headers"),
+                (api2_headers, "API 2 Headers")
+            )
+        except ValueError as e:
+            log.error("Validation error", error=str(e))
+            st.error(str(e))
+            st.stop()
+
+        # Parse and validate input JSON
+        try:
+            payload1 = parse_json_input(api1_payload, "API 1 Payload")
+            payload2 = parse_json_input(api2_payload, "API 2 Payload")
+            headers1 = parse_json_input(api1_headers, "API 1 Headers")
+            headers2 = parse_json_input(api2_headers, "API 2 Headers")
+        except JSONDecodeError as e:
+            log.error("JSON parsing error", error=str(e))
+            st.error(f"Invalid JSON format: {e}")
+            st.stop()
+
+        # Fetch API responses
+        try:
+            (response1, execution_time_api1), (response2, execution_time_api2) = fetch_api_responses(
+                api1_url, api1_method, payload1, headers1,
+                api2_url, api2_method, payload2, headers2
+            )
+        except RequestException as e:
+            log.error("API request failed", error=str(e))
+            st.error(f"API request failed: {e}")
+            st.stop()
+        except Exception as e:
+            log.error("Unexpected error in API request", error=str(e))
+            st.error(f"An unexpected error occurred: {e}")
+            st.stop()
+
+        # Parse JSON responses
+        try:
+            json1 = response1.json()
+            log.info("API 1 response parsed as JSON")
+        except JSONDecodeError as e:
+            log.error("API 1 invalid JSON response", error=str(e))
+            st.error(f"API 1 did not return valid JSON: {e}")
+            st.stop()
+        try:
+            json2 = response2.json()
+            log.info("API 2 response parsed as JSON")
+        except JSONDecodeError as e:
+            log.error("API 2 invalid JSON response", error=str(e))
+            st.error(f"API 2 did not return valid JSON: {e}")
+            st.stop()
+
+        # Compare responses
+        try:
+            diff_tree = compare_responses(json1, json2, view='tree')
+            diff_text = compare_responses(json1, json2, view='text')
+            _html_diff = json_line_diff(json1, json2)
+            log.info("Generated comparison results",
+                     view_mode=view_mode)
+        except ValueError as e:
+            log.error("Comparison error", error=str(e))
+            st.error(f"Error comparing responses: {e}")
+            st.stop()
+
+        # Show results and handle downloads
+        try:
+            # Display successful API calls
+            st.subheader("API Results")
+            col_api1, col_api2 = st.columns(2)
+            with col_api1:
+                st.success(
+                    f"API 1 call executed in {execution_time_api1:.2f} seconds with status code {response1.status_code}.")
+                st.markdown("**API 1 Result**")
+                st.json(json1)
+                st.download_button(
+                    label="Download API 1 Result",
+                    data=json.dumps(json1, indent=4),
+                    file_name="api1_result.json",
+                    mime="application/json",
+                    key="download_api1_result"
+                )
+            with col_api2:
+                st.success(
+                    f"API 2 call executed in {execution_time_api2:.2f} seconds with status code {response2.status_code}.")
+                st.markdown("**API 2 Result**")
+                st.json(json2)
+                st.download_button(
+                    label="Download API 2 Result",
+                    data=json.dumps(json2, indent=4),
+                    file_name="api2_result.json",
+                    mime="application/json",
+                    key="download_api2_result"
+                )
+
+            st.subheader("Comparison Result")
+            if view_mode == "Tree (DeepDiff)":
+                if isinstance(diff_tree, str):
+                    st.text(diff_tree)
+                else:
+                    st.json(diff_tree)
+            elif view_mode == "Line-by-line Diff":
+                if _html_diff.strip() == '':
+                    st.success("Both responses are identical.")
+                else:
+                    st.markdown(_html_diff, unsafe_allow_html=True)
+
+            # Prepare download data based on view mode
+            _download_label = "Download Diff as Text"
+            if view_mode == "Line-by-line Diff":
+                json1_str = json.dumps(json1, indent=4, sort_keys=True).splitlines()
+                json2_str = json.dumps(json2, indent=4, sort_keys=True).splitlines()
+                download_data = '\n'.join(difflib.unified_diff(json1_str, json2_str, lineterm=''))
+            else:
+                download_data = str(diff_text)
+
+            st.download_button(
+                label=_download_label,
+                data=download_data,
+                file_name="diff_result.txt",
+                mime="text/plain",
+                key=f"download_diff_Text_{view_mode.replace(' ', '_')}"
+            )
+            log.info("Successfully displayed and prepared comparison results")
+
+        except (ValueError, AttributeError) as e:
+            log.error("Error displaying results", error=str(e))
+            st.error(f"Error displaying results: {e}")
+            st.stop()
+    except Exception as e:
+        log.error("Unexpected error in comparison", error=str(e))
+        st.error(f"An unexpected error occurred during comparison: {e}")
+        st.stop()

utils/api_utils.py

@@ -0,0 +1,36 @@
+"""
+API utility functions and classes for the TellusDigital API Response Comparator
+"""
+
+import json
+from typing import Any
+
+from utils.logger import structlog
+
+log = structlog.get_logger()
+
+class CustomJSONEncoder(json.JSONEncoder):
+    """Custom JSON encoder that handles DeepDiff types."""
+    
+    def default(self, obj: Any) -> Any:
+        """Convert DeepDiff types to JSON-serializable format."""
+        try:
+            values = getattr(obj, '_values', None)
+            if values is not None:
+                return list(values)
+            return json.JSONEncoder.default(self, obj)
+        except TypeError:
+            return str(obj)
+
+async def broadcast_progress(active_connections: list, message: str) -> None:
+    """Broadcast progress updates to all connected WebSocket clients."""
+    connections = active_connections.copy()
+    for connection in connections:
+        try:
+            await connection.send_json({"type": "processing", "status": message})
+        except Exception as e:
+            log.error("Broadcast error", error=str(e))
+            if connection in active_connections:
+                active_connections.remove(connection)
+
+

utils/logger.py

@@ -0,0 +1,52 @@
+"""
+Logger Configuration Module
+
+This module configures structured logging for the API Comparator service using structlog.
+It provides customized log formatting with source file information and exception handling.
+"""
+
+import logging
+import re
+from typing import Dict, Any
+
+import structlog
+
+
+def custom_processor(_, __, event_dict: Dict[str, Any]) -> Dict[str, Any]:
+    """Process log events to add source file information and handle exceptions.
+    
+    Args:
+        _: Unused logger parameter
+        __: Unused name parameter
+        event_dict: The log event dictionary to process
+        
+    Returns:
+        Dict[str, Any]: The processed log event dictionary with added source information
+    """
+    event_dict["source"] = f"{event_dict.pop('filename')}:{event_dict.pop('lineno')}"
+    if event_dict.get("level") == "error" and "exception" in event_dict:
+        exception_info = event_dict.pop("exception")
+        match = re.search(r'File \".*?\", line (\d+)', exception_info)
+        if match:
+            event_dict["source"] = f"{event_dict['source'].split(':')[0]}:{match.group(1)}"
+    return event_dict
+
+# Configure structlog
+structlog.configure(
+    processors=[
+        structlog.processors.TimeStamper(fmt="iso"),
+        structlog.processors.add_log_level,
+        structlog.processors.StackInfoRenderer(),
+        structlog.processors.format_exc_info,
+        structlog.processors.CallsiteParameterAdder(
+            [structlog.processors.CallsiteParameter.FILENAME, 
+             structlog.processors.CallsiteParameter.LINENO]
+        ),
+        custom_processor,
+        structlog.processors.JSONRenderer(),
+    ],
+    wrapper_class=structlog.make_filtering_bound_logger(logging.INFO),
+    context_class=dict,
+    logger_factory=structlog.PrintLoggerFactory(),
+    cache_logger_on_first_use=True,
+)

utils/middleware.py

@@ -0,0 +1,22 @@
+from starlette.middleware.base import BaseHTTPMiddleware
+from starlette.requests import Request
+
+class SmartSchemeMiddleware(BaseHTTPMiddleware):
+    """
+    Middleware to set the correct URL scheme (http or https) based on environment.
+    - When running locally (host is 'localhost' or '127.0.0.1'), the scheme remains 'http'.
+    - When deployed behind a proxy (e.g., on Hugging Face Spaces), the middleware checks for
+      the 'x-forwarded-proto' header and uses its value to set the scheme (typically 'https').
+    This helps avoid mixed content issues (e.g., when generating static URLs in templates),
+    especially when deploying to environments where HTTPS is terminated at the proxy level.
+    """
+    async def dispatch(self, request: Request, call_next):
+        # Detect local development by checking host
+        host = request.headers.get("host", "")
+        is_local = host.startswith("127.0.0.1") or host.startswith("localhost")
+
+        # Only override scheme if not running locally
+        if not is_local and "x-forwarded-proto" in request.headers:
+            request.scope["scheme"] = request.headers["x-forwarded-proto"]
+
+        return await call_next(request)

utils/utility.py

@@ -0,0 +1,276 @@
+"""
+API Comparator Utility Module
+
+This module provides core functionality for the API Comparator service including:
+- API request handling and response fetching
+- JSON validation and comparison
+- User authentication utilities
+- Response diff generation in various formats
+"""
+
+import asyncio
+import difflib
+import html
+import json
+import ssl
+from dataclasses import dataclass
+from datetime import datetime
+from typing import Tuple, Dict
+from typing import Union, Any
+from urllib.parse import urlparse
+
+import aiohttp
+import structlog
+from aiohttp.client_exceptions import ClientSSLError
+from deepdiff import DeepDiff
+
+log = structlog.get_logger()
+
+# User credentials (in real app, this would be in a secure database)
+USER_CREDENTIALS = {
+    "admin": "password123",  # For testing only
+    "user1": "admin"
+}
+
+
+@dataclass
+class ApiRequest:
+    """Configuration class for API requests.
+    
+    Attributes:
+        url: The API endpoint URL
+        method: HTTP method to use (GET, POST, etc)
+        payload: Request payload data
+        headers: Request headers
+        timeout: Request timeout in seconds
+        max_retries: Maximum number of retry attempts
+    """
+    url: str
+    method: str
+    payload: Dict
+    headers: Dict
+    timeout: int = 30
+    max_retries: int = 3
+    verify_ssl: bool = True
+
+
+async def fetch_api_response(
+        request: ApiRequest,
+        semaphore: asyncio.Semaphore
+) -> Tuple[Dict, float]:
+    """Fetch response from a single API with retries and optional SSL verification."""
+    start_time = datetime.now()
+
+    # Optional SSL context to ignore certificate verification
+    ssl_context = None
+    if not getattr(request, 'verify_ssl', True):
+        ssl_context = ssl.create_default_context()
+        ssl_context.check_hostname = False
+        ssl_context.verify_mode = ssl.CERT_NONE
+
+    async with semaphore:
+        for attempt in range(1, request.max_retries + 1):
+            try:
+                async with aiohttp.ClientSession() as session:
+                    async with session.request(
+                            method=request.method,
+                            url=request.url,
+                            json=request.payload if request.method in ['POST', 'PUT', 'PATCH'] else None,
+                            params=request.payload if request.method == 'GET' else None,
+                            headers=request.headers,
+                            timeout=request.timeout,
+                            ssl=ssl_context  # 🔐 This handles the certificate issue
+                    ) as response:
+                        json_response = await response.json()
+                        execution_time = (datetime.now() - start_time).total_seconds()
+                        return {
+                            'status': response.status,
+                            'data': json_response
+                        }, execution_time
+
+            except ClientSSLError as ssl_err:
+                log.error("SSL Certificate Verification Failed", error=str(ssl_err), url=request.url)
+                raise ssl_err
+
+            except Exception as e:
+                if attempt < request.max_retries:
+                    log.warning("Async API call failed, retrying",
+                                url=request.url,
+                                method=request.method,
+                                attempt=attempt,
+                                error=str(e))
+                    await asyncio.sleep(attempt)
+                else:
+                    log.error("Async API call failed after all retries",
+                              url=request.url,
+                              method=request.method,
+                              attempts=request.max_retries,
+                              error=str(e))
+                    raise
+
+
+async def fetch_api_responses(
+        url1: str,
+        method1: str,
+        payload1: Dict,
+        headers1: Dict,
+        url2: str,
+        method2: str,
+        payload2: Dict,
+        headers2: Dict,
+        timeout: int = 30
+) -> Tuple[Tuple[aiohttp.ClientResponse, float], Tuple[aiohttp.ClientResponse, float]]:
+    """Fetch responses from both APIs concurrently"""
+    log.info("Starting API calls",
+             api1={"url": url1, "method": method1},
+             api2={"url": url2, "method": method2})
+
+    # Create request objects
+    request1 = ApiRequest(url1, method1, payload1, headers1, timeout)
+    request2 = ApiRequest(url2, method2, payload2, headers2, timeout)
+
+    # Use semaphore to limit concurrent connections
+    semaphore = asyncio.Semaphore(2)
+
+    try:
+        # Fetch both responses concurrently
+        responses = await asyncio.gather(
+            fetch_api_response(request1, semaphore),
+            fetch_api_response(request2, semaphore)
+        )
+        return responses[0], responses[1]
+
+    except Exception as e:
+        log.error("Error fetching API responses", error=str(e))
+        raise
+
+
+def parse_json_input(input_str: str, label: str) -> Dict:
+    """Parse JSON input, return empty dict for empty strings"""
+    if not input_str.strip():
+        return {}
+    try:
+        return json.loads(input_str)
+    except json.JSONDecodeError as e:
+        raise ValueError(f"{label} is not valid JSON: {str(e)}") from e
+
+
+def validate_urls(*urls: str) -> None:
+    """Validate that URLs are properly formatted and not identical"""
+    url_set = set()
+    for url in urls:
+        try:
+            parsed = urlparse(url)
+            if not all([parsed.scheme, parsed.netloc]):
+                raise ValueError(f"'{url}' is not a valid URL")
+            url_set.add(url)
+        except Exception as e:
+            raise ValueError(f"'{url}' is not a valid URL") from e
+
+    if len(url_set) < len(urls):
+        raise ValueError("API URLs cannot be identical")
+
+
+def validate_json_inputs(*inputs: Tuple[str, str]) -> None:
+    """Validate that all inputs are valid JSON"""
+    for input_str, name in inputs:
+        try:
+            if input_str.strip():  # Only try to parse non-empty strings
+                json.loads(input_str)
+        except json.JSONDecodeError as e:
+            raise ValueError(f"Invalid JSON in {name}: {str(e)}") from e
+
+
+def compare_responses(json1: Any, json2: Any, view: str = 'tree') -> Union[Dict, str]:
+    """Compare two JSON responses and return the differences"""
+    try:
+        diff_result = DeepDiff(json1, json2, ignore_order=True)
+
+        if not diff_result:
+            return {}
+
+        if view == 'tree':
+            # Convert DeepDiff to a plain dict that's JSON serializable
+            diff_dict = {}
+            for change_type, changes in diff_result.items():
+                if isinstance(changes, dict):
+                    diff_dict[change_type] = {}
+                    for path, value in changes.items():
+                        if hasattr(value, '_values'):
+                            diff_dict[change_type][str(path)] = list(value._values)
+                        else:
+                            diff_dict[change_type][str(path)] = str(value)
+                else:
+                    diff_dict[change_type] = str(changes)
+            return diff_dict
+
+        # Convert DeepDiff to readable text format
+        text_diff = []
+        for change_type, changes in diff_result.items():
+            text_diff.append(f"\n{change_type}:")
+            if isinstance(changes, dict):
+                for path, value in changes.items():
+                    text_diff.append(f"  {path}: {value}")
+            else:
+                text_diff.append(f"  {changes}")
+        return "\n".join(text_diff)
+
+    except Exception as e:
+        return {"error": f"Error comparing responses: {str(e)}"}
+
+
+def json_line_diff(json1: Any, json2: Any) -> str:
+    """Generate a line-by-line HTML diff of two JSON objects."""
+    try:
+        # Convert JSON to formatted strings
+        str1 = json.dumps(json1, indent=4, sort_keys=True).splitlines()
+        str2 = json.dumps(json2, indent=4, sort_keys=True).splitlines()
+
+        # Generate diff and convert to HTML
+        diff_lines = []
+        for line in difflib.unified_diff(str1, str2, lineterm=''):
+            if line.startswith('+'):
+                diff_lines.append(f'<span style="color: green;">{html.escape(line)}</span>')
+            elif line.startswith('-'):
+                diff_lines.append(f'<span style="color: red;">{html.escape(line)}</span>')
+            else:
+                diff_lines.append(html.escape(line))
+
+        return '<br>'.join(diff_lines)
+    except Exception as e:
+        return f"Error generating line diff: {str(e)}"
+
+
+def highlight_json_diff(json1: Any, json2: Any) -> Tuple[str, str]:
+    """Highlight differences between two JSON objects and return HTML formatted strings."""
+    try:
+        # Convert both objects to formatted strings
+        str1 = json.dumps(json1, indent=4, sort_keys=True)
+        str2 = json.dumps(json2, indent=4, sort_keys=True)
+
+        # Split into lines
+        lines1 = str1.splitlines()
+        lines2 = str2.splitlines()
+
+        # Get differences
+        diff = difflib.SequenceMatcher(None, lines1, lines2)
+
+        # Format the differences
+        html1 = []
+        html2 = []
+
+        for tag, i1, i2, j1, j2 in diff.get_opcodes():
+            if tag == 'equal':
+                # Add unchanged lines
+                html1.extend(html.escape(line) for line in lines1[i1:i2])
+                html2.extend(html.escape(line) for line in lines2[j1:j2])
+            else:
+                # Add changed lines with highlighting
+                html1.extend(f'<span class="diff-highlight-remove">{html.escape(line)}</span>'
+                             for line in lines1[i1:i2])
+                html2.extend(f'<span class="diff-highlight-add">{html.escape(line)}</span>'
+                             for line in lines2[j1:j2])
+
+        return '\n'.join(html1), '\n'.join(html2)
+    except Exception as e:
+        return str(e), str(e)