added webserver to detr hpc

detr_object_detection/detr_hpc/app.py

+from flask import Flask, render_template, redirect, url_for, session, request
+from werkzeug.datastructures import MultiDict
+from flask_bootstrap import Bootstrap
+from flask_wtf import FlaskForm
+from wtforms.validators import DataRequired, ValidationError, InputRequired
+from wtforms.fields import StringField, IntegerField, FloatField, SubmitField
+from collections import namedtuple
+import os
+import json
+import copy
+
+from logger import Logger
+import config
+logger = Logger(__name__)
+
+app = Flask(__name__)
+
+default_parameters_dict = {
+    "lr": 1e-4,
+    "lr_backbone": 1e-5,
+    "weight_decay": 1e-4,
+    "max_epoch": 200,
+    "gradient_clip_val": 0.1,
+    "accumulate_grad_batches": 8,
+    "batch_size": 2,
+    "dataloader_workers": 0
+}
+
+def set_train_parameters(para):
+    with open(config.status_folder+"/parameter.json", mode="w") as f:
+        json.dump(para, f)
+        f.close()
+    #session['parameters'] = para
+
+
+def get_train_parameters():
+    json_file_path = config.status_folder+"/parameter.json"
+    parameters = copy.deepcopy(default_parameters_dict)
+    try:
+        # Reading JSON data from the file
+        with open(json_file_path, mode="r") as file:
+            data_read = json.load(file)
+
+        # Check if data is available
+        if data_read:
+            logger.info("Parameters read successfully.")
+            parameters = data_read
+        else:
+            logger.info("Parameters were not available")
+
+    except FileNotFoundError:
+        logger.info(f"File not found: {json_file_path}. Writing a new one")
+        set_train_parameters(parameters)
+
+    except json.JSONDecodeError as e:
+        logger.error(f"Error decoding JSON: {e}")
+
+    # param = session.get('parameters')
+    # if param:
+    #     #parameters = json.loads(param)
+    #     parameters = param
+    #     logger.info("Retrieved Parameters: {}".format(parameters))
+    # else:
+    #     parameters = copy.deepcopy(default_parameters_dict)
+
+    # logger.debug(f"return training parameters: {parameters}")
+    return parameters
+
+
+class TrainerInputForm(FlaskForm):
+    LR = FloatField('Learning rate', validators=[DataRequired()], default=default_parameters_dict["lr"])
+    LRBackbone = FloatField('Learning rate for backbone layers', validators=[DataRequired()], default=default_parameters_dict["lr_backbone"])
+    WeightDecay = FloatField('Weight Decay', validators=[DataRequired()], default=default_parameters_dict["weight_decay"])
+    MaxEpoch = IntegerField('Max Epoch', validators=[DataRequired()], default=default_parameters_dict["max_epoch"])
+    GradientClipVal = FloatField('Gradient Clip Value', validators=[DataRequired()], default=default_parameters_dict["gradient_clip_val"])
+    AccumulateGradBatches = IntegerField('Accumulate Grad Batches', validators=[DataRequired()], default=default_parameters_dict["accumulate_grad_batches"])
+    BatchSize = IntegerField('Batch size', validators=[DataRequired()], default=default_parameters_dict["batch_size"])
+    Dataloader_workers = IntegerField('Number of Dataloader workers', validators=[InputRequired("You got to enter a valid worker value!")], default=default_parameters_dict["dataloader_workers"])
+
+    Save = SubmitField('Save Parameters')
+
+
+class TrainingStatusForm(FlaskForm):
+    TrainingStatus = StringField('Training status will be displayed here. Please save the parameters first before observing the status.', render_kw={'readonly': True})
+    Get = SubmitField('Get Status')
+
+
+@app.route('/', methods=['GET', 'POST'])
+def training_input():
+        
+    training_vals_form = TrainerInputForm()
+    trainingStatusForm = TrainingStatusForm()
+
+
+    if training_vals_form.Save.data and training_vals_form.validate_on_submit():
+        logger.info("Processing user inputs")
+        new_para = {}
+        new_para["lr"] = training_vals_form.LR.data
+        new_para["lr_backbone"] = training_vals_form.LRBackbone.data
+        new_para["weight_decay"] = training_vals_form.WeightDecay.data
+        new_para["max_epoch"] = training_vals_form.MaxEpoch.data
+        new_para["gradient_clip_val"] = training_vals_form.GradientClipVal.data
+        new_para["accumulate_grad_batches"] = training_vals_form.AccumulateGradBatches.data
+        new_para["batch_size"] = training_vals_form.BatchSize.data
+        new_para["dataloader_workers"] = training_vals_form.Dataloader_workers.data
+        
+        set_train_parameters(new_para)
+        logger.info(f"User inputs taken: {new_para}")
+        return redirect('/')
+
+    if trainingStatusForm.Get.data and trainingStatusForm.validate_on_submit():
+        if not os.path.exists(config.status_folder+"/results.txt"):
+            logger.error("Results.txt does not exist. Cannot load the status.")
+        else:
+            with open(config.status_folder+"/results.txt", mode="r") as f:
+                for line in f.readlines():
+                    print(line)
+                    trainingStatusForm.TrainingStatus.data = line
+            f.close()
+
+        logger.debug(f"Current training status: {trainingStatusForm.TrainingStatus.data}")
+
+    current_para = json.dumps(get_train_parameters(), indent=2)
+    return render_template("index.html", training_var_form=training_vals_form, trainingStatusForm=trainingStatusForm, current_para=current_para)
+
+
+def app_run():
+    app.secret_key = "detr"
+    bootstrap = Bootstrap(app)
+    app.run(host="0.0.0.0", port=8062)
+
+#app_run()
\ No newline at end of file

