yichael
/
AnimationManager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI生图</title>
    <link rel="stylesheet" href="../../css/ai-generate/ai-generate-view.css">
</head>
<body>
    <!-- 黑色背景遮罩 -->
    <div class="ai-generate-overlay" id="aiGenerateOverlay">
        <!-- 弹出框容器 -->
        <div class="ai-generate-modal" id="aiGenerateModal">
            <!-- 关闭按钮（在弹窗右上角） -->
            <button class="modal-close-btn" id="aiGenerateCancelBtn" title="关闭">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </button>
            
            <!-- 图片预览区域 - 左右两个图框 -->
            <div class="ai-generate-preview-container">
                <!-- 左侧：参考图上传 -->
                <div class="ai-generate-reference-section">
                    <div class="ai-generate-preview-box ai-generate-reference-box" id="referenceBox">
                        <input type="file" id="referenceInput" accept="image/*" style="display: none;">
                        <div class="reference-upload-area" id="referenceUploadArea">
                            <div class="upload-icon">+</div>
                        </div>
                        <div class="reference-image-wrapper" id="referenceImageWrapper" style="display: none;">
                            <img id="referenceImage" alt="参考图" class="reference-image" />
                            <button class="reference-remove-btn" id="referenceRemoveBtn" title="更换参考图">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧：Spritesheet 预览 -->
                <div class="ai-generate-spritesheet-section">
                    <div class="ai-generate-preview-box ai-generate-spritesheet-box" id="spritesheetBox">
                        <img id="previewImage" alt="Spritesheet预览" />
                        <div class="preview-placeholder" id="previewPlaceholder">
                            <div class="loading-spinner"></div>
                            <div class="loading-text">正在生成预览图...</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- AI生图队列区域 -->
            <div class="ai-queue-section" id="aiQueueSection" style="display: none;">
                <div class="ai-queue-title">生图队列</div>
                <div class="ai-queue-list" id="aiQueueList"></div>
            </div>
            
            <!-- 提示词配置区域 -->
            <div class="prompt-config-section" id="promptConfigSection" style="display: none;">
                <div class="config-row">
                    <textarea id="additionalPromptInput" class="config-textarea" placeholder="输入额外的提示词指令..."></textarea>
                </div>
                <!-- 操作按钮区域 -->
                <div class="prompt-actions">
                    <button class="action-btn generate-action-btn" id="generateBtn" title="AI生图">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10 2L12 6H8L10 2Z" fill="currentColor"/>
                            <path d="M2 10L6 8V12L2 10Z" fill="currentColor"/>
                            <path d="M10 18L8 14H12L10 18Z" fill="currentColor"/>
                            <path d="M18 10L14 8V12L18 10Z" fill="currentColor"/>
                            <circle cx="10" cy="10" r="2" fill="currentColor"/>
                        </svg>
                        <span>AI生图</span>
                        <span class="btn-price" id="aiGeneratePrice">-</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="../../js/ai-generate/ai-generate-view.js"></script>
</body>
</html>