flowchart.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project MetaVal Ingestion Flowchart</title>
<style>
    body {
        background-color: #0F172A;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 20px;
        color: #F8FAFC;
    }
    .flowchart-container {
        background: #1E293B;
        border: 2px solid #334155;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        max-width: 900px;
        width: 100%;
    }
    .header {
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 2px solid #334155;
        padding-bottom: 15px;
    }
    .header h1 {
        margin: 0;
        font-size: 24px;
        color: #F8FAFC;
        letter-spacing: 0.5px;
    }
    .header p {
        margin: 5px 0 0 0;
        color: #10B981;
        font-size: 14px;
        font-weight: 600;
    }
    svg {
        width: 100%;
        height: auto;
    }
    .node rect {
        fill: #1E293B;
        stroke: #94A3B8;
        stroke-width: 1.5;
        rx: 6;
        ry: 6;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .node:hover rect {
        fill: #334155;
        stroke: #10B981;
        filter: drop-shadow(0px 0px 8px rgba(16, 185, 129, 0.6));
    }
    .node-success rect {
        stroke: #10B981;
    }
    .node-warning rect {
        stroke: #F59E0B;
    }
    .node-warning:hover rect {
        stroke: #F59E0B;
        filter: drop-shadow(0px 0px 8px rgba(245, 158, 11, 0.6));
    }
    .text-num {
        font-size: 10px;
        fill: #10B981;
        font-weight: bold;
    }
    .text-num-warn {
        fill: #F59E0B;
    }
    .text-title {
        font-size: 12px;
        fill: #F8FAFC;
        font-weight: 600;
    }
    .text-desc {
        font-size: 10px;
        fill: #94A3B8;
    }
    .edge {
        stroke: #64748B;
        stroke-width: 2;
        fill: none;
        marker-end: url(#arrow);
    }
    .edge-glow {
        stroke: #10B981;
    }
    .edge-warn {
        stroke: #F59E0B;
        marker-end: url(#arrow-warn);
    }
    .download-btn {
        margin-top: 25px;
        background-color: #10B981;
        color: #0F172A;
        border: none;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .download-btn:hover {
        background-color: #059669;
    }
    .tooltip {
        position: absolute;
        background: #0F172A;
        border: 1px solid #10B981;
        padding: 10px;
        border-radius: 6px;
        font-size: 11px;
        color: #94A3B8;
        max-width: 250px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
</style>
</head>
<body>

<div class="flowchart-container" id="flowchart">
    <div class="header">
        <h1>PROJECT METAVAL</h1>
        <p>Data Extraction & Supply Chain Traceability Pipeline</p>
    </div>

    <svg viewBox="0 0 800 680" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                <path d="M 0 1 L 10 5 L 0 9 z" fill="#64748B" />
            </marker>
            <marker id="arrow-success" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                <path d="M 0 1 L 10 5 L 0 9 z" fill="#10B981" />
            </marker>
            <marker id="arrow-warn" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                <path d="M 0 1 L 10 5 L 0 9 z" fill="#F59E0B" />
            </marker>
        </defs>

        <g class="node" data-tip="Ingestion Module: Actively watches supplier emails via scrapers or accepts manual uploads via React UI.">
            <rect x="250" y="20" width="300" height="60" />
            <text x="265" y="38" class="text-num">01. INBOUND INGESTION</text>
            <text x="265" y="54" class="text-title">Supplier Emails or Dashboard Uploads</text>
        </g>

        <path d="M 400 80 L 400 110" class="edge" style="marker-end: url(#arrow);" />

        <g class="node node-success" data-tip="Worker Queue: Uses BullMQ and Redis to isolate file management. Safely loops massive 500-page files without causing API dropouts.">
            <rect x="250" y="110" width="300" height="60" />
            <text x="265" y="128" class="text-num">02. TRAFFIC GUARD</text>
            <text x="265" y="144" class="text-title">Asynchronous Background Queue</text>
        </g>

        <path d="M 400 170 L 400 200" class="edge" />

        <g class="node" data-tip="Extraction Router: Looks for digital text layers. If missing, automatically initiates visual page chunking.">
            <rect x="250" y="200" width="300" height="60" />
            <text x="265" y="218" class="text-num">03. INTELLIGENT ROUTER</text>
            <text x="265" y="234" class="text-title">Text Layer Detection Engine</text>
        </g>

        <path d="M 250 230 L 140 230 L 140 280" class="edge" />
        <path d="M 550 230 L 660 230 L 660 280" class="edge" />

        <g class="node" data-tip="Digital Extract: Light and fast characters scraping utilizing pdf-parse hooks.">
            <rect x="20" y="280" width="240" height="60" />
            <text x="35" y="298" class="text-num">PATH A</text>
            <text x="35" y="314" class="text-title">Direct Digital Extraction (pdf-parse)</text>
        </g>

        <g class="node node-warning" data-tip="OCR Extraction: Converts flat unsearchable pages into pictures via pdf-poppler, then reads them with tesseract.js.">
            <rect x="540" y="280" width="240" height="60" />
            <text x="555" y="298" class="text-num text-num-warn">PATH B</text>
            <text x="555" y="314" class="text-title">Optical Scan Matrix (Tesseract OCR)</text>
        </g>

        <path d="M 140 340 L 140 390 L 250 390" class="edge" />
        <path d="M 660 340 L 660 390 L 550 390" class="edge" />

        <g class="node" data-tip="Table Builder: Reads pixel boundary dimensions via pdf2json to accurately rebuild underlying cell data rows.">
            <rect x="250" y="360" width="300" height="60" />
            <text x="265" y="378" class="text-num">04. GRID MATRIX BUILDER</text>
            <text x="265" y="394" class="text-title">Reconstruct Table Cell Coordinates</text>
        </g>

        <path d="M 400 420 L 400 450" class="edge" />

        <g class="node node-success" data-tip="Fuzzy Matcher: Employs fuse.js to automatically equate supplier syntax typos directly to enterprise target headers.">
            <rect x="250" y="450" width="300" height="60" />
            <text x="265" y="468" class="text-num">05. FUZZY TRANSLATION LAYER</text>
            <text x="265" y="484" class="text-title">Align Supplier Layout Variations</text>
        </g>

        <path d="M 250 480 L 140 480 L 140 530" class="edge" style="marker-end: url(#arrow-success); stroke: #10B981;" />
        <path d="M 550 480 L 660 480 L 660 530" class="edge" style="marker-end: url(#arrow-warn); stroke: #F59E0B;" />

        <g class="node node-success" data-tip="Verified State: Clear match score. Commits normalized data records safely into Postgres JSONB columns.">
            <rect x="20" y="530" width="240" height="60" />
            <text x="35" y="548" class="text-num">CONFIDENCE HIGH</text>
            <text x="35" y="564" class="text-title">Status: VALIDATED (ERP Synced)</text>
        </g>

        <g class="node node-warning" data-tip="Review Triggered: Missing or unknown keys. Halts automated parsing and opens an interactive operator dropdown panel.">
            <rect x="540" y="530" width="240" height="60" />
            <text x="555" y="548" class="text-num text-num-warn">CONFIDENCE LOW</text>
            <text x="555" y="564" class="text-title">Status: NEEDS_REVIEW (Flagged)</text>
        </g>

        <path d="M 540 560 L 260 560" class="edge-warn" style="stroke-dasharray: 4;" />

        <path d="M 140 590 L 140 620" class="edge" style="marker-end: url(#arrow-success); stroke: #10B981;" />

        <g class="node node-success" data-tip="Excel Output: Directly compiles pristine, audit-ready .xlsx files on-the-fly via exceljs.">
            <rect x="20" y="620" width="240" height="50" />
            <text x="35" y="638" class="text-num">06. COMPLIANT EXPORT</text>
            <text x="35" y="652" class="text-title">One-Click Excel Download (.xlsx)</text>
        </g>
    </svg>
</div>

<button class="download-btn" onclick="downloadSVG()">
    <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right:5px;">
        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
        <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
    </svg>
    Download Vector Flowchart (SVG)
</button>

<div class="tooltip" id="tooltip"></div>

<script>
    const tooltip = document.getElementById('tooltip');
    document.querySelectorAll('.node').forEach(node => {
        node.addEventListener('mouseover', (e) => {
            tooltip.textContent = node.getAttribute('data-tip');
            tooltip.style.opacity = '1';
        });
        node.addEventListener('mousemove', (e) => {
            tooltip.style.left = (e.pageX + 15) + 'px';
            tooltip.style.top = (e.pageY + 15) + 'px';
        });
        node.addEventListener('mouseout', () => {
            tooltip.style.opacity = '0';
        });
    });

    function downloadSVG() {
        const svgElement = document.querySelector('svg').cloneNode(true);
        const styleElement = document.createElement('style');
        styleElement.textContent = `
            rect { fill: #1E293B; stroke: #94A3B8; stroke-width: 1.5; rx: 6; ry: 6; }
            .node-success rect { stroke: #10B981; }
            .node-warning rect { stroke: #F59E0B; }
            .text-num { font-size: 10px; fill: #10B981; font-weight: bold; font-family: sans-serif; }
            .text-num-warn { fill: #F59E0B; }
            .text-title { font-size: 12px; fill: #F8FAFC; font-weight: 600; font-family: sans-serif; }
            .text-desc { font-size: 10px; fill: #94A3B8; font-family: sans-serif; }
            .edge { stroke: #64748B; stroke-width: 2; fill: none; }
            .edge-warn { stroke: #F59E0B; stroke-width: 2; fill: none; stroke-dasharray: 4; }
        `;
        svgElement.insertBefore(styleElement, svgElement.firstChild);
        
        const svgString = new XMLSerializer().serializeToString(svgElement);
        const blob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
        const URL = window.URL || window.webkitURL || window;
        const blobURL = URL.createObjectURL(blob);
        
        const downloadLink = document.createElement('a');
        downloadLink.href = blobURL;
        downloadLink.download = 'Project_MetaVal_Flowchart.svg';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    }
</script>

</body>
</html>