HTML_UI_REDESIGN

from flask import Flask, Response, request, send_file, jsonify
import cv2
import json
import time
import os
import threading
import logging
import subprocess
import re
import lgpio
import sys

app = Flask(__name__)

# 配置日志
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
logger = logging.getLogger(__name__)

# 全局摄像头对象
camera = None
camera_lock = threading.Lock()

# 全局GPIO对象
GPIO_PIN = 18  # GPIO18/Pin12
h = None
gpio_lock = threading.Lock()
motor_state = {'running': False, 'pulse_width': 1500}  # 默认中性脉宽1500µs

# PWM设置
PWM_FREQUENCY = 50  # 50Hz for ESC
PWM_NEUTRAL = 1500  # 中性脉宽（停止）
PWM_FULL_FORWARD = 2000  # 最大正向脉宽
PWM_FULL_REVERSE = 1000  # 最大反向脉宽

# 当前摄像头设置
current_settings = {
    'resolution': '1280x480',
    'fps': 30,
    'brightness': 50,
    'contrast': 50,
    'saturation': 50,
    'flip_h': True,
    'flip_v': True,
    'recording': False,
    'format': 'mp4'
}

# 录像变量
recording = False
output_file = None
frame_count = 0
recording_start_time = 0
recordings_folder = os.path.abspath('recordings')

# 创建录像文件夹
if not os.path.exists(recordings_folder):
    try:
        os.makedirs(recordings_folder)
        logger.info("录像文件夹创建成功")
    except PermissionError as e:
        logger.error(f"无法创建录像文件夹：权限不足 - {e}")
        sys.exit(1)

# 初始化GPIO
def initialize_gpio():
    global h
    try:
        h = lgpio.gpiochip_open(0)
        lgpio.gpio_claim_output(h, GPIO_PIN)
        lgpio.tx_pwm(h, GPIO_PIN, PWM_FREQUENCY, 0)  # 初始化PWM，占空比0
        logger.info("GPIO初始化成功")
    except Exception as e:
        logger.error(f"GPIO初始化失败：{e}")
        sys.exit(1)

def set_motor_pwm(pulse_width):
    """设置电机PWM脉宽（单位：微秒）"""
    try:
        with gpio_lock:
            duty_cycle = (pulse_width / 20000.0) * 100  # 50Hz周期为20ms，转换为占空比
            lgpio.tx_pwm(h, GPIO_PIN, PWM_FREQUENCY, duty_cycle)
            motor_state['pulse_width'] = pulse_width
            motor_state['running'] = pulse_width != PWM_NEUTRAL
            logger.info(f"电机PWM设置：脉宽 {pulse_width}µs，运行状态：{motor_state['running']}")
    except Exception as e:
        logger.error(f"设置电机PWM失败：{e}")
        raise Exception(f"设置电机PWM失败：{e}")

def motor_ramp(start_pwm, target_pwm, step=10, delay=0.05):
    """逐步调整电机PWM脉宽，实现从慢到快或快到慢过渡"""
    global motor_state
    current_pwm = start_pwm
    
    while abs(current_pwm - target_pwm) > step:
        if target_pwm > current_pwm:
            current_pwm = min(current_pwm + step, target_pwm)
        else:
            current_pwm = max(current_pwm - step, target_pwm)
        
        try:
            with gpio_lock:
                duty_cycle = (current_pwm / 20000.0) * 100  # 50Hz周期为20ms
                lgpio.tx_pwm(h, GPIO_PIN, PWM_FREQUENCY, duty_cycle)
                motor_state['pulse_width'] = current_pwm
                motor_state['running'] = current_pwm != PWM_NEUTRAL
                logger.info(f"电机PWM调整：{current_pwm}µs，运行状态：{motor_state['running']}")
        except Exception as e:
            logger.error(f"电机PWM调整失败：{e}")
            break
        
        time.sleep(delay)
    
    # 确保最终达到目标值
    try:
        with gpio_lock:
            duty_cycle = (target_pwm / 20000.0) * 100
            lgpio.tx_pwm(h, GPIO_PIN, PWM_FREQUENCY, duty_cycle)
            motor_state['pulse_width'] = target_pwm
            motor_state['running'] = target_pwm != PWM_NEUTRAL
            logger.info(f"电机PWM完成调整：{target_pwm}µs，运行状态：{motor_state['running']}")
    except Exception as e:
        logger.error(f"电机PWM最终调整失败：{e}")

def initialize_camera():
    """初始化或重新初始化摄像头"""
    global camera
    with camera_lock:
        if camera is not None:
            camera.release()
            time.sleep(0.1)
        camera = cv2.VideoCapture(0, cv2.CAP_V4L2)
        if not camera.isOpened():
            logger.error("无法打开摄像头")
            raise Exception("无法打开摄像头")
        
        width, height = parse_resolution(current_settings['resolution'])
        camera.set(cv2.CAP_PROP_FRAME_WIDTH, width)
        camera.set(cv2.CAP_PROP_FRAME_HEIGHT, height)
        camera.set(cv2.CAP_PROP_FPS, current_settings['fps'])
        camera.set(cv2.CAP_PROP_BRIGHTNESS, current_settings['brightness'] / 100)
        camera.set(cv2.CAP_PROP_CONTRAST, current_settings['contrast'] / 100)
        camera.set(cv2.CAP_PROP_SATURATION, current_settings['saturation'] / 100)
        
        actual_width = int(camera.get(cv2.CAP_PROP_FRAME_WIDTH))
        actual_height = int(camera.get(cv2.CAP_PROP_FRAME_HEIGHT))
        if abs(actual_width - width) > 1 or abs(actual_height - height) > 1:
            logger.warning(f"分辨率 {width}x{height} 设置失败，实际为 {actual_width}x{actual_height}")
            return False
        logger.info(f"摄像头初始化成功，分辨率：{actual_width}x{actual_height}")
        return True

