Upload 20 files

.vidgear/webgear/static/css/custom.css

@@ -0,0 +1,198 @@
+/*--
+===============================================
+vidgear library source-code is deployed under the Apache 2.0 License:
+Copyright (c) 2019 Abhishek Thakur(@abhiTronix) <abhi.una12@gmail.com>
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+===============================================
+--*/
+
+/* Handles Responive image tags (from bootstrap) */
+.img-fluid {
+    max-width: 100%;
+    height: auto;
+}
+
+img {
+    vertical-align: middle;
+    border-style: none;
+}
+
+.mx-auto {
+    margin-right: auto !important;
+}
+
+.mx-auto {
+    margin-left: auto !important;
+}
+
+.d-block {
+    display: block !important;
+}
+
+.rounded {
+    border-radius: 0.25rem !important;
+}
+
+/* ends */
+
+/*
+    Main
+*/
+.bodycontainer {
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+}
+
+.bodycontainer::-webkit-scrollbar {
+    display: none;
+    /* Safari and Chrome */
+}
+
+h1 {
+    text-align: center;
+    color: #fff;
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    text-transform: Uppercase;
+    line-height: 1.2;
+    letter-spacing: 2px;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    background: #011B56;
+    background-attachment: scroll;
+    background-size: auto;
+    background-attachment: fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+}
+
+.copy-enhance p {
+    font-size: 0.9em;
+    color: #fff;
+    line-height: 1.8em;
+    letter-spacing: 1px;
+}
+
+p {
+    text-align: center;
+    color: #fff;
+    font-weight: 300;
+}
+
+a {
+    color: #fff;
+    font-weight: 500;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:hover {
+    color: yellow;
+}
+
+.copy-enhance p a {
+    color: #fff;
+    -webkit-transition: 0.5s all;
+    -moz-transition: 0.5s all;
+    -o-transition: 0.5s all;
+    -ms-transition: 0.5s all;
+    transition: 0.5s all;
+}
+
+/*
+    Handle mobile screens
+*/
+/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
+@media screen and (min-width: 601px) {
+    h1 {
+        font-size: 3.5rem;
+    }
+}
+
+/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
+@media screen and (max-width: 600px) {
+    h1 {
+        font-size: 2.0rem;
+    }
+}
+
+/*
+    Glow text
+*/
+.glow {
+    color: #fff;
+    text-align: center;
+    -webkit-animation: glow 1s ease-in-out infinite alternate;
+    -moz-animation: glow 1s ease-in-out infinite alternate;
+    animation: glow 1s ease-in-out infinite alternate;
+}
+
+@-webkit-keyframes glow {
+    from {
+        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #e60073, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073;
+    }
+
+    to {
+        text-shadow: 0 0 10px #fff, 0 0 20px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6;
+    }
+}
+
+/*
+    Social buttons
+*/
+#lab_social_icon_footer {
+    text-align: center;
+    display: block;
+    font-size: 12px;
+    transform: translateZ(0);
+}
+
+#lab_social_icon_footer a {
+    color: #f8f8ff;
+}
+
+#lab_social_icon_footer .social:hover {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -o-transform: scale(1.1);
+}
+
+#lab_social_icon_footer .social {
+    -webkit-transform: scale(0.8);
+    /* Browser Variations: */
+    -moz-transform: scale(0.8);
+    -o-transform: scale(0.8);
+    -webkit-transition-duration: 0.5s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+}
+
+/*
+    Multicoloured Hover Variations
+*/
+#lab_social_icon_footer #social-hp:hover {
+    color: #79b8ff;
+}
+
+#lab_social_icon_footer #social-github:hover {
+    color: #d1d5da;
+}
+
+#lab_social_icon_footer #social-gitter:hover {
+    color: #ffff00;
+}

.vidgear/webgear/static/js/custom.js

@@ -0,0 +1,21 @@
+/*!
+===============================================
+vidgear library source-code is deployed under the Apache 2.0 License:
+Copyright (c) 2019 Abhishek Thakur(@abhiTronix) <abhi.una12@gmail.com>
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+    ===============================================
+    */
+
+/*handles fullscreen workflow*/
+function toggleFullScreen(id) {
+    const element = document.getElementById(id);
+    screenfull.toggle(element)
+}

.vidgear/webgear/static/js/htmx.min.js

