以下是一段生成html的函数，帮我优化下缩进和布局，提高代码的可读性
```
def gen_html(items, items_per_page=20):
    html_template = f"""<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Latent抽样检查-256x256</title>
<link rel="icon" href="data:,">
<style>
    body {{
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f9f9f9;
    }}
    .video-table-container {{
        width: 100%;
        overflow-x: auto;
    }}
    .video-table {{
        width: 100%;
        border-collapse: collapse;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }}
    .video-table th, .video-table td {{
        padding: 15px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #ddd;
        width: 25%;
        height: 300px;
        max-height: 300px;
        position: relative;
    }}
    .video-table th {{
        background-color: #f2f2f2;
        height: auto;
        line-height: 1.5;
        font-weight: bold;
    }}
    video {{
        width: 100%;
        height: 100%;
        max-height: 300px;
        object-fit: contain;
        border-radius: 8px;
    }}
    .pagination {{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
        flex-wrap: wrap;
        gap: 5px;
    }}
    .pagination a {{
        display: inline-block;
        padding: 10px 16px;
        margin: 4px;
        text-decoration: none;
        border: 1px solid #ddd;
        border-radius: 4px;
        color: #555;
        background-color: #fff;
        transition: background-color 0.3s, color 0.3s, transform 0.2s;
    }}
    .pagination a:hover {{
        background-color: #f1f1f1;
        transform: translateY(-2px);
    }}
    .pagination a.active {{
        background-color: #4CAF50;
        color: white;
        border-color: #4CAF50;
        cursor: default;
    }}
    .pagination a.disabled {{
        color: #ccc;
        border-color: #ddd;
        cursor: not-allowed;
    }}
    .pagination .ellipsis {{
        padding: 10px 16px;
        margin: 4px;
        color: #555;
        cursor: default;
    }}
    /* 响应式设计 */
    @media (max-width: 600px) {{
        .video-table th, .video-table td {{
            padding: 10px;
            height: 200px;
        }}
        video {{
            max-height: 200px;
        }}
        .pagination a {{
            padding: 8px 12px;
            margin: 2px;
        }}
    }}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="video-table-container">
<table class="video-table" id="videoTable">
<thead>
<tr><th>VAE重建</th><th>原始视频</th><th>VAE重建</th><th>原始视频</th></tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>
<div class="pagination" id="pagination"></div>
<script>
const items = {json.dumps(items)};
const itemsPerPage = {items_per_page};
const totalPages = Math.ceil(items.length / itemsPerPage);
let currentPage = 1;

function renderTable(page) {{
    const tableBody = document.getElementById('tableBody');
    tableBody.innerHTML = '';
    const start = (page - 1) * itemsPerPage;
    const end = Math.min(start + itemsPerPage, items.length);
    for (let i = start; i < end; i += 2) {{
        const tr = document.createElement('tr');
        for (let j = 0; j < 2; j++) {{
            const index = i + j;
            const td1 = document.createElement('td');
            const td2 = document.createElement('td');
            if (index < end) {{
                const item = items[index];
                const videoPath = item.videoid + '.mp4';
                const url = item.url;
                const video1 = createVideoElement(videoPath);
                const video2 = createVideoElement(url);
                td1.appendChild(video1);
                td2.appendChild(video2);
            }} else {{
                td1.innerHTML = ' ';
                td2.innerHTML = ' ';
            }}
            tr.appendChild(td1);
            tr.appendChild(td2);
        }}
        tableBody.appendChild(tr);
    }}
}}

function createVideoElement(src) {{
    const video = document.createElement('video');
    video.setAttribute('data-src', src);
    video.classList.add('lazyload');
    video.controls = true;
    return video;
}}

function setupPagination() {{
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = '';
    const prev = document.createElement('a');
    prev.innerHTML = '« 上一页';
    prev.href = '#';
    if (currentPage === 1) prev.classList.add('disabled');
    prev.addEventListener('click', (e) => {{
        e.preventDefault();
        if (currentPage > 1) goToPage(currentPage - 1);
    }});
    pagination.appendChild(prev);
    const pageButtons = getPageButtons(currentPage, totalPages);
    pageButtons.forEach(btn => {{
        if (btn === '...') {{
            const span = document.createElement('span');
            span.classList.add('ellipsis');
            span.innerText = '...';
            pagination.appendChild(span);
        }} else {{
            const a = document.createElement('a');
            a.innerText = btn;
            a.href = '#';
            if (btn === currentPage) a.classList.add('active');
            a.addEventListener('click', (e) => {{
                e.preventDefault();
                goToPage(btn);
            }});
            pagination.appendChild(a);
        }}
    }});
    const next = document.createElement('a');
    next.innerHTML = '下一页 »';
    next.href = '#';
    if (currentPage === totalPages) next.classList.add('disabled');
    next.addEventListener('click', (e) => {{
        e.preventDefault();
        if (currentPage < totalPages) goToPage(currentPage + 1);
    }});
    pagination.appendChild(next);
}}

function getPageButtons(current, total) {{
    const buttons = [];
    const maxButtons = 7;
    if (total <= maxButtons) {{
        for (let i = 1; i <= total; i++) buttons.push(i);
    }} else {{
        if (current <= 4) {{
            for (let i = 1; i <= 5; i++) buttons.push(i);
            buttons.push('...');
            buttons.push(total);
        }} else if (current >= total - 3) {{
            buttons.push(1);
            buttons.push('...');
            for (let i = total - 4; i <= total; i++) buttons.push(i);
        }} else {{
            buttons.push(1);
            buttons.push('...');
            buttons.push(current - 1);
            buttons.push(current);
            buttons.push(current + 1);
            buttons.push('...');
            buttons.push(total);
        }}
    }}
    return buttons;
}}

function goToPage(page) {{
    if (page < 1 || page > totalPages) return;
    currentPage = page;
    renderTable(page);
    setupPagination();
    window.scrollTo({{ top: 0, behavior: 'smooth' }});
}}

document.addEventListener('DOMContentLoaded', () => {{
    renderTable(currentPage);
    setupPagination();
}});
</script>
</body>
</html>"""
    return html_template
```