detr_object_detection/detr_hpc/detr_server.py

@@ -98,9 +98,8 @@ class DetrModelServicer(model_pb2_grpc.DetrModelServicer):
             self.detrOd.load_custom_model()
             input_path = request.input
             saving_path = request.output
-            
-            saving_image = os.path.join(self.config.output_path, "output.jpg")
-            output_dic = self.detrOd.inference(input_path, saving_image, threshold=self.config.detection_threshold)
+            #saving_image = os.path.join(self.config.output_path, "output.jpg")
+            output_dic = self.detrOd.inference(input_path, saving_path, threshold=self.config.detection_threshold)
             logger.info("Response generated")
             json_resp = json.dumps(output_dic)
 

detr_object_detection/detr_hpc/static/css/checkbox.css

+.grid-container {
+  display: grid;
+  grid-column-gap: 50px;
+  grid-row-gap: 50px;
+  grid-template-columns: auto auto;
+  padding: 10px;
+}
+
+.grid-item {
+  padding: 20px;
+  font-size: 30px;
+  text-align: left;
+}
\ No newline at end of file

detr_object_detection/detr_hpc/static/js/checkLoginpassword.js

+function loginSuccess() {
+  toastr.success("Redirecting you to the dashboard")
+  window.location.href = "/"
+}
+
+$("#login").submit(function () {
+  $("#button").prop("disabled", true)
+  $("#img").show()
+  event.preventDefault()
+  $.ajax({
+    url: "/checkloginpassword",
+    data: $(this).serialize(),
+    type: "POST",
+    success: function (response) {
+      $("#img").hide()
+      if (response === "correct") {
+        setTimeout(loginSuccess, 5000)
+        swal
+          .fire({
+            icon: "success",
+            title: "Login Successful",
+          })
+          .then((result) => {
+            window.location.href = "/"
+          })
+      } else if (response === "wrong") {
+        swal
+          .fire({
+            icon: "error",
+            title: "Login Error",
+            text: "Incorrect Username or password",
+          })
+          .then((result) => {
+            $("#button").removeAttr("disabled")
+          })
+      }
+    },
+    error: function (error) {
+      console.log(error)
+    },
+  })
+})

detr_object_detection/detr_hpc/static/js/checkLoginusername.js

+$(document).ready(function(){
+    $('#username').change( function(e){
+        var username = $('#username').val();
+
+        if(username != ''){
+  
+           $.ajax({
+              url: '/checkloginusername',
+              type: 'post',
+              data: {username: username},
+              success: function(response){
+                    if (response == "No User"){
+                        $('#uname_response').html("User does not exist").css({'color':'red', 'text-align':'right'});
+                        $('#button').prop('disabled', true);
+                    }else{
+                        $('#uname_response').html("");
+                        $('#button').removeAttr('disabled');
+                    }
+               }
+           });
+        }else{
+           $("#uname_response").html("");
+        }
+    })
+})
\ No newline at end of file

detr_object_detection/detr_hpc/static/js/checkpassword.js

