Update templates/result.html

templates/result.html

@@ -380,7 +380,7 @@
     {% 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>This AI SBOM was enhanced using <strong>{{ enhancement_report.ai_model|default('AI Model') }}</strong></p>
         <p>Original Score: {{ enhancement_report.original_score.total_score|default(0)|round(1) }}/100</p>
         <p>Enhanced Score: {{ enhancement_report.final_score.total_score|default(0)|round(1) }}/100</p>
         <p>Improvement: <span class="improvement-value">+{{ enhancement_report.improvement|default(0)|round(1) }} points</span></p>
@@ -625,179 +625,177 @@
                 </div>
             </div>
             {% endif %}
+            
+            <!-- Metadata Section -->
+            {% if aibom.metadata %}
+            <div class="aibom-section">
+                <h4 class="collapsible" onclick="toggleCollapsible(this)">Metadata</h4>
+                <div class="collapsible-content">
+                    {% if aibom.metadata.timestamp %}
+                    <div class="aibom-property">
+                        <div class="property-name">Timestamp:</div>
+                        <div class="property-value">{{ aibom.metadata.timestamp }}</div>
+                    </div>
+                    {% endif %}
+                    
+                    {% if aibom.metadata.tools %}
+                    <div class="aibom-property">
+                        <div class="property-name">Tools:</div>
+                        <div class="property-value">
+                            {% for tool in aibom.metadata.tools %}
+                                <div>{{ tool.name }} {% if tool.version %}({{ tool.version }}){% endif %}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                    
+                    {% if aibom.metadata.authors %}
+                    <div class="aibom-property">
+                        <div class="property-name">Authors:</div>
+                        <div class="property-value">
+                            {% for author in aibom.metadata.authors %}
+                                <div>{{ author.name }} {% if author.email %}({{ author.email }}){% endif %}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                    
+                    {% if aibom.metadata.properties %}
+                    <div class="aibom-property">
+                        <div class="property-name">Properties:</div>
+                        <div class="property-value">
+                            {% for prop in aibom.metadata.properties %}
+                                <div><strong>{{ prop.name }}:</strong> {{ prop.value }}</div>
+                            {% endfor %}
+                        </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">
+                    {% for ref in aibom.components[0].externalReferences %}
+                    <div class="aibom-property">
+                        <div class="property-name">{{ ref.type|title if ref.type else 'Reference' }}:</div>
+                        <div class="property-value">
+                            <a href="{{ ref.url }}" target="_blank">{{ ref.url }}</a>
+                            {% if ref.comment %}<div>{{ ref.comment }}</div>{% endif %}
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endif %}
         </div>
     </div>
 
     <div id="json-view" class="tab-content">
         <div class="json-view">
-            <pre>{{ aibom|tojson(indent=2) }}</pre>
+            <pre>{{ aibom | tojson(indent=2) }}</pre>
         </div>
     </div>
 
     <div id="field-checklist" class="tab-content">
-        <h3>AI SBOM Field Completeness</h3>
+        <h3>Field Checklist</h3>
         
+        <!-- Field Tier Legend -->
         <div class="tier-legend">
             <div class="tier-legend-item">
-                <div class="field-tier tier-critical"></div>
-                <span>Critical Fields</span>
+                <span class="field-tier tier-critical"></span>
+                <span>Critical</span>
             </div>
             <div class="tier-legend-item">
-                <div class="field-tier tier-important"></div>
-                <span>Important Fields</span>
+                <span class="field-tier tier-important"></span>
+                <span>Important</span>
             </div>
             <div class="tier-legend-item">
-                <div class="field-tier tier-supplementary"></div>
-                <span>Supplementary Fields</span>
+                <span class="field-tier tier-supplementary"></span>
+                <span>Supplementary</span>
             </div>
         </div>
         
