evomeme 0.1.8 → 0.1.9-beta.14

package/dist/canvas-public/index.html

@@ -38,19 +38,48 @@
             <button type="button" class="ghost-btn" id="inspector-close" title="取消选中">×</button>
           </header>
           <div class="inspector-body" id="inspector-body"></div>
+          <div
+            class="inspector-resize-handle"
+            id="inspector-resize-handle"
+            role="separator"
+            aria-label="调整左侧栏宽度"
+            aria-orientation="vertical"
+            tabindex="0"
+          ></div>
         </aside>
         <div class="canvas-main">
           <div class="canvas-shell">
             <div class="canvas-toolbar">
+              <span class="product-brand">EVOMEME</span>
               <div class="project-bar">
                 <span class="project-name" id="project-name" title="">未打开工程</span>
                 <button type="button" class="ghost-btn" id="switch-project-btn">切换工程</button>
               </div>
               <div class="toolbar-actions" id="toolbar-actions">
-                <button type="button" class="tool-btn" id="tool-add-assets">添加素材</button>
-                <button type="button" class="tool-btn" id="tool-image-gen" title="拖到画布指定位置创建图片生成元素">图片生成</button>
-                <button type="button" class="tool-btn" id="tool-video-gen" title="拖到画布指定位置创建视频生成元素">视频生成</button>
-                <button type="button" class="ghost-btn" id="reset-view">重置视图</button>
+                <div class="toolbar-primary" role="tablist" aria-label="画布功能分类">
+                  <button type="button" class="toolbar-primary-button toolbar-category-tab" id="tool-add-assets" role="tab" aria-selected="false" aria-expanded="false" aria-controls="toolbar-asset-tools"><span>添加素材</span><i class="toolbar-category-indicator" aria-hidden="true"></i></button>
+                  <button type="button" class="toolbar-primary-button toolbar-category-tab" id="toolbar-image-tab" role="tab" aria-selected="false" aria-expanded="false" aria-controls="toolbar-image-tools"><span>图片生成</span><i class="toolbar-category-indicator" aria-hidden="true"></i></button>
+                  <button type="button" class="toolbar-primary-button toolbar-category-tab" id="toolbar-video-tab" role="tab" aria-selected="false" aria-expanded="false" aria-controls="toolbar-video-tools"><span>视频生成</span><i class="toolbar-category-indicator" aria-hidden="true"></i></button>
+                </div>
+                <div class="toolbar-ribbon" id="toolbar-ribbon" hidden>
+                  <div class="toolbar-ribbon-panel" id="toolbar-asset-tools" role="tabpanel" hidden>
+                    <button type="button" class="toolbar-ribbon-tool toolbar-ribbon-action" id="tool-local-assets" title="从本地选择图片或视频"><span>本地导入</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-official-assets" title="拖到画布指定位置打开官方素材库"><span>官方素材</span></button>
+                  </div>
+                  <div class="toolbar-ribbon-panel" id="toolbar-image-tools" role="tabpanel" hidden>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-image-gen" title="拖到画布指定位置创建图片生成元素"><span>图片生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-game-ui-gen" title="拖到画布指定位置创建游戏 UI 组件生成元素"><span>游戏 UI 组件生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-four-view" title="拖到画布指定位置创建空白四视图生成元素"><span>角色四视图生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-eight-direction" title="拖到画布指定位置创建空白八方图生成元素"><span>角色八方图生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-seamless-tile-gen" title="拖到画布指定位置创建无缝地块生成元素"><span>无缝地块生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-tile-transition-atlas" title="拖到画布指定位置创建无缝地块集生成元素"><span>无缝地块集生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-tile-map" title="先设置文件夹和瓦片分辨率，再创建地图"><span>地图绘制</span></button>
+                  </div>
+                  <div class="toolbar-ribbon-panel" id="toolbar-video-tools" role="tabpanel" hidden>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-video-gen" title="拖到画布指定位置创建视频生成元素"><span>视频生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-animation-gen" title="拖到画布指定位置创建序列帧动画生成管线"><span>序列帧动画生成</span></button>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="canvas-viewport" id="viewport">
@@ -65,25 +94,110 @@
       <div class="ctx-menu" id="ctx-menu" hidden>
         <button type="button" data-action="copy">复制</button>
         <button type="button" data-action="paste" hidden>粘贴</button>
