Update templates/error.html

templates/error.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Error Generating AI SBOM</title>
-    <style>
+    <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=o69l1hsrtw08ET9dIC7sKffMV1Iaj4FexR0o2jjJRP9jKF-V1JtcU8uoA_ppv4cylzMtMYwiTxOkzqOCLBhDodVDnhuE2Ff289DM8oeYIxTKTinDsIVHuoNFBgYo6-bMkDpYMZyjExsq4-EkwivOjGsNGmMnfiSiLJ3cUB5r3MkprrAmu_vEubvvxJN1Dr7F9LQUpmpRaOCe0LuHleJFjPMlObSgGN3AfzamFoQNc7aRyXAAmq5g7kFIHXN20EbM8A3nMnwwE9Tcn1zmYT4sKdNyiQJ-gWapEhCsX7xyeD9JplPxuPcbfbUkRHcYg4fLp9f098_c2I0wdqsn8acX_1nOjr1VjPHVSPGGVpHzAvKpJOgiOFHSo4P0IuTibXWmYBd8CHhac0EBr9ABphSBOJMjwlncBQPgQkAoV8e8blcB-E99aK64bHCvi4o-a4l-NgiUnW17rGxLlhwTwOACVE9FeENwEXxuaa45xsC5J23ptGXubJqhQPFMP5vJbqXq2T4PhpXm2xrxHEqvRgHSthWtBjAyOR_nO1m0k6lADqqFw54vmdgv3tvXdi0Lwr2AEErrVD9rPnLLUcfzfFnU3sGAKw8jGewkrLEU15iZngNCbZdojNzlF579HEFQPZQ3kbVaV_duOQmeMhHWc7QLzPEEufmhg8OakQAWQCAVR-CIax06nzCyhV8vsZVOs_HJRLJvPtr_YGLnxahUZjKw70JI_4RbdUXMcYgp3Uf4h-wCuQnlsTQM1_4wqx_qmTHDSQsxis8HhqiPU-2z3rAoCqwanrJlsMilYo5bKTNEnEbRG_uaKjSn8MPfgWUZqdlvmCDEmV0kNJ1GW1Im68ECXTSgVdLcZ1LIPWVobPf8EzaxD-TYu4dSbxDybt7asElrCM64Hzm2yZ88kznLMA16sRQjqV5fLorL5MJwoC3t-aJpWKIDoT6s4tSQn3AkEtnzt0PSBrMwwM8C4uS9U-EDcp571aRnhakL8RTeZDlPUFhLPh8RSwoL9bvmRTD5jMQ6P5if5MfLHlu9SN4IvWJevXeaO8pg4-3r-DBbUmd4crWKverBeOMlDLz37Izos_GEAQek8pg9UHeHmd5AdvTZwtm5tYL0T8KvFsyn4Jdl2Osr4-0VBs18RgoXjFINKeEoqczzHCg5iU7xXqGr_SqMQIZJuZCsIySJxRoIMdWgeIiuYVHQwzO_0BC_WrRXA9emGQQAWg1iCFk4J6VGzGepp-I0thTN-NeQ1Gm9Q62-PHwD9p7UR547gAPTtC66pmuzmX3e5ppyMdFm8EqJ25MI5q22ait7b0OQQOvbGSDkRUhpNS4zxQGYbWj_fdm8wj9dlvutB_A3bQeuDK5BOUJ6kx-ZA5Q409atleP_JInb8m1B1uDIZfqcMtMbYjeGKUPIRO1VKr9AoK61_FwHG_XYLSTUBb3SfeHO26-rSKRT3B78ikkkjVHAEwbqPOg-4v8Cl1PLCft2E8xCIaZFUQU0vXbRn9jwq2jwn0MPVWXzYA_FFbW78BfRx_yzzlXY9nfbrQJLXamlbybkkCDIHNCzfuIPFNvMTLPS83_Vn96Nn1rFF6BZp32SsriO2tOo_yVaGk43zWQ09FaxTJfH4dmaDwcLQDIpZXvqIOIUAccs0TamsUBtdarRCWg3OAwx8zI9p5NIwuEICug3TAjKDKDBTmYwAW-L0OSiDJ0c0sQBfQeXQCobnG6_pzNpqn0GCWiv" nonce="cd913194d6100f8d165f6115cf5ef81d" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly9tYWlsLWF0dGFjaG1lbnQuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2F0dGFjaG1lbnQvdS8wLz91aT0yJmlrPTI5MzQwOTYwNGImYXR0aWQ9MC4xJnBlcm1tc2dpZD1tc2ctZjoxODM1MTAyNDUyNzcxMTM4MDU0JnRoPTE5Nzc5N2Y1M2ZkZjJhMDYmdmlldz1hdHQmZGlzcD1zYWZlJnJlYWxhdHRpZD1mX21iemFlNzdwMCZ6dyZzYWRkYmF0PUFOR2pkSjlSb29WXzJ2cWhFc2lyQ1BfSlFUTkk1eXVoX09vd3JXUUVCcS1aaWRDbjlqMDF3T3JNaGpTcnNoREVvd1RIZ010YVhselBwcGtJVFV6Qm5sNGhTMFlndjBPUm0xdE8td083N3BjZG5PTjc3M0hfNmlyY0hLbmZzZEhMdFB3OUw0Sk1VaVBCWVQzRk4wRzJFZERPbjFoSHNvY1lQWWVlbUJZRzVMZEJqaS0yQnNJNTFhVV9HYUdlN200SEw5ODVSN01rX3FVS2o5STdUSkNhaHd3WmVnUEhib0hXemlHZFlFMHZqUUVHQVZCNkFmV1JxSTltNnpPM0NpRFFkQ0FJY0M5OXBEcGh3VTBoUG4zdGhiS29tRENYeFczcHVzVGVwVEJEMk9pX1FHTWVLaGpXVDY3RGExMEdNdThOeWozNW05dEM3Yk50U3ZMOWc5T0RJcWFMQmJ3TkVHQ0w3cDB5NG10c0plVEk4SHFkRjFBLWhubVVRaG5VM0dTMFRjanZqOTc3VlhmVXBxR3pZeVplcU1yQ1J1OGJOLTBfTTQwVDNybkxYQTRuQ1huQ3RMUWdfM1VUNkF5WWZDVjZiR3ZjVC0ta0JlTW9xTkhFRTdtZWdQRlFFSUFwXzdrLXJEYkg3OXJMcU1PWHRlMHREdmlHZW5BYXBvSlg4MVVaa2Z0RTBrVTB3RkxsREYtRld5dFg1bHFMWnB2Z2tWT1RTV2NFR2s2MzNhMVRpTEQ0Z3lKQ1FYVjY5QzVIb1R6VWhsVEdIQ0VQNnlkbTVnZ2VUaGhXWklPSWdJT21HSXkzbjByaUtnelVnNWJnLXNlai1CMUFSQ0FvSjl2OTRweVprNXNPUENCTlRZV19tUW83c0pNZGxXNzFNYlI4bjk1ZFJBZ25WazJPRndvUDV2c2tNcHlZcGhUUndOMElVcjVBSkVkN2VMZG1UUVBxUW1FZGR3c1E1VXp2RXJRbFZPY2Joby1hbDEteWtvalE5YjBfWXlVLWFMWlVGLVE1M2NSVnNVRXNvYlBPdEN1ZTNjUjlvYXN5VlVKV095T3BoQXpfWDVBX3VmMTkzeHV4aFhEM0t4eGpwNHRhYlF3Mko2SmhqYjBteURVcE5KU2xsRjBpVTFZcFZzdHJ3S2JDUWZ5OWNPZEp6cExRM05xUm90UzJnWkJIN3o3RFlpWFpZRzIyRmctenFqQjBlcGtGTkctemJfUng2ellvZjVON253d0ZFb0F6VF9JaUdzdWJPOVdFQ29LYVY0blgtaGljUUVOWlZmN1VrdXhDQUxvV08zX3VhTlBSUU9qTHJsTm0xeHhLdnhIQVREalZBbGpPRm15ZjFSYVlfTnMyZlZuZno5UkhBZ2RvSHpOLUs1aUFSQVlmY3FfeEljeFJRVHZkTm9QWjdpUmtaMElKblE"/><style>
         body { 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
             margin: 0; 
@@ -27,28 +27,61 @@
             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;
         }
