Enhance results HTML generation with dynamic styling and detailed model information

- Add get_header_color function to dynamically color card headers based on classification
- Update card layout to display model name, confidence scores, and classification
- Replace placeholder content with dynamic model result information
- Improve visual representation of AI and real confidence percentages using progress bars

app.py

@@ -197,6 +197,17 @@ def predict_image(img, confidence_threshold):
 
 # Define a function to generate the HTML content
 def generate_results_html(results):
+    def get_header_color(label):
+        if label == 'AI':
+            return 'bg-danger'
+        elif label == 'REAL':
+            return 'bg-success'
+        elif label == 'UNCERTAIN':
+            return 'bg-warning'
+        elif label == 'MAINTENANCE':
+            return 'bg-info'
+        else:
+            return 'bg-secondary'
     print(results)
     html_content = f"""
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
@@ -226,33 +237,93 @@ def generate_results_html(results):
         <div class="col">
             <div class="card-group">
                 <div class="card">
-                    <img src="https://placehold.jp/150x50.png" class="card-img-top" alt="...">
+                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
+                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
+                    </div>
+                    <div class="card-body">
+                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
+                    
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
+                    </div>
+                    <div class="progress">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
+                    </div>
+                    </div>
+                    <div class="card-footer">
+                    <small class="text-muted">model by @haywoodsloan / more info</small>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
+                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
+                    </div>
+                    <div class="card-body">
+                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
+                    
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
+                    </div>
+                    <div class="progress">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
+                    </div>
+                    </div>
+                    <div class="card-footer">
+                    <small class="text-muted">model by @haywoodsloan / more info</small>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
+                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
+                    </div>
                     <div class="card-body">
-                    <h5 class="card-title">Card title</h5>
-                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
+                    
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
+                    </div>
+                    <div class="progress">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
+                    </div>
                     </div>
                     <div class="card-footer">
-                    <small class="text-muted">Last updated 3 mins ago</small>
+                    <small class="text-muted">model by @haywoodsloan / more info</small>
                     </div>
                 </div>
                 <div class="card">
-                    <img src="https://placehold.jp/150x50.png" class="card-img-top" alt="...">
+                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
+                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
+                    </div>
                     <div class="card-body">
-                    <h5 class="card-title">Card title</h5>
-                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
+                    
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
+                    </div>
+                    <div class="progress">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
+                    </div>
                     </div>
                     <div class="card-footer">
-                    <small class="text-muted">Last updated 3 mins ago</small>
+                    <small class="text-muted">model by @haywoodsloan / more info</small>
                     </div>
                 </div>
                 <div class="card">
-                    <img src="https://placehold.jp/150x50.png" class="card-img-top" alt="...">
+                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
+                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
+                    </div>
                     <div class="card-body">
-                    <h5 class="card-title">Card title</h5>
-                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
+                    
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
+                    </div>
+                    <div class="progress">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
+                    </div>
                     </div>
                     <div class="card-footer">
-                    <small class="text-muted">Last updated 3 mins ago</small>
+                    <small class="text-muted">model by @haywoodsloan / more info</small>
                     </div>
                 </div>
             </div>