jetson
07289a419a
- detect_interval=2 on both pipelines; stabilizer 10-frame hold bridges skipped frames (GPU inference cut ~half during active batch) - sup_det_interval 5 -> 10 (still <= stabilizer hold / synthetic max_age) - preview_every_n default 2 -> 5 - AnnotatedVideoWriter: codec auto-chain gstreamer_nvenc -> avc1 -> mp4v, max_height downscale (even dims, INTER_AREA); backend logged - output_max_height plumbed Job -> web checkbox (720p) -> CLI --output-height - README: 720p option, CLI flag - 153 tests pass (+13)
511 lines
15 KiB
HTML
511 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Upload & Analyze - Feedmill Recounter{% endblock %}
|
|
{% block head %}
|
|
<style>
|
|
.page-heading { margin-bottom: var(--space-6); }
|
|
.page-heading h2 { font-size: var(--text-2xl); margin-bottom: var(--space-1); }
|
|
.page-heading p { color: var(--color-neutral-500); font-size: var(--text-sm); }
|
|
|
|
/* Upload zone */
|
|
.upload-zone {
|
|
border: 2px dashed var(--color-neutral-300);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-10) var(--space-6);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color var(--transition-fast), background var(--transition-fast);
|
|
background: var(--color-neutral-50);
|
|
position: relative;
|
|
}
|
|
.upload-zone:hover,
|
|
.upload-zone.dragover {
|
|
border-color: var(--color-primary);
|
|
background: var(--color-primary-50);
|
|
}
|
|
.upload-zone-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: var(--space-3);
|
|
display: block;
|
|
color: var(--color-neutral-400);
|
|
}
|
|
.upload-zone-text {
|
|
font-size: var(--text-base);
|
|
font-weight: var(--font-medium);
|
|
color: var(--color-neutral-600);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.upload-zone-hint {
|
|
font-size: var(--text-sm);
|
|
color: var(--color-neutral-400);
|
|
}
|
|
.upload-zone input[type="file"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Existing videos section */
|
|
.existing-videos-section { margin-top: var(--space-8); }
|
|
.section-title {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--font-semibold);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.video-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
.video-item {
|
|
background: var(--color-neutral-50);
|
|
border: 2px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4);
|
|
cursor: pointer;
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
.video-item:hover {
|
|
border-color: var(--color-neutral-300);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.video-item.selected {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
|
|
}
|
|
.video-item-radio {
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: var(--color-primary);
|
|
cursor: pointer;
|
|
}
|
|
.video-item-info { flex: 1; min-width: 0; }
|
|
.video-item-name {
|
|
font-weight: var(--font-medium);
|
|
color: var(--color-neutral-800);
|
|
font-size: var(--text-sm);
|
|
word-break: break-word;
|
|
}
|
|
.video-item-meta {
|
|
font-size: var(--text-xs);
|
|
color: var(--color-neutral-500);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
/* File info */
|
|
.file-info {
|
|
margin-top: var(--space-4);
|
|
padding: var(--space-4);
|
|
background: var(--color-neutral-50);
|
|
border: 1px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-md);
|
|
display: none;
|
|
}
|
|
.file-info.visible { display: block; }
|
|
.file-info-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.file-info-item { color: var(--color-neutral-600); }
|
|
.file-info-item strong { color: var(--color-neutral-800); }
|
|
|
|
/* Video preview */
|
|
.video-preview {
|
|
margin-top: var(--space-4);
|
|
display: none;
|
|
}
|
|
.video-preview.visible { display: block; }
|
|
.video-preview video {
|
|
width: 100%;
|
|
max-height: 400px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-neutral-900);
|
|
}
|
|
|
|
/* Model section */
|
|
.model-section { margin-top: var(--space-8); }
|
|
.model-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-4);
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
}
|
|
.model-section-header h3 {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
.model-toggle-btns {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* Model cards grid */
|
|
.model-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
.model-card {
|
|
background: var(--color-neutral-50);
|
|
border: 2px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5);
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
cursor: pointer;
|
|
}
|
|
.model-card:hover {
|
|
border-color: var(--color-neutral-300);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.model-card.selected {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
|
|
}
|
|
.model-card-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.model-card-check {
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: var(--color-primary);
|
|
cursor: pointer;
|
|
}
|
|
.model-card-name {
|
|
font-weight: var(--font-semibold);
|
|
color: var(--color-neutral-800);
|
|
font-size: var(--text-sm);
|
|
word-break: break-word;
|
|
}
|
|
.model-card-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-1);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.model-card-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.model-card-filter label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
color: var(--color-neutral-500);
|
|
white-space: nowrap;
|
|
}
|
|
.model-card-filter select {
|
|
flex: 1;
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--text-xs);
|
|
border: 1px solid var(--color-neutral-300);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-50);
|
|
color: var(--color-neutral-700);
|
|
}
|
|
.model-card-format {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.model-card-format label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
color: var(--color-neutral-500);
|
|
white-space: nowrap;
|
|
}
|
|
.model-card-format select {
|
|
flex: 1;
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--text-xs);
|
|
border: 1px solid var(--color-neutral-300);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-50);
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
/* Output options */
|
|
.output-height-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-4);
|
|
font-size: var(--text-sm);
|
|
color: var(--color-neutral-600);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Submit area */
|
|
.submit-area {
|
|
margin-top: var(--space-8);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
}
|
|
.submit-hint {
|
|
font-size: var(--text-sm);
|
|
color: var(--color-neutral-400);
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--space-8);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.empty-state p { margin-bottom: var(--space-2); }
|
|
|
|
/* Active jobs banner */
|
|
.active-jobs-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
background: #f0f9ff;
|
|
border: 1px solid #0EA5E9;
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--space-6);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* Zone mode section */
|
|
.zone-section { margin-top: var(--space-8); }
|
|
.zone-section h3 {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--font-semibold);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.zone-radio-group {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.zone-radio-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
color: var(--color-neutral-700);
|
|
cursor: pointer;
|
|
}
|
|
.zone-radio-group input[type="radio"] {
|
|
accent-color: var(--color-primary);
|
|
}
|
|
.zone-fixed-config {
|
|
display: none;
|
|
padding: var(--space-4);
|
|
background: var(--color-neutral-50);
|
|
border: 1px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.zone-fixed-config.visible { display: block; }
|
|
.zone-preset-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.zone-preset-row label {
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-medium);
|
|
color: var(--color-neutral-600);
|
|
white-space: nowrap;
|
|
}
|
|
.zone-preset-row select {
|
|
flex: 1;
|
|
max-width: 320px;
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
border: 1px solid var(--color-neutral-300);
|
|
border-radius: var(--radius-sm);
|
|
background: white;
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
/* Video delete button */
|
|
.video-delete-btn {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-50);
|
|
color: var(--color-neutral-400);
|
|
cursor: pointer;
|
|
font-size: var(--text-sm);
|
|
transition: all var(--transition-fast);
|
|
opacity: 0;
|
|
}
|
|
.video-item:hover .video-delete-btn {
|
|
opacity: 1;
|
|
}
|
|
.video-delete-btn:hover {
|
|
background: #FEE2E2;
|
|
color: #DC2626;
|
|
border-color: #FECACA;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-heading">
|
|
<h2>Upload & Analyze</h2>
|
|
<p>Upload a video and select detection models to run analysis.</p>
|
|
</div>
|
|
|
|
<div class="active-jobs-banner" id="active-jobs-banner" style="display:none">
|
|
<span class="badge badge-info">▶</span>
|
|
<span id="active-jobs-text"></span>
|
|
<a href="/jobs" class="btn btn-ghost btn-sm">View All</a>
|
|
</div>
|
|
|
|
<form action="/upload" method="post" enctype="multipart/form-data" id="upload-form">
|
|
<input type="hidden" name="video_path" id="video-path-input" value="">
|
|
|
|
{# --- Upload Zone --- #}
|
|
<div class="upload-zone" id="upload-zone" role="button" tabindex="0" aria-label="Upload video file">
|
|
<span class="upload-zone-icon" aria-hidden="true">💾</span>
|
|
<div class="upload-zone-text">Drag video here or click to browse</div>
|
|
<div class="upload-zone-hint">Supports MP4, AVI, MOV, MKV</div>
|
|
<input type="file" name="video" id="video-input" accept="video/*" required aria-label="Choose video file">
|
|
</div>
|
|
|
|
{# --- Video Preview --- #}
|
|
<div class="video-preview" id="video-preview">
|
|
<video id="preview-video" controls muted aria-label="Video preview"></video>
|
|
</div>
|
|
|
|
{# --- File Info --- #}
|
|
<div class="file-info" id="file-info">
|
|
<div class="file-info-row">
|
|
<span class="file-info-item"><strong>Name:</strong> <span id="file-name"></span></span>
|
|
<span class="file-info-item"><strong>Size:</strong> <span id="file-size"></span></span>
|
|
<span class="file-info-item"><strong>Duration:</strong> <span id="file-duration">probing...</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- Existing Videos --- #}
|
|
<div class="existing-videos-section" id="existing-videos-section" style="display:none">
|
|
<h3 class="section-title">Or use a previously uploaded video</h3>
|
|
<div class="video-list" id="video-list"></div>
|
|
</div>
|
|
|
|
{# --- Counting Zone --- #}
|
|
<div class="zone-section" id="zone-section" style="display:none">
|
|
<h3>Counting Zone</h3>
|
|
<div class="zone-radio-group">
|
|
<label>
|
|
<input type="radio" name="zone_mode" value="dynamic" checked>
|
|
Auto-detect Truck
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="zone_mode" value="fixed">
|
|
Fixed Zone
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="zone_mode" value="freeze">
|
|
Auto-detect + Freeze
|
|
</label>
|
|
</div>
|
|
<div class="zone-fixed-config" id="zone-fixed-config">
|
|
<div class="zone-preset-row">
|
|
<label for="zone-preset-select">Preset:</label>
|
|
<select name="zone_preset" id="zone-preset-select">
|
|
<option value="">Loading presets...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- Model Selection --- #}
|
|
<div class="model-section">
|
|
<div class="model-section-header">
|
|
<h3>Select Models</h3>
|
|
{% if model_groups %}
|
|
<div class="model-toggle-btns">
|
|
<button type="button" class="btn btn-ghost btn-sm" id="select-all-btn">Select All</button>
|
|
<button type="button" class="btn btn-ghost btn-sm" id="deselect-all-btn">Deselect All</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if model_groups %}
|
|
<div class="model-grid" id="model-grid" role="group" aria-label="Available detection models">
|
|
{% for group in model_groups %}
|
|
<label class="model-card" id="card-{{ loop.index }}">
|
|
<div class="model-card-header">
|
|
<input type="checkbox" name="model_stems" value="{{ group.stem }}" class="model-card-check" id="m-{{ loop.index }}">
|
|
<span class="model-card-name">{{ group.stem }}</span>
|
|
</div>
|
|
<div class="model-card-badges">
|
|
{% if group.known_classes %}
|
|
{% for cls in group.known_classes %}
|
|
<span class="badge badge-info">{{ cls }}</span>
|
|
{% endfor %}
|
|
{% else %}
|
|
<span class="badge badge-neutral">no class info</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="model-card-format">
|
|
<label for="format-{{ loop.index }}">Format:</label>
|
|
<select name="format_{{ group.stem }}" id="format-{{ loop.index }}">
|
|
{% for fmt in group.formats %}
|
|
<option value="{{ fmt }}"{% if fmt == group.default_format %} selected{% endif %}>{{ fmt }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="model-card-filter">
|
|
<label for="filter-{{ loop.index }}">Filter:</label>
|
|
<select name="filter_{{ group.stem }}" id="filter-{{ loop.index }}">
|
|
<option value="default">Use model defaults</option>
|
|
<option value="sack">sack only</option>
|
|
<option value="box">box only</option>
|
|
<option value="sack,box">sack + box</option>
|
|
<option value="truck">truck only</option>
|
|
<option value="all">all classes</option>
|
|
</select>
|
|
</div>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<p>No models found.</p>
|
|
<p>Place model files in the <code>models/</code> directory.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# --- Output Options --- #}
|
|
<label class="output-height-label">
|
|
<input type="checkbox" name="output_height" value="720">
|
|
Downscale output to 720p
|
|
</label>
|
|
|
|
{# --- Submit --- #}
|
|
<div class="submit-area">
|
|
<button type="submit" class="btn btn-primary" id="submit-btn" disabled>Start Analysis</button>
|
|
<span class="submit-hint" id="submit-hint">Select a video and at least one model to begin.</span>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
|
{% endblock %}
|