size: '768x512',
steps: 40,
cfg_scale: 8.0,
image_url: '',
created_at: '2026-03-22T11:45:00Z'
},
{
id: '3',
prompt: '奇幻森林中的精灵公主，水彩风格，梦幻色彩',
style: 'watercolor',
size: '512x768',
steps: 35,
cfg_scale: 6.5,
image_url: '',
created_at: '2026-03-21T16:20:00Z'
}
];
updateHistoryGrid(mockHistory);
document.getElementById('history-empty').style.display = 'none';
}
// 加载模型统计
async function loadModelStats() {
try {
// 调用API获取模型统计
const response = await window.AnimForgeAPI.generate.getStats();
if (response.success) {
updateModelStats(response.stats);
} else {
useMockStats();
}
} catch (error) {
console.error('加载模型统计失败:', error);
useMockStats();
}
}
// 更新模型统计
function updateModelStats(stats) {
if (stats.total_generations !== undefined) {
document.getElementById('total-generations').textContent = stats.total_generations.toLocaleString();
}
if (stats.success_rate !== undefined) {
document.getElementById('success-rate').textContent = stats.success_rate + '%';
}
if (stats.avg_time !== undefined) {
document.getElementById('avg-time').textContent = stats.avg_time + 's';
}
}
// 使用模拟统计
function useMockStats() {
document.getElementById('total-generations').textContent = '1,247';
document.getElementById('success-rate').textContent = '98.5%';
document.getElementById('avg-time').textContent = '12.3s';
}
// 初始化参数调节
function initParameterControls() {
// 步数滑块
const stepsSlider = document.getElementById('steps-slider');
const stepsValue = document.getElementById('steps-value');
stepsSlider.addEventListener('input', function() {
stepsValue.textContent = this.value;
});
// CFG滑块
const cfgSlider = document.getElementById('cfg-slider');
const cfgValue = document.getElementById('cfg-value');
cfgSlider.addEventListener('input', function() {
cfgValue.textContent = this.value;
});
// 风格选择
const styleOptions = document.querySelectorAll('.style-option');
styleOptions.forEach(option => {
option.addEventListener('click', function() {
styleOptions.forEach(opt => opt.classList.remove('selected'));
this.classList.add('selected');
});
});
// 尺寸选择
const sizeOptions = document.querySelectorAll('.size-option');
sizeOptions.forEach(option => {
option.addEventListener('click', function() {
sizeOptions.forEach(opt => opt.classList.remove('selected'));
this.classList.add('selected');
});
});
}
// 初始化事件监听
function initEventListeners() {
// 生成按钮
const generateBtn = document.getElementById('generate-btn');
if (generateBtn) {
generateBtn.addEventListener('click', handleGenerate);
}
// 保存按钮
const saveBtn = document.getElementById('save-btn');
if (saveBtn) {
saveBtn.addEventListener('click', handleSave);
}
// 重新生成按钮
const regenerateBtn = document.getElementById('regenerate-btn');
if (regenerateBtn) {
regenerateBtn.addEventListener('click', handleRegenerate);
}
// 刷新历史按钮
const refreshBtn = document.getElementById('refresh-history-btn');
if (refreshBtn) {
refreshBtn.addEventListener('click', loadGenerationHistory);
}
// 导航链接
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const page = this.getAttribute('data-page');
navigateToPage(page);
});
});
}
// 处理AI生成
async function handleGenerate() {
const promptInput = document.getElementById('prompt-input');
const prompt = promptInput.value.trim();
if (!prompt) {
showMessage('请输入生成提示词', 'warning');
promptInput.focus();
return;
}
if (prompt.length < 5) {
showMessage('提示词太短，请详细描述', 'warning');
return;
}
// 获取当前参数
const selectedStyle = document.querySelector('.style-option.selected').dataset.style;
const selectedSize = document.querySelector('.size-option.selected').dataset.size;
const steps = parseInt(document.getElementById('steps-slider').value);
const cfgScale = parseFloat(document.getElementById('cfg-slider').value);
// 解析尺寸
const [width, height] = selectedSize.split('x').map(Number);
try {
// 显示加载状态
showLoadingState();
// 调用AI生成API
const response = await window.AnimForgeAPI.generate.text2img({
prompt: prompt,
style: selectedStyle,
width: width,
height: height,
steps: steps,
cfg_scale: cfgScale
});
if (response.success) {
// 显示生成结果
showGenerationResult(response.result);
// 添加到历史记录
addToHistory({
id: response.task_id,
prompt: prompt,
style: selectedStyle,
size: selectedSize,
steps: steps,
cfg_scale: cfgScale,
image_url: response.image_url,
created_at: new Date().toISOString()
});
showMessage('生成成功！', 'success');
} else {
throw new Error(response.message || '生成失败');
}
} catch (error) {
console.error('AI生成失败:', error);
showMessage(`生成失败: ${error.message}`, 'error');
} finally {
// 隐藏加载状态
hideLoadingState();
}
}
// 显示加载状态
function showLoadingState() {
const generateBtn = document.getElementById('generate-btn');
const previewLoading = document.getElementById('preview-loading');
const loadingText = document.getElementById('loading-text');
// 更新按钮状态
generateBtn.innerHTML = ' 生成中...';
generateBtn.disabled = true;
// 显示加载动画
previewLoading.style.display = 'flex';
// 更新加载文本
const messages = [
'AI正在构思创意...',
'绘制草图...',
'添加细节...',
'调整色彩...',
'最终渲染...'
];
let messageIndex = 0;
loadingText.textContent = messages[messageIndex];
// 轮换加载消息
const messageInterval = setInterval(() => {
messageIndex = (messageIndex + 1) % messages.length;
loadingText.textContent = messages[messageIndex];
}, 3000);
// 保存interval以便清理
window.loadingMessageInterval = messageInterval;
}
// 隐藏加载状态
function hideLoadingState() {
const generateBtn = document.getElementById('generate-btn');
const previewLoading = document.getElementById('preview-loading');
// 恢复按钮状态
generateBtn.innerHTML = '🤖开始生成';
generateBtn.disabled = false;
// 隐藏加载动画
previewLoading.style.display = 'none';
// 清理消息轮换
if (window.loadingMessageInterval) {
clearInterval(window.loadingMessageInterval);
window.loadingMessageInterval = null;
}
}
// 显示生成结果
function showGenerationResult(result) {
const previewImage = document.getElementById('preview-image');
const previewPlaceholder = document.getElementById('preview-placeholder');
const previewActions = document.getElementById('preview-actions');
if (result.image_url) {
// 预加载图片
const img = new Image();
img.onload = function() {
previewImage.src = result.image_url;
previewImage.style.display = 'block';
previewPlaceholder.style.display = 'none';
previewActions.style.display = 'flex';
};
img.onerror = function() {
showMessage('图片加载失败', 'error');
};
img.src = result.image_url;
} else {
// 如果没有图片URL，显示占位符
previewPlaceholder.innerHTML = `
✅
生成完成！任务ID: ${result.task_id}
`;
previewPlaceholder.style.display = 'block';
previewImage.style.display = 'none';
previewActions.style.display = 'flex';
}
// 保存当前生成结果
window.currentGeneration = result;
}
// 添加到历史记录
function addToHistory(item) {
const historyGrid = document.getElementById('history-grid');
const historyEmpty = document.getElementById('history-empty');
// 创建历史项
const historyItem = createHistoryItem(item);
// 添加到网格开头
historyGrid.insertBefore(historyItem, historyGrid.firstChild);
// 隐藏空状态
historyEmpty.style.display = 'none';
// 限制历史记录数量
const maxItems = 12;
const items = historyGrid.querySelectorAll('.history-item');
if (items.length > maxItems) {
for (let i = maxItems; i < items.length; i++) {
items[i].remove();
}
}
// 更新模型统计
updateGenerationStats();
}
// 更新生成统计
function updateGenerationStats() {
const totalEl = document.getElementById('total-generations');
const current = parseInt(totalEl.textContent.replace(/,/g, '')) || 0;
totalEl.textContent = (current + 1).toLocaleString();
}
// 处理保存
async function handleSave() {
if (!window.currentGeneration) {
showMessage('没有可保存的生成结果', 'warning');
return;
}
try {
const saveBtn = document.getElementById('save-btn');
const originalText = saveBtn.innerHTML;
saveBtn.innerHTML = ' 保存中...';
saveBtn.disabled = true;
// 获取当前提示词
const prompt = document.getElementById('prompt-input').value.trim();
// 调用保存API
const response = await window.AnimForgeAPI.asset.saveFromGeneration({
task_id: window.currentGeneration.task_id,
name: prompt.substring(0, 50) || 'AI生成作品',
description: prompt,
tags: ['ai-generated', 'anime']
});
if (response.success) {
showMessage('保存成功！已添加到资产库', 'success');
} else {
throw new Error(response.message || '保存失败');
}
} catch (error) {
console.error('保存失败:', error);
showMessage(`保存失败: ${error.message}`, 'error');
} finally {
const saveBtn = document.getElementById('save-btn');
if (saveBtn) {
saveBtn.innerHTML = '💾保存到资产库';
saveBtn.disabled = false;
}
}
}
// 处理重新生成
function handleRegenerate() {
// 使用相同的参数重新生成
handleGenerate();
}
// 页面导航
function navigateToPage(page) {
switch (page) {
case 'dashboard':
window.location.href = 'dashboard.html';
break;
case 'library':
window.location.href = 'asset-library.html';
break;
case 'generate':
window.location.href = 'ai-test.html';
break;
case 'team':
window.location.href = 'team-collaboration.html';
break;
case 'projects':
window.location.href = 'projects-complete.html';
break;
case 'settings':
window.location.href = 'account-settings.html';
break;
}
}
// 显示消息
function showMessage(message, type = 'info') {
// 创建消息元素
const messageEl = document.createElement('div');
messageEl.className = `message-${type}`;
messageEl.textContent = message;
messageEl.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 16px 24px;
background: ${type === 'success' ? '#4CAF50' : type === 'error' ? '#F44336' : type === 'warning' ? '#FFC107' : '#2196F3'};
color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 9999;
animation: slideIn 0.3s ease;
`;
// 添加到页面
document.body.appendChild(messageEl);
// 3秒后自动移除
setTimeout(() => {
messageEl.style.animation = 'slideOut 0.3s ease';
setTimeout(() => {
if (messageEl.parentNode) {
messageEl.parentNode.removeChild(messageEl);
}
}, 300);
}, 3000);
// 添加CSS动画
if (!document.querySelector('#message-animations')) {
const style = document.createElement('style');
style.id = 'message-animations';
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
`;
document.head.appendChild(style);
}
}
// 页面可见性变化处理
document.addEventListener('visibilitychange', function() {
if (!document.hidden) {
// 页面重新可见时刷新数据
loadGenerationHistory();
loadModelStats();
}
});
// 定期刷新数据（每2分钟）
setInterval(() => {
if (!document.hidden) {
loadGenerationHistory();
}
}, 2 * 60 * 1000);
// 初始化完成
console.log('AI测试页面初始化完成');