huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-04 12:55:38 +08:00
parent c57e47fe4b
commit f33c370da1
1 changed files with 102 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
dsLightRag/static/LibLib/copyface.html
View File

@@ -32,7 +32,7 @@
font-weight: bold;
color: #555;
}
input[type="url"], select {
input[type="url"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
@@ -113,6 +113,67 @@
border-radius: 5px;
margin: 10px 0;
}
/* 修改为横版模型卡片样式，一行显示3个 */
.model-cards {
display: flex;
gap: 20px;
margin: 20px 0;
flex-wrap: wrap;
justify-content: center;
}
.model-card {
border: 2px solid #ddd;
border-radius: 10px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: white;
width: calc(33.333% - 20px);
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);
}
.model-card.selected {
border-color: #007bff;
background-color: #e8f4fd;
}
.model-card img {
width: 100%;
height: 300px;
object-fit: cover;
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;
}
/* 响应式调整 */
@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;
}
}
</style>
</head>
<body>
@@ -126,10 +187,27 @@
</div>
<div class="form-group">
<label for="modelSelect">选择生成模型：</label>
<select id="modelSelect">
<option value="">加载中...</option>
</select>
<label>选择生成模型：</label>
<div class="model-cards" id="modelCards">
<div class="model-card" onclick="selectModel(this, '炫酷机甲美女_majicflus')">
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/Sample/JiJiaMeiNv.jpg"
alt="炫酷机甲美女" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'">
<h3>炫酷机甲美女</h3>
<p>majicflus模型</p>
</div>
<div class="model-card" onclick="selectModel(this, '可铯AI—3d潮玩手办')">
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/Sample/3DChaoWanShouBan.jpg"
alt="3D潮玩手办" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'">
<h3>3D潮玩手办</h3>
<p>可铯AI模型</p>
</div>
<div class="model-card" onclick="selectModel(this, 'F.1-武侠世界')">
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/Sample/WuXiaMeiNv.jpg"
alt="武侠世界" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'">
<h3>武侠世界</h3>
<p>F.1武侠风格</p>
</div>
</div>
</div>
<div class="image-preview" id="previewContainer">
@@ -139,7 +217,6 @@
</div>
<button onclick="generateImage()" id="generateBtn">生成换脸图片</button>
<button onclick="loadSamples()" id="refreshBtn">刷新模型列表</button>
<div class="loading" id="loading">
<div class="spinner"></div>
@@ -155,10 +232,15 @@
<script>
const API_BASE = '/api/copyface';
let selectedModel = '';
// 页面加载时获取可用模型
// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
loadSamples();
// 默认选择第一个模型
const firstCard = document.querySelector('.model-card');
if (firstCard) {
selectModel(firstCard, firstCard.getAttribute('onclick').split("'")[1]);
}
// 监听URL输入变化，实时预览
document.getElementById('imageUrl').addEventListener('input', function() {
@@ -173,48 +255,23 @@
});
});
// 加载可用模型样例
async function loadSamples() {
const select = document.getElementById('modelSelect');
const refreshBtn = document.getElementById('refreshBtn');
// 选择模型
function selectModel(card, modelName) {
// 移除所有选中状态
document.querySelectorAll('.model-card').forEach(card => {
card.classList.remove('selected');
});
refreshBtn.disabled = true;
refreshBtn.textContent = '加载中...';
// 添加选中状态
card.classList.add('selected');
selectedModel = modelName;
try {
const response = await fetch(`${API_BASE}/samples`);
if (!response.ok) {
throw new Error('获取模型列表失败');
}
const samples = await response.json();
// 清空并填充选项
select.innerHTML = '';
samples.forEach(sample => {
const option = document.createElement('option');
option.value = sample.name;
option.textContent = sample.name;
select.appendChild(option);
});
if (samples.length > 0) {
select.value = samples[0].name;
}
} catch (error) {
console.error('加载模型失败:', error);
select.innerHTML = '<option value="">加载失败，点击刷新</option>';
} finally {
refreshBtn.disabled = false;
refreshBtn.textContent = '刷新模型列表';
}
console.log('已选择模型:', selectedModel);
}
// 生成换脸图片
async function generateImage() {
const imageUrl = document.getElementById('imageUrl').value.trim();
const modelName = document.getElementById('modelSelect').value;
const generateBtn = document.getElementById('generateBtn');
const loading = document.getElementById('loading');
const resultContainer = document.getElementById('resultContainer');
@@ -227,7 +284,7 @@
return;
}
if (!modelName) {
if (!selectedModel) {
alert('请选择生成模型');
return;
}
@@ -238,10 +295,7 @@
resultContainer.style.display = 'none';
try {
let apiUrl = `${API_BASE}/generate`;
if (modelName) {
apiUrl = `${API_BASE}/generate/${encodeURIComponent(modelName)}`;
}
const apiUrl = `${API_BASE}/generate/${encodeURIComponent(selectedModel)}`;
const response = await fetch(apiUrl, {
method: 'POST',