Spaces:

GenAISecurityProject
/

OWASP-AIBOM-Generator

Running

App Files Files

ryanoakley commited on Jun 17

Commit

ce9c8dc

verified ·

1 Parent(s): 18d7601

Update templates/result.html

Browse files

Files changed (1) hide show

templates/result.html +773 -586

templates/result.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI SBOM Generated</title>
-    <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             margin: 0;
@@ -27,36 +27,71 @@
             box-shadow: 0 2px 5px rgba(0,0,0,0.05);
             display: flex;
             align-items: center;
             margin-bottom: 30px;
         }
         .header img {
             height: 60px;
             margin-right: 15px;
         }
         .header h1 {
             margin: 0;
             font-size: 28px;
             color: #2c3e50;
             font-weight: 600;
         }
-        /* header-content div for layout */
-        .header .header-content {
             display: flex;
-            flex-direction: column; /* Stack title and count */
         }
-        .header h1 {
             margin: 0;
-            font-size: 28px;
-            color: #2c3e50;
             font-weight: 600;
-            margin-bottom: 5px; /* Space between title and count */
         }
-        /* Added style for sbom-count */
-        .header .sbom-count {
             font-size: 14px;
-            color: #555;
-            font-weight: 500;
         }
         /* Content styling */
@@ -326,6 +361,19 @@
         .score-table td {
             padding: 12px;
         }
         .score-weight {
             font-size: 0.9em;
             color: #666;
@@ -426,6 +474,10 @@
             color: #2e7d32;
             margin-bottom: 15px;
         }
         .importance-indicator {
             display: inline-block;
             margin-left: 5px;
@@ -478,11 +530,11 @@
         /* Styles for completeness profile */
         .completeness-profile {
-            background-color: #e8f5e9;
             border-radius: 8px;
             padding: 20px;
             margin: 20px 0;
-            border-left: 4px solid #4caf50;
         }
         .profile-badge {
             display: inline-block;
@@ -547,656 +599,790 @@
             margin-bottom: 15px;
         }
-        /* Section for score calculation explanation */
-        .score-calculation {
-            margin-top: 30px;
-            padding: 25px;
-            background-color: #ffffff;
             border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
         }
-        .score-calculation h3 {
             margin-top: 0;
             color: #2c3e50;
-            border-bottom: 2px solid #f0f0f0;
-            padding-bottom: 10px;
-            margin-bottom: 20px;
         }
-        .calculation-section {
-            margin-bottom: 25px;
         }
-        /* Footer styling */
-        .footer {
-            text-align: center;
             padding: 20px;
-            color: #7f8c8d;
-            font-size: 14px;
-            margin-top: 30px;
         }
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            .aibom-property {
-                flex-direction: column;
-            }
-            .property-name {
-                width: 100%;
-                margin-bottom: 5px;
-            }
-            .total-score-container {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-            .total-score {
-                margin-bottom: 10px;
-            }
-            .aibom-tabs {
-                flex-wrap: wrap;
-            }
-            .aibom-tab {
-                margin-bottom: 5px;
-            }
         }
     </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>
-        <!-- Header-content div -->
-        <div class="header-content">
-            <h1>AI SBOM Generator</h1>
-        </div>
-    </div>
     <div class="container">
-        <div class="content-section">
-            <h2>AI SBOM Generated for {{ model_id }}</h2>
-            <a href="/" class="button">Generate another AI SBOM</a>
-            <div class="download-section">
-                <p>Download generated AI SBOM in CycloneDX format</p>
-                <button onclick="downloadJSON()">Download JSON</button>
             </div>
-            {% if enhancement_report and enhancement_report.ai_enhanced %}
-            <div class="improvement">
-                <h3>AI Enhancement Results</h3>
-                <p>This AI SBOM was enhanced using <strong>{{ enhancement_report.ai_model }}</strong></p>
-                <p>Original Score: {{ enhancement_report.original_score.total_score|round(1) }}/100</p>
-                <p>Enhanced Score: {{ enhancement_report.final_score.total_score|round(1) }}/100</p>
-                <p>Improvement: <span class="improvement-value">+{{ enhancement_report.improvement|round(1) }} points</span></p>
             </div>
-            {% endif %}
         </div>
-        <!-- Human-friendly AI SBOM Viewer -->
-        <div class="note-box">
-            <p><strong>Note:</strong> This page displays the AI SBOM in a human-friendly format for easier readability.
-            The downloaded JSON file follows the standard CycloneDX format required for interoperability with other tools.</p>
         </div>
-        <div class="aibom-tabs">
-            <div class="aibom-tab active" onclick="switchTab('human-view')">Human-Friendly View</div>
-            <div class="aibom-tab" onclick="switchTab('json-view')">JSON View</div>
-            <div class="aibom-tab" onclick="switchTab('field-checklist')">Field Checklist</div>
-            <div class="aibom-tab" onclick="switchTab('score-view')">Score Report</div>
         </div>
-        <div id="human-view" class="tab-content active">
-            <div class="aibom-viewer">
-                <!-- Key Information Section -->
-                <div class="aibom-section key-info">
-                    <h4>Key Information</h4>
                     <div class="aibom-property">
-                        <div class="property-name">Model Name:</div>
-                        <div class="property-value">{{ aibom.components[0].name if aibom.components and aibom.components[0].name else 'Not specified' }}</div>
                     </div>
                     <div class="aibom-property">
-                        <div class="property-name">Type:</div>
-                        <div class="property-value">{{ aibom.components[0].type if aibom.components and aibom.components[0].type else 'Not specified' }}</div>
                     </div>
                     <div class="aibom-property">
-                        <div class="property-name">Version:</div>
-                        <div class="property-value">{{ aibom.components[0].version if aibom.components and aibom.components[0].version else 'Not specified' }}</div>
                     </div>
                     <div class="aibom-property">
-                        <div class="property-name">PURL:</div>
-                        <div class="property-value">{{ aibom.components[0].purl if aibom.components and aibom.components[0].purl else 'Not specified' }}</div>
                     </div>
-                    {% if aibom.components and aibom.components[0].description %}
                     <div class="aibom-property">
-                        <div class="property-name">Description:</div>
-                        <div class="property-value">{{ aibom.components[0].description }}</div>
                     </div>
                     {% endif %}
                 </div>
-                <!-- Model Card Section -->
                 {% if aibom.components and aibom.components[0].modelCard %}
                 <div class="aibom-section">
-                    <h4 class="collapsible" onclick="toggleCollapsible(this)">Model Card</h4>
-                    <div class="collapsible-content">
-                        {% if aibom.components[0].modelCard.modelParameters %}
-                        <div class="aibom-property">
-                            <div class="property-name">Model Parameters:</div>
-                            <div class="property-value">
-                                <ul>
-                                    {% for key, value in aibom.components[0].modelCard.modelParameters.items() %}
-                                    <li><strong>{{ key }}:</strong> {{ value }}</li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                        </div>
-                        {% endif %}
-                        {% if aibom.components[0].modelCard.considerations %}
-                        <div class="aibom-property">
-                            <div class="property-name">Considerations:</div>
-                            <div class="property-value">
-                                <ul>
-                                    {% for key, value in aibom.components[0].modelCard.considerations.items() %}
-                                    <li><strong>{{ key }}:</strong> {{ value }}</li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                        </div>
-                        {% endif %}
                     </div>
                 </div>
                 {% endif %}
-                <!-- External References Section -->
-                {% if aibom.components and aibom.components[0].externalReferences %}
                 <div class="aibom-section">
-                    <h4 class="collapsible" onclick="toggleCollapsible(this)">External References</h4>
-                    <div class="collapsible-content">
-                        <ul>
-                            {% for ref in aibom.components[0].externalReferences %}
-                            <li>
-                                <strong>{{ ref.type }}:</strong>
-                                <a href="{{ ref.url }}" target="_blank">{{ ref.url }}</a>
-                                {% if ref.comment %}
-                                <br><em>{{ ref.comment }}</em>
-                                {% endif %}
-                            </li>
-                            {% endfor %}
-                        </ul>
                     </div>
                 </div>
                 {% endif %}
-            </div>
-        </div>
-        <div id="json-view" class="tab-content">
-            <div class="json-view">
-                <pre>{{ aibom | tojson(indent=2) }}</pre>
-            </div>
-        </div>
-        <div id="field-checklist" class="tab-content">
-            <div class="content-section">
-                <h3>Field Checklist & Mapping</h3>
-                <!-- Field Tier Legend -->
-                <div class="tier-legend">
-                    <div class="tier-legend-item">
-                        <span class="field-tier tier-critical"></span>
-                        <span>Critical</span>
                     </div>
-                    <div class="tier-legend-item">
-                        <span class="field-tier tier-important"></span>
-                        <span>Important</span>
                     </div>
-                    <div class="tier-legend-item">
-                        <span class="field-tier tier-supplementary"></span>
-                        <span>Supplementary</span>
                     </div>
                 </div>
-                <p>This table shows how fields map to the CycloneDX specification and their status in your AI SBOM.</p>
-                <div class="field-mapping-container">
-                    <h4>Standard CycloneDX Fields</h4>
-                    <p>These fields are part of the official CycloneDX specification and are used in all SBOMs:</p>
-                    <table class="field-mapping-table">
-                        <thead>
-                            <tr>
-                                <th>Status</th>
-                                <th>Field Name</th>
-                                <th>CycloneDX JSON Path</th>
-                                <th>Info</th>
-                                <th>Importance</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for field_key, field_data in completeness_score.field_categorization.standard_cyclonedx_fields.items() %}
-                                <tr class="{% if field_data.status == '✔' %}present-field{% else %}missing-field{% endif %}">
-                                    <td class="status-cell">
-                                        {% if field_data.status == "✔" %}
-                                            <span class="check-mark">✔</span>
-                                        {% else %}
-                                            <span class="x-mark">✘</span>
-                                        {% endif %}
-                                    </td>
-                                    <td>{{ field_data.field_name }}</td>
-                                    <td>{{ field_data.json_path }}</td>
-                                    <td>
-                                        <span class="tooltip">(?)
-                                            <span class="tooltiptext">{{ field_data.field_name }} field information.</span>
-                                        </span>
-                                    </td>
-                                    <td>
-                                        <span class="field-tier tier-{{ field_data.importance|lower }}"></span>
-                                        {{ field_data.importance }}
-                                    </td>
-                                </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                    <h4>AI-Specific Extension Fields</h4>
-                    <p>These fields extend the CycloneDX specification specifically for AI models:</p>
-                    <table class="field-mapping-table">
-                        <thead>
-                            <tr>
-                                <th>Status</th>
-                                <th>Field Name</th>
-                                <th>CycloneDX JSON Path</th>
-                                <th>Info</th>
-                                <th>Importance</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for field_key, field_data in completeness_score.field_categorization.ai_specific_extension_fields.items() %}
-                                <tr class="{% if field_data.status == '✔' %}present-field{% else %}missing-field{% endif %}">
-                                    <td class="status-cell">
-                                        {% if field_data.status == "✔" %}
-                                            <span class="check-mark">✔</span>
-                                        {% else %}
-                                            <span class="x-mark">✘</span>
-                                        {% endif %}
-                                    </td>
-                                    <td>{{ field_data.field_name }}</td>
-                                    <td>{{ field_data.json_path }}</td>
-                                    <td>
-                                        <span class="tooltip">(?)
-                                            <span class="tooltiptext">{{ field_data.field_name }} field information.</span>
-                                        </span>
-                                    </td>
-                                    <td>
-                                        <span class="field-tier tier-{{ field_data.importance|lower }}"></span>
-                                        {{ field_data.importance }}
-                                    </td>
-                                </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                <style>
-                    .field-mapping-container {
-                        margin-top: 20px;
-                        max-width: 100%;
-                        overflow-x: auto;
-                    }
-                    .field-mapping-table {
-                        width: 100%;
-                        border-collapse: collapse;
-                        margin-bottom: 30px;
-                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-                        border-radius: 8px;
-                        overflow: hidden;
-                        table-layout: fixed;
-                    }
-                    .field-mapping-table th {
-                        background-color: #f5f5f5;
-                        padding: 12px 15px;
-                        text-align: left;
-                        font-weight: 600;
-                        color: #333;
-                        border-bottom: 2px solid #ddd;
-                    }
-                    .field-mapping-table td {
-                        padding: 10px 15px;
-                        border-bottom: 1px solid #eee;
-                        vertical-align: middle;
-                        word-wrap: break-word;
-                        word-break: break-word;
-                        max-width: 250px;
-                    }
-                    .field-mapping-table tr:last-child td {
-                        border-bottom: none;
-                    }
-                    .field-mapping-table tr:hover {
-                        background-color: #f9f9f9;
-                    }
-                    .status-cell {
-                        text-align: center;
-                        width: 60px;
-                    }
-                    .present-field {
-                        background-color: #f0f7f0;
-                    }
-                    .missing-field {
-                        background-color: #fff7f7;
-                    }
-                    .check-mark {
-                        color: #4caf50;
-                        font-weight: bold;
-                        font-size: 18px;
-                    }
-                    .x-mark {
-                        color: #f44336;
-                        font-weight: bold;
-                        font-size: 18px;
-                    }
-                </style>
             </div>
         </div>