+$(document).ready(function(){
+    $('#confirmpassword').keyup( function(e){
+        var password = $('#password').val();
+        var confirmpassword = $('#confirmpassword').val();
+
+
+        if(password != confirmpassword){
+  
+           $('#pass_response').html("The two passwords that you entered do not match.").css({'color':'red', 'text-align':'right'});
+           $('#button').prop('disabled', true);
+        }else{
+           $("#pass_response").html("");
+           $('#button').removeAttr('disabled');
+        }
+    })
+})
\ No newline at end of file

detr_object_detection/detr_hpc/static/js/checkusername.js

+    $(document).ready(function(){
+		$('#username').keyup( function(e){
+            var username = $('#username').val();
+
+            if(username != ''){
+      
+               $.ajax({
+                  url: '/checkusername',
+                  type: 'post',
+                  data: {username: username},
+                  success: function(response){
+                        if (response == "Available"){
+                      $('#uname_response').html(response).css({'color':'blue', 'text-align':'right'});
+                      $('#button').removeAttr('disabled');
+                        }else{
+                            $('#uname_response').html(response).css({'color':'red', 'text-align':'right'});
+                        }
+                   }
+               });
+            }else{
+               $("#uname_response").html("");
+            }
+		})
+	})
\ No newline at end of file

detr_object_detection/detr_hpc/static/js/demo/chart-area-demo.js

+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+function number_format(number, decimals, dec_point, thousands_sep) {
+  // *     example: number_format(1234.56, 2, ',', ' ');
+  // *     return: '1 234,56'
+  number = (number + '').replace(',', '').replace(' ', '');
+  var n = !isFinite(+number) ? 0 : +number,
+    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+    s = '',
+    toFixedFix = function(n, prec) {
+      var k = Math.pow(10, prec);
+      return '' + Math.round(n * k) / k;
+    };
+  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+  if (s[0].length > 3) {
+    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+  }
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || '';
+    s[1] += new Array(prec - s[1].length + 1).join('0');
+  }
+  return s.join(dec);
+}
+
+// Area Chart Example
+var ctx = document.getElementById("myAreaChart");
+var myLineChart = new Chart(ctx, {
+  type: 'line',
+  data: {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    datasets: [{
+      label: "Earnings",
+      lineTension: 0.3,
+      backgroundColor: "rgba(78, 115, 223, 0.05)",
+      borderColor: "rgba(78, 115, 223, 1)",
+      pointRadius: 3,
+      pointBackgroundColor: "rgba(78, 115, 223, 1)",
+      pointBorderColor: "rgba(78, 115, 223, 1)",
+      pointHoverRadius: 3,
+      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
+      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
+      pointHitRadius: 10,
+      pointBorderWidth: 2,
+      data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 25,
+        top: 25,
+        bottom: 0
+      }
+    },
+    scales: {
+      xAxes: [{
+        time: {
+          unit: 'date'
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        },
+        ticks: {
+          maxTicksLimit: 7
+        }
+      }],
+      yAxes: [{
+        ticks: {
+          maxTicksLimit: 5,
+          padding: 10,
+          // Include a dollar sign in the ticks
+          callback: function(value, index, values) {
+            return '$' + number_format(value);
+          }
+        },
+        gridLines: {
+          color: "rgb(234, 236, 244)",
+          zeroLineColor: "rgb(234, 236, 244)",
+          drawBorder: false,
+          borderDash: [2],
+          zeroLineBorderDash: [2]
+        }
+      }],
+    },
+    legend: {
+      display: false
+    },
+    tooltips: {
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      titleMarginBottom: 10,
+      titleFontColor: '#6e707e',
+      titleFontSize: 14,
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      intersect: false,
+      mode: 'index',
+      caretPadding: 10,
+      callbacks: {
+        label: function(tooltipItem, chart) {
+          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+          return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
+        }
+      }
+    }
+  }
+});

detr_object_detection/detr_hpc/static/js/demo/chart-bar-demo.js

