webml-community/RF-DETR-Nano-WebGPU

1body {2    font-family: system-ui, -apple-system, sans-serif;3    background: #111;4    color: #eee;5    margin: 0;6    display: flex;7    flex-direction: column;8    align-items: center;9    justify-content: center;10    min-height: 100vh;11    padding: 20px;12    box-sizing: border-box;13}14 15h1 {16    margin: 0 0 10px 0;17    font-size: 2.2rem;18    font-weight: 500;19    background: linear-gradient(45deg, #60a5fa, #a78bfa);20    -webkit-background-clip: text;21    -webkit-text-fill-color: transparent;22    text-align: center;23}24 25.subtitle {26    margin: 0 0 25px 0;27    font-size: 0.95rem;28    color: #9ca3af;29    text-align: center;30    line-height: 1.5;31}32 33.container {34    position: relative;35    border-radius: 12px;36    overflow: hidden;37    box-shadow: 0 4px 24px rgba(0,0,0,0.5);38    background: #000;39    line-height: 0;40    width: 100%;41    max-width: 640px;42    aspect-ratio: 4/3; 43}44 45video {46    display: block;47    width: 100%;48    height: 100%;49    object-fit: cover;50}51 52canvas {53    position: absolute;54    top: 0;55    left: 0;56    width: 100%;57    height: 100%;58    pointer-events: none;59}60 61#fps {62    position: absolute;63    top: 12px;64    left: 12px;65    background: rgba(0, 0, 0, 0.6);66    backdrop-filter: blur(4px);67    color: #4ade80;68    padding: 6px 10px;69    border-radius: 6px;70    font-family: monospace;71    font-size: 14px;72    line-height: 1;73    z-index: 10;74    pointer-events: none;75    min-width: 75px;76    text-align: center;77}78 79#status {80    position: absolute;81    inset: 0;82    display: flex;83    align-items: center;84    justify-content: center;85    background: rgba(0,0,0,0.85);86    z-index: 20;87    backdrop-filter: blur(8px);88    flex-direction: column;89    gap: 24px;90    transition: opacity 0.3s ease;91}92 93#status-content {94    text-align: center;95}96 97#status-text {98    font-size: 1.2em;99    font-weight: bold;100    margin-bottom: 24px;101}102 103#status-sub {104    font-size: 0.9em;105    color: #aaa;106}107 108.controls {109    display: flex;110    gap: 15px;111    margin-top: 20px;112    align-items: center;113    background: #222;114    padding: 12px 24px;115    border-radius: 50px;116    border: 1px solid #333;117}118 119.control-label {120    display: flex;121    align-items: center;122    gap: 10px;123    font-size: 0.9rem;124}125 126input[type=range] {127    accent-color: #3b82f6;128    cursor: pointer;129}130 131#thresh-val {132    font-family: monospace;133    width: 3ch;134}135 136footer {137    margin-top: 30px;138    font-size: 0.8rem;139    color: #666;140}141 142footer a {143    color: #888;144    text-decoration: none;145    border-bottom: 1px dotted #888;146    transition: color 0.2s;147}148 149footer a:hover {150    color: #eee;151}152 153.spinner {154    width: 32px;155    height: 32px;156    border: 3px solid rgba(255,255,255,0.3);157    border-radius: 50%;158    border-top-color: #3b82f6;159    animation: spin 1s ease-in-out infinite;160}161 162@keyframes spin {163    to { transform: rotate(360deg); }164}165