Spaces:

aetheris-ai
/

aibom-generator

Running

App Files Files

a1c00l commited on Apr 9

Commit

8402521

verified ·

1 Parent(s): 7960b17

Update templates/result.html

Browse files

Files changed (1) hide show

templates/result.html +357 -190

templates/result.html CHANGED Viewed

@@ -2,103 +2,114 @@
 <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>
@@ -110,128 +121,262 @@
     <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() {
@@ -243,20 +388,42 @@
             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>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>AIBOM Generated</title>
     <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        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; }
+        .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; }
+        /* New styles for human-friendly viewer */
+        .aibom-viewer {
+            margin: 20px 0;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            padding: 20px;
+            background-color: #f9f9f9;
         }
+        .aibom-section {
+            margin-bottom: 20px;
+            padding: 15px;
+            border-radius: 5px;
+            background-color: white;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        .aibom-section h4 {
+            margin-top: 0;
+            color: #2c3e50;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 8px;
+        }
+        .aibom-property {
+            display: flex;
+            margin: 5px 0;
+        }
+        .property-name {
             font-weight: bold;
+            width: 200px;
+            color: #34495e;
         }
+        .property-value {
+            flex: 1;
         }
+        .aibom-tabs {
+            display: flex;
+            border-bottom: 1px solid #ddd;
+            margin-bottom: 20px;
         }
+        .aibom-tab {
+            padding: 10px 20px;
+            cursor: pointer;
+            background-color: #f4f4f4;
+            margin-right: 5px;
+            border-radius: 5px 5px 0 0;
         }
+        .aibom-tab.active {
+            background-color: #3498db;
+            color: white;
         }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .json-view {
+            background-color: #f8f8f8;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            padding: 15px;
+            overflow: auto;
+            max-height: 500px;
         }
         .collapsible {
             cursor: pointer;
+            position: relative;
         }
+        .collapsible:after {
+            content: '+';
+            position: absolute;
+            right: 10px;
+        }
+        .collapsible.active:after {
+            content: '-';
         }
+        .collapsible-content {
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.2s ease-out;
+        }
+        .collapsible-content.active {
+            max-height: 500px;
+        }
+        .tag {
+            display: inline-block;
+            background-color: #e0e0e0;
+            padding: 2px 8px;
+            border-radius: 12px;
+            margin: 2px;
+            font-size: 0.9em;
+        }
+        .key-info {
+            background-color: #e3f2fd;
+            border-left: 4px solid #2196F3;
+            padding: 10px;
+            margin-bottom: 15px;
         }
     </style>
 </head>
     <div class="improvement">
         <h3>AI Enhancement Results</h3>
         <p>This AIBOM was enhanced using <strong>{{ enhancement_report.ai_model }}</strong></p>
+        <p>Original Score: {{ enhancement_report.original_score.total_score }}/100</p>
+        <p>Enhanced Score: {{ enhancement_report.final_score.total_score }}/100</p>
         <p>Improvement: <span class="improvement-value">+{{ enhancement_report.improvement }} points</span></p>
     </div>
     {% endif %}
+    <h3>Overall Completeness Score: {{ completeness_score.total_score }}/100
     {% if enhancement_report and enhancement_report.ai_enhanced %}
     <span class="ai-badge">AI Enhanced</span>
     {% endif %}
     </h3>
+    <h3>Section Breakdown</h3>
     <table>
         <thead>
+            <tr><th>Section</th><th>Score</th></tr>
         </thead>
         <tbody>
             {% for section, score in completeness_score.section_scores.items() %}
                 <tr>
+                    <td>{{ section }}</td>
+                    <td>{{ score }}/{{ completeness_score.max_scores[section] }}</td>
                 </tr>
             {% endfor %}
         </tbody>
     </table>
+    <!-- Human-friendly AIBOM Viewer -->
+    <div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 10px; margin: 15px 0;">
+        <p><strong>Note:</strong> This page displays the AIBOM in a human-friendly format for easier readability.
+        The downloaded JSON file follows the standard CycloneDX format required for interoperability with other tools.</p>
+    </div>
+    <div class="aibom-tabs">
+        <div class="aibom-tab active" onclick="switchTab('human-view')">Human-Friendly View</div>
+        <div class="aibom-tab" onclick="switchTab('json-view')">JSON View</div>
+        <div class="aibom-tab" onclick="switchTab('field-checklist')">Field Checklist</div>
     </div>
+    <div id="human-view" class="tab-content active">
+        <div class="aibom-viewer">
+            <!-- Key Information Section -->
+            <div class="aibom-section key-info">
+                <h4>Key Information</h4>
+                <div class="aibom-property">
+                    <div class="property-name">Model Name:</div>
+                    <div class="property-value">{{ aibom.components[0].name if aibom.components and aibom.components[0].name else 'Not specified' }}</div>
+                </div>
+                <div class="aibom-property">
+                    <div class="property-name">Type:</div>
+                    <div class="property-value">{{ aibom.components[0].type if aibom.components and aibom.components[0].type else 'Not specified' }}</div>
+                </div>
+                <div class="aibom-property">
+                    <div class="property-name">Version:</div>
+                    <div class="property-value">{{ aibom.components[0].version if aibom.components and aibom.components[0].version else 'Not specified' }}</div>
+                </div>
+                <div class="aibom-property">
+                    <div class="property-name">PURL:</div>
+                    <div class="property-value">{{ aibom.components[0].purl if aibom.components and aibom.components[0].purl else 'Not specified' }}</div>
+                </div>
+                {% if aibom.components and aibom.components[0].description %}
+                <div class="aibom-property">
+                    <div class="property-name">Description:</div>
+                    <div class="property-value">{{ aibom.components[0].description }}</div>
+                </div>
+                {% endif %}
+            </div>
+            <!-- Model Card Section -->
+            {% if aibom.components and aibom.components[0].modelCard %}
+            <div class="aibom-section">
+                <h4 class="collapsible" onclick="toggleCollapsible(this)">Model Card</h4>
+                <div class="collapsible-content">
+                    {% if aibom.components[0].modelCard.modelParameters %}
+                    <div class="aibom-property">
+                        <div class="property-name">Model Parameters:</div>
+                        <div class="property-value">
+                            {% for key, value in aibom.components[0].modelCard.modelParameters.items() %}
+                                <div><strong>{{ key }}:</strong>
+                                {% if value is string %}
+                                    {{ value }}
+                                {% elif value is iterable %}
+                                    {{ value|join(', ') }}
+                                {% else %}
+                                    {{ value }}
+                                {% endif %}
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                    {% if aibom.components[0].modelCard.quantitativeAnalysis %}
+                    <div class="aibom-property">
+                        <div class="property-name">Performance Metrics:</div>
+                        <div class="property-value">
+                            {% if aibom.components[0].modelCard.quantitativeAnalysis.performanceMetrics %}
+                                {% for metric in aibom.components[0].modelCard.quantitativeAnalysis.performanceMetrics %}
+                                    <div><strong>{{ metric.type if metric.type else 'Metric' }}:</strong> {{ metric.value if metric.value else 'Not specified' }}</div>
+                                {% endfor %}
+                            {% endif %}
+                        </div>
+                    </div>
+                    {% endif %}
+                    {% if aibom.components[0].modelCard.considerations %}
+                    <div class="aibom-property">
+                        <div class="property-name">Considerations:</div>
+                        <div class="property-value">
+                            {% for key, value in aibom.components[0].modelCard.considerations.items() %}
+                                <div><strong>{{ key }}:</strong> {{ value }}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
             {% endif %}
+            <!-- Metadata Section -->
+            <div class="aibom-section">
+                <h4 class="collapsible" onclick="toggleCollapsible(this)">Metadata</h4>
+                <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>
+                    {% 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.url %}({{ author.url }}){% endif %}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                    {% if aibom.metadata.tools %}
+                    <div class="aibom-property">
+                        <div class="property-name">Generated by:</div>
+                        <div class="property-value">
+                            {% for tool in aibom.metadata.tools %}
+                                <div>{{ tool.name }} v{{ tool.version }} ({{ tool.vendor }})</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 %}
+                                {% if prop.name == 'tags' and prop.value %}
+                                    <div><strong>Tags:</strong>
+                                        {% set tags = prop.value|replace('[', '')|replace(']', '')|replace('"', '')|split(', ') %}
+                                        {% for tag in tags %}
+                                            <span class="tag">{{ tag }}</span>
+                                        {% endfor %}
+                                    </div>
+                                {% elif prop.name not in ['aibom:quality-score', 'aibom:quality-breakdown', 'aibom:max-scores'] %}
+                                    <div><strong>{{ prop.name }}:</strong> {{ prop.value }}</div>
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <!-- 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|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-value">
+                            {% if dep.dependsOn %}
+                                {% for dependency in dep.dependsOn %}
+                                    <div>{{ dependency }}</div>
+                                {% endfor %}
+                            {% else %}
+                                No dependencies specified
+                            {% 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>
+        </div>
+    </div>
+    <div id="field-checklist" class="tab-content">
+        <h3>Field Checklist</h3>
+        <ul>
+            {% 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>
+    </div>
     <script>
         function downloadJSON() {
             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++) {
+                tabContents[i].classList.remove('active');
+            }
+            // Deactivate all tabs
+            const tabs = document.getElementsByClassName('aibom-tab');
+            for (let i = 0; i < tabs.length; i++) {
+                tabs[i].classList.remove('active');
+            }
+            // Activate the selected tab and content
+            document.getElementById(tabId).classList.add('active');
+            const selectedTab = document.querySelector(`.aibom-tab[onclick="switchTab('${tabId}')"]`);
+            if (selectedTab) {
+                selectedTab.classList.add('active');
+            }
         }
+        function toggleCollapsible(element) {
+            element.classList.toggle('active');
+            const content = element.nextElementSibling;
+            content.classList.toggle('active');
+        }
+        // Initialize collapsible sections
+        document.addEventListener('DOMContentLoaded', function() {
+            const collapsibles = document.getElementsByClassName('collapsible');
+            for (let i = 0; i < collapsibles.length; i++) {
+                collapsibles[i].nextElementSibling.classList.add('active');
+                collapsibles[i].classList.add('active');
+            }
+        });
     </script>
 </body>
+</html>