Update templates/result.html

templates/result.html

@@ -8,8 +8,10 @@
         table { border-collapse: collapse; width: 60%; margin-top: 15px; }
         th, td { border: 1px solid #ddd; padding: 8px; }
         th { background-color: #f4f4f4; }
-        .missing { color: red; }
-        .present { color: green; }
+        /* Fixed color styling for field checklist items */
+        .missing { color: #e74c3c; } /* Red color for missing fields */
+        .present { color: #27ae60; } /* Green color for present fields */
+        .unknown { color: #f39c12; } /* Orange color for unknown status */
         .improvement { color: #2c3e50; background-color: #ecf0f1; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
         .improvement-value { color: #27ae60; font-weight: bold; }
         .ai-badge { background-color: #3498db; color: white; padding: 3px 8px; border-radius: 3px; font-size: 0.8em; margin-left: 10px; }
@@ -462,45 +464,37 @@
                 <div class="collapsible-content">
                     <div class="aibom-property">
                         <div class="property-name">Generated:</div>
-                        <div class="property-value">{{ aibom.metadata.timestamp if aibom.metadata.timestamp else 'Not specified' }}</div>
+                        <div class="property-value">{{ aibom.metadata.timestamp if aibom.metadata and aibom.metadata.timestamp else 'Not specified' }}</div>
                     </div>
                     
-                    {% if aibom.metadata.authors %}
+                    {% if aibom.metadata and aibom.metadata.tools %}
                     <div class="aibom-property">
-                        <div class="property-name">Authors:</div>
+                        <div class="property-name">Generated By:</div>
                         <div class="property-value">
-                            {% for author in aibom.metadata.authors %}
-                                <div>{{ author.name }} {% if author.email %}({{ author.email }}){% endif %}</div>
+                            {% for tool in aibom.metadata.tools %}
+                                <div>{{ tool.name }} {{ tool.version }}</div>
                             {% endfor %}
                         </div>
                     </div>
                     {% endif %}
                     
-                    {% if aibom.metadata.tools %}
+                    {% if aibom.metadata and aibom.metadata.authors %}
                     <div class="aibom-property">
-                        <div class="property-name">Generated by:</div>
+                        <div class="property-name">Authors:</div>
                         <div class="property-value">
-                            {% for tool in aibom.metadata.tools %}
-                                <div>{{ tool.name }} v{{ tool.version }} ({{ tool.vendor }})</div>
+                            {% for author in aibom.metadata.authors %}
+                                <div>{{ author.name }} {% if author.email %}({{ author.email }}){% endif %}</div>
                             {% endfor %}
                         </div>
                     </div>
                     {% endif %}
                     
-                    {% if aibom.metadata.properties %}
+                    {% if aibom.metadata and aibom.metadata.properties %}
                     <div class="aibom-property">
                         <div class="property-name">Properties:</div>
                         <div class="property-value">
                             {% for prop in aibom.metadata.properties %}
-                                {% if prop.name == 'tags' and prop.value %}
-                                    <div><strong>Tags:</strong> 
-                                        <!-- Display tags without using split filter -->
-                                        {% set tag_value = prop.value|replace('[', '')|replace(']', '')|replace('"', '') %}
-                                        <span class="tag">{{ tag_value }}</span>
-                                    </div>
-                                {% elif prop.name not in ['aibom:quality-score', 'aibom:quality-breakdown', 'aibom:max-scores', 'aibom:completeness-profile', 'aibom:completeness-description', 'aibom:ai-enhanced', 'aibom:ai-model', 'aibom:original-score', 'aibom:score-improvement'] %}
-                                    <div><strong>{{ prop.name }}:</strong> {{ prop.value }}</div>
-                                {% endif %}
+                                <div><strong>{{ prop.name }}:</strong> {{ prop.value }}</div>
                             {% endfor %}
                         </div>
                     </div>
@@ -515,68 +509,22 @@
                 <div class="collapsible-content">
                     {% for ref in aibom.components[0].externalReferences %}
                     <div class="aibom-property">
-                        <div class="property-name">{{ ref.type|capitalize if ref.type else 'Reference' }}:</div>
-                        <div class="property-value"><a href="{{ ref.url }}" target="_blank">{{ ref.url }}</a></div>
-                    </div>
-                    {% endfor %}
-                </div>
-            </div>
-            {% endif %}
-
-            <!-- Dependencies Section -->
-            {% if aibom.dependencies %}
-            <div class="aibom-section">
-                <h4 class="collapsible" onclick="toggleCollapsible(this)">Dependencies</h4>
-                <div class="collapsible-content">
-                    {% for dep in aibom.dependencies %}
-                    <div class="aibom-property">
-                        <div class="property-name">{{ dep.ref }}:</div>
+                        <div class="property-name">{{ ref.type|title if ref.type else 'Reference' }}:</div>
                         <div class="property-value">
-                            {% if dep.dependsOn %}
-                                {% for dependency in dep.dependsOn %}
-                                    <div>{{ dependency }}</div>
-                                {% endfor %}
-                            {% else %}
-                                No dependencies specified
-                            {% endif %}
+                            <a href="{{ ref.url }}" target="_blank">{{ ref.url }}</a>
+                            {% if ref.comment %}<div>{{ ref.comment }}</div>{% endif %}
                         </div>
                     </div>
                     {% endfor %}
                 </div>
             </div>
             {% endif %}
-
-            <!-- SBOM Information Section -->
-            <div class="aibom-section">
-                <h4 class="collapsible" onclick="toggleCollapsible(this)">SBOM Information</h4>
-                <div class="collapsible-content">
-                    <div class="aibom-property">
-                        <div class="property-name">Format:</div>
-                        <div class="property-value">{{ aibom.bomFormat }}</div>
-                    </div>
-                    <div class="aibom-property">
-                        <div class="property-name">Spec Version:</div>
-                        <div class="property-value">{{ aibom.specVersion }}</div>
-                    </div>
-                    <div class="aibom-property">
-                        <div class="property-name">Serial Number:</div>
-                        <div class="property-value">{{ aibom.serialNumber }}</div>
-                    </div>
-                    <div class="aibom-property">
-                        <div class="property-name">Version:</div>
-                        <div class="property-value">{{ aibom.version }}</div>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 
     <div id="json-view" class="tab-content">
         <div class="json-view">
-            <pre id="aibom-json">{{ aibom | tojson(indent=2) }}</pre>
-        </div>
-        <div style="margin-top: 15px;">
-            <button onclick="downloadJSON()">Download JSON</button>
+            <pre>{{ aibom | tojson(indent=2) }}</pre>
         </div>
     </div>
 
@@ -586,19 +534,22 @@
         <!-- Field Tier Legend -->
         <div class="tier-legend">
             <div class="tier-legend-item">
-                <span class="field-tier tier-critical"></span> Critical Fields
+                <span class="field-tier tier-critical"></span>
+                <span>Critical</span>
             </div>
             <div class="tier-legend-item">
-                <span class="field-tier tier-important"></span> Important Fields
+                <span class="field-tier tier-important"></span>
+                <span>Important</span>
             </div>
             <div class="tier-legend-item">
-                <span class="field-tier tier-supplementary"></span> Supplementary Fields
+                <span class="field-tier tier-supplementary"></span>
+                <span>Supplementary</span>
             </div>
         </div>
         
         <ul>
             {% for field, status in completeness_score.field_checklist.items() %}
-                {% if status == "✔" %}
+                {% 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>
@@ -854,297 +805,77 @@
                     <li>
                         <strong>Fix Validation Issues</strong> (removes validation penalty):
                         <ul>
-                            {% for rec in completeness_score.validation.recommendations[:3] %}
-                                <li>{{ rec }}</li>
+                            {% for issue in completeness_score.validation.issues %}
+                                <li>{{ issue.message }}</li>
                             {% endfor %}
                         </ul>
                     </li>
                 {% endif %}
                 
-                {% if completeness_score.completeness_profile and completeness_score.completeness_profile.next_level %}
-                    {% set has_recommendations = true %}
-                    <li>
-                        <strong>Upgrade to {{ completeness_score.completeness_profile.next_level.name }} Profile</strong>:
-                        <ul>
-                            {% for field in completeness_score.completeness_profile.next_level.missing_fields[:5] %}
-                                <li>Add {{ field }}</li>
-                            {% endfor %}
-                            {% if completeness_score.completeness_profile.next_level.missing_fields|length > 5 %}
-                                <li>... and {{ completeness_score.completeness_profile.next_level.missing_fields|length - 5 }} more fields</li>
-                            {% endif %}
-                        </ul>
-                    </li>
-                {% endif %}
-                
                 {% if not has_recommendations %}
                     <li>Your AI SBOM is already well-documented. Great job!</li>
                 {% endif %}
             </ol>
         </div>
         
-        <!-- Scoring Rubric Details -->
+        <!-- Scoring Rubric -->
         <div class="scoring-rubric">
-            <h4 class="collapsible" onclick="toggleCollapsible(this)">Scoring Rubric Details</h4>
-            <div class="collapsible-content">
-                <p>The following criteria are used to calculate your score:</p>
-                
-                <h5>Required Fields (20% of total score)</h5>
-                <table>
-                    <tr>
-                        <th>Field</th>
-                        <th>Points</th>
-                        <th>Criteria</th>
-                    </tr>
-                    <tr>
-                        <td>bomFormat</td>
-                        <td>5</td>
-                        <td>Must be "CycloneDX"</td>
-                    </tr>
-                    <tr>
-                        <td>specVersion</td>
-                        <td>5</td>
-                        <td>Must be "1.6" or later</td>
-                    </tr>
-                    <tr>
-                        <td>serialNumber</td>
-                        <td>5</td>
-                        <td>Must be a valid UUID</td>
-                    </tr>
-                    <tr>
-                        <td>version</td>
-                        <td>5</td>
-                        <td>Must be a positive integer</td>
-                    </tr>
-                </table>
-                
-                <h5>Metadata (20% of total score)</h5>
-                <table>
-                    <tr>
-                        <th>Field</th>
-                        <th>Points</th>
-                        <th>Criteria</th>
-                    </tr>
-                    <tr>
-                        <td>timestamp</td>
-                        <td>5</td>
-                        <td>Must be a valid ISO 8601 timestamp</td>
-                    </tr>
-                    <tr>
-                        <td>tools</td>
-                        <td>5</td>
-                        <td>Must include at least one tool with name, vendor, and version</td>
-                    </tr>
-                    <tr>
-                        <td>authors</td>
-                        <td>5</td>
-                        <td>Must include at least one author with name</td>
-                    </tr>
-                    <tr>
-                        <td>component</td>
-                        <td>5</td>
-                        <td>Must include component metadata</td>
-                    </tr>
-                </table>
-                
-                <h5>Component Basic Info (20% of total score)</h5>
-                <table>
-                    <tr>
-                        <th>Field</th>
-                        <th>Points</th>
-                        <th>Criteria</th>
-                    </tr>
-                    <tr>
-                        <td>type</td>
-                        <td>2</td>
-                        <td>Must be "machine-learning-model"</td>
-                    </tr>
-                    <tr>
-                        <td>name</td>
-                        <td>4</td>
-                        <td>Must be present</td>
-                    </tr>
-                    <tr>
-                        <td>bom-ref</td>
-                        <td>2</td>
-                        <td>Must be present</td>
-                    </tr>
-                    <tr>
-                        <td>purl</td>
-                        <td>4</td>
-                        <td>Must start with "pkg:huggingface/"</td>
-                    </tr>
-                    <tr>
-                        <td>description</td>
-                        <td>4</td>
-                        <td>Must be present and longer than 20 characters</td>
-                    </tr>
-                    <tr>
-                        <td>licenses</td>
-                        <td>4</td>
-                        <td>Must use valid SPDX license identifiers</td>
-                    </tr>
-                </table>
-                
-                <h5>Model Card (30% of total score)</h5>
-                <table>
-                    <tr>
-                        <th>Field</th>
-                        <th>Points</th>
-                        <th>Criteria</th>
-                    </tr>
-                    <tr>
-                        <td>modelParameters</td>
-                        <td>10</td>
-                        <td>Must include model parameters</td>
-                    </tr>
-                    <tr>
-                        <td>quantitativeAnalysis</td>
-                        <td>10</td>
-                        <td>Must include quantitative analysis</td>
-                    </tr>
-                    <tr>
-                        <td>considerations</td>
-                        <td>10</td>
-                        <td>Must be present and longer than 50 characters</td>
-                    </tr>
-                </table>
-                
-                <h5>External References (10% of total score)</h5>
-                <table>
-                    <tr>
-                        <th>Reference Type</th>
-                        <th>Points</th>
-                        <th>Maximum</th>
-                    </tr>
-                    <tr>
-                        <td>Model Card URL</td>
-                        <td>4 per reference</td>
-                        <td rowspan="3">10</td>
-                    </tr>
-                    <tr>
-                        <td>Hugging Face or GitHub URL</td>
-                        <td>3 per reference</td>
-                    </tr>
-                    <tr>
-                        <td>Dataset URL</td>
-                        <td>3 per reference</td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-        
-        <!-- Validation Summary if available -->
-        {% if completeness_score.validation %}
-            <div class="aibom-section">
-                <h4>Validation Results</h4>
-                <div class="aibom-property">
-                    <div class="property-name">Status:</div>
-                    <div class="property-value">
-                        {% if completeness_score.validation.valid %}
-                            <span style="color: green;">✓ Valid</span>
-                        {% else %}
-                            <span style="color: red;">✗ Invalid</span>
-                        {% endif %}
-                    </div>
-                </div>
-                
-                <div class="aibom-property">
-                    <div class="property-name">Issues:</div>
-                    <div class="property-value">
-                        <span style="color: red;">Errors: {{ completeness_score.validation.summary.error_count }}</span><br>
-                        <span style="color: orange;">Warnings: {{ completeness_score.validation.summary.warning_count }}</span><br>
-                        <span style="color: blue;">Info: {{ completeness_score.validation.summary.info_count }}</span>
-                    </div>
-                </div>
-                
-                {% if not completeness_score.validation.valid and completeness_score.validation.issues %}
-                    <div class="aibom-property">
-                        <div class="property-name">Top Issues:</div>
-                        <div class="property-value">
-                            <ul>
-                                {% for issue in completeness_score.validation.issues[:3] %}
-                                    <li>
-                                        {% if issue.severity == 'error' %}
-                                            <span style="color: red;">[ERROR]</span>
-                                        {% elif issue.severity == 'warning' %}
-                                            <span style="color: orange;">[WARNING]</span>
-                                        {% else %}
-                                            <span style="color: blue;">[INFO]</span>
-                                        {% endif %}
-                                        {{ issue.message }}
-                                    </li>
-                                {% endfor %}
-                                {% if completeness_score.validation.issues|length > 3 %}
-                                    <li>... and {{ completeness_score.validation.issues|length - 3 }} more issues</li>
-                                {% endif %}
-                            </ul>
-                        </div>
-                    </div>
-                {% endif %}
-                
-                {% if completeness_score.validation.recommendations %}
-                    <div class="aibom-property">
-                        <div class="property-name">Recommendations:</div>
-                        <div class="property-value">
-                            <ul>
-                                {% for rec in completeness_score.validation.recommendations[:3] %}
-                                    <li>{{ rec }}</li>
-                                {% endfor %}
-                                {% if completeness_score.validation.recommendations|length > 3 %}
-                                    <li>... and {{ completeness_score.validation.recommendations|length - 3 }} more recommendations</li>
-                                {% endif %}
-                            </ul>
-                        </div>
-                    </div>
-                {% endif %}
-            </div>
-        {% endif %}
-        
-        <!-- Score Calculation Explanation -->
-        <div class="aibom-section">
-            <h4>Score Calculation</h4>
-            <p>The total score is calculated as a weighted sum of section scores:</p>
-            <ul>
-                <li>Required Fields: {{ completeness_score.section_scores.required_fields }}/{{ completeness_score.max_scores.required_fields }} × 20% = {{ (completeness_score.section_scores.required_fields / completeness_score.max_scores.required_fields * 20)|round(2) }}</li>
-                <li>Metadata: {{ completeness_score.section_scores.metadata }}/{{ completeness_score.max_scores.metadata }} × 20% = {{ (completeness_score.section_scores.metadata / completeness_score.max_scores.metadata * 20)|round(2) }}</li>
-                <li>Component Basic: {{ completeness_score.section_scores.component_basic }}/{{ completeness_score.max_scores.component_basic }} × 20% = {{ (completeness_score.section_scores.component_basic / completeness_score.max_scores.component_basic * 20)|round(2) }}</li>
-                <li>Model Card: {{ completeness_score.section_scores.component_model_card }}/{{ completeness_score.max_scores.component_model_card }} × 30% = {{ (completeness_score.section_scores.component_model_card / completeness_score.max_scores.component_model_card * 30)|round(2) }}</li>
-                <li>External References: {{ completeness_score.section_scores.external_references }}/{{ completeness_score.max_scores.external_references }} × 10% = {{ (completeness_score.section_scores.external_references / completeness_score.max_scores.external_references * 10)|round(2) }}</li>
-            </ul>
-            
-            {% if completeness_score.validation_penalty %}
-                <p>Validation penalty: {{ completeness_score.validation_penalty }}</p>
-            {% endif %}
+            <h4>Scoring Rubric</h4>
+            <p>The completeness score is calculated based on the following categories:</p>
+            <table>
+                <tr>
+                    <th>Category</th>
+                    <th>Weight</th>
+                    <th>Description</th>
+                </tr>
+                <tr>
+                    <td>Required Fields</td>
+                    <td>20%</td>
+                    <td>Basic SBOM fields required by the CycloneDX specification</td>
+                </tr>
+                <tr>
+                    <td>Metadata</td>
+                    <td>20%</td>
+                    <td>Information about the AI SBOM itself</td>
+                </tr>
+                <tr>
+                    <td>Component Basic</td>
+                    <td>20%</td>
+                    <td>Basic information about the AI model</td>
+                </tr>
+                <tr>
+                    <td>Model Card</td>
+                    <td>30%</td>
+                    <td>Detailed information about the model</td>
+                </tr>
+                <tr>
+                    <td>External References</td>
+                    <td>10%</td>
+                    <td>Links to external resources</td>
+                </tr>
+            </table>
         </div>
     </div>
-
+    
+    <pre id="aibom-json" style="display: none;">{{ aibom | tojson(indent=2) }}</pre>
+    
     <script>
-        function downloadJSON() {
-            const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(document.getElementById('aibom-json').textContent);
-            const downloadAnchorNode = document.createElement('a');
-            downloadAnchorNode.setAttribute("href", dataStr);
-            downloadAnchorNode.setAttribute("download", "{{ model_id }}-aibom.json");
-            document.body.appendChild(downloadAnchorNode);
-            downloadAnchorNode.click();
-            downloadAnchorNode.remove();
-        }
-        
         function switchTab(tabId) {
             // Hide all tab contents
-            const tabContents = document.getElementsByClassName('tab-content');
-            for (let i = 0; i < tabContents.length; i++) {
+            var tabContents = document.getElementsByClassName('tab-content');
+            for (var i = 0; i < tabContents.length; i++) {
                 tabContents[i].classList.remove('active');
             }
             
             // Deactivate all tabs
-            const tabs = document.getElementsByClassName('aibom-tab');
-            for (let i = 0; i < tabs.length; i++) {
+            var tabs = document.getElementsByClassName('aibom-tab');
+            for (var i = 0; i < tabs.length; i++) {
                 tabs[i].classList.remove('active');
             }
             
             // Activate selected tab and content
             document.getElementById(tabId).classList.add('active');
-            const selectedTab = document.querySelector(`.aibom-tab[onclick="switchTab('${tabId}')"]`);
+            var selectedTab = document.querySelector('.aibom-tab[onclick="switchTab(\'' + tabId + '\')"]');
             if (selectedTab) {
                 selectedTab.classList.add('active');
             }
@@ -1152,14 +883,28 @@
         
         function toggleCollapsible(element) {
             element.classList.toggle('active');
-            const content = element.nextElementSibling;
-            content.classList.toggle('active');
+            var content = element.nextElementSibling;
+            if (content.classList.contains('active')) {
+                content.classList.remove('active');
+            } else {
+                content.classList.add('active');
+            }
+        }
+        
+        function downloadJSON() {
+            const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(document.getElementById('aibom-json').textContent);
+            const downloadAnchorNode = document.createElement('a');
+            downloadAnchorNode.setAttribute("href", dataStr);
+            downloadAnchorNode.setAttribute("download", "{{ model_id }}-aibom.json");
+            document.body.appendChild(downloadAnchorNode);
+            downloadAnchorNode.click();
+            downloadAnchorNode.remove();
         }
         
         // Initialize collapsible sections
         document.addEventListener('DOMContentLoaded', function() {
-            const collapsibles = document.getElementsByClassName('collapsible');
-            for (let i = 0; i < collapsibles.length; i++) {
+            var collapsibles = document.getElementsByClassName('collapsible');
+            for (var i = 0; i < collapsibles.length; i++) {
                 collapsibles[i].nextElementSibling.classList.add('active');
                 collapsibles[i].classList.add('active');
             }