Upload templates/index.html with huggingface_hub

templates/index.html

@@ -167,6 +167,25 @@ select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%
 .toast.error{border-color:rgba(239,68,68,.3);color:var(--red)}
 .toast.success{border-color:rgba(34,197,94,.3);color:var(--green)}
 
+.section-divider{display:flex;align-items:center;gap:1rem;margin:3rem 0 1.5rem;color:var(--text-3);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
+.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--border)}
+.custom-section{border-color:var(--border-light)}
+.custom-intro{font-size:.88rem;color:var(--text-2);margin-bottom:1rem;line-height:1.55}
+.kind-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
+.kind-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;border:1px solid var(--border);cursor:pointer;font-size:.85rem;transition:background .2s,border-color .2s}
+.kind-pill:has(input:checked){border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}
+.kind-pill input{accent-color:var(--accent)}
+.kind-pill small{opacity:.65;font-size:.72rem}
+.style-details{margin:.75rem 0 1rem;font-size:.82rem;color:var(--text-2)}
+.style-details summary{cursor:pointer;color:var(--text);padding:.25rem 0}
+.style-blurbs{margin-top:.5rem;padding-left:1rem;border-left:2px solid var(--border)}
+.style-blurbs code{font-size:.75rem;background:var(--surface-2);padding:.1rem .3rem;border-radius:4px}
+.custom-progress{margin-top:1rem;padding:.75rem;font-size:.88rem;color:var(--text-2)}
+.custom-result{margin-top:1.25rem;padding:1rem;background:var(--surface-2);border-radius:var(--radius);border:1px solid var(--border)}
+.custom-result img{max-width:100%;border-radius:var(--radius-sm);display:block}
+.custom-result .dl-row{margin-top:.75rem;display:flex;gap:.5rem;flex-wrap:wrap}
+.hidden{display:none!important}
+
 @media(max-width:640px){
   .input-row,.input-row-3{grid-template-columns:1fr}
   .gen-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@@ -288,6 +307,67 @@ select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%
       <button class="btn btn-secondary" onclick="resetAll()">生成新一组</button>
     </div>
   </div>
+
+  <!-- ═══ Custom: cover / feature / how-to (always visible below) ═══ -->
+  <div class="section-divider">
+    <span>更多生成</span>
+  </div>
+
+  <div class="card custom-section" id="custom-section">
+    <div class="card-title">
+      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+      营销图生成（封面 / 功能 / How-to）
+      <span class="badge badge-optional">单张 · 参考你上传的图 + 内置风格库</span>
+    </div>
+    <p class="custom-intro">选择类型后填写英文或中文需求，并上传参考图（可选，多张）。系统将<strong>合并</strong>你提供的参考与对应类型的<strong>默认风格参考包</strong>，按类型强制应用版式与视觉规则。</p>
+
+    <div class="kind-row">
+      <label class="kind-pill"><input type="radio" name="custom-kind" value="cover" checked> 封面图 <small>16:9</small></label>
+      <label class="kind-pill"><input type="radio" name="custom-kind" value="feature"> 功能图</label>
+      <label class="kind-pill"><input type="radio" name="custom-kind" value="howto"> How-to 图</label>
+    </div>
+
+    <div class="input-group">
+      <label>生成要求（prompt）</label>
+      <textarea id="custom-prompt" rows="4" placeholder="例如：A hero banner for an AI writing assistant, showing a laptop and floating text bubbles, tagline space at top, midnight blue and gold palette…"></textarea>
+      <div class="input-hint" id="custom-kind-hint">封面图：宽幅 hero，预留标题区；输出比例 <strong>16:9</strong>。</div>
+    </div>
+
+    <div class="card" style="background:var(--surface-2);margin-bottom:1rem;padding:1rem">
+      <div class="card-title" style="font-size:.95rem;margin-bottom:.5rem">参考图片（可选，多张）</div>
+      <div class="upload-zone" id="custom-upload-zone">
+        <svg class="uz-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        <h3>拖拽或点击上传风格参考</h3>
+        <p>可与内置风格包一起使用；最多 6 张</p>
+      </div>
+      <input type="file" id="custom-file-input" accept="image/jpeg,image/png,image/webp" multiple>
+      <div class="preview-grid" id="custom-preview-grid"></div>
+      <div class="upload-status" id="custom-upload-status"></div>
+    </div>
+
+    <details class="style-details">
+      <summary>内置风格规则说明（按类型）</summary>
+      <div class="style-blurbs">
+        <p><strong>封面图</strong>：参考 <code>coverreference</code> — 宽幅主视觉、产品/场景层次、电影��光效、预留标题负空间、偏电商/科技发布质感。</p>
+        <p><strong>功能图</strong>：参考 <code>features-references</code> — 单点卖点、轻渐变或浅底、图标/抽象 UI、卡片化层次、SaaS 说明图气质。</p>
+        <p><strong>How-to</strong>：参考 <code>howtoreferences</code> — 步骤感、教学清晰、单动作焦点、留白与对齐、教程卡片风。</p>
+      </div>
+    </details>
+
+    <div class="actions" style="justify-content:flex-start">
+      <button class="btn btn-primary" id="btn-custom-gen" onclick="startCustomGeneration()">
+        <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+        生成单张图
+      </button>
+    </div>
+
+    <div id="custom-progress" class="custom-progress hidden">
+      <div class="spinner spinner-sm" style="display:inline-block;vertical-align:middle;margin-right:.5rem"></div>
+      <span id="custom-progress-msg">准备中…</span>
+    </div>
+
+    <div id="custom-result" class="custom-result hidden"></div>
+  </div>
 </div>
 
 <div class="toast" id="toast"></div>
@@ -522,6 +602,138 @@ function resetAll(){
   goToStep(0);
 }
 
+// ── Custom section (cover / feature / howto) ──
+let customFiles=[];
+let customPublicUrls=[];
+let customTaskId=null;
+let customPollTimer=null;
+
+const customHint=$('custom-kind-hint');
+document.querySelectorAll('input[name="custom-kind"]').forEach(r=>{
+  r.addEventListener('change',()=>{
+    if(r.value==='cover')customHint.innerHTML='封面图：宽幅 hero，预留标题区；输出比例 <strong>16:9</strong>。';
+    else if(r.value==='feature')customHint.innerHTML='功能图：版式与气质参考内置功能图包；宽高比 <strong>与参考图一致（auto）</strong>。';
+    else customHint.innerHTML='How-to 图：步骤教学风；宽高比 <strong>与参考图一致（auto）</strong>。';
+  });
+});
+
+const cz=$('custom-upload-zone'), cfi=$('custom-file-input'), cpg=$('custom-preview-grid');
+cz.addEventListener('click',()=>cfi.click());
+cz.addEventListener('dragover',e=>{e.preventDefault();cz.classList.add('dragover')});
+cz.addEventListener('dragleave',()=>cz.classList.remove('dragover'));
+cz.addEventListener('drop',e=>{e.preventDefault();cz.classList.remove('dragover');addCustomFiles(e.dataTransfer.files)});
+cfi.addEventListener('change',e=>addCustomFiles(e.target.files));
+
+function addCustomFiles(files){
+  for(const f of files){
+    if(customFiles.length>=6){toast('参考图最多 6 张','error');break}
+    if(f.size>10*1024*1024){toast(f.name+' 超过 10MB','error');continue}
+    if(!['image/jpeg','image/png','image/webp'].includes(f.type)){toast(f.name+' 格式不支持','error');continue}
+    customFiles.push(f);
+  }
+  customPublicUrls=[];
+  renderCustomPreviews();
+}
+
+function renderCustomPreviews(){
+  cpg.innerHTML='';
+  customFiles.forEach((f,i)=>{
+    const d=document.createElement('div');d.className='preview-item';
+    const img=document.createElement('img');img.src=URL.createObjectURL(f);
+    const btn=document.createElement('button');btn.className='preview-remove';btn.textContent='✕';
+    btn.onclick=()=>{customFiles.splice(i,1);customPublicUrls=[];renderCustomPreviews();$('custom-upload-status').textContent=''};
+    d.append(img,btn);cpg.appendChild(d);
+  });
+}
+
+async function startCustomGeneration(){
+  const prompt=$('custom-prompt').value.trim();
+  if(!prompt){toast('请填写生成要求','error');return}
+  const kind=document.querySelector('input[name="custom-kind"]:checked').value;
+  const btn=$('btn-custom-gen');
+  const prog=$('custom-progress'), pr=$('custom-result');
+  btn.disabled=true;
+  pr.classList.add('hidden');pr.innerHTML='';
+  prog.classList.remove('hidden');
+  $('custom-progress-msg').textContent='上传参考图中…';
+
+  let urls=[];
+  if(customFiles.length){
+    $('custom-upload-status').className='upload-status uploading';
+    $('custom-upload-status').textContent='正在上传参考图…';
+    const fd=new FormData();
+    customFiles.forEach(f=>fd.append('images',f));
+    try{
+      const res=await fetch('/api/upload-images',{method:'POST',body:fd});
+      const data=await res.json();
+      if(data.error)throw new Error(data.error);
+      urls=data.public_urls||[];
+      $('custom-upload-status').className='upload-status done';
+      $('custom-upload-status').textContent=urls.length?`✓ 已上传 ${urls.length} 张`:'';
+    }catch(e){
+      toast('参考图上传失败：'+e.message,'error');
+      $('custom-upload-status').className='upload-status error';
+      $('custom-upload-status').textContent=e.message;
+      prog.classList.add('hidden');
+      btn.disabled=false;
+      return;
+    }
+  }else{
+    $('custom-upload-status').textContent='';
+  }
+
+  customPublicUrls=urls;
+  $('custom-progress-msg').textContent='正在生成（约需 30–90 秒）…';
+
+  try{
+    const res=await fetch('/api/generate-custom',{
+      method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({kind,prompt,image_urls:urls}),
+    });
+    const data=await res.json();
+    if(data.error)throw new Error(data.error);
+    customTaskId=data.task_id;
+    if(customPollTimer)clearInterval(customPollTimer);
+    customPollTimer=setInterval(pollCustomStatus,2500);
+  }catch(e){
+    toast('启动失败：'+e.message,'error');
+    prog.classList.add('hidden');
+  }
+  btn.disabled=false;
+}
+
+async function pollCustomStatus(){
+  if(!customTaskId)return;
+  try{
+    const res=await fetch('/api/status/'+customTaskId);
+    const task=await res.json();
+    $('custom-progress-msg').textContent=task.message||'生成中…';
+
+    if(task.status==='completed'){
+      clearInterval(customPollTimer);customPollTimer=null;
+      prog.classList.add('hidden');
+      const img=task.images&&task.images[0];
+      const box=$('custom-result');
+      box.classList.remove('hidden');
+      if(img&&img.status==='ok'){
+        box.innerHTML=`<p style="margin-bottom:.5rem;font-weight:600;color:var(--green)">生成成功</p>
+          <img src="${img.url}" alt="result">
+          <div class="dl-row">
+            <a href="${img.url}" download="custom_${img.slot}.png" class="btn btn-primary btn-sm">下载 PNG</a>
+          </div>`;
+      }else if(img&&img.status==='error'){
+        box.innerHTML=`<p class="gc-error">${esc(img.error||'失败')}</p>`;
+      }
+    }else if(task.status==='error'){
+      clearInterval(customPollTimer);customPollTimer=null;
+      prog.classList.add('hidden');
+      $('custom-result').classList.remove('hidden');
+      $('custom-result').innerHTML=`<p class="gc-error">${esc(task.message||'错误')}</p>`;
+    }
+  }catch(e){console.error(e)}
+}
+
 // ── Utils ──
 function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML}
 function toast(msg,type=''){const t=$('toast');t.textContent=msg;t.className='toast show '+type;setTimeout(()=>t.className='toast',4000)}