e2hln's picture
Update templates/error.html
527f0d5 verified
raw
history blame
8.41 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error Generating AIBOM</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
/* Header styling */
.header {
background-color: #ffffff;
padding: 15px 20px;
border-bottom: 1px solid #e9ecef;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.header-left {
display: flex;
align-items: center;
}
.header img {
height: 60px;
margin-right: 15px;
}
.header-content {
display: flex;
flex-direction: column;
}
.header h1 {
margin: 0;
font-size: 28px;
color: #2c3e50;
font-weight: 650;
margin-bottom: 5px;
}
.header-right {
display: flex;
gap: 10px;
}
.generate-another-btn {
padding: 12px 20px;
background-color: #005ba1; /* OWASP blue */
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
font-size: 15px;
transition: background-color 0.3s;
}
.generate-another-btn:hover {
background-color: #004478;
text-decoration: none;
color: white;
}
/* Error message styling */
.error-message {
text-align: left;
padding: 15px;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 8px;
margin-bottom: 20px;
}
.error-message h2 {
margin: 0;
font-size: 18px;
color: #721c24;
font-weight: 500;
}
/* Content sections */
.content-section {
background-color: #ffffff;
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.content-section h2 {
color: #2c3e50;
margin-top: 0;
margin-bottom: 20px;
font-size: 22px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
.content-section p {
margin-bottom: 20px;
font-size: 16px;
line-height: 1.7;
color: #555;
}
/* Error details block */
.error-section {
background-color: #ffffff;
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.error-section h2 {
color: #e74c3c;
margin-top: 0;
margin-bottom: 20px;
font-size: 22px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
.error-details {
background-color: #ffebee;
border-left: 4px solid #e74c3c;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
font-size: 16px;
line-height: 1.7;
color: #555;
}
/* Buttons */
.button {
display: inline-block;
padding: 12px 20px;
background-color: #005ba1;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3s;
margin-bottom: 20px;
}
.button:hover {
background-color: #004478;
}
.github-button {
display: inline-block;
padding: 12px 20px;
background-color: #005ba1;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: background-color 0.3s;
}
.github-button:hover {
background-color: #004478;
}
/* Footer */
.footer {
text-align: center;
padding: 20px;
color: #7f8c8d;
font-size: 14px;
margin-top: 30px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.header {
flex-direction: column;
text-align: center;
padding: 15px;
}
.header-left {
margin-bottom: 15px;
}
.header img {
margin-bottom: 10px;
margin-right: 0;
}
.button, .generate-another-btn {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<div class="header-left">
<a href="https://genai.owasp.org" target="_blank">
<img src="https://huggingface.co/spaces/e2hln/OWASP-AIBOM-Generator/resolve/main/templates/images/OWASP_GenAI_Security_Project-logo.png" alt="OWASP GenAI Security Project logo">
</a>
<div class="header-content">
<h1>OWASP AIBOM Generator</h1>
</div>
</div>
<div class="header-right">
<a href="/" class="generate-another-btn">πŸš€ Generate Another AIBOM</a>
</div>
</div>
<!-- Error message -->
<div class="error-message">
<h2>❌ Error Generating AIBOM</h2>
</div>
<!-- Try Again Button -->
<div style="text-align: left; margin-bottom: 20px;">
<a href="/" class="button">πŸ”„ Try Again</a>
</div>
<!-- Error Details -->
<div class="error-section">
<h2>What Happened?</h2>
<div class="error-details">
<p>{{ error }}</p>
</div>
</div>
<!-- Common Solutions -->
<div class="content-section">
<h2>πŸ’‘ Common Solutions</h2>
<p><strong>Model not found:</strong> Check that the model ID follows <code>owner/model-name</code> format and exists on Hugging Face.</p>
<p><strong>Access issues:</strong> Some models require an access token or may be private.</p>
<p><strong>Temporary issues:</strong> Try again if there were connectivity or Hugging Face API hiccups.</p>
</div>
<!-- Support Section -->
<div class="content-section">
<h2>πŸ› οΈ Need Help?</h2>
<p>If this error persists or you believe it's a bug, please let us know:</p>
<a href="https://github.com/aetheris-ai/aibom-generator/issues" target="_blank" class="github-button">
πŸ“‹ Report Issue on GitHub
</a>
<p style="margin-top: 15px; font-size: 14px; color: #666;">
<strong>Tip:</strong> Please include the error message above and the model ID you were trying to process.
</p>
</div>
<!-- SBOM Count -->
<div class="content-section" style="text-align: center;">
<div class="sbom-count">πŸš€ Generated AIBOMs with this tool: <strong>{{ sbom_count if sbom_count else 'N/A' }}</strong></div>
</div>
<!-- Footer -->
<div class="footer">
<p>Β© 2025 OWASP GenAI Security Project | OWASP AIBOM Generator</p>
</div>
</div>
</body>
</html>