-        <div id="score-view" class="tab-content">
-            <div class="content-section">
-                <h3>AI SBOM Completeness Score</h3>
-                <!-- Completeness Profile Section -->
-                {% if completeness_score.completeness_profile %}
-                <div class="completeness-profile">
-                    <h4>Completeness Profile:
-                        <span class="profile-badge profile-{{ completeness_score.completeness_profile.name|lower }}">
-                            {{ completeness_score.completeness_profile.name }}
-                        </span>
-                    </h4>
-                    <p>{{ completeness_score.completeness_profile.description }}</p>
-                    {% if completeness_score.completeness_profile.next_level %}
-                    <p><strong>Next level:</strong> {{ completeness_score.completeness_profile.next_level.name }}
-                       ({{ completeness_score.completeness_profile.next_level.missing_fields_count }} fields to add)</p>
-                    {% endif %}
                 </div>
-                {% endif %}
-                <!-- Total Score with Progress Bar -->
-                <div class="total-score-container">
-                    <div class="total-score">{{ completeness_score.total_score|round(1) }}/100</div>
-                    <div class="total-progress">
-                        <div class="progress-container">
-                            {% set score_percent = (completeness_score.total_score / 100) * 100 %}
-                            {% set score_class = 'progress-poor' %}
-                            {% set score_label = 'Poor' %}
-                            {% if score_percent >= 90 %}
-                                {% set score_class = 'progress-excellent' %}
-                                {% set score_label = 'Excellent' %}
-                            {% elif score_percent >= 70 %}
-                                {% set score_class = 'progress-good' %}
-                                {% set score_label = 'Good' %}
-                            {% elif score_percent >= 50 %}
-                                {% set score_class = 'progress-fair' %}
-                                {% set score_label = 'Fair' %}
-                            {% endif %}
-                            <div class="progress-bar {{ score_class }}" style="width: {{ score_percent }}%">
-                                {{ score_percent|int }}% {{ score_label }}
-                            </div>
-                        </div>
-                    </div>
                 </div>
-                <!-- Validation Penalty Explanation -->
-                {% if completeness_score.validation_penalty %}
-                <div class="validation-penalty-info">
-                    <h4>About the Validation Penalty</h4>
-                    <p>Your score includes a penalty because the AIBOM has schema validation issues. These are structural problems that don't comply with the CycloneDX specification requirements.</p>
-                    <p><strong>How to fix this:</strong> Look at the "Fix Validation Issues" section in the recommendations below. Fixing these issues will remove the penalty and improve your overall score.</p>
                 </div>
-                {% endif %}
-                <!-- Section Scores with Progress Bars and Tooltips -->
-                <table class="score-table">
                     <thead>
                         <tr>
-                            <th>Section</th>
-                            <th>Score</th>
-                            <th>Weight</th>
-                            <th>Progress</th>
                         </tr>
                     </thead>
                     <tbody>