def parse_resolution(resolution_str):
    """解析分辨率字符串为宽度和高度"""
    try:
        width, height = map(int, resolution_str.split('x'))
        return width, height
    except ValueError:
        logger.warning(f"无效的分辨率格式：{resolution_str}，使用默认值640x480")
        return 640, 480

def get_supported_resolutions(device_index=0):
    """获取USB摄像头支持的分辨率"""
    try:
        result = subprocess.run(['v4l2-ctl', '--device', f'/dev/video{device_index}', '--list-formats-ext'],
                               capture_output=True, text=True, timeout=5)
        output = result.stdout
        resolutions = []
        pattern = r'Size: Discrete (\d+x\d+)'
        for match in re.finditer(pattern, output):
            resolutions.append(match.group(1))
        return list(set(resolutions))
    except Exception as e:
        logger.warning(f"获取分辨率失败，尝试OpenCV测试: {e}")
        camera = cv2.VideoCapture(device_index, cv2.CAP_V4L2)
        if not camera.isOpened():
            logger.error("无法打开摄像头进行分辨率测试")
            return ['640x480']
        test_resolutions = [(320, 240), (640, 480), (1280, 720), (1920, 1080)]
        supported = []
        for width, height in test_resolutions:
            camera.set(cv2.CAP_PROP_FRAME_WIDTH, width)
            camera.set(cv2.CAP_PROP_FRAME_HEIGHT, height)
            actual_width = int(camera.get(cv2.CAP_PROP_FRAME_WIDTH))
            actual_height = int(camera.get(cv2.CAP_PROP_FRAME_HEIGHT))
            if actual_width == width and actual_height == height:
                supported.append(f"{width}x{height}")
        camera.release()
        return supported or ['640x480']

