手机商城网站案例,怎么下载浏览器上的视频,面试建设单位在哪个网站,广州万户网络技术有限公司招聘AI图片生成器前端实现详解本文详细解析一个功能完整的AI图片生成器前端实现#xff0c;包含主题切换、参数配置、图片生成与预览等核心功能。项目概述
这是一个基于ModelScope平台的AI图片生成器前端实现#xff0c;用户可以通过输入提示词、选择模型和调整参数来生成高质量图…AI图片生成器前端实现详解本文详细解析一个功能完整的AI图片生成器前端实现包含主题切换、参数配置、图片生成与预览等核心功能。项目概述
这是一个基于ModelScope平台的AI图片生成器前端实现用户可以通过输入提示词、选择模型和调整参数来生成高质量图片。该应用具有响应式设计、暗黑/明亮模式切换、图片预览和下载等完整功能。
下面是完整的实现代码
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAI 图片生成器/titlestyle:root {--bg-color: #f5f7fa;--text-color: #333;--panel-bg: #ffffff;--border-color: #e1e4e8;--primary-color: #4a6bdf;--secondary-color: #f0f2f5;--button-hover: #3a5bd9;--input-bg: #ffffff;--progress-bg: #e0e0e0;--image-bg: #f0f0f0;--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);--transition: all 0.3s ease;}.dark-mode {--bg-color: #1a1a1a;--text-color: #e0e0e0;--panel-bg: #2d2d2d;--border-color: #444;--primary-color: #5d7eff;--secondary-color: #3a3a3a;--button-hover: #4a6bdf;--input-bg: #3a3a3a;--progress-bg: #444;--image-bg: #2a2a2a;--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}* {box-sizing: border-box;margin: 0;padding: 0;font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;}body {background-color: var(--bg-color);color: var(--text-color);transition: var(--transition);line-height: 1.6;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;display: flex;flex-direction: column;min-height: 100vh;}header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding-bottom: 15px;border-bottom: 1px solid var(--border-color);}h1 {font-size: 28px;color: var(--primary-color);font-weight: 700;letter-spacing: 0.5px;}.theme-toggle {background: var(--secondary-color);border: none;padding: 8px 15px;border-radius: 30px;cursor: pointer;color: var(--text-color);display: flex;align-items: center;gap: 8px;transition: var(--transition);font-weight: 500;box-shadow: var(--box-shadow);}.theme-toggle:hover {background: var(--border-color);transform: translateY(-2px);}.main-content {display: flex;gap: 25px;flex: 1;}.panel {background: var(--panel-bg);border-radius: 12px;padding: 25px;box-shadow: var(--box-shadow);border: 1px solid var(--border-color);transition: var(--transition);}.params-panel {flex: 0 0 400px;display: flex;flex-direction: column;}.preview-panel {flex: 1;display: flex;flex-direction: column;}.panel-title {font-size: 20px;margin-bottom: 20px;color: var(--primary-color);font-weight: 600;position: relative;padding-bottom: 10px;}.panel-title::after {content: ;position: absolute;bottom: 0;left: 0;width: 50px;height: 3px;background: var(--primary-color);border-radius: 3px;}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;font-weight: 500;color: var(--text-color);}input, select, textarea {width: 100%;padding: 12px;border: 1px solid var(--border-color);border-radius: 8px;background: var(--input-bg);color: var(--text-color);font-size: 14px;transition: var(--transition);}input:focus, select:focus, textarea:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(74, 107, 223, 0.2);}textarea {min-height: 120px;resize: vertical;}.advanced-params {margin-top: 20px;padding-top: 20px;border-top: 1px solid var(--border-color);}.param-row {display: flex;gap: 15px;margin-bottom: 15px;}.param-item {flex: 1;}button {background: var(--primary-color);color: white;border: none;padding: 12px 20px;border-radius: 8px;cursor: pointer;font-weight: 500;transition: var(--transition);box-shadow: var(--box-shadow);}button:hover {background: var(--button-hover);transform: translateY(-2px);}button:active {transform: translateY(0);}button:disabled {background: #cccccc;cursor: not-allowed;transform: none;}.status-area {margin-top: 20px;padding: 15px;background: var(--secondary-color);border-radius: 8px;min-height: 20px;font-size: 14px;border-left: 4px solid var(--primary-color);}.progress-container {margin-top: 20px;}progress {width: 100%;height: 10px;border-radius: 5px;background: var(--progress-bg);border: none;}progress::-webkit-progress-bar {background: var(--progress-bg);border-radius: 5px;}progress::-webkit-progress-value {background: var(--primary-color);border-radius: 5px;transition: width 0.3s ease;}progress::-moz-progress-bar {background: var(--primary-color);border-radius: 5px;}.preview-container {flex: 1;display: flex;justify-content: center;align-items: center;background: var(--image-bg);border-radius: 12px;overflow: hidden;position: relative;transition: var(--transition);cursor: pointer;}.preview-container:hover {box-shadow: 0 0 0 2px var(--primary-color);}.preview-image {max-width: 100%;max-height: 100%;object-fit: contain;display: none;transition: var(--transition);}.preview-placeholder {text-align: center;padding: 30px;color: var(--text-color);opacity: 0.7;font-size: 16px;}.time-info {margin-top: 15px;font-size: 14px;color: var(--primary-color);font-weight: 500;text-align: center;}.action-buttons {display: flex;gap: 15px;margin-top: 20px;}.secondary-button {background: var(--secondary-color);color: var(--text-color);}.secondary-button:hover {background: var(--border-color);}/* 图片放大模态框样式 */.modal {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);overflow: auto;opacity: 0;transition: opacity 0.3s ease;}.modal.show {display: flex;justify-content: center;align-items: center;opacity: 1;}.modal-content {max-width: 90%;max-height: 90%;object-fit: contain;animation: zoomIn 0.3s ease;}.close-modal {position: absolute;top: 20px;right: 30px;color: white;font-size: 35px;font-weight: bold;cursor: pointer;transition: transform 0.2s ease;}.close-modal:hover {transform: rotate(90deg);}keyframes zoomIn {from {transform: scale(0.8);opacity: 0;}to {transform: scale(1);opacity: 1;}}/* 加载动画 */.loader {display: none;width: 48px;height: 48px;margin: 20px auto;border: 5px solid rgba(74, 107, 223, 0.2);border-radius: 50%;border-top-color: var(--primary-color);animation: spin 1s ease-in-out infinite;}keyframes spin {to {transform: rotate(360deg);}}media (max-width: 768px) {.main-content {flex-direction: column;}.params-panel {flex: 1;}header {flex-direction: column;gap: 15px;align-items: flex-start;}.action-buttons {flex-direction: column;}}/style
/head
body
div classcontainerheaderh1AI 图片生成器/h1button classtheme-toggle idthemeTogglespan idthemeIcon/span span idthemeText暗夜模式/span/button/headerdiv classmain-contentdiv classpanel params-panelh2 classpanel-title生成参数/h2div classaction-buttonsbutton idgenerateBtn生成图片/buttonbutton iddownloadBtn classsecondary-button disabled下载图片/button/divdiv classstatus-area idstatusArea就绪/divdiv classtime-info idtimeInfo/divdiv classprogress-containerprogress idprogressBar value0 max100 styledisplay: none;/progressdiv classloader idloader/div/divdiv classform-grouplabel formodel模型选择/labelselect idmodeloption valueQwen/Qwen-ImageQwen/Qwen-Image/optionoption valueLiudef/XB_F.1_MIXLiudef/XB_F.1_MIX/optionoption valueLiudef/XB_PONYLiudef/XB_PONY/optionoption valueLiudef/XB_IllustriousLiudef/XB_Illustrious/optionoption valueLiudef/XB_QWEN_ANIYA_FACE6_CLiudef/XB_QWEN_ANIYA_FACE6_C/optionoption valueLiudef/XB_F.1_ANIYA_FACE6_BLiudef/XB_F.1_ANIYA_FACE6_B/optionoption valueLiudef/XB_F.1_FACE_3Liudef/XB_F.1_FACE_3/optionoption valueLiudef/XB_F.1_MDLiudef/XB_F.1_MD/option/select/divdiv classform-grouplabel forprompt正向提示词/labeltextarea idprompt placeholder请输入详细的描述词以获得更好的效果...一只棕色的猫/textarea/divdiv classform-grouplabel fornegativePrompt负向提示词 (可选)/labeltextarea idnegativePrompt placeholder请输入不希望出现在图片中的内容...lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry/textarea/divdiv classadvanced-paramsh3 classpanel-title高级参数/h3div classparam-rowdiv classparam-itemlabel forwidth宽度/labelinput typenumber idwidth min64 max2048 step64 value1024/divdiv classparam-itemlabel forheight高度/labelinput typenumber idheight min64 max2048 step64 value1024/div/divdiv classparam-rowdiv classparam-itemlabel forsteps采样步数/labelinput typenumber idsteps min1 max100 value30/divdiv classparam-itemlabel forguidance引导系数/labelinput typenumber idguidance min1.5 max20 step0.1 value3.5/div/div/div