-                        {% set weights = {'required_fields': 20, 'metadata': 20, 'component_basic': 20, 'component_model_card': 30, 'external_references': 10} %}
-                        {% set tooltips = {
-                            'required_fields': 'Basic SBOM fields required by the CycloneDX specification: bomFormat, specVersion, serialNumber, and version.',
-                            'metadata': 'Information about the AI SBOM itself: timestamp, tools used to generate it, authors, and component metadata.',
-                            'component_basic': 'Basic information about the AI model: type, name, bom-ref, PURL, description, and licenses.',
-                            'component_model_card': 'Detailed information about the model: parameters, quantitative analysis, and ethical considerations.',
-                            'external_references': 'Links to external resources like model cards, repositories, and datasets.'
-                        } %}
-                        {% set display_names = {
-                            'required_fields': 'Required Fields',
-                            'metadata': 'Metadata',
-                            'component_basic': 'Component Basic',
-                            'component_model_card': 'Model Card',
-                            'external_references': 'External References'
-                        } %}
-                        {% for section, score in completeness_score.section_scores.items() %}
-                            <tr>
-                                <td>
-                                    {{ display_names[section] }}
-                                    <span class="tooltip">(?)
-                                        <span class="tooltiptext">{{ tooltips[section] }}</span>
-                                    </span>
-                                </td>
-                                <td>{{ score|round(1) }}/{{ completeness_score.max_scores[section] }}</td>
-                                <td>{{ weights[section] }}%</td>
-                                <td style="width: 50%;">
-                                    <div class="progress-container">
-                                        {% set percent = (score / completeness_score.max_scores[section]) * 100 %}
-                                        {% set class = 'progress-poor' %}
-                                        {% if percent >= 90 %}
-                                            {% set class = 'progress-excellent' %}
-                                        {% elif percent >= 70 %}
-                                            {% set class = 'progress-good' %}
-                                        {% elif percent >= 50 %}
-                                            {% set class = 'progress-fair' %}
-                                        {% endif %}
-                                        <div class="progress-bar {{ class }}" style="width: {{ percent }}%">
-                                            {{ percent|int }}%
-                                        </div>
-                                    </div>
-                                </td>
-                            </tr>
                         {% endfor %}
                     </tbody>
                 </table>
-                <!-- How the Overall Score is Calculated Section -->
-                <div class="score-calculation">
-                    <h3>How the Overall Score is Calculated</h3>
-                    <!-- Missing Fields Section -->
-                    <div class="calculation-section missing-fields">
-                        <h4>Critical Missing Fields</h4>
-                        <p>The following fields are missing or incomplete and have the biggest impact on your score:</p>
-                        <ul>
-                            {% set missing_critical = [] %}
-                            {% for field, status in completeness_score.field_checklist.items() %}
-                                {% if "✘" in status %}
-                                    {% if completeness_score.field_tiers and field in completeness_score.field_tiers and completeness_score.field_tiers[field] == 'critical' %}
-                                        {% set _ = missing_critical.append(field) %}
-                                        <li>
-                                            <strong>{{ field }}</strong>
-                                            <span class="field-tier tier-critical"></span>
-                                            {% if field == "component.description" %}
-                                                - Add a detailed description of the model (at least 20 characters)
-                                            {% elif field == "component.purl" %}
-                                                - Add a valid PURL in the format pkg:huggingface/[owner]/[name]@[version]
-                                            {% elif field == "modelCard.modelParameters" %}
-                                                - Add model parameters section with architecture, size, and training details
-                                            {% elif field == "primaryPurpose" %}
-                                                - Add primary purpose information (what the model is designed for)
-                                            {% else %}
-                                                - This field is required for comprehensive documentation
-                                            {% endif %}
-                                        </li>
-                                    {% endif %}
                                 {% endif %}
-                            {% endfor %}
-                            {% if missing_critical|length == 0 %}
-                                <li>No critical fields are missing. Great job!</li>
-                            {% endif %}
-                        </ul>
-                    </div>
-                    <!-- Recommendations Section -->
-                    <div class="calculation-section recommendations">
-                        <h4>Recommendations to Improve Your Score</h4>
-                        <ol>
-                            {% if completeness_score.section_scores.component_model_card < completeness_score.max_scores.component_model_card %}
-                                <li>
-                                    <strong>Enhance Model Card</strong> (+{{ ((completeness_score.max_scores.component_model_card - completeness_score.section_scores.component_model_card) * 0.3)|round(1) }} points):
-                                    <ul>
-                                        {% if completeness_score.missing_fields.critical %}
-                                            {% for field in completeness_score.missing_fields.critical %}
-                                                {% if field == "modelCard.modelParameters" or field == "modelCard.considerations" %}
-                                                    <li>Add {{ field }} information</li>
-                                                {% endif %}
-                                            {% endfor %}
-                                        {% endif %}
-                                    </ul>
-                                </li>
-                            {% endif %}
-                            {% if completeness_score.section_scores.component_basic < completeness_score.max_scores.component_basic %}
-                                <li>
-                                    <strong>Add Basic Component Information</strong> (+{{ ((completeness_score.max_scores.component_basic - completeness_score.section_scores.component_basic) * 0.2)|round(1) }} points):
-                                    <ul>
-                                        {% if completeness_score.missing_fields.critical %}
-                                            {% for field in completeness_score.missing_fields.critical %}
-                                                {% if field == "name" or field == "description" or field == "purl" %}
-                                                    <li>Add {{ field }} information</li>
-                                                {% endif %}
-                                            {% endfor %}
-                                        {% endif %}
-                                        {% if completeness_score.missing_fields.important %}
-                                            {% for field in completeness_score.missing_fields.important %}
-                                                {% if field == "type" or field == "licenses" %}
-                                                    <li>Add {{ field }} information</li>
-                                                {% endif %}
-                                            {% endfor %}
-                                        {% endif %}
-                                    </ul>
-                                </li>
-                            {% endif %}
-                            {% if completeness_score.section_scores.metadata < completeness_score.max_scores.metadata %}
-                                <li>
-                                    <strong>Add Metadata</strong> (+{{ ((completeness_score.max_scores.metadata - completeness_score.section_scores.metadata) * 0.2)|round(1) }} points):
-                                    <ul>
-                                        {% if completeness_score.missing_fields.critical %}
-                                            {% for field in completeness_score.missing_fields.critical %}
-                                                {% if field == "primaryPurpose" or field == "suppliedBy" %}
-                                                    <li>Add {{ field }} information</li>
-                                                {% endif %}
-                                            {% endfor %}
-                                        {% endif %}
-                                        {% if completeness_score.missing_fields.supplementary %}
-                                            {% for field in completeness_score.missing_fields.supplementary %}
-                                                {% if field == "standardCompliance" or field == "domain" or field == "autonomyType" %}
-                                                    <li>Add {{ field }} information</li>
-                                                {% endif %}
-                                            {% endfor %}
-                                        {% endif %}
-                                    </ul>
-                                </li>
-                            {% endif %}
-                            {% if completeness_score.section_scores.external_references < completeness_score.max_scores.external_references %}
-                                <li>
-                                    <strong>Add External References</strong> (+{{ ((completeness_score.max_scores.external_references - completeness_score.section_scores.external_references) * 0.1)|round(1) }} points):
-                                    <ul>
-                                        {% if completeness_score.missing_fields.critical %}
-                                            {% for field in completeness_score.missing_fields.critical %}
-                                                {% if field == "downloadLocation" %}
-                                                    <li>Add download location reference</li>
-                                                {% endif %}
-                                            {% endfor %}
-                                        {% endif %}
-                                        <li>Add links to model card, repository, and dataset</li>
-                                    </ul>
-                                </li>
-                            {% endif %}
-                            {% if completeness_score.validation and not completeness_score.validation.valid %}
-                                <li>
-                                    <strong>Fix Validation Issues</strong> (remove validation penalty):
-                                    <ul>
-                                        {% for recommendation in completeness_score.validation.recommendations %}
-                                            <li>{{ recommendation }}</li>
-                                        {% endfor %}
-                                    </ul>
-                                </li>
-                            {% endif %}
-                        </ol>
                     </div>
-                    <!-- Scoring Rubric Section -->
-                    <div class="calculation-section scoring-rubric">
-                        <h4>Scoring Rubric</h4>
-                        <p>The overall score is calculated using a <strong>weighted normalization</strong> approach:</p>
-                        <p><strong>Total Score = Sum of (Section Score × Section Weight)</strong></p>
-                        <p>Where:</p>
                         <ul>
