faceDetectionControls.js 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. const SSD_MOBILENETV1 = 'ssd_mobilenetv1'
  2. const TINY_FACE_DETECTOR = 'tiny_face_detector'
  3. let selectedFaceDetector = SSD_MOBILENETV1
  4. // ssd_mobilenetv1 options
  5. let minConfidence = 0.5
  6. // tiny_face_detector options
  7. let inputSize = 512
  8. let scoreThreshold = 0.5
  9. function getFaceDetectorOptions() {
  10. return selectedFaceDetector === SSD_MOBILENETV1
  11. ? new faceapi.SsdMobilenetv1Options({ minConfidence })
  12. : new faceapi.TinyFaceDetectorOptions({ inputSize, scoreThreshold })
  13. }
  14. function onIncreaseMinConfidence() {
  15. minConfidence = Math.min(faceapi.utils.round(minConfidence + 0.1), 1.0)
  16. $('#minConfidence').val(minConfidence)
  17. updateResults()
  18. }
  19. function onDecreaseMinConfidence() {
  20. minConfidence = Math.max(faceapi.utils.round(minConfidence - 0.1), 0.1)
  21. $('#minConfidence').val(minConfidence)
  22. updateResults()
  23. }
  24. function onInputSizeChanged(e) {
  25. changeInputSize(e.target.value)
  26. updateResults()
  27. }
  28. function changeInputSize(size) {
  29. inputSize = parseInt(size)
  30. const inputSizeSelect = $('#inputSize')
  31. inputSizeSelect.val(inputSize)
  32. inputSizeSelect.material_select()
  33. }
  34. function onIncreaseScoreThreshold() {
  35. scoreThreshold = Math.min(faceapi.utils.round(scoreThreshold + 0.1), 1.0)
  36. $('#scoreThreshold').val(scoreThreshold)
  37. updateResults()
  38. }
  39. function onDecreaseScoreThreshold() {
  40. scoreThreshold = Math.max(faceapi.utils.round(scoreThreshold - 0.1), 0.1)
  41. $('#scoreThreshold').val(scoreThreshold)
  42. updateResults()
  43. }
  44. function onIncreaseMinFaceSize() {
  45. minFaceSize = Math.min(faceapi.utils.round(minFaceSize + 20), 300)
  46. $('#minFaceSize').val(minFaceSize)
  47. }
  48. function onDecreaseMinFaceSize() {
  49. minFaceSize = Math.max(faceapi.utils.round(minFaceSize - 20), 50)
  50. $('#minFaceSize').val(minFaceSize)
  51. }
  52. function getCurrentFaceDetectionNet() {
  53. if (selectedFaceDetector === SSD_MOBILENETV1) {
  54. return faceapi.nets.ssdMobilenetv1
  55. }
  56. if (selectedFaceDetector === TINY_FACE_DETECTOR) {
  57. return faceapi.nets.tinyFaceDetector
  58. }
  59. }
  60. function isFaceDetectionModelLoaded() {
  61. return !!getCurrentFaceDetectionNet().params
  62. }
  63. async function changeFaceDetector(detector) {
  64. ['#ssd_mobilenetv1_controls', '#tiny_face_detector_controls']
  65. .forEach(id => $(id).hide())
  66. selectedFaceDetector = detector
  67. const faceDetectorSelect = $('#selectFaceDetector')
  68. faceDetectorSelect.val(detector)
  69. faceDetectorSelect.material_select()
  70. $('#loader').show()
  71. if (!isFaceDetectionModelLoaded()) {
  72. await getCurrentFaceDetectionNet().load('/')
  73. }
  74. $(`#${detector}_controls`).show()
  75. $('#loader').hide()
  76. }
  77. async function onSelectedFaceDetectorChanged(e) {
  78. selectedFaceDetector = e.target.value
  79. await changeFaceDetector(e.target.value)
  80. updateResults()
  81. }
  82. function initFaceDetectionControls() {
  83. const faceDetectorSelect = $('#selectFaceDetector')
  84. faceDetectorSelect.val(selectedFaceDetector)
  85. faceDetectorSelect.on('change', onSelectedFaceDetectorChanged)
  86. faceDetectorSelect.material_select()
  87. const inputSizeSelect = $('#inputSize')
  88. inputSizeSelect.val(inputSize)
  89. inputSizeSelect.on('change', onInputSizeChanged)
  90. inputSizeSelect.material_select()
  91. }