diff --git a/dsLightRag/static/LibLib/copyface.html b/dsLightRag/static/LibLib/copyface.html index ce77abe3..b5df03fa 100644 --- a/dsLightRag/static/LibLib/copyface.html +++ b/dsLightRag/static/LibLib/copyface.html @@ -12,26 +12,31 @@ padding: 20px; background-color: #f5f5f5; } + .container { background: white; padding: 30px; border-radius: 10px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } + h1 { color: #333; text-align: center; margin-bottom: 30px; } + .form-group { margin-bottom: 20px; } + label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } + input[type="url"] { width: 100%; padding: 10px; @@ -39,6 +44,7 @@ border-radius: 5px; font-size: 14px; } + button { background-color: #007bff; color: white; @@ -49,23 +55,28 @@ font-size: 16px; margin-right: 10px; } + button:hover { background-color: #0056b3; } + button:disabled { background-color: #6c757d; cursor: not-allowed; } + .image-preview { margin-top: 20px; text-align: center; } + .image-preview img { max-width: 300px; max-height: 300px; border: 2px solid #ddd; border-radius: 5px; } + .result { margin-top: 30px; padding: 20px; @@ -73,17 +84,20 @@ border-radius: 5px; border-left: 4px solid #007bff; } + .result img { max-width: 100%; max-height: 400px; border: 2px solid #28a745; border-radius: 5px; } + .loading { display: none; text-align: center; margin: 20px 0; } + .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #007bff; @@ -93,10 +107,16 @@ animation: spin 1s linear infinite; margin: 0 auto; } + @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } + .error { color: #dc3545; background-color: #f8d7da; @@ -105,6 +125,7 @@ border-radius: 5px; margin: 10px 0; } + .success { color: #155724; background-color: #d4edda; @@ -113,6 +134,7 @@ border-radius: 5px; margin: 10px 0; } + /* 修改为横版模型卡片样式,一行显示3个 */ .model-cards { display: flex; @@ -121,6 +143,7 @@ flex-wrap: wrap; justify-content: center; } + .model-card { border: 2px solid #ddd; border-radius: 10px; @@ -133,15 +156,18 @@ box-sizing: border-box; min-width: 280px; } + .model-card:hover { border-color: #007bff; transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0,123,255,0.2); + box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2); } + .model-card.selected { border-color: #007bff; background-color: #e8f4fd; } + .model-card img { width: 100%; height: 300px; @@ -149,16 +175,19 @@ border-radius: 8px; margin-bottom: 10px; } + .model-card h3 { margin: 10px 0 5px; color: #333; font-size: 16px; } + .model-card p { color: #666; font-size: 14px; margin: 0; } + /* 新增:图片模态框样式 */ .modal { display: none; @@ -172,10 +201,12 @@ justify-content: center; align-items: center; } + .modal-content { max-width: 90%; max-height: 90%; } + .close-modal { position: absolute; top: 20px; @@ -185,20 +216,58 @@ font-weight: bold; cursor: pointer; } + .close-modal:hover { color: #ccc; } + /* 新增:生成历史样式 */ + .history-section { + margin-top: 40px; + padding-top: 20px; + border-top: 1px solid #eee; + } + .history-title { + color: #333; + margin-bottom: 15px; + font-size: 18px; + font-weight: bold; + } + .history-images { + display: flex; + flex-wrap: wrap; + gap: 15px; + justify-content: center; + } + .history-image-item { + width: calc(20% - 15px); + min-width: 120px; + cursor: pointer; + } + .history-image-item img { + width: 100%; + height: 250px; /* 修改为竖版高度 */ + object-fit: cover; + border-radius: 8px; + border: 2px solid #ddd; + transition: all 0.3s ease; + } + .history-image-item img:hover { + border-color: #007bff; + transform: scale(1.05); + } /* 响应式调整 */ @media (max-width: 992px) { .model-card { width: calc(50% - 15px); } } + @media (max-width: 768px) { .model-card { width: 100%; min-width: auto; } + .model-card img { height: 250px; } @@ -206,206 +275,237 @@ -
-

🎭 人像换脸生成器

- -
- - -
+
+

🎭 人像换脸生成器

-
- -
-
- 炫酷机甲美女 -

炫酷机甲美女

-

majicflus模型

-
-
- 3D潮玩手办 -

3D潮玩手办

-

可铯AI模型

-
-
- 武侠世界 -

武侠世界

-

F.1武侠风格

-
+ +
+ +
+
+ 炫酷机甲美女 +

炫酷机甲美女

+

majicflus模型

+
+
+ 3D潮玩手办 +

3D潮玩手办

+

可铯AI模型

+
+
+ 武侠世界 +

武侠世界

+

F.1武侠风格

+
+
+ + +
+
+

参考图片预览:

+ 参考图片预览 +
-
-

参考图片预览:

- 参考图片预览 -
+ - +
+
+

正在生成中,请稍候...

+
-
-
-

正在生成中,请稍候...

-
+ -