Automated Knowledge-Graph Generator on Civo

Discover how to turn unstructured text into a visual, searchable knowledge graph using GPU-powered Kubernetes. Before we dive into code, it’s important to understand why knowledge graphs matter and why companies are investing in building them.

Over 80% of most modern information is unstructured: emails, documents, reports, support tickets, research papers, logs, transcripts, you name it. Hidden inside that text are entities (people, places, companies, technologies) and the relationships between them. Knowledge graphs are the simplest way to reveal this structure. They turn messy text into a connected map that’s easy to search, analyze, and visualize.

This is exactly why large-scale tech platforms and data-driven organizations rely on knowledge graphs for search, recommendations, fraud detection, cybersecurity, and regulatory compliance. They make relationships computable. They turn ambiguity into clarity. They help people and systems answer questions faster.

The problem is: building them usually requires complex pipelines, heavyweight NLP frameworks, or expensive enterprise tools.

This tutorial will show you how to build a lightweight, end-to-end pipeline with no heavy infrastructure, no specialized machine learning background, just a small FastAPI backend, a simple JavaScript frontend, and a GPU node doing all the AI lifting.

By the end, you’ll have a practical, working example of how AI can transform raw text into structured insight, a foundational pattern for search engines, analytics tools, recommendation systems, research assistants, and more.

Prerequisites

Civo account with GPU access
Docker installed locally
Python installed
relaxAI API key from the relaxAI dashboard
kubectl installed

Project overview

What this project builds

In this tutorial, you’ll create a simple system that turns text into a visual knowledge graph. It’s designed to be easy to understand, even if you’ve never worked with AI pipelines before.

Pipeline flow

Here’s how the process works from start to finish:

The user enters text in the frontend (this could be a paragraph, a short article, or any piece of writing)
The backend sends the text to relaxAI (the model analyzes the content and identifies important entities and how they relate)
relaxAI returns a clean JSON structure describing the graph, for example:

1{
2  "nodes": [
3    { "id": "Alice", "type": "Person" },
4    { "id": "ACME Corp", "type": "Organization" }
5  ],
6  "edges": [
7    { "source": "Alice", "target": "ACME Corp", "relation": "works_for" }
8  ]
9}

The frontend visualizes this graph using a lightweight library (tools like D3.js or Cytoscape.js display the nodes and connections in an interactive layout)
The user explores the graph visually (instead of reading dense text, they can quickly see relationships and key information at a glance)

Components you’ll deploy

To make this work, you’ll deploy a small, easy-to-understand setup on Civo:

Backend API Pod: Processes text, calls relaxAI, and returns graph-ready JSON.
Frontend Pod: Renders the interactive graph in the browser.
Unified dockerization step: You’ll build and package both components into container images.
Unified deployment step: Deploy both containers to your Civo Kubernetes cluster.

This keeps the whole project lightweight, approachable, and perfect for beginners exploring AI on Kubernetes.

Project structure

1Civo-knowledge-graph-generator/
2  ├── backend/
3  │   ├── main.py
4  │   ├── requirements.txt
5  │   └── Dockerfile
6  ├── frontend/
7  │   ├── index.html
8  │   └── Dockerfile
9  └── kubernetes/
10      ├── backend-deployment.yaml
11      └── frontend-deployment.yaml

Step 1: Create a GPU-enabled Kubernetes cluster

Log in to the Civo Dashboard
Create a new Kubernetes cluster
Add a GPU node pool (one node is sufficient for this demo)
Download your kubeconfig
Connect to the cluster by running set KUBECONFIG=path-to-kubeconfig-file in your terminal (use export instead of set on Linux or macOS).

Verify connectivity:

1kubectl get nodes

Even though this tutorial uses small inputs, the cluster is GPU-enabled, so the same setup scales naturally to heavier inference workloads without architectural changes.

Step 2: Build the backend (entity/relationship extractor)

The backend is a small FastAPI service that runs on your Civo cluster and does one job: take raw text, send it to relaxAI, and return a clean JSON representation of the entities and relationships it finds. Instead of dealing with messy model output, your frontend gets a predictable structure with nodes and edges that is ready to render as a graph.