-        <button type="button" data-action="cutout" hidden>智能抠图</button>
+        <button type="button" data-action="export-tile-map" hidden>导出 PNG</button>
+        <button type="button" data-action="image-canvas-size" hidden>图片大小编辑</button>
         <button type="button" data-action="interactive-edit" hidden>交互编辑</button>
-        <button type="button" data-action="layer-decomposition" hidden>大模型图层分离</button>
+        <button type="button" data-action="perfect-pixel" hidden>完美像素化</button>
+        <div class="ctx-submenu" data-submenu="cutout" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>抠图</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="cutout" hidden>智能抠图</button>
+            <button type="button" role="menuitem" data-action="color-key" hidden>颜色剔除</button>
+          </div>
+        </div>
         <button type="button" data-action="video-cycle" hidden>智能周期提取</button>
         <button type="button" data-action="video-to-frame-sheet" hidden>视频转序列帧图</button>
-        <button type="button" data-action="smart-split">智能切分</button>
-        <button type="button" data-action="manual-split">手动切分</button>
-        <button type="button" data-action="frame-sheet-preview" hidden>序列帧预览</button>
-        <button type="button" data-action="frame-sheet-edit" hidden>序列帧编辑</button>
+        <div class="ctx-submenu" data-submenu="image-split" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>图片切分</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="smart-split">智能切分</button>
+            <button type="button" role="menuitem" data-action="manual-split">手动切分</button>
+            <button type="button" role="menuitem" data-action="layer-decomposition" hidden>大模型图层分离</button>
+          </div>
+        </div>
+        <div class="ctx-submenu" data-submenu="frame-sheet" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>序列帧</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="frame-sheet-preview" hidden>序列帧预览</button>
+            <button type="button" role="menuitem" data-action="frame-sheet-edit" hidden>序列帧编辑</button>
+          </div>
+        </div>
+        <div class="ctx-submenu" data-submenu="character-views" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>角色多视角生成</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="four-view" hidden>四视图生成</button>
+            <button type="button" role="menuitem" data-action="eight-direction" hidden>八方图生成</button>
+          </div>
+        </div>
+        <div class="ctx-submenu" data-submenu="map-tiles" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>地图瓦片</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="seam-elimination" hidden>瓦片缝隙消除</button>
+            <button type="button" role="menuitem" data-action="tile-transition-atlas" hidden>地图集生成</button>
+          </div>
+        </div>
         <button type="button" data-action="delete" class="ctx-danger">删除</button>
       </div>
 
+      <div class="modal-backdrop modal-backdrop-dark" id="image-canvas-size-modal" hidden>
+        <div class="modal-dialog modal-dialog-image-canvas-size" role="group" aria-labelledby="image-canvas-size-title">
+          <div class="seq-panel-head">
+            <strong id="image-canvas-size-title">图片大小编辑</strong>
+            <button type="button" class="ghost-btn" id="image-canvas-size-close">关闭</button>
+          </div>
+          <div class="image-canvas-size-stage" id="image-canvas-size-stage">
+            <canvas id="image-canvas-size-preview"></canvas>
+            <div class="image-canvas-size-frame" id="image-canvas-size-frame">
+              <button type="button" class="image-canvas-size-edge is-top" data-edge="top" aria-label="拖动上边缘"></button>
+              <button type="button" class="image-canvas-size-edge is-right" data-edge="right" aria-label="拖动右边缘"></button>
+              <button type="button" class="image-canvas-size-edge is-bottom" data-edge="bottom" aria-label="拖动下边缘"></button>
+              <button type="button" class="image-canvas-size-edge is-left" data-edge="left" aria-label="拖动左边缘"></button>
+            </div>
+          </div>
+          <div class="image-canvas-size-fields">
+            <label class="seq-field">
+              宽度
+              <input type="number" id="image-canvas-size-width" min="1" max="16384" step="1" />
+              <span>px</span>
+            </label>
+            <label class="seq-field">
+              高度
+              <input type="number" id="image-canvas-size-height" min="1" max="16384" step="1" />
+              <span>px</span>
+            </label>
+          </div>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="image-canvas-size-reset">重置</button>
+            <button type="button" class="ghost-btn" id="image-canvas-size-cancel">取消</button>
+            <button type="button" class="tool-btn" id="image-canvas-size-confirm">应用</button>
+          </div>
+        </div>
+      </div>
+
       <div class="modal-backdrop modal-backdrop-dark" id="interactive-edit-modal" hidden>