-        /* Added header-content div for layout */
-        .header .header-content {
+        .header-content {
             display: flex;
-            flex-direction: column; /* Stack title and count */
+            flex-direction: column;
         }
         .header h1 {
             margin: 0;
             font-size: 28px;
             color: #2c3e50;
             font-weight: 600;
-            margin-bottom: 5px; /* Space between title and count */
+            margin-bottom: 5px;
         }
-        /* Added style for sbom-count */
-        .header .sbom-count {
-            font-size: 14px;
-            color: #555;
+        .header-right {
+            display: flex;
+            gap: 10px;
+        }
+        .generate-another-btn {
+            padding: 12px 20px;
+            background-color: #3498db;
+            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: #2980b9;
+            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;
         }
         
@@ -70,6 +103,13 @@
             padding-bottom: 10px;
         }
         
+        .content-section h3 {
+            color: #2c3e50;
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 18px;
+        }
+        
         .content-section p {
             margin-bottom: 20px;
             font-size: 16px;
@@ -95,7 +135,7 @@
             padding-bottom: 10px;
         }
         
-        .error-message {
+        .error-details {
             background-color: #ffebee;
             border-left: 4px solid #e74c3c;
             padding: 15px;
@@ -125,31 +165,23 @@
         .button:hover {
             background-color: #2980b9;
             text-decoration: none;
+            color: white;
         }
-        
-        /* Support section styling */
-        .support-section {
-            background-color: #ffffff;
-            border-radius: 8px;
-            padding: 25px;
-            margin-bottom: 30px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-        }
-        
-        .support-section h2 {
-            color: #2c3e50;
-            margin-top: 0;
-            margin-bottom: 20px;
-            font-size: 22px;
-            border-bottom: 2px solid #f0f0f0;
-            padding-bottom: 10px;
+
+        .github-button {
+            display: inline-block;
+            padding: 12px 20px;
+            background-color: #3498db;
+            color: white;
+            text-decoration: none;
+            border-radius: 6px;
+            font-weight: 500;
+            transition: background-color 0.3s;
         }
-        
-        .support-section p {
-            margin-bottom: 20px;
-            font-size: 16px;
-            line-height: 1.7;
-            color: #555;
+        .github-button:hover {
+            background-color: #2980b9;
+            text-decoration: none;
+            color: white;
         }
         
         a {
@@ -171,38 +203,106 @@
             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>
-    <!-- Header with logo, title, and SBOM count -->
-    <div class="header">
-        <a href="https://aetheris.ai/" target="_blank">
-            <img src="https://huggingface.co/spaces/aetheris-ai/aibom-generator/resolve/main/templates/images/AetherisAI-logo.png" alt="Aetheris AI Logo">
-        </a>
-        <!-- Added header-content div -->
-        <div class="header-content">
-            <h1>AI SBOM Generator</h1>
-        </div>
-    </div>
-    
     <div class="container">
+        <!-- Header with logo, title, and generate another button -->
+        <div class="header">
+            <div class="header-left">
+                <a href="https://aetheris.ai/" target="_blank">
+                    <img src="https://huggingface.co/spaces/aetheris-ai/aibom-generator/resolve/main/templates/images/AetherisAI-logo.png" alt="Aetheris AI Logo">
+                </a>
+                <div class="header-content">
+                    <h1>AI SBOM Generator</h1>
+                </div>
+            </div>
+            <div class="header-right">
+                <a href="/" class="generate-another-btn">🚀 Generate Another AI SBOM</a>
+            </div>
+        </div>
+
+        <!-- Error Message -->
+        <div class="error-message">
+            <h2>❌ Error Generating AI SBOM</h2>
+        </div>
+
+        <!-- Try Again Button -->
+        <div style="text-align: left; margin-bottom: 20px;">
+            <a href="/" class="button">🔄 Try Again</a>
+        </div>
+        
         <!-- Error Section -->
         <div class="error-section">
-            <h2>Error Generating AI SBOM</h2>
-            <div class="error-message">
+            <h2>What Happened?</h2>
+            <div class="error-details">
                 <p>{{ error }}</p>
             </div>
-            <a href="/" class="button">Try Again</a>
         </div>
         
         <!-- Support Section -->
-        <div class="support-section">
-            <h2>Need Help?</h2>
-            <p>If the error persists, please log an issue on our <a href="https://github.com/aetheris-ai/aibom-generator/issues" target="_blank" rel="noopener noreferrer">GitHub issues page</a>. Include the error message above and any additional details that might help us troubleshoot the problem.</p>
+        <div class="content-section">
+            <h2>🛠️ Need Help?</h2>
+            <p>If this error persists or you believe it's a bug, please help us improve the tool by reporting it:</p>
+            <a href="https://github.com/aetheris-ai/aibom-generator/issues" target="_blank" rel="noopener noreferrer" class="github-button">
+                📋 Report Issue on GitHub
+            </a>
+            <p style="margin-top: 15px; font-size: 14px; color: #666;">
+                <strong>When reporting:</strong> Please include the error message above and the model ID you were trying to process.
+            </p>
+        </div>
+
+        <!-- Help Section -->
+        <div class="content-section">
+            <h2>💡 Common Solutions</h2>
+            <p><strong>Model not found:</strong> Verify the model ID format is correct (e.g., <code>owner/model-name</code>) and that the model exists on Hugging Face.</p>
+            <p><strong>Access issues:</strong> Some models may be private or require authentication. Try with a public model first.</p>
+            <p><strong>Temporary issues:</strong> If you're experiencing connectivity problems, please try again in a few moments.</p>
+        </div>
+
+        <!-- Social Section -->
+        <div class="content-section" style="text-align: center;">
+            <h3>🗣️ Help Us Spread the Word</h3>
+            <p>If you find this tool useful, share it with your network! <a href="https://sbom.aetheris.ai" target="_blank" rel="noopener noreferrer">https://sbom.aetheris.ai</a></p>
+            <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fsbom.aetheris.ai" target="_blank" rel="noopener noreferrer" style="text-decoration: none;">
+                <button style="background-color: #0077b5; color: white; border: none; border-radius: 6px; padding: 12px 20px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color 0.3s;">🔗 Share on LinkedIn</button>
+            </a>
+            <p style="margin-top: 10px; font-size: 14px;">
+                Follow us for updates: 
+                <a href="https://www.linkedin.com/company/aetheris-ai" target="_blank" rel="noopener noreferrer">@Aetheris AI</a>
+            </p>
         </div>
-      
+
         <!-- Info Section -->
-        <div class="content-section" style="text-align: center;>
+        <div class="content-section" style="text-align: center;">
             <!-- Display the SBOM count -->
             <div class="sbom-count">🚀 Generated AI SBOMs using this tool: <strong>{{ sbom_count if sbom_count else 'N/A' }}</strong></div>        
         </div>