Spaces:

aetheris-ai
/

aibom-generator

Running

App Files Files

a1c00l commited on Apr 3

Commit

0c049aa

verified ·

1 Parent(s): dc7f0d4

Create improved_scoring_template.html

Browse files

Files changed (1) hide show

templates/improved_scoring_template.html +262 -0

templates/improved_scoring_template.html ADDED Viewed

	@@ -0,0 +1,262 @@

+<!DOCTYPE html>
+<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>