ODS Dashboard Frontend and Backend Technologies: Complete Stack Breakdown

The ODS dashboard utilizes a React 18 frontend built with Vite and Tailwind CSS paired with a Python FastAPI backend running on Uvicorn, enabling a modern, responsive interface for AI deployment management.

The ODS (Open-Source AI Deployment Stack) dashboard provides a browser-based control plane for managing AI models, GPU resources, and system extensions. Understanding the complete technology stack behind both the frontend user interface and backend API services—as implemented in the Osmantic/ODS repository—helps developers customize deployments and troubleshoot integration issues.

Frontend Architecture: React 18 and Modern Tooling

The frontend layer lives under ods/extensions/services/dashboard/ and delivers a single-page application using contemporary React patterns.

Core Framework and Build Pipeline

React 18 powers the component architecture, rendered via React-DOM 18. The build pipeline relies on Vite 7 for rapid development and optimized production bundles. React-Router-DOM 6 handles client-side navigation, while ESLint 9 enforces code quality and Vitest 4 runs unit and integration tests.

Styling and User Experience

The interface uses Tailwind CSS 3 for utility-first styling, ensuring responsive layouts without custom CSS proliferation. Iconography comes from Lucide-React, markdown rendering via React-Markdown, and complex animations leverage GSAP.

Backend Architecture: FastAPI and Python 3

The backend service resides in ods/extensions/services/dashboard-api/ and exposes HTTP endpoints that power the dashboard UI.

API Framework and Server

FastAPI provides the REST API framework, utilizing Python type hints and Pydantic for request/response validation. Uvicorn serves as the ASGI server handling asynchronous request processing. HTTPX manages async HTTP client calls to external services, while PyYAML parses deployment manifests.

Configuration and Utilities

Environment management uses Python-Dotenv, and GPU detection logic integrates with the FastAPI dependency injection system. The backend handles model management, authentication, and extension coordination through modular routers defined in ods/extensions/services/dashboard-api/routers/.

Frontend-Backend Communication

The two layers communicate over HTTP, with the frontend making fetch requests to localhost endpoints served by the FastAPI backend.

API Integration Example

The frontend calls /api/system/status to retrieve GPU and model information. In ods/extensions/services/dashboard/src/components/, components use standard fetch patterns to consume these endpoints:

import { useEffect, useState } from "react";

export default function SystemStatus() {
  const [status, setStatus] = useState(null);

  useEffect(() => {
    fetch("/api/system/status")
      .then((r) => r.json())
      .then(setStatus)
      .catch(() => setStatus({ error: "Unable to load status" }));
  }, []);

  if (!status) return <div>Loading…</div>;
  if (status.error) return <div>{status.error}</div>;

  return (
    <div className="p-4 bg-gray-100 rounded">
      <h2 className="text-xl font-bold">System Status</h2>
      <p>GPU: {status.gpu?.name ?? "none"}</p>
      <p>Models loaded: {status.models?.length ?? 0}</p>
    </div>
  );
}

The corresponding backend route in ods/extensions/services/dashboard-api/routers/usage.py defines the endpoint using FastAPI's declarative syntax:

from fastapi import APIRouter
from pydantic import BaseModel
from typing import List, Optional

router = APIRouter()


class GPUInfo(BaseModel):
    name: str
    memory_total: int
    memory_used: int


class SystemStatus(BaseModel):
    gpu: Optional[GPUInfo] = None
    models: List[str] = []


@router.get("/system/status", response_model=SystemStatus)
async def get_system_status() -> SystemStatus:
    # (real implementation pulls from ODS config & Docker compose)

    return SystemStatus(
        gpu=GPUInfo(name="NVIDIA RTX 4090", memory_total=24576, memory_used=1234),
        models=["llama-7b", "stable-diffusion-v1.5"],
    )

Key Source Files and Directory Structure

Understanding the repository layout clarifies where specific technologies are implemented:

• ods/extensions/services/dashboard/package.json – Declares React 18, Vite 7, Tailwind CSS 3, and testing dependencies.
• ods/extensions/services/dashboard/vite.config.js – Configures the Vite build system for React module resolution.
• ods/extensions/services/dashboard/src/App.jsx – Root React component initializing routing and global layout.
• ods/extensions/services/dashboard/src/components/Sidebar.jsx – Navigation component demonstrating Tailwind CSS implementation.
• ods/extensions/services/dashboard-api/main.py – Entry point starting the Uvicorn server and mounting FastAPI routers.
• ods/extensions/services/dashboard-api/routers/usage.py – Contains system-wide endpoints including the /api/system/status route.
• ods/extensions/services/dashboard-api/settings.py – Centralized Pydantic-based configuration for environment variables and paths.

Summary

• React 18 + Vite 7 power the frontend build system in ods/extensions/services/dashboard/, utilizing Tailwind CSS 3 for styling.
• FastAPI + Uvicorn drive the backend API in ods/extensions/services/dashboard-api/, with Pydantic handling data validation.
• The frontend communicates with the backend via standard HTTP fetch requests to REST endpoints exposed by FastAPI routers.
• Key configuration and routing logic reside in specific files like main.py, App.jsx, and routers/usage.py, following a clear directory separation between frontend and backend concerns.

Frequently Asked Questions

What frontend framework does the ODS dashboard use?

The ODS dashboard uses React 18 as its primary frontend framework, bundled with Vite 7 for development and production builds. This combination provides fast hot-module replacement and optimized bundle sizes for the single-page application.

Which Python technologies power the ODS dashboard backend?

The backend relies on FastAPI for the web framework, Pydantic for data validation, and Uvicorn as the ASGI server. HTTPX handles asynchronous HTTP requests, while PyYAML parses configuration manifests.

How do the frontend and backend communicate?

The React frontend makes standard HTTP fetch requests to the FastAPI backend endpoints, typically served on localhost. The backend exposes REST routes—such as /api/system/status—that return JSON data consumed by React components.

Where are the dashboard source files located in the repository?

Frontend source code resides in ods/extensions/services/dashboard/, containing React components and Vite configuration. Backend source code lives in ods/extensions/services/dashboard-api/, containing FastAPI routers, Pydantic models, and server initialization logic.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}