Non-Production Gradio Demo

Relevant source files

The following files were used as context for generating this wiki page:

• app.py
• DOCKER.md
• ARCHITECTURE.md
• AGENTS.md
• UI_COMPARISON.md
• AI_RULES.md

The Non-Production Gradio Demo provides an interactive web interface for visualizing complex asset relationship graphs and exploring the system's schema. This component, primarily defined in app.py, serves as a platform for internal testing, rapid prototyping, and data science demonstrations. It allows developers to interact with the core graph logic directly through Python without the overhead of the production REST API.
Sources: AGENTS.md:14-15, UI_COMPARISON.md:6-12, AI_RULES.md:12-13

System Architecture

The Gradio application operates as a standalone entry point that interfaces directly with the core business logic layer. Unlike the Production Architecture, the Gradio UI bypasses the FastAPI backend. It executes function calls directly against the AssetRelationshipGraph and visualization modules.

Component Interaction Flow

The following diagram illustrates how user actions in the Gradio interface trigger direct execution of the core logic.

The diagram shows the direct coupling between the Gradio UI and the core logic layer, where app.py handles event triggers and displays returned Plotly figures.
Sources: ARCHITECTURE.md:20-50, ARCHITECTURE.md:83-98

Execution Logic

When a user interacts with the Gradio interface (e.g., clicking "Refresh Visualization"), the application performs the following steps:

1. The Gradio event handler in app.py triggers a specific visualization function.
2. The system makes a direct function call to AssetRelationshipGraph.
3. The graph engine calculates node positions and relationship strengths.
4. The system generates a Plotly Figure object and returns it to the Gradio interface for rendering.
   Sources: ARCHITECTURE.md:83-98

Features and Capabilities

The Gradio UI includes several tabs designed for specific analysis tasks. While the production Next.js UI focuses on user experience, the Gradio demo includes developer-centric features like schema reporting.

Feature	Description	Availability
3D Network Visualization	Interactive 3D graph using Plotly for nodes and edges.	Available
Metrics Dashboard	Displays network statistics and asset distributions.	Available
Asset Explorer	Basic table for exploring asset properties.	Available
Schema Report	Detailed text report of the graph schema and rules.	Gradio-Only
Documentation Tab	Integrated project documentation viewer.	Gradio-Only
Formulaic Analysis	Analysis of mathematical relationships between assets.	Gradio-Only

Sources: UI_COMPARISON.md:50-70, ARCHITECTURE.md:20-30

Setup and Deployment

The Gradio application is hosted by default on port 7860. It is intended for local execution or containerized demo environments.

Local Execution

To run the Gradio demo locally, ensure the Python virtual environment is active and dependencies from requirements.txt are installed.

python app.py

Sources: AGENTS.md:100-104, UI_COMPARISON.md:80-85

Docker Configuration

The demo can be deployed using Docker or Docker Compose. The docker-compose.yml file is configured to start the app.py entry point.

# Build and start the Gradio demo
docker-compose up --build

# Access at http://localhost:7860

Sources: DOCKER.md:15-20, DOCKER.md:5-10

Configuration Parameters

Configuration is managed through environment variables, which the DOCKER.md guide outlines:

• GRADIO_SERVER_NAME: Defaults to 0.0.0.0 for containerized environments.
• GRADIO_SERVER_PORT: Defaults to 7860.
• DATABASE_URL: Connection string for the asset database (e.g., PostgreSQL or SQLite).
  Sources: DOCKER.md:53-58, DOCKER.md:5-10

Usage Guidelines

As a non-production tool, the Gradio UI is subject to specific development mandates:

• Modularity: UI components should remain small (under 100 lines) to ensure maintainability.
• Visualization Standard: Plotly is the mandatory library for all graphical representations to ensure consistency across UIs.
• Output Formatting: Complex data structures displayed in the Gradio UI must use JSON for clarity.
• Internal Only: This interface is not recommended for production deployments due to limited scalability and security features compared to the FastAPI/Next.js stack.
  Sources: AI_RULES.md:30-40, AI_RULES.md:80-85, AGENTS.md:14-17, UI_COMPARISON.md:210-220

Summary

The Non-Production Gradio Demo is a vital tool for the project's internal development lifecycle. It enables rapid iteration on graph algorithms and provides immediate visual feedback on relationship logic changes. While the project prioritizes the FastAPI and Next.js stack for production, Gradio remains the primary environment for data scientists and developers to perform deep-dive analysis and schema validation.
Sources: UI_COMPARISON.md:225-235, ARCHITECTURE.md:10-15