wissotsky
2ab014c88c
- Horizontal scrolling timeline view of captured images - Gradient background loading for better UX performance - Metadata-driven image dimensions and styling - Static file serving from output directory - Responsive full-viewport height display
99 lines
3.0 KiB
Python
99 lines
3.0 KiB
Python
from flask import Flask, render_template_string
|
|
import os
|
|
import re
|
|
import json
|
|
|
|
app = Flask(__name__)
|
|
|
|
HTML_TEMPLATE = '''
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Live Linescan Images</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
img {
|
|
display: inline-block;
|
|
height: 100vh;
|
|
width: auto;
|
|
vertical-align: top;
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|
|
<link rel="preconnect" href="/output">
|
|
</head>
|
|
<body>
|
|
{% for image_info in images %}<img src="/output/{{ image_info.name }}" width="{{ image_info.width }}" height="{{ image_info.height }}" loading="lazy" decoding="async" style="background: {{ image_info.gradient }}" alt="{{ image_info.name }}">{% endfor %}
|
|
</body>
|
|
</html>
|
|
'''
|
|
|
|
def extract_timestamp(filename):
|
|
"""Extract timestamp from filename like 'live-1763227690-...'"""
|
|
match = re.match(r'live-(\d+)-', filename)
|
|
if match:
|
|
return int(match.group(1))
|
|
return 0
|
|
|
|
def extract_length(filename):
|
|
"""Extract length from filename like 'live-timestamp-start-end-length.ext'"""
|
|
match = re.match(r'live-\d+-\d+-\d+-(\d+)\.', filename)
|
|
if match:
|
|
return int(match.group(1))
|
|
return None
|
|
|
|
@app.route('/')
|
|
def index():
|
|
output_dir = os.path.join(os.path.dirname(__file__), 'output')
|
|
|
|
# Load metadata from jsonl file
|
|
metadata_map = {}
|
|
metadata_path = os.path.join(output_dir, 'metadata.jsonl')
|
|
if os.path.exists(metadata_path):
|
|
with open(metadata_path, 'r') as f:
|
|
for line in f:
|
|
if line.strip():
|
|
data = json.loads(line)
|
|
metadata_map[data['filename']] = data
|
|
|
|
# Get all image files
|
|
image_files = []
|
|
if os.path.exists(output_dir):
|
|
image_files = [f for f in os.listdir(output_dir)
|
|
if f.lower().endswith(('.png', '.jpg', '.jpeg', '.webp', '.gif','.avif'))]
|
|
|
|
# Sort by timestamp in filename, reverse for latest first
|
|
image_files.sort(key=extract_timestamp, reverse=True)
|
|
|
|
# Create list with name, width, and gradient info
|
|
images = []
|
|
for img in image_files:
|
|
metadata = metadata_map.get(img, {})
|
|
width = metadata.get('length') or extract_length(img) or 1
|
|
gradient = metadata.get('gradient', 'none')
|
|
|
|
images.append({
|
|
'name': img,
|
|
'width': width,
|
|
'height': 2456, # Fixed height for aspect ratio hint
|
|
'gradient': gradient
|
|
})
|
|
|
|
return render_template_string(HTML_TEMPLATE, images=images)
|
|
|
|
@app.route('/output/<path:filename>')
|
|
def serve_image(filename):
|
|
"""Serve images from the output folder"""
|
|
from flask import send_from_directory
|
|
output_dir = os.path.join(os.path.dirname(__file__), 'output')
|
|
return send_from_directory(output_dir, filename)
|
|
|
|
if __name__ == '__main__':
|
|
app.run(debug=True, host='0.0.0.0', port=10104)
|