-                            <li>Section Score = Points earned in that section</li>
-                            <li>Section Weight = Section's maximum points ÷ Total possible points (100)</li>
                         </ul>
-                        <div class="note-box">
-                            <p><strong>Example calculation:</strong> If your SBOM has these section scores:</p>
-                            <ul>
-                                <li>Required Fields: 20 points × 0.20 weight = 4.0 points</li>
-                                <li>Metadata: 15 points × 0.20 weight = 3.0 points</li>
-                                <li>Component Basic: 10 points × 0.20 weight = 2.0 points</li>
-                                <li>Model Card: 10 points × 0.30 weight = 3.0 points</li>
-                                <li>External References: 5 points × 0.10 weight = 0.5 points</li>
-                            </ul>
-                            <p>The total score would be 12.5 points, even though the raw section scores sum to 60 points.</p>
-                            <p><strong>Note:</strong> The total score is <em>not</em> the sum of section scores. Each section contributes proportionally to its weight in the final score.</p>
-                        </div>
-                        <p>Fields are classified into three tiers based on importance:</p>
                         <ul>
-                            <li><span class="field-tier tier-critical"></span> <strong>Critical fields</strong>: Highest weight (3-4 points each)</li>
-                            <li><span class="field-tier tier-important"></span> <strong>Important fields</strong>: Medium weight (2-4 points each)</li>
-                            <li><span class="field-tier tier-supplementary"></span> <strong>Supplementary fields</strong>: Lower weight (1-2 points each)</li>
                         </ul>
-                        <p>Penalties are applied for missing critical fields:</p>
                         <ul>
-                            <li>Missing >3 critical fields: 20% penalty (score × 0.8)</li>
-                            <li>Missing 1-3 critical fields: 10% penalty (score × 0.9)</li>
-                            <li>Missing >5 important fields: 5% penalty (score × 0.95)</li>
                         </ul>
-                        {% if completeness_score.validation_penalty %}
-                        <p>Additional penalties are applied based on validation results:</p>
                         <ul>
-                            <li>Schema errors: Up to 50% reduction (10% per error)</li>
-                            <li>Schema warnings: Up to 20% reduction (5% per warning)</li>
                         </ul>
                         {% endif %}
                     </div>
                 </div>
             </div>
         </div>
         <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>
@@ -1209,17 +1395,17 @@
             </p>
         </div>
-         <!-- Info Section -->
-        <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>
         <!-- Footer -->
         <div class="footer">
             <p>© 2025 AI SBOM Generator | Powered by Aetheris AI</p>
         </div>
-   </div>
     <script>
         function switchTab(tabId) {
@@ -1272,4 +1458,5 @@
         });
     </script>
 </body>
-</html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI SBOM Generated</title>
+    <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=tvQoyfSXq4JVDJvyoOAfThXMw9mgZRducLzTjUOnVphMAP2MBTXzDKF8WIUJETdEqCHXbUfgy-ihVF7QjtQfVIhhPZixhTUykm7ogEKcAY8g8XaCJjgLJ20ey7kvNW5yNFjtTgdjbiRHA4-4FfeZelCLWCOSbbpWpDquPezYp8V_SOTuYVK6EghRcNZgchGXWWoSOoga9DiwoB_4FVDoLZLAdtsEBybX-rcletazWXVi9vxFurtEiSBk3ewixUb_l1FR4W7mdhQXaDegmrEu__o1qNa73vqLlLY22wmjB5rhQnOItFstTw-BRsUtYRbY7d-jjDlvtLjvqrwMm8rYZlFzpvbgjkeQzbbyXQy0Wd0YNm11gR1z-q0xI-BTRItFmStcjfEWzrsnhOWvBeHrGvEpX8yWcLTOAOHXrE6Cp-i3mThNUiOErT99ZiPPmhieQZl6oq1Ed3sSldNMH1hsMsKuGxs-FhkmukdqA7jGa4gLoH44TqKyiB9xYz9SYuz02ngy3Z_jH7YuKbVCIqs3_GoXzOcbdzr0fRyP6CTomcBrIoSZQEx7ViPv0Lp4wf3pPt_zyOSVCeQ5kf3vjTsS-_0fs5KrbHNv79lNkBALSrNDDJTBFTo7RboIfhfsRdK0mZXAwzUgMuQVQSTVfe38SAk81t5hep59Nt9DAPECVEYO1j8YUeSPMHfFOcMXU8Jf2pWawwZYjHry6zfQ9Lf7gr-4QPIIvNjN_0kEGt6x-V8_QriVH4z1LkeLkLsy8a_i95Z5CadplFml5XZnt_MAi9rOfF1SVGfUjKYelOg1hUTRfDmFyHR4V1RCVJvdXCY17EHPfT7r0V6TUWFNhWAK2dkA8Be-CH_sb0LcyK1nb4zXrMlOQIB-XMsPxVl_tE3jLRTn9DREQDPnQ2G1-KeyjdI9zyutUVukG3EAdmJ-mH-9ATWfGuZQpRxblkXPiq4Ssi6jYLmE9yLcJyyZ3IfDsEMq4ZF7hNIutja3YPlCNUnE1U1yxqcNZvodlEKoTBpE0eZmq1_VVvZZmADz2CY6ZGrMMLb4-JPFw6mY8Y6sWSIuVok5nId4MmVrvMjf_M0DdPkRyCsqNBfw89fUFjUGWe6N0TTU4r595mfdPEg4HJJsq7qRlMCp3n1K8xMbz3zJDHe0OW-9_TcA7dSK7WpxkX8gaXemJddZjRuqJEIo4U5ortUQxCgYREMUAHYnWNZzy0qiyKYR17bA4apHq40wF3L-D_NUKkCP_i08dsCEabPqDHWM2HGW04kchwOlVcZeMKM592clkn4Fv6eIioqQIbFhFjAdnPiqSm4xWNtQxVn6VusRr4Sah0Vw5WYWaBqcZ4sJiQ6OslO0HKY8rg4MO6xo8niPr2tn9V_qwCIPLfYXfgub5tEofKtQkChKgIhtY8HIkFF25ZRyQf-MBu-bOfEG6WSBiuAqm25MqU00kqMHmv-y8tORjPhwHfl78Z1U0w3bz1NUoWtzB_qKFL1aCR6K0B2I59gS2ZvIj5BBM0rz0_u2QuogHNq1HluUEq6GkefCTZI8ovLHPFSVqWkQxqmvs7w3l2P3b9wXGzvnTR01bEVDNUETDHsDO9faiPkKoBS_vOwHNlJEJdPhfIpULJ0VgULPBrfN3XtHk14dcEGcXaFwIfXjeDMs5RXb38hs0wCmXcFQlr0TxIQ5t8jPMef3zCKlqqHm2l1HtJQJfzAOxbxZ2DQ6-LaeGBgHE6iW" nonce="508f6bedf744be51dd051f51433cdbea" 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=aHR0cHM6Ly9tYWlsLWF0dGFjaG1lbnQuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2F0dGFjaG1lbnQvdS8wLz91aT0yJmlrPTI5MzQwOTYwNGImYXR0aWQ9MC4xJnBlcm1tc2dpZD1tc2ctZjoxODM1MTQzNjcwMjEyNTQ2MDM4JnRoPTE5NzdiZDcxZWVkMzRkZjYmdmlldz1hdHQmZGlzcD1zYWZlJnJlYWxhdHRpZD1mX21ienh0cTdrMCZ6dyZzYWRkYmF0PUFOR2pkSjlXOXNjTFh3Q0hueU9Bd0VFcFlrYUNSSDd4dFlPUFBYd0p6VndUbHZuLUhxTjMtSTFwOVk0d0tCMU10YWxVcTBWeW03TUJKWGVfcGNwa1kxVkowTjFmQTZqM2xUSm9nZlNPQ0FqcGtzSHROS0tBTXRtQ1ZqYTFnWkhPZUNfNWU0T3ExcFQxdUF2WE9kb19neDBxMlFMQnJMSnNobWQxZGd4RjY1MjdRRUxkUUlWRm0xY3V3Q1RlVGREWnlxYjZtdDdBcUI4UTJhdlJGaFRkUTE5eEx2QlFzOFJ2cXgxeDY5Y09mUjFmYlJpb2s3VzQ5TFp4eVY5T05pbVdyZHRnZ3d5Y1NfY2I0SkNveXRhXzd5d2NDamVpQmxaTGlMLUg1LU5DNTQ1TjhSZVNZVWRkeTJCSExzaFg4a2xLejdwaG04SVBPTlB4YzhsTk5TVjN1TkZlTTVrdWpSNUYxM0RJMjVWZ184ZEY3eGtDeENKYnk4QVBiTkpYVW5sOHlmZWR3b0FqTmtOU0taZTRRaHRsMnBFbWhBNU9DQTM1eUpKcGxFMEEzM1VweE41WFNxM2pRdFZrZDlFckllNnNWcUEtWjRSbGVuaEFJNG03Q3J3ZXctSjhjbllXN2NuZVJuaHoySWtkNkdhdVFubzRmOUxYV25wUnZsTkpVdTVTV2VDanZtRmtZOUJ0UVFjNGFCZHBiMEdIMkNIOXFZM1JxOEhOVTltN040ZUJKdUJLT2lIMUJEaVFWNFdHa052YW9INEdJYXRSRmFWYzBXcGFubERWblJnZS1GNzdvMkJSY1FpQkIzMVdFM0pxN3ZDRDlYSVoxckJNZnNzdGhnNEcxUGliNC1jSk1FakNJUWE0SDVQZUFCYUt6R0xpRVRNRWp1cFFXVWJJV3ZJMktOdHpEd04wQkpWcjVrM20zQ19qMl9ady1Qd296VG1qbjA5X1ZOdzlOSERyeGd2VnZxR01GQ3JDRHpQX1lNNnhhRlM4Tk82bDc0LVByNVZUYlIzQTJGdlhlVTJSRWIzMGV3NDlYUGM0VDYyLTUwRkstM3dySFlNNmtTQ3l4ZXJYNXBZbmxpOWZlRlU1blpzTFQ0dENyOGx5R0FReVJ1ZEpBTVl6YnNzai1pdjZXMk5wNmFRWDZZNktfZ1l4VmtPTWU1bzctMWdiTTFfWG5lMklNZl83dE5oTERLNTFPMTBNWHZYTWJOblhaNjhEOGpCMmFhdHhfaHlFbEtSb0RMU05KTHJuMVJlY0xGMy1Nb1hMLVNQVFM2MlNhdUV5RGxoNDZ0T3p2TUJPeG95UjF4TEI0OWVOSWJkODBidVprY1BLQ1ZNUmI2OTNGVUQ3eHowZ3h3c1lWRTZsOTI3MXlOUml6MHRBX1BuSk4zbEZkTUkzNy1pQjJSTlFDV0ZYVHc"/><style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             margin: 0;
             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: 600;