-        <table>
-            <tr>
-                <th>Field</th>
-                <th>Status</th>
-            </tr>
-            <!-- Basic Information -->
-            <tr>
-                <td><div class="field-tier tier-critical"></div> Model Name</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].name else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].name else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-critical"></div> Model Type</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].type else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].type else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-critical"></div> Model Version</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].version else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].version else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-important"></div> Model Description</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].description else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].description else 'Missing' }}
-                </td>
-            </tr>
-            
-            <!-- Model Card -->
-            <tr>
-                <td><div class="field-tier tier-important"></div> Model Parameters</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].modelCard and aibom.components[0].modelCard.modelParameters else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].modelCard and aibom.components[0].modelCard.modelParameters else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-important"></div> Performance Metrics</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].modelCard and aibom.components[0].modelCard.quantitativeAnalysis and aibom.components[0].modelCard.quantitativeAnalysis.performanceMetrics else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].modelCard and aibom.components[0].modelCard.quantitativeAnalysis and aibom.components[0].modelCard.quantitativeAnalysis.performanceMetrics else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-supplementary"></div> Ethical Considerations</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].modelCard and aibom.components[0].modelCard.considerations and aibom.components[0].modelCard.considerations.ethicalConsiderations else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].modelCard and aibom.components[0].modelCard.considerations and aibom.components[0].modelCard.considerations.ethicalConsiderations else 'Missing' }}
-                </td>
-            </tr>
-            
-            <!-- Training Data -->
-            <tr>
-                <td><div class="field-tier tier-critical"></div> Training Datasets</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].trainingData and aibom.components[0].trainingData.datasets else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].trainingData and aibom.components[0].trainingData.datasets else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-important"></div> Data Preprocessing</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].trainingData and aibom.components[0].trainingData.preprocessing else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].trainingData and aibom.components[0].trainingData.preprocessing else 'Missing' }}
-                </td>
-            </tr>
-            
-            <!-- Training Process -->
-            <tr>
-                <td><div class="field-tier tier-important"></div> Training Method</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.trainingMethod else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.trainingMethod else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-important"></div> Hyperparameters</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.hyperparameters else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.hyperparameters else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-supplementary"></div> Compute Infrastructure</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.computeInfrastructure else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.computeInfrastructure else 'Missing' }}
-                </td>
-            </tr>
-            
-            <!-- Evaluation -->
-            <tr>
-                <td><div class="field-tier tier-important"></div> Evaluation Metrics</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].evaluation and aibom.components[0].evaluation.metrics else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].evaluation and aibom.components[0].evaluation.metrics else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-important"></div> Evaluation Datasets</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].evaluation and aibom.components[0].evaluation.datasets else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].evaluation and aibom.components[0].evaluation.datasets else 'Missing' }}
-                </td>
-            </tr>
-            
-            <!-- Usage -->
-            <tr>
-                <td><div class="field-tier tier-important"></div> Intended Use</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].usage and aibom.components[0].usage.intendedUse else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].usage and aibom.components[0].usage.intendedUse else 'Missing' }}
-                </td>
-            </tr>
-            <tr>
-                <td><div class="field-tier tier-supplementary"></div> Out of Scope Uses</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].usage and aibom.components[0].usage.outOfScopeUses else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].usage and aibom.components[0].usage.outOfScopeUses else 'Missing' }}
-                </td>
-            </tr>
-            
-            <!-- Licenses -->
-            <tr>
-                <td><div class="field-tier tier-critical"></div> Licenses</td>
-                <td class="{{ 'present' if aibom.components and aibom.components[0].licenses else 'missing' }}">
-                    {{ 'Present' if aibom.components and aibom.components[0].licenses else 'Missing' }}
-                </td>
-            </tr>
-        </table>
+        {% if completeness_score and completeness_score.field_checklist %}
+        <ul>
+            {% for field, status in completeness_score.field_checklist.items() %}
+                {% if "✔" in status %}
+                    <li class="present">{{ status }} {{ field }}
+                        {% if completeness_score.field_tiers and field in completeness_score.field_tiers %}
+                            <span class="field-tier tier-{{ completeness_score.field_tiers[field] }}"></span>
+                        {% endif %}
+                    </li>
+                {% else %}
+                    <li class="missing">{{ status }} {{ field }}
+                        {% if completeness_score.field_tiers and field in completeness_score.field_tiers %}
+                            <span class="field-tier tier-{{ completeness_score.field_tiers[field] }}"></span>
+                        {% endif %}
+                        
+                        {% if field == "component.description" %}
+                            <span class="importance-indicator high-importance">★★★</span>
+                            <span class="tooltip">(?)
+                                <span class="tooltiptext">A detailed description of the model is essential for users to understand its purpose and capabilities. Add a description that is at least 20 characters long.</span>
+                            </span>
+                        {% elif field == "component.purl" %}
+                            <span class="importance-indicator high-importance">★★★</span>
+                            <span class="tooltip">(?)
+                                <span class="tooltiptext">Package URL (PURL) is critical for uniquely identifying the model. It should follow the format pkg:huggingface/[owner]/[name]@[version].</span>
+                            </span>
+                        {% elif field == "modelCard.modelParameters" %}
+                            <span class="importance-indicator high-importance">★★★</span>
+                            <span class="tooltip">(?)
+                                <span class="tooltiptext">Model parameters provide essential technical details about the model architecture, training, and capabilities.</span>
+                            </span>
+                        {% elif field == "modelCard.considerations" %}
+                            <span class="importance-indicator medium-importance">★★</span>
+                            <span class="tooltip">(?)
+                                <span class="tooltiptext">Considerations section should include ethical considerations, limitations, and risks associated with the model.</span>
+                            </span>
+                        {% elif field == "externalReferences" %}
+                            <span class="importance-indicator medium-importance">★★</span>
+                            <span class="tooltip">(?)
+                                <span class="tooltiptext">External references provide links to additional resources like model cards, repositories, and datasets.</span>
+                            </span>
+                        {% else %}
+                            <span class="importance-indicator low-importance">★</span>
+                            <span class="tooltip">(?)
+                                <span class="tooltiptext">This field contributes to the completeness of your AI SBOM.</span>
+                            </span>
+                        {% endif %}
+                    </li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+        {% else %}
+        <p>Field checklist information is not available for this AI SBOM.</p>
+        {% endif %}
     </div>
 
     <div id="score-view" class="tab-content">
         <h3>AI SBOM Completeness Score</h3>
         
