134 lines
9.1 KiB
Plaintext
134 lines
9.1 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Architectuur Rapport - <%= answers.company_name || 'Mek-Tech Consultancy' %></title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<link rel="stylesheet" href="/css/dynamic.css">
|
|
<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="report-header">
|
|
<div class="report-org">
|
|
<img src="/img/logo.svg" style="height:48px;width:auto;margin-bottom:.25rem" alt="Mek-Tech">
|
|
<h1>Mek-Tech</h1>
|
|
<p>AI Consultancy & Forward Engineering</p>
|
|
</div>
|
|
<div class="report-title-block">
|
|
<h2>Datacenter & AI Architectuur Rapport</h2>
|
|
<p class="report-client">Opgesteld voor: <strong><%= answers.company_name %></strong></p>
|
|
<p class="report-date"><%= new Date().toLocaleDateString('nl-NL', { year: 'numeric', month: 'long', day: 'numeric' }) %></p>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="section">
|
|
<h3 class="section-title">1. Huidige Situatie Analyse</h3>
|
|
<div class="card">
|
|
<table class="info-table">
|
|
<tr><td><strong>Bedrijf</strong></td><td><%= answers.company_name %></td></tr>
|
|
<tr><td><strong>Sector</strong></td><td><%= answers.industry %></td></tr>
|
|
<tr><td><strong>Servers</strong></td><td><%= answers.servers || 'Niet gespecificeerd' %></td></tr>
|
|
<tr><td><strong>Opslag</strong></td><td><%= answers.storage || 'Niet gespecificeerd' %></td></tr>
|
|
<tr><td><strong>Virtualisatie</strong></td><td><%= answers.virtualization || 'Niet gespecificeerd' %></td></tr>
|
|
<tr><td><strong>Data volume</strong></td><td><%= answers.data_volume || 'Niet gespecificeerd' %></td></tr>
|
|
<tr><td><strong>AI doelen</strong></td><td><%= answers.ai_goals || 'Niet gespecificeerd' %></td></tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3 class="section-title">2. Voorgestelde Architecture</h3>
|
|
<div class="diagram">
|
|
<pre class="ascii-diagram">
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ DATA LAKEHOUSE ARCHITECTUUR │
|
|
├─────────────────────────────────────────────────────────────────┤
|
|
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
|
|
│ │ Bronnen │ │ Ingest │ │ Opslag │ │ Compute │ │
|
|
│ │ │ │ │ │ │ │ │ │
|
|
│ │• OLTP │ │• Kafka │ │• MinIO │ │• Spark │ │
|
|
│ │• API's │──│• Flink │──│• Iceberg │──│• Trino │ │
|
|
│ │• Streaming│ │• Airbyte │ │• Hive │ │• Flink │ │
|
|
│ │• IoT │ │• CDC │ │• S3/ADLS │ │• Dremio │ │
|
|
│ └───────────┘ └───────────┘ └───────────┘ └───────────┘ │
|
|
│ │ │
|
|
│ ┌──────────────────────────────────┴──────────────────────┐ │
|
|
│ │ AI/ML LAAG │ │
|
|
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐ │ │
|
|
│ │ │ Ollama/ │ │ vLLM/ │ │ MLflow/ │ │ Kubeflow│ │ │
|
|
│ │ │ Lama.cpp │ │ SGLang │ │ Evidently│ │ │ │ │
|
|
│ │ └──────────┘ └──────────┘ └──────────┘ └─────────┘ │ │
|
|
│ └──────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌──────────────────────────────────────────────────────────┐ │
|
|
│ │ DATACENTER INFRASTRUCTUUR │ │
|
|
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐ │ │
|
|
│ │ │ K8s/ │ │ Leaf- │ │ Zero │ │ Observa-│ │ │
|
|
│ │ │ Proxmox │ │ Spine │ │ Trust │ │ bility │ │ │
|
|
│ │ │ Cluster │ │ 100GbE │ │ Network │ │ Stack │ │ │
|
|
│ │ └──────────┘ └──────────┘ └──────────┘ └─────────┘ │ │
|
|
│ └──────────────────────────────────────────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────┘
|
|
</pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3 class="section-title">3. Data Lakehouse Ontwerp (<%= report.architecture.datalake.tier %> Tier)</h3>
|
|
<div class="card-grid">
|
|
<div class="card"><strong>Opslag</strong><br><%= report.architecture.datalake.storage %></div>
|
|
<div class="card"><strong>Compute</strong><br><%= report.architecture.datalake.compute %></div>
|
|
<div class="card"><strong>Catalogus</strong><br><%= report.architecture.datalake.catalog %></div>
|
|
<div class="card"><strong>Processing</strong><br><%= report.architecture.datalake.processing %></div>
|
|
<div class="card"><strong>Governance</strong><br><%= report.architecture.datalake.governance %></div>
|
|
<div class="card"><strong>Tier</strong><br><span class="badge <%= report.architecture.datalake.tier %>"><%= report.architecture.datalake.tier %></span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3 class="section-title">4. AI Backend (<%= report.architecture.ai.tier %> Tier)</h3>
|
|
<div class="card-grid">
|
|
<div class="card"><strong>Model Serving</strong><br><%= report.architecture.ai.serving %></div>
|
|
<div class="card"><strong>Orchestratie</strong><br><%= report.architecture.ai.orchestration %></div>
|
|
<div class="card"><strong>Monitoring</strong><br><%= report.architecture.ai.monitoring %></div>
|
|
<div class="card"><strong>Modellen</strong><br><%= report.architecture.ai.models %></div>
|
|
<div class="card"><strong>Tier</strong><br><span class="badge <%= report.architecture.ai.tier %>"><%= report.architecture.ai.tier %></span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3 class="section-title">5. Implementatie Roadmap</h3>
|
|
<% report.phases.forEach(function(phase) { %>
|
|
<div class="phase">
|
|
<h4><%= phase.name %></h4>
|
|
<ul>
|
|
<% phase.items.forEach(function(item) { %>
|
|
<li><%= item %></li>
|
|
<% }) %>
|
|
</ul>
|
|
</div>
|
|
<% }) %>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3 class="section-title">6. Aanbevolen Tech Stack</h3>
|
|
<div class="tech-stack">
|
|
<div class="tech-item"><span class="tech-label">Virtualisatie</span><span class="tech-val"><%= report.architecture.infrastructure.virtualization %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Netwerk</span><span class="tech-val"><%= report.architecture.infrastructure.network %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Security</span><span class="tech-val"><%= report.architecture.infrastructure.security %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Monitoring</span><span class="tech-val"><%= report.architecture.infrastructure.monitoring %></span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="report-footer">
|
|
<p>Gegenereerd door <strong>Mek-Tech AI Consultancy Framework</strong> © <%= new Date().getFullYear() %></p>
|
|
<p>Dit rapport is vertrouwelijk en uitsluitend bestemd voor <%= answers.company_name %>.</p>
|
|
<button class="btn btn-primary" onclick="window.print()">Download PDF</button>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|