feat(ui): upload page — drag-drop, video preview, model cards
This commit is contained in:
jetson committed
1 parent
c17d48041d
commit
f245e9427e
3 files changed
+469
-39
No files matched your search
@@ -34,5 +34,6 @@
|
||||
<p>Feedmill Recounter — Feedmill video analysis tool</p>
|
||||
</div>
|
||||
</footer>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
+270
-39
@@ -1,48 +1,279 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Upload - Feedmill Recounter{% endblock %}
|
||||
{% 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: #fff;
|
||||
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: #fff;
|
||||
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 rgba(13, 148, 136, 0.12);
|
||||
}
|
||||
.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: #fff;
|
||||
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 %}
|
||||
<h2>Upload Video & Select Models</h2>
|
||||
<form action="/upload" method="post" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="video">Video File:</label>
|
||||
<input type="file" name="video" id="video" accept="video/*" required>
|
||||
<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></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>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Models to Run:</label>
|
||||
{% if models %}
|
||||
<div class="model-list">
|
||||
{% for model in models %}
|
||||
<div class="model-item">
|
||||
<input type="checkbox" name="models" value="{{ model.filename }}" id="m-{{ loop.index }}">
|
||||
<label for="m-{{ loop.index }}">
|
||||
<strong>{{ model.filename }}</strong>
|
||||
{% if model.known_classes %}
|
||||
<span class="classes">[{{ model.known_classes | join(', ') }}]</span>
|
||||
{% else %}
|
||||
<span class="classes unknown">[no class info]</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
<div class="filter-group">
|
||||
<label>Class filter:</label>
|
||||
<select name="filter_{{ model.filename }}">
|
||||
<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="all">all classes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if models %}
|
||||
<div class="model-grid" id="model-grid">
|
||||
{% 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>
|
||||
{% else %}
|
||||
<p class="warning">No models found in {{ models_dir }}. Place model files in the models/ directory.</p>
|
||||
{% endif %}
|
||||
<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="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>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" {% if not models %}disabled{% endif %}>Start Processing</button>
|
||||
</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 %}
|
||||
Reference in new issue
Block a user