+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+function number_format(number, decimals, dec_point, thousands_sep) {
+  // *     example: number_format(1234.56, 2, ',', ' ');
+  // *     return: '1 234,56'
+  number = (number + '').replace(',', '').replace(' ', '');
+  var n = !isFinite(+number) ? 0 : +number,
+    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+    s = '',
+    toFixedFix = function(n, prec) {
+      var k = Math.pow(10, prec);
+      return '' + Math.round(n * k) / k;
+    };
+  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+  if (s[0].length > 3) {
+    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+  }
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || '';
+    s[1] += new Array(prec - s[1].length + 1).join('0');
+  }
+  return s.join(dec);
+}
+
+// Bar Chart Example
+var ctx = document.getElementById("myBarChart");
+var myBarChart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June"],
+    datasets: [{
+      label: "Revenue",
+      backgroundColor: "#4e73df",
+      hoverBackgroundColor: "#2e59d9",
+      borderColor: "#4e73df",
+      data: [4215, 5312, 6251, 7841, 9821, 14984],
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 25,
+        top: 25,
+        bottom: 0
+      }
+    },
+    scales: {
+      xAxes: [{
+        time: {
+          unit: 'month'
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        },
+        ticks: {
+          maxTicksLimit: 6
+        },
+        maxBarThickness: 25,
+      }],
+      yAxes: [{
+        ticks: {
+          min: 0,
+          max: 15000,
+          maxTicksLimit: 5,
+          padding: 10,
+          // Include a dollar sign in the ticks
+          callback: function(value, index, values) {
+            return '$' + number_format(value);
+          }
+        },
+        gridLines: {
+          color: "rgb(234, 236, 244)",
+          zeroLineColor: "rgb(234, 236, 244)",
+          drawBorder: false,
+          borderDash: [2],
+          zeroLineBorderDash: [2]
+        }
+      }],
+    },
+    legend: {
+      display: false
+    },
+    tooltips: {
+      titleMarginBottom: 10,
+      titleFontColor: '#6e707e',
+      titleFontSize: 14,
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      caretPadding: 10,
+      callbacks: {
+        label: function(tooltipItem, chart) {
+          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+          return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
+        }
+      }
+    },
+  }
+});

detr_object_detection/detr_hpc/static/js/demo/chart-pie-demo.js

+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+// Pie Chart Example
+var ctx = document.getElementById("myPieChart");
+var myPieChart = new Chart(ctx, {
+  type: 'doughnut',
+  data: {
+    labels: ["Direct", "Referral", "Social"],
+    datasets: [{
+      data: [55, 30, 15],
+      backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
+      hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
+      hoverBorderColor: "rgba(234, 236, 244, 1)",
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    tooltips: {
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      caretPadding: 10,
+    },
+    legend: {
+      display: false
+    },
+    cutoutPercentage: 80,
+  },
+});

detr_object_detection/detr_hpc/static/js/demo/datatables-demo.js

+// Call the dataTables jQuery plugin
+$(document).ready(function() {
+  $('#dataTable').DataTable();
+});

detr_object_detection/detr_hpc/static/js/sb-admin-2.js

+(function($) {
+  "use strict"; // Start of use strict
+
+  // Toggle the side navigation
+  $("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
+    $("body").toggleClass("sidebar-toggled");
+    $(".sidebar").toggleClass("toggled");
+    if ($(".sidebar").hasClass("toggled")) {
+      $('.sidebar .collapse').collapse('hide');
+    };
+  });
+
+  // Close any open menu accordions when window is resized below 768px
+  $(window).resize(function() {
+    if ($(window).width() < 768) {
+      $('.sidebar .collapse').collapse('hide');
+    };
+  });
+
+  // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
+  $('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
+    if ($(window).width() > 768) {
+      var e0 = e.originalEvent,
+        delta = e0.wheelDelta || -e0.detail;
+      this.scrollTop += (delta < 0 ? 1 : -1) * 30;
+      e.preventDefault();
+    }
+  });
+
+  // Scroll to top button appear
+  $(document).on('scroll', function() {
+    var scrollDistance = $(this).scrollTop();
+    if (scrollDistance > 100) {
+      $('.scroll-to-top').fadeIn();
+    } else {
+      $('.scroll-to-top').fadeOut();
+    }
+  });
+
+  // Smooth scrolling using jQuery easing
+  $(document).on('click', 'a.scroll-to-top', function(e) {
+    var $anchor = $(this);
+    $('html, body').stop().animate({
+      scrollTop: ($($anchor.attr('href')).offset().top)
+    }, 1000, 'easeInOutExpo');
+    e.preventDefault();
+  });
+
+})(jQuery); // End of use strict

detr_object_detection/detr_hpc/static/js/sb-admin-2.min.js

