开发基于图片素材生成视频的webui功能

2025-12-04 11:14:14 +08:00
parent ea784e0d06
commit 7425b9d23d
8 changed files with 896 additions and 104 deletions
--- a/templates/1080x1920/image_pure.html
+++ b/templates/1080x1920/image_pure.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="template:media-width" content="1024">
+    <meta name="template:media-height" content="1024">
+    <style>
+        html {
+            margin: 0;
+            padding: 0;
+        }
+        
+        body {
+            margin: 0;
+            padding: 0;
+            width: 1080px;
+            height: 1920px;
+            font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
+            background: #000;
+            overflow: hidden;
+        }
+        
+        .page-container {
+            width: 1080px;
+            height: 1920px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* 1. Background Image Layer (垫底图片) */
+        .background-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }
+
+        .background-layer img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            display: block;
+        }
+
+        /* 2. Gradient Overlay (渐变遮罩) 
+           Ensures text readability regardless of image brightness
+           Top: Darker for Title
+           Middle: Transparent for Image visibility
+           Bottom: Darker for Subtitles
+        */
+        .gradient-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            background: linear-gradient(
+                to bottom,
+                rgba(0,0,0,0.6) 0%,
+                rgba(0,0,0,0.1) 25%,
+                rgba(0,0,0,0.1) 60%,
+                rgba(0,0,0,0.8) 100%
+            );
+        }
+
+        /* 3. Content Layer (内容层) */
+        .content-layer {
+            position: relative;
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            padding: 120px 80px 0px 80px; /* Top, Right, Bottom, Left */
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            color: #ffffff;
+        }
+
+        /* Title Styling */
+        .video-title {
+            font-size: 80px;
+            font-weight: 700;
+            line-height: 1.2;
+            text-shadow: 0 4px 12px rgba(0,0,0,0.5);
+            margin-bottom: 40px;
+            text-align: center;
+        }
+
+        /* Hide title when empty */
+        .video-title:empty {
+            display: none;
+        }
+
+        /* Flex spacer to push subtitle to bottom */
+        .spacer {
+            flex-grow: 1;
+        }
+
+        /* Narration/Subtitle Styling */
+        .subtitle-wrapper {
+            margin-bottom: 60px;
+        }
+
+        .text {
+            font-size: 52px;
+            font-weight: 500;
+            line-height: 1.6;
+            text-align: center;
+            text-shadow: 0 2px 8px rgba(0,0,0,0.6);
+            backdrop-filter: blur(4px);
+        }
+    </style>
+</head>
+<body>
+    <div class="page-container">
+        <!-- Background Image -->
+        <div class="background-layer">
+            <img src="{{image}}" alt="Background">
+        </div>
+
+        <!-- Shadow Overlay for Text Readability -->
+        <div class="gradient-overlay"></div>
+
+        <!-- Main Content -->
+        <div class="content-layer">
+            <!-- Top Section: Title -->
+            <div class="video-title">
+                {{title}}
+            </div>
+
+            <!-- Spacer pushes content apart -->
+            <div class="spacer"></div>
+
+            <!-- Bottom Section: Narration/Text -->
+            <div class="subtitle-wrapper">
+                <div class="text">{{text}}</div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>