611 lines
24 KiB
HTML
611 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Topaz Video AI 参数配置器</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.1em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.main-content {
|
|
display: grid;
|
|
grid-template-columns: 380px 1fr 420px;
|
|
gap: 0;
|
|
min-height: 800px;
|
|
}
|
|
|
|
.template-section {
|
|
background: #f8f9fa;
|
|
border-right: 1px solid #e9ecef;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
max-height: 800px;
|
|
}
|
|
|
|
.form-section {
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
max-height: 800px;
|
|
}
|
|
|
|
.output-section {
|
|
background: #2d3748;
|
|
color: #e2e8f0;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
max-height: 800px;
|
|
border-left: 1px solid #e9ecef;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.2em;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid #4facfe;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-group {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid #e9ecef;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-group:hover {
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.form-group h4 {
|
|
color: #495057;
|
|
margin-bottom: 12px;
|
|
font-size: 1em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.form-row.full-width {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.field label {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.field input, .field select {
|
|
padding: 8px;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 6px;
|
|
font-size: 0.85em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.field input:focus, .field select:focus {
|
|
outline: none;
|
|
border-color: #4facfe;
|
|
box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.1);
|
|
}
|
|
|
|
.checkbox-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.checkbox-field input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: #4facfe;
|
|
}
|
|
|
|
.checkbox-field label {
|
|
font-size: 0.85em;
|
|
color: #495057;
|
|
}
|
|
|
|
.template-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.template-item {
|
|
background: white;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.template-item:hover {
|
|
border-color: #4facfe;
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.template-item.active {
|
|
border-color: #4facfe;
|
|
background: #f0f8ff;
|
|
}
|
|
|
|
.template-name {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.template-desc {
|
|
font-size: 0.75em;
|
|
color: #666;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.usage-indicator {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.7em;
|
|
font-weight: 600;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.usage-high { background: #d4edda; color: #155724; }
|
|
.usage-medium { background: #fff3cd; color: #856404; }
|
|
.usage-low { background: #f8d7da; color: #721c24; }
|
|
|
|
.generate-btn {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 30px;
|
|
border-radius: 20px;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.generate-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
|
|
}
|
|
|
|
.output-content {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8em;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
overflow-x: auto;
|
|
background: #1a202c;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.command-type {
|
|
color: #4facfe;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.copy-btn {
|
|
background: #48bb78;
|
|
color: white;
|
|
border: none;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
font-size: 0.8em;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: #38a169;
|
|
}
|
|
|
|
@media (max-width: 1400px) {
|
|
.main-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.template-section, .output-section {
|
|
border: none;
|
|
border-top: 1px solid #e9ecef;
|
|
max-height: 400px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🎬 Topaz Video AI 参数配置器</h1>
|
|
<p>基于真实命令分析的专业视频处理参数配置工具 - 参数使用率 75%</p>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<!-- 模板选择区域 -->
|
|
<div class="template-section">
|
|
<div class="section-title">📋 内置模板</div>
|
|
<div class="template-list" id="templateList">
|
|
<!-- 模板列表将通过 JavaScript 动态生成 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 参数配置区域 -->
|
|
<div class="form-section">
|
|
<div class="section-title">⚙️ 参数配置</div>
|
|
|
|
<!-- 基础设置 -->
|
|
<div class="form-group">
|
|
<h4>📁 文件设置</h4>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="input_file">输入文件</label>
|
|
<input type="text" id="input_file" value="input.mp4" placeholder="输入文件路径">
|
|
</div>
|
|
<div class="field">
|
|
<label for="output_file">输出文件</label>
|
|
<input type="text" id="output_file" value="output.mp4" placeholder="输出文件路径">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="processing_mode">处理模式</label>
|
|
<select id="processing_mode">
|
|
<option value="single">单阶段处理</option>
|
|
<option value="two_pass">两阶段处理 (真实 Topaz)</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="rate_control">率控制模式</label>
|
|
<select id="rate_control">
|
|
<option value="constqp">恒定 QP (推荐)</option>
|
|
<option value="cbr">恒定比特率</option>
|
|
<option value="vbr">可变比特率</option>
|
|
<option value="crf">CRF</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 防抖设置 -->
|
|
<div class="form-group">
|
|
<h4>🎯 防抖设置 <span class="usage-indicator usage-high">100% 使用率</span></h4>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="stabilize_active" checked>
|
|
<label for="stabilize_active">启用防抖</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="stabilize_smooth">平滑级别 (0-100)</label>
|
|
<input type="number" id="stabilize_smooth" min="0" max="100" value="50">
|
|
</div>
|
|
<div class="field">
|
|
<label for="stabilize_method">防抖方法</label>
|
|
<select id="stabilize_method">
|
|
<option value="0">自动裁剪</option>
|
|
<option value="1" selected>无裁剪</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="stabilize_reduce_motion">减少运动</label>
|
|
<input type="number" id="stabilize_reduce_motion" min="0" max="10" value="2">
|
|
</div>
|
|
<div class="field">
|
|
<label for="stabilize_reduce_motion_iteration">减少运动迭代</label>
|
|
<input type="number" id="stabilize_reduce_motion_iteration" min="1" max="10" value="2">
|
|
</div>
|
|
</div>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="stabilize_rsc">
|
|
<label for="stabilize_rsc">滚动快门校正</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 运动模糊设置 -->
|
|
<div class="form-group">
|
|
<h4>🌀 运动模糊设置 <span class="usage-indicator usage-high">100% 使用率</span></h4>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="motionblur_active">
|
|
<label for="motionblur_active">启用运动模糊处理</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="motionblur_model">运动模糊模型</label>
|
|
<select id="motionblur_model">
|
|
<option value="thm-1">thm-1</option>
|
|
<option value="thm-2" selected>thm-2</option>
|
|
<option value="thm-3">thm-3</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="motionblur_model_name">备用模型名称</label>
|
|
<input type="text" id="motionblur_model_name" value="thm-2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 慢动作设置 -->
|
|
<div class="form-group">
|
|
<h4>🐌 慢动作设置 <span class="usage-indicator usage-high">100% 使用率</span></h4>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="slowmo_active">
|
|
<label for="slowmo_active">启用慢动作</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="slowmo_model">插帧模型</label>
|
|
<select id="slowmo_model">
|
|
<option value="apo-6">apo-6</option>
|
|
<option value="apo-7">apo-7</option>
|
|
<option value="apo-8" selected>apo-8</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="slowmo_factor">慢动作倍数</label>
|
|
<input type="number" id="slowmo_factor" min="1" max="16" value="2">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="slowmo_duplicate_threshold">重复检测阈值</label>
|
|
<input type="number" id="slowmo_duplicate_threshold" min="0" max="100" value="10" step="0.01">
|
|
</div>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="slowmo_duplicate" checked>
|
|
<label for="slowmo_duplicate">复制帧</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 增强设置 -->
|
|
<div class="form-group">
|
|
<h4>✨ 增强设置 <span class="usage-indicator usage-medium">85% 使用率</span></h4>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="enhance_active" checked>
|
|
<label for="enhance_active">启用增强</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="enhance_model">AI 增强模型</label>
|
|
<select id="enhance_model">
|
|
<option value="alq-13" selected>alq-13</option>
|
|
<option value="prob-4">prob-4</option>
|
|
<option value="ghq-5">ghq-5</option>
|
|
<option value="rhea-1">rhea-1</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="enhance_video_type">视频类型</label>
|
|
<select id="enhance_video_type">
|
|
<option value="0">逐行</option>
|
|
<option value="1" selected>隔行</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="enhance_compress">压缩级别 (0-100)</label>
|
|
<input type="number" id="enhance_compress" min="0" max="100" value="0">
|
|
</div>
|
|
<div class="field">
|
|
<label for="enhance_detail">细节级别 (0-100)</label>
|
|
<input type="number" id="enhance_detail" min="0" max="100" value="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="enhance_sharpen">锐化级别 (0-100)</label>
|
|
<input type="number" id="enhance_sharpen" min="0" max="100" value="0">
|
|
</div>
|
|
<div class="field">
|
|
<label for="enhance_denoise">降噪级别 (0-100)</label>
|
|
<input type="number" id="enhance_denoise" min="0" max="100" value="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="enhance_dehalo">去光晕级别 (0-100)</label>
|
|
<input type="number" id="enhance_dehalo" min="0" max="100" value="0">
|
|
</div>
|
|
<div class="field">
|
|
<label for="enhance_deblur">去模糊级别 (0-100)</label>
|
|
<input type="number" id="enhance_deblur" min="0" max="100" value="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="enhance_auto">自动增强级别 (0-100)</label>
|
|
<input type="number" id="enhance_auto" min="0" max="100" value="0">
|
|
</div>
|
|
<div class="field">
|
|
<label for="enhance_recover_original_detail_value">恢复原始细节值</label>
|
|
<input type="number" id="enhance_recover_original_detail_value" min="0" max="100" value="20">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 颗粒设置 -->
|
|
<div class="form-group">
|
|
<h4>🌾 颗粒设置 <span class="usage-indicator usage-high">100% 使用率</span></h4>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="grain_active">
|
|
<label for="grain_active">启用颗粒</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="grain_grain">颗粒数量 (0-100)</label>
|
|
<input type="number" id="grain_grain" min="0" max="100" value="5">
|
|
</div>
|
|
<div class="field">
|
|
<label for="grain_grain_size">颗粒大小 (1-10)</label>
|
|
<input type="number" id="grain_grain_size" min="1" max="10" value="2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HDR 设置 -->
|
|
<div class="form-group">
|
|
<h4>🌈 HDR 设置 <span class="usage-indicator usage-high">100% 使用率</span></h4>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="hdr_active">
|
|
<label for="hdr_active">启用 HDR 处理</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="hdr_model">HDR 模型</label>
|
|
<select id="hdr_model">
|
|
<option value="hyp-1" selected>hyp-1</option>
|
|
<option value="hyp-2">hyp-2</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="hdr_auto">自动 HDR (0-100)</label>
|
|
<input type="number" id="hdr_auto" min="0" max="100" value="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="hdr_exposure">曝光调整 (0-100)</label>
|
|
<input type="number" id="hdr_exposure" min="0" max="100" value="0">
|
|
</div>
|
|
<div class="field">
|
|
<label for="hdr_saturation">饱和度调整 (0-100)</label>
|
|
<input type="number" id="hdr_saturation" min="0" max="100" value="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="hdr_sdr_inflection_point">SDR 拐点 (0.0-1.0)</label>
|
|
<input type="number" id="hdr_sdr_inflection_point" min="0" max="1" step="0.1" value="0.7">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 输出设置 -->
|
|
<div class="form-group">
|
|
<h4>📤 输出设置 <span class="usage-indicator usage-medium">57% 使用率</span></h4>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="output_active" checked>
|
|
<label for="output_active">启用输出设置</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="field">
|
|
<label for="output_out_size_method">输出尺寸方法</label>
|
|
<select id="output_out_size_method">
|
|
<option value="0">保持原始</option>
|
|
<option value="1">2x 放大</option>
|
|
<option value="2">3x 放大</option>
|
|
<option value="3">4x 放大</option>
|
|
<option value="7" selected>自定义</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="output_out_fps">输出帧率</label>
|
|
<input type="number" id="output_out_fps" min="0" max="120" value="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="output_crop_to_fit">
|
|
<label for="output_crop_to_fit">裁剪适应</label>
|
|
</div>
|
|
<div class="checkbox-field">
|
|
<input type="checkbox" id="output_lock_aspect_ratio" checked>
|
|
<label for="output_lock_aspect_ratio">锁定宽高比</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 输出区域 -->
|
|
<div class="output-section">
|
|
<div class="section-title" style="color: #e2e8f0;">🚀 生成的命令</div>
|
|
<button class="generate-btn" onclick="generateCommand()">生成 FFmpeg 命令</button>
|
|
<div id="output">
|
|
<div class="output-content">
|
|
点击"生成 FFmpeg 命令"按钮来生成基于当前参数的命令...
|
|
|
|
支持的功能：
|
|
• 单阶段/两阶段处理
|
|
• 完整的参数映射 (75% 使用率)
|
|
• 真实 Topaz 命令结构
|
|
• 高级编码选项
|
|
• HDR 处理流水线
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="video-processor.js"></script>
|
|
</body>
|
|
</html>
|