def generate_frames():
    """生成视频帧并应用设置"""
    global camera, recording, output_file, frame_count, recording_start_time
    
    while True:
        with camera_lock:
            if camera is None or not camera.isOpened():
                try:
                    initialize_camera()
                except Exception as e:
                    logger.error(f"摄像头初始化失败: {e}")
                    time.sleep(1)
                    continue
            
            success, frame = camera.read()
            if not success:
                logger.warning("无法读取帧，尝试重新初始化摄像头")
                try:
                    initialize_camera()
                except:
                    time.sleep(1)
                continue
            
            if current_settings['flip_h']:
                frame = cv2.flip(frame, 1)
            if current_settings['flip_v']:
                frame = cv2.flip(frame, 0)
            
            if recording and output_file is not None:
                output_file.write(frame)
                frame_count += 1
                elapsed_time = time.time() - recording_start_time
                minutes = int(elapsed_time // 60)
                seconds = int(elapsed_time % 60)
                cv2.putText(frame, f"REC {minutes:02d}:{seconds:02d}", (10, 30),
                           cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2, cv2.LINE_AA)
                cv2.circle(frame, (25, 55), 10, (0, 0, 255), -1)
            
            ret, buffer = cv2.imencode('.jpg', frame, [int(cv2.IMWRITE_JPEG_QUALITY), 90])
            if not ret:
                continue
            frame_bytes = buffer.tobytes()
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n')
        
        time.sleep(1.0 / current_settings['fps'])

@app.route('/video_feed')
def video_feed():
    """提供视频流"""
    return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/update_settings', methods=['POST'])
def update_settings():
    """更新摄像头设置"""
    global current_settings, camera, recording, output_file
    data = request.get_json()
    
    supported_resolutions = get_supported_resolutions()
    
    if 'resolution' in data and data['resolution'] in supported_resolutions:
        if current_settings['resolution'] != data['resolution']:
            if recording:
                recording = False
                if output_file is not None:
                    output_file.release()
                    output_file = None
            current_settings['resolution'] = data['resolution']
            try:
                success = initialize_camera()
                if not success:
                    current_settings['resolution'] = '640x480'
                    initialize_camera()
                    return jsonify({'status': 'error', 'message': '分辨率不支持，回退到640x480'})
            except Exception as e:
                logger.error(f"分辨率切换失败: {e}")
                current_settings['resolution'] = '640x480'
                initialize_camera()
                return jsonify({'status': 'error', 'message': f'分辨率切换失败: {e}'})
    
    if 'fps' in data and int(data['fps']) in [15, 30, 60]:
        current_settings['fps'] = int(data['fps'])
        with camera_lock:
            if camera is not None:
                camera.set(cv2.CAP_PROP_FPS, current_settings['fps'])
    
    if 'brightness' in data:
        current_settings['brightness'] = max(0, min(100, int(data['brightness'])))
        with camera_lock:
            if camera is not None:
                camera.set(cv2.CAP_PROP_BRIGHTNESS, current_settings['brightness'] / 100)
    
    if 'contrast' in data:
        current_settings['contrast'] = max(0, min(100, int(data['contrast'])))
        with camera_lock:
            if camera is not None:
                camera.set(cv2.CAP_PROP_CONTRAST, current_settings['contrast'] / 100)
    
    if 'saturation' in data:
        current_settings['saturation'] = max(100, min(100, int(data['saturation'])))
        with camera_lock:
            if camera is not None:
                camera.set(cv2.CAP_PROP_SATURATION, current_settings['saturation'] / 0.1)
    
    if 'flip_h' in data:
        current_settings['flip_h'] = data['flip_h']
    if 'flip_v' in data:
        current_settings['flip_v'] = data['flip_v']
    
    if 'format' in data and data['format'] in ['avi', 'mp4']:
        current_settings['format'] = data['format']
    
    return jsonify({'status': 'success', 'settings': current_settings})

@app.route('/toggle_recording', methods=['POST'])
def toggle_recording():
    """开始或停止录像"""
    global recording, output_file, frame_count, recording_start_time, current_settings
    
    data = request.get_json()
    action = data.get('action')
    
    if action == 'start' and not recording:
        width, height = parse_resolution(current_settings['resolution'])
        timestamp = time.strftime("%Y%m%d-%H%M%S")
        file_ext = current_settings['format']
        file_path = os.path.join(recordings_folder, f'recording_{timestamp}.{file_ext}')
        
        fourcc = cv2.VideoWriter_fourcc(*'H264') if file_ext == 'mp4' else cv2.VideoWriter_fourcc(*'XVID')
        
        try:
            output_file = cv2.VideoWriter(file_path, fourcc, current_settings['fps'], (width, height))
            if not output_file.isOpened():
                logger.error("无法创建录像文件")
                return jsonify({'status': 'error', 'message': '无法创建录像文件'})
            recording = True
            frame_count = 0
            recording_start_time = time.time()
            logger.info(f"开始录像，保存至：{file_path}")
            return jsonify({'status': 'success', 'message': '录像开始', 'recording': True})
        except Exception as e:
            logger.error(f"开始录像失败: {e}")
            return jsonify({'status': 'error', 'message': f'开始录像失败: {e}'})
    
    elif action == 'stop' and recording:
        recording = False
        if output_file is not None:
            output_file.release()
            output_file = None
        duration = time.time() - recording_start_time
        logger.info(f"录像停止，捕获 {frame_count} 帧，持续 {duration:.2f} 秒")
        return jsonify({
            'status': 'success',
            'message': f'录像停止，捕获 {frame_count} 帧，持续 {duration:.2f} 秒',
            'recording': False
        })
    
    return jsonify({'status': 'error', 'message': '无效请求'})

@app.route('/control_motor', methods=['POST'])
def control_motor():
    """控制电机启停，实现渐进加速和减速"""
    data = request.get_json()
    action = data.get('action')
    
    if action not in ['start', 'stop']:
        return jsonify({'status': 'error', 'message': '无效动作'})
    
    try:
        if action == 'start':
            # 从当前脉宽逐步加速到最大正向
            current_pwm = motor_state['pulse_width']
            threading.Thread(target=motor_ramp, args=(current_pwm, PWM_FULL_FORWARD)).start()
            return jsonify({'status': 'success', 'message': '电机加速启动'})
        else:
            # 从当前脉宽逐步减速到中性
            current_pwm = motor_state['pulse_width']
            threading.Thread(target=motor_ramp, args=(current_pwm, PWM_NEUTRAL)).start()
            return jsonify({'status': 'success', 'message': '电机减速停止'})
    except Exception as e:
        return jsonify({'status': 'error', 'message': f'电机控制失败: {e}'})

@app.route('/get_motor_status', methods=['GET'])
def get_motor_status():
    """返回当前电机状态"""
    return jsonify({
        'running': motor_state['running'],
        'pulse_width': motor_state['pulse_width']
    })

@app.route('/get_recordings', methods=['GET'])
def get_recordings():
    """获取录像文件列表"""
    recordings = []
    try:
        for file in os.listdir(recordings_folder):
            if file.endswith(('.avi', '.mp4')):
                file_path = os.path.join(recordings_folder, file)
                file_stats = os.stat(file_path)
                recordings.append({
                    'name': file,
                    'size': file_stats.st_size,
                    'date': time.ctime(file_stats.st_ctime)
                })
        return jsonify({'recordings': recordings})
    except Exception as e:
        logger.error(f"获取录像列表失败: {e}")
        return jsonify({'status': 'error', 'message': f'获取录像列表失败: {e}'})

@app.route('/download_recording/<filename>', methods=['GET'])
def download_recording(filename):
    """下载录像文件"""
    file_path = os.path.join(recordings_folder, filename)
    if os.path.exists(file_path) and (filename.endswith('.avi') or filename.endswith('.mp4')):
        return send_file(file_path, as_attachment=True)
    logger.warning(f"尝试下载不存在或不支持的文件：{filename}")
    return jsonify({'status': 'error', 'message': '文件不存在或格式不支持'}), 404

@app.route('/delete_recording/<filename>', methods=['POST'])
def delete_recording(filename):
    """删除录像文件"""
    file_path = os.path.join(recordings_folder, filename)
    if os.path.exists(file_path) and (filename.endswith('.avi') or filename.endswith('.mp4')):
        try:
            os.remove(file_path)
            logger.info(f"文件删除成功：{filename}")
            return jsonify({'status': 'success', 'message': '文件已删除'})
        except Exception as e:
            logger.error(f"删除文件失败: {e}")
            return jsonify({'status': 'error', 'message': f'删除文件失败: {e}'})
    logger.warning(f"尝试删除不存在或不支持的文件：{filename}")
    return jsonify({'status': 'error', 'message': '文件不存在或格式不支持'}), 404

@app.route('/get_supported_resolutions', methods=['GET'])
def get_supported_resolutions_route():
    """返回摄像头支持的分辨率"""
    resolutions = get_supported_resolutions()
    return jsonify({'resolutions': resolutions})

@app.route('/get_current_settings', methods=['GET'])
def get_current_settings():
    """返回当前摄像头设置"""
    return jsonify(current_settings)

@app.route('/')
def index():
    """提供主页面"""
    return """
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能视频监控系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3a86ff;
            --primary-dark: #2667cc;
            --secondary: #ff006e;
            --success: #38b000;
            --warning: #ffbe0b;
            --danger: #ff5252;
            --dark: #1a1a2e;
            --light: #ffffff;
            --gray: #8d99ae;
            --gray-light: #edf2f4;
            --gray-dark: #2b2d42;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --radius: 8px;
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: var(--gray-dark);
            line-height: 1.6;
        }

        .app-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .header {
            background-color: var(--light);
            padding: 1rem 2rem;
            box-shadow: var(--shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 600;
            font-size: 1.25rem;
            color: var(--dark);
        }

        .logo i {
            color: var(--primary);
            font-size: 1.5rem;
        }

        .nav-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--dark);
            cursor: pointer;
        }

        .main-content {
            display: flex;
            flex: 1;
        }

        .sidebar {
            width: 320px;
            background-color: var(--light);
            border-right: 1px solid var(--gray-light);
            padding: 1.5rem;
            overflow-y: auto;
            transition: var(--transition);
        }

        .panel {
            margin-bottom: 1.5rem;
            background-color: var(--light);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--gray-light);
        }

        .panel-header {
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            background-color: var(--gray-light);
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--gray-dark);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .panel-header i {
            margin-right: 0.75rem;
            color: var(--primary);
        }

        .panel-body {
            padding: 1.25rem;
        }

        .form-group {
            margin-bottom: 1.25rem;
        }

        .form-group:last-child {
            margin-bottom: 0;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--gray-dark);
        }

        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--gray-light);
            border-radius: var(--radius);
            font-size: 0.9rem;
            transition: var(--transition);
            background-color: var(--light);
            color: var(--dark);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.1);
        }

        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232b2d42' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            padding-right: 2.5rem;
        }

        .slider-container {
            position: relative;
            padding-top: 1.5rem;
        }

        .form-range {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--gray-light);
            outline: none;
        }

        .form-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            border: none;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }

        .form-range::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            border: none;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }

        .range-value {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--primary);
        }

        .switch-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--gray-light);
            transition: var(--transition);
            border-radius: 24px;
        }

        .switch-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: var(--transition);
            border-radius: 50%;
        }

        input:checked + .switch-slider {
            background-color: var(--primary);
        }

        input:focus + .switch-slider {
            box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.1);
        }

        input:checked + .switch-slider:before {
            transform: translateX(20px);
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            padding: 0.3rem 0.75rem;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 600;
            background-color: var(--gray-light);
            color: var(--gray-dark);
        }

        .status-indicator.active {
            background-color: var(--success);
            color: white;
        }

        .status-indicator.stopped {
            background-color: var(--gray);
            color: white;
        }

        .btn-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1.25rem;
            border-radius: var(--radius);
            font-weight: 500;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            box-shadow: var(--shadow);
            gap: 0.5rem;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
        }

        .btn-success {
            background-color: var(--success);
            color: white;
        }

        .btn-success:hover {
            background-color: #2b9000;
        }

        .btn-danger {
            background-color: var(--danger);
            color: white;
        }

        .btn-danger:hover {
            background-color: #e03e3e;
        }

        .btn-secondary {
            background-color: var(--gray-light);
            color: var(--gray-dark);
        }

        .btn-secondary:hover {
            background-color: #dce1e4;
        }

        .btn-full {
            grid-column: span 2;
        }

        .content {
            flex: 1;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        .video-wrapper {
            position: relative;
            width: 100%;
            background-color: var(--dark);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 1.5rem;
            box-shadow: var(--shadow);
        }

        .video-inner {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }

        .video-feed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            pointer-events: none;
        }

        .video-indicators {
            padding: 1rem;
            display: flex;
            gap: 0.75rem;
        }

        .video-indicator {
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius);
            font-size: 0.8rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            pointer-events: auto;
        }

        .indicator-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--success);
        }

        .indicator-dot.pulse {
            animation: pulse 1.5s infinite;
        }

        .indicator-dot.recording {
            background-color: var(--danger);
        }

        .video-controls {
            padding: 1rem;
            display: flex;
            justify-content: center;
            gap: 1rem;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: auto;
        }

        .video-wrapper:hover .video-controls {
            opacity: 1;
        }

        .control-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .control-btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }

        .control-btn.active {
            background-color: var(--primary);
        }

        .recordings-container {
            background-color: var(--light);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            display: none;
        }

        .recordings-header {
            padding: 1rem 1.5rem;
            background-color: var(--gray-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .recordings-title {
            font-weight: 600;
            font-size: 1rem;
            color: var(--gray-dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .recordings-body {
            max-height: 400px;
            overflow-y: auto;
        }

        .recording-item {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--gray-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }

        .recording-item:hover {
            background-color: var(--gray-light);
        }

        .recording-info {
            flex: 1;
        }

        .recording-name {
            font-weight: 500;
            margin-bottom: 0.25rem;
        }

        .recording-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.8rem;
            color: var(--gray);
        }

        .recording-actions {
            display: flex;
            gap: 0.5rem;
        }

        .recording-btn {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            padding: 0.25rem;
        }

        .recording-btn:hover {
            color: var(--primary);
        }

        .recording-btn.delete:hover {
            color: var(--danger);
        }

        .toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            background-color: var(--dark);
            color: white;
            box-shadow: var(--shadow);
            z-index: 1000;
            max-width: 300px;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transform: translateY(100px);
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1;
        }

        .toast-icon {
            font-size: 1.25rem;
        }

        .toast.success {
            background-color: var(--success);
        }

        .toast.error {
            background-color: var(--danger);
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--gray-light);
            }
            
            .panel-body {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 1rem;
            }
            
            .btn-group {
                grid-column: span 3;
            }
        }

        @media (max-width: 768px) {
            .header {
                padding: 1rem;
            }
            
            .nav-toggle {
                display: block;
            }
            
            .sidebar {
                position: fixed;
                left: -100%;
                top: 0;
                bottom: 0;
                width: 85%;
                max-width: 320px;
                z-index: 99;
                border-right: 1px solid var(--gray-light);
                border-bottom: none;
                padding-top: 4rem;
            }
            
            .sidebar.show {
                left: 0;
            }
            
            .panel-body {
                display: block;
            }
            
            .content {
                padding: 1rem;
            }
            
            .overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 98;
            }
            
            .overlay.show {
                display: block;
            }
        }

        /* Dark mode styles */
        @media (prefers-color-scheme: dark) {
            :root {
                --light: #1a1a2e;
                --dark: #edf2f4;
                --gray-light: #272740;
                --gray-dark: #edf2f4;
                --gray: #8d99ae;
            }
            
            body {
                background-color: #121225;
                color: var(--gray-dark);
            }
            
            .form-control {
                background-color: #272740;
                color: #edf2f4;
                border-color: #383854;
            }
            
            .form-select {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23edf2f4' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            }
            
            .form-range {
                background: #383854;
            }
            
            .btn-secondary {
                background-color: #272740;
                color: #edf2f4;
            }
            
            .btn-secondary:hover {
                background-color: #32324d;
            }
            
            .video-wrapper {
                background-color: #000;
            }
            
            .recording-item:hover {
                background-color: #272740;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <header class="header">
            <div class="logo">
                <i class="fas fa-video"></i>
                <span>智能视频监控系统</span>
            </div>
            <button class="nav-toggle" id="nav-toggle">
                <i class="fas fa-bars"></i>
            </button>
        </header>

        <div class="main-content">
            <aside class="sidebar" id="sidebar">
                <div class="panel">
                    <div class="panel-header">
                        <i class="fas fa-cog"></i> 摄像头设置
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="form-label" for="resolution">分辨率</label>
                            <select class="form-control form-select" id="resolution">
                                <!-- 动态填充 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="fps">帧率</label>
                            <select class="form-control form-select" id="fps">
                                <option value="15">15 FPS</option>
                                <option value="30">30 FPS</option>
                                <option value="60">60 FPS</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="format">录像格式</label>
                            <select class="form-control form-select" id="format">
                                <option value="mp4">MP4 (H.264)</option>
                                <option value="avi">AVI (XVID)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="panel">
                    <div class="panel-header">
                        <i class="fas fa-sliders-h"></i> 画面调整
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="form-label" for="brightness">亮度</label>
                            <div class="slider-container">
                                <input type="range" class="form-range" id="brightness" min="0" max="100" value="50">
                                <span class="range-value" id="brightness-value">50</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="contrast">对比度</label>
                            <div class="slider-container">
                                <input type="range" class="form-range" id="contrast" min="0" max="100" value="50">
                                <span class="range-value" id="contrast-value">50</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="saturation">饱和度</label>
                            <div class="slider-container">
                                <input type="range" class="form-range" id="saturation" min="0" max="100" value="50">
                                <span class="range-value" id="saturation-value">50</span>
                            </div>
                        </div>
                        <div class="form-group switch-container">
                            <label class="form-label">水平翻转</label>
                            <label class="switch">
                                <input type="checkbox" id="flip_h">
                                <span class="switch-slider"></span>
                            </label>
                        </div>
                        <div class="form-group switch-container">
                            <label class="form-label">垂直翻转</label>
                            <label class="switch">
                                <input type="checkbox" id="flip_v">
                                <span class="switch-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="panel">
                    <div class="panel-header">
                        <i class="fas fa-cogs"></i> 控制面板
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="form-label">电机状态</label>
                            <div id="motor_status_text" class="status-indicator stopped">
                                <i class="fas fa-power-off"></i> 已停止
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">录像状态</label>
                            <div id="recording_status_text" class="status-indicator stopped">
                                <i class="fas fa-video-slash"></i> 未录制
                            </div>
                        </div>
                        <div class="btn-group">
                            <button id="start-motor" class="btn btn-success">
                                <i class="fas fa-play"></i> 启动电机
                            </button>
                            <button id="stop-motor" class="btn btn-danger" style="display: none;">
                                <i class="fas fa-stop"></i> 停止电机
                            </button>
                            <button id="start-recording" class="btn btn-success">
                                <i class="fas fa-record-vinyl"></i> 开始录像
                            </button>
                            <button id="stop-recording" class="btn btn-danger" style="display: none;">
                                <i class="fas fa-stop-circle"></i> 停止录像
                            </button>
                            <button id="show-recordings" class="btn btn-secondary btn-full">
                                <i class="fas fa-film"></i> 查看录像文件
                            </button>
                        </div>
                    </div>
                </div>
            </aside>

            <div class="content">
                <div class="video-wrapper">
                    <div class="video-inner">
                        <img src="/video_feed" alt="Camera Feed" class="video-feed">
                        <div class="video-overlay">
                            <div class="video-indicators">
                                <div class="video-indicator" id="motor-indicator">
                                    <span class="indicator-dot"></span>
                                    电机：已停止
                                </div>
                                <div class="video-indicator" id="recording-indicator" style="display: none;">
                                    <span class="indicator-dot recording pulse"></span>
                                    录像：00:00
                                </div>
                            </div>
                            <div class="video-controls">
                                <button class="control-btn" id="snapshot-btn" title="拍摄快照">
                                    <i class="fas fa-camera"></i>
                                </button>
                                <button class="control-btn" id="fullscreen-btn" title="全屏显示">
                                    <i class="fas fa-expand"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="recordings-container" id="recordings-container">
                    <div class="recordings-header">
                        <div class="recordings-title">
                            <i class="fas fa-film"></i>
                            录像文件列表
                        </div>
                        <button class="btn btn-secondary" id="close-recordings">
                            <i class="fas fa-times"></i> 关闭
                        </button>
                    </div>
                    <div class="recordings-body" id="recordings-content">
                        <!-- 录像列表将动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="overlay" id="overlay"></div>
    <div class="toast" id="toast">
        <i class="fas fa-info-circle toast-icon"></i>
        <div class="toast-message">操作成功</div>
    </div>

    <script>
        // DOM 元素
        const resolutionSelect = document.getElementById('resolution');
        const fpsSelect = document.getElementById('fps');
        const formatSelect = document.getElementById('format');
        const brightnessSlider = document.getElementById('brightness');
        const brightnessValue = document.getElementById('brightness-value');
        const contrastSlider = document.getElementById('contrast');
        const contrastValue = document.getElementById('contrast-value');
        const saturationSlider = document.getElementById('saturation');
        const saturationValue = document.getElementById('saturation-value');
        const flipHToggle = document.getElementById('flip_h');
        const flipVToggle = document.getElementById('flip_v');
        const startRecordingBtn = document.getElementById('start-recording');
        const stopRecordingBtn = document.getElementById('stop-recording');
        const startMotorBtn = document.getElementById('start-motor');
        const stopMotorBtn = document.getElementById('stop-motor');
        const motorStatusText = document.getElementById('motor_status_text');
        const recordingStatusText = document.getElementById('recording_status_text');
        const showRecordingsBtn = document.getElementById('show-recordings');
        const recordingsContainer = document.getElementById('recordings-container');
        const recordingsContent = document.getElementById('recordings-content');
        const closeRecordingsBtn = document.getElementById('close-recordings');
        const recordingIndicator = document.getElementById('recording-indicator');
        const motorIndicator = document.getElementById('motor-indicator');
        const navToggle = document.getElementById('nav-toggle');
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        const snapshotBtn = document.getElementById('snapshot-btn');
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const videoWrapper = document.querySelector('.video-wrapper');
        const toast = document.getElementById('toast');

        let isRecording = false;
        let recordingTimer = null;
        let recordingStartTime = 0;
        let isMotorRunning = false;

        // 初始化
        window.addEventListener('DOMContentLoaded', async () => {
            await loadSupportedResolutions();
            await loadSettings();
            await loadMotorStatus();
            
            // 事件监听器
            resolutionSelect.addEventListener('change', updateSettings);
            fpsSelect.addEventListener('change', updateSettings);
            formatSelect.addEventListener('change', updateSettings);
            brightnessSlider.addEventListener('input', updateBrightnessValue);
            brightnessSlider.addEventListener('change', updateSettings);
            contrastSlider.addEventListener('input', updateContrastValue);
            contrastSlider.addEventListener('change', updateSettings);
            saturationSlider.addEventListener('input', updateSaturationValue);
            saturationSlider.addEventListener('change', updateSettings);
            flipHToggle.addEventListener('change', updateSettings);
            flipVToggle.addEventListener('change', updateSettings);
            startRecordingBtn.addEventListener('click', startRecording);
            stopRecordingBtn.addEventListener('click', stopRecording);
            startMotorBtn.addEventListener('click', startMotor);
            stopMotorBtn.addEventListener('click', stopMotor);
            showRecordingsBtn.addEventListener('click', toggleRecordingsList);
            closeRecordingsBtn.addEventListener('click', toggleRecordingsList);
            navToggle.addEventListener('click', toggleSidebar);
            overlay.addEventListener('click', closeSidebar);
            snapshotBtn.addEventListener('click', takeSnapshot);
            fullscreenBtn.addEventListener('click', toggleFullscreen);
            
            updateBrightnessValue();
            updateContrastValue();
            updateSaturationValue();
            
            // 定期检查电机状态
            setInterval(loadMotorStatus, 5000);
        });

        // 加载支持的分辨率
        async function loadSupportedResolutions() {
            try {
                const response = await fetch('/get_supported_resolutions');
                const data = await response.json();
                resolutionSelect.innerHTML = '';
                data.resolutions.forEach(res => {
                    const option = document.createElement('option');
                    option.value = res;
                    option.textContent = res;
                    resolutionSelect.appendChild(option);
                });
                resolutionSelect.value = data.resolutions.includes('1280x480') ? '1280x480' : data.resolutions[0];
            } catch (error) {
                console.error('加载支持分辨率失败:', error);
                showToast('无法加载支持的分辨率', 'error');
            }
        }

        // 加载当前设置
        async function loadSettings() {
            try {
                const response = await fetch('/get_current_settings');
                const settings = await response.json();
                resolutionSelect.value = settings.resolution;
                fpsSelect.value = settings.fps;
                formatSelect.value = settings.format;
                brightnessSlider.value = settings.brightness;
                contrastSlider.value = settings.contrast;
                saturationSlider.value = settings.saturation;
                flipHToggle.checked = settings.flip_h;
                flipVToggle.checked = settings.flip_v;
                
                updateBrightnessValue();
                updateContrastValue();
                updateSaturationValue();
            } catch (error) {
                console.error('加载设置失败:', error);
                showToast('无法加载摄像头设置', 'error');
            }
        }

        // 加载电机状态
        async function loadMotorStatus() {
            try {
                const response = await fetch('/get_motor_status');
                const status = await response.json();
                isMotorRunning = status.running;
                
                // 更新按钮显示
                startMotorBtn.style.display = isMotorRunning ? 'none' : 'flex';
                stopMotorBtn.style.display = isMotorRunning ? 'flex' : 'none';
                
                // 更新状态指示
                motorStatusText.textContent = isMotorRunning ? '运行中' : '已停止';
                motorStatusText.className = isMotorRunning ? 'status-indicator active' : 'status-indicator stopped';
                motorStatusText.innerHTML = isMotorRunning ? 
                    '<i class="fas fa-play-circle"></i> 运行中' : 
                    '<i class="fas fa-power-off"></i> 已停止';
                
                // 更新视频覆盖层指示
                motorIndicator.innerHTML = `<span class="indicator-dot ${isMotorRunning ? 'pulse' : ''}"></span> 电机：${isMotorRunning ? '运行中' : '已停止'}`;
            } catch (error) {
                console.error('加载电机状态失败:', error);
                showToast('无法加载电机状态', 'error');
            }
        }

        // 更新亮度值显示
        function updateBrightnessValue() {
            brightnessValue.textContent = brightnessSlider.value;
        }

        // 更新对比度值显示
        function updateContrastValue() {
            contrastValue.textContent = contrastSlider.value;
        }

        // 更新饱和度值显示
        function updateSaturationValue() {
            saturationValue.textContent = saturationSlider.value;
        }

        // 更新摄像头设置
        async function updateSettings() {
            const settings = {
                resolution: resolutionSelect.value,
                fps: fpsSelect.value,
                format: formatSelect.value,
                brightness: brightnessSlider.value,
                contrast: contrastSlider.value,
                saturation: saturationSlider.value,
                flip_h: flipHToggle.checked,
                flip_v: flipVToggle.checked
            };
            
            try {
                const response = await fetch('/update_settings', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(settings)
                });
                const data = await response.json();
                if (data.status === 'success') {
                    showToast('设置已更新', 'success');
                } else {
                    showToast(data.message || '设置更新失败', 'error');
                    if (data.message.includes('分辨率')) {
                        resolutionSelect.value = data.settings.resolution;
                    }
                }
            } catch (error) {
                console.error('更新设置失败:', error);
                showToast('无法更新设置', 'error');
            }
        }

        // 开始录像
        async function startRecording() {
            try {
                const response = await fetch('/toggle_recording', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'start' })
                });
                const data = await response.json();
                if (data.status === 'success') {
                    isRecording = true;
                    
                    // 更新按钮状态
                    startRecordingBtn.style.display = 'none';
                    stopRecordingBtn.style.display = 'flex';
                    
                    // 更新录像状态指示
                    recordingStatusText.className = 'status-indicator active';
                    recordingStatusText.innerHTML = '<i class="fas fa-record-vinyl"></i> 录制中';
                    
                    // 显示录像指示器
                    recordingIndicator.style.display = 'flex';
                    
                    showToast('录像已开始', 'success');
                    
                    // 启动计时器
                    recordingStartTime = Date.now();
                    updateRecordingTime();
                    recordingTimer = setInterval(updateRecordingTime, 1000);
                } else {
                    showToast(data.message || '无法开始录像', 'error');
                }
            } catch (error) {
                console.error('开始录像失败:', error);
                showToast('无法开始录像', 'error');
            }
        }

        // 停止录像
        async function stopRecording() {
            try {
                const response = await fetch('/toggle_recording', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'stop' })
                });
                const data = await response.json();
                if (data.status === 'success') {
                    isRecording = false;
                    
                    // 更新按钮状态
                    startRecordingBtn.style.display = 'flex';
                    stopRecordingBtn.style.display = 'none';
                    
                    // 更新录像状态指示
                    recordingStatusText.className = 'status-indicator stopped';
                    recordingStatusText.innerHTML = '<i class="fas fa-video-slash"></i> 未录制';
                    
                    // 隐藏录像指示器
                    recordingIndicator.style.display = 'none';
                    
                    showToast('录像已保存', 'success');
                    
                    // 停止计时器
                    clearInterval(recordingTimer);
                    
                    // 如果录像列表已打开，则刷新
                    if (recordingsContainer.style.display === 'block') {
                        loadRecordings();
                    }
                } else {
                    showToast(data.message || '无法停止录像', 'error');
                }
            } catch (error) {
                console.error('停止录像失败:', error);
                showToast('无法停止录像', 'error');
            }
        }

        // 启动电机
        async function startMotor() {
            try {
                startMotorBtn.disabled = true;
                const response = await fetch('/control_motor', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'start' })
                });
                const data = await response.json();
                if (data.status === 'success') {
                    isMotorRunning = true;
                    startMotorBtn.style.display = 'none';
                    stopMotorBtn.style.display = 'flex';
                    showToast('电机已启动', 'success');
                    await loadMotorStatus();
                } else {
                    showToast(data.message || '无法启动电机', 'error');
                }
            } catch (error) {
                console.error('启动电机失败:', error);
                showToast('无法启动电机', 'error');
            } finally {
                startMotorBtn.disabled = false;
            }
        }

        // 停止电机
        async function stopMotor() {
            try {
                stopMotorBtn.disabled = true;
                const response = await fetch('/control_motor', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'stop' })
                });
                const data = await response.json();
                if (data.status === 'success') {
                    isMotorRunning = false;
                    startMotorBtn.style.display = 'flex';
                    stopMotorBtn.style.display = 'none';
                    showToast('电机已停止', 'success');
                    await loadMotorStatus();
                } else {
                    showToast(data.message || '无法停止电机', 'error');
                }
            } catch (error) {
                console.error('停止电机失败:', error);
                showToast('无法停止电机', 'error');
            } finally {
                stopMotorBtn.disabled = false;
            }
        }

        // 更新录像时间
        function updateRecordingTime() {
            const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
            const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
            const seconds = (elapsed % 60).toString().padStart(2, '0');
            recordingIndicator.innerHTML = `<span class="indicator-dot recording pulse"></span> 录像：${minutes}:${seconds}`;
        }

        // 切换录像列表显示
        function toggleRecordingsList() {
            if (recordingsContainer.style.display === 'block') {
                recordingsContainer.style.display = 'none';
            } else {
                recordingsContainer.style.display = 'block';
                loadRecordings();
            }
        }

        // 加载录像列表
        async function loadRecordings() {
            try {
                const response = await fetch('/get_recordings');
                const data = await response.json();
                
                if (!data.recordings || data.recordings.length === 0) {
                    recordingsContent.innerHTML = '<div class="recording-item">暂无录像文件</div>';
                    return;
                }
                
                recordingsContent.innerHTML = '';
                data.recordings.forEach(recording => {
                    const fileSize = formatFileSize(recording.size);
                    const item = document.createElement('div');
                    item.className = 'recording-item';
                    item.innerHTML = `
                        <div class="recording-info">
                            <div class="recording-name">${recording.name}</div>
                            <div class="recording-meta">
                                <span><i class="far fa-clock"></i> ${recording.date}</span>
                                <span><i class="far fa-hdd"></i> ${fileSize}</span>
                            </div>
                        </div>
                        <div class="recording-actions">
                            <button class="recording-btn download-btn" title="下载" data-filename="${recording.name}">
                                <i class="fas fa-download"></i>
                            </button>
                            <button class="recording-btn delete delete-btn" title="删除" data-filename="${recording.name}">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    `;
                    recordingsContent.appendChild(item);
                    
                    // 绑定事件
                    item.querySelector('.download-btn').addEventListener('click', () => downloadRecording(recording.name));
                    item.querySelector('.delete-btn').addEventListener('click', () => deleteRecording(recording.name));
                });
            } catch (error) {
                console.error('加载录像失败:', error);
                recordingsContent.innerHTML = '<div class="recording-item">加载录像文件失败</div>';
            }
        }

        // 下载录像
        function downloadRecording(filename) {
            const link = document.createElement('a');
            link.href = `/download_recording/${encodeURIComponent(filename)}`;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // 删除录像
        async function deleteRecording(filename) {
            if (confirm(`确定要删除录像文件 "${filename}" 吗？`)) {
                try {
                    const response = await fetch(`/delete_recording/${encodeURIComponent(filename)}`, {
                        method: 'POST'
                    });
                    const data = await response.json();
                    if (data.status === 'success') {
                        showToast('文件已删除', 'success');
                        loadRecordings();
                    } else {
                        showToast(data.message || '无法删除文件', 'error');
                    }
                } catch (error) {
                    console.error('删除文件失败:', error);
                    showToast('无法删除文件', 'error');
                }
            }
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 显示通知
        function showToast(message, type = 'info') {
            const toastIcon = toast.querySelector('.toast-icon');
            const toastMessage = toast.querySelector('.toast-message');
            
            toast.className = 'toast';
            if (type === 'success' || type === 'error') {
                toast.classList.add(type);
            }
            
            if (type === 'success') {
                toastIcon.className = 'fas fa-check-circle toast-icon';
            } else if (type === 'error') {
                toastIcon.className = 'fas fa-exclamation-circle toast-icon';
            } else {
                toastIcon.className = 'fas fa-info-circle toast-icon';
            }
            
            toastMessage.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }

        // 侧边栏切换
        function toggleSidebar() {
            sidebar.classList.toggle('show');
            overlay.classList.toggle('show');
        }

        // 关闭侧边栏
        function closeSidebar() {
            sidebar.classList.remove('show');
            overlay.classList.remove('show');
        }

        // 拍摄快照
        async function takeSnapshot() {
            try {
                const canvas = document.createElement('canvas');
                const video = document.querySelector('.video-feed');
                canvas.width = video.naturalWidth;
                canvas.height = video.naturalHeight;
                
                const ctx = canvas.getContext('2d');
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                
                // 创建下载链接
                const link = document.createElement('a');
                link.download = `snapshot_${new Date().toISOString().replace(/[:.]/g, '-')}.jpg`;
                link.href = canvas.toDataURL('image/jpeg', 0.9);
                link.click();
                
                showToast('快照已保存', 'success');
            } catch (error) {
                console.error('拍摄快照失败:', error);
                showToast('无法保存快照', 'error');
            }
        }

        // 切换全屏显示
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                videoWrapper.requestFullscreen().catch(err => {
                    showToast('无法切换到全屏模式', 'error');
                });
            } else {
                document.exitFullscreen();
            }
        }

        // 全屏状态变化事件
        document.addEventListener('fullscreenchange', () => {
            if (document.fullscreenElement) {
                fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
            } else {
                fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
            }
        });
    </script>
</body>
</html>
    """

if __name__ == '__main__':
    try:
        initialize_camera()
        initialize_gpio()
        app.run(host='0.0.0.0', port=5000, threaded=True, debug=False)
    except Exception as e:
        logger.error(f"应用启动失败: {e}")
        sys.exit(1)
    finally:
        if camera is not None:
            camera.release()
            logger.info("摄像头资源已释放")
        if output_file is not None:
            output_file.release()
            logger.info("录像文件已释放")
        if h is not None:
            try:
                set_motor_pwm(PWM_NEUTRAL)
                lgpio.gpiochip_close(h)
                logger.info("GPIO资源已释放")
            except Exception as e:
                logger.error(f"GPIO清理失败: {e}")