鍥剧墖鐢熸垚宸ヤ綔鍙?/title> <style> :root { --bg: #eef3fb; --panel: rgba(255, 255, 255, 0.94); --panel-strong: #ffffff; --line: #dbe4f0; --text: #122033; --muted: #62738a; --primary: #2457ff; --primary-2: #6d36ff; --green: #10905d; --danger: #d63a55; --soft: #f4f7fc; --shadow: 0 22px 48px rgba(18, 32, 51, 0.1); --radius: 22px; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { color: var(--text); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; background: radial-gradient(circle at top left, rgba(36, 87, 255, 0.18), transparent 28%), radial-gradient(circle at top right, rgba(109, 54, 255, 0.15), transparent 28%), linear-gradient(180deg, #f7faff 0%, #edf2f9 100%); } button, input, select, textarea { font: inherit; } .hidden { display: none !important; } header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: rgba(245, 248, 255, 0.86); border-bottom: 1px solid rgba(219, 228, 240, 0.9); } .topbar { max-width: 1480px; margin: 0 auto; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 14px; } .logo { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 16px 34px rgba(36, 87, 255, 0.28); } .brand h1 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; } .brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; } .tabs { display: flex; gap: 8px; padding: 6px; border-radius: 18px; background: rgba(227, 235, 250, 0.9); border: 1px solid #d9e2f0; } .tab-btn { min-width: 132px; padding: 12px 16px; border: 0; border-radius: 14px; background: transparent; color: #4d5d73; cursor: pointer; font-weight: 800; transition: 0.18s ease; } .tab-btn.active { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 12px 26px rgba(36, 87, 255, 0.25); } main { max-width: 1480px; margin: 0 auto; padding: 24px 22px 40px; } .page { display: block; } .generator-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; } .reverse-layout, .settings-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .panel-header { padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #ffffff, #f8fbff); } .panel-header h2 { margin: 0; font-size: 17px; } .panel-header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .panel-body { padding: 18px 20px 20px; } .sidebar { position: sticky; top: 92px; display: grid; gap: 18px; } .stack { display: grid; gap: 14px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 800; color: #32445d; } .required::after { content: " *"; color: var(--danger); } .optional-tag { margin-left: 6px; color: var(--muted); font-weight: 600; } input, select, textarea { width: 100%; padding: 11px 12px; border-radius: 14px; border: 1px solid #d5dfec; background: #fff; color: var(--text); outline: none; transition: 0.18s ease; } textarea { min-height: 88px; resize: vertical; line-height: 1.55; } input:focus, select:focus, textarea:focus { border-color: rgba(36, 87, 255, 0.65); box-shadow: 0 0 0 4px rgba(36, 87, 255, 0.1); } .mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); } .mode-switch input { display: none; } .mode-switch label { margin: 0; padding: 10px 8px; text-align: center; border-radius: 12px; color: #5d6f86; cursor: pointer; font-size: 13px; font-weight: 800; transition: 0.18s ease; } .mode-switch input:checked + label { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 12px 24px rgba(36, 87, 255, 0.2); } .ratio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ratio-btn { padding: 10px 8px; border-radius: 12px; border: 1px solid #d5dfec; background: #fff; color: #4e5f75; cursor: pointer; font-weight: 800; transition: 0.18s ease; } .ratio-btn.active { border-color: transparent; color: #fff; background: linear-gradient(135deg, #16243d, #35548f); box-shadow: 0 12px 22px rgba(22, 36, 61, 0.18); } .btn { min-height: 46px; padding: 11px 14px; border: 0; border-radius: 14px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; transition: 0.18s ease; } .btn:hover { transform: translateY(-1px); } .btn:disabled { opacity: 0.62; cursor: not-allowed; transform: none; } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 16px 28px rgba(36, 87, 255, 0.24); } .btn-green { color: #fff; background: linear-gradient(135deg, #10905d, #21b374); } .btn-light { color: #30435e; background: #f3f7fc; border: 1px solid var(--line); } .btn-soft { color: #2044cc; background: #eaf0ff; } .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .upload-box { position: relative; min-height: 160px; padding: 22px; border-radius: 18px; border: 2px dashed #cbd6e4; background: linear-gradient(180deg, #fbfdff, #f3f7fc); display: grid; place-items: center; text-align: center; color: var(--muted); cursor: pointer; transition: 0.18s ease; } .upload-box:hover { border-color: rgba(36, 87, 255, 0.55); background: #f8fbff; } .upload-box input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .upload-icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; display: grid; place-items: center; color: var(--primary); background: #eaf0ff; font-size: 28px; font-weight: 700; } .mini-help { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; } .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; } .thumb { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 12px; border: 1px solid var(--line); background: #eef3fa; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb button { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 0; border-radius: 999px; display: grid; place-items: center; background: rgba(18, 32, 51, 0.78); color: #fff; cursor: pointer; font-size: 13px; padding: 0; } .file-list { font-size: 12px; color: var(--muted); line-height: 1.55; } .notice, .status, .success, .errorbox { padding: 13px 14px; border-radius: 15px; font-size: 12px; line-height: 1.6; } .notice { color: #925e00; background: #fff8e8; border: 1px solid #f6d88c; } .status { color: var(--muted); background: #f8fbff; border: 1px solid var(--line); } .success { color: #15633d; background: #edfdf4; border: 1px solid #bdeed0; } .prompt-box { overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: #101a2e; color: #dce6ff; } .prompt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); } .prompt-toolbar strong { color: #fff; font-size: 13px; } .prompt-toolbar .toolbar-actions { display: flex; gap: 8px; } pre { margin: 0; padding: 16px; white-space: pre-wrap; word-break: break-word; line-height: 1.6; font-size: 12px; max-height: 360px; overflow: auto; } .result-column { display: grid; gap: 18px; } .hero-panel { background: linear-gradient(135deg, rgba(16, 26, 46, 0.98), rgba(34, 59, 115, 0.96)); color: #fff; border-radius: 26px; padding: 22px; box-shadow: 0 24px 52px rgba(16, 26, 46, 0.22); } .hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; } .hero-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; } .hero-head p { margin: 6px 0 0; color: rgba(227, 236, 255, 0.82); font-size: 13px; line-height: 1.6; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .pill { padding: 8px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; color: #dfe8ff; } .gallery-shell { background: var(--panel-strong); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; } .gallery-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #ffffff, #f8fbff); } .gallery-topbar h3 { margin: 0; font-size: 16px; } .gallery-topbar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; } .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px; } .history-shell { background: var(--panel-strong); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; } .history-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #ffffff, #f8fbff); } .history-topbar h3 { margin: 0; font-size: 16px; } .history-topbar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; } .history-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px; } .history-empty { padding: 26px 18px 30px; color: var(--muted); text-align: center; font-size: 13px; } .history-card { padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #ffffff, #f8fbff); box-shadow: 0 10px 24px rgba(18, 32, 51, 0.05); cursor: pointer; transition: 0.18s ease; } .history-card:hover { transform: translateY(-1px); border-color: #c8d7f0; box-shadow: 0 14px 28px rgba(18, 32, 51, 0.08); } .history-thumb { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 14px; border: 1px solid var(--line); background: #eef3fa; margin-bottom: 10px; } .history-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .history-meta strong { display: block; font-size: 13px; line-height: 1.45; color: #1d304b; margin-bottom: 6px; word-break: break-word; } .history-meta span { display: block; font-size: 11px; color: var(--muted); line-height: 1.55; } .image-card { overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: #fff; box-shadow: 0 12px 28px rgba(18, 32, 51, 0.06); } .image-card.featured { grid-column: span 2; } .image-preview { position: relative; min-height: 240px; display: grid; place-items: center; padding: 18px; text-align: center; color: #8693a6; background: linear-gradient(45deg, #f3f6fb 25%, transparent 25%), linear-gradient(-45deg, #f3f6fb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3f6fb 75%), linear-gradient(-45deg, transparent 75%, #f3f6fb 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; } .image-preview.idle { background: linear-gradient(180deg, #fbfdff, #f4f8fd); } .image-preview.loading { overflow: hidden; background: linear-gradient(180deg, #f7faff, #eef3fa); } .image-preview.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%); transform: translateX(-100%); animation: shimmer 1.5s ease-in-out infinite; } .preview-state { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; color: #7f8da3; } .preview-spinner { width: 42px; height: 42px; border: 3px solid rgba(36, 87, 255, 0.14); border-top-color: rgba(36, 87, 255, 0.86); border-radius: 999px; animation: spin 0.9s linear infinite; } .preview-state strong { font-size: 18px; color: #4c607d; } .preview-state span { font-size: 12px; color: #8b9ab0; } .preview-skeleton { position: absolute; inset: 24px; z-index: 0; display: grid; gap: 12px; align-content: end; opacity: 0.9; } .preview-skeleton i { display: block; height: 12px; border-radius: 999px; background: rgba(36, 87, 255, 0.08); } .preview-skeleton i:nth-child(1) { width: 72%; } .preview-skeleton i:nth-child(2) { width: 48%; } .preview-skeleton i:nth-child(3) { width: 58%; } .image-card.featured .image-preview { min-height: 440px; } .image-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; } .image-preview.clickable { cursor: zoom-in; } .image-preview.clickable::before { content: "鐐瑰嚮鏀惧ぇ"; position: absolute; top: 14px; right: 14px; z-index: 2; padding: 6px 10px; border-radius: 999px; background: rgba(16, 26, 46, 0.62); color: #fff; font-size: 11px; opacity: 0; transform: translateY(-4px); transition: 0.18s ease; pointer-events: none; } .image-preview.clickable:hover::before { opacity: 1; transform: translateY(0); } .image-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; border-top: 1px solid var(--line); } .image-meta strong { display: block; font-size: 14px; } .image-meta span { color: var(--muted); font-size: 11px; } .image-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .image-actions .btn { min-height: 36px; padding: 8px 12px; border-radius: 12px; font-size: 12px; } .result-box { min-height: 420px; padding: 18px; border-radius: 20px; background: #101a2e; color: #e4ecff; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow: auto; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 22px; background: rgba(10, 16, 30, 0.82); backdrop-filter: blur(8px); } .lightbox.hidden { display: none !important; } .lightbox-dialog { width: min(96vw, 1400px); max-height: 92vh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 24px; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 28px 56px rgba(0, 0, 0, 0.34); } .lightbox-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; color: #dce6ff; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .lightbox-title { font-size: 13px; line-height: 1.5; color: #dce6ff; word-break: break-word; } .lightbox-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .lightbox-stage { min-height: 0; overflow: auto; display: grid; place-items: center; padding: 18px; background: linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; } .lightbox-stage img { max-width: 100%; max-height: 80vh; object-fit: contain; display: block; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); } .loader { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 999px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { to { transform: translateX(100%); } } @media (max-width: 1180px) { .generator-layout, .reverse-layout, .settings-layout { grid-template-columns: 1fr; } .sidebar { position: static; } } @media (max-width: 760px) { .topbar, main { padding-left: 14px; padding-right: 14px; } .tabs { width: 100%; } .tab-btn { flex: 1; min-width: 0; } .two-col, .actions { grid-template-columns: 1fr; } .ratio-grid { grid-template-columns: repeat(3, 1fr); } .gallery { grid-template-columns: 1fr; } .history-list { grid-template-columns: 1fr; } .image-card.featured { grid-column: span 1; } .image-card.featured .image-preview { min-height: 300px; } } </style> </head> <body> <header> <div class="topbar"> <div class="brand"> <div class="logo">鍥?/div> <div> <h1>鍥剧墖鐢熸垚宸ヤ綔鍙?/h1> <p>鍥哄畾璋冪敤 Workers 鍦板潃锛屾敮鎸佹枃鐢熷浘銆佸浘鐢熷浘銆佸幓鑳屾櫙銆佸浘鐗囧弽鎺ㄦ彁绀鸿瘝</p> </div> </div> <nav class="tabs"> <button class="tab-btn active" data-page="generator" type="button">浜у搧鍥剧敓鎴?/button> <button class="tab-btn" data-page="reverse" type="button">鍥剧墖鍙嶆帹鎻愮ず璇?/button> <button class="tab-btn" data-page="settings" type="button">鍚庣鐘舵€?/button> </nav> </div> </header> <main> <section id="page-generator" class="page"> <div class="generator-layout"> <aside class="sidebar"> <section class="panel"> <div class="panel-header"> <h2>鐢熸垚渚ц竟鏍?/h2> <p>鍙渶瑕佸～浜у搧鍚嶇О锛屽叾瀹冧俊鎭兘鏄€夊～銆傚浘鐗囩粨鏋滃尯鏀惧湪鍙充晶浣滀负涓诲睍绀哄尯鍩熴€?/p> </div> <div class="panel-body stack"> <div> <label>鐢熸垚妯″紡</label> <div class="mode-switch"> <input id="modeText" type="radio" name="mode" value="text2image" checked> <label for="modeText">鏂囩敓鍥?/label> <input id="modeImage" type="radio" name="mode" value="image2image"> <label for="modeImage">鍥剧敓鍥?/label> <input id="modeRemove" type="radio" name="mode" value="remove_bg"> <label for="modeRemove">鍘昏儗鏅?/label> </div> </div> <div class="status" id="modeHint"><b>鎻愮ず锛?/b>鏂囩敓鍥炬ā寮忎笅鍙互鍙～浜у搧鍚嶇О鐩存帴鐢熸垚銆?/div> <div> <label class="required">浜у搧鍚嶇О</label> <input id="productName" placeholder="渚嬪锛欰luminum Alloy Car A/C Knob Trim Cover"> </div> <div> <label>浜у搧鎻忚堪<span class="optional-tag">閫夊～</span></label> <textarea id="productDesc" placeholder="绠€鐭弿杩颁骇鍝佺敤閫斻€佹潗璐ㄣ€侀鏍煎嵆鍙紝涓嶅～涔熻兘鐢熸垚銆?></textarea> </div> <div class="two-col"> <div> <label>骞冲彴瑙勫垯<span class="optional-tag">閫夊～</span></label> <select id="platform"> <option value="amazon">Amazon</option> <option value="aliexpress">AliExpress</option> <option value="alibaba">Alibaba International</option> <option value="ebay">eBay</option> <option value="general">閫氱敤鐢靛晢</option> </select> </div> <div> <label>杈撳嚭璇█<span class="optional-tag">閫夊～</span></label> <select id="outputLanguage"> <option value="English" selected>English</option> <option value="Chinese">涓枃</option> <option value="Bilingual">涓嫳鍙岃</option> </select> </div> </div> <div class="two-col"> <div> <label>鍥剧墖绫诲瀷<span class="optional-tag">閫夊～</span></label> <select id="imageSetType"> <option value="full_set" selected>涓诲浘 + 娴忚鍥?/option> <option value="main_only">鍙仛涓诲浘</option> <option value="detail_only">鍙仛娴忚鍥?/option> </select> </div> <div> <label>鍥剧墖鏁伴噺<span class="optional-tag">閫夊～</span></label> <select id="imageCount"> <option value="1">1 寮?/option> <option value="2" selected>2 寮?/option> <option value="3">3 寮?/option> <option value="4">4 寮?/option> </select> </div> </div> <div> <label>鐢婚潰姣斾緥</label> <div class="ratio-grid"> <button class="ratio-btn active" data-ratio="1:1" type="button">1:1</button> <button class="ratio-btn" data-ratio="4:3" type="button">4:3</button> <button class="ratio-btn" data-ratio="3:4" type="button">3:4</button> <button class="ratio-btn" data-ratio="16:9" type="button">16:9</button> <button class="ratio-btn" data-ratio="9:16" type="button">9:16</button> <button class="ratio-btn" data-ratio="3:2" type="button">3:2</button> <button class="ratio-btn" data-ratio="2:3" type="button">2:3</button> <button class="ratio-btn" data-ratio="auto" type="button">Auto</button> </div> </div> <div class="two-col"> <div> <label>鍒嗚鲸鐜?span class="optional-tag">閫夊～</span></label> <select id="resolution"> <option value="640x640">640 x 640</option> <option value="768x768" selected>768 x 768</option> <option value="960x960">960 x 960</option> <option value="1024x1024">1024 x 1024</option> <option value="1280x1280">1280 x 1280</option> <option value="1600x1600">1600 x 1600</option> <option value="2048x2048">2048 x 2048</option> <option value="2560x2560">2560 x 2560</option> <option value="3840x3840">3840 x 3840</option> <option value="4096x4096">4096 x 4096</option> <option value="auto">Auto</option> </select> </div> <div> <label>鑳屾櫙鑹?span class="optional-tag">閫夊～</span></label> <input id="backgroundColor" type="color" value="#f5f5f5"> </div> </div> <div class="two-col"> <div> <label>鏉愯川<span class="optional-tag">閫夊～</span></label> <input id="material" placeholder="Aluminum / ABS / Steel"> </div> <div> <label>棰滆壊<span class="optional-tag">閫夊～</span></label> <input id="color" placeholder="Black / Silver / Red"> </div> </div> <div class="two-col"> <div> <label>鏁伴噺<span class="optional-tag">閫夊～</span></label> <input id="quantity" placeholder="2 PCS / 1 Set"> </div> <div> <label>閫傞厤杞﹀瀷<span class="optional-tag">閫夊～</span></label> <input id="fitment" placeholder="Nissan Rogue 2014-2019"> </div> </div> <div> <label>瀹夎鏂瑰紡<span class="optional-tag">閫夊～</span></label> <input id="installation" placeholder="Snap-On / Adhesive / Bolt-On"> </div> <div> <label>鍗栫偣鐗瑰緛<span class="optional-tag">閫夊～</span></label> <textarea id="features" placeholder="渚嬪锛氶槼鏋佹哀鍖栬〃闈€佹槗瀹夎銆佹彁鍗囧唴楗拌川鎰熴€?></textarea> </div> <div> <label>鍖呰娓呭崟<span class="optional-tag">閫夊～</span></label> <input id="packageIncludes" placeholder="2 x Trim Covers"> </div> <div> <label>棰濆瑕佹眰<span class="optional-tag">閫夊～</span></label> <textarea id="extraPrompt" placeholder="渚嬪锛氱櫧搴曚富鍥俱€佺粨鏋勭壒鍐欍€佺垎鐐稿浘銆佸畨瑁呭満鏅€佹缇庣數鍟嗛鏍笺€?></textarea> </div> <div> <label>鍙傝€冨浘鐗囦笂浼?span class="optional-tag">鍥剧敓鍥?鍘昏儗鏅椂寤鸿涓婁紶</span></label> <div class="upload-box"> <input id="imageUpload" type="file" accept="image/png,image/jpeg,image/webp" multiple> <div> <div class="upload-icon">+</div> <strong>涓婁紶鍙傝€冨浘</strong> <p class="mini-help">鏂囩敓鍥惧彲浠ヤ笉浼犮€傚浘鐢熷浘鍜屽幓鑳屾櫙寤鸿鑷冲皯鎻愪緵涓€寮犲浘鐗囥€?/p> </div> </div> <div class="thumbs" id="thumbs"></div> <div class="file-list" id="fileList">鏈€夋嫨鍥剧墖</div> </div> <div> <label>鍙傝€冨浘鐗?URL<span class="optional-tag">閫夊～锛屽鏉℃崲琛?/span></label> <textarea id="imageUrls" placeholder="https://example.com/product-1.jpg https://example.com/product-2.jpg"></textarea> </div> <div class="actions"> <button class="btn btn-primary" id="generateBtn" type="button">鐢熸垚鍥剧墖</button> <button class="btn btn-green hidden" id="removeBgBtn" type="button">寮€濮嬪幓鑳屾櫙</button> <button class="btn btn-light" id="clearBtn" type="button">娓呯┖椤甸潰</button> </div> </div> </section> <section class="panel"> <div class="panel-header"> <h2>鍙戦€侀瑙?/h2> <p>杩欓噷浼氶殢鐫€浣犺緭鍏ョ殑浜у搧淇℃伅瀹炴椂鏇存柊锛岀‘璁ゅ墠绔疄闄呭噯澶囧彂閫佺殑鍐呭銆?/p> </div> <div class="panel-body"> <div class="prompt-box"> <div class="prompt-toolbar"> <strong>璇锋眰棰勮</strong> <div class="toolbar-actions"> <button class="btn btn-soft" id="refreshPayloadBtn" type="button">鍒锋柊</button> <button class="btn btn-light" id="copyPayloadBtn" type="button">澶嶅埗</button> </div> </div> <pre id="payloadPreview">姝ｅ湪鍒濆鍖?..</pre> </div> </div> </section> </aside> <div class="result-column"> <section class="hero-panel"> <div class="hero-head"> <div> <h2>鍥剧墖鐢熸垚缁撴灉鍖?/h2> <p>鍙充晶浣滀负涓诲睍绀哄尯鍩熴€傜敓鎴愬畬鎴愬悗锛岀涓€寮犲浘浼氫綔涓哄ぇ鍥句紭鍏堝睍绀猴紝鏂逛究蹇€熸鏌ユ暣浣撹川鎰熴€?/p> <div class="hero-meta"> <span class="pill" id="modePill">褰撳墠妯″紡锛氭枃鐢熷浘</span> <span class="pill" id="apiBasePill">https://imageapi.aiuu.tech</span> <span class="pill" id="ratioPill">姣斾緥锛?:1</span> </div> </div> </div> <div class="status" id="apiStatus"><b>鐘舵€侊細</b>椤甸潰宸插姞杞斤紝绛夊緟鎿嶄綔銆?/div> </section> <section class="gallery-shell"> <div class="gallery-topbar"> <div> <h3>鍥剧墖灞曠ず</h3> <p>鏂囩敓鍥俱€佸浘鐢熷浘銆佸幓鑳屾櫙閮戒細缁熶竴灞曠ず鍦ㄨ繖閲屻€?/p> </div> <div class="notice"><span id="apiBaseDisplay">https://imageapi.aiuu.tech</span></div> </div> <div class="gallery" id="resultGrid"></div> </section> <section class="history-shell"> <div class="history-topbar"> <div> <h3>鐢熸垚鍘嗗彶</h3> <p>淇濆瓨涔嬪墠鐢熸垚杩囩殑鍥剧墖璁板綍銆傚埛鏂伴〉闈㈠悗浠嶅彲鏌ョ湅锛屽苟鍙偣閫夋仮澶嶅埌涓婃柟灞曠ず鍖恒€?/p> </div> <button class="btn btn-light" id="clearHistoryBtn" type="button">娓呯┖鍘嗗彶</button> </div> <div class="history-empty" id="historyEmpty">鏆傛棤鐢熸垚鍘嗗彶銆?/div> <div class="history-list hidden" id="historyList"></div> </section> </div> </div> </section> <section id="page-reverse" class="page hidden"> <div class="reverse-layout"> <aside class="sidebar"> <section class="panel"> <div class="panel-header"> <h2>鍥剧墖鍙嶆帹璁剧疆</h2> <p>涓婁紶鍥剧墖鎴栧～鍐?URL 鍚庯紝鐩存帴璋冪敤鍥哄畾 Workers 鐨?`/api/reverse-prompt`銆?/p> </div> <div class="panel-body stack"> <div> <label>涓婁紶鍥剧墖</label> <div class="upload-box"> <input id="reverseUpload" type="file" accept="image/png,image/jpeg,image/webp" multiple> <div> <div class="upload-icon">+</div> <strong>涓婁紶瑕佸弽鎺ㄧ殑鍥剧墖</strong> <p class="mini-help">鍙互涓婁紶澶氬紶鍥撅紝涓€璧疯鍚庣鍒嗘瀽銆?/p> </div> </div> <div class="thumbs" id="reverseThumbs"></div> <div class="file-list" id="reverseFileList">鏈€夋嫨鍥剧墖</div> </div> <div> <label>鍥剧墖 URL<span class="optional-tag">閫夊～锛屽鏉℃崲琛?/span></label> <textarea id="reverseUrls" placeholder="https://example.com/reference.jpg"></textarea> </div> <div class="two-col"> <div> <label>杈撳嚭璇█</label> <select id="reverseLang"> <option value="Chinese" selected>涓枃</option> <option value="English">English</option> <option value="Bilingual">涓嫳鍙岃</option> </select> </div> <div> <label>鍙嶆帹鐢ㄩ€?/label> <select id="reversePurpose"> <option value="ecommerce" selected>璺ㄥ鐢靛晢浜у搧鍥?/option> <option value="auto_parts">姹介厤璇︽儏椤?/option> <option value="poster">娴锋姤骞垮憡鍥?/option> <option value="photography">鍐欏疄鎽勫奖</option> <option value="general">閫氱敤鎻愮ず璇?/option> </select> </div> </div> <div> <label>琛ュ厖瑕佹眰<span class="optional-tag">閫夊～</span></label> <textarea id="reverseExtra" placeholder="渚嬪锛氶噸鐐瑰垎鏋愭瀯鍥俱€佹潗璐ㄣ€佺伅鍏夈€侀暅澶淬€佹枃妗堟帓鐗堛€佺數鍟嗛鏍笺€?></textarea> </div> <div class="actions"> <button class="btn btn-primary" id="reverseBtn" type="button">寮€濮嬪弽鎺?/button> <button class="btn btn-light" id="reverseCopyBtn" type="button">澶嶅埗缁撴灉</button> </div> </div> </section> </aside> <section class="panel"> <div class="panel-header"> <h2>鍙嶆帹缁撴灉</h2> <p>鎺ュ彛杩斿洖鐨勬彁绀鸿瘝銆佸垎鏋愮粨鏋滃拰缁撴瀯鍖栧唴瀹逛細鏄剧ず鍦ㄨ繖閲屻€?/p> </div> <div class="panel-body"> <div class="notice">https://imageapi.aiuu.tech/api/reverse-prompt</div> <div class="result-box" id="reverseResult">涓婁紶鍥剧墖鎴栧～鍐欏浘鐗?URL 鍚庯紝鐐瑰嚮鈥滃紑濮嬪弽鎺ㄢ€濄€?/div> </div> </section> </div> </section> <section id="page-settings" class="page hidden"> <div class="settings-layout"> <aside class="sidebar"> <section class="panel"> <div class="panel-header"> <h2>鍚庣鐘舵€?/h2> <p>鍓嶇涓嶅啀鎻愪緵 API Base URL 杈撳叆妗嗭紝杩欓噷鍙繚鐣欏浐瀹氬湴鍧€璇存槑鍜屽仴搴锋鏌ャ€?/p> </div> <div class="panel-body stack"> <div class="success">https://imageapi.aiuu.tech</div> <button class="btn btn-primary" id="healthBtn" type="button">妫€娴嬪悗绔?/button> <div class="status" id="healthStatus"><b>鐘舵€侊細</b>灏氭湭妫€娴嬨€?/div> </div> </section> </aside> <section class="panel"> <div class="panel-header"> <h2>鎺ュ彛璇存槑</h2> <p>褰撳墠鍓嶇鍥哄畾璋冪敤涓嬮潰杩欎簺鎺ュ彛銆?/p> </div> <div class="panel-body"> <div class="prompt-box"> <div class="prompt-toolbar"> <strong>鍥哄畾 Workers 璺敱</strong> </div> <pre id="endpointPreview">Base URL https://imageapi.aiuu.tech GET /api/health POST /api/generate-images POST /api/reverse-prompt POST /api/remove-background</pre> </div> </div> </section> </div> </section> </main> <div class="lightbox hidden" id="lightbox"> <div class="lightbox-dialog" role="dialog" aria-modal="true" aria-labelledby="lightboxTitle"> <div class="lightbox-topbar"> <div class="lightbox-title" id="lightboxTitle">鍥剧墖棰勮</div> <div class="lightbox-actions"> <button class="btn btn-light" id="lightboxCopyBtn" type="button">澶嶅埗閾炬帴</button> <a class="btn btn-soft" id="lightboxDownloadBtn" href="#" download="image-preview.png">涓嬭浇</a> <button class="btn btn-light" id="lightboxCloseBtn" type="button">鍏抽棴</button> </div> </div> <div class="lightbox-stage" id="lightboxStage"> <img id="lightboxImage" alt="preview image"> </div> </div> </div> <script> (() => { const API_BASE = 'https://imageapi.aiuu.tech'; const IMAGE_NAMES = ['Main Image', 'Overview Image', 'Structure Image', 'Material Image', 'Feature Image', 'Install Image', 'Spec Image', 'Scene Image']; const STORAGE_KEYS = { generatedImages: 'image_workbench_generated_images_v1', generatedHistory: 'image_workbench_generated_history_v1' }; const state = { ratio: '1:1', uploads: [], reverseUploads: [] }; const $ = id => document.getElementById(id); const qs = (selector, root = document) => root.querySelector(selector); const qsa = (selector, root = document) => Array.from(root.querySelectorAll(selector)); function field(id) { return ($(id)?.value || '').trim(); } function splitUrls(text) { return (text || '') .split(/\r?\n/) .map(item => item.trim()) .filter(Boolean); } function getMode() { return qs('input[name="mode"]:checked')?.value || 'text2image'; } function api(path) { return `${API_BASE}${path.startsWith('/') ? path : `/${path}`}`; } function setHtml(id, html) { const node = $(id); if (node) node.innerHTML = html; } function setText(id, text) { const node = $(id); if (node) node.textContent = text; } function isRemoteImageUrl(url) { return /^https?:\/\//i.test(url || ''); } function resolutionLabel() { return field('resolution') || '768x768'; } function openLightbox(url, title = '鍥剧墖棰勮') { const lightbox = $('lightbox'); const image = $('lightboxImage'); const titleNode = $('lightboxTitle'); const download = $('lightboxDownloadBtn'); const copyBtn = $('lightboxCopyBtn'); if (!lightbox || !image || !titleNode || !download || !copyBtn) return; image.src = url; titleNode.textContent = title; download.href = url; download.download = `${title || 'image-preview'}.png`; copyBtn.disabled = !isRemoteImageUrl(url); lightbox.classList.remove('hidden'); } function closeLightbox() { const lightbox = $('lightbox'); const image = $('lightboxImage'); if (lightbox) lightbox.classList.add('hidden'); if (image) image.src = ''; } function getGeneratedHistory() { try { const raw = localStorage.getItem(STORAGE_KEYS.generatedHistory); if (!raw) return []; const parsed = JSON.parse(raw); return Array.isArray(parsed) ? parsed : []; } catch (error) { console.warn('Failed to read generated history:', error); return []; } } function saveGeneratedHistory(history) { try { localStorage.setItem(STORAGE_KEYS.generatedHistory, JSON.stringify(history)); } catch (error) { console.warn('Failed to persist generated history:', error); } } function formatHistoryTime(timestamp) { try { return new Date(timestamp).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }); } catch { return ''; } } function addGeneratedHistoryEntry(urls) { if (!Array.isArray(urls) || !urls.length) return; const history = getGeneratedHistory(); const entry = { id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, productName: field('productName') || '鏈懡鍚嶄骇鍝?, mode: getMode(), ratio: state.ratio, resolution: resolutionLabel(), createdAt: Date.now(), urls: urls.slice(0, 8) }; const deduped = history.filter(item => item?.urls?.[0] !== entry.urls[0]); deduped.unshift(entry); saveGeneratedHistory(deduped.slice(0, 30)); renderGeneratedHistory(); } function renderGeneratedHistory() { const history = getGeneratedHistory(); const empty = $('historyEmpty'); const list = $('historyList'); if (!empty || !list) return; list.innerHTML = ''; if (!history.length) { empty.classList.remove('hidden'); list.classList.add('hidden'); return; } empty.classList.add('hidden'); list.classList.remove('hidden'); history.forEach(item => { const card = document.createElement('button'); card.type = 'button'; card.className = 'history-card'; card.innerHTML = `<div class="history-thumb">${item.urls?.[0] ? `<img src="${item.urls[0]}" alt="${item.productName}">` : ''}</div><div class="history-meta"><strong>${item.productName || '鏈懡鍚嶄骇鍝?}</strong><span>${modeLabel(item.mode)} / ${item.ratio || '1:1'} / ${item.resolution || '768x768'}</span><span>${Array.isArray(item.urls) ? item.urls.length : 0} 寮犲浘路 ${formatHistoryTime(item.createdAt)}</span></div>`; card.addEventListener('click', () => { renderImages(Array.isArray(item.urls) ? item.urls : [], false); setHtml('apiStatus', `<b>鐘舵€侊細</b>宸蹭粠鍘嗗彶璁板綍鎭㈠锛?{item.productName || '鏈懡鍚嶄骇鍝?}`); }); list.appendChild(card); }); } function clearGeneratedHistory() { try { localStorage.removeItem(STORAGE_KEYS.generatedHistory); } catch (error) { console.warn('Failed to clear generated history:', error); } renderGeneratedHistory(); } function modeLabel(mode) { if (mode === 'image2image') return '鍥剧敓鍥?; if (mode === 'remove_bg') return '鍘昏儗鏅?; return '鏂囩敓鍥?; } function saveGeneratedImages(urls) { try { localStorage.setItem(STORAGE_KEYS.generatedImages, JSON.stringify({ urls, ratio: state.ratio, resolution: resolutionLabel(), savedAt: Date.now() })); } catch (error) { console.warn('Failed to persist generated images:', error); } } function restoreGeneratedImages() { try { const raw = localStorage.getItem(STORAGE_KEYS.generatedImages); if (!raw) return false; const parsed = JSON.parse(raw); if (!Array.isArray(parsed?.urls) || !parsed.urls.length) return false; renderImages(parsed.urls, false); setHtml('apiStatus', '<b>鐘舵€侊細</b>宸叉仮澶嶄笂涓€娆＄敓鎴愮粨鏋溿€?); return true; } catch (error) { console.warn('Failed to restore generated images:', error); return false; } } function setLoading(button, loading, text = '澶勭悊涓?) { if (!button) return; if (loading) { button.dataset.oldText = button.innerHTML; button.disabled = true; button.innerHTML = `<span class="loader"></span>${text}`; return; } button.disabled = false; button.innerHTML = button.dataset.oldText || button.innerHTML; } async function fileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(String(reader.result)); reader.onerror = reject; reader.readAsDataURL(file); }); } async function uploadsToBase64(list) { return Promise.all(list.map(async item => ({ name: item.file.name, type: item.file.type, size: item.file.size, dataUrl: await fileToBase64(item.file) }))); } function collectOptionalFields() { const fields = [ ['浜у搧鎻忚堪', field('productDesc')], ['鏉愯川', field('material')], ['棰滆壊', field('color')], ['鏁伴噺', field('quantity')], ['閫傞厤杞﹀瀷', field('fitment')], ['瀹夎鏂瑰紡', field('installation')], ['鍗栫偣', field('features')], ['鍖呰娓呭崟', field('packageIncludes')], ['棰濆瑕佹眰', field('extraPrompt')] ]; return fields.filter(([, value]) => Boolean(value)); } function buildPromptSummary() { const optionalFields = collectOptionalFields(); const refCount = state.uploads.length + splitUrls(field('imageUrls')).length; const lines = [ `浜у搧鍚嶇О: ${field('productName') || '[鏈～鍐橾'}`, `妯″紡: ${getMode()}`, `骞冲彴: ${field('platform') || 'general'}`, `杈撳嚭璇█: ${field('outputLanguage') || 'English'}`, `鍥剧墖绫诲瀷: ${field('imageSetType') || 'full_set'}`, `鍥剧墖鏁伴噺: ${field('imageCount') || '2'}`, `姣斾緥: ${state.ratio}`, `鍒嗚鲸鐜? ${resolutionLabel()}`, `鍙傝€冨浘鏁伴噺: ${refCount}` ]; if (optionalFields.length) { lines.push(''); lines.push('宸插～鍐欑殑閫夊～淇℃伅:'); optionalFields.forEach(([label, value]) => lines.push(`- ${label}: ${value}`)); } else { lines.push(''); lines.push('褰撳墠鍙～鍐欎簡鍩虹蹇呭～椤癸紝浠嶅彲鐩存帴鐢熸垚銆?); } return lines.join('\n'); } async function buildGeneratePayload(includeImages = false) { return { productName: field('productName'), productDesc: field('productDesc'), material: field('material'), color: field('color'), quantity: field('quantity'), fitment: field('fitment'), installation: field('installation'), packageIncludes: field('packageIncludes'), features: field('features'), extraPrompt: field('extraPrompt'), backgroundColor: field('backgroundColor'), platform: field('platform'), outputLanguage: field('outputLanguage'), imageCount: Number(field('imageCount') || 2), imageSetType: field('imageSetType'), aspectRatio: state.ratio, resolution: field('resolution'), mode: getMode(), referenceImages: includeImages ? await uploadsToBase64(state.uploads) : state.uploads.map(item => ({ name: item.file.name, type: item.file.type, size: item.file.size, dataUrl: '[base64 omitted]' })), referenceImageUrls: splitUrls(field('imageUrls')) }; } async function refreshPayloadPreview() { const payload = await buildGeneratePayload(false); const preview = { apiBaseUrl: API_BASE, frontendPromptPreview: buildPromptSummary(), payload }; setText('payloadPreview', JSON.stringify(preview, null, 2)); } function updateHeroMeta() { const modeMap = { text2image: '鏂囩敓鍥?, image2image: '鍥剧敓鍥?, remove_bg: '鍘昏儗鏅? }; setText('modePill', `褰撳墠妯″紡锛?{modeMap[getMode()]}`); setText('ratioPill', `姣斾緥锛?{state.ratio}`); } function renderPlaceholders(count = Number(field('imageCount') || 2), loading = false) { const grid = $('resultGrid'); if (!grid) return; grid.innerHTML = ''; for (let i = 0; i < count; i += 1) { const card = document.createElement('div'); card.className = `image-card${i === 0 ? ' featured' : ''}`; card.innerHTML = loading ? `<div class="image-preview loading"><div class="preview-skeleton"><i></i><i></i><i></i></div><div class="preview-state"><div class="preview-spinner"></div><strong>鐢熸垚涓?/strong><span>姝ｅ湪鐢熸垚 ${IMAGE_NAMES[i] || `鍥剧墖 ${i + 1}`}</span></div></div><div class="image-meta"><div><strong>${IMAGE_NAMES[i] || `鍥剧墖 ${i + 1}`}</strong><span>${state.ratio} / ${field('resolution')}</span></div><button class="btn btn-light" type="button" disabled>涓嬭浇</button></div>` : `<div class="image-preview idle"><div class="preview-state"><strong>寰呯敓鎴?/strong><span>${IMAGE_NAMES[i] || `鍥剧墖 ${i + 1}`}</span></div></div><div class="image-meta"><div><strong>${IMAGE_NAMES[i] || `鍥剧墖 ${i + 1}`}</strong><span>${state.ratio} / ${field('resolution')}</span></div><button class="btn btn-light" type="button" disabled>涓嬭浇</button></div>`; grid.appendChild(card); } } function extractImageUrls(data) { const urls = []; const seenNodes = new WeakSet(); const push = value => { if (typeof value === 'string' && value.trim()) { urls.push(value.trim()); } }; const visit = value => { if (!value) return; if (typeof value === 'string') { push(value); return; } if (Array.isArray(value)) { value.forEach(visit); return; } if (typeof value !== 'object') return; if (seenNodes.has(value)) return; seenNodes.add(value); push(value.url); push(value.imageUrl); push(value.image_url); push(value.result); push(value.output_text); push(value.text); if (typeof value.b64_json === 'string' && value.b64_json.trim()) { push(`data:image/png;base64,${value.b64_json}`); } if (typeof value.data_url === 'string' && value.data_url.trim()) { push(value.data_url); } Object.values(value).forEach(visit); }; visit(data); return [...new Set(urls)].filter(value => ( value.startsWith('http://') || value.startsWith('https://') || value.startsWith('data:image/') || value.startsWith('blob:') )); } function renderImages(urls, persist = true) { const grid = $('resultGrid'); if (!grid) return; grid.innerHTML = ''; if (!urls.length) { renderPlaceholders(); return; } urls.forEach((url, index) => { const card = document.createElement('div'); card.className = `image-card${index === 0 ? ' featured' : ''}`; const title = IMAGE_NAMES[index] || `鍥剧墖 ${index + 1}`; const remote = isRemoteImageUrl(url); card.innerHTML = `<div class="image-preview clickable"><img src="${url}" alt="generated image ${index + 1}"></div><div class="image-meta"><div><strong>${title}</strong><span>${state.ratio} / ${resolutionLabel()}</span></div><div class="image-actions">${remote ? '<button class="btn btn-light image-copy-btn" type="button">澶嶅埗閾炬帴</button>' : ''}<a class="btn btn-light" href="${url}" download="image-${index + 1}.png">涓嬭浇</a></div></div>`; card.querySelector('.image-preview')?.addEventListener('click', () => openLightbox(url, title)); card.querySelector('.image-copy-btn')?.addEventListener('click', async event => { event.preventDefault(); event.stopPropagation(); await copyText(url); alert('宸插鍒跺浘鐗囬摼鎺ャ€?); }); grid.appendChild(card); }); if (persist) { saveGeneratedImages(urls); addGeneratedHistoryEntry(urls); } } function buildHttpError(response, rawText, fallback) { const text = (rawText || '').trim(); if (text) { try { const data = JSON.parse(text); const message = typeof data?.error === 'string' ? data.error : typeof data?.message === 'string' ? data.message : JSON.stringify(data).slice(0, 1000); return `${response.status} ${response.statusText} - ${message}`; } catch { return `${response.status} ${response.statusText} - ${text.slice(0, 1000)}`; } } return `${response.status} ${response.statusText} - ${fallback}`; } async function generateImages() { if (getMode() === 'remove_bg') { await removeBackground(); return; } const button = $('generateBtn'); const payload = await buildGeneratePayload(true); if (!payload.productName) { alert('鍙渶瑕佸～浜у搧鍚嶇О锛屽厛鎶婁骇鍝佸悕绉板～涓娿€?); $('productName')?.focus(); return; } setLoading(button, true, getMode() === 'image2image' ? '鍥剧敓鍥句腑' : '鏂囩敓鍥句腑'); setHtml('apiStatus', `<b>鐘舵€侊細</b>姝ｅ湪璇锋眰 ${api('/api/generate-images')}`); renderPlaceholders(payload.imageCount, true); try { const response = await fetch(api('/api/generate-images'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const raw = await response.text(); let data; try { data = JSON.parse(raw); } catch { data = { raw }; } if (!response.ok || data?.success === false) { throw new Error(buildHttpError(response, raw, '鍚庣杩斿洖绌哄搷搴旓紝璇锋鏌?Workers 鏃ュ織鎴栦笂娓告ā鍨嬮厤缃€?)); } const urls = extractImageUrls(data); if (!urls.length) { throw new Error('鎺ュ彛杩斿洖鎴愬姛锛屼絾娌℃湁鎷垮埌鍥剧墖鍦板潃銆?); } renderImages(urls); setHtml('apiStatus', `<b>鐘舵€侊細</b>鐢熸垚瀹屾垚锛屽叡杩斿洖 ${urls.length} 寮犲浘鐗囥€俙); } catch (error) { console.error(error); setHtml('apiStatus', `<b>鐢熸垚澶辫触锛?/b>${error.message}`); } finally { setLoading(button, false); } } async function removeBackground() { const button = $('removeBgBtn'); const imageUrl = splitUrls(field('imageUrls'))[0] || ''; let imageBase64 = ''; if (!imageUrl && state.uploads[0]) { imageBase64 = await fileToBase64(state.uploads[0].file); } if (!imageUrl && !imageBase64) { alert('鍘昏儗鏅ā寮忛渶瑕佽嚦灏戜竴寮犲浘鐗囨垨涓€涓浘鐗?URL銆?); return; } setLoading(button, true, '鍘昏儗鏅腑'); setHtml('apiStatus', `<b>鐘舵€侊細</b>姝ｅ湪璇锋眰 ${api('/api/remove-background')}`); try { const response = await fetch(api('/api/remove-background'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ imageUrl, imageBase64 }) }); if (!response.ok) { const raw = await response.text(); throw new Error(buildHttpError(response, raw, '鍚庣杩斿洖绌哄搷搴旓紝璇锋鏌?Workers 鏃ュ織銆?)); } const type = response.headers.get('content-type') || ''; let urls = []; if (type.includes('application/json')) { urls = extractImageUrls(await response.json()); } else { urls = [URL.createObjectURL(await response.blob())]; } if (!urls.length) { throw new Error('鎺ュ彛娌℃湁杩斿洖鍙睍绀虹殑鍥剧墖缁撴灉銆?); } renderImages(urls); setHtml('apiStatus', '<b>鐘舵€侊細</b>鍘昏儗鏅畬鎴愩€?); } catch (error) { console.error(error); setHtml('apiStatus', `<b>鍘昏儗鏅け璐ワ細</b>${error.message}`); } finally { setLoading(button, false); } } async function reversePrompt() { const button = $('reverseBtn'); const imageUrls = splitUrls(field('reverseUrls')); const imageBase64List = await uploadsToBase64(state.reverseUploads); if (!imageUrls.length && !imageBase64List.length) { alert('鍏堜笂浼犲浘鐗囨垨濉啓鍥剧墖 URL銆?); return; } setLoading(button, true, '鍙嶆帹涓?); setText('reverseResult', `姝ｅ湪璇锋眰 ${api('/api/reverse-prompt')}`); try { const response = await fetch(api('/api/reverse-prompt'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ imageUrls, imageBase64List, outputLanguage: field('reverseLang'), purpose: field('reversePurpose'), extraRequirements: field('reverseExtra') }) }); const raw = await response.text(); let data; try { data = JSON.parse(raw); } catch { data = { raw }; } if (!response.ok || data?.success === false) { throw new Error(buildHttpError(response, raw, '鍚庣杩斿洖绌哄搷搴旓紝璇锋鏌?Workers 鏃ュ織鎴栬瑙夋ā鍨嬮厤缃€?)); } setText('reverseResult', data?.data?.result || data?.result || data?.text || JSON.stringify(data, null, 2)); } catch (error) { console.error(error); setText('reverseResult', `鍙嶆帹澶辫触锛?{error.message}`); } finally { setLoading(button, false); } } function renderThumbs(bucket, thumbsId, fileListId) { const thumbs = $(thumbsId); const fileList = $(fileListId); if (!thumbs || !fileList) return; thumbs.innerHTML = ''; bucket.forEach((item, index) => { const node = document.createElement('div'); node.className = 'thumb'; node.innerHTML = `<img src="${item.url}" alt="reference ${index + 1}"><button type="button" aria-label="绉婚櫎">脳</button>`; node.querySelector('button')?.addEventListener('click', () => { URL.revokeObjectURL(item.url); bucket.splice(index, 1); renderThumbs(bucket, thumbsId, fileListId); refreshPayloadPreview(); }); thumbs.appendChild(node); }); fileList.textContent = bucket.length ? bucket.map(item => `${item.file.name} (${Math.round(item.file.size / 1024)} KB)`).join('锛?) : '鏈€夋嫨鍥剧墖'; } function previewFiles(input, bucket, thumbsId, fileListId) { const files = Array.from(input?.files || []); if (!files.length) return; files.forEach(file => { bucket.push({ file, url: URL.createObjectURL(file) }); }); input.value = ''; renderThumbs(bucket, thumbsId, fileListId); refreshPayloadPreview(); } async function copyText(text) { if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); return; } const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); textarea.remove(); } async function testHealth() { const button = $('healthBtn'); setLoading(button, true, '妫€娴嬩腑'); setHtml('healthStatus', `<b>鐘舵€侊細</b>姝ｅ湪璇锋眰 ${api('/api/health')}`); try { const response = await fetch(api('/api/health')); const text = await response.text(); setHtml('healthStatus', `<b>鐘舵€侊細</b>${response.ok ? '鍚庣鍙敤' : '鍚庣杩斿洖寮傚父'}<br>${text.slice(0, 1000)}`); } catch (error) { console.error(error); setHtml('healthStatus', `<b>妫€娴嬪け璐ワ細</b>${error.message}`); } finally { setLoading(button, false); } } function switchPage(page) { qsa('.tab-btn').forEach(button => { button.classList.toggle('active', button.dataset.page === page); }); $('page-generator')?.classList.toggle('hidden', page !== 'generator'); $('page-reverse')?.classList.toggle('hidden', page !== 'reverse'); $('page-settings')?.classList.toggle('hidden', page !== 'settings'); } function updateModeUi() { const mode = getMode(); const modeTextMap = { text2image: '鏂囩敓鍥?, image2image: '鍥剧敓鍥?, remove_bg: '鍘昏儗鏅? }; const hintMap = { text2image: '鏂囩敓鍥炬ā寮忎笅鍙互鍙～浜у搧鍚嶇О鐩存帴鐢熸垚銆?, image2image: '鍥剧敓鍥炬ā寮忓缓璁笂浼犲弬鑰冨浘鎴栧～鍐欏浘鐗?URL锛屽叾瀹冧骇鍝佷俊鎭粛鐒堕兘鏄€夊～銆?, remove_bg: '鍘昏儗鏅ā寮忓彧澶勭悊绗竴寮犱笂浼犲浘鐗囨垨绗竴鏉″浘鐗?URL銆? }; setHtml('modeHint', `<b>鎻愮ず锛?/b>${hintMap[mode]}`); setText('modePill', `褰撳墠妯″紡锛?{modeTextMap[mode]}`); $('generateBtn')?.classList.toggle('hidden', mode === 'remove_bg'); $('removeBgBtn')?.classList.toggle('hidden', mode !== 'remove_bg'); if ($('generateBtn')) { $('generateBtn').textContent = mode === 'image2image' ? '寮€濮嬪浘鐢熷浘' : '鐢熸垚鍥剧墖'; } refreshPayloadPreview(); } function bindPreviewField(id) { const node = $(id); if (!node) return; const handler = () => { refreshPayloadPreview(); renderPlaceholders(); }; node.addEventListener('input', handler); node.addEventListener('change', handler); } function init() { setText('apiBasePill', API_BASE); setText('apiBaseDisplay', API_BASE); qsa('.tab-btn').forEach(button => { button.addEventListener('click', () => switchPage(button.dataset.page)); }); qsa('.ratio-btn').forEach(button => { button.addEventListener('click', () => { qsa('.ratio-btn').forEach(item => item.classList.remove('active')); button.classList.add('active'); state.ratio = button.dataset.ratio; updateHeroMeta(); refreshPayloadPreview(); renderPlaceholders(); }); }); qsa('input[name="mode"]').forEach(radio => { radio.addEventListener('change', updateModeUi); }); [ 'productName', 'productDesc', 'platform', 'outputLanguage', 'imageSetType', 'imageCount', 'resolution', 'backgroundColor', 'material', 'color', 'quantity', 'fitment', 'installation', 'features', 'packageIncludes', 'extraPrompt', 'imageUrls' ].forEach(bindPreviewField); $('imageUpload')?.addEventListener('change', event => previewFiles(event.target, state.uploads, 'thumbs', 'fileList')); $('reverseUpload')?.addEventListener('change', event => previewFiles(event.target, state.reverseUploads, 'reverseThumbs', 'reverseFileList')); $('refreshPayloadBtn')?.addEventListener('click', refreshPayloadPreview); $('copyPayloadBtn')?.addEventListener('click', async () => { await refreshPayloadPreview(); await copyText($('payloadPreview')?.textContent || ''); alert('宸插鍒躲€?); }); $('generateBtn')?.addEventListener('click', generateImages); $('removeBgBtn')?.addEventListener('click', removeBackground); $('clearBtn')?.addEventListener('click', () => window.location.reload()); $('reverseBtn')?.addEventListener('click', reversePrompt); $('reverseCopyBtn')?.addEventListener('click', async () => { await copyText($('reverseResult')?.textContent || ''); alert('宸插鍒躲€?); }); $('healthBtn')?.addEventListener('click', testHealth); $('clearHistoryBtn')?.addEventListener('click', clearGeneratedHistory); $('lightboxCloseBtn')?.addEventListener('click', closeLightbox); $('lightboxCopyBtn')?.addEventListener('click', async () => { const url = $('lightboxImage')?.src || ''; if (!isRemoteImageUrl(url)) return; await copyText(url); alert('宸插鍒跺浘鐗囬摼鎺ャ€?); }); $('lightbox')?.addEventListener('click', event => { if (event.target === $('lightbox')) closeLightbox(); }); document.addEventListener('keydown', event => { if (event.key === 'Escape') closeLightbox(); }); window.addEventListener('error', event => { console.error('Page error:', event.error || event.message); setHtml('apiStatus', `<b>椤甸潰閿欒锛?/b>${event.message || '璇锋墦寮€鎺у埗鍙版煡鐪嬭鎯呫€?}`); }); updateHeroMeta(); updateModeUi(); refreshPayloadPreview(); renderGeneratedHistory(); if (!restoreGeneratedImages()) { renderPlaceholders(); } switchPage('generator'); } document.addEventListener('DOMContentLoaded', init); })(); </script> </body> </html>