At a high level, the backend exposes a single /graphify endpoint. When the user submits text from the UI, this endpoint builds a carefully structured prompt and sends it to relaxAI’s chat completions API running on Civo. The model responds with a description of the entities (like people, organizations, locations) and how they connect. The backend always returns data in the same JSON structure described earlier (a list of nodes and a list of edges).

Here’s a simple visual representation of that schema:

Behind the scenes, the code adds a few important safety rails. The relaxAI prompt strongly enforces “JSON-only” output, so the model does not mix explanations with data. The backend then cleans up common formatting issues (like markdown code fences) and tries to parse the response as strict JSON.

If the model still returns something slightly off, the code applies a small “repair” step to handle minor issues such as missing brackets or trailing commas, then validates the result into Pydantic models for Node and Edge.

The service also includes:

A /health endpoint so Kubernetes can run liveness/readiness probes
CORS configuration so the browser-based frontend can call the API
Environment-variable configuration for your relaxAI API key and endpoint, so nothing sensitive is hardcoded

With those pieces in place, the full backend comes together as a single FastAPI application. It wires up the models, the relaxAI call, the JSON-repair logic, and the supporting endpoints into one self-contained file.

Below is the complete main.py implementation that you’ll deploy on your Civo cluster.

main.py

Import necessary libraries:

1import os
2import json
3import httpx
4from fastapi import FastAPI, HTTPException
5from fastapi.middleware.cors import CORSMiddleware
6from pydantic import BaseModel

Environment variables:

1RELAXAI_API_KEY = os.getenv("RELAXAI_API_KEY")
2RELAXAI_API_URL = os.getenv(
3    "RELAXAI_API_URL",
4    "https://api.relax.ai/v1/chat/completions"
5)
6
7
8if not RELAXAI_API_KEY:
9    raise RuntimeError("RELAXAI_API_KEY is missing.")

FastAPI setup:

1app = FastAPI(title="Knowledge Graph Backend (JSON-Safe)")
2
3
4app.add_middleware(
5    CORSMiddleware,
6    allow_origins=["*"],
7    allow_methods=["*"],
8    allow_headers=["*"],
9)

Models setup:

1class GraphifyRequest(BaseModel):
2    text: str
3
4
5class Node(BaseModel):
6    id: str
7    type: str
8
9
10class Edge(BaseModel):
11    source: str
12    target: str
13    relation: str
14
15
16class GraphifyResponse(BaseModel):
17    nodes: list[Node]
18    edges: list[Edge]

Health check:

1@app.get("/health")
2def health():
3    return {"status": "ok"}

Hard JSON-only prompt builder:

1def build_prompt(text: str) -> str:
2    return f"""
3You are an information extraction engine.
4
5
6STRICT REQUIREMENTS:
7- OUTPUT ONLY JSON.
8- NO explanation.
9- NO natural language.
10- NO markdown.
11- NO commentary.
12- NO code fences.
13- If unsure, output an empty list for nodes/edges.
14
15
16Extract entities (as nodes) and relationships (as edges) from the text.
17
18
19VALID JSON FORMAT (follow EXACTLY):
20{{
21  "nodes": [
22    {{"id": "Alice", "type": "Person"}},
23    {{"id": "CompanyX", "type": "Organization"}}
24  ],
25  "edges": [
26    {{"source": "Alice", "target": "CompanyX", "relation": "works_at"}}
27  ]
28}}
29
30
31Text:
32{text}
33"""

This helper function builds the exact prompt sent to relaxAI. It forces the model into a strict “JSON-only” mode by explicitly forbidding explanations, markdown, or natural language. The prompt also provides a concrete example of the expected structure so the model knows exactly how to format its response.

By injecting the user’s text at the bottom, the backend reliably guides relaxAI to return a clean set of nodes and edges every time.

JSON repair helpers:

1def clean_model_output(s: str) -> str:
2    """Remove backticks, code fences, leading junk."""
3    s = s.strip()
4    if s.startswith("```json"):
5        s = s[len("```json"):].strip()
6    if s.startswith("```"):
7        s = s[3:].strip()
8    if s.endswith("```"):
9        s = s[:-3].strip()
10    return s
11
12
13
14
15def try_parse_json_strict(s: str):
16    """Strict JSON parsing."""
17    return json.loads(s)
18
19
20
21
22def try_parse_json_fallback(s: str):
23    """
24    RelaxAI may add trailing commas or missing quotes.
25    We attempt limited cleanup.
26    """
27
28
29    # Remove trailing commas before closing braces/brackets
30    s = s.replace(",}", "}").replace(",]", "]")
31
32
33    # Replace weird quote styles if any (very rare)
34    s = s.replace("“", "\"").replace("”", "\"")
35
36
37    return json.loads(s)

