281 lines
8.4 KiB
HTML
281 lines
8.4 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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* 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); }
|
|
</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>
|
|
|
|
<form action="/upload" method="post" enctype="multipart/form-data" id="upload-form">
|
|
{# --- 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>
|
|
|
|
{# --- Model Selection --- #}
|
|
<div class="model-section">
|
|
<div class="model-section-header">
|
|
<h3>Select Models</h3>
|
|
{% if models %}
|
|
<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 models %}
|
|
<div class="model-grid" id="model-grid" role="group" aria-label="Available detection models">
|
|
{% for model in models %}
|
|
<label class="model-card" id="card-{{ loop.index }}">
|
|
<div class="model-card-header">
|
|
<input type="checkbox" name="models" value="{{ model.filename }}" class="model-card-check" id="m-{{ loop.index }}">
|
|
<span class="model-card-name">{{ model.filename }}</span>
|
|
</div>
|
|
<div class="model-card-badges">
|
|
{% if model.known_classes %}
|
|
{% for cls in model.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-filter">
|
|
<label for="filter-{{ loop.index }}">Filter:</label>
|
|
<select name="filter_{{ model.filename }}" 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>
|
|
|
|
{# --- 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 %}
|