-        <div class="modal-dialog modal-dialog-interactive-edit" role="dialog" aria-modal="true" aria-labelledby="interactive-edit-title">
+        <div class="modal-dialog modal-dialog-interactive-edit" role="group" aria-labelledby="interactive-edit-title">
           <div class="seq-panel-head">
             <strong id="interactive-edit-title">交互编辑</strong>
             <button type="button" class="ghost-btn" id="interactive-edit-close">关闭</button>
           </div>
-          <div class="interactive-editor-host" id="interactive-editor-host"></div>
+          <div class="interactive-editor-stage">
+            <div class="interactive-editor-host" id="interactive-editor-host"></div>
+            <label class="interactive-edit-zoom" for="interactive-edit-zoom">
+              <span>缩放</span>
+              <input type="range" id="interactive-edit-zoom" min="1" max="400" step="1" value="100" />
+              <output id="interactive-edit-zoom-value" for="interactive-edit-zoom">100%</output>
+            </label>
+          </div>
           <div class="interactive-edit-compose">
             <label class="layer-decomposition-prompt" for="interactive-edit-prompt">
               编辑要求
@@ -93,7 +207,14 @@
                 placeholder="例如：将框选区域替换为木质宝箱，并保持其他内容不变"
               ></textarea>
             </label>
-            <p class="modal-hint">画面标记和文字会合并到参考图中，并使用 Pro 模型生成。</p>
+            <label class="interactive-edit-model" for="interactive-edit-model">
+              <span>模型</span>
+              <select id="interactive-edit-model">
+                <option value="asset-pro">Pro</option>
+                <option value="asset-max">Max</option>
+              </select>
+            </label>
+            <p class="modal-hint">画面标记和文字会合并到参考图中，再使用所选模型生成。</p>
             <p class="modal-hint" id="interactive-edit-status" hidden></p>
             <div class="modal-actions">
               <button type="button" class="ghost-btn" id="interactive-edit-cancel">取消</button>
@@ -104,8 +225,42 @@
         </div>
       </div>
 
+      <div class="modal-backdrop modal-backdrop-dark" id="seam-elimination-modal" hidden>
+        <div class="modal-dialog modal-dialog-seam-elimination" role="group" aria-labelledby="seam-elimination-title">
+          <div class="seq-panel-head">
+            <strong id="seam-elimination-title">缝隙消除</strong>
+            <button type="button" class="ghost-btn" id="seam-elimination-close">关闭</button>
+          </div>
+          <div class="seam-elimination-preview">
+            <img id="seam-elimination-image" alt="待处理地砖预览" />
+          </div>
+          <label class="layer-decomposition-prompt" for="seam-elimination-prompt">
+            地砖描述
+            <textarea
+              id="seam-elimination-prompt"
+              rows="4"
+              placeholder="描述地砖的内容、材质和美术风格"
+            ></textarea>
+          </label>
+          <label class="interactive-edit-model" for="seam-elimination-model">
+            <span>模型</span>
+            <select id="seam-elimination-model"></select>
+          </label>
+          <div class="seam-elimination-size-row">
+            <span>输出尺寸</span>
+            <output id="seam-elimination-size">读取中…</output>
+          </div>
+          <p class="modal-hint">输出尺寸锁定为输入图片的像素尺寸。</p>
+          <p class="modal-hint" id="seam-elimination-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="seam-elimination-cancel">取消</button>
+            <button type="button" class="tool-btn" id="seam-elimination-confirm">开始处理</button>
+          </div>
+        </div>
+      </div>
+
       <div class="modal-backdrop modal-backdrop-dark" id="layer-decomposition-modal" hidden>
-        <div class="modal-dialog modal-dialog-layer-decomposition" role="dialog" aria-modal="true" aria-labelledby="layer-decomposition-title">
+        <div class="modal-dialog modal-dialog-layer-decomposition" role="group" aria-labelledby="layer-decomposition-title">
           <div class="seq-panel-head">
             <strong id="layer-decomposition-title">大模型图层分离</strong>
             <button type="button" class="ghost-btn" id="layer-decomposition-close">关闭</button>