-        <div class="total-score-container">
-            <div class="total-score">{{ enhancement_report.final_score.total_score|default(0)|round(1) }}/100</div>
-            <div class="total-progress">
-                <div class="progress-container">
-                    {% set score = enhancement_report.final_score.total_score|default(0) %}
-                    <div class="progress-bar 
-                        {{- ' progress-excellent' if score >= 80 -}}
-                        {{- ' progress-good' if score >= 60 and score < 80 -}}
-                        {{- ' progress-fair' if score >= 40 and score < 60 -}}
-                        {{- ' progress-poor' if score < 40 -}}"
-                        style="width: {{ score }}%">
-                        {{ score|round(1) }}%
-                    </div>
-                </div>
-            </div>
+        <!-- Completeness Profile Section -->
+        {% if completeness_score and completeness_score.completeness_profile %}
+        <div class="completeness-profile">
+            <h4>Completeness Profile: 
+                <span class="profile-badge profile-{{ completeness_score.completeness_profile.name|default('incomplete')|lower }}">
+                    {{ completeness_score.completeness_profile.name|default('Incomplete') }}
+                </span>
+            </h4>
+            <p>{{ completeness_score.completeness_profile.description|default('This AI SBOM needs improvement to meet transparency requirements.') }}</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>
-        
+        {% elif enhancement_report %}
         <div class="completeness-profile">
-            {% set score = enhancement_report.final_score.total_score|default(0) %}
             <h4>Completeness Profile: 
+                {% set score = enhancement_report.final_score.total_score|default(0) %}
                 {% if score >= 80 %}
                     <span class="profile-badge profile-advanced">Advanced</span>
                 {% elif score >= 60 %}