+            margin-bottom: 5px;
         }
+        .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;
+        }
+        .success-message {
+            text-align: left;
+            padding: 15px;
+            background-color: #d4edda;
+            border: 1px solid #c3e6cb;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+        .success-message h2 {
             margin: 0;
+            font-size: 18px;
+            color: #155724;
+            font-weight: 500;
+        }
+        .model-name {
             font-weight: 600;
+            color: #2c3e50;
         }
+        /* Footer styling */
+        .footer {
+            text-align: center;
+            padding: 20px;
+            color: #7f8c8d;
             font-size: 14px;
+            margin-top: 30px;
         }
         /* Content styling */
         .score-table td {
             padding: 12px;
         }
+        /* Adjust column widths for better progress bar display */
+        .score-table th:nth-child(1), .score-table td:nth-child(1) {
+            width: 25%; /* Category column */
+        }
+        .score-table th:nth-child(2), .score-table td:nth-child(2) {
+            width: 20%; /* Fields Present column */
+        }
+        .score-table th:nth-child(3), .score-table td:nth-child(3) {
+            width: 15%; /* Score column */
+        }
+        .score-table th:nth-child(4), .score-table td:nth-child(4) {
+            width: 40%; /* Progress column - wider for better display */
+        }
         .score-weight {
             font-size: 0.9em;
             color: #666;
             color: #2e7d32;
             margin-bottom: 15px;
         }