These helper functions make the backend far more resilient to imperfect model output. cleanmodeloutput strips away markdown fences or stray formatting that relaxAI might prepend or append. tryparsejsonstrict attempts a normal JSON parse first, while tryparsejsonfallback performs small, targeted repairs, like removing trailing commas or fixing curly quotes, before trying again. Together, they significantly boost the chances of turning the model’s response into valid, machine-readable JSON without breaking the safety or structure of the graph.

Main endpoint:

1@app.post("/graphify", response_model=GraphifyResponse)
2async def graphify(payload: GraphifyRequest):
3
4
5    if not payload.text.strip():
6        raise HTTPException(status_code=400, detail="Text input cannot be empty.")
7
8
9    prompt = build_prompt(payload.text)
10
11
12    body = {
13        "model": "Llama-4-Maverick-17B-128E",
14        "messages": [
15            {"role": "system", "content": "Return ONLY JSON following the given structure."},
16            {"role": "user", "content": prompt}
17        ],
18        "temperature": 0,
19        "max_tokens": 300
20    }

Call relaxAI:

1try:
2        async with httpx.AsyncClient(timeout=40.0) as client:
3            response = await client.post(
4                RELAXAI_API_URL,
5                json=body,
6                headers={"Authorization": f"Bearer {RELAXAI_API_KEY}"}
7            )
8    except httpx.RequestError as e:
9        raise HTTPException(status_code=503, detail=f"relaxAI unreachable: {str(e)}")
10
11
12    if response.status_code != 200:
13        raise HTTPException(status_code=response.status_code, detail=response.text)
14
15
16    # Extract model content
17    try:
18        content = response.json()["choices"][0]["message"]["content"]
19        content = clean_model_output(content)
20    except Exception as e:
21        raise HTTPException(status_code=500, detail=f"Bad relaxAI response structure: {str(e)}")
22
23
24    # JSON parsing attempts
25    data = None
26
27
28    # 1) TRY STRICT JSON
29    try:
30        data = try_parse_json_strict(content)
31    except Exception:
32        pass
33
34
35    # 2) TRY FALLBACK JSON
36    if data is None:
37        try:
38            data = try_parse_json_fallback(content)
39        except Exception:
40            raise HTTPException(
41                status_code=500,
42                detail=f"Model returned invalid JSON even after cleanup: {content}"
43            )
44
45
46    # Guaranteed safe output
47    nodes = [Node(**n) for n in data.get("nodes", []) if "id" in n and "type" in n]
48    edges = [Edge(**e) for e in data.get("edges", []) if "source" in e and "target" in e]
49
50
51    return GraphifyResponse(nodes=nodes, edges=edges)

Once this backend is in place and containerized, you have a reliable API that turns arbitrary text into a graph-ready JSON payload. In the next step, the frontend will use this endpoint to fetch nodes and edges from Civo and draw them as an interactive knowledge graph in the browser.

Step 3: Build the frontend (graph visualizer)

With the backend doing the heavy lifting, the frontend’s job is simple: take the model’s extracted entities and relationships and turn them into an interactive graph. This is where everything becomes visual. Instead of staring at raw JSON, users can actually see how concepts connect.

The frontend is kept intentionally lightweight. No frameworks, no bundlers, no build process, just a single index.html using Cytoscape.js, a tiny helper script, and a hard-coded API endpoint. That’s enough to render a smooth, responsive knowledge graph inside the browser.

Here’s the basic flow:

The user types text into a textbox.
The frontend sends that text to the backend’s /graphify endpoint.
The backend returns JSON containing nodes and edges.
Cytoscape.js renders that into a full graph layout.
Users can pan, zoom, hover, and explore the structure as a real network.

Even though the UI is minimal, Cytoscape gives the frontend a surprising amount of polish. You get physics-based layout, smooth animations, styled nodes, and edges that automatically reposition themselves as the graph grows. The result feels far bigger than the tiny amount of code powering it.

