Skip to main content

MGraph-AI__Service__Html__Graph

Project description

MGraph AI Service Html Graph

Current Release Python FastAPI AWS Lambda License CI Pipeline - DEV

A powerful service that transforms HTML documents into graph representations for visualization, analysis, and manipulation. Built on the MGraph AI framework.

Overview

HTML Document  ──────►  Graph Representation  ──────►  Visual Output

<html>                     ┌─────────────┐              ┌─────────────┐
  <body>           ──►     │   Nodes     │      ──►     │   DOT       │
    <div>                  │   Edges     │              │   D3        │
  </body>                  │   Clusters  │              │   Cytoscape │
</html>                    └─────────────┘              │   VisJs     │
                                                        │   Mermaid   │
                                                        │   Tree      │
                                                        └─────────────┘

The Html Graph Service converts any HTML into a multi-graph model where different aspects of the document (DOM structure, attributes, scripts, styles) are represented as interconnected graphs that can be visualized using multiple rendering engines.

Features

Feature Description
Multi-Graph Model 5 interconnected graphs: Body, Head, Attributes, Scripts, Styles
6 Rendering Engines DOT (Graphviz), D3, Cytoscape, VisJs, Mermaid, Tree
8 Transformations Default, Attributes View, Full Document, Head, Scripts, Styles, and more
Round-Trip Fidelity HTML → Graph → HTML preserves all structure including boolean attributes
Clustered Views Group subgraphs with colored clusters for full document visualization
REST API FastAPI-based endpoints for programmatic access
AWS Lambda Ready Deployable as serverless function

Quick Start

Installation

pip install mgraph-ai-service-html-graph

Basic Usage

from mgraph_ai_service_html_graph.service.html_graph.Html_Graph__Export__Service import Html_Graph__Export__Service

service = Html_Graph__Export__Service()

html = """
<html>
    <body>
        <div class="container">
            <p>Hello World</p>
        </div>
    </body>
</html>
"""

# Export to DOT format
result = service.export(
    html           = html,
    engine         = 'dot',
    transformation = 'default'
)

print(result['output'])

Running the Server

# Development
uvicorn mgraph_ai_service_html_graph.web.Html_Graph__Web:app --reload

# Production
uvicorn mgraph_ai_service_html_graph.web.Html_Graph__Web:app --host 0.0.0.0 --port 8000

Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│                              Html_MGraph Document                            │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│   ┌─────────────┐   ┌─────────────┐   ┌─────────────────────────────────┐  │
│   │  HEAD GRAPH │   │  BODY GRAPH │   │       ATTRIBUTES GRAPH          │  │
│   │             │   │             │   │                                 │  │
│   │  <head>     │   │  <body>     │   │  element ──► instance ──► name  │  │
│   │    └─title  │   │    └─div    │   │                    └──► value   │  │
│   └─────────────┘   └─────────────┘   └─────────────────────────────────┘  │
│                                                                             │
│   ┌─────────────┐   ┌─────────────┐   ┌─────────────────────────────────┐  │
│   │SCRIPTS GRAPH│   │STYLES GRAPH │   │       DOCUMENT GRAPH            │  │
│   │             │   │             │   │         (Meta View)             │  │
│   │  <script>   │   │  <style>    │   │  Connects all subgraphs         │  │
│   └─────────────┘   └─────────────┘   └─────────────────────────────────┘  │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

API Endpoints

Export HTML to Graph

POST /api/v1/html-graph/export
Content-Type: application/json

{
    "html": "<html><body><div>Hello</div></body></html>",
    "engine": "dot",
    "transformation": "default"
}

List Available Engines

GET /api/v1/html-graph/engines

Returns: ["dot", "d3", "cytoscape", "visjs", "mermaid", "tree"]

List Available Transformations

GET /api/v1/html-graph/transformations

Returns transformation metadata including name, label, and description.

Rendering Engines

Engine Output Best For
DOT Graphviz DOT → SVG Static diagrams, documentation
D3 JSON for D3.js Interactive web visualizations
Cytoscape JSON for Cytoscape.js Complex network analysis
VisJs JSON for vis.js Dynamic, physics-based layouts
Mermaid Mermaid syntax Markdown-embeddable diagrams
Tree JSON tree structure Hierarchical views