+        .recommendations ul {
+            margin-bottom: 0;
+            padding-left: 20px;
+        }
         .importance-indicator {
             display: inline-block;
             margin-left: 5px;
         /* Styles for completeness profile */
         .completeness-profile {
+            background-color: #f6f5f5;
             border-radius: 8px;
             padding: 20px;
             margin: 20px 0;
+            border-left: 4px solid #7f7c7c;
         }
         .profile-badge {
             display: inline-block;
             margin-bottom: 15px;
         }
+        /* Validation warning box styling */
+        .validation-warning-box {
+            background-color: #fff3e0;
+            border: 1px solid #ff9800;
+            border-left: 4px solid #ff9800;
             border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+            box-shadow: 0 2px 10px rgba(255, 152, 0, 0.1);
         }
+        .validation-warning-box h4 {
             margin-top: 0;
+            color: #e65100;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+        }
+        .validation-warning-box .warning-icon {
+            margin-right: 10px;
+            font-size: 1.2em;
+        }
+        .validation-warning-box .issue-summary {
+            margin-bottom: 15px;
+            line-height: 1.6;
+        }
+        .validation-warning-box .issue-details {
+            margin-bottom: 15px;
+        }
+        .validation-warning-box .issue-list {
+            margin: 10px 0;
+            padding-left: 20px;
+        }
+        .validation-warning-box .issue-list li {
+            margin-bottom: 8px;
+            line-height: 1.5;
+        }
+        .validation-warning-box .call-to-action {
+            margin-top: 15px;
+            padding-top: 15px;
+            border-top: 1px solid #ffcc80;
+        }
+        .validation-warning-box .call-to-action p {
+            margin-bottom: 10px;
+        }
+        .issue-tracker-link {
+            display: inline-block;
+            padding: 8px 16px;
+            background-color: #3498db;
+            color: white;
+            text-decoration: none;
+            border-radius: 4px;
+            font-weight: 500;
+            transition: background-color 0.3s;
+        }
+        .issue-tracker-link:hover {
+            background-color: #2980b9;
+            text-decoration: none;
+        }
+        /* Category table styling */
+        .category-table {
+            margin-bottom: 30px;
+        }
+        .category-table h4 {
             color: #2c3e50;
+            margin-bottom: 10px;
+            font-size: 18px;
         }
+        .category-result {
+            background-color: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+            margin-top: 10px;
+            font-weight: bold;
+        }
+        .field-type-legend {
+            background-color: #e3f2fd;
+            border-left: 4px solid #2196f3;
+            padding: 15px;
+            margin: 20px 0;
+            border-radius: 8px;
+            font-size: 0.9em;
+        }
+        .field-type-legend h4 {
+            margin-top: 0;
+            color: #1565c0;
+            margin-bottom: 10px;
+        }
+        .legend-item {
+            display: inline-block;
+            margin-right: 20px;
+            margin-bottom: 5px;
         }
+        /* Support section styling */
+        .support-section {
+            background-color: #f8f9fa;
+            border-left: 4px solid #6c757d;
             padding: 20px;
+            margin: 30px 0;
+            border-radius: 8px;
+            text-align: center;
         }
+        .support-section h3 {
+            margin-top: 0;
+            color: #495057;
+            margin-bottom: 15px;
+        }
+        .support-section p {
+            margin-bottom: 15px;
+            color: #6c757d;
+        }
+        .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;
+        }
+        .github-button:hover {
+            background-color: #2980b9;
+            text-decoration: none;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <!-- Header -->
+        <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="https://aetheris-ai-aibom-generator.hf.space/" class="generate-another-btn">🚀 Generate Another AI SBOM</a> -->
+                <a href="/" class="generate-another-btn">🚀 Generate Another AI SBOM</a>
+            </div>
+        </div>
+        <!-- Success Message
+        <div class="success-message">
+            <h2>✅ AI SBOM is Generated Successfully for <span class="model-name">{{ model_id }}</span></h2>
+        </div>  -->
+        <!-- Key Information -->
+        <div class="key-info">
+            <h3>📋 AI SBOM Summary for model <span class="model-name">{{ model_id }}</span></h3>
+            <div class="aibom-property">
+                <span class="property-name">Model:</span>
+                <span class="property-value">{{ model_id }}</span>
+            </div>
+            <div class="aibom-property">
+                <span class="property-name">Generated:</span>
+                <span class="property-value">{{ aibom.metadata.timestamp }}</span>
+            </div>
+            <div class="aibom-property">
+                <span class="property-name">SBOM Format:</span>
+                <span class="property-value">{{ aibom.bomFormat }} {{ aibom.specVersion }}</span>
+            </div>
+            <div class="aibom-property">
+                <span class="property-name">Serial Number:</span>
+                <span class="property-value">{{ aibom.serialNumber }}</span>
             </div>
         </div>
+        <!-- Download Section -->
+        <div class="download-section">
+            <p><strong>Download your AI SBOM:</strong></p>
+            <button onclick="downloadJSON()">📥 Download JSON</button>
         </div>
+        <!-- Completeness Profile -->
+        {% if completeness_score.completeness_profile %}
+        <div class="completeness-profile">
+            <h3>📊 Completeness Assessment</h3>
+            <div>
+                <span class="profile-badge profile-{{ completeness_score.completeness_profile.name|lower }}">
+                    {{ completeness_score.completeness_profile.name }}
+                </span>
+                <span>{{ completeness_score.completeness_profile.description }}</span>
+            </div>
         </div>
+        {% endif %}
+        <!-- Tabbed Content -->
+        <div class="aibom-viewer">
+            <div class="aibom-tabs">
+                <div class="aibom-tab active" onclick="switchTab('human-view')">Human-Friendly View</div>
+                <div class="aibom-tab" onclick="switchTab('field-checklist')">Field Checklist</div>
+                <div class="aibom-tab" onclick="switchTab('score-view')">Score Report</div>
+                <div class="aibom-tab" onclick="switchTab('json-view')">JSON View</div>
+            </div>
+            <!-- Human-Friendly View Tab -->
+            <div id="human-view" class="tab-content active">
+                <div class="aibom-section">
+                    <h4>🤖 AI Model Information</h4>
+                    <div class="aibom-property">
+                        <span class="property-name">Name:</span>
+                        <span class="property-value">{{ aibom.components[0].name if aibom.components else 'Not specified' }}</span>
+                    </div>
                     <div class="aibom-property">
+                        <span class="property-name">Type:</span>
+                        <span class="property-value">{{ aibom.components[0].type if aibom.components else 'Not specified' }}</span>
                     </div>
                     <div class="aibom-property">
+                        <span class="property-name">Version:</span>
+                        <span class="property-value">{{ aibom.components[0].version if aibom.components else 'Not specified' }}</span>
                     </div>
                     <div class="aibom-property">
+                        <span class="property-name">Description:</span>
+                        <span class="property-value">{{ aibom.components[0].description if aibom.components and aibom.components[0].description else 'Not specified' }}</span>
                     </div>
                     <div class="aibom-property">
+                        <span class="property-name">PURL:</span>
+                        <span class="property-value">{{ aibom.components[0].purl if aibom.components and aibom.components[0].purl else 'Not specified' }}</span>
                     </div>
+                    {% if aibom.components and aibom.components[0].licenses %}
                     <div class="aibom-property">
+                        <span class="property-name">Licenses:</span>
+                        <span class="property-value">
+                            {% for license in aibom.components[0].licenses %}
+                                <span class="tag">{{ license.license.id if license.license else 'Unknown' }}</span>
+                            {% endfor %}
+                        </span>
                     </div>
                     {% endif %}
                 </div>
                 {% if aibom.components and aibom.components[0].modelCard %}
                 <div class="aibom-section">
+                    <h4>📊 Model Card</h4>
+                    {% if aibom.components[0].modelCard.modelParameters %}
+                    <div class="aibom-property">
+                        <span class="property-name">Architecture:</span>
+                        <span class="property-value">{{ aibom.components[0].modelCard.modelParameters.modelArchitecture if aibom.components[0].modelCard.modelParameters.modelArchitecture else 'Not specified' }}</span>
                     </div>
+                    <div class="aibom-property">
+                        <span class="property-name">Task:</span>
+                        <span class="property-value">{{ aibom.components[0].modelCard.modelParameters.task if aibom.components[0].modelCard.modelParameters.task else 'Not specified' }}</span>
+                    </div>
+                    {% endif %}
+                    {% if aibom.components[0].modelCard.properties %}
+                    <div class="aibom-property">
+                        <span class="property-name">Additional Properties:</span>
+                        <span class="property-value">
+                            {% for prop in aibom.components[0].modelCard.properties %}
+                                <span class="tag">{{ prop.name }}: {{ prop.value }}</span>
+                            {% endfor %}
+                        </span>
+                    </div>
+                    {% endif %}
                 </div>
                 {% endif %}
+                {% if aibom.externalReferences %}
                 <div class="aibom-section">
+                    <h4>🔗 External References</h4>
+                    {% for ref in aibom.externalReferences %}
+                    <div class="aibom-property">
+                        <span class="property-name">{{ ref.type|title }}:</span>
+                        <span class="property-value"><a href="{{ ref.url }}" target="_blank">{{ ref.url }}</a></span>
                     </div>
+                    {% endfor %}
                 </div>
                 {% endif %}
+                <div class="aibom-section">
+                    <h4>🛠️ Generation Metadata</h4>
+                    <div class="aibom-property">
+                        <span class="property-name">Generated by:</span>
+                        <span class="property-value">{{ aibom.metadata.tools.components[0].name if aibom.metadata.tools and aibom.metadata.tools.components else 'Unknown' }}</span>
                     </div>
+                    <div class="aibom-property">
+                        <span class="property-name">Timestamp:</span>
+                        <span class="property-value">{{ aibom.metadata.timestamp }}</span>
                     </div>
+                    {% if aibom.metadata.component %}
+                    <div class="aibom-property">
+                        <span class="property-name">Component Ref:</span>
+                        <span class="property-value">{{ aibom.metadata.component['bom-ref'] }}</span>
                     </div>
+                    {% endif %}
                 </div>
+            </div>
+<!-- Field Checklist Tab -->
+<div id="field-checklist" class="tab-content">
+    <div class="content-section">
+        <h3>Field Checklist & Mapping</h3>
+        <!-- Field Type Legend -->
+        <div class="field-type-legend">
+            <h4>Legend</h4>
+            <div class="legend-item">
+                <span class="field-tier tier-critical"></span>
+                <span>Critical</span>
+            </div>
+            <div class="legend-item">
+                <span class="field-tier tier-important"></span>
+                <span>Important</span>
+            </div>
+            <div class="legend-item">
+                <span class="field-tier tier-supplementary"></span>
+                <span>Supplementary</span>
+            </div>
+            <div class="legend-item">
+                <strong>CDX</strong> = CycloneDX Standard
+            </div>
+            <div class="legend-item">
+                <strong>AI</strong> = AI-Specific Extension
             </div>
         </div>
+        <p>This breakdown outlines field categories and statuses in the AI SBOM generated for model <strong>{{ model_id }}</strong>, showing how each field impacts the completeness score.</p>
+        {% if completeness_score.field_checklist %}
+            <!-- Required Fields Category -->
+            <div class="category-table">
+                <h4>Required Fields Category</h4>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>Field Name</th>
+                            <th>Actual Location</th>
+                            <th>Tier</th>
+                            <th>Type</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% set required_fields = ['bomFormat', 'specVersion', 'serialNumber', 'version'] %}
+                        {% for field in required_fields %}
+                        <tr>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    <span class="check-mark">✔</span>
+                                {% else %}
+                                    <span class="x-mark">✘</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ field }}</td>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    $.{{ field }}
+                                {% else %}
+                                    Not found
+                                {% endif %}
+                            </td>
+                            <td><span class="field-tier tier-critical"></span> Critical</td>
+                            <td>CDX</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+                <div class="category-result">
+                    Result: {{ completeness_score.category_details.required_fields.present_fields if completeness_score.category_details else 'N/A' }}/{{ completeness_score.category_details.required_fields.total_fields if completeness_score.category_details else 'N/A' }} present
+                    ({{ completeness_score.category_details.required_fields.percentage if completeness_score.category_details else 'N/A' }}%) =
+                    {{ completeness_score.section_scores.required_fields if completeness_score.section_scores else 'N/A' }}/20 points
+                </div>
+            </div>
+            <!-- Metadata Category -->
+            <div class="category-table">
+                <h4>Metadata Category</h4>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>Field Name</th>
+                            <th>Actual Location</th>
+                            <th>Tier</th>
+                            <th>Type</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% set metadata_fields = [
+                            ('primaryPurpose', 'Critical'),
+                            ('suppliedBy', 'Critical'),
+                            ('standardCompliance', 'Supplementary'),
+                            ('domain', 'Supplementary'),
+                            ('autonomyType', 'Supplementary')
+                        ] %}
+                        {% for field, tier in metadata_fields %}
+                        <tr>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    <span class="check-mark">✔</span>
+                                {% else %}
+                                    <span class="x-mark">✘</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ field }}</td>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    $.metadata.properties[name="{{ field }}"]
+                                {% else %}
+                                    Not found
+                                {% endif %}
+                            </td>
+                            <td><span class="field-tier tier-{{ tier.lower() }}"></span> {{ tier }}</td>
+                            <td>AI</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+                <div class="category-result">
+                    Result: {{ completeness_score.category_details.metadata.present_fields if completeness_score.category_details else 'N/A' }}/{{ completeness_score.category_details.metadata.total_fields if completeness_score.category_details else 'N/A' }} present
+                    ({{ completeness_score.category_details.metadata.percentage if completeness_score.category_details else 'N/A' }}%) =
+                    {{ completeness_score.section_scores.metadata if completeness_score.section_scores else 'N/A' }}/20 points
                 </div>