If you want to improve things later, custom node icons, color-coded relationships, graph filtering, dark mode, etc., all of that can be added on top of this foundation. But the core here is deliberately small for demonstration purposes.

Index.html

1&lt;!DOCTYPE html&gt;
2&lt;html lang="en"&gt;
3&lt;head&gt;
4    &lt;meta charset="UTF-8" /&gt;
5    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
6    &lt;title&gt;Knowledge Graph Generator&lt;/title&gt;
7
8    &lt;!-- Cytoscape.js for graph visualization --&gt;
9    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"&gt;&lt;/script&gt;
10
11    &lt;style&gt;
12        * { box-sizing: border-box; margin: 0; padding: 0; }
13
14        body {
15            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
16            background: linear-gradient(135deg, #1a1a2e, #16213e);
17            min-height: 100vh;
18            color: #e0e0e0;
19        }
20
21        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
22        header { text-align: center; padding: 30px 0; }
23
24        h1 {
25            font-size: 2.5rem;
26            background: linear-gradient(90deg, #00d4ff, #7b2cbf);
27            -webkit-background-clip: text;
28            -webkit-text-fill-color: transparent;
29            margin-bottom: 10px;
30        }
31
32        .subtitle { color: #888; font-size: 1.1rem; }
33
34        .main-content {
35            display: grid;
36            grid-template-columns: 1fr 2fr;
37            gap: 20px;
38            margin-top: 20px;
39        }
40
41        .input-panel,
42        .graph-panel {
43            background: rgba(255,255,255,0.05);
44            border: 1px solid rgba(255,255,255,0.1);
45            border-radius: 16px;
46            padding: 24px;
47        }
48
49        textarea {
50            width: 100%;
51            height: 300px;
52            background: rgba(0,0,0,0.3);
53            border: 1px solid rgba(255,255,255,0.2);
54            border-radius: 8px;
55            padding: 16px;
56            color: #e0e0e0;
57            font-size: 1rem;
58            resize: vertical;
59        }
60
61        button {
62            width: 100%;
63            padding: 14px 28px;
64            margin-top: 16px;
65            background: linear-gradient(90deg,#00d4ff,#7b2cbf);
66            border: none;
67            border-radius: 8px;
68            color: white;
69            font-size: 1rem;
70            font-weight: 600;
71            cursor: pointer;
72        }
73
74        #graph-container {
75            flex: 1;
76            min-height: 500px;
77            background: rgba(0,0,0,0.3);
78            border: 1px solid rgba(255,255,255,0.1);
79            border-radius: 8px;
80        }
81
82        .legend { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
83        .legend-item { display: flex; align-items: center; gap: 8px; }
84        .legend-dot { width: 12px; height: 12px; border-radius: 50%; }
85        .person { background: #00d4ff; }
86        .organization { background: #7b2cbf; }
87        .location { background: #00c853; }
88        .event { background: #ff9100; }
89
90        .status-message { margin-top: 16px; padding: 12px; border-radius: 8px; font-size: 0.9rem; }
91        .error { background: rgba(255,82,82,0.2); color: #ff8a80; border: 1px solid rgba(255,82,82,0.4); }
92        .success { background: rgba(0,200,83,0.2); color: #69f0ae; border: 1px solid rgba(0,200,83,0.4); }
93        .loading { background: rgba(0,212,255,0.2); color: #80d8ff; border: 1px solid rgba(0,212,255,0.4); }
94
95        @media (max-width: 900px) {
96            .main-content { grid-template-columns: 1fr; }
97            #graph-container { min-height: 400px; }
98        }
99    &lt;/style&gt;
100&lt;/head&gt;
101
102&lt;body&gt;
103    &lt;div class="container"&gt;
104        &lt;header&gt;
105            &lt;h1&gt;Knowledge Graph Generator&lt;/h1&gt;
106            &lt;p class="subtitle"&gt;Transform text into interactive knowledge graphs using AI&lt;/p&gt;
107        &lt;/header&gt;
108
109        &lt;div class="main-content"&gt;
110            &lt;div class="input-panel"&gt;
111                &lt;h2&gt;Input Text&lt;/h2&gt;
112                &lt;textarea id="text-input" placeholder="Enter text to analyze..."&gt;&lt;/textarea&gt;
113                &lt;button id="generate-btn"&gt;Generate Knowledge Graph&lt;/button&gt;
114                &lt;div id="status-container"&gt;&lt;/div&gt;
115            &lt;/div&gt;
116
117            &lt;div class="graph-panel"&gt;
118                &lt;h2&gt;Knowledge Graph&lt;/h2&gt;
119                &lt;div id="graph-container"&gt;&lt;/div&gt;
120
121                &lt;div class="legend"&gt;
122                    &lt;div class="legend-item"&gt;&lt;div class="legend-dot person"&gt;&lt;/div&gt;Person&lt;/div&gt;
123                    &lt;div class="legend-item"&gt;&lt;div class="legend-dot organization"&gt;&lt;/div&gt;Organization&lt;/div&gt;
124                    &lt;div class="legend-item"&gt;&lt;div class="legend-dot location"&gt;&lt;/div&gt;Location&lt;/div&gt;
125                    &lt;div class="legend-item"&gt;&lt;div class="legend-dot event"&gt;&lt;/div&gt;Event&lt;/div&gt;
126                &lt;/div&gt;
127
128                &lt;div id="stats" class="stats"&gt;&lt;/div&gt;
129            &lt;/div&gt;
130        &lt;/div&gt;
131    &lt;/div&gt;
132
133&lt;script&gt;
134// ============================================================================
135//  CONFIGURATION
136// ============================================================================
137
138const API_URL = window.API_URL || "http://&lt;BACKEND-EXTERNAL-IP&gt;:8000";
139let cy;
140
141// ============================================================================
142//  GRAPH INITIALIZATION
143// ============================================================================
144
145function initGraph() {
146    cy = cytoscape({
147        container: document.getElementById("graph-container"),
148
149        style: [
150            {
151                selector: "node",
152                style: {
153                    "label": "data(id)",
154                    "width": 50,
155                    "height": 50,
156                    "font-size": "12px",
157                    "color": "#e0e0e0",
158                    "border-width": 3,
159                    "border-color": "#fff",
160                    "text-valign": "bottom",
161                    "text-margin-y": 8
162                }
163            },
164            { selector: 'node[type="Person"]', style: { "background-color": "#00d4ff" } },
165            { selector: 'node[type="Organization"]', style: { "background-color": "#7b2cbf" } },
166            { selector: 'node[type="Location"]', style: { "background-color": "#00c853" } },
167            { selector: 'node[type="Event"]', style: { "background-color": "#ff9100" } },
168
169            {
170                selector: "edge",
171                style: {
172                    "line-color": "#666",
173                    "target-arrow-color": "#666",
174                    "target-arrow-shape": "triangle",
175                    "curve-style": "bezier",
176                    "label": "data(relation)",
177                    "font-size": "10px",
178                    "color": "#999"
179                }
180            }
181        ],
182
183        layout: { name: "grid" }
184    });
185}
186
187// ============================================================================
188//  STATUS & STATS HELPERS
189// ============================================================================
190
191function showStatus(msg, type) {
192    document.getElementById("status-container").innerHTML =
193        `&lt;div class="status-message ${type}"&gt;${msg}&lt;/div&gt;`;
194}
195
196function clearStatus() {
197    document.getElementById("status-container").innerHTML = "";
198}
199
200function updateStats(nodes, edges) {
201    document.getElementById("stats").innerHTML =
202        `&lt;div&gt;&lt;strong&gt;${nodes}&lt;/strong&gt; entities&lt;/div&gt;
203         &lt;div&gt;&lt;strong&gt;${edges}&lt;/strong&gt; relationships&lt;/div&gt;`;
204}
205
206// ============================================================================
207//  MAIN FUNCTION
208// ============================================================================
209
210async function generateGraph() {
211    const text = document.getElementById("text-input").value.trim();
212    const btn = document.getElementById("generate-btn");
213
214    if (!text) {
215        showStatus("Please enter some text first.", "error");
216        return;
217    }
218
219    btn.disabled = true;
220    btn.textContent = "Generating...";
221    showStatus("Analyzing text...", "loading");
222
223    try {
224        const response = await fetch(`${API_URL}/graphify`, {
225            method: "POST",
226            headers: { "Content-Type": "application/json" },
227            body: JSON.stringify({ text })
228        });
229
230        if (!response.ok) {
231            const err = await response.json();
232            throw new Error(err.detail || "Server error");
233        }
234
235        const data = await response.json();
236
237        if (!data.nodes?.length) {
238            showStatus("No entities found. Try a longer text sample.", "error");
239            updateStats(0, 0);
240            return;
241        }
242
243        cy.elements().remove();
244
245        data.nodes.forEach(n =>
246            cy.add({ group: "nodes", data: { id: n.id, type: n.type } })
247        );
248
249        data.edges.forEach(e =>
250            cy.add({
251                group: "edges",
252                data: {
253                    source: e.source,
254                    target: e.target,
255                    relation: e.relation.replace(/_/g, " ")
256                }
257            })
258        );
259
260        cy.layout({
261            name: "cose",
262            animate: true,
263            idealEdgeLength: 100,
264            nodeRepulsion: 8000
265        }).run();
266
267        cy.fit(50);
268
269        showStatus(`Extracted ${data.nodes.length} entities and ${data.edges.length} relationships.`, "success");
270        updateStats(data.nodes.length, data.edges.length);
271
272    } catch (err) {
273        showStatus(`Error: ${err.message}`, "error");
274    } finally {
275        btn.disabled = false;
276        btn.textContent = "Generate Knowledge Graph";
277    }
278}
279
280// ============================================================================
281//  INITIALIZATION
282// ============================================================================
283
284document.addEventListener("DOMContentLoaded", () => {
285    initGraph();
286    updateStats(0, 0);
287});
288
289document.getElementById("text-input").addEventListener("keydown", e => {
290    if (e.ctrlKey && e.key === "Enter") generateGraph();
291});
292
293document.getElementById("generate-btn").onclick = generateGraph;
294&lt;/script&gt;
295&lt;/body&gt;
296&lt;/html&gt;

Here’s how the frontend should look:

Important note: This value const API_URL = window.API_URL || "http://<BACKEND-EXTERNAL-IP>:8000"; is baked into the Docker image at build time. That means you should deploy the backend first, wait for its LoadBalancer IP to become available, and then build the frontend image using that IP.

At this point, the frontend and backend are fully connected. You type text, the backend extracts meaning, and the browser builds a real-time knowledge graph. Next, we’ll package everything into Docker and deploy it on Civo so your graph visualizer runs as a fully hosted application.

Step 4: Dockerization

Create backend/Dockerfile:

1FROM python:3.11-slim
2
3
4WORKDIR /app
5
6
7# Install dependencies
8COPY requirements.txt .
9RUN pip install --no-cache-dir -r requirements.txt
10
11
12# Copy code
13COPY main.py .
14
15
16# Run as non-root
17RUN useradd -u 1001 appuser
18USER 1001
19
20
21EXPOSE 8000
22
23
24CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

Create backend/requirements.txt:

1fastapi==0.109.0
2uvicorn[standard]==0.27.0
3httpx==0.26.0
4pydantic==2.5.3
5python-dotenv==1.0.1

Create frontend/Dockerfile:

1FROM nginx:alpine
2
3
4# Copy static frontend to nginx public directory
5COPY index.html /usr/share/nginx/html/
6
7
8# Expose port 80 for Civo LoadBalancer
9EXPOSE 80
10
11
12# Simple healthcheck
13HEALTHCHECK --interval=30s --timeout=5s --retries=3 \
14    CMD wget -qO- http://localhost:80/ || exit 1
15
16
17CMD ["nginx", "-g", "daemon off;"]

Build and push images:

1# Build backend image
2docker build -t YOUR_REGISTRY/knowledge-graph-backend:latest .
3
4# Push backend image
5docker push YOUR_REGISTRY/knowledge-graph-backend:latest
6
7# Build frontend image
8docker build -t YOUR_REGISTRY/knowledge-graph-frontend:latest .
9
10# Push frontend image
11docker push YOUR_REGISTRY/knowledge-graph-frontend:latest

Step 5: Deploy on Civo Kubernetes

Create kubernetes/backend-deployment.yaml:

1# ---------------------------------------------------------
2# Namespace
3# ---------------------------------------------------------
4apiVersion: v1
5kind: Namespace
6metadata:
7  name: knowledge-graph
8---
9# ---------------------------------------------------------
10# RelaxAI Secret (user replaces the placeholder)
11# ---------------------------------------------------------
12apiVersion: v1
13kind: Secret
14metadata:
15  name: relaxai-secret
16  namespace: knowledge-graph
17type: Opaque
18stringData:
19  api-key: "YOUR_API_KEY_HERE"
20---
21# ---------------------------------------------------------
22# Backend Deployment
23# ---------------------------------------------------------
24apiVersion: apps/v1
25kind: Deployment
26metadata:
27  name: knowledge-backend
28  namespace: knowledge-graph
29spec:
30  replicas: 2
31  selector:
32    matchLabels:
33      app: knowledge-backend
34  template:
35    metadata:
36      labels:
37        app: knowledge-backend
38    spec:
39      containers:
40        - name: backend
41          image: alimohamed782/knowledge-graph-backend:latest
42          imagePullPolicy: Always
43
44
45          ports:
46            - containerPort: 8000
47
48
49          env:
50            - name: RELAXAI_API_KEY
51              valueFrom:
52                secretKeyRef:
53                  name: relaxai-secret
54                  key: api-key
55
56
57            - name: RELAXAI_API_URL
58              value: "https://api.relax.ai/v1/chat/completions"
59
60
61          # Keep resource limits modest for Civo clusters
62          resources:
63            requests:
64              cpu: "100m"
65              memory: "256Mi"
66            limits:
67              cpu: "500m"
68              memory: "512Mi"
69
70
71          # Health checks → very important for FastAPI
72          livenessProbe:
73            httpGet:
74              path: /health
75              port: 8000
76            initialDelaySeconds: 5
77            periodSeconds: 15
78
79
80          readinessProbe:
81            httpGet:
82              path: /health
83              port: 8000
84            initialDelaySeconds: 3
85            periodSeconds: 10
86
87
88          # Reasonable security context for a simple API pod
89          securityContext:
90            runAsNonRoot: true
91            runAsUser: 1001
92            allowPrivilegeEscalation: false
93
94
95      securityContext:
96        fsGroup: 1000
97---
98# ---------------------------------------------------------
99# Backend Service (LoadBalancer - public access)
100# ---------------------------------------------------------
101apiVersion: v1
102kind: Service
103metadata:
104  name: knowledge-backend
105  namespace: knowledge-graph
106spec:
107  type: LoadBalancer
108  selector:
109    app: knowledge-backend
110  ports:
111    - port: 8000
112      targetPort: 8000
113      protocol: TCP
114      name: http

Apply it:

1kubectl apply -f kubernetes/backend-deployment.yaml

Create kubernetes/frontend-deployment.yaml:

1# ---------------------------------------------------------
2# Frontend Deployment (nginx serving static files)
3# ---------------------------------------------------------
4apiVersion: apps/v1
5kind: Deployment
6metadata:
7  name: knowledge-frontend
8  namespace: knowledge-graph
9spec:
10  replicas: 2
11  selector:
12    matchLabels:
13      app: knowledge-frontend
14  template:
15    metadata:
16      labels:
17        app: knowledge-frontend
18    spec:
19      containers:
20        - name: frontend
21          image: alimohamed782/knowledge-graph-frontend:latest
22          imagePullPolicy: Always
23
24
25          ports:
26            - containerPort: 80
27
28
29          # Basic resource limits (static HTML + JS requires almost nothing)
30          resources:
31            requests:
32              cpu: "20m"
33              memory: "32Mi"
34            limits:
35              cpu: "100m"
36              memory: "64Mi"
37
38
39          # Health checks for nginx
40          livenessProbe:
41            httpGet:
42              path: /
43              port: 80
44            initialDelaySeconds: 5
45            periodSeconds: 20
46
47
48          readinessProbe:
49            httpGet:
50              path: /
51              port: 80
52            initialDelaySeconds: 3
53            periodSeconds: 10
54
55
56          securityContext:
57            allowPrivilegeEscalation: false
58
59
60      # Pod-level security context
61      securityContext:
62        fsGroup: 101
63---
64# ---------------------------------------------------------
65# Frontend Service (public LoadBalancer)
66# ---------------------------------------------------------
67apiVersion: v1
68kind: Service
69metadata:
70  name: knowledge-frontend
71  namespace: knowledge-graph
72spec:
73  type: LoadBalancer
74  selector:
75    app: knowledge-frontend
76  ports:
77    - name: http
78      port: 80
79      targetPort: 80
80      protocol: TCP

Apply it:

1kubectl apply -f kubernetes/frontend-deployment.yaml

Verify deployments:

1kubectl get pods -n knowledge-graph
2kubectl get svc -n knowledge-graph

Get external IPs:

1# Backend LoadBalancer IP
2kubectl get svc knowledge-backend -n knowledge-graph
3
4# Frontend LoadBalancer IP
5kubectl get svc knowledge-frontend -n knowledge-graph

Step 6: Test and visualize

Now that both the backend and frontend are deployed, you can verify everything is working by sending real text through the system and checking whether the generated knowledge graph appears in the browser. The snippet below is long enough to produce an interesting graph, with multiple entities and cross-organization relationships, making it ideal for a first test.

Use this text in the frontend input box:

In 2024, OpenAI partnered with Microsoft to deploy an advanced AI safety system across Azure data centers. Sam Altman met with leaders at the European Commission in Brussels to discuss regulatory guidelines for frontier models. Meanwhile, Google DeepMind researchers collaborated with the University of Oxford to publish a study on reinforcement learning methods for autonomous robotics. The report highlighted that NVIDIA GPUs remained essential for large-scale training workloads. Later that year, Anthropic announced a joint initiative with AWS to improve secure model deployment across enterprise environments.

If everything is configured correctly, your backend should extract entities, infer relationships, normalize them into the required JSON format, and the frontend should render them into an interactive graph as shown below:

The graph above is the final output of the full pipeline. Each circle represents an entity the model detected in the text (people, organizations, locations, or products), and each arrow represents a relationship inferred between them.

The system read a multi-sentence paragraph and automatically mapped out partnerships, meetings, collaborations, and technology dependencies. Instead of a wall of text, you now have a structured visual summary: OpenAI’s partnership with Microsoft and Azure, Sam Altman’s meeting with the European Commission in Brussels, Google DeepMind’s collaboration with the University of Oxford, NVIDIA’s role in large-scale training, and Anthropic’s joint initiative with AWS.

This is exactly the type of transformation the project is designed to deliver, turning unstructured language into a clear, navigable knowledge map.

This tutorial is intentionally small and focused, but it is designed as a foundation rather than a toy example. While the inputs used here are modest, the same pipeline can quickly grow in complexity as you process longer documents, batch multiple texts, or integrate the system into real applications. At that point, GPU acceleration becomes essential for keeping inference fast and responsive. Because the cluster is already GPU-enabled, no architectural changes are required to scale from simple experiments to more demanding, production-style workloads.

Key takeaways

Building a knowledge-graph extractor doesn’t require a massive data stack. A lightweight FastAPI service plus a small JS frontend is enough to turn unstructured text into a visual, explorable graph.

Civo’s GPU infrastructure makes this especially smooth. Provisioning is fast, costs stay predictable, and you avoid the usual cloud clutter that slows small AI projects down.

Once you have this pipeline running end-to-end, you’re not just drawing pretty graphs. You’ve built the core of a data-centric AI system: a repeatable way to turn messy language into structured relationships that other tools, agents, or downstream workflows can build on.

Use this as a foundation and expand as needed, more models, better extraction logic, bigger datasets. The architecture scales with you.

Automated knowledge-graph generator on Civo

Prerequisites

Project overview

What this project builds

Pipeline flow

Components you’ll deploy

Project structure

Step 1: Create a GPU-enabled Kubernetes cluster

Step 2: Build the backend (entity/relationship extractor)

main.py

Step 3: Build the frontend (graph visualizer)

Index.html

Step 4: Dockerization

Step 5: Deploy on Civo Kubernetes

Step 6: Test and visualize

Key takeaways

Additional resources

Further Reading

Building a data-driven recommendation system with relaxAI

Deploy a lightweight AI utility on Civo using relaxAI and Civo Database

LLM-powered incident analysis dashboard on Civo

Building a data-driven recommendation system with relaxAI

Deploy a lightweight AI utility on Civo using relaxAI and Civo Database

LLM-powered incident analysis dashboard on Civo

Company

Company

Public Cloud

Public Cloud

Private Cloud

Private Cloud

Civo AI

Civo AI

Solutions

Solutions

Resources

Resources

Contact

Contact

Legal

Social