Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>AIBOM Generated - Improved Scoring</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 20px; color: #333; } | |
| h2, h3 { color: #2c3e50; } | |
| /* Table styles */ | |
| table { border-collapse: collapse; width: 100%; margin: 15px 0 25px 0; } | |
| th, td { border: 1px solid #ddd; padding: 12px; text-align: left; } | |
| th { background-color: #f4f4f4; } | |
| /* Progress bar styles */ | |
| .progress-container { | |
| width: 100%; | |
| background-color: #f1f1f1; | |
| border-radius: 5px; | |
| margin: 5px 0; | |
| } | |
| .progress-bar { | |
| height: 24px; | |
| border-radius: 5px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| transition: width 1s; | |
| } | |
| .excellent { background-color: #27ae60; } | |
| .good { background-color: #2980b9; } | |
| .fair { background-color: #f39c12; } | |
| .poor { background-color: #e74c3c; } | |
| /* Field checklist styles */ | |
| .field-list { list-style: none; padding-left: 0; } | |
| .missing { color: #e74c3c; } | |
| .present { color: #27ae60; } | |
| /* Improvement section styles */ | |
| .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; | |
| } | |
| /* Score explanation styles */ | |
| .score-explanation { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e9ecef; | |
| border-radius: 5px; | |
| padding: 15px; | |
| margin: 20px 0; | |
| } | |
| .calculation-step { | |
| font-family: monospace; | |
| margin: 5px 0; | |
| } | |
| .weight-indicator { | |
| font-size: 0.9em; | |
| color: #7f8c8d; | |
| margin-left: 5px; | |
| } | |
| /* Collapsible section styles */ | |
| .collapsible { | |
| background-color: #f1f1f1; | |
| color: #444; | |
| cursor: pointer; | |
| padding: 18px; | |
| width: 100%; | |
| border: none; | |
| text-align: left; | |
| outline: none; | |
| font-size: 15px; | |
| border-radius: 5px; | |
| margin: 10px 0; | |
| } | |
| .active, .collapsible:hover { | |
| background-color: #e0e0e0; | |
| } | |
| .content { | |
| padding: 0 18px; | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.2s ease-out; | |
| background-color: #f9f9f9; | |
| border-radius: 0 0 5px 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="/">Generate another AI SBOM</a> | |
| <h2>AI SBOM Generated for {{ model_id }}</h2> | |
| {% if enhancement_report and enhancement_report.ai_enhanced %} | |
| <div class="improvement"> | |
| <h3>AI Enhancement Results</h3> | |
| <p>This AIBOM was enhanced using <strong>{{ enhancement_report.ai_model }}</strong></p> | |
| <p>Original Score: | |
| <div class="progress-container"> | |
| <div class="progress-bar {% if enhancement_report.original_score.total_score >= 80 %}excellent{% elif enhancement_report.original_score.total_score >= 60 %}good{% elif enhancement_report.original_score.total_score >= 40 %}fair{% else %}poor{% endif %}" | |
| style="width: {{ enhancement_report.original_score.total_score }}%"> | |
| {{ enhancement_report.original_score.total_score }}% | |
| </div> | |
| </div> | |
| </p> | |
| <p>Enhanced Score: | |
| <div class="progress-container"> | |
| <div class="progress-bar {% if enhancement_report.final_score.total_score >= 80 %}excellent{% elif enhancement_report.final_score.total_score >= 60 %}good{% elif enhancement_report.final_score.total_score >= 40 %}fair{% else %}poor{% endif %}" | |
| style="width: {{ enhancement_report.final_score.total_score }}%"> | |
| {{ enhancement_report.final_score.total_score }}% | |
| </div> | |
| </div> | |
| </p> | |
| <p>Improvement: <span class="improvement-value">+{{ enhancement_report.improvement }} points</span></p> | |
| </div> | |
| {% endif %} | |
| <h3>Overall AIBOM Completeness | |
| {% if enhancement_report and enhancement_report.ai_enhanced %} | |
| <span class="ai-badge">AI Enhanced</span> | |
| {% endif %} | |
| </h3> | |
| <div class="progress-container"> | |
| <div class="progress-bar {% if completeness_score.total_score >= 80 %}excellent{% elif completeness_score.total_score >= 60 %}good{% elif completeness_score.total_score >= 40 %}fair{% else %}poor{% endif %}" | |
| style="width: {{ completeness_score.total_score }}%"> | |
| {{ completeness_score.total_score }}% | |
| </div> | |
| </div> | |
| <p> | |
| {% if completeness_score.total_score >= 80 %} | |
| <strong>Excellent:</strong> This AIBOM is very comprehensive and provides thorough documentation. | |
| {% elif completeness_score.total_score >= 60 %} | |
| <strong>Good:</strong> This AIBOM contains most essential information but could be improved. | |
| {% elif completeness_score.total_score >= 40 %} | |
| <strong>Fair:</strong> This AIBOM has basic information but is missing several important details. | |
| {% else %} | |
| <strong>Needs Improvement:</strong> This AIBOM is missing critical information and requires significant enhancement. | |
| {% endif %} | |
| </p> | |
| <h3>Section Completion</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Section</th> | |
| <th>Completion</th> | |
| <th>Weight</th> | |
| <th>Contribution</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for section, score in completeness_score.section_scores.items() %} | |
| {% set max_score = completeness_score.max_scores[section] %} | |
| {% set percentage = (score / max_score * 100) | round %} | |
| {% set weight = 0.2 if section == 'required_fields' else 0.2 if section == 'metadata' else 0.2 if section == 'component_basic' else 0.3 if section == 'component_model_card' else 0.1 %} | |
| {% set contribution = (score * weight) | round(1) %} | |
| <tr> | |
| <td>{{ section | replace('_', ' ') | title }}</td> | |
| <td> | |
| <div class="progress-container"> | |
| <div class="progress-bar {% if percentage >= 80 %}excellent{% elif percentage >= 60 %}good{% elif percentage >= 40 %}fair{% else %}poor{% endif %}" | |
| style="width: {{ percentage }}%"> | |
| {{ score }}/{{ max_score }} ({{ percentage }}%) | |
| </div> | |
| </div> | |
| </td> | |
| <td>{{ (weight * 100) | int }}%</td> | |
| <td>{{ contribution }} points</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| <button class="collapsible">How is the score calculated?</button> | |
| <div class="content"> | |
| <div class="score-explanation"> | |
| <h4>Score Calculation Breakdown</h4> | |
| <p>The overall score is a weighted average of section scores:</p> | |
| <div class="calculation-step">Required Fields: {{ completeness_score.section_scores.required_fields }} × 0.20 = {{ (completeness_score.section_scores.required_fields * 0.2) | round(1) }} points</div> | |
| <div class="calculation-step">Metadata: {{ completeness_score.section_scores.metadata }} × 0.20 = {{ (completeness_score.section_scores.metadata * 0.2) | round(1) }} points</div> | |
| <div class="calculation-step">Component Basic: {{ completeness_score.section_scores.component_basic }} × 0.20 = {{ (completeness_score.section_scores.component_basic * 0.2) | round(1) }} points</div> | |
| <div class="calculation-step">Model Card: {{ completeness_score.section_scores.component_model_card }} × 0.30 = {{ (completeness_score.section_scores.component_model_card * 0.3) | round(1) }} points</div> | |
| <div class="calculation-step">External References: {{ completeness_score.section_scores.external_references }} × 0.10 = {{ (completeness_score.section_scores.external_references * 0.1) | round(1) }} points</div> | |
| <div class="calculation-step"><strong>Total: {{ completeness_score.total_score }} points</strong></div> | |
| <p>Each section has a different weight in the final calculation to reflect its importance:</p> | |
| <ul> | |
| <li>Required Fields: 20% weight</li> | |
| <li>Metadata: 20% weight</li> | |
| <li>Component Basic: 20% weight</li> | |
| <li>Model Card: 30% weight (higher weight as it contains critical AI information)</li> | |
| <li>External References: 10% weight</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <h3>Field Checklist</h3> | |
| <ul class="field-list"> | |
| {% for field, status in completeness_score.field_checklist.items() %} | |
| {% if status == "✔" %} | |
| <li class="present">{{ status }} {{ field }}</li> | |
| {% else %} | |
| <li class="missing">{{ status }} {{ field }}</li> | |
| {% endif %} | |
| {% endfor %} | |
| </ul> | |
| <h3> | |
| Download AI SBOM in CycloneDX format for {{ model_id }} | |
| <button onclick="downloadJSON()">Download JSON</button> | |
| </h3> | |
| <pre id="aibom-json">{{ 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(); | |
| } | |
| // Collapsible sections | |
| var coll = document.getElementsByClassName("collapsible"); | |
| for (var i = 0; i < coll.length; i++) { | |
| coll[i].addEventListener("click", function() { | |
| this.classList.toggle("active"); | |
| var content = this.nextElementSibling; | |
| if (content.style.maxHeight) { | |
| content.style.maxHeight = null; | |
| } else { | |
| content.style.maxHeight = content.scrollHeight + "px"; | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |