@biunow/agent-biuart 0.1.1 → 0.1.3

package/bin/server.mjs

@@ -118,12 +118,12 @@ async function renderThumb(cfg, engineRoot, item, kind) {
     if (kind === 'style' && item.era) {
       await render({
         engineRoot, out: tmpDir, solo: item.era, film: item.film || '',
-        stills: '1.2', width: 480, height: 270,
+        stills: '1.2', stillWidth: 640,
       });
     } else {
       const example = path.join(engineRoot, 'examples', `${item.id}.json`);
       if (!fs.existsSync(example)) throw new Error(`缺少示例 spec：examples/${item.id}.json`);
-      await render({ engineRoot, out: tmpDir, specPath: example, stills: '0.8' });
+      await render({ engineRoot, out: tmpDir, specPath: example, stills: '0.8', stillWidth: 640 });
     }
     const png = fs.readdirSync(tmpDir).find((name) => name.endsWith('.png'));
     if (!png) throw new Error('引擎没有产出静帧');

package/lib/render-bridge.mjs

@@ -472,8 +472,25 @@ export async function render(options) {
       const dir = path.resolve(out);
       fs.mkdirSync(dir, { recursive: true });
       const times = String(stills).split(',').map(Number).filter(Number.isFinite);
+      // stillWidth：先在原尺寸渲完整构图，再等比缩到指定宽度（引擎场景按 1920 坐标写死，直接小画布渲会被裁成左上角）
+      const stillWidth = Number(options.stillWidth || 0);
       for (const time of times) {
-        const base64 = await grab(time);
+        let base64 = await grab(time);
+        if (stillWidth > 0) {
+          base64 = await page.evaluate(({ b64, w }) => new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+              const k = Math.min(1, w / img.width);
+              const c2 = document.createElement('canvas');
+              c2.width = Math.round(img.width * k);
+              c2.height = Math.round(img.height * k);
+              c2.getContext('2d').drawImage(img, 0, 0, c2.width, c2.height);
+              resolve(c2.toDataURL('image/png').split(',')[1]);
+            };
+            img.onerror = () => reject(new Error('静帧缩放失败'));
+            img.src = `data:image/png;base64,${b64}`;
+          }), { b64: base64, w: stillWidth });
+        }
         fs.writeFileSync(path.join(dir, `t${time.toFixed(2).padStart(6, '0')}.png`), Buffer.from(base64, 'base64'));
       }
       return { out: dir, mode: 'stills', frames: times.length, stills: times, errors, engineRoot };

package/manifest.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "id": "biuart",
   "name": "BiuArt",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "publisher": "Biunow",
   "description": "BiuArt 艺术动画：锁定一种画风，用代码画出会动的画面，一镜一镜渲成片。",
   "entry": {
@@ -45,8 +45,8 @@
     "requiresEntitlement": "export"
   },
   "integrity": {
-    "sha256": "5ee503b1ad7e88970c96d450b4edd761b84706421c5d09948c3ac971f888c17f",
-    "signature": "FVdVE6A4jQsji9xub+qwU1+verf60xU+HJEEAm/PjXGrKD0uPi1UiSrkGGp4O1hN+jSJanWrSjgvPzjPbHbNCQ==",
+    "sha256": "abffc8170429a312a02a0275b661336f2c30e652d83e553140eba0e395d501bb",
+    "signature": "mf5AuMQ3vXjnbUpfdpt0Lqi/BxYGeCllJo6W6W2xFuGG0ASAAOEtXwHnpeZkKML+Q6jUacjyyABaR5+ewsbUDA==",
     "signedBy": "publisher-key"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biunow/agent-biuart",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "BiuArt",
   "license": "UNLICENSED",
   "publishConfig": {

package/studio/app.js

@@ -79,14 +79,14 @@
     state.style = item?.id || state.style;
     if (!item) return;
     $('style-group').textContent = item.group || '—';
-    const parts = [item.summary || '', item.previewable ? '可试渲染 2 秒。' : '参数化片段，由代码按 spec 渲染。'];
+    const parts = [item.summary || '', item.previewable ? '可试渲染 2 秒。' : '这一种直接出片，不做试渲染。'];
     $('style-summary').textContent = parts.filter(Boolean).join(' ');
     const canPreview = !!item.previewable && state.meta.enginePresent;
     $('preview').disabled = !canPreview;
-    $('preview').title = canPreview ? '渲一段示例看画风' : (item.previewable ? '引擎未安装' : '这个语法没有内置示例场景');
+    $('preview').title = canPreview ? '渲一段示例看画风' : (item.previewable ? '画风样本准备中' : '这一种没有试渲染');
     $('preview-status').textContent = item.previewable
-      ? (state.meta.enginePresent ? '示例场景可用。' : '引擎未安装。')
-      : '解说语法走 spec，不提供内置预览。';
+      ? (state.meta.enginePresent ? '示例场景可用。' : '样本准备中。')
+      : '';
   }
 
   /* ---------- 小选择器：时长 / 画幅 ---------- */
@@ -216,6 +216,7 @@
         host.prepend(el);
       }
       const mp4 = job.outputMp4 && /\.mp4$/i.test(job.outputMp4);
+      el.className = `job${mp4 ? ' playable' : ''}`;
       el.innerHTML = `
         <div class="job-top">
           <div class="job-title">${escapeHtml(job.title || job.styleName || '任务')}</div>
@@ -223,13 +224,45 @@
         </div>
         <div class="job-msg">${escapeHtml(job.message || '')}</div>
         <div class="job-bar"><span style="width:${Math.max(0, Math.min(100, Number(job.progress) || 0))}%"></span></div>
-        ${mp4 ? `<video class="job-video" controls playsinline preload="metadata" src="/api/file?path=${encodeURIComponent(job.outputMp4)}"></video>` : ''}
-        <div class="job-actions">
-          ${job.projectPath ? `<span class="job-msg">${escapeHtml(job.projectPath)}</span>` : ''}
-          ${job.error ? `<span class="job-msg">${escapeHtml(job.error)}</span>` : ''}
-        </div>
+        ${mp4 ? '<div class="job-play">▷ 点击播放成片</div>' : ''}
+        ${job.error ? `<div class="job-msg">${escapeHtml(job.error)}</div>` : ''}
       `;
+      el.onclick = mp4 ? () => openFilm(job) : null;
+    }
+  }
+
+  /* ---------- 成片弹窗 ---------- */
+  function openFilm(job) {
+    let back = document.querySelector('.film-modal');
+    if (!back) {
+      back = document.createElement('div');
+      back.className = 'film-modal';
+      back.innerHTML = `
+        <div class="film-modal-card" role="dialog" aria-modal="true">
+          <div class="film-modal-bar">
+            <strong></strong>
+            <button type="button" class="film-modal-x" aria-label="关闭">×</button>
+          </div>
+          <video controls playsinline></video>
+        </div>`;
+      document.body.appendChild(back);
+      const close = () => {
+        const video = back.querySelector('video');
+        video.pause();
+        video.removeAttribute('src');
+        video.load();
+        back.hidden = true;
+      };
+      back.querySelector('.film-modal-x').addEventListener('click', close);
+      back.addEventListener('click', (e) => { if (e.target === back) close(); });
+      document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
     }
+    back.querySelector('strong').textContent = job.title || job.styleName || '成片';
+    const src = `/api/jobs/${encodeURIComponent(job.id)}/film`;
+    const video = back.querySelector('video');
+    video.src = src;
+    back.hidden = false;
+    video.play().catch(() => {});
   }
 
   function stateLabel(status) {
@@ -341,15 +374,14 @@
       updateCharHint();
       updateStoryboardHint();
       const chips = [];
-      chips.push(`<span class="chip ${state.meta.enginePresent ? '' : 'bad'}">${state.meta.enginePresent ? '引擎已就绪' : '引擎未安装'}</span>`);
-      if (!state.meta.canExport) chips.push('<span class="chip warn">未激活</span>');
+      chips.push(`<span class="chip ${state.meta.enginePresent ? '' : 'warn'}">${state.meta.enginePresent ? '画风已就绪' : '画风准备中'}</span>`);
+      if (!state.meta.canExport) chips.push('<span class="chip bad">未授权</span>');
+      chips.push(`<span class="chip">${state.meta.styles.length} 种画风</span>`);
       $('health-chips').innerHTML = chips.join('');
-      $('engine-line').textContent = state.meta.enginePresent
-        ? `Engine: ${state.meta.engineRoot}`
-        : 'ENGINE_ROOT 未设置：把面板 settings.engineRoots["biuart"] 指向 huashu-art-motion/scripts/engine。';
       if (!state.meta.enginePresent) {
         $('preview').disabled = true;
         $('submit').disabled = true;
+        showError('BiuArt 暂时还没准备好，请稍后再试；一直不行请联系客服。');
       }
       await refreshJobs();
       setInterval(refreshJobs, 3000);

package/studio/composer.css

@@ -400,7 +400,7 @@ button:disabled { cursor: not-allowed; opacity: .5; }
   display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 7px;
   overflow: hidden; background: #ecece6;
 }
-.sm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.sm-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
 .sm-thumb-ph {
   display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
   font-size: 17px; font-weight: 600; color: var(--muted);
@@ -413,7 +413,7 @@ button:disabled { cursor: not-allowed; opacity: .5; }
   overflow: hidden; animation: sm-in .16s ease-out;
 }
 .sm-preview-img { width: 100%; aspect-ratio: 16 / 9; background: #ecece6; }
-.sm-preview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.sm-preview-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
 .sm-preview-body { padding: 11px 14px 13px; }
 .sm-preview-title { display: flex; align-items: baseline; gap: 8px; }
 .sm-preview-title strong {

package/studio/index.html

@@ -14,7 +14,6 @@
         <div class="eyebrow">BIUART · ART MOTION</div>
         <h1>把画风写成会动的代码</h1>
         <p class="hero-desc">选一种画风，写下要讲的事。BiuArt 先出镜头表，再逐帧渲成片；画面由代码绘制，不靠拼图转场。</p>
-        <div class="sub" id="engine-line">正在检查引擎…</div>
       </div>
       <div class="hero-aside">
         <div class="hero-badge">

package/studio/styles.css

@@ -59,6 +59,12 @@
 .job-bar { height: 4px; border-radius: 99px; background: #ededE7; margin-top: 8px; overflow: hidden; }
 .job-bar > span { display: block; height: 100%; background: var(--accent-deep); transition: width .3s ease; }
 .job-video { width: 100%; border-radius: 8px; margin-top: 8px; background: #111; }
+.job.playable { cursor: pointer; }
+.job.playable:hover { border-color: var(--accent-deep); background: #fbfdf2; }
+.job-play {
+  margin-top: 8px; font-size: 11px; font-weight: 650; color: #4d5c16;
+  background: var(--accent-soft); border-radius: 99px; padding: 4px 10px; display: inline-block;
+}
 .job-actions { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
 .job-actions a { font-size: 11px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
 .empty { color: var(--muted-2); font-size: 12px; padding: 8px 0; }