+/*!
+ * Start Bootstrap - SB Admin 2 v4.0.7 (https://startbootstrap.com/template-overviews/sb-admin-2)
+ * Copyright 2013-2019 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/blob/master/LICENSE)
+ */
+
+!function(t){"use strict";t("#sidebarToggle, #sidebarToggleTop").on("click",function(o){t("body").toggleClass("sidebar-toggled"),t(".sidebar").toggleClass("toggled"),t(".sidebar").hasClass("toggled")&&t(".sidebar .collapse").collapse("hide")}),t(window).resize(function(){t(window).width()<768&&t(".sidebar .collapse").collapse("hide")}),t("body.fixed-nav .sidebar").on("mousewheel DOMMouseScroll wheel",function(o){if(768<t(window).width()){var e=o.originalEvent,l=e.wheelDelta||-e.detail;this.scrollTop+=30*(l<0?1:-1),o.preventDefault()}}),t(document).on("scroll",function(){100<t(this).scrollTop()?t(".scroll-to-top").fadeIn():t(".scroll-to-top").fadeOut()}),t(document).on("click","a.scroll-to-top",function(o){var e=t(this);t("html, body").stop().animate({scrollTop:t(e.attr("href")).offset().top},1e3,"easeInOutExpo"),o.preventDefault()})}(jQuery);
\ No newline at end of file

detr_object_detection/detr_hpc/static/scss/_buttons.scss

+.btn-circle {
+  border-radius: 100%;
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  &.btn-sm {
+    height: 1.8rem;
+    width: 1.8rem;
+    font-size: 0.75rem;
+  }
+  &.btn-lg {
+    height: 3.5rem;
+    width: 3.5rem;
+    font-size: 1.35rem;
+  }
+}
+
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+  .icon {
+    background: fade-out($black, .85);
+    display: inline-block;
+    padding: $btn-padding-y $btn-padding-x;
+  }
+  .text {
+    display: inline-block;
+    padding: $btn-padding-y $btn-padding-x;
+  }
+  &.btn-sm {
+    .icon {
+      padding: $btn-padding-y-sm $btn-padding-x-sm;
+    }
+    .text {
+      padding: $btn-padding-y-sm $btn-padding-x-sm;
+    }
+  }
+  &.btn-lg {
+    .icon {
+      padding: $btn-padding-y-lg $btn-padding-x-lg;
+    }
+    .text {
+      padding: $btn-padding-y-lg $btn-padding-x-lg;
+    }
+  }
+}

detr_object_detection/detr_hpc/static/scss/_cards.scss

+// Custom Card Styling
+
+.card {
+  .card-header {
+    // Format Dropdowns in Card Headings
+    .dropdown {
+      line-height: 1;
+      .dropdown-menu {
+        line-height: 1.5;
+      }
+    }
+  }
+  // Collapsable Card Styling
+  .card-header[data-toggle="collapse"] {
+    text-decoration: none;
+    position: relative;
+    padding: 0.75rem 3.25rem 0.75rem 1.25rem;
+    &::after {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding-right: 1.725rem;
+      line-height: 51px;
+      font-weight: 900;
+      content: '\f107';
+      font-family: 'Font Awesome 5 Free';
+      color: $gray-400;
+    }
+    &.collapsed {
+      border-radius: $card-border-radius;
+      &::after {
+        content: '\f105';
+      }
+    }
+  }
+}

detr_object_detection/detr_hpc/static/scss/_charts.scss

+// Area Chart
+.chart-area {
+  position: relative;
+  height: 10rem;
+  width: 100%;
+  @include media-breakpoint-up(md) {
+    height: 20rem;
+  }
+}
+
+// Bar Chart
+.chart-bar {
+  position: relative;
+  height: 10rem;
+  width: 100%;
+  @include media-breakpoint-up(md) {
+    height: 20rem;
+  }
+}
+
+// Pie Chart
+.chart-pie {
+  position: relative;
+  height: 15rem;
+  width: 100%;
+  @include media-breakpoint-up(md) {
+    height: calc(20rem - 43px) !important;
+  }
+}

detr_object_detection/detr_hpc/static/scss/_dropdowns.scss

+// Custom Dropdown Styling
+
+.dropdown {
+  .dropdown-menu {
+    font-size: $dropdown-font-size;
+    .dropdown-header {
+      @extend .text-uppercase;
+      font-weight: 800;
+      font-size: 0.65rem;
+      color: $gray-500;
+    }
+  }
+}
+
+// Utility class to hide arrow from dropdown
+
+.dropdown.no-arrow {
+  .dropdown-toggle::after {
+    display: none;
+  }
+}