+            </div>
+            <!-- Component Basic Category -->
+            <div class="category-table">
+                <h4>Component Basic Category</h4>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>Field Name</th>
+                            <th>Actual Location</th>
+                            <th>Tier</th>
+                            <th>Type</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% set component_basic_fields = [
+                            ('name', 'Critical'),
+                            ('type', 'Important'),
+                            ('purl', 'Important'),
+                            ('description', 'Important'),
+                            ('licenses', 'Important')
+                        ] %}
+                        {% for field, tier in component_basic_fields %}
+                        <tr>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    <span class="check-mark">✔</span>
+                                {% else %}
+                                    <span class="x-mark">✘</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ field }}</td>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    $.components[0].{{ field }}
+                                {% else %}
+                                    {% if field == 'description' %}
+                                        Not found in component level
+                                    {% else %}
+                                        Not found
+                                    {% endif %}
+                                {% endif %}
+                            </td>
+                            <td><span class="field-tier tier-{{ tier.lower() }}"></span> {{ tier }}</td>
+                            <td>CDX</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+                <div class="category-result">
+                    Result: {{ completeness_score.category_details.component_basic.present_fields if completeness_score.category_details else 'N/A' }}/{{ completeness_score.category_details.component_basic.total_fields if completeness_score.category_details else 'N/A' }} present
+                    ({{ completeness_score.category_details.component_basic.percentage if completeness_score.category_details else 'N/A' }}%) =
+                    {{ completeness_score.section_scores.component_basic if completeness_score.section_scores else 'N/A' }}/20 points
                 </div>
+            </div>
+            <!-- Component Model Card Category -->
+            <div class="category-table">
+                <h4>Component Model Card Category</h4>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>Field Name</th>
+                            <th>Actual Location</th>
+                            <th>Tier</th>
+                            <th>Type</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% set model_card_fields = [
+                            ('energyConsumption', 'Important'),
+                            ('hyperparameter', 'Important'),
+                            ('limitation', 'Important'),
+                            ('safetyRiskAssessment', 'Important'),
+                            ('typeOfModel', 'Important'),
+                            ('modelExplainability', 'Supplementary'),
+                            ('energyQuantity', 'Supplementary'),
+                            ('energyUnit', 'Supplementary'),
+                            ('informationAboutTraining', 'Supplementary'),
+                            ('informationAboutApplication', 'Supplementary'),
+                            ('metric', 'Supplementary'),
+                            ('metricDecisionThreshold', 'Supplementary'),
+                            ('modelDataPreprocessing', 'Supplementary'),
+                            ('useSensitivePersonalInformation', 'Supplementary')
+                        ] %}
+                        {% for field, tier in model_card_fields %}
+                        <tr>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    <span class="check-mark">✔</span>
+                                {% else %}
+                                    <span class="x-mark">✘</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ field }}</td>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    {% if field == 'typeOfModel' %}
+                                        $.metadata.properties[name="{{ field }}"]
+                                    {% else %}
+                                        $.components[0].modelCard.{{ field }}
+                                    {% endif %}
+                                {% else %}
+                                    Not found
+                                {% endif %}
+                            </td>
+                            <td><span class="field-tier tier-{{ tier.lower() }}"></span> {{ tier }}</td>
+                            <td>AI</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+                <div class="category-result">
+                    Result: {{ completeness_score.category_details.component_model_card.present_fields if completeness_score.category_details else 'N/A' }}/{{ completeness_score.category_details.component_model_card.total_fields if completeness_score.category_details else 'N/A' }} present
+                    ({{ completeness_score.category_details.component_model_card.percentage if completeness_score.category_details else 'N/A' }}%) =
+                    {{ completeness_score.section_scores.component_model_card if completeness_score.section_scores else 'N/A' }}/30 points
                 </div>
+            </div>
+            <!-- External References Category -->
+            <div class="category-table">
+                <h4>External References Category</h4>
+                <table>
                     <thead>
                         <tr>
+                            <th>Status</th>
+                            <th>Field Name</th>
+                            <th>Actual Location</th>
+                            <th>Tier</th>
+                            <th>Type</th>
                         </tr>
                     </thead>
                     <tbody>
+                        {% set external_ref_fields = [('downloadLocation', 'Critical')] %}
+                        {% for field, tier in external_ref_fields %}
+                        <tr>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    <span class="check-mark">✔</span>
+                                {% else %}
+                                    <span class="x-mark">✘</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ field }}</td>
+                            <td>
+                                {% if completeness_score.field_checklist.get(field, '').startswith('✔') %}
+                                    $.externalReferences[type="distribution"]
+                                {% else %}
+                                    Not found
+                                {% endif %}
+                            </td>
+                            <td><span class="field-tier tier-{{ tier.lower() }}"></span> {{ tier }}</td>
+                            <td>CDX</td>
+                        </tr>
                         {% endfor %}
                     </tbody>
                 </table>
+                <div class="category-result">
+                    Result: {{ completeness_score.category_details.external_references.present_fields if completeness_score.category_details else 'N/A' }}/{{ completeness_score.category_details.external_references.total_fields if completeness_score.category_details else 'N/A' }} present
+                    ({{ completeness_score.category_details.external_references.percentage if completeness_score.category_details else 'N/A' }}%) =
+                    {{ completeness_score.section_scores.external_references if completeness_score.section_scores else 'N/A' }}/10 points
+                </div>
+            </div>
+        {% else %}
+            <p>Field checklist data not available.</p>
+        {% endif %}
+    </div>
+</div>
+            <!-- Score Report Tab -->
+            <div id="score-view" class="tab-content">
+                <div class="content-section">
+                    <h3>📊 Completeness Score Report</h3>
+                    <!-- Total Score Display -->
+                    <div class="total-score-container">
+                        <div class="total-score">{{ (completeness_score.total_score if completeness_score.total_score != "Undefined" else 0)|round(1) }}/100</div>
+                        <div class="total-progress">
+                            <div class="progress-container">
+                                {% set score_percent = completeness_score.total_score %}
+                                {% if score_percent >= 90 %}
+                                    {% set score_class = 'progress-excellent' %}
+                                    {% set score_label = 'Excellent' %}
+                                {% elif score_percent >= 70 %}
+                                    {% set score_class = 'progress-good' %}
+                                    {% set score_label = 'Good' %}
+                                {% elif score_percent >= 50 %}
+                                    {% set score_class = 'progress-fair' %}
+                                    {% set score_label = 'Fair' %}
+                                {% else %}
+                                    {% set score_class = 'progress-poor' %}
+                                    {% set score_label = 'Poor' %}
                                 {% endif %}
+                                <div class="progress-bar {{ score_class }}" style="width: {{ score_percent }}%">
+                                    {{ score_percent|int }}% {{ score_label }}
+                                </div>
+                            </div>
+                        </div>
                     </div>