@@ -0,0 +1 @@
+(function(e,t){if(typeof define==="function"&&define.amd){define([],t)}else{e.htmx=t()}})(typeof self!=="undefined"?self:this,function(){return function(){"use strict";var U={onLoad:t,process:ct,on:M,off:D,trigger:$,ajax:er,find:C,findAll:R,closest:H,values:function(e,t){var r=Mt(e,t||"post");return r.values},remove:O,addClass:L,removeClass:q,toggleClass:A,takeClass:T,defineExtension:or,removeExtension:ar,logAll:E,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,inlineScriptNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",disableSelector:"[hx-disable], [data-hx-disable]",useTemplateFragments:false,scrollBehavior:"smooth",defaultFocusScroll:false},parseInterval:v,_:e,createEventSource:function(e){return new EventSource(e,{withCredentials:true})},createWebSocket:function(e){return new WebSocket(e,[])},version:"1.7.0"};var r={bodyContains:Y,filterValues:jt,hasAttribute:s,getAttributeValue:V,getClosestMatch:h,getExpressionVars:Gt,getHeaders:Xt,getInputValues:Mt,getInternalData:_,getSwapSpecification:Ut,getTriggerSpecs:ke,getTarget:ne,makeFragment:g,mergeObjects:Q,makeSettleInfo:zt,oobSwap:B,selectAndSwap:we,settleImmediately:Ct,shouldCancel:Pe,triggerEvent:$,triggerErrorEvent:J,withExtensions:gt};var n=["get","post","put","delete","patch"];var i=n.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");function v(e){if(e==undefined){return undefined}if(e.slice(-2)=="ms"){return parseFloat(e.slice(0,-2))||undefined}if(e.slice(-1)=="s"){return parseFloat(e.slice(0,-1))*1e3||undefined}return parseFloat(e)||undefined}function f(e,t){return e.getAttribute&&e.getAttribute(t)}function s(e,t){return e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function V(e,t){return f(e,t)||f(e,"data-"+t)}function u(e){return e.parentElement}function z(){return document}function h(e,t){if(t(e)){return e}else if(u(e)){return h(u(e),t)}else{return null}}function o(e,t,r){var n=V(t,r);var i=V(t,"hx-disinherit");if(e!==t&&i&&(i==="*"||i.split(" ").indexOf(r)>=0)){return"unset"}else{return n}}function G(t,r){var n=null;h(t,function(e){return n=o(t,e,r)});if(n!=="unset"){return n}}function d(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;return r&&r.call(e,t)}function a(e){var t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;var r=t.exec(e);if(r){return r[1].toLowerCase()}else{return""}}function l(e,t){var r=new DOMParser;var n=r.parseFromString(e,"text/html");var i=n.body;while(t>0){t--;i=i.firstChild}if(i==null){i=z().createDocumentFragment()}return i}function g(e){if(U.config.useTemplateFragments){var t=l("<body><template>"+e+"</template></body>",0);return t.querySelector("template").content}else{var r=a(e);switch(r){case"thead":case"tbody":case"tfoot":case"colgroup":case"caption":return l("<table>"+e+"</table>",1);case"col":return l("<table><colgroup>"+e+"</colgroup></table>",2);case"tr":return l("<table><tbody>"+e+"</tbody></table>",2);case"td":case"th":return l("<table><tbody><tr>"+e+"</tr></tbody></table>",3);case"script":return l("<div>"+e+"</div>",1);default:return l(e,0)}}}function K(e){if(e){e()}}function p(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function m(e){return p(e,"Function")}function x(e){return p(e,"Object")}function _(e){var t="htmx-internal-data";var r=e[t];if(!r){r=e[t]={}}return r}function y(e){var t=[];if(e){for(var r=0;r<e.length;r++){t.push(e[r])}}return t}function W(e,t){if(e){for(var r=0;r<e.length;r++){t(e[r])}}}function b(e){var t=e.getBoundingClientRect();var r=t.top;var n=t.bottom;return r<window.innerHeight&&n>=0}function Y(e){if(e.getRootNode()instanceof ShadowRoot){return z().body.contains(e.getRootNode().host)}else{return z().body.contains(e)}}function w(e){return e.trim().split(/\s+/)}function Q(e,t){for(var r in t){if(t.hasOwnProperty(r)){e[r]=t[r]}}return e}function S(e){try{return JSON.parse(e)}catch(e){pt(e);return null}}function e(e){return Jt(z().body,function(){return eval(e)})}function t(t){var e=U.on("htmx:load",function(e){t(e.detail.elt)});return e}function E(){U.logger=function(e,t,r){if(console){console.log(t,e,r)}}}function C(e,t){if(t){return e.querySelector(t)}else{return C(z(),e)}}function R(e,t){if(t){return e.querySelectorAll(t)}else{return R(z(),e)}}function O(e,t){e=k(e);if(t){setTimeout(function(){O(e)},t)}else{e.parentElement.removeChild(e)}}function L(e,t,r){e=k(e);if(r){setTimeout(function(){L(e,t)},r)}else{e.classList&&e.classList.add(t)}}function q(e,t,r){e=k(e);if(r){setTimeout(function(){q(e,t)},r)}else{if(e.classList){e.classList.remove(t);if(e.classList.length===0){e.removeAttribute("class")}}}}function A(e,t){e=k(e);e.classList.toggle(t)}function T(e,t){e=k(e);W(e.parentElement.children,function(e){q(e,t)});L(e,t)}function H(e,t){e=k(e);if(e.closest){return e.closest(t)}else{do{if(e==null||d(e,t)){return e}}while(e=e&&u(e))}}function N(e,t){if(t.indexOf("closest ")===0){return[H(e,t.substr(8))]}else if(t.indexOf("find ")===0){return[C(e,t.substr(5))]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else{return z().querySelectorAll(t)}}function ee(e,t){if(t){return N(e,t)[0]}else{return N(z().body,e)[0]}}function k(e){if(p(e,"String")){return C(e)}else{return e}}function I(e,t,r){if(m(t)){return{target:z().body,event:e,listener:t}}else{return{target:k(e),event:t,listener:r}}}function M(t,r,n){lr(function(){var e=I(t,r,n);e.target.addEventListener(e.event,e.listener)});var e=m(r);return e?r:n}function D(t,r,n){lr(function(){var e=I(t,r,n);e.target.removeEventListener(e.event,e.listener)});return m(r)?r:n}var te=z().createElement("output");function F(e,t){var r=G(e,t);if(r){if(r==="this"){return[re(e,t)]}else{var n=N(e,r);if(n.length===0){pt('The selector "'+r+'" on '+t+" returned no matches!");return[te]}else{return n}}}}function re(e,t){return h(e,function(e){return V(e,t)!=null})}function ne(e){var t=G(e,"hx-target");if(t){if(t==="this"){return re(e,"hx-target")}else{return ee(e,t)}}else{var r=_(e);if(r.boosted){return z().body}else{return e}}}function P(e){var t=U.config.attributesToSettle;for(var r=0;r<t.length;r++){if(e===t[r]){return true}}return false}function X(t,r){W(t.attributes,function(e){if(!r.hasAttribute(e.name)&&P(e.name)){t.removeAttribute(e.name)}});W(r.attributes,function(e){if(P(e.name)){t.setAttribute(e.name,e.value)}})}function j(e,t){var r=sr(t);for(var n=0;n<r.length;n++){var i=r[n];try{if(i.isInlineSwap(e)){return true}}catch(e){pt(e)}}return e==="outerHTML"}function B(e,i,o){var t="#"+i.id;var a="outerHTML";if(e==="true"){}else if(e.indexOf(":")>0){a=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{a=e}var r=z().querySelectorAll(t);if(r){W(r,function(e){var t;var r=i.cloneNode(true);t=z().createDocumentFragment();t.appendChild(r);if(!j(a,e)){t=r}var n={shouldSwap:true,target:e,fragment:t};if(!$(e,"htmx:oobBeforeSwap",n))return;e=n.target;if(n["shouldSwap"]){ye(a,e,e,t,o)}W(o.elts,function(e){$(e,"htmx:oobAfterSwap",n)})});i.parentNode.removeChild(i)}else{i.parentNode.removeChild(i);J(z().body,"htmx:oobErrorNoTarget",{content:i})}return e}function ie(e,r){W(R(e,"[hx-swap-oob], [data-hx-swap-oob]"),function(e){var t=V(e,"hx-swap-oob");if(t!=null){B(t,e,r)}})}function oe(e){W(R(e,"[hx-preserve], [data-hx-preserve]"),function(e){var t=V(e,"id");var r=z().getElementById(t);if(r!=null){e.parentNode.replaceChild(r,e)}})}function ae(n,e,i){W(e.querySelectorAll("[id]"),function(e){if(e.id&&e.id.length>0){var t=n.querySelector(e.tagName+"[id='"+e.id+"']");if(t&&t!==n){var r=e.cloneNode();X(e,t);i.tasks.push(function(){X(e,r)})}}})}function se(e){return function(){q(e,U.config.addedClass);ct(e);at(e);le(e);$(e,"htmx:load")}}function le(e){var t="[autofocus]";var r=d(e,t)?e:e.querySelector(t);if(r!=null){r.focus()}}function ue(e,t,r,n){ae(e,r,n);while(r.childNodes.length>0){var i=r.firstChild;L(i,U.config.addedClass);e.insertBefore(i,t);if(i.nodeType!==Node.TEXT_NODE&&i.nodeType!==Node.COMMENT_NODE){n.tasks.push(se(i))}}}function fe(t){var e=_(t);if(e.webSocket){e.webSocket.close()}if(e.sseEventSource){e.sseEventSource.close()}$(t,"htmx:beforeCleanupElement");if(e.listenerInfos){W(e.listenerInfos,function(e){if(t!==e.on){e.on.removeEventListener(e.trigger,e.listener)}})}if(t.children){W(t.children,function(e){fe(e)})}}function ce(e,t,r){if(e.tagName==="BODY"){return me(e,t,r)}else{var n;var i=e.previousSibling;ue(u(e),e,t,r);if(i==null){n=u(e).firstChild}else{n=i.nextSibling}_(e).replacedWith=n;r.elts=[];while(n&&n!==e){if(n.nodeType===Node.ELEMENT_NODE){r.elts.push(n)}n=n.nextElementSibling}fe(e);u(e).removeChild(e)}}function he(e,t,r){return ue(e,e.firstChild,t,r)}function de(e,t,r){return ue(u(e),e,t,r)}function ve(e,t,r){return ue(e,null,t,r)}function ge(e,t,r){return ue(u(e),e.nextSibling,t,r)}function pe(e,t,r){fe(e);return u(e).removeChild(e)}function me(e,t,r){var n=e.firstChild;ue(e,n,t,r);if(n){while(n.nextSibling){fe(n.nextSibling);e.removeChild(n.nextSibling)}fe(n);e.removeChild(n)}}function xe(e,t){var r=G(e,"hx-select");if(r){var n=z().createDocumentFragment();W(t.querySelectorAll(r),function(e){n.appendChild(e)});t=n}return t}function ye(e,t,r,n,i){switch(e){case"none":return;case"outerHTML":ce(r,n,i);return;case"afterbegin":he(r,n,i);return;case"beforebegin":de(r,n,i);return;case"beforeend":ve(r,n,i);return;case"afterend":ge(r,n,i);return;case"delete":pe(r,n,i);return;default:var o=sr(t);for(var a=0;a<o.length;a++){var f=o[a];try{var s=f.handleSwap(e,r,n,i);if(s){if(typeof s.length!=="undefined"){for(var l=0;l<s.length;l++){var u=s[l];if(u.nodeType!==Node.TEXT_NODE&&u.nodeType!==Node.COMMENT_NODE){i.tasks.push(se(u))}}}return}}catch(e){pt(e)}}if(e==="innerHTML"){me(r,n,i)}else{ye(U.config.defaultSwapStyle,t,r,n,i)}}}function be(e){if(e.indexOf("<title")>-1){var t=e.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,"");var r=t.match(/<title(\s[^>]*>|>)([\s\S]*?)<\/title>/im);if(r){return r[2]}}}function we(e,t,r,n,i){i.title=be(n);var o=g(n);if(o){ie(o,i);o=xe(r,o);oe(o);return ye(e,r,t,o,i)}}function Se(e,t,r){var n=e.getResponseHeader(t);if(n.indexOf("{")===0){var i=S(n);for(var o in i){if(i.hasOwnProperty(o)){var a=i[o];if(!x(a)){a={value:a}}$(r,o,a)}}}else{$(r,n,[])}}var Ee=/\s/;var Ce=/[\s,]/;var Re=/[_$a-zA-Z]/;var Oe=/[_$a-zA-Z0-9]/;var Le=['"',"'","/"];var qe=/[^\s]/;function Ae(e){var t=[];var r=0;while(r<e.length){if(Re.exec(e.charAt(r))){var n=r;while(Oe.exec(e.charAt(r+1))){r++}t.push(e.substr(n,r-n+1))}else if(Le.indexOf(e.charAt(r))!==-1){var i=e.charAt(r);var n=r;r++;while(r<e.length&&e.charAt(r)!==i){if(e.charAt(r)==="\\"){r++}r++}t.push(e.substr(n,r-n+1))}else{var o=e.charAt(r);t.push(o)}r++}return t}function Te(e,t,r){return Re.exec(e.charAt(0))&&e!=="true"&&e!=="false"&&e!=="this"&&e!==r&&t!=="."}function He(e,t,r){if(t[0]==="["){t.shift();var n=1;var i=" return (function("+r+"){ return (";var o=null;while(t.length>0){var a=t[0];if(a==="]"){n--;if(n===0){if(o===null){i=i+"true"}t.shift();i+=")})";try{var s=Jt(e,function(){return Function(i)()},function(){return true});s.source=i;return s}catch(e){J(z().body,"htmx:syntax:error",{error:e,source:i});return null}}}else if(a==="["){n++}if(Te(a,o,r)){i+="(("+r+"."+a+") ? ("+r+"."+a+") : (window."+a+"))"}else{i=i+a}o=t.shift()}}}function c(e,t){var r="";while(e.length>0&&!e[0].match(t)){r+=e.shift()}return r}var Ne="input, textarea, select";function ke(e){var t=V(e,"hx-trigger");var r=[];if(t){var n=Ae(t);do{c(n,qe);var f=n.length;var i=c(n,/[,\[\s]/);if(i!==""){if(i==="every"){var o={trigger:"every"};c(n,qe);o.pollInterval=v(c(n,/[,\[\s]/));c(n,qe);var a=He(e,n,"event");if(a){o.eventFilter=a}r.push(o)}else if(i.indexOf("sse:")===0){r.push({trigger:"sse",sseEvent:i.substr(4)})}else{var s={trigger:i};var a=He(e,n,"event");if(a){s.eventFilter=a}while(n.length>0&&n[0]!==","){c(n,qe);var l=n.shift();if(l==="changed"){s.changed=true}else if(l==="once"){s.once=true}else if(l==="consume"){s.consume=true}else if(l==="delay"&&n[0]===":"){n.shift();s.delay=v(c(n,Ce))}else if(l==="from"&&n[0]===":"){n.shift();var u=c(n,Ce);if(u==="closest"||u==="find"){n.shift();u+=" "+c(n,Ce)}s.from=u}else if(l==="target"&&n[0]===":"){n.shift();s.target=c(n,Ce)}else if(l==="throttle"&&n[0]===":"){n.shift();s.throttle=v(c(n,Ce))}else if(l==="queue"&&n[0]===":"){n.shift();s.queue=c(n,Ce)}else if((l==="root"||l==="threshold")&&n[0]===":"){n.shift();s[l]=c(n,Ce)}else{J(e,"htmx:syntax:error",{token:n.shift()})}}r.push(s)}}if(n.length===f){J(e,"htmx:syntax:error",{token:n.shift()})}c(n,qe)}while(n[0]===","&&n.shift())}if(r.length>0){return r}else if(d(e,"form")){return[{trigger:"submit"}]}else if(d(e,Ne)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function Ie(e){_(e).cancelled=true}function Me(e,t,r,n){var i=_(e);i.timeout=setTimeout(function(){if(Y(e)&&i.cancelled!==true){if(!je(n,dt("hx:poll:trigger",{triggerSpec:n,target:e}))){Z(t,r,e)}Me(e,t,V(e,"hx-"+t),n)}},n.pollInterval)}function De(e){return location.hostname===e.hostname&&f(e,"href")&&f(e,"href").indexOf("#")!==0}function Fe(t,r,e){if(t.tagName==="A"&&De(t)&&t.target===""||t.tagName==="FORM"){r.boosted=true;var n,i;if(t.tagName==="A"){n="get";i=f(t,"href");r.pushURL=true}else{var o=f(t,"method");n=o?o.toLowerCase():"get";if(n==="get"){r.pushURL=true}i=f(t,"action")}e.forEach(function(e){Be(t,n,i,r,e,true)})}}function Pe(e,t){if(e.type==="submit"||e.type==="click"){if(t.tagName==="FORM"){return true}if(d(t,'input[type="submit"], button')&&H(t,"form")!==null){return true}if(t.tagName==="A"&&t.href&&(t.getAttribute("href")==="#"||t.getAttribute("href").indexOf("#")!==0)){return true}}return false}function Xe(e,t){return _(e).boosted&&e.tagName==="A"&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function je(e,t){var r=e.eventFilter;if(r){try{return r(t)!==true}catch(e){J(z().body,"htmx:eventFilter:error",{error:e,source:r.source});return true}}return false}function Be(o,a,s,e,l,u){var t;if(l.from){t=N(o,l.from)}else{t=[o]}W(t,function(n){var i=function(e){if(!Y(o)){n.removeEventListener(l.trigger,i);return}if(Xe(o,e)){return}if(u||Pe(e,o)){e.preventDefault()}if(je(l,e)){return}var t=_(e);t.triggerSpec=l;if(t.handledFor==null){t.handledFor=[]}var r=_(o);if(t.handledFor.indexOf(o)<0){t.handledFor.push(o);if(l.consume){e.stopPropagation()}if(l.target&&e.target){if(!d(e.target,l.target)){return}}if(l.once){if(r.triggeredOnce){return}else{r.triggeredOnce=true}}if(l.changed){if(r.lastValue===o.value){return}else{r.lastValue=o.value}}if(r.delayed){clearTimeout(r.delayed)}if(r.throttle){return}if(l.throttle){if(!r.throttle){Z(a,s,o,e);r.throttle=setTimeout(function(){r.throttle=null},l.throttle)}}else if(l.delay){r.delayed=setTimeout(function(){Z(a,s,o,e)},l.delay)}else{Z(a,s,o,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:l.trigger,listener:i,on:n});n.addEventListener(l.trigger,i)})}var Ue=false;var Ve=null;function ze(){if(!Ve){Ve=function(){Ue=true};window.addEventListener("scroll",Ve);setInterval(function(){if(Ue){Ue=false;W(z().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"),function(e){_e(e)})}},200)}}function _e(e){if(!s(e,"data-hx-revealed")&&b(e)){e.setAttribute("data-hx-revealed","true");var t=_(e);if(t.initialized){Z(t.verb,t.path,e)}else{e.addEventListener("htmx:afterProcessNode",function(){Z(t.verb,t.path,e)},{once:true})}}}function We(e,t,r){var n=w(r);for(var i=0;i<n.length;i++){var o=n[i].split(/:(.+)/);if(o[0]==="connect"){Je(e,o[1],0)}if(o[0]==="send"){Ze(e)}}}function Je(s,r,n){if(!Y(s)){return}if(r.indexOf("/")==0){var e=location.hostname+(location.port?":"+location.port:"");if(location.protocol=="https:"){r="wss://"+e+r}else if(location.protocol=="http:"){r="ws://"+e+r}}var t=U.createWebSocket(r);t.onerror=function(e){J(s,"htmx:wsError",{error:e,socket:t});$e(s)};t.onclose=function(e){if([1006,1012,1013].indexOf(e.code)>=0){var t=Ge(n);setTimeout(function(){Je(s,r,n+1)},t)}};t.onopen=function(e){n=0};_(s).webSocket=t;t.addEventListener("message",function(e){if($e(s)){return}var t=e.data;gt(s,function(e){t=e.transformResponse(t,null,s)});var r=zt(s);var n=g(t);var i=y(n.children);for(var o=0;o<i.length;o++){var a=i[o];B(V(a,"hx-swap-oob")||"true",a,r)}Ct(r.tasks)})}function $e(e){if(!Y(e)){_(e).webSocket.close();return true}}function Ze(u){var f=h(u,function(e){return _(e).webSocket!=null});if(f){u.addEventListener(ke(u)[0].trigger,function(e){var t=_(f).webSocket;var r=Xt(u,f);var n=Mt(u,"post");var i=n.errors;var o=n.values;var a=Gt(u);var s=Q(o,a);var l=jt(s,u);l["HEADERS"]=r;if(i&&i.length>0){$(u,"htmx:validation:halted",i);return}t.send(JSON.stringify(l));if(Pe(e,u)){e.preventDefault()}})}else{J(u,"htmx:noWebSocketSourceError")}}function Ge(e){var t=U.config.wsReconnectDelay;if(typeof t==="function"){return t(e)}if(t==="full-jitter"){var r=Math.min(e,6);var n=1e3*Math.pow(2,r);return n*Math.random()}pt('htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"')}function Ke(e,t,r){var n=w(r);for(var i=0;i<n.length;i++){var o=n[i].split(/:(.+)/);if(o[0]==="connect"){Ye(e,o[1])}if(o[0]==="swap"){Qe(e,o[1])}}}function Ye(t,e){var r=U.createEventSource(e);r.onerror=function(e){J(t,"htmx:sseError",{error:e,source:r});tt(t)};_(t).sseEventSource=r}function Qe(o,a){var s=h(o,rt);if(s){var l=_(s).sseEventSource;var u=function(e){if(tt(s)){l.removeEventListener(a,u);return}var t=e.data;gt(o,function(e){t=e.transformResponse(t,null,o)});var r=Ut(o);var n=ne(o);var i=zt(o);we(r.swapStyle,o,n,t,i);Ct(i.tasks);$(o,"htmx:sseMessage",e)};_(o).sseListener=u;l.addEventListener(a,u)}else{J(o,"htmx:noSSESourceError")}}function et(e,t,r,n){var i=h(e,rt);if(i){var o=_(i).sseEventSource;var a=function(){if(!tt(i)){if(Y(e)){Z(t,r,e)}else{o.removeEventListener(n,a)}}};_(e).sseListener=a;o.addEventListener(n,a)}else{J(e,"htmx:noSSESourceError")}}function tt(e){if(!Y(e)){_(e).sseEventSource.close();return true}}function rt(e){return _(e).sseEventSource!=null}function nt(e,t,r,n,i){var o=function(){if(!n.loaded){n.loaded=true;Z(t,r,e)}};if(i){setTimeout(o,i)}else{o()}}function it(o,a,e){var t=false;W(n,function(n){if(s(o,"hx-"+n)){var i=V(o,"hx-"+n);t=true;a.path=i;a.verb=n;e.forEach(function(e){if(e.sseEvent){et(o,n,i,e.sseEvent)}else if(e.trigger==="revealed"){ze();_e(o)}else if(e.trigger==="intersect"){var t={};if(e.root){t.root=ee(o,e.root)}if(e.threshold){t.threshold=parseFloat(e.threshold)}var r=new IntersectionObserver(function(e){for(var t=0;t<e.length;t++){var r=e[t];if(r.isIntersecting){$(o,"intersect");break}}},t);r.observe(o);Be(o,n,i,a,e)}else if(e.trigger==="load"){nt(o,n,i,a,e.delay)}else if(e.pollInterval){a.polling=true;Me(o,n,i,e)}else{Be(o,n,i,a,e)}})}});return t}function ot(e){if(e.type==="text/javascript"||e.type==="module"||e.type===""){var t=z().createElement("script");W(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(U.config.inlineScriptNonce){t.nonce=U.config.inlineScriptNonce}var r=e.parentElement;try{r.insertBefore(t,e)}catch(e){pt(e)}finally{r.removeChild(e)}}}function at(e){if(d(e,"script")){ot(e)}W(R(e,"script"),function(e){ot(e)})}function st(){return document.querySelector("[hx-boost], [data-hx-boost]")}function lt(e){if(e.querySelectorAll){var t=st()?", a, form":"";var r=e.querySelectorAll(i+t+", [hx-sse], [data-hx-sse], [hx-ws],"+" [data-hx-ws], [hx-ext], [hx-data-ext]");return r}else{return[]}}function ut(r){var e=function(e){if(d(e.target,"button, input[type='submit']")){var t=_(r);t.lastButtonClicked=e.target}};r.addEventListener("click",e);r.addEventListener("focusin",e);r.addEventListener("focusout",function(e){var t=_(r);t.lastButtonClicked=null})}function ft(e){if(e.closest&&e.closest(U.config.disableSelector)){return}var t=_(e);if(!t.initialized){t.initialized=true;$(e,"htmx:beforeProcessNode");if(e.value){t.lastValue=e.value}var r=ke(e);var n=it(e,t,r);if(!n&&G(e,"hx-boost")==="true"){Fe(e,t,r)}if(e.tagName==="FORM"){ut(e)}var i=V(e,"hx-sse");if(i){Ke(e,t,i)}var o=V(e,"hx-ws");if(o){We(e,t,o)}$(e,"htmx:afterProcessNode")}}function ct(e){e=k(e);ft(e);W(lt(e),function(e){ft(e)})}function ht(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function dt(e,t){var r;if(window.CustomEvent&&typeof window.CustomEvent==="function"){r=new CustomEvent(e,{bubbles:true,cancelable:true,detail:t})}else{r=z().createEvent("CustomEvent");r.initCustomEvent(e,true,true,t)}return r}function J(e,t,r){$(e,t,Q({error:t},r))}function vt(e){return e==="htmx:afterProcessNode"}function gt(e,t){W(sr(e),function(e){try{t(e)}catch(e){pt(e)}})}function pt(e){if(console.error){console.error(e)}else if(console.log){console.log("ERROR: ",e)}}function $(e,t,r){e=k(e);if(r==null){r={}}r["elt"]=e;var n=dt(t,r);if(U.logger&&!vt(t)){U.logger(e,t,r)}if(r.error){pt(r.error);$(e,"htmx:error",{errorInfo:r})}var i=e.dispatchEvent(n);var o=ht(t);if(i&&o!==t){var a=dt(o,n.detail);i=i&&e.dispatchEvent(a)}gt(e,function(e){i=i&&e.onEvent(t,n)!==false});return i}var mt=location.pathname+location.search;function xt(){var e=z().querySelector("[hx-history-elt],[data-hx-history-elt]");return e||z().body}function yt(e,t,r,n){var i=S(localStorage.getItem("htmx-history-cache"))||[];for(var o=0;o<i.length;o++){if(i[o].url===e){i.splice(o,1);break}}i.push({url:e,content:t,title:r,scroll:n});while(i.length>U.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){J(z().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function bt(e){var t=S(localStorage.getItem("htmx-history-cache"))||[];for(var r=0;r<t.length;r++){if(t[r].url===e){return t[r]}}return null}function wt(e){var t=U.config.requestClass;var r=e.cloneNode(true);W(R(r,"."+t),function(e){q(e,t)});return r.innerHTML}function St(){var e=xt();var t=mt||location.pathname+location.search;$(z().body,"htmx:beforeHistorySave",{path:t,historyElt:e});if(U.config.historyEnabled)history.replaceState({htmx:true},z().title,window.location.href);yt(t,wt(e),z().title,window.scrollY)}function Et(e){if(U.config.historyEnabled)history.pushState({htmx:true},"",e);mt=e}function Ct(e){W(e,function(e){e.call()})}function Rt(n){var e=new XMLHttpRequest;var i={path:n,xhr:e};$(z().body,"htmx:historyCacheMiss",i);e.open("GET",n,true);e.setRequestHeader("HX-History-Restore-Request","true");e.onload=function(){if(this.status>=200&&this.status<400){$(z().body,"htmx:historyCacheMissLoad",i);var e=g(this.response);e=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;var t=xt();var r=zt(t);me(t,e,r);Ct(r.tasks);mt=n;$(z().body,"htmx:historyRestore",{path:n})}else{J(z().body,"htmx:historyCacheMissLoadError",i)}};e.send()}function Ot(e){St();e=e||location.pathname+location.search;var t=bt(e);if(t){var r=g(t.content);var n=xt();var i=zt(n);me(n,r,i);Ct(i.tasks);document.title=t.title;window.scrollTo(0,t.scroll);mt=e;$(z().body,"htmx:historyRestore",{path:e})}else{if(U.config.refreshOnHistoryMiss){window.location.reload(true)}else{Rt(e)}}}function Lt(e){var t=G(e,"hx-push-url");return t&&t!=="false"||_(e).boosted&&_(e).pushURL}function qt(e){var t=G(e,"hx-push-url");return t==="true"||t==="false"?null:t}function At(e){var t=F(e,"hx-indicator");if(t==null){t=[e]}W(t,function(e){e.classList["add"].call(e.classList,U.config.requestClass)});return t}function Tt(e){W(e,function(e){e.classList["remove"].call(e.classList,U.config.requestClass)})}function Ht(e,t){for(var r=0;r<e.length;r++){var n=e[r];if(n.isSameNode(t)){return true}}return false}function Nt(e){if(e.name===""||e.name==null||e.disabled){return false}if(e.type==="button"||e.type==="submit"||e.tagName==="image"||e.tagName==="reset"||e.tagName==="file"){return false}if(e.type==="checkbox"||e.type==="radio"){return e.checked}return true}function kt(t,r,n,e,i){if(e==null||Ht(t,e)){return}else{t.push(e)}if(Nt(e)){var o=f(e,"name");var a=e.value;if(e.multiple){a=y(e.querySelectorAll("option:checked")).map(function(e){return e.value})}if(e.files){a=y(e.files)}if(o!=null&&a!=null){var s=r[o];if(s){if(Array.isArray(s)){if(Array.isArray(a)){r[o]=s.concat(a)}else{s.push(a)}}else{if(Array.isArray(a)){r[o]=[s].concat(a)}else{r[o]=[s,a]}}}else{r[o]=a}}if(i){It(e,n)}}if(d(e,"form")){var l=e.elements;W(l,function(e){kt(t,r,n,e,i)})}}function It(e,t){if(e.willValidate){$(e,"htmx:validation:validate");if(!e.checkValidity()){t.push({elt:e,message:e.validationMessage,validity:e.validity});$(e,"htmx:validation:failed",{message:e.validationMessage,validity:e.validity})}}}function Mt(e,t){var r=[];var n={};var i={};var o=[];var a=_(e);var s=d(e,"form")&&e.noValidate!==true;if(a.lastButtonClicked){s=s&&a.lastButtonClicked.formNoValidate!==true}if(t!=="get"){kt(r,i,o,H(e,"form"),s)}kt(r,n,o,e,s);if(a.lastButtonClicked){var l=f(a.lastButtonClicked,"name");if(l){n[l]=a.lastButtonClicked.value}}var u=F(e,"hx-include");W(u,function(e){kt(r,n,o,e,s);if(!d(e,"form")){W(e.querySelectorAll(Ne),function(e){kt(r,n,o,e,s)})}});n=Q(n,i);return{errors:o,values:n}}function Dt(e,t,r){if(e!==""){e+="&"}if(String(r)==="[object Object]"){r=JSON.stringify(r)}var n=encodeURIComponent(r);e+=encodeURIComponent(t)+"="+n;return e}function Ft(e){var t="";for(var r in e){if(e.hasOwnProperty(r)){var n=e[r];if(Array.isArray(n)){W(n,function(e){t=Dt(t,r,e)})}else{t=Dt(t,r,n)}}}return t}function Pt(e){var t=new FormData;for(var r in e){if(e.hasOwnProperty(r)){var n=e[r];if(Array.isArray(n)){W(n,function(e){t.append(r,e)})}else{t.append(r,n)}}}return t}function Xt(e,t,r){var n={"HX-Request":"true","HX-Trigger":f(e,"id"),"HX-Trigger-Name":f(e,"name"),"HX-Target":V(t,"id"),"HX-Current-URL":z().location.href};Wt(e,"hx-headers",false,n);if(r!==undefined){n["HX-Prompt"]=r}if(_(e).boosted){n["HX-Boosted"]="true"}return n}function jt(t,e){var r=G(e,"hx-params");if(r){if(r==="none"){return{}}else if(r==="*"){return t}else if(r.indexOf("not ")===0){W(r.substr(4).split(","),function(e){e=e.trim();delete t[e]});return t}else{var n={};W(r.split(","),function(e){e=e.trim();n[e]=t[e]});return n}}else{return t}}function Bt(e){return f(e,"href")&&f(e,"href").indexOf("#")>=0}function Ut(e,t){var r=t?t:G(e,"hx-swap");var n={swapStyle:_(e).boosted?"innerHTML":U.config.defaultSwapStyle,swapDelay:U.config.defaultSwapDelay,settleDelay:U.config.defaultSettleDelay};if(_(e).boosted&&!Bt(e)){n["show"]="top"}if(r){var i=w(r);if(i.length>0){n["swapStyle"]=i[0];for(var o=1;o<i.length;o++){var a=i[o];if(a.indexOf("swap:")===0){n["swapDelay"]=v(a.substr(5))}if(a.indexOf("settle:")===0){n["settleDelay"]=v(a.substr(7))}if(a.indexOf("scroll:")===0){var s=a.substr(7);var l=s.split(":");var f=l.pop();var u=l.length>0?l.join(":"):null;n["scroll"]=f;n["scrollTarget"]=u}if(a.indexOf("show:")===0){var c=a.substr(5);var l=c.split(":");var h=l.pop();var u=l.length>0?l.join(":"):null;n["show"]=h;n["showTarget"]=u}if(a.indexOf("focus-scroll:")===0){var d=a.substr("focus-scroll:".length);n["focusScroll"]=d=="true"}}}}return n}function Vt(t,r,n){var i=null;gt(r,function(e){if(i==null){i=e.encodeParameters(t,n,r)}});if(i!=null){return i}else{if(G(r,"hx-encoding")==="multipart/form-data"||d(r,"form")&&f(r,"enctype")==="multipart/form-data"){return Pt(n)}else{return Ft(n)}}}function zt(e){return{tasks:[],elts:[e]}}function _t(e,t){var r=e[0];var n=e[e.length-1];if(t.scroll){var i=null;if(t.scrollTarget){i=ee(r,t.scrollTarget)}if(t.scroll==="top"&&(r||i)){i=i||r;i.scrollTop=0}if(t.scroll==="bottom"&&(n||i)){i=i||n;i.scrollTop=i.scrollHeight}}if(t.show){var i=null;if(t.showTarget){var o=t.showTarget;if(t.showTarget==="window"){o="body"}i=ee(r,o)}if(t.show==="top"&&(r||i)){i=i||r;i.scrollIntoView({block:"start",behavior:U.config.scrollBehavior})}if(t.show==="bottom"&&(n||i)){i=i||n;i.scrollIntoView({block:"end",behavior:U.config.scrollBehavior})}}}function Wt(e,t,r,n){if(n==null){n={}}if(e==null){return n}var i=V(e,t);if(i){var o=i.trim();var a=r;if(o.indexOf("javascript:")===0){o=o.substr(11);a=true}else if(o.indexOf("js:")===0){o=o.substr(3);a=true}if(o.indexOf("{")!==0){o="{"+o+"}"}var s;if(a){s=Jt(e,function(){return Function("return ("+o+")")()},{})}else{s=S(o)}for(var l in s){if(s.hasOwnProperty(l)){if(n[l]==null){n[l]=s[l]}}}}return Wt(u(e),t,r,n)}function Jt(e,t,r){if(U.config.allowEval){return t()}else{J(e,"htmx:evalDisallowedError");return r}}function $t(e,t){return Wt(e,"hx-vars",true,t)}function Zt(e,t){return Wt(e,"hx-vals",false,t)}function Gt(e){return Q($t(e),Zt(e))}function Kt(t,r,n){if(n!==null){try{t.setRequestHeader(r,n)}catch(e){t.setRequestHeader(r,encodeURIComponent(n));t.setRequestHeader(r+"-URI-AutoEncoded","true")}}}function Yt(t){if(t.responseURL&&typeof URL!=="undefined"){try{var e=new URL(t.responseURL);return e.pathname+e.search}catch(e){J(z().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function Qt(e,t){return e.getAllResponseHeaders().match(t)}function er(e,t,r){e=e.toLowerCase();if(r){if(r instanceof Element||p(r,"String")){return Z(e,t,null,null,{targetOverride:k(r),returnPromise:true})}else{return Z(e,t,k(r.source),r.event,{handler:r.handler,headers:r.headers,values:r.values,targetOverride:k(r.target),swapOverride:r.swap,returnPromise:true})}}else{return Z(e,t,null,null,{returnPromise:true})}}function tr(e){var t=[];while(e){t.push(e);e=e.parentElement}return t}function Z(e,t,n,f,r){var c=null;var h=null;r=r!=null?r:{};if(r.returnPromise&&typeof Promise!=="undefined"){var d=new Promise(function(e,t){c=e;h=t})}if(n==null){n=z().body}var v=r.handler||rr;if(!Y(n)){return}var g=r.targetOverride||ne(n);if(g==null||g==te){J(n,"htmx:targetError",{target:V(n,"hx-target")});return}var p=n;var i=_(n);var o=G(n,"hx-sync");var m=null;var x=false;if(o){var y=o.split(":");var b=y[0].trim();if(b==="this"){p=re(n,"hx-sync")}else{p=ee(n,b)}o=(y[1]||"drop").trim();i=_(p);if(o==="drop"&&i.xhr&&i.abortable!==true){return}else if(o==="abort"){if(i.xhr){return}else{x=true}}else if(o==="replace"){$(p,"htmx:abort")}else if(o.indexOf("queue")===0){var w=o.split(" ");m=(w[1]||"last").trim()}}if(i.xhr){if(i.abortable){$(p,"htmx:abort")}else{if(m==null){if(f){var S=_(f);if(S&&S.triggerSpec&&S.triggerSpec.queue){m=S.triggerSpec.queue}}if(m==null){m="last"}}if(i.queuedRequests==null){i.queuedRequests=[]}if(m==="first"&&i.queuedRequests.length===0){i.queuedRequests.push(function(){Z(e,t,n,f,r)})}else if(m==="all"){i.queuedRequests.push(function(){Z(e,t,n,f,r)})}else if(m==="last"){i.queuedRequests=[];i.queuedRequests.push(function(){Z(e,t,n,f,r)})}return}}var a=new XMLHttpRequest;i.xhr=a;i.abortable=x;var s=function(){i.xhr=null;i.abortable=false;if(i.queuedRequests!=null&&i.queuedRequests.length>0){var e=i.queuedRequests.shift();e()}};var E=G(n,"hx-prompt");if(E){var C=prompt(E);if(C===null||!$(n,"htmx:prompt",{prompt:C,target:g})){K(c);s();return d}}var R=G(n,"hx-confirm");if(R){if(!confirm(R)){K(c);s();return d}}var O=Xt(n,g,C);if(r.headers){O=Q(O,r.headers)}var L=Mt(n,e);var q=L.errors;var A=L.values;if(r.values){A=Q(A,r.values)}var T=Gt(n);var H=Q(A,T);var N=jt(H,n);if(e!=="get"&&G(n,"hx-encoding")==null){O["Content-Type"]="application/x-www-form-urlencoded"}if(t==null||t===""){t=z().location.href}var k=Wt(n,"hx-request");var l={parameters:N,unfilteredParameters:H,headers:O,target:g,verb:e,errors:q,withCredentials:r.credentials||k.credentials||U.config.withCredentials,timeout:r.timeout||k.timeout||U.config.timeout,path:t,triggeringEvent:f};if(!$(n,"htmx:configRequest",l)){K(c);s();return d}t=l.path;e=l.verb;O=l.headers;N=l.parameters;q=l.errors;if(q&&q.length>0){$(n,"htmx:validation:halted",l);K(c);s();return d}var I=t.split("#");var M=I[0];var D=I[1];if(e==="get"){var F=M;var P=Object.keys(N).length!==0;if(P){if(F.indexOf("?")<0){F+="?"}else{F+="&"}F+=Ft(N);if(D){F+="#"+D}}a.open("GET",F,true)}else{a.open(e.toUpperCase(),t,true)}a.overrideMimeType("text/html");a.withCredentials=l.withCredentials;a.timeout=l.timeout;if(k.noHeaders){}else{for(var X in O){if(O.hasOwnProperty(X)){var j=O[X];Kt(a,X,j)}}}var u={xhr:a,target:g,requestConfig:l,etc:r,pathInfo:{path:t,finalPath:F,anchor:D}};a.onload=function(){try{var e=tr(n);v(n,u);Tt(B);$(n,"htmx:afterRequest",u);$(n,"htmx:afterOnLoad",u);if(!Y(n)){var t=null;while(e.length>0&&t==null){var r=e.shift();if(Y(r)){t=r}}if(t){$(t,"htmx:afterRequest",u);$(t,"htmx:afterOnLoad",u)}}K(c);s()}catch(e){J(n,"htmx:onLoadError",Q({error:e},u));throw e}};a.onerror=function(){Tt(B);J(n,"htmx:afterRequest",u);J(n,"htmx:sendError",u);K(h);s()};a.onabort=function(){Tt(B);J(n,"htmx:afterRequest",u);J(n,"htmx:sendAbort",u);K(h);s()};a.ontimeout=function(){Tt(B);J(n,"htmx:afterRequest",u);J(n,"htmx:timeout",u);K(h);s()};if(!$(n,"htmx:beforeRequest",u)){K(c);s();return d}var B=At(n);W(["loadstart","loadend","progress","abort"],function(t){W([a,a.upload],function(e){e.addEventListener(t,function(e){$(n,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});$(n,"htmx:beforeSend",u);a.send(e==="get"?null:Vt(a,n,N));return d}function rr(s,l){var u=l.xhr;var f=l.target;var r=l.etc;if(!$(s,"htmx:beforeOnLoad",l))return;if(Qt(u,/HX-Trigger:/i)){Se(u,"HX-Trigger",s)}if(Qt(u,/HX-Push:/i)){var c=u.getResponseHeader("HX-Push")}if(Qt(u,/HX-Redirect:/i)){window.location.href=u.getResponseHeader("HX-Redirect");return}if(Qt(u,/HX-Refresh:/i)){if("true"===u.getResponseHeader("HX-Refresh")){location.reload();return}}if(Qt(u,/HX-Retarget:/i)){l.target=z().querySelector(u.getResponseHeader("HX-Retarget"))}var h;if(c=="false"){h=false}else{h=Lt(s)||c}var n=u.status>=200&&u.status<400&&u.status!==204;var d=u.response;var e=u.status>=400;var t=Q({shouldSwap:n,serverResponse:d,isError:e},l);if(!$(f,"htmx:beforeSwap",t))return;f=t.target;d=t.serverResponse;e=t.isError;l.failed=e;l.successful=!e;if(t.shouldSwap){if(u.status===286){Ie(s)}gt(s,function(e){d=e.transformResponse(d,u,s)});if(h){St()}var i=r.swapOverride;var v=Ut(s,i);f.classList.add(U.config.swappingClass);var o=function(){try{var e=document.activeElement;var t={};try{t={elt:e,start:e?e.selectionStart:null,end:e?e.selectionEnd:null}}catch(e){}var n=zt(f);we(v.swapStyle,f,s,d,n);if(t.elt&&!Y(t.elt)&&t.elt.id){var r=document.getElementById(t.elt.id);var i={preventScroll:v.focusScroll!==undefined?!v.focusScroll:!U.config.defaultFocusScroll};if(r){if(t.start&&r.setSelectionRange){r.setSelectionRange(t.start,t.end)}r.focus(i)}}f.classList.remove(U.config.swappingClass);W(n.elts,function(e){if(e.classList){e.classList.add(U.config.settlingClass)}$(e,"htmx:afterSwap",l)});if(l.pathInfo.anchor){location.hash=l.pathInfo.anchor}if(Qt(u,/HX-Trigger-After-Swap:/i)){var o=s;if(!Y(s)){o=z().body}Se(u,"HX-Trigger-After-Swap",o)}var a=function(){W(n.tasks,function(e){e.call()});W(n.elts,function(e){if(e.classList){e.classList.remove(U.config.settlingClass)}$(e,"htmx:afterSettle",l)});if(h){var e=c||qt(s)||Yt(u)||l.pathInfo.finalPath||l.pathInfo.path;Et(e);$(z().body,"htmx:pushedIntoHistory",{path:e})}if(n.title){var t=C("title");if(t){t.innerHTML=n.title}else{window.document.title=n.title}}_t(n.elts,v);if(Qt(u,/HX-Trigger-After-Settle:/i)){var r=s;if(!Y(s)){r=z().body}Se(u,"HX-Trigger-After-Settle",r)}};if(v.settleDelay>0){setTimeout(a,v.settleDelay)}else{a()}}catch(e){J(s,"htmx:swapError",l);throw e}};if(v.swapDelay>0){setTimeout(o,v.swapDelay)}else{o()}}if(e){J(s,"htmx:responseError",Q({error:"Response Status Error Code "+u.status+" from "+l.pathInfo.path},l))}}var nr={};function ir(){return{init:function(e){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,r){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,r,n){return false},encodeParameters:function(e,t,r){return null}}}function or(e,t){if(t.init){t.init(r)}nr[e]=Q(ir(),t)}function ar(e){delete nr[e]}function sr(e,r,n){if(e==undefined){return r}if(r==undefined){r=[]}if(n==undefined){n=[]}var t=V(e,"hx-ext");if(t){W(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){n.push(e.slice(7));return}if(n.indexOf(e)<0){var t=nr[e];if(t&&r.indexOf(t)<0){r.push(t)}}})}return sr(u(e),r,n)}function lr(e){if(z().readyState!=="loading"){e()}else{z().addEventListener("DOMContentLoaded",e)}}function ur(){if(U.config.includeIndicatorStyles!==false){z().head.insertAdjacentHTML("beforeend","<style>                      ."+U.config.indicatorClass+"{opacity:0;transition: opacity 200ms ease-in;}                      ."+U.config.requestClass+" ."+U.config.indicatorClass+"{opacity:1}                      ."+U.config.requestClass+"."+U.config.indicatorClass+"{opacity:1}                    </style>")}}function fr(){var e=z().querySelector('meta[name="htmx-config"]');if(e){return S(e.content)}else{return null}}function cr(){var e=fr();if(e){U.config=Q(U.config,e)}}lr(function(){cr();ur();var e=z().body;ct(e);var t=z().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){var t=e.target;var r=_(t);if(r&&r.xhr){r.xhr.abort()}});window.onpopstate=function(e){if(e.state&&e.state.htmx){Ot();W(t,function(e){$(e,"htmx:restored",{document:z(),triggerEvent:$})})}};setTimeout(function(){$(e,"htmx:load",{})},0)});return U}()});

.vidgear/webgear/templates/404.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+{% block content %}
+	<h1 class="glow">404</h1>
+	<h1>Page not found.</h1>
+{% endblock %}

.vidgear/webgear/templates/500.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+{% block content %}
+	<h1 class="glow">500</h1>
+	<h1>Server error.</h1>
+{% endblock %}

.vidgear/webgear/templates/base.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!-- Meta Data -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="description" content="Video Streaming & Object Tracking Test using WebGear and Starlette.">
+    <meta name="author" content="Steve Yin@Fresh Robotics">
+    <title>Traffic Demo</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', path='/img/favicon-32x32.png') }}">
+    <!-- Meta Data -->
+    <!-- Custom Theme files -->
+    <link href="{{ url_for('static', path='/css/custom.css') }}" rel="stylesheet">
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <!-- //Custom Theme files -->
+    <!-- web font -->
+    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
+    <!--//web font-->
+</head>
+
+<body class="bodycontainer">
+    <!-- main -->
+    {% block content %}{% endblock %}
+    <!-- //main -->
+    <!-- Custom Scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/5.1.0/screenfull.min.js"></script>
+    <script src="{{ url_for('static', path='/js/custom.js') }}"></script>
+    <!-- //Custom Scripts -->
+</body>
+
+</html>

.vidgear/webgear/templates/index.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="description" content="Video Streaming & Object Tracking Test using WebGear and Starlette.">
+  <meta name="author" content="Steve Yin@Fresh Robotics">
+  <title>Traffic Demo</title>
+</head>
+
+<body>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.9.0/dist/full.min.css" rel="stylesheet" type="text/css" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>  
+  <script src="https://unpkg.com/htmx.org@1.9.11/dist/ext/response-targets.js"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.11/dist/ext/sse.js"></script>
+  <!-- script src="https://unpkg.com/hyperscript.org@0.9.12"></script -->
+  <script>
+    htmx.defineExtension('submitjson', {
+      onEvent: function (name, evt) {
+        if (name === "htmx:configRequest") {
+          evt.detail.headers['Content-Type'] = "application/json"
+          // evt.detail.headers['X-API-Key'] = 'sjk_xxx'
+        }
+      },
+      encodeParameters: function(xhr, parameters, elt) {
+        xhr.overrideMimeType('text/json')
+        return (JSON.stringify({ payload: parameters }))
+      }
+    })
+  </script>
+
+  <div class="container mx-auto">
+    <div class="flex flex-col sm:flex-row flex-grow overflow-hidden">
+      <aside class="sm:w-1/3 md:w-1/3 lg:w-1/4 w-1/3 flex-shrink flex-grow-0 p-4">
+        <div class="sticky top-0 p-4 bg-gray-100 rounded-xl w-full">
+          <ul class="flex sm:flex-col overflow-hidden content-center justify-between">
+            <li class="py-2 bg-neutral-content hover:bg-indigo-300 rounded inline">
+              <img src="../static/img/video-streaming-outline-svgrepo-com.svg" class="w-7 sm:mx-2 mx-4 inline"/>
+              <label class="font-semibold text-lg">Camera Streams</label>
+            </li>
+            <li id="urls" hx-get="/urls" hx-target="this" hx-swap="outerHTML" hx-trigger="load"> </li>                
+
+            <li class="py-2 bg-neutral-content hover:bg-indigo-300 rounded inline">
+              <img src="../static/img/deep-learning-svgrepo-com.svg" class="w-7 sm:mx-2 mx-4 inline"/>
+              <label class="font-semibold text-lg">YOLO Models</label>                  
+            </li>
+            <li id="models" hx-get="/models" hx-target="this" hx-swap="innerHTML" hx-trigger="load"></li>
+          </ul>
+        </div>
+      </aside>
+
+      <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
+        <h1 class="text-3xl md:text-5xl mb-4 font-extrabold" id="home">Traffic Monitoring Demo</h1>
+
+        <div class="stats stats-vertical lg:stats-horizontal shadow bg-gray-50 rounded-xl border my-3 w-full">
+          <div class="stat">
+            <div class="stat-title">Streaming</div>
+            <div class="stat-value" id="stream-status">Off</div>
+            <div class="stat-desc" id="stream-info" hx-get="/geturl" hx-target="this" hx-swap="innerHTML" hx-trigger="load">...</div>
+          </div>
+          <div class="stat">
+            <div class="stat-title">Tracking</div>
+            <div class="stat-value" id="tracking-status">Off</div>
+            <div class="stat-desc" id="tracking-info" hx-get="/getmodel" hx-target="this" hx-swap="innerHTML" hx-trigger="load">...</div>
+          </div>
+          <div class="stat">
+            <div class="stat-title">In Counts</div>
+            <div class="stat-value" id="in-counts" hx-ext="sse" sse-connect="/sseincounts" sse-swap="evt_in_counts">...</div>
+            <div class="stat-desc"></div>
+          </div>
+          <div class="stat">
+            <div class="stat-title">Out Counts</div>
+            <div class="stat-value" id="out-counts" hx-ext="sse" sse-connect="/sseoutcounts" sse-swap="evt_out_counts">...</div>
+            <div class="stat-desc"></div>
+          </div>
+        </div>          
+
+        <div class="flex p-3">
+          <div class="flex items-center me-4" id="stream-toggle-div">
+            <label class="ms-2 text-lg font-medium text-gray-900 dark:text-gray-300">Streaming OFF</label> 
+            <input type="checkbox" class="ms-2 toggle toggle-lg toggle-primary" id="stream-toggle" name="stream_switch"
+            hx-post="/streamswitch" hx-trigger="change" hx-ext="submitjson" hx-target="#stream-status" hx-swap-oob="innerHTML"
+            />
+            <label class="ms-2 text-lg font-medium text-gray-900 dark:text-gray-300">ON</label>               
+            <script>
+              var stream_toggle = document.getElementById('stream-toggle');
+              stream_toggle.onchange = function() {
+                var tracking_toggle = document.getElementById('tracking-toggle');
+                tracking_toggle.checked = false;
+                var xhr = new XMLHttpRequest();
+                xhr.open(method="POST", url="/trackingswitch", async=true);
+                xhr.setRequestHeader('Content-Type', 'application/json');
+                xhr.send(JSON.stringify({}));
+                var tracking_status = document.getElementById('tracking-status');
+                tracking_status.innerHTML = "off"
+                if (this.checked == true) {
+                  setTimeout(() => {tracking_toggle.disabled = !this.checked}, 2500);
+                } else {
+                  tracking_toggle.disabled = !this.checked;
+                }
+              };
+            </script>
+          </div>
+          <div class="flex items-center me-4" id="tracking-toggle-div">
+            <label class="ms-2 text-lg font-medium text-gray-900 dark:text-gray-300">Tracking OFF</label> 
+            <input type="checkbox" class="ms-2 toggle toggle-lg toggle-secondary" id="tracking-toggle" name="tracking_switch" disabled
+            hx-post="/trackingswitch" hx-trigger="change" hx-ext="submitjson" hx-target="#tracking-status" hx-swap-oob="innerHTML"
+            />
+            <label class="ms-2 text-lg font-medium text-gray-900 dark:text-gray-300">ON</label>               
+          </div>
+        </div>
+
+        <div>
+          <iframe class="w-full h-full aspect-video" src="/video1"> </iframe>
+        </div>
+      </main>
+    </div>
+  </div>  
+
+  <footer class="bg-indigo-800 mt-auto">
+    <div class="px-4 py-3 text-white mx-auto">
+      <h1 class="text-2xl hidden sm:block mb-2">Acknowledgement</h1>
+      <div class="flex">
+          <div class="flex-grow flex flex-col">
+              <a href="https://www.youtube.com" target="_blank" class="text-xs uppercase tracking-wider">YouTube</a>
+              <a href="https://huggingface.co" target="_blank" class="text-xs uppercase tracking-wider">HuggingFace</a>
+          </div>                
+          <div class="flex-grow flex flex-col">                
+              <a href="https://www.ultralytics.com/" target="_blank" class="text-xs uppercase tracking-wider">Ultralytics YOLOv8</a>
+              <a href="https://abhitronix.github.io/vidgear/v0.3.2-stable/" target="_blank" class="text-xs uppercase tracking-wider">VidGear</a>
+              <a href="https://www.starlette.io/" target="_blank" class="text-xs uppercase tracking-wider">Starlette</a>
+          </div>
+          <div class="flex-grow flex flex-col">
+              <a href="https://tailwindcss.com/" target="_blank" class="text-xs uppercase tracking-wider">Tailwind CSS</a>
+              <a href="https://htmx.org/" target="_blank" class="text-xs uppercase tracking-wider">HTMX</a>
+          </div>
+      </div>
+      <div class="text-right text-xs py-2">
+          <a href="">&copy;2024 Fresh Consulting, Inc.</a>
+      </div>
+    </div>
+  </footer>
+
+</body>
+</html>

.vidgear/webgear/templates/partials/ack.html

@@ -0,0 +1,5 @@
+<div>
+    {% for row in table %}
+        <h4>{{ row }}</h4>
+    {% endfor %}
+</div>

.vidgear/webgear/templates/partials/camera_streams.html

@@ -0,0 +1,53 @@
+<div class="p-3" id="camera-stream-form">
+    <div class="collapse collapse-plus bg-base-200">
+        <input type="checkbox" /> 
+        <div class="collapse-title">
+            <label class="w-full font-semibold text-gray-900 dark:text-white"> Add a camera stream </label>
+        </div>
+        <div class="collapse-content" hx-ext="submitjson">
+            <div>
+                <form id="add-url-form">
+                    <li><label class="w-full font-semibold text-gray-900 dark:text-white"> camera location label (within 18 chars): </label></li>
+                    <li><input class="w-full font-semibold text-red-900 dark:text-white" name="CamLoc" type="text"></li>
+                    <li><label class="w-full font-semibold text-gray-900 dark:text-white"> and its streaming URL: </label></li>
+                    <li><input class="w-full font-semibold text-red-900 dark:text-white" name="URL" type="text"></li>
+                    <button class="btn btn-sm btn-block btn-neutral mt-2"
+                        hx-post="/addurl"
+                        hx-target="#camera-stream-form"
+                        hx-swap="outerHTML"
+                        type="submit">Add URL to List
+                    </button>
+                </form>
+            </div>
+            <div>
+                <label id="add-url-ack" class="font-semibold text-red-900"></label>                                            
+            </div>
+        </div>
+    </div>
+    <div class="collapse collapse-open bg-base-200">        
+        <div class="collapse-title">
+            <label class="w-full font-semibold text-gray-900 dark:text-white">Or, select a stream:</label>
+        </div>
+        <div class="collapse-content">
+            <form class="form-control" id="select_camera" hx-post="/seturl" hx-ext="submitjson" hx-target="#stream-info">
+                {% for row in table %}
+                    {% if row.selected == true %}
+                        <li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center ps-3 space-x-2 inline">
+                            <input type="radio" class="w-2 h-2 radio checked:bg-red-500" id={{ row.name }} name="cam_url" value={{ row.value }} checked>
+                            <label for={{ row.name }} class="badge badge-neutral" size='md'> <a href={{ row.value }} target="_blank" rel="noopener noreferrer"  class="text-wrap">
+                                {{ row.name }}</a> </label>
+                        </li>
+                    {% else %}
+                        <li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center ps-3 space-x-2 inline">
+                            <input type="radio" class="w-2 h-2 radio checked:bg-red-500" id={{ row.name }} name="cam_url" value={{ row.value }}>
+                            <label for={{ row.name }} class="badge badge-neutral size='md'"> <a href={{ row.value }} target="_blank" rel="noopener noreferrer" class="text-wrap">
+                                {{ row.name }}</a> </label>                
+                        </li>
+                    {% endif %}
+                {% endfor %}
+                <button id="set-url-button" class="btn btn-sm btn-block btn-neutral mt-2" type="submit">Set Camera Stream</button>
+                <label id="set-url-ack" class="font-semibold text-red-900"></label>                                            
+            </form>
+        </div>
+    </div>
+</div>

.vidgear/webgear/templates/partials/yolo_models.html

@@ -0,0 +1,31 @@
+<div class="p-3" id="model-selection-form">
+    <div class="collapse collapse-open bg-base-200">        
+        <div class="collapse-content">
+            <div>
+                <form id="model-list-form">
+                    {% for row in table %}
+                        {% if row.selected == true %}
+                            <li class="w-full h-auto border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center ps-3 space-x-2 inline">
+                                <input type="radio" class="w-2 h-2 radio checked:bg-red-500" id={{ row.name }} name="model_path" value={{ row.value }} checked>
+                                <label for={{ row.name }} class="badge badge-neutral text-wrap">{{ row.name }}</a> </label>                
+                            </li>
+                        {% else %}            
+                            <li class="w-full h-auto border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center ps-3 space-x-2 inline">
+                                <input type="radio" class="w-2 h-2 radio checked:bg-red-500" id={{ row.name }} name="model_path" value={{ row.value }}>
+                                <label for={{ row.name }} class="badge badge-neutral text-wrap">{{ row.name }}</label>                
+                            </li>
+                        {% endif %}
+                    {% endfor %}
+                    <button class="btn btn-sm btn-block btn-neutral mt-2" 
+                        hx-ext="submitjson"
+                        hx-post="/setmodel"
+                        hx-target="#tracking-info"
+                        hx-swap="innerHTML"                        
+                        _="on click toggle @disabled until htmx:afterOnLoad"
+                        type="submit">Set YOLO Model</button>
+                </form>
+                <label id="set-model-ack" class="font-semibold text-red-900"></label>                
+            </div>
+        </div>
+    </div>
+</div>

helper.py

@@ -0,0 +1,209 @@
+from threading import Thread
+from datetime import datetime
+import cv2
+import uvicorn
+import contextlib
+import threading
+import time
+import requests
+
+
+class Server(uvicorn.Server):
+    '''
+    Use this Server class to server a uvicorn in a separate thread, 
+    so to proceed to gradio UI launch
+    https://github.com/encode/uvicorn/issues/742
+
+    A couple of other links for reference --
+    https://stackoverflow.com/questions/61577643/python-how-to-use-fastapi-and-uvicorn-run-without-blocking-the-thread
+    https://stackoverflow.com/questions/76142431/how-to-run-another-application-within-the-same-running-event-loop/76148361#76148361
+    '''
+    def install_signal_handlers(self):
+        pass
+
+    @contextlib.contextmanager
+    def run_in_thread(self):
+        thread = threading.Thread(target=self.run)
+        thread.start()
+        try:
+            while not self.started:
+                time.sleep(1e-3)
+            yield
+        finally:
+            self.should_exit = True
+            thread.join()
+
+
+class CountsPerSec:
+    """
+    Class that tracks the number of occurrences ("counts") of an
+    arbitrary event and returns the frequency in occurrences
+    (counts) per second. The caller must increment the count.
+    """
+
+    def __init__(self):
+        self._start_time = None
+        self._num_occurrences = 0
+
+    def start(self):
+        self._start_time = datetime.now()
+        return self
+
+    def increment(self):
+        self._num_occurrences += 1
+
+    def countsPerSec(self):
+        elapsed_time = (datetime.now() - self._start_time).total_seconds()
+        return self._num_occurrences / elapsed_time if elapsed_time > 0 else 0
+
+
+class VideoGet:
+    """
+    Class that continuously gets frames from a VideoCapture object
+    with a dedicated thread.
+    """
+
+    def __init__(self, src=0):
+        self.stream = cv2.VideoCapture(src)
+        (self.grabbed, self.frame) = self.stream.read()
+        self.tn = Thread(target=self.get, args=())
+        self.stopped = False
+
+    def start(self):   
+        self.tn.start()
+        return self
+
+    def get(self):
+        while not self.stopped:
+            if not self.grabbed:
+                self.stop()
+            else:
+                (self.grabbed, self.frame) = self.stream.read()
+
+    def stop(self):
+        self.tn.join()
+        self.stopped = True
+
+
+class VideoShow:
+    """
+    Class that continuously shows a frame using a dedicated thread.
+    """
+
+    def __init__(self, frame=None):
+        self.frame = frame
+        self.tn = Thread(target=self.show, args=())
+        self.stopped = False
+
+    def start(self):
+        self.tn.start()
+        return self
+
+    def show(self):
+        while not self.stopped:
+            cv2.imshow("Video", self.frame)
+            if cv2.waitKey(1) == ord("q"):
+                self.stopped = True
+
+    def stop(self):
+        self.tn.join()    
+        self.stopped = True
+
+
+def show_fps(frame, iterations_per_sec):
+    """
+    Add iterations per second text to lower-left corner of a frame.
+    """
+    cv2.putText(
+        img=frame,
+        text="{:.0f} fps".format(iterations_per_sec),
+        org=(1000, 50),
+        fontFace=cv2.FONT_HERSHEY_SIMPLEX,
+        fontScale=0.8,
+        color=(0, 255, 255),
+        thickness=1,
+        lineType=cv2.LINE_AA
+    )
+    cv2.putText(
+        img=frame,   # annotated_frame,
+        text=datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+        org=(500, 50),
+        fontFace=cv2.FONT_HERSHEY_SIMPLEX,
+        fontScale=0.8,
+        color=(0, 255, 255),
+        thickness=1,
+        lineType=cv2.LINE_AA
+    )
+
+    return frame
+
+
+def draw_text(
+    img,
+    text,
+    pos=(0, 0),
+    font=cv2.FONT_HERSHEY_SIMPLEX,
+    font_scale=1,
+    font_thickness=2,
+    line_type=cv2.LINE_AA,
+    text_color=(0, 255, 0),
+    text_color_bg=(0, 0, 0)
+) -> None:
+    """draw a text with background color on image frame
+
+    Args:
+        img (_type_): _description_
+        text (_type_): _description_
+        pos (tuple, optional): _description_. Defaults to (0, 0).
+        font (_type_, optional): _description_. Defaults to cv2.FONT_HERSHEY_SIMPLEX.
+        font_scale (int, optional): _description_. Defaults to 1.
+        font_thickness (int, optional): _description_. Defaults to 2.
+        line_type (_type_, optional): _description_. Defaults to cv2.LINE_AA.
+        text_color (tuple, optional): _description_. Defaults to (0, 255, 0).
+        text_color_bg (tuple, optional): _description_. Defaults to (0, 0, 0).
+
+    Returns:
+        _type_: _description_
+    """
+    x, y = pos
+    text_size, _ = cv2.getTextSize(text, font, font_scale, font_thickness)
+    text_w, text_h = text_size
+    cv2.rectangle(img, (x, y + 10), (x + text_w, max(0, y - text_h - 10)), text_color_bg, -1)
+    cv2.putText(
+        img=img,
+        text=text,
+        org=pos,
+        fontFace=font,
+        fontScale=font_scale,
+        color=text_color,
+        thickness=font_thickness,
+        lineType=line_type
+    )
+
+    return text_size
+
+
+def try_site(youtube_url: str) -> bool:
+    """Check if a youtube url is playable
+
+    Args:
+        youtube_url (str): a given url for testing
+
+    Returns:
+        bool: whether or not that youtube_url is playable
+    """
+    pattern = '"playabilityStatus":{"status":"ERROR","reason":"Video unavailable"'
+    request = requests.get(youtube_url)
+    return False if pattern in request.text else True
+
+
+def make_table_from_dict(obj: dict, selected_key: str) -> list:
+    table = []
+    for k, v in obj.items():
+        if k == selected_key:
+            # print(k, v, selected_key)
+            table.append({"name": k, "value": v, "selected": True})
+        else:
+            table.append({"name": k, "value": v, "selected": False})
+
+    return table

requirements.txt

@@ -0,0 +1,10 @@
+numpy
+opencv-python-headless
+shapely>=2.0.0
+simplejpeg
+sse-starlette
+starlette
+ultralytics>=8.1.20
+uvicorn
+vidgear==0.3.2
+yt-dlp==2023.10.13

ultralytics_solutions_modified/__init__.py

@@ -0,0 +1 @@
+# Ultralytics YOLO 🚀, AGPL-3.0 license

ultralytics_solutions_modified/object_counter.py

@@ -0,0 +1,365 @@
+# Ultralytics YOLO 🚀, AGPL-3.0 license
+from collections import defaultdict
+import logging
+import cv2
+import numpy as np
+from ultralytics.utils.checks import check_imshow, check_requirements
+from ultralytics.utils.plotting import Annotator, colors
+from shapely.geometry import LineString, Point, Polygon
+
+
+# create logger
+logger = logging.getLogger(__name__).addHandler(logging.NullHandler())
+
+
+# need shapely>=2.0.0
+check_requirements("shapely>=2.0.0")
+
+
+class ObjectCounter:
+    """
+    A class to manage the counting of objects in a real-time video stream
+        based on their tracks.
+    """
+    def __init__(self):
+        """
+        Initializes the Counter with default values for various tracking and
+            counting parameters.
+        """
+        # Mouse events
+        self.is_drawing = False
+        self.selected_point = None
+
+        # Region & Line Information
+        self.reg_pts = [(20, 400), (1260, 400)]
+        self.line_dist_thresh = 15
+        self.counting_region = None
+        self.region_color = (255, 0, 255)
+        self.region_thickness = 5
+
+        # Image and annotation Information
+        self.im0 = None
+        self.tf = None
+        self.view_img = False
+        self.view_in_counts = True
+        self.view_out_counts = True
+
+        self.names = None  # Classes names
+        self.annotator = None  # Annotator
+
+        # Object counting Information
+        self.in_counts = 0
+        self.out_counts = 0
+        self.out_counts_prev = self.out_counts                            
+        self.in_counts_prev = self.in_counts                            
+        self.counting_list = []
+        self.count_txt_thickness = 0
+        self.count_txt_color = (0, 0, 0)
+        self.count_color = (255, 255, 255)
+
+        # Tracks info
+        self.track_history = defaultdict(list)
+        self.track_thickness = 2
+        self.draw_tracks = False
+        self.draw_boxes = False    # added by steve.yin @ 3/1/2024
+        self.track_color = (0, 255, 0)
+
+        # Check if environment support imshow
+        self.env_check = check_imshow(warn=True)
+
+    def set_args(
+        self,
+        classes_names,
+        reg_pts,
+        count_reg_color=(255, 0, 255),
+        line_thickness=2,
+        track_thickness=2,
+        view_img=False,
+        view_in_counts=True,
+        view_out_counts=True,
+        draw_tracks=False,
+        draw_boxes=False,  # added by steve.yin @ 3/1/2024
+        draw_reg_pts=True,  # added by steve.yin @ 3/1/2024
+        count_txt_thickness=2,
+        count_txt_color=(0, 0, 0),
+        count_color=(255, 255, 255),
+        track_color=(0, 255, 0),
+        region_thickness=5,
+        line_dist_thresh=15,
+    ):
+        """
+        Configures the Counter's image, bounding box line thickness, 
+            and counting region points.
+
+        Args:
+            line_thickness (int): Line thickness for bounding boxes.
+            view_img (bool): Flag to control display the video stream.
+            view_in_counts (bool): Flag to control display the incounts.
+            view_out_counts (bool): Flag to control display the outcounts.
+            reg_pts (list): Initial list of points for the counting region.
+            classes_names (dict): Classes names
+            track_thickness (int): Track thickness
+            draw_tracks (Bool): draw tracks
+            draw_boxes (Bool): draw boxes
+            draw_reg_pts (Bool): draw reg_pts
+            count_txt_thickness (int): Text thickness object counting display
+            count_txt_color (RGB color): count text color value
+            count_color (RGB color): count text background color value
+            count_reg_color (RGB color): Color of object counting region
+            track_color (RGB color): color for tracks
+            region_thickness (int): Object counting Region thickness
+            line_dist_thresh (int): Euclidean Distance threshold line counter
+        """
+        self.tf = line_thickness
+        self.view_img = view_img
+        self.view_in_counts = view_in_counts
+        self.view_out_counts = view_out_counts
+        self.track_thickness = track_thickness
+        self.draw_tracks = draw_tracks
+        self.draw_boxes = draw_boxes   # added by steve.yin @ 3/1/2024
+        self.draw_reg_pts = draw_reg_pts   # added by steve.yin @ 3/1/2024        
+
+        # Region and line selection
+        if len(reg_pts) == 2:
+            logging.info("Line Counter Initiated.")
+            self.reg_pts = reg_pts
+            self.counting_region = LineString(self.reg_pts)
+            u = np.array([self.reg_pts[0][0], self.reg_pts[0][1]])
+            v = np.array([self.reg_pts[1][0], self.reg_pts[1][1]])
+        elif len(reg_pts) == 4:
+            logging.info("Region Counter Initiated.")
+            self.reg_pts = reg_pts
+            self.counting_region = Polygon(self.reg_pts)
+            u = np.array([
+                (self.reg_pts[0][0] + self.reg_pts[1][0]) / 2,
+                (self.reg_pts[0][1] + self.reg_pts[1][1]) / 2,
+            ])
+            v = np.array([
+                (self.reg_pts[2][0] + self.reg_pts[3][0]) / 2,
+                (self.reg_pts[2][1] + self.reg_pts[3][1]) / 2,
+            ])
+        else:
+            logging.warning(
+                "Invalid Region points, which can only be 2 or 4. " +
+                "Using Line Counter Instead!"
+            )
+            self.counting_region = LineString(self.reg_pts)
+            u = np.array(self.counting_region.coords[0])
+            v = np.array(
+                self.counting_region.coords[len(self.counting_region.coords)-1]
+            )
+        # get line orientation, rotate ccw 90degrees, get line normal vector
+        n = v - u
+        nvec = np.array([-n[1], n[0]])
+        # print(f"v: {v}, u: {u}, n: {n}, nvec0: {nvec}")
+        self.counting_region_nvec = nvec / (np.linalg.norm(nvec) + 1e-6)
+        # print(f"nvec: {self.counting_region_nvec}")
+
+        self.names = classes_names
+        self.track_color = track_color
+        self.count_txt_thickness = count_txt_thickness
+        self.count_txt_color = count_txt_color
+        self.count_color = count_color
+        self.region_color = count_reg_color
+        self.region_thickness = region_thickness
+        self.line_dist_thresh = line_dist_thresh
+
+    def mouse_event_for_region(self, event, x, y, flags, params):
+        """
+        This function is designed to move region with mouse events in a 
+            real-time video stream.
+
+        Args:
+            event (int): The type of mouse event (e.g., cv2.EVENT_MOUSEMOVE, 
+                        cv2.EVENT_LBUTTONDOWN, etc.).
+            x (int): The x-coordinate of the mouse pointer.
+            y (int): The y-coordinate of the mouse pointer.
+            flags (int): Any flags associated with the event (e.g., 
+                        cv2.EVENT_FLAG_CTRLKEY, cv2.EVENT_FLAG_SHIFTKEY, etc.).
+            params (dict): Additional parameters passing to the function.
+        """
+        if event == cv2.EVENT_LBUTTONDOWN:
+            for i, point in enumerate(self.reg_pts):
+                if (
+                    isinstance(point, (tuple, list))
+                    and len(point) >= 2
+                    and (abs(x - point[0]) < 10 and abs(y - point[1]) < 10)
+                ):
+                    self.selected_point = i
+                    self.is_drawing = True
+                    break
+
+        elif event == cv2.EVENT_MOUSEMOVE:
+            if self.is_drawing and self.selected_point is not None:
+                self.reg_pts[self.selected_point] = (x, y)
+                self.counting_region = Polygon(self.reg_pts)
+
+        elif event == cv2.EVENT_LBUTTONUP:
+            self.is_drawing = False
+            self.selected_point = None
+
+    def extract_and_process_tracks(self, tracks):
+        """
+        Extracts and processes tracks for object counting in a video stream.
+        """
+        boxes = tracks[0].boxes.xyxy.cpu()
+        clss = tracks[0].boxes.cls.cpu().tolist()
+        track_ids = tracks[0].boxes.id.int().cpu().tolist()
+
+        # Annotator Init and region drawing
+        self.annotator = Annotator(self.im0, self.tf, self.names)
+        # self.annotator.draw_region(
+        #     reg_pts=self.reg_pts,
+        #     color=self.region_color,
+        #     thickness=self.region_thickness
+        # )
+
+        # Extract tracks
+        for box, track_id, cls in zip(boxes, track_ids, clss):
+            # Draw bounding box [modified by steve.yin @ 3/1/2024]
+            if self.draw_reg_pts:
+                self.annotator.draw_region(
+                    reg_pts=self.reg_pts,
+                    color=self.region_color,
+                    thickness=self.region_thickness
+                )
+            if self.draw_boxes:
+                self.annotator.box_label(
+                    box=box,
+                    label=f"{track_id}:{self.names[cls]}",
+                    color=colors(int(cls), True)
+                )
+
+            # Draw Tracks
+            track_line = self.track_history[track_id]
+            track_line.append((
+                float((box[0] + box[2]) / 2), float((box[1] + box[3]) / 2)
+            ))
+            if len(track_line) > 30:
+                track_line.pop(0)
+
+            # Draw track trails
+            if self.draw_tracks:
+                self.annotator.draw_centroid_and_tracks(
+                    track=track_line,
+                    color=self.track_color,
+                    track_thickness=self.track_thickness
+                )
+
+            prev_position = self.track_history[track_id][0] \
+                if len(self.track_history[track_id]) > 1 else None
+
+            # Count objects
+            if len(self.reg_pts) == 4:
+                if (
+                    prev_position is not None
+                    and self.counting_region.contains(Point(track_line[-1]))
+                    and track_id not in self.counting_list
+                ):
+                    self.counting_list.append(track_id)
+                    obj_track_vec = np.array([
+                        track_line[-1][0] - prev_position[0],
+                        track_line[-1][1] - prev_position[1]
+                    ])
+                    if np.sign(
+                        np.dot(obj_track_vec, self.counting_region_nvec)
+                    ) < 0:
+                    # if (box[0] - prev_position[0]) * (self.counting_region.centroid.x - prev_position[0]) > 0:
+                        self.out_counts += 1
+                    else:
+                        self.in_counts += 1
+            elif len(self.reg_pts) == 2:
+                if prev_position is not None:
+                    distance = Point(track_line[-1]) \
+                        .distance(self.counting_region)
+                    if (
+                        distance < self.line_dist_thresh and
+                        track_id not in self.counting_list
+                    ):
+                        self.counting_list.append(track_id)
+                        obj_track_vec = np.array([
+                            track_line[-1][0] - prev_position[0],
+                            track_line[-1][1] - prev_position[1]
+                        ])
+                        logging.info(f"obj_track_vec: {obj_track_vec}")
+                        if np.sign(
+                            np.dot(obj_track_vec, self.counting_region_nvec)
+                        ) < 0:
+                        # if (box[0] - prev_position[0]) * (self.counting_region.centroid.x - prev_position[0]) > 0:
+                            self.out_counts += 1
+                        else:
+                            self.in_counts += 1
+
+        self.outcounts_updated()
+        self.incounts_updated()
+        self.out_counts_prev = self.out_counts
+        self.in_counts_prev = self.in_counts
+        incount_label = f"In: {self.in_counts}"
+        outcount_label = f"Out: {self.out_counts}"
+
+        # Display counts based on user choice
+        counts_label = None
+        if not self.view_in_counts and not self.view_out_counts:
+            counts_label = None
+        elif not self.view_in_counts:
+            counts_label = outcount_label
+        elif not self.view_out_counts:
+            counts_label = incount_label
+        else:
+            counts_label = f"{incount_label} | {outcount_label}"
+
+        if counts_label is not None:
+            self.annotator.count_labels(
+                counts=counts_label,
+                count_txt_size=self.count_txt_thickness,
+                txt_color=self.count_txt_color,
+                color=self.count_color,
+            )
+
+    def display_frames(self):
+        """Display frame."""
+        if self.env_check:
+            cv2.namedWindow("Ultralytics YOLOv8 Object Counter")
+            # only add mouse event If user drawn region
+            if len(self.reg_pts) == 4:
+                cv2.setMouseCallback(
+                    "Ultralytics YOLOv8 Object Counter",
+                    self.mouse_event_for_region,
+                    {"region_points": self.reg_pts}
+                )
+            cv2.imshow("Ultralytics YOLOv8 Object Counter", self.im0)
+            # Break Window
+            if cv2.waitKey(1) & 0xFF == ord("q"):
+                return
+
+    def start_counting(self, im0, tracks):
+        """
+        Main function to start the object counting process.
+
+        Args:
+            im0 (ndarray): Current frame from the video stream.
+            tracks (list): List of tracks obtained from the object tracking process.
+        """
+        self.im0 = im0  # store image
+
+        if tracks[0].boxes.id is None:
+            if self.view_img:
+                self.display_frames()
+            return im0
+        self.extract_and_process_tracks(tracks)
+
+        if self.view_img:
+            self.display_frames()
+        return self.im0
+
+    def incounts_updated(self):
+        if self.in_counts_prev < self.in_counts:
+            yield f"{self.in_counts}"
+
+    def outcounts_updated(self):
+        if self.out_counts_prev < self.out_counts:
+            yield f"{self.out_counts}"
+
+
+if __name__ == "__main__":
+    ObjectCounter()

ultralytics_solutions_modified/speed_estimation.py

@@ -0,0 +1,235 @@
+# Ultralytics YOLO 🚀, AGPL-3.0 license
+
+from collections import defaultdict
+from time import time
+import logging
+import cv2
+import numpy as np
+from ultralytics.utils.checks import check_imshow
+from ultralytics.utils.plotting import Annotator, colors
+
+
+# create logger
+logging.getLogger(__name__).addHandler(logging.NullHandler())
+
+
+class SpeedEstimator:
+    """
+    A class to estimation speed of objects in real-time video stream 
+        based on their tracks.
+    """
+    def __init__(self):
+        """
+        Initializes the speed-estimator class with default values for
+            Visual, Image, track and speed parameters.
+        """
+        # Visual & im0 information
+        self.im0 = None
+        self.annotator = None
+        self.view_img = False
+
+        # Region information
+        self.reg_pts = [(20, 400), (1260, 400)]
+        self.region_thickness = 3
+
+        # Predict/track information
+        self.clss = None
+        self.names = None
+        self.boxes = None
+        self.trk_ids = None
+        self.trk_pts = None
+        self.line_thickness = 2
+        self.trk_history = defaultdict(list)
+
+        # Speed estimator information
+        self.current_time = 0
+        self.dist_data = {}
+        self.trk_idslist = []
+        self.spdl_dist_thresh = 10
+        self.trk_previous_times = {}
+        self.trk_previous_points = {}
+
+        # Check if environment support imshow
+        self.env_check = check_imshow(warn=True)
+
+    def set_args(
+        self,
+        reg_pts,
+        names,
+        view_img=False,
+        line_thickness=2,
+        region_thickness=5,
+        spdl_dist_thresh=10,
+    ):
+        """
+        Configures the speed estimation and display parameters.
+
+        Args:
+            reg_pts (list): Initial list of points for the speed calc region.
+            names (dict): object detection classes names
+            view_img (bool): Flag indicating frame display
+            line_thickness (int): Line thickness for bounding boxes.
+            region_thickness (int): Speed estimation region thickness
+            spdl_dist_thresh (int): Euclidean distance threshold for speed line
+        """
+        if reg_pts is None:
+            logging.warning("Region points not provided, using default values")
+        else:
+            self.reg_pts = reg_pts
+        self.names = names
+        self.view_img = view_img
+        self.line_thickness = line_thickness
+        self.region_thickness = region_thickness
+        self.spdl_dist_thresh = spdl_dist_thresh
+
+    def extract_tracks(self, tracks):
+        """
+        Extracts results from the provided data.
+
+        Args:
+            tracks (list): List of tracks obtained from the tracking process.
+        """
+        self.boxes = tracks[0].boxes.xyxy.cpu()
+        self.clss = tracks[0].boxes.cls.cpu().tolist()
+        self.trk_ids = tracks[0].boxes.id.int().cpu().tolist()
+
+    def store_track_info(self, track_id, box):
+        """
+        Store track data.
+
+        Args:
+            track_id (int): object track id.
+            box (list): object bounding box data
+        """
+        track = self.trk_history[track_id]
+        bbox_center = (
+            float((box[0] + box[2]) / 2), float((box[1] + box[3]) / 2)
+        )
+        track.append(bbox_center)
+
+        if len(track) > 30:
+            track.pop(0)
+
+        self.trk_pts = np.hstack(track).astype(np.int32).reshape((-1, 1, 2))
+        return track
+
+    def plot_box_and_track(self, track_id, box, cls, track):
+        """
+        Plot track and bounding box.
+
+        Args:
+            track_id (int): object track id.
+            box (list): object bounding box data
+            cls (str): object class name
+            track (list): tracking history for tracks path drawing
+        """
+        # speed_label = f"{int(self.dist_data[track_id])}km/ph" \
+        #   if track_id in self.dist_data else self.names[int(cls)]
+        # bbox_color = colors(int(track_id)) \
+        #   if track_id in self.dist_data else (255, 0, 255)
+        # self.annotator.box_label(box, speed_label, bbox_color)
+
+        # modified by steve.yin @ 3/1/2024 for traffic monitoring demo
+        # added for a combo label display with id, class name, speed
+        box_label = f"{track_id}:{self.names[int(cls)]}"
+        box_label += f":{(int)(self.dist_data[track_id]*0.621371)}mph" \
+            if track_id in self.dist_data else ''
+        bbox_color = colors(int(track_id)) \
+            if track_id in self.dist_data else (255, 0, 255)
+        self.annotator.box_label(box, box_label, bbox_color)
+        cv2.polylines(
+            self.im0, [self.trk_pts],
+            isClosed=False, color=(0, 255, 0), thickness=3
+        )
+        cv2.circle(
+            self.im0, (int(track[-1][0]), int(track[-1][1])), 5,
+            bbox_color, -1
+        )
+
+    def calculate_speed(self, trk_id, track):
+        """
+        Calculation of object speed.
+
+        Args:
+            trk_id (int): object track id.
+            track (list): tracking history for tracks path drawing
+        """
+        if not self.reg_pts[0][0] < track[-1][0] < self.reg_pts[1][0]:
+            return
+        if (
+            self.reg_pts[1][1] - self.spdl_dist_thresh < track[-1][1]
+            < self.reg_pts[1][1] + self.spdl_dist_thresh
+        ):
+            direction = "known"
+
+        elif (
+            self.reg_pts[0][1] - self.spdl_dist_thresh < track[-1][1]
+            < self.reg_pts[0][1] + self.spdl_dist_thresh
+        ):
+            direction = "known"
+        else:
+            direction = "unknown"
+
+        if (
+            self.trk_previous_times[trk_id] != 0 and direction != "unknown"
+            and trk_id not in self.trk_idslist
+        ):
+            self.trk_idslist.append(trk_id)
+
+            time_difference = time() - self.trk_previous_times[trk_id]
+            if time_difference > 0:
+                dist_difference = np.abs(
+                    track[-1][1] - self.trk_previous_points[trk_id][1]
+                )
+                speed = dist_difference / time_difference
+                self.dist_data[trk_id] = speed
+
+        self.trk_previous_times[trk_id] = time()
+        self.trk_previous_points[trk_id] = track[-1]
+
+    def estimate_speed(self, im0, tracks, region_color=(255, 0, 0)):
+        """
+        Calculate object based on tracking data.
+
+        Args:
+            im0 (nd array): Image
+            tracks (list): List of tracks obtained from the tracking process.
+            region_color (tuple): Color to use when drawing regions.
+        """
+        self.im0 = im0
+        if tracks[0].boxes.id is None:
+            if self.view_img and self.env_check:
+                self.display_frames()
+            return im0
+        self.extract_tracks(tracks)
+
+        self.annotator = Annotator(self.im0, line_width=3)
+        self.annotator.draw_region(
+            reg_pts=self.reg_pts,
+            color=region_color,
+            thickness=self.region_thickness
+        )
+
+        for box, trk_id, cls in zip(self.boxes, self.trk_ids, self.clss):
+            track = self.store_track_info(trk_id, box)
+
+            if trk_id not in self.trk_previous_times:
+                self.trk_previous_times[trk_id] = 0
+
+            self.plot_box_and_track(trk_id, box, cls, track)
+            self.calculate_speed(trk_id, track)
+
+        if self.view_img and self.env_check:
+            self.display_frames()
+
+        return im0
+
+    def display_frames(self):
+        """Display frame."""
+        cv2.imshow("Ultralytics Speed Estimation", self.im0)
+        if cv2.waitKey(1) & 0xFF == ord("q"):
+            return
+
+
+if __name__ == "__main__":
+    SpeedEstimator()

webapp.py

@@ -0,0 +1,1054 @@
+import asyncio
+from datetime import datetime
+import logging
+import cv2
+import numpy as np
+from pathlib import Path
+import torch
+from starlette.middleware import Middleware
+from starlette.responses import StreamingResponse, Response
+from starlette.requests import Request
+from starlette.routing import Mount, Route
+from starlette.staticfiles import StaticFiles
+from starlette.templating import Jinja2Templates
+from sse_starlette import EventSourceResponse
+from asgi_htmx import HtmxMiddleware
+from asgi_htmx import HtmxRequest
+from ultralytics import YOLO
+from ultralytics_solutions_modified import object_counter, speed_estimation
+from vidgear.gears import CamGear
+from vidgear.gears.asyncio import WebGear
+from vidgear.gears.asyncio.helper import reducer
+from helper import draw_text, try_site, make_table_from_dict
+
+
+HERE = Path(__file__).parent
+static = StaticFiles(directory=HERE / ".vidgear/webgear/static")
+templates = Jinja2Templates(directory=HERE / ".vidgear/webgear/templates")
+EVT_STREAM_DELAY_SEC = 0.05  # second
+RETRY_TIMEOUT_MILSEC = 15000  # milisecond
+
+# Create and configure logger
+# logger = logging.getLogger(__name__).addHandler(logging.NullHandler())
+logging.basicConfig(
+    format='%(asctime)s %(name)-8s->%(module)-20s->%(funcName)-20s:%(lineno)-4s::%(levelname)-8s %(message)s',
+    level=logging.INFO
+)
+
+
+class DemoCase:
+    def __init__(
+        self,
+        FRAME_WIDTH: int = 1280,
+        FRAME_HEIGHT: int = 720,
+        YOLO_VERBOSE: bool = True
+    ):
+        self.FRAME_WIDTH: int = FRAME_WIDTH
+        self.FRAME_HEIGHT: int = FRAME_HEIGHT
+        self.YOLO_VERBOSE: bool = YOLO_VERBOSE
+        # predefined yolov8 model references
+        self.model_dict: dict = {
+            "y8nano": "./data/models/yolov8n.pt",
+            "y8small": "./data/models/yolov8s.pt",
+            "y8medium": "./data/models/yolov8m.pt",
+            "y8large": "./data/models/yolov8l.pt",
+            "y8huge": "./data/models/yolov8x.pt",
+        }
+        self.model_choice_default: str = "y8small"
+        # predefined youtube live stream urls
+        self.url_dict: dict = {
+            "Peace Bridge US": "https://youtu.be/9En2186vo5g",
+            "Peace Bridge CA": "https://youtu.be/WPMgP2C3_co",
+            "San Marcos TX": "https://youtu.be/E8LsKcVpL5A",
+            "4Corners Downtown": "https://youtu.be/ByED80IKdIU",
+            "Gangnam Seoul": "https://youtu.be/JbnJAsk1zII",
+            "Time Square NY": "https://youtu.be/UVftxDFol90",
+            "Port Everglades-1": "https://youtu.be/67-73mgWDf0",
+            "Port Everglades-2": "https://youtu.be/Nhuu1QsW5LI",
+            "Port Everglades-3": "https://youtu.be/Lpm-C_Gz6yM",
+        }
+        self.cam_loc_default: str = "Peace Bridge US"
+        # run time parameters that are from user input
+        self.model_choice: str = self.model_choice_default
+        self.cam_loc: str = self.cam_loc_default
+        self.roi_height: str = int(FRAME_HEIGHT / 2)
+        self.roi_thickness_half: str = 30
+        self.frame_reduction: int = 50
+        self.obj_class_id: list[int] = [2, 3, 5, 7]
+        # define some logic flow control booleans
+        self._is_running: bool = False
+        self._is_tracking: bool = False
+        # self._model_changed: bool = True
+        # self._cam_loc_changed: bool = True
+        # self._roi_height_changed: bool = True
+        # self._obj_class_id_changed: bool = False
+        self.stream0: CamGear = None
+        self.stream1: CamGear = None
+        self.counter = None
+        self.speed_obj = None
+
+    def load_model(
+        self,
+        model_choice: str = "y8small",
+        conf_threshold: float = 0.25,
+        iou_threshold: float = 0.7,
+        use_FP16: bool = False,
+        use_stream_buffer: bool = False
+    ) -> None:
+        """
+            load the YOLOv8 model of choice
+        """
+        if model_choice not in self.model_dict:
+            logging.warning(
+                f'\"{model_choice}\" not found in the model_dict, use '
+                f'\"{self.model_dict[self.model_choice_default]}\" instead!'
+            )
+            self.model_choice = self.model_choice_default
+        else:
+            self.model_choice = model_choice
+        self.model = YOLO(f"{self.model_dict[self.model_choice]}")
+
+        # push the model to GPU if available
+        device = "cuda" if torch.cuda.is_available() else "cpu"
+        if device == "cuda":
+            torch.cuda.set_device(0)
+            self.model.to(device)
+            logging.info(
+                f"{self.model_dict[self.model_choice]} loaded using "
+                f"torch w GPU0"
+            )
+        else:
+            logging.info(
+                f"{self.model_dict[self.model_choice]} loaded using CPU"
+            )
+
+        # setup some configs
+        self.conf_threshold: float = conf_threshold if conf_threshold > 0.0 else 0.25   # noqa
+        self.iou_threshold: float = iou_threshold if iou_threshold > 0.0 else 0.7   # noqa
+        self.use_FP16: bool = use_FP16
+        self.use_stream_buffer: bool = use_stream_buffer
+        logging.info(
+            f"{self.model_choice}: conf={self.conf_threshold:.2f} | "
+            f"iou={self.iou_threshold:.2f} | FP16={self.use_FP16} | "
+            f"stream_buffer={self.use_stream_buffer}"
+        )
+
+    def select_cam_loc(
+        self,
+        cam_loc_key: str = "Peace Bridge US",
+        cam_loc_val: str = "https://www.youtube.com/watch?v=9En2186vo5g"
+    ) -> None:
+        """
+            select camera video feed from url_dict, or set as a new url
+        """
+        if (bool(cam_loc_key) is False or bool(cam_loc_val) is False):
+            self.cam_loc = self.cam_loc_default
+            logging.warning(
+                f'input cam_loc_key, cam_loc_val pair invalid, use default '
+                f'{{{self.cam_loc_default}: '
+                f'{self.url_dict[self.cam_loc_default]}}}'
+            )
+        elif cam_loc_key not in self.url_dict:
+            if try_site(self.url_dict[self.cam_loc]):
+                self.url_dict.update({cam_loc_key: cam_loc_val})
+                self.cam_loc = cam_loc_key
+                logging.info(
+                    f'input cam_loc key:val pair is new and playable, add '
+                    f'{{{cam_loc_key}:{cam_loc_val}}} into url_dict'
+                )
+            else:
+                self.cam_loc = self.cam_loc_default
+                logging.warning(
+                    f'input cam_loc key:val pair is new but not playable, '
+                    f'roll back to default {{{self.cam_loc_default}: '
+                    f'{self.url_dict[self.cam_loc_default]}}}'
+                )
+                self.cam_loc = self.cam_loc_default
+        else:
+            self.cam_loc = cam_loc_key
+
+        logging.info(
+            f'use {{{self.cam_loc}: {self.url_dict[self.cam_loc]}}} as source'
+        )
+
+    def set_roi_height(self, roi_height: int = 360):
+        if (roi_height < 0 or roi_height > self.FRAME_HEIGHT):
+            self.roi_height = int(self.FRAME_HEIGHT / 2)
+            logging.warning(
+                f'roi_height invalid, use default {int(self.FRAME_HEIGHT / 2)}'
+            )
+        else:
+            self.roi_height = roi_height
+            logging.info(f'roi_height is set at {self.roi_height}')
+
+    def set_frame_reduction(self, frame_reduction: int = 50):
+        if (frame_reduction < 0 or frame_reduction > 100):
+            self.frame_reduction = 50
+            logging.warning(
+                f'frame_reduction:{frame_reduction} invalid, '
+                f'use default value 50'
+            )
+        else:
+            self.frame_reduction = frame_reduction
+            logging.info(f'frame_reduction is set at {self.frame_reduction}')
+
+    async def frame0_producer(self):
+        """
+            !!! define your original video source here !!!
+
+        Yields:
+            _type_: an image frame as a bytestring output from the producer
+        """
+        while True:
+            if self._is_running:
+                if self.stream0 is None:
+                    # Start the stream
+                    self.stream0 = CamGear(
+                        source=self.url_dict[self.cam_loc],
+                        colorspace=None,
+                        stream_mode=True,
+                        logging=True
+                    ).start()
+
+                try:
+                    # loop over frames
+                    while (self.stream0 is not None and self._is_running):
+                        frame = self.stream0.read()
+                        if frame is None:
+                            frame = (np.random.standard_normal([
+                                self.FRAME_HEIGHT, self.FRAME_WIDTH, 3
+                            ]) * 255).astype(np.uint8)
+
+                        # do something with your OpenCV frame here
+                        draw_text(
+                            img=frame,
+                            text=datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+                            pos=(int(self.FRAME_WIDTH - 400), 50),
+                            font=cv2.FONT_HERSHEY_SIMPLEX,
+                            font_scale=1,
+                            font_thickness=2,
+                            line_type=cv2.LINE_AA,
+                            text_color=(0, 255, 255),
+                            text_color_bg=(0, 0, 0),
+                        )
+                        # reducer frame size for more performance, percentage int
+                        frame = await reducer(
+                            frame, percentage=self.frame_reduction
+                        )
+                        # handle JPEG encoding & yield frame in byte format
+                        img_encoded = cv2.imencode(".jpg", frame)[1].tobytes()
+                        yield (
+                            b"--frame\r\nContent-Type:video/jpeg2000\r\n\r\n" +
+                            img_encoded + b"\r\n"
+                        )
+                        await asyncio.sleep(0.00001)
+
+                    if self.stream0 is not None:
+                        self.stream0.stop()
+                        self.stream0 = None
+                    self._is_running = False
+                except asyncio.CancelledError:
+                    if self.stream0 is not None:
+                        self.stream0.stop()
+                        self.stream0 = None
+                    self._is_running = False
+                    logging.warning(
+                        "client disconneted in frame0_producer"
+                    )
+                    frame = (np.random.standard_normal([
+                        self.FRAME_HEIGHT, self.FRAME_WIDTH, 3
+                    ]) * 255).astype(np.uint8)
+                    frame = await reducer(
+                        frame, percentage=self.frame_reduction
+                    )
+                    img_encoded = cv2.imencode(".jpg", frame)[1].tobytes()
+                    logging.info(
+                        f"_is_running is {self._is_running} in frame0_producer"
+                    )
+                    yield (
+                        b"--frame\r\nContent-Type:video/jpeg2000\r\n\r\n" +
+                        img_encoded + b"\r\n"
+                    )
+                    await asyncio.sleep(0.00001)
+
+            else:
+                if self._is_running is True:
+                    pass
+                frame = (np.random.standard_normal([
+                    self.FRAME_HEIGHT, self.FRAME_WIDTH, 3
+                ]) * 255).astype(np.uint8)
+                frame = await reducer(
+                    frame, percentage=self.frame_reduction
+                )
+                img_encoded = cv2.imencode(".jpg", frame)[1].tobytes()
+                logging.info(
+                    f"_is_running is {self._is_running} in frame0_producer"
+                )
+                yield (
+                    b"--frame\r\nContent-Type:video/jpeg2000\r\n\r\n" +
+                    img_encoded + b"\r\n"
+                )
+                await asyncio.sleep(0.00001)
+
+    async def frame1_producer(self):
+        """
+            !!! define your processed video producer here !!!
+
+        Yields:
+            _type_: an image frame as a bytestring output from the producer
+        """
+        while True:
+            if self._is_running:
+                if self.stream1 is None:
+                    # Start the stream
+                    self.stream1 = CamGear(
+                        source=self.url_dict[self.cam_loc],
+                        colorspace=None,
+                        stream_mode=True,
+                        logging=True
+                    ).start()
+
+                if self._is_tracking:
+                    if self.counter is None:
+                        # setup object counter & speed estimator
+                        region_points = [
+                            (5, -self.roi_thickness_half + self.roi_height),
+                            (5,  self.roi_thickness_half + self.roi_height),
+                            (
+                                self.FRAME_WIDTH - 5,
+                                self.roi_thickness_half + self.roi_height
+                            ),
+                            (  
+                                self.FRAME_WIDTH - 5,
+                                -self.roi_thickness_half + self.roi_height
+                            ),
+                        ]
+                        # region_points = [
+                        #     (5, -20 + self.roi_height),
+                        #     (self.FRAME_WIDTH - 5, -20 + self.roi_height),
+                        # ]
+                        self.counter = object_counter.ObjectCounter()
+                        self.counter.set_args(
+                            view_img=False,
+                            reg_pts=region_points,
+                            classes_names=self.model.names,
+                            draw_tracks=False,
+                            draw_boxes=False,
+                            draw_reg_pts=True,
+                        )
+
+                    if self.speed_obj is None:
+                        # Init speed estimator
+                        line_points = [
+                            (5, self.roi_height),
+                            (self.FRAME_WIDTH - 5, self.roi_height)
+                        ]
+                        self.speed_obj = speed_estimation.SpeedEstimator()
+                        self.speed_obj.set_args(
+                            reg_pts=line_points,
+                            names=self.model.names,
+                            view_img=False
+                        )
+
+                try:
+                    while (self.stream1 is not None and self._is_running):
+                        # read frame from provided source
+                        frame = self.stream1.read()
+                        if frame is None:
+                            frame = (np.random.standard_normal([
+                                self.FRAME_HEIGHT, self.FRAME_WIDTH, 3
+                            ]) * 255).astype(np.uint8)
+                            # break
+
+                        # do something with your OpenCV frame here
+                        draw_text(
+                            img=frame,
+                            text=datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+                            pos=(self.FRAME_WIDTH - 400, 50),
+                            font=cv2.FONT_HERSHEY_SIMPLEX,
+                            font_scale=1,
+                            font_thickness=2,
+                            line_type=cv2.LINE_AA,
+                            text_color=(0, 255, 255),
+                            text_color_bg=(0, 0, 0),
+                        )
+
+                        frame_tagged = frame
+                        if self._is_tracking:
+                            # YOLOv8 tracking, persisting tracks between frames
+                            results = self.model.track(
+                                source=frame,
+                                classes=self.obj_class_id,
+                                conf=self.conf_threshold,
+                                iou=self.iou_threshold,
+                                half=self.use_FP16,
+                                stream_buffer=self.use_stream_buffer,
+                                persist=True,
+                                show=False,
+                                verbose=self.YOLO_VERBOSE
+                            )
+                            if results[0].boxes.id is None:
+                                pass
+                            else:
+                                self.speed_obj.estimate_speed(
+                                    frame_tagged, results
+                                )
+                                self.counter.start_counting(
+                                    frame_tagged, results
+                                )
+
+                        # reducer frames size for performance, int percentage
+                        frame_tagged = await reducer(
+                            frame_tagged, percentage=self.frame_reduction
+                        )
+                        # handle JPEG encoding & yield frame in byte format
+                        img_encoded = \
+                            cv2.imencode(".jpg", frame_tagged)[1].tobytes()
+                        yield (
+                            b"--frame\r\nContent-Type:video/jpeg2000\r\n\r\n" +
+                            img_encoded + b"\r\n"
+                        )
+                        await asyncio.sleep(0.00001)
+
+                    if self.stream1 is not None:
+                        self.stream1.stop()
+                        self.stream1 = None
+                    self._is_tracking = False
+                    self._is_running = False
+
+                except asyncio.CancelledError:
+                    if self.stream1 is not None:
+                        self.stream1.stop()
+                        self.stream1 = None
+                    self._is_tracking = False
+                    self._is_running = False
+                    logging.warning(
+                        "client disconnected in frame1_producer"
+                    )
+                    frame = (np.random.standard_normal([
+                        self.FRAME_HEIGHT, self.FRAME_WIDTH, 3
+                    ]) * 255).astype(np.uint8)
+                    frame = await reducer(
+                        frame, percentage=self.frame_reduction
+                    )
+                    img_encoded = cv2.imencode(".jpg", frame)[1].tobytes()
+                    logging.info(
+                        f"_is_running is {self._is_running} in frame0_producer"
+                    )
+                    yield (
+                        b"--frame\r\nContent-Type:video/jpeg2000\r\n\r\n" +
+                        img_encoded + b"\r\n"
+                    )
+                    await asyncio.sleep(0.00001)
+
+            else:
+                if self._is_running is True:
+                    pass
+                frame = (np.random.standard_normal([
+                    self.FRAME_HEIGHT, self.FRAME_WIDTH, 3
+                ]) * 255).astype(np.uint8)
+                # reducer frame size for more performance, percentage int
+                frame = await reducer(frame, percentage=self.frame_reduction)
+                # handle JPEG encoding & yield frame in byte format
+                img_encoded = cv2.imencode(".jpg", frame)[1].tobytes()
+                yield (
+                    b"--frame\r\nContent-Type:video/jpeg2000\r\n\r\n" +
+                    img_encoded + b"\r\n"
+                )
+                await asyncio.sleep(0.00001)
+
+    async def custom_video_response(self, scope):
+        """
+        Return a async video streaming response for `frame1_producer` generator
+        Tip1: use BackgroundTask to handle the async cleanup
+        https://github.com/tiangolo/fastapi/discussions/11022
+        Tip2: use is_disconnected to check client disconnection
+        https://www.starlette.io/requests/#body
+        https://github.com/encode/starlette/pull/320/files/d56c917460a1e6488e1206c428445c39854859c1
+        """
+        assert scope["type"] in ["http", "https"]
+        await asyncio.sleep(0.00001)
+        return StreamingResponse(
+            content=self.frame1_producer(),
+            media_type="multipart/x-mixed-replace; boundary=frame"
+        )
+
+    async def models(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        if len(self.model_dict) == 0:
+            template = "partials/ack.html"
+            table_contents = ["model list unavailable!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            # response.headers['Hx-Retarget'] = '#set-model-ack'
+        else:
+            template = "partials/yolo_models.html"
+            table_contents = make_table_from_dict(
+                self.model_dict, self.model_choice
+            )
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+
+        await asyncio.sleep(0.001)
+        return response
+
+    async def urls(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        if len(self.url_dict) == 0:
+            template = "partials/ack.html"
+            table_contents = ["streaming url list unavailable!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            # response.headers['Hx-Retarget'] = '#set-model-ack'
+        else:
+            template = "partials/camera_streams.html"
+            table_contents = make_table_from_dict(self.url_dict, self.cam_loc)
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+        await asyncio.sleep(0.01)
+        return response
+
+    async def geturl(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        if len(self.url_dict) == 0:
+            template = "partials/ack.html"
+            table_contents = ["streaming url list unavailable!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            # response.headers['Hx-Retarget'] = '#set-model-ack'
+        else:
+            template = "partials/ack.html"
+            if self.cam_loc in self.url_dict.keys():
+                table_contents = [f"{self.cam_loc} selected"]
+                context = {"request": request, "table": table_contents}
+                response = templates.TemplateResponse(
+                    template, context, status_code=201
+                )
+            else:
+                table_contents = [
+                    f"{self.cam_loc} is not in the registered url_list"
+                ]
+                context = {"request": request, "table": table_contents}
+                response = templates.TemplateResponse(
+                    template, context, status_code=200
+                )
+                # response.headers['Hx-Retarget'] = '#set-url-ack'
+        await asyncio.sleep(0.01)
+        return response
+
+    async def addurl(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        try:
+            req_json = await request.json()
+        except RuntimeError:
+            template = "partials/ack.html"
+            table_contents = ["receive channel unavailable!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            response.headers['Hx-Retarget'] = '#add-url-ack'
+            await asyncio.sleep(0.01)
+            return response
+
+        if (
+            "payload" in req_json
+            and "CamLoc" in req_json["payload"] and "URL" in req_json["payload"]
+        ):
+            cam_loc = req_json["payload"]["CamLoc"]
+            cam_url = req_json["payload"]["URL"]
+            if cam_loc != "" and cam_url != "":
+                if try_site(cam_url) is False:
+                    template = "partials/ack.html"
+                    table_contents = ["invalid video URL!"]
+                    context = {"request": request, "table": table_contents}
+                    response = templates.TemplateResponse(
+                        template, context, status_code=200
+                    )
+                    response.headers['Hx-Retarget'] = '#add-url-ack'
+                else:
+                    self.select_cam_loc(
+                        cam_loc_key=cam_loc, cam_loc_val=cam_url
+                    )
+                    template = "partials/camera_streams.html"
+                    table_contents = make_table_from_dict(
+                        self.url_dict, self.cam_loc
+                    )
+                    context = {"request": request, "table": table_contents}
+                    response = templates.TemplateResponse(
+                        template, context, status_code=201
+                    )
+            else:
+                template = "partials/ack.html"
+                table_contents = ["empty or invalid inputs!"]
+                context = {"request": request, "table": table_contents}
+                response = templates.TemplateResponse(
+                    template, context, status_code=200
+                )
+                response.headers['Hx-Retarget'] = '#add-url-ack'
+        else:
+            template = "partials/ack.html"
+            table_contents = ["invalid POST request!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            response.headers['Hx-Retarget'] = '#add-url-ack'
+
+        await asyncio.sleep(0.01)
+        return response
+
+    async def seturl(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        template = "partials/ack.html"
+        try:
+            req_json = await request.json()
+        except RuntimeError:
+            table_contents = ["receive channel unavailable!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            # response.headers['Hx-Retarget'] = '#set-url-ack'
+            await asyncio.sleep(0.01)
+            return response
+
+        if ("payload" in req_json and "cam_url" in req_json["payload"]):
+            logging.info(
+                f"seturl: _is_running = {self._is_running}, "
+                f"_is_tracking = {self._is_tracking}"
+            )
+            if (self._is_running is True or self._is_tracking is True):
+                table_contents = ["turn off streaming and tracking before \
+                    setting a new camera stream!"]
+                context = {"request": request, "table": table_contents}
+                response = templates.TemplateResponse(
+                    template, context, status_code=200
+                )
+                # response.headers['Hx-Retarget'] = '#set-url-ack'
+            else:
+                cam_url = req_json["payload"]["cam_url"]
+                url_list = list(filter(
+                    lambda x: self.url_dict[x] == cam_url, self.url_dict
+                ))
+                if len(url_list) > 0:
+                    self.cam_loc = url_list[0]
+                    table_contents = [f"{self.cam_loc} selected"]
+                    context = {"request": request, "table": table_contents}
+                    response = templates.TemplateResponse(
+                        template, context, status_code=201
+                    )
+                else:
+                    table_contents = [
+                        f"{cam_url} is not in the registered url_list"
+                    ]
+                    context = {"request": request, "table": table_contents}
+                    response = templates.TemplateResponse(
+                        template, context, status_code=200
+                    )
+                    # response.headers['Hx-Retarget'] = '#set-url-ack'
+        else:
+            table_contents = ["invalid POST request!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            # response.headers['Hx-Retarget'] = '#set-url-ack'
+
+        await asyncio.sleep(0.01)
+        return response
+
+    async def getmodel(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        if len(self.model_dict) == 0:
+            template = "partials/ack.html"
+            table_contents = ["model list unavailable!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            # response.headers['Hx-Retarget'] = '#set-model-ack'
+        else:
+            template = "partials/ack.html"
+            if self.model_choice in self.model_dict.keys():
+                table_contents = [f"{self.model_choice} selected"]
+                context = {"request": request, "table": table_contents}
+                response = templates.TemplateResponse(
+                    template, context, status_code=201
+                )
+            else:
+                table_contents = [
+                    f"{self.model_choice} is not in the registered model_list"
+                ]
+                context = {"request": request, "table": table_contents}
+                response = templates.TemplateResponse(
+                    template, context, status_code=200
+                )
+                # response.headers['Hx-Retarget'] = '#set-url-ack'
+        await asyncio.sleep(0.01)
+        return response
+
+    async def setmodel(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        template = "partials/ack.html"
+        try:
+            req_json = await request.json()
+        except RuntimeError:
+            table_contents = ["receive channel unavailable!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            # response.headers['Hx-Retarget'] = '#set-model-ack'
+            await asyncio.sleep(0.01)
+            return response
+
+        if ("payload" in req_json and "model_path" in req_json["payload"]):
+            logging.info(
+                f"setmodel: _is_running = {self._is_running}, "
+                f"_is_tracking = {self._is_tracking}"
+            )
+            if (self._is_tracking is True):
+                table_contents = ["turn off tracking before setting a new \
+                    YOLO model!"]
+                context = {"request": request, "table": table_contents}
+                response = templates.TemplateResponse(
+                    template, context, status_code=200
+                )
+                # response.headers['Hx-Retarget'] = '#set-model-ack'
+            else:
+                model_path = req_json["payload"]["model_path"]
+                model_list = list(filter(
+                    lambda x: self.model_dict[x] == model_path, self.model_dict
+                ))
+                if len(model_list) > 0:
+                    self.model_choice = model_list[0]
+                    self.load_model(
+                        model_choice=self.model_choice,
+                        conf_threshold=self.conf_threshold,
+                        iou_threshold=self.iou_threshold,
+                        use_FP16=self.use_FP16,
+                        use_stream_buffer=self.use_stream_buffer
+                    )
+                    table_contents = [f"{self.model_choice} selected"]
+                    context = {"request": request, "table": table_contents}
+                    response = templates.TemplateResponse(
+                        template, context, status_code=201
+                    )
+                else:
+                    table_contents = [
+                        f"{model_path} is not in the registered model_list"
+                    ]
+                    context = {"request": request, "table": table_contents}
+                    response = templates.TemplateResponse(
+                        template, context, status_code=200
+                    )
+                    # response.headers['Hx-Retarget'] = '#set-model-ack'
+        else:
+            table_contents = ["invalid POST request!"]
+            context = {"request": request, "table": table_contents}
+            response = templates.TemplateResponse(
+                template, context, status_code=200
+            )
+            # response.headers['Hx-Retarget'] = '#set-model-ack'
+
+        await asyncio.sleep(0.01)
+        return response
+
+    async def streamswitch(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        template = "partials/ack.html"
+        try:
+            req_json = await request.json()
+        except RuntimeError:
+            context = {
+                "request": request, "table": ["receive channel unavailable!"]
+            }
+            status_code = 200
+            await asyncio.sleep(0.01)
+            return templates.TemplateResponse(
+                template, context, status_code=status_code
+            )
+
+        if "payload" in req_json:
+            logging.info(f"payload = {req_json['payload']}")
+            if (
+                "stream_switch" in req_json["payload"]
+                and req_json["payload"]["stream_switch"] == "on"
+            ):
+                self._is_running = True
+                self._is_tracking = False
+                table_contents = ["on"]
+                status_code = 201
+            else:
+                self._is_running = False
+                self._is_tracking = False
+                table_contents = ["off"]
+                status_code = 201
+        else:
+            table_contents = ["invalid POST request!"]
+            status_code = 200
+
+        context = {"request": request, "table": table_contents}
+        await asyncio.sleep(0.1)
+        return templates.TemplateResponse(
+            template, context, status_code=status_code
+        )
+
+    async def trackingswitch(self, request: HtmxRequest) -> Response:
+        # assert (htmx := request.scope["htmx"])
+        template = "partials/ack.html"
+        try:
+            req_json = await request.json()
+        except RuntimeError:
+            context = {
+                "request": request, "table": ["receive channel unavailable!"]
+            }
+            status_code = 200
+            await asyncio.sleep(0.01)
+            return templates.TemplateResponse(
+                template, context, status_code=status_code
+            )
+
+        if "payload" in req_json:
+            logging.info(f"payload = {req_json['payload']}")
+            if (
+                "tracking_switch" in req_json["payload"]
+                and req_json["payload"]["tracking_switch"] == "on"
+            ):
+                self._is_tracking = True and self._is_running
+            else:
+                self._is_tracking = False
+
+            if self._is_tracking:
+                table_contents = ["on"]
+                status_code = 201
+                # setup object counter & speed estimator
+                region_points = [
+                    (5, -20 + self.roi_height),
+                    (5,  20 + self.roi_height),
+                    (self.FRAME_WIDTH - 5, 20 + self.roi_height),
+                    (self.FRAME_WIDTH - 5, -20 + self.roi_height),
+                ]
+                self.counter = object_counter.ObjectCounter()
+                self.counter.set_args(
+                    view_img=False,
+                    reg_pts=region_points,
+                    classes_names=self.model.names,
+                    draw_tracks=False,
+                    draw_boxes=False,
+                    draw_reg_pts=True,
+                )
+                # Init speed estimator
+                line_points = [
+                    (5, self.roi_height),
+                    (self.FRAME_WIDTH - 5, self.roi_height)
+                ]
+                self.speed_obj = speed_estimation.SpeedEstimator()
+                self.speed_obj.set_args(
+                    reg_pts=line_points,
+                    names=self.model.names,
+                    view_img=False
+                )
+            else:
+                table_contents = ["off"]
+                status_code = 201
+        else:
+            table_contents = ["invalid POST request!"]
+            status_code = 200
+
+        context = {"request": request, "table": table_contents}
+        await asyncio.sleep(0.1)
+        return templates.TemplateResponse(
+            template, context, status_code=status_code
+        )
+
+    async def sse_incounts(self, request: Request):
+        async def event_generator():
+            _stop_sse = False
+            while True:
+                # If client closes connection, stop sending events
+                if await request.is_disconnected():
+                    yield {
+                            "event": "evt_in_counts",
+                            "id": datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+                            "retry": RETRY_TIMEOUT_MILSEC,
+                            "data": "..."
+                    }
+                    break
+                if self._is_running:
+                    if self._is_tracking:
+                        if _stop_sse is True:
+                            _stop_sse = False
+                        incounts_msg = self.counter.incounts_updated()                            
+                        if (self.counter is not None and incounts_msg):
+                            yield {
+                                    "event": "evt_in_counts",
+                                    "id": datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+                                    "retry": RETRY_TIMEOUT_MILSEC,
+                                    "data": f"{self.counter.in_counts}"
+                            }
+                    else:
+                        if _stop_sse is False:
+                            yield {
+                                    "event": "evt_in_counts",
+                                    "id": datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+                                    "retry": RETRY_TIMEOUT_MILSEC,
+                                    "data": "---"
+                            }
+                            _stop_sse = True
+                await asyncio.sleep(EVT_STREAM_DELAY_SEC)
+        return EventSourceResponse(event_generator())
+
+    async def sse_outcounts(self, request: Request):
+        async def event_generator():
+            _stop_sse = False
+            while True:
+                # If client closes connection, stop sending events
+                if await request.is_disconnected():
+                    yield {
+                            "event": "evt_out_counts",
+                            "id": datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+                            "retry": RETRY_TIMEOUT_MILSEC,
+                            "data": "..."
+                    }
+                    break
+                if self._is_running:
+                    if self._is_tracking:
+                        if _stop_sse is True:
+                            _stop_sse = False
+                        outcounts_msg = self.counter.outcounts_updated()
+                        if (self.counter is not None and outcounts_msg):
+                            yield {
+                                    "event": "evt_out_counts",
+                                    "id": datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+                                    "retry": RETRY_TIMEOUT_MILSEC,
+                                    "data": f"{self.counter.out_counts}"
+                            }
+                    else:
+                        if _stop_sse is False:
+                            yield {
+                                    "event": "evt_out_counts",
+                                    "id": datetime.now().strftime("%m/%d/%Y %H:%M:%S"),
+                                    "retry": RETRY_TIMEOUT_MILSEC,
+                                    "data": "---"
+                            }
+                            _stop_sse = True
+                await asyncio.sleep(EVT_STREAM_DELAY_SEC)
+        return EventSourceResponse(event_generator())
+
+
+is_huggingface = False
+# define the host url and port for webgear server
+HOST_WEBGEAR, PORT_WEBGEAR = "localhost", 8080
+
+# instantiate a demo case
+demo_case = DemoCase(YOLO_VERBOSE=False)
+demo_case.set_frame_reduction(frame_reduction=10)
+demo_case.load_model()
+# setup object counter & speed estimator
+region_points = [
+    (5, -demo_case.roi_thickness_half + demo_case.roi_height),
+    (5,  demo_case.roi_thickness_half + demo_case.roi_height),
+    (
+        demo_case.FRAME_WIDTH - 5,
+        demo_case.roi_thickness_half + demo_case.roi_height
+    ),
+    (
+        demo_case.FRAME_WIDTH - 5,
+        -demo_case.roi_thickness_half + demo_case.roi_height
+    ),
+]
+demo_case.counter = object_counter.ObjectCounter()
+demo_case.counter.set_args(
+    view_img=False,
+    reg_pts=region_points,
+    classes_names=demo_case.model.names,
+    draw_tracks=False,
+    draw_boxes=False,
+    draw_reg_pts=True,
+)
+# Init speed estimator
+line_points = [
+    (5, demo_case.roi_height),
+    (demo_case.FRAME_WIDTH - 5, demo_case.roi_height)
+]
+demo_case.speed_obj = speed_estimation.SpeedEstimator()
+demo_case.speed_obj.set_args(
+    reg_pts=line_points,
+    names=demo_case.model.names,
+    view_img=False
+)
+logging.info([f"{x}" for x in list(demo_case.url_dict.keys())])
+logging.info([f"{x}" for x in list(demo_case.model_dict.keys())])
+
+# setup webgear server
+options = {
+    "custom_data_location": "./",
+    "enable_infinite_frames": True,
+    # "jpeg_compression_quality": 90,
+    "jpeg_compression_fastdct": True,
+    "jpeg_compression_fastupsample": True,
+}
+# demo_case.stream0 = CamGear(
+#     source=demo_case.url_dict[demo_case.cam_loc],
+#     colorspace=None,
+#     stream_mode=True,
+#     logging=True
+# ).start()
+# if demo_case.stream0 is None:
+#     sys.exit("stream unaviable")
+
+web = WebGear(
+    logging=True, **options
+)
+# config webgear server
+web.config["generator"] = demo_case.frame0_producer
+web.config["middleware"] = [Middleware(HtmxMiddleware)]
+web.routes.append(Mount("/static", static, name="static"))
+web.routes.append(
+    Route("/video1", endpoint=demo_case.custom_video_response)
+)
+routes_dict = {
+    "models": (demo_case.models, ["GET"]),
+    "getmodel": (demo_case.getmodel, ["GET"]),
+    "setmodel": (demo_case.setmodel, ["POST"]),
+    "urls": (demo_case.urls, ["GET"]),
+    "addurl": (demo_case.addurl, ["POST"]),
+    "geturl": (demo_case.geturl, ["GET"]),
+    "seturl": (demo_case.seturl, ["POST"]),
+    "streamswitch": (demo_case.streamswitch, ["POST"]),
+    "trackingswitch": (demo_case.trackingswitch, ["POST"]),
+}
+for k, v in routes_dict.items():
+    web.routes.append(
+        Route(path=f"/{k}", endpoint=v[0], name=k, methods=v[1])
+    )
+web.routes.append(Route(
+    path="/sseincounts",
+    endpoint=demo_case.sse_incounts,
+    name="sseincounts"
+))
+web.routes.append(Route(
+    path="/sseoutcounts",
+    endpoint=demo_case.sse_outcounts,
+    name="sseoutcounts"
+))
+
+# if is_huggingface is False:
+#     # run this app on Uvicorn server at address http://localhost:8080/
+#     uvicorn.run(
+#         web(), host=HOST_WEBGEAR, port=PORT_WEBGEAR, log_level="info"
+#     )
+#     # close app safely
+#     web.shutdown()