Transformations

Transformation Description
default Body DOM structure
attributes-view Tags and their attributes
full-document All 5 subgraphs with colored clusters
head-view Head section structure
scripts-view Script elements and content
styles-view Style elements and CSS

Creating Custom Transformations

from mgraph_ai_service_html_graph.service.html_graph__transformations.Graph_Transformation__Base import Graph_Transformation__Base

class My_Custom_Transformation(Graph_Transformation__Base):

    name        : str = "my-custom"
    label       : str = "My Custom View"
    description : str = "Custom visualization"

    def html_mgraph__to__mgraph(self, html_mgraph):
        # Select which graph to visualize
        return html_mgraph.attrs_graph.mgraph

    def configure_dot(self, config):
        # Customize DOT rendering
        config.rankdir = 'LR'
        return config

The 5-Phase Pipeline

Phase 1              Phase 2              Phase 3              Phase 4              Phase 5
────────             ────────             ────────             ────────             ────────
   │                    │                    │                    │                    │
   ▼                    ▼                    ▼                    ▼                    ▼

┌───────┐          ┌───────────┐        ┌─────────┐        ┌──────────┐        ┌────────┐
│ HTML  │────────► │Html_MGraph│───────►│ MGraph  │───────►│  Engine  │───────►│ Output │
└───────┘          └───────────┘        └─────────┘        └──────────┘        └────────┘

html__to__         html_mgraph__        transform_         configure_*         transform_
html_mgraph()      to__mgraph()         mgraph()           callbacks           export()

Each phase has a transformation hook allowing complete customization of the visualization pipeline.

Development

Setup

git clone https://github.com/the-cyber-boardroom/MGraph-AI__Service__Html__Graph.git
cd MGraph-AI__Service__Html__Graph
poetry install

Running Tests

pytest tests/

Project Structure

mgraph_ai_service_html_graph/
├── service/
│   ├── html_graph/              # Export service
│   ├── html_mgraph/             # Multi-graph HTML model
│   │   ├── converters/          # HTML ↔ MGraph converters
│   │   └── graphs/              # Subgraph implementations
│   ├── html_graph__transformations/  # View transformations
│   └── mgraph__engines/         # Rendering engines
└── web/                         # FastAPI endpoints

Use Cases

  • Web Scraping Analysis - Visualize DOM structure of scraped pages
  • HTML Diff Visualization - Compare documents via graph representations
  • Accessibility Auditing - Analyze attribute patterns for ARIA compliance
  • DOM Manipulation Planning - Visualize before/after transformation states
  • Educational Tool - Teach HTML structure through visual graphs
  • Security Analysis - Analyze script and style injection points

Documentation

License

Apache 2.0 - See LICENSE for details.

Contributing

Contributions welcome! Please read our contributing guidelines and submit pull requests.

Related Projects

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

mgraph_ai_service_html_graph-1.8.0.tar.gz (527.1 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

mgraph_ai_service_html_graph-1.8.0-py3-none-any.whl (813.2 kB view details)

Uploaded Python 3

File details

Details for the file mgraph_ai_service_html_graph-1.8.0.tar.gz.

File metadata

File hashes

Hashes for mgraph_ai_service_html_graph-1.8.0.tar.gz
Algorithm Hash digest
SHA256 b58d460094506e825b947f7cb7c23b8fc5d69d1e6e635d3f6ddbe99aed6ee02c
MD5 95eeb31d290701334a9816c5be10c621
BLAKE2b-256 9e4282bc1e1472e0b0ea187e0c4944de2a91f541b0658fa908e40949acb8cde9

See more details on using hashes here.

File details

Details for the file mgraph_ai_service_html_graph-1.8.0-py3-none-any.whl.

File metadata

File hashes

Hashes for mgraph_ai_service_html_graph-1.8.0-py3-none-any.whl
Algorithm Hash digest
SHA256 bf652668b63f7d4d3f75487f761ae37c5b0d3d9d3c74715128b9636dcfe75351
MD5 7f805643ea4bc58ae95b9ee67ec78b7e
BLAKE2b-256 efd96e972e5cab9615c25f03a2ac744af2bc074d2daca951749883c4731013d9

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page