@@ -131,7 +286,7 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="video-cycle-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="video-cycle-title">
+        <div class="modal-dialog" role="group" aria-labelledby="video-cycle-title">
           <div class="seq-panel-head">
             <strong id="video-cycle-title">智能周期提取</strong>
             <button type="button" class="ghost-btn" id="video-cycle-close">关闭</button>
@@ -172,15 +327,23 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="smart-split-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="smart-split-title">
+        <div class="modal-dialog" role="group" aria-labelledby="smart-split-title">
           <div class="seq-panel-head">
             <strong id="smart-split-title">智能切分</strong>
             <button type="button" class="ghost-btn" id="smart-split-close">关闭</button>
           </div>
           <p class="modal-hint">
-            切分结果统一为最大主体的宽度和高度。选择主体在扩展区域中的固定基准点；主体不会缩放。
+            自动识别并裁出彼此分离的主体；主体不会缩放。
           </p>
-          <div class="split-anchor-grid" id="smart-split-anchor-grid" role="radiogroup" aria-label="扩展基准点">
+          <label class="smart-split-size-toggle">
+            <input type="checkbox" id="smart-split-pad-to-same-size" checked />
+            <span>
+              <strong>补全为相同图片大小</strong>
+              <small>只在裁切结果周围填充透明像素，不扩大原图裁切范围。</small>
+            </span>
+          </label>
+          <p class="modal-hint">透明补全时主体的对齐位置：</p>
+          <div class="split-anchor-grid" id="smart-split-anchor-grid" role="radiogroup" aria-label="透明补全对齐位置">
             <button type="button" class="split-anchor-btn" data-anchor="top-left" role="radio" aria-checked="false"><span></span>左上</button>
             <button type="button" class="split-anchor-btn" data-anchor="top" role="radio" aria-checked="false"><span></span>上</button>
             <button type="button" class="split-anchor-btn" data-anchor="top-right" role="radio" aria-checked="false"><span></span>右上</button>
@@ -200,7 +363,7 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="manual-split-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="manual-split-title">
+        <div class="modal-dialog" role="group" aria-labelledby="manual-split-title">
           <div class="seq-panel-head">
             <strong id="manual-split-title">手动切分</strong>
             <button type="button" class="ghost-btn" id="manual-split-close">关闭</button>
@@ -229,7 +392,7 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="frame-extract-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="frame-extract-title">
+        <div class="modal-dialog" role="group" aria-labelledby="frame-extract-title">
           <div class="seq-panel-head">
             <strong id="frame-extract-title">视频转序列帧图</strong>
             <button type="button" class="ghost-btn" id="frame-extract-close">关闭</button>
@@ -238,9 +401,9 @@
             均匀抽取视频帧后，自动按从左到右、从上到下的顺序拼成一张 PNG 图片。
           </p>
           <label class="seq-field frame-extract-field">
-            抽取帧数
-            <input type="number" id="frame-extract-count" min="2" max="30" step="1" value="10" />
-            <span class="frame-extract-range">2 – 30</span>
+            FPS
+            <input type="number" id="frame-extract-fps" min="0.1" max="60" step="0.1" value="8" />
+            <span class="frame-extract-range">0.1 – 60</span>
           </label>
           <p class="modal-hint" id="frame-extract-status" hidden></p>
           <div class="modal-actions">
@@ -251,7 +414,7 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="frame-preview-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="frame-preview-title">
+        <div class="modal-dialog" role="group" aria-labelledby="frame-preview-title">
           <div class="seq-panel-head">
             <strong id="frame-preview-title">序列帧预览</strong>
             <button type="button" class="ghost-btn" id="frame-preview-close">关闭</button>
@@ -284,7 +447,7 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="frame-editor-split-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="frame-editor-split-title">
+        <div class="modal-dialog" role="group" aria-labelledby="frame-editor-split-title">
           <div class="seq-panel-head">
             <strong id="frame-editor-split-title">创建序列帧编辑器</strong>
             <button type="button" class="ghost-btn" id="frame-editor-split-close">关闭</button>