+                    <!-- Generic Scoring Explanation -->
+                    <div class="scoring-rubric">
+                        <h4>How AI SBOM Completeness is Scored</h4>
+                        <p>The completeness score evaluates how well your AI SBOM documents the model across five key categories:</p>
                         <ul>
+                            <li><strong>Required Fields (20 points):</strong> Basic SBOM structure mandated by CycloneDX</li>
+                            <li><strong>Metadata (20 points):</strong> Information about the SBOM generation and model purpose</li>
+                            <li><strong>Component Basic (20 points):</strong> Essential model identification and licensing</li>
+                            <li><strong>Model Card (30 points):</strong> Detailed AI-specific documentation for transparency</li>
+                            <li><strong>External References (10 points):</strong> Links to model resources and documentation</li>
                         </ul>
+                        <p><strong>Calculation Method:</strong></p>
+                        <p>Each category score = (Present Fields ÷ Total Fields) × Maximum Points</p>
+                        <p>Subtotal = Sum of all category scores</p>
+                        <p>Final Score = Subtotal × Penalty Factor (if applicable)</p>
+                        <h4>Penalty Structure:</h4>
+                        <p><strong>Critical Fields Missing:</strong></p>
                         <ul>
+                            <li>0-1 missing: No penalty</li>
+                            <li>2-3 missing: 10% penalty (×0.9)</li>
+                            <li>4+ missing: 20% penalty (×0.8)</li>
                         </ul>
+                        <p><strong>Important Fields Missing:</strong></p>
                         <ul>
+                            <li>0-4 missing: No penalty</li>
+                            <li>5+ missing: 5% penalty (×0.95)</li>
                         </ul>
+                        <p><strong>Note:</strong> Penalties are cumulative and applied to the subtotal. For example, if you have 3 critical fields missing AND 5 important fields missing, both penalties apply: Subtotal × 0.9 × 0.95 = Final Score.</p>
+                    </div>
+                    <!-- Specific Breakdown for This SBOM -->
+                    <div class="note-box">
+                        <h4>Your AI SBOM Breakdown</h4>
+                        <p><strong>Model:</strong> {{ model_id }}</p>
+                        <table class="score-table">
+                            <thead>
+                                <tr>
+                                    <th>Category</th>
+                                    <th>Fields Present</th>
+                                    <th>Score</th>
+                                    <th>Progress</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% if completeness_score.category_details and completeness_score.section_scores %}
+                                    {% set categories = [
+                                        ('Required Fields', 'required_fields', 20),
+                                        ('Metadata', 'metadata', 20),
+                                        ('Component Basic', 'component_basic', 20),
+                                        ('Model Card', 'component_model_card', 30),
+                                        ('External References', 'external_references', 10)
+                                    ] %}
+                                    {% for display_name, key, max_score in categories %}
+                                    <tr>
+                                        <td>{{ display_name }}</td>
+                                        <td>{{ completeness_score.category_details[key].present_fields }}/{{ completeness_score.category_details[key].total_fields }}</td>
+                                        <td>{{ completeness_score.section_scores[key]|round(1) }}/{{ max_score }}</td>
+                                        <td>
+                                            <div class="progress-container">
+                                                {% set percentage = completeness_score.category_details[key].percentage %}
+                                                {% if percentage >= 80 %}
+                                                    {% set progress_class = "progress-excellent" %}
+                                                {% elif percentage >= 60 %}
+                                                    {% set progress_class = "progress-good" %}
+                                                {% elif percentage >= 40 %}
+                                                    {% set progress_class = "progress-fair" %}
+                                                {% else %}
+                                                    {% set progress_class = "progress-poor" %}
+                                                {% endif %}
+                                                <div class="progress-bar {{ progress_class }}" style="width: {{ percentage }}%">{{ percentage|round(0) }}%</div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    {% endfor %}
+                                {% else %}
+                                    <tr><td colspan="4">Breakdown data not available</td></tr>
+                                {% endif %}
+                            </tbody>
+                        </table>
+                    </div>
+                        <p><strong>Calculation:</strong></p>
+                        <p>Subtotal:
+                        {% if completeness_score.section_scores %}
+                            {% for category, score in completeness_score.section_scores.items() %}
+                                {{ score|round(1) }}{% if not loop.last %} + {% endif %}
+                            {% endfor %}
+                            = <strong>{{ completeness_score.subtotal_score|round(1) }}/100</strong>
+                        {% else %}
+                            <strong>{{ completeness_score.subtotal_score|round(1) }}/100</strong>
+                        {% endif %}
+                        </p>
+                        {% if completeness_score.penalty_applied %}
+                        <p>Penalty Applied: <strong>-{{ completeness_score.penalty_percentage }}%</strong> ({{ completeness_score.penalty_reason }})</p>
+                        <p>Final Score: {{ completeness_score.subtotal_score|round(1) }} × {{ completeness_score.penalty_factor }} = <strong>{{ completeness_score.total_score|round(1) }}/100</strong></p>
+                        {% else %}
+                        <p>No penalties applied</p>
+                        <p>Final Score: <strong>{{ completeness_score.total_score|round(1) }}/100</strong></p>
+                        {% endif %}
+                    </div>
+                    <!-- Missing Fields Analysis -->
+                    {% if completeness_score.missing_counts %}
+                    <div class="missing-fields">
+                        <h4>Missing Fields Summary</h4>
                         <ul>
+                            <li><strong>Critical:</strong> {{ completeness_score.missing_counts.critical }} missing</li>
+                            <li><strong>Important:</strong> {{ completeness_score.missing_counts.important }} missing</li>
+                            <li><strong>Supplementary:</strong> {{ completeness_score.missing_counts.supplementary }} missing</li>
                         </ul>
+                        {% if completeness_score.missing_counts.important >= 5 %}
+                        <p><strong>Impact:</strong> Missing multiple critical and/or important fields will incur penalties according to the Penalty Structure.</p>
                         {% endif %}
                     </div>
+                    {% endif %}
+                    <!-- Recommendations -->
+                    {% if completeness_score.recommendations %}
+                    <div class="recommendations">
+                      <h4>General Recommendations to Improve AI SBOM Completeness</h4>
+                      <ul>
+                          <li><strong>Required Fields:</strong> Ensure the model is published with a clear name, version, and hosting platform information to allow proper SBOM structuring.</li>
+                          <li><strong>Metadata:</strong> Include author or organization name, purpose of the model, and relevant timestamps in the model repository or card.</li>
+                          <li><strong>Component Basic:</strong> Provide a descriptive model title, a meaningful description, a valid license, and a consistent version reference (e.g., tags or commits).</li>
+                          <li><strong>Model Card:</strong> Fill out structured sections for model parameters, evaluation metrics, limitations, and ethical considerations to enable full transparency.</li>
+                          <li><strong>External References:</strong> Add links to source code, datasets, documentation, and versioned download locations to support traceability and reproducibility.</li>
+                      </ul>
+                  </div>
+                    {% endif %}
+                </div>
+            </div>
+            <!-- JSON View Tab -->
+            <div id="json-view" class="tab-content">
+                <div class="content-section">
+                    <h3>📄 Raw JSON View</h3>
+                    <p>This is the complete AI SBOM in CycloneDX JSON format:</p>
+                    <div class="json-view">
+                        <pre>{{ aibom|tojson(indent=2) }}</pre>
+                    </div>
                 </div>
             </div>
         </div>
+        <!-- Support Section -->
+        <div class="support-section">
+            <h3>🛠️ Need Help or Found an Issue?</h3>
+            <p>If you encountered any problems, found a bug, or have suggestions for improvement, we'd love to hear from you!</p>
+            <a href="https://github.com/aetheris-ai/aibom-generator/issues" target="_blank" class="github-button">
+                Report Issue on GitHub
+            </a>
+        </div>
+        <!-- Help us spread the word 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>
             </p>
         </div>
+        <!-- Info Section -->
+        <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>
         <!-- Footer -->
         <div class="footer">
             <p>© 2025 AI SBOM Generator | Powered by Aetheris AI</p>
         </div>
+    </div>
     <script>
         function switchTab(tabId) {
         });
     </script>
 </body>
+</html>