Hyreal
/
hyreal-gen-pic


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>门店采集 · 门店装修工具</title>
<link rel="icon" href="/assets/logo.png">
<link rel="stylesheet" href="/style.css">
</head>
<body>

<!-- Splash Screen -->
<div class="splash" id="splash">
  <img src="/assets/logo.png" alt="门店装修工具" class="splash-logo">
  <div class="splash-name">门店装修工具</div>
  <div class="splash-sub">淘宝闪购专业版</div>
  <div class="splash-bar"><span></span></div>
  <div class="splash-powered">
    <span>powered by</span>
    <img src="/assets/powered-by.png" alt="Hyreal IDE">
  </div>
</div>

<div class="app-frame">

  <aside class="sidebar">
    <div class="sidebar-brand">
      <div class="sidebar-logo"><img src="/assets/logo.png" alt="门"></div>
      <div class="sidebar-titles">
        <div class="t1">门店装修工具</div>
        <div class="t2">淘宝闪购专业版</div>
      </div>
    </div>

    <div class="nav-section-label">采集</div>
    <button class="nav-item active" data-view="crawl"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h10M4 18h16"/></svg></span><span>门店采集</span></button>

    <div class="nav-section-label">生成</div>
    <button class="nav-item" data-view="gen"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.8 4.9L19 9.7l-4.3 3 1.2 5.3-3.9-3-3.9 3 1.2-5.3-4.3-3 5.2-1.8z"/></svg></span><span>视觉生成</span></button>
    <button class="nav-item" data-view="tasks"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h10M4 12h16M4 17h7"/><circle cx="18" cy="7" r="2"/><circle cx="15" cy="17" r="2"/></svg></span><span>任务中心</span></button>
    <button class="nav-item" data-view="history"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="3"/><circle cx="9" cy="10" r="1.8"/><path d="M21 16l-5-5-6 6"/></svg></span><span>历史创作</span></button>

    <div class="nav-section-label">设置</div>
    <button class="nav-item" data-view="settings"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.05A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.05A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6h.09A1.7 1.7 0 0 0 10 3.05V3a2 2 0 1 1 4 0v.05A1.7 1.7 0 0 0 15 4.6a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9v.09a1.7 1.7 0 0 0 1.55.91H21a2 2 0 1 1 0 4h-.05a1.7 1.7 0 0 0-1.55 1z"/></svg></span><span>系统设置</span></button>

    <div class="sidebar-bottom">
      <span>v1.0.0</span>
      <img src="/assets/powered-by.png" alt="Hyreal IDE" class="sidebar-powered">
    </div>
  </aside>

  <div class="main-wrap">

    <!-- ==================== 门店采集 ==================== -->
    <div id="viewCrawl" class="view active">
      <main class="content">

        <div class="page-header">
          <div>
            <h1>门店采集</h1>
            <div class="sub">从淘宝闪购后台按店铺批量采集菜品图，用于后续视觉美化</div>
          </div>
        </div>

        <div class="crawl-grid">

          <div class="left-col">

            

            <div class="panel panel-narrow panel-designed">
              <div class="stage-marker"><span class="stage-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="2.2"/><circle cx="15" cy="17" r="2.2"/></svg></span><span>抓取设置</span></div>
              <span class="panel-watermark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"/><path d="M12 8v4l3 2"/></svg></span>
              <div class="panel-body">
                
                <div class="field">
                  <label>抓取内容</label>
                  <select disabled><option>菜品图片 + 名称</option></select>
                </div>
                <button class="collapse-trigger" id="advToggle" aria-expanded="false">
                  <span>高级设置</span><span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></span>
                </button>
                <div id="advBody" class="collapse">
                  <div style="padding-top:12px;display:flex;flex-direction:column;gap:12px;">
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
                      <input type="checkbox" id="forceFullCrawl">
                      <span>强制全量抓取（覆盖已有图片）</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <button class="btn btn-primary btn-block" id="startBtn">
              <span id="startBtnIcon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></span>
              <span id="startBtnText">开始抓取</span>
            </button>
            <button class="btn btn-danger btn-block" id="stopBtn" disabled style="display:none;"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/></svg><span>停止</span></button>

            <div class="panel panel-fixed panel-progress">
              <div class="panel-title">
                <span>进度列表</span>
                <span class="actions"><span class="badge" id="crawlStatusBadge"></span></span>
              </div>
              <div id="progressList"></div>
            </div>

          </div>

          <div class="right-col">

            <div class="panel panel-fixed panel-shops">
              <div class="panel-title">
                <span>店铺清单</span>
                <span class="actions">
                  <span class="badge badge-info" id="shopCount">0 家</span>
                  <button class="btn btn-ghost btn-small" id="btnToggleAdd">+ 添加店铺</button>
                </span>
              </div>
              <div style="overflow-x:auto;">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th style="width:36px;"><input type="checkbox" id="selectAllCb"></th>
                      <th style="min-width:220px;">店铺</th>
                      <th style="width:100px;">shopId</th>
                      <th style="width:100px;">状态</th>
                      <th style="width:220px;">文件夹</th>
                    </tr>
                  </thead>
                  <tbody id="shopTableBody"></tbody>
                </table>
                <div id="shopTableEmpty" class="empty-hint">
                  <div class="empty-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4a3 3 0 0 1 6 0"/><path d="M9 10h6M9 14h6M9 18h4"/></svg></div>
                  <p>尚无店铺<br><small>点击右上角「+ 添加店铺」手动录入</small></p>
                </div>
              </div>
            </div>

          </div>
        </div>

      </main>
    </div>

    <!-- ==================== 视觉生成 ==================== -->
    <div id="viewGen" class="view">
      <main class="content">
        <div class="page-header">
          <div>
            <h1>视觉生成</h1>
            <div class="sub">基于已采集的菜品图片，批量生成 LOGO / 海报 / 招牌 / 贴纸 + 菜品图</div>
          </div>
          <div class="toolbar">
            <button class="btn btn-ghost btn-small" id="btnRefreshGen">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.3-5.6"/><path d="M20 4v5h-5"/></svg>
              刷新
            </button>
          </div>
        </div>

        <div class="gen-overview">
          <div class="stats-grid" id="statsBar">
            <div class="metric accent"><span class="metric-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V9l8-5 8 5v11"/><path d="M9 20v-6h6v6"/></svg></span><span class="metric-body"><span class="metric-label">店铺</span><span class="metric-value" id="statShops">—</span><span class="stat-delta" id="statShopsDelta"></span></span></div>
            <div class="metric ok"><span class="metric-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><span class="metric-body"><span class="metric-label">已生成</span><span class="metric-value" id="statDone">—</span><span class="stat-delta" id="statDoneDelta"></span></span></div>
            <div class="metric warn"><span class="metric-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 3h10M7 21h10"/><path d="M8 3c0 8 8 8 8 18M16 3c0 8-8 8-8 18"/></svg></span><span class="metric-body"><span class="metric-label">待处理</span><span class="metric-value" id="statPending">—</span><span class="stat-delta" id="statPendingDelta"></span></span></div>
            <div class="metric fail"><span class="metric-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 16.5v.5"/></svg></span><span class="metric-body"><span class="metric-label">失败</span><span class="metric-value" id="statFail">—</span><span class="stat-delta" id="statFailDelta"></span></span></div>
          </div>
          <div class="gen-controls">
            <div class="field">
              <label>扫描范围</label>
              <div class="scan-dropdown" id="scanDropdown">
                <button type="button" class="scan-dropdown-trigger" id="scanDropdownTrigger" aria-expanded="false" aria-haspopup="listbox">
                  <span id="scanDropdownText">全量扫描</span>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
                </button>
                <div class="scan-dropdown-menu" id="scanDropdownMenu" role="listbox" aria-multiselectable="true" hidden></div>
              </div>
            </div>
            <button class="btn btn-primary" id="scanBtn">
              <span id="scanIcon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></span>
              <span id="scanText">扫描店铺</span>
            </button>
          </div>
        </div>

        <div class="shop-cards" id="shopList"></div>
      </main>
    </div>

    <!-- ==================== 历史创作 ==================== -->
    <div id="viewTasks" class="view">
      <main class="content">
        <div class="page-header">
          <div>
            <h1>任务中心</h1>
            <div class="sub">跟踪生成任务状态，服务重启后可恢复进行中的生成任务</div>
          </div>
          <div class="toolbar">
            <button class="btn btn-ghost btn-small" id="btnRefreshTasks">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.3-5.6"/><path d="M20 4v5h-5"/></svg>
              刷新
            </button>
          </div>
        </div>
        <div class="tasks-overview panel panel-designed">
          <span class="panel-watermark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h10M4 12h16M4 17h7"/><circle cx="18" cy="7" r="2"/><circle cx="15" cy="17" r="2"/></svg></span>
          <div class="tasks-stats">
            <div class="task-stat"><span>全部</span><strong id="taskCountAll">0</strong></div>
            <div class="task-stat running"><span>进行中</span><strong id="taskCountRunning">0</strong></div>
            <div class="task-stat queued"><span>排队</span><strong id="taskCountQueued">0</strong></div>
            <div class="task-stat success"><span>成功</span><strong id="taskCountSuccess">0</strong></div>
            <div class="task-stat failed"><span>失败</span><strong id="taskCountFailed">0</strong></div>
          </div>
          <div class="tasks-filters" id="taskFilters">
            <button class="history-filter active" data-filter="all">全部</button>
            <button class="history-filter" data-filter="running">进行中</button>
            <button class="history-filter" data-filter="queued">排队中</button>
            <button class="history-filter" data-filter="success">已完成</button>
            <button class="history-filter" data-filter="failed">失败</button>
          </div>
        </div>
        <div class="history-summary" id="taskSummary">正在加载任务…</div>
        <div class="task-list" id="taskList"></div>
      </main>
    </div>

    <!-- ==================== 历史创作 ==================== -->
    <div id="viewHistory" class="view">
      <main class="content">
        <div class="page-header">
          <div>
            <h1>历史创作</h1>
            <div class="sub">以图片墙回顾已生成的品牌物料与菜品作品</div>
          </div>
          <div class="toolbar">
            <button class="btn btn-ghost btn-small" id="btnRefreshHistory">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.3-5.6"/><path d="M20 4v5h-5"/></svg>
              刷新
            </button>
          </div>
        </div>
        <div class="history-toolbar panel">
          <div class="history-search">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg>
            <input type="text" id="historySearch" placeholder="搜索门店或作品名称">
          </div>
          <div class="history-filters" id="historyFilters">
            <button class="history-filter active" data-filter="all">全部</button>
            <button class="history-filter" data-filter="logo">LOGO</button>
            <button class="history-filter" data-filter="banner">海报</button>
            <button class="history-filter" data-filter="signage">招牌</button>
            <button class="history-filter" data-filter="sticker">贴纸</button>
            <button class="history-filter" data-filter="dish">菜品</button>
          </div>
        </div>
        <div class="history-summary" id="historySummary">加载中…</div>
        <div class="history-gallery" id="historyGallery"></div>
      </main>
    </div>

    <!-- ==================== 系统设置 ==================== -->
    <div id="viewSettings" class="view">
      <main class="content">
        <div class="page-header">
          <div>
            <h1>系统设置</h1>
            <div class="sub">API 密钥与采集配置，保存后立即生效</div>
          </div>
        </div>
        <div class="settings-workspace">
          <div class="settings-forms">
          <div class="panel panel-narrow">
            <div class="stage-marker"><span class="num">1</span><span>API 设置</span></div>
            <span class="panel-watermark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7.5" cy="15.5" r="4.5"/><path d="M11 12L21 2"/><path d="M16 7l3 3"/></svg></span>
            <div class="panel-body">
              <div class="field">
                <div class="field-label-row">
                  <label>API Key<span class="req">*</span></label>
                  <a class="settings-link settings-link-compact" href="https://o-hubs.com/api/console/keys" target="_blank" rel="noopener noreferrer">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7.5" cy="15.5" r="4.5"/><path d="M11 12L21 2"/><path d="M16 7l3 3"/></svg>
                    <span>获取 API Key</span>
                  </a>
                </div>
                <input type="text" id="settingsApiKey" placeholder="sk-...">
              </div>
              <div class="field">
                <label>API 地址</label>
                <input type="text" id="settingsApiBase" value="https://api.lk888.ai" disabled>
              </div>
	              <div class="field">
	                <label>默认模型</label>
	                <select id="settingsModel"></select>
	              </div>
	              <div class="settings-links">
	                <a class="settings-link" href="https://o-hubs.com/home" target="_blank" rel="noopener noreferrer">
	                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M3 10h18"/><path d="M7 15h3"/></svg>
	                  <span>充值</span>
	                </a>
	              </div>
            </div>
          </div>
          <div class="panel panel-narrow">
            <div class="stage-marker"><span class="num">2</span><span>采集配置</span></div>
            <span class="panel-watermark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/><path d="M3 11h18"/></svg></span>
            <div class="panel-body">
              <div class="field">
                <label>输出根目录</label>
                <input type="text" id="settingsRootDir" placeholder="/path/to/workspace">
              </div>
              <div class="field-row">
                <div class="field">
                  <label>每页条数</label>
                  <input type="number" id="pageSizeInput" min="1" value="50">
                </div>
                <div class="field">
                  <label>间隔 (ms)</label>
                  <input type="number" id="delayInput" min="0" value="300">
                  <div class="help">建议 ≥ 200</div>
                </div>
              </div>
              <div class="field">
                <label>Cookie（淘宝闪购）</label>
	                <textarea id="settingsCookie" rows="3" placeholder="登录 melody.shop.ele.me 后从 DevTools 复制"></textarea>
	                <div class="help">Cookie 保存后不再回显；会话过期时粘贴新值即可更新</div>
              </div>
	              <div style="display:flex;align-items:center;gap:8px;">
	                <button class="btn btn-primary btn-small" id="btnSaveSettings">保存设置</button>
	                <span id="settingsStatus" class="badge"></span>
	              </div>
	            </div>
	          </div>
	          </div>
	          <div class="panel panel-fixed panel-log settings-log">
            <div class="panel-title">
              <span>实时日志</span>
              <span class="actions">
                <button class="btn btn-ghost btn-small" id="btnClearLog">清空日志</button>
              </span>
            </div>
            <span class="panel-watermark log-watermark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H8l-4 4Z"/><path d="M8 9h8M8 12h5"/></svg></span>
            <div class="log-box" id="logPanel"></div>
          </div>
        </div>
      </main>
    </div>

  </div>
</div>

<div class="toast-wrap" id="toast-wrap"></div>

<!-- 添加店铺弹窗 -->
<div class="modal-overlay" id="modalAddShop" hidden>
  <div class="modal">
    <div class="modal-header">
      <div class="modal-title">
        <span class="modal-status-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V9l8-5 8 5v11"/><path d="M9 20v-6h6v6"/></svg>
        </span>
        <span>添加店铺</span>
      </div>
      <button class="modal-close" id="btnCloseModal">&times;</button>
    </div>
    <div class="modal-body">
      <div class="field">
        <label>店铺清单</label>
        <textarea id="manualInput" rows="5" placeholder="每行一个：shopId 店铺名&#10;507068342 鑫龙福麻辣烫(康诺美食城店)"></textarea>
        <div class="help">每行一条，shopId 和店铺名用空格或逗号分隔</div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost btn-small" id="btnCancelAdd">取消</button>
      <button class="btn btn-primary btn-small" id="useManualBtn">确认添加</button>
    </div>
  </div>
</div>

<script src="/crawl.js"></script>
<script src="/gen.js"></script>
<script src="/tasks.js"></script>
<script src="/history.js"></script>
<script src="/app.js"></script>
</body>
</html>