@@ -820,192 +818,255 @@
                 {% endif %}
             </p>
         </div>
+        {% endif %}
         
-        <table class="score-table">
-            <tr>
-                <th>Category</th>
-                <th>Score</th>
-                <th>Details</th>
-            </tr>
-            <tr>
-                <td>Basic Information <span class="score-weight">(20%)</span></td>
-                <td>
-                    {% set basic_score = 0 %}
-                    {% if aibom.components and aibom.components[0].name %}{% set basic_score = basic_score + 5 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].type %}{% set basic_score = basic_score + 5 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].version %}{% set basic_score = basic_score + 5 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].description %}{% set basic_score = basic_score + 5 %}{% endif %}
-                    {{ basic_score }}/20
-                    {% if basic_score >= 15 %}
-                        <span class="score-label label-excellent">Excellent</span>
-                    {% elif basic_score >= 10 %}
-                        <span class="score-label label-good">Good</span>
-                    {% elif basic_score >= 5 %}
-                        <span class="score-label label-fair">Fair</span>
-                    {% else %}
-                        <span class="score-label label-poor">Poor</span>
-                    {% endif %}
-                </td>
-                <td>
-                    {% if basic_score < 20 %}
-                        Missing: 
-                        {% if not aibom.components or not aibom.components[0].name %}Model Name, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].type %}Model Type, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].version %}Model Version, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].description %}Model Description{% endif %}
-                    {% else %}
-                        All basic information is present.
-                    {% endif %}
-                </td>
-            </tr>
-            <tr>
-                <td>Training Data <span class="score-weight">(25%)</span></td>
-                <td>
-                    {% set training_score = 0 %}
-                    {% if aibom.components and aibom.components[0].trainingData and aibom.components[0].trainingData.datasets %}{% set training_score = training_score + 15 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].trainingData and aibom.components[0].trainingData.preprocessing %}{% set training_score = training_score + 10 %}{% endif %}
-                    {{ training_score }}/25
-                    {% if training_score >= 20 %}
-                        <span class="score-label label-excellent">Excellent</span>
-                    {% elif training_score >= 15 %}
-                        <span class="score-label label-good">Good</span>
-                    {% elif training_score >= 10 %}
-                        <span class="score-label label-fair">Fair</span>
-                    {% else %}
-                        <span class="score-label label-poor">Poor</span>
-                    {% endif %}
-                </td>
-                <td>
-                    {% if training_score < 25 %}
-                        Missing: 
-                        {% if not aibom.components or not aibom.components[0].trainingData or not aibom.components[0].trainingData.datasets %}Training Datasets, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].trainingData or not aibom.components[0].trainingData.preprocessing %}Data Preprocessing{% endif %}
-                    {% else %}
-                        All training data information is present.
-                    {% endif %}
-                </td>
-            </tr>
-            <tr>
-                <td>Training Process <span class="score-weight">(20%)</span></td>
-                <td>
-                    {% set process_score = 0 %}
-                    {% if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.trainingMethod %}{% set process_score = process_score + 8 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.hyperparameters %}{% set process_score = process_score + 8 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].trainingProcess and aibom.components[0].trainingProcess.computeInfrastructure %}{% set process_score = process_score + 4 %}{% endif %}
-                    {{ process_score }}/20
-                    {% if process_score >= 16 %}
-                        <span class="score-label label-excellent">Excellent</span>
-                    {% elif process_score >= 12 %}
-                        <span class="score-label label-good">Good</span>
-                    {% elif process_score >= 8 %}
-                        <span class="score-label label-fair">Fair</span>
-                    {% else %}
-                        <span class="score-label label-poor">Poor</span>
-                    {% endif %}
-                </td>
-                <td>
-                    {% if process_score < 20 %}
-                        Missing: 
-                        {% if not aibom.components or not aibom.components[0].trainingProcess or not aibom.components[0].trainingProcess.trainingMethod %}Training Method, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].trainingProcess or not aibom.components[0].trainingProcess.hyperparameters %}Hyperparameters, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].trainingProcess or not aibom.components[0].trainingProcess.computeInfrastructure %}Compute Infrastructure{% endif %}
-                    {% else %}
-                        All training process information is present.
-                    {% endif %}
-                </td>
-            </tr>
-            <tr>
-                <td>Evaluation <span class="score-weight">(15%)</span></td>
-                <td>
-                    {% set eval_score = 0 %}
-                    {% if aibom.components and aibom.components[0].evaluation and aibom.components[0].evaluation.metrics %}{% set eval_score = eval_score + 8 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].evaluation and aibom.components[0].evaluation.datasets %}{% set eval_score = eval_score + 7 %}{% endif %}
-                    {{ eval_score }}/15
-                    {% if eval_score >= 12 %}
-                        <span class="score-label label-excellent">Excellent</span>
-                    {% elif eval_score >= 8 %}
-                        <span class="score-label label-good">Good</span>
-                    {% elif eval_score >= 4 %}
-                        <span class="score-label label-fair">Fair</span>
-                    {% else %}
-                        <span class="score-label label-poor">Poor</span>
-                    {% endif %}
-                </td>
-                <td>
-                    {% if eval_score < 15 %}
-                        Missing: 
-                        {% if not aibom.components or not aibom.components[0].evaluation or not aibom.components[0].evaluation.metrics %}Evaluation Metrics, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].evaluation or not aibom.components[0].evaluation.datasets %}Evaluation Datasets{% endif %}
-                    {% else %}
-                        All evaluation information is present.
-                    {% endif %}
-                </td>
-            </tr>
-            <tr>
-                <td>Usage & Licensing <span class="score-weight">(20%)</span></td>
-                <td>
-                    {% set usage_score = 0 %}
-                    {% if aibom.components and aibom.components[0].usage and aibom.components[0].usage.intendedUse %}{% set usage_score = usage_score + 8 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].usage and aibom.components[0].usage.outOfScopeUses %}{% set usage_score = usage_score + 2 %}{% endif %}
-                    {% if aibom.components and aibom.components[0].licenses %}{% set usage_score = usage_score + 10 %}{% endif %}
-                    {{ usage_score }}/20
-                    {% if usage_score >= 16 %}
-                        <span class="score-label label-excellent">Excellent</span>
-                    {% elif usage_score >= 12 %}
-                        <span class="score-label label-good">Good</span>
-                    {% elif usage_score >= 8 %}
-                        <span class="score-label label-fair">Fair</span>
+        <!-- Total Score with Progress Bar -->
+        <div class="total-score-container">
+            {% if completeness_score %}
+            <div class="total-score">{{ completeness_score.total_score|default(0)|round(1) }}/100</div>
+            {% elif enhancement_report %}
+            <div class="total-score">{{ enhancement_report.final_score.total_score|default(0)|round(1) }}/100</div>
+            {% else %}
+            <div class="total-score">0/100</div>
+            {% endif %}
+            
+            <div class="total-progress">
+                <div class="progress-container">
+                    {% if completeness_score %}
+                        {% set score_percent = (completeness_score.total_score|default(0) / 100) * 100 %}
+                    {% elif enhancement_report %}
+                        {% set score_percent = (enhancement_report.final_score.total_score|default(0) / 100) * 100 %}
                     {% else %}
