Skip to content

Commit a5c89a7

Browse files
strickvlclaude
strickvl
and
claude
committed
Unify HTMLString visualizations with shared CSS system
Migrate all HTMLString artifacts to use centralized CSS styling for improved maintainability and visual consistency across EU AI Act compliance reports. Key changes: - Updated eval.py to use shared CSS classes for model evaluation dashboard - Migrated generate_sbom.py SBOM visualization to shared styling - Converted post_run_annex.py Annex IV documentation to use shared CSS - Updated dashboard.py compliance dashboard with unified styling - Enhanced risk_assessment.py with shared CSS components Benefits: - Consistent styling across all compliance visualizations - Reduced CSS duplication from ~500+ lines of inline styles - Improved maintainability with centralized style management - Enhanced visual consistency for EU AI Act reporting 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 3436c2d commit a5c89a7

File tree

5 files changed

+533
-1057
lines changed

5 files changed

+533
-1057
lines changed

‎credit-scorer/src/steps/deployment/generate_sbom.py

Lines changed: 50 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232

3333
from src.constants import Artifacts as A
3434
from src.constants import Directories
35+
from src.utils.visualizations.shared_styles import get_html_template
3536

3637
logger = get_logger(__name__)
3738

@@ -131,79 +132,70 @@ def get_direct_dependencies():
131132

132133

133134
def generate_sbom_html(sbom_data: Dict[str, Any], timestamp: str) -> str:
134-
"""Generate HTML representation of SBOM data."""
135+
"""Generate HTML representation of SBOM data using shared CSS."""
135136
components = sbom_data.get("components", [])
136137
metadata = sbom_data.get("metadata", {})
137138

138-
html = f"""
139-
<!DOCTYPE html>
140-
<html>
141-
<head>
142-
<title>Software Bill of Materials (SBOM)</title>
143-
<style>
144-
body {{ font-family: Arial, sans-serif; margin: 20px; }}
145-
.header {{ background-color: #f5f5f5; padding: 20px; border-radius: 5px; margin-bottom: 20px; }}
146-
.metadata {{ background-color: #e8f4fd; padding: 15px; border-radius: 5px; margin-bottom: 20px; }}
147-
table {{ border-collapse: collapse; width: 100%; }}
148-
th, td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
149-
th {{ background-color: #f2f2f2; font-weight: bold; }}
150-
.checksum {{ font-family: monospace; word-break: break-all; }}
151-
.purl {{ font-family: monospace; font-size: 0.9em; color: #666; }}
152-
</style>
153-
</head>
154-
<body>
155-
<div class="header">
156-
<h1>Software Bill of Materials (SBOM)</h1>
157-
<p><strong>Format:</strong> {sbom_data.get('bomFormat', 'CycloneDX')}</p>
158-
<p><strong>Spec Version:</strong> {sbom_data.get('specVersion', 'N/A')}</p>
159-
<p><strong>Serial Number:</strong> <span class="checksum">{sbom_data.get('serialNumber', 'N/A')}</span></p>
160-
<p><strong>Generated:</strong> {timestamp}</p>
161-
</div>
162-
163-
<div class="metadata">
164-
<h2>Metadata</h2>
165-
<p><strong>Timestamp:</strong> {metadata.get('timestamp', 'N/A')}</p>
166-
<p><strong>Total Components:</strong> {len(components)}</p>
167-
</div>
168-
169-
<h2>Components ({len(components)} total)</h2>
170-
<table>
171-
<thead>
172-
<tr>
173-
<th>Name</th>
174-
<th>Version</th>
175-
<th>Type</th>
176-
<th>Package URL</th>
177-
</tr>
178-
</thead>
179-
<tbody>
180-
"""
181-
139+
# Build component table rows
140+
component_rows = ""
182141
for component in sorted(components, key=lambda x: x.get("name", "")):
183142
name = component.get("name", "Unknown")
184143
version = component.get("version", "Unknown")
185144
comp_type = component.get("type", "Unknown")
186145
purl = component.get("purl", "")
187146

188-
html += f"""
147+
component_rows += f"""
189148
<tr>
190149
<td><strong>{name}</strong></td>
191150
<td>{version}</td>
192151
<td>{comp_type}</td>
193-
<td class="purl">{purl}</td>
194-
</tr>
195-
"""
152+
<td class="monospace purl">{purl}</td>
153+
</tr>"""
196154

197-
html += """
198-
</tbody>
199-
</table>
155+
# Generate main content using shared CSS classes
156+
content = f"""
157+
<div class="header">
158+
<h1>Software Bill of Materials (SBOM)</h1>
159+
<p>EU AI Act Article 15 Compliance - Accuracy & Robustness</p>
160+
</div>
200161
201-
<div style="margin-top: 30px; padding: 15px; background-color: #f9f9f9; border-radius: 5px;">
202-
<h3>About this SBOM</h3>
203-
<p>This Software Bill of Materials (SBOM) was automatically generated as part of EU AI Act compliance requirements (Article 15 - Accuracy & Robustness). It provides a comprehensive inventory of all software components used in the credit scoring model deployment.</p>
162+
<div class="content">
163+
<div class="card sbom-header">
164+
<h2>SBOM Information</h2>
165+
<p><strong>Format:</strong> {sbom_data.get('bomFormat', 'CycloneDX')}</p>
166+
<p><strong>Spec Version:</strong> {sbom_data.get('specVersion', 'N/A')}</p>
167+
<p><strong>Serial Number:</strong> <span class="monospace checksum">{sbom_data.get('serialNumber', 'N/A')}</span></p>
168+
<p><strong>Generated:</strong> {timestamp}</p>
169+
</div>
170+
171+
<div class="card sbom-metadata">
172+
<h2>Metadata</h2>
173+
<p><strong>Timestamp:</strong> {metadata.get('timestamp', 'N/A')}</p>
174+
<p><strong>Total Components:</strong> {len(components)}</p>
175+
</div>
176+
177+
<div class="card">
178+
<h2>Components ({len(components)} total)</h2>
179+
<table class="table">
180+
<thead>
181+
<tr>
182+
<th>Name</th>
183+
<th>Version</th>
184+
<th>Type</th>
185+
<th>Package URL</th>
186+
</tr>
187+
</thead>
188+
<tbody>
189+
{component_rows}
190+
</tbody>
191+
</table>
192+
</div>
193+
194+
<div class="alert alert-info mt-4">
195+
<h3>About this SBOM</h3>
196+
<p>This Software Bill of Materials (SBOM) was automatically generated as part of EU AI Act compliance requirements (Article 15 - Accuracy & Robustness). It provides a comprehensive inventory of all software components used in the credit scoring model deployment.</p>
197+
</div>
204198
</div>
205-
</body>
206-
</html>
207199
"""
208200

209-
return html
201+
return get_html_template("Software Bill of Materials (SBOM)", content)

0 commit comments

Comments
 (0)