-                        <span class="score-label label-poor">Poor</span>
+                        {% set score_percent = 0 %}
                     {% endif %}
-                </td>
-                <td>
-                    {% if usage_score < 20 %}
-                        Missing: 
-                        {% if not aibom.components or not aibom.components[0].usage or not aibom.components[0].usage.intendedUse %}Intended Use, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].usage or not aibom.components[0].usage.outOfScopeUses %}Out of Scope Uses, {% endif %}
-                        {% if not aibom.components or not aibom.components[0].licenses %}Licenses{% endif %}
-                    {% else %}
-                        All usage and licensing information is present.
+                    
+                    {% 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 %}
-                </td>
-            </tr>
+                    
+                    <div class="progress-bar {{ score_class }}" style="width: {{ score_percent }}%">
+                        {{ score_percent|int }}% <span class="score-label label-{{ score_class|replace('progress-', '') }}">{{ score_label }}</span>
+                    </div>
+                </div>
+            </div>
+            
+            {% if completeness_score and completeness_score.validation_penalty %}
+                <div style="margin-left: 15px; color: #f44336;">{{ completeness_score.validation_penalty }}</div>
+            {% endif %}
+        </div>
+        
+        <!-- Validation Penalty Explanation -->
+        {% if completeness_score and 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 %}
+        
+        <!-- Scoring Rubric -->
+        <div class="scoring-rubric">
+            <h4>Scoring Rubric</h4>
+            <p>The AI SBOM completeness score is calculated based on the following criteria:</p>
+            <table>
+                <tr>
+                    <th>Category</th>
+                    <th>Weight</th>
+                    <th>Description</th>
+                </tr>
+                <tr>
+                    <td>Basic Information</td>
+                    <td>20%</td>
+                    <td>Model name, type, version, and description</td>
+                </tr>
+                <tr>
+                    <td>Training Data</td>
+                    <td>25%</td>
+                    <td>Datasets used for training and preprocessing steps</td>
+                </tr>
+                <tr>
+                    <td>Training Process</td>
+                    <td>20%</td>
+                    <td>Training method, hyperparameters, and compute infrastructure</td>
+                </tr>
+                <tr>
+                    <td>Evaluation</td>
+                    <td>15%</td>
+                    <td>Evaluation metrics and datasets</td>
+                </tr>
+                <tr>
+                    <td>Usage & Licensing</td>
+                    <td>20%</td>
+                    <td>Intended use, out-of-scope uses, and licensing information</td>
+                </tr>
+            </table>
+            <p>Each category is scored based on the presence and quality of relevant fields. The final score is a weighted average of all categories.</p>
+        </div>
+        
+        <!-- Section Scores with Progress Bars and Tooltips -->
+        {% if completeness_score and completeness_score.section_scores %}
+        <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]|default(section) }}
+                            <span class="tooltip">(?)
+                                <span class="tooltiptext">{{ tooltips[section]|default('Section score') }}</span>
+                            </span>
+                        </td>
+                        <td>{{ score|default(0)|round(1) }}/{{ completeness_score.max_scores[section]|default(100) }}</td>
+                        <td>{{ weights[section]|default(0) }}%</td>
+                        <td style="width: 50%;">
+                            <div class="progress-container">
+                                {% set percent = (score|default(0) / completeness_score.max_scores[section]|default(100)) * 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>
+        {% endif %}
         
-        <div class="recommendations">
-            <h4>Recommendations for Improvement</h4>
+        <!-- Missing Fields Highlighting -->
+        {% if completeness_score and completeness_score.field_checklist %}
+        <div class="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>
-                {% if not aibom.components or not aibom.components[0].name or not aibom.components[0].type or not aibom.components[0].version %}
-                <li><span class="importance-indicator high-importance">★★★</span> Add basic model information (name, type, version)</li>
-                {% endif %}
-                
-                {% if not aibom.components or not aibom.components[0].trainingData or not aibom.components[0].trainingData.datasets %}
-                <li><span class="importance-indicator high-importance">★★★</span> Add information about training datasets</li>
-                {% endif %}
-                
-                {% if not aibom.components or not aibom.components[0].licenses %}
-                <li><span class="importance-indicator high-importance">★★★</span> Add licensing information</li>
-                {% endif %}
-                
-                {% if not aibom.components or not aibom.components[0].trainingProcess or not aibom.components[0].trainingProcess.trainingMethod or not aibom.components[0].trainingProcess.hyperparameters %}
-                <li><span class="importance-indicator medium-importance">★★☆</span> Add training process details (method, hyperparameters)</li>
+                {% set missing_critical = [] %}
+                {% for field, status in completeness_score.field_checklist.items() %}
+                    {% if 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 == "buildTime" %}
+                                    - Add build time information (when the model was built)
+                                {% elif field == "releaseTime" %}
+                                    - Add release time information (when the model was released)
+                                {% 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>
+        {% endif %}
+        
+        <!-- Actionable Recommendations -->
+        {% if completeness_score %}
+        <div class="recommendations">
+            <h4>Recommendations to Improve Your Score</h4>
+            <ol>
+                {% set has_recommendations = false %}
                 
-                {% if not aibom.components or not aibom.components[0].evaluation or not aibom.components[0].evaluation.metrics %}
-                <li><span class="importance-indicator medium-importance">★★☆</span> Add evaluation metrics</li>
+                {% if completeness_score.section_scores.component_model_card|default(0) < completeness_score.max_scores.component_model_card|default(100) %}
+                    {% set has_recommendations = true %}
+                    <li>
+                        <strong>Enhance Model Card</strong> (+{{ ((completeness_score.max_scores.component_model_card|default(100) - completeness_score.section_scores.component_model_card|default(0)) * 0.3)|round(1) }} points):
+                        <ul>
+                            {% if "modelCard.modelParameters" not in completeness_score.field_checklist or completeness_score.field_checklist["modelCard.modelParameters"] != "✔" %}
+                                <li>Add model parameters section with architecture, size, and training details</li>
+                            {% endif %}
+                            {% if "modelCard.quantitativeAnalysis" not in completeness_score.field_checklist or completeness_score.field_checklist["modelCard.quantitativeAnalysis"] != "✔" %}
+                                <li>Add quantitative analysis with performance metrics</li>
+                            {% endif %}
+                            {% if "modelCard.considerations" not in completeness_score.field_checklist or completeness_score.field_checklist["modelCard.considerations"] != "✔" %}
+                                <li>Add ethical considerations, limitations, and tradeoffs</li>
+                            {% endif %}
+                        </ul>
+                    </li>
                 {% endif %}
                 
-                {% if not aibom.components or not aibom.components[0].usage or not aibom.components[0].usage.intendedUse %}
-                <li><span class="importance-indicator medium-importance">★★☆</span> Add intended use information</li>
+                {% if completeness_score.section_scores.component_basic|default(0) < completeness_score.max_scores.component_basic|default(100) %}
+                    {% set has_recommendations = true %}
+                    <li>
+                        <strong>Complete Basic Information</strong> (+{{ ((completeness_score.max_scores.component_basic|default(100) - completeness_score.section_scores.component_basic|default(0)) * 0.2)|round(1) }} points):
+                        <ul>
+                            {% if "component.description" not in completeness_score.field_checklist or completeness_score.field_checklist["component.description"] != "✔" %}
+                                <li>Add a detailed description of the model (at least 20 characters)</li>
+                            {% endif %}
+                            {% if "component.purl" not in completeness_score.field_checklist or completeness_score.field_checklist["component.purl"] != "✔" %}
+                                <li>Add a valid PURL in the format pkg:huggingface/[owner]/[name]@[version]</li>
+                            {% endif %}
+                            {% if "component.licenses" not in completeness_score.field_checklist or completeness_score.field_checklist["component.licenses"] != "✔" %}
+                                <li>Add licensing information</li>
+                            {% endif %}
+                        </ul>
+                    </li>
                 {% endif %}
                 
-                {% if not aibom.components or not aibom.components[0].modelCard or not aibom.components[0].modelCard.considerations or not aibom.components[0].modelCard.considerations.ethicalConsiderations %}
-                <li><span class="importance-indicator low-importance">★☆☆</span> Add ethical considerations</li>
+                {% if not has_recommendations %}
+                    <li>Your AI SBOM is already well-documented. Great job!</li>
                 {% endif %}
-            </ul>
+            </ol>
         </div>
+        {% endif %}
     </div>
 
+    {{ download_script|safe if download_script else '' }}
+    
     <script>
         function downloadJSON() {
             const a = document.createElement('a');