feat: 移动端适配 + 仓库整理（README/LICENSE/.gitignore）

Author: tyuecode

.gitignore

@@ -0,0 +1,11 @@
+# 操作系统 / 编辑器
+.DS_Store
+Thumbs.db
+*.swp
+
+# 依赖与构建
+node_modules/
+*.log
+
+# 临时文件
+*.tmp

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 tangyue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,29 +1,64 @@
 # strokeoil · 油画工序逐笔重绘
 
-在浏览器里把任意图片重绘成「按真实油画十道工序逐笔画出」的动画。
+把任意图片重绘成「按真实油画十道工序逐笔画出」的动画。**纯前端实现，图片不上传、无需后端**，可直接托管到 GitHub Pages。
 
-- **纯前端**：所有计算在访客浏览器里完成，图片不上传，无后端
-- **可下载**：生成的播放器是单个 HTML 文件，双击就能离线打开
-- **十道工序**：刷底色 → 起稿 → 单色底层 → 铺大色 → 塑造 → 塑形 → 罩染 → 干扫 → 细部 → 提白
+在线体验：<https://tangyue.me/>
+
+## 特点
+
+- 🎨 **真实油画工序**：刷底色 → 起稿 → 单色底层 → 铺大色 → 塑造 → 塑形 → 罩染 → 干扫 → 细部 → 提白，十道工序顺序严格
+- 🖌 **物理笔触**：起收锋、笔毛分叉、颜料渐枯、厚涂浮雕、罩染透叠
+- 📱 **响应式**：桌面双栏、移动端单栏，自动适配触屏
+- 🔒 **本地处理**：图片只在你的浏览器里，绝不联网上传
+- 📦 **可下载**：生成结果打包成单个 HTML 文件，双击离线播放、随意分享
+- ⚡ **快**：1500px 图约 1.5–3 秒，8 万条笔触
 
 ## 使用
 
-1. 打开网站
-2. 拖入图片（PNG / JPG / WEBP）
-3. 调「细腻程度」和「动画时长」
-4. 点「开始生成」，1.5–3 秒出结果
-5. 页面内实时预览，或下载单文件播放器 HTML
+1. 打开网站（或本地 `python -m http.server` 后访问）
+2. 拖入 / 选择图片（PNG / JPG / WEBP）
+3. 调「细腻程度」「动画时长」「处理精度」
+4. 点「开始生成」
+5. 页面内实时预览，或下载单文件播放器
 
-## 技术
+## 文件结构
 
 | 文件 | 说明 |
 |---|---|
-| `index.html` | 主页面 |
-| `core.js` | 算法核心：五层 k-means 分层、Canny 边缘、结构张量方向场、十道工序笔触生成、严格串行时间轴 |
+| `index.html` | 主页面（上传、调参、实时预览、下载） |
+| `core.js` | 算法核心 |
 | `worker.js` | Web Worker，后台生成不卡界面 |
-| `player-template.html` | 下载用单文件播放器模板 |
+| `player-template.html` | 下载用的单文件播放器模板 |
+| `CNAME` | 自定义域名（tangyue.me） |
+| `.github/workflows/deploy.yml` | GitHub Pages 自动部署 |
+
+## 算法原理
+
+**分层定色、结构张量定走向、工序定笔触语言、串行时间轴定节奏。**
+
+1. **五层明暗分层**：在 L\*（亮度）× S（饱和度）平面上做 k-means，把人像与背景按材质分开
+2. **轮廓与方向**：Canny 提取边缘，结构张量（Sobel → 特征分解）求每一笔的走向；平坦区改用低频方向场，避免笔触乱指
+3. **十道工序**：每道工序有自己的笔宽、密度、透明度与颜色处理，宽度逐档过渡（否则细笔硬盖巨笔会毛躁）
+4. **严格串行**：`start[i] == start[i-1] + dur[i-1]`，逐条校验零重叠零断点
+5. **颜色取自原图**：沿笔触取中位色，只做轻微抖动，绝不用调色板
+
+## 部署到 GitHub Pages
+
+仓库本身就是 Pages 站点，`main` 分支 + GitHub Actions 自动部署。
+
+换成你自己的域名：改 `CNAME` 文件内容即可。
+
+其他静态托管（Cloudflare Pages / Netlify / Vercel）同样适用——四个静态文件，无构建步骤。
+
+## 本地开发
+
+```bash
+python -m http.server 8000
+# 访问 http://localhost:8000/
+```
+
+> 注意：不要用 `file://` 直接双击 `index.html`，Web Worker 和 fetch 会被浏览器拦截。
 
-## 原理
+## 许可证
 
-分层定色、结构张量定走向、工序定笔触语言、串行时间轴定节奏。
-详见 `gh-pages/README.md` 或项目根目录的完整源码。
+MIT

index.html

@@ -2,7 +2,8 @@
 <html lang="zh-CN">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<meta name="theme-color" content="#0f0d0b">
 <title>strokeoil · 油画工序重绘</title>
 <meta name="description" content="在浏览器里把图片重绘成按真实油画十道工序逐笔绘制的动画，全部本地处理，不上传。">
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23d9a441'/%3E%3Cpath d='M7 22c4-9 8-12 11-12s5 3 7 12' stroke='%2317130c' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
@@ -33,6 +34,7 @@
   #drop .ico{font-size:34px;opacity:.55;margin-bottom:8px}
   #drop .t1{font-size:14.5px;margin-bottom:4px}
   #drop .t2{font-size:12px;color:var(--dim2)}
+  .pickBtn{display:none;margin:12px auto 0;min-height:40px;padding:8px 20px}
   #thumbWrap{display:none;margin-top:14px}
   #thumb{width:100%;border-radius:10px;display:block;outline:1px solid var(--line2)}
   .fname{font-size:12px;color:var(--dim);margin-top:7px;display:flex;justify-content:space-between}
@@ -93,6 +95,59 @@
          color:var(--gold);border:1px solid rgba(217,164,65,.3)}
   footer{margin-top:34px;font-size:11.5px;color:var(--dim2);line-height:1.9;text-align:center}
   footer a{color:var(--dim)}
+
+  /* ---------------- 移动端适配 ---------------- */
+  /* 让触控目标达到 44px 最小可点区域 */
+  @media(max-width:720px){
+    .wrap{padding:16px 14px 60px}
+    h1{font-size:21px}
+    .sub{font-size:12px}
+    .flow{font-size:11.5px;margin:4px 0 18px;line-height:1.9}
+    .grid{grid-template-columns:1fr;gap:14px}
+    .card{padding:14px;border-radius:14px}
+    .card h2{font-size:12.5px;margin-bottom:11px}
+
+    /* 拖拽区更大更易点 */
+    #drop{padding:28px 16px;border-radius:12px}
+    #drop .ico{font-size:30px}
+    #drop .t1{font-size:13.5px}
+    #drop .t2{font-size:11px;line-height:1.6}
+    .pickBtn{display:block}     /* 手机上显示明确的按钮 */
+
+    /* 参数行改成上下堆叠，label 不占固定宽度 */
+    .row{flex-wrap:wrap;gap:8px;margin:13px 0}
+    .row label{width:100%;font-size:12px}
+    .row .val{width:auto;margin-left:auto}
+    .row input[type=range]{flex:1;height:32px}         /* 加高滑动条触控区 */
+    .row select,.row input[type=number],.row input[type=text]{
+      width:100%;padding:10px 12px;font-size:14px;      /* 手机输入避免缩放 */
+      min-height:44px;border-radius:10px}
+    .row input[type=number]{width:100%}
+
+    button{min-height:46px;padding:12px 18px;font-size:14.5px;border-radius:12px}
+    button.primary{padding:14px;font-size:15.5px}
+
+    /* 结果数字与 KV */
+    #result .big{font-size:30px}
+    .kv{grid-template-columns:1fr 1fr;gap:7px 10px;font-size:12px}
+
+    /* 下载按钮竖排，方便拇指点 */
+    .files{flex-direction:column}
+    .files a,.files button{min-width:0;padding:13px;font-size:13.5px;min-height:46px}
+
+    /* 预览画布占满宽度 */
+    .tips{font-size:11.5px}
+
+    /* 高级选项 summary 也加大触控区 */
+    .adv summary{min-height:40px;display:flex;align-items:center;font-size:13px}
+  }
+
+  /* 中屏（平板）：两栏但缩小间距 */
+  @media(min-width:721px) and (max-width:940px){
+    .wrap{padding:24px 18px 70px}
+    .grid{gap:14px}
+    .card{padding:15px}
+  }
 </style>
 </head>
 <body>
@@ -111,6 +166,7 @@ <h2>① 选一张图</h2>
           <div class="ico">🖼</div>
           <div class="t1">把图片拖到这里，或点击选择</div>
           <div class="t2">PNG / JPG / WEBP · 图片不会上传，全部在本机处理</div>
+          <button type="button" class="pickBtn" id="pickBtn">选择图片</button>
         </div>
         <input type="file" id="file" accept="image/*" hidden>
         <div id="thumbWrap">
@@ -132,14 +188,18 @@ <h2>② 调参数</h2>
           <div class="val" id="secsV">90s</div>
         </div>
         <div class="row">
-          <label>画质</label>
-          <select id="quality">
-            <option value="1.8">标准（快）</option>
-            <option value="2.3" selected>高清（推荐）</option>
-            <option value="3.0">超清（吃内存）</option>
+          <label>处理精度</label>
+          <select id="workRes">
+            <option value="1000">快（1000px）</option>
+            <option value="1400" selected>标准（1400px）</option>
+            <option value="2000">精（2000px）</option>
+            <option value="0">原始分辨率（最慢）</option>
           </select>
           <div class="val"></div>
         </div>
+        <div class="tips" style="margin-top:-4px">
+          手机建议用「快」，电脑可用「标准」或更高。
+        </div>
         <details class="adv">
           <summary>高级选项</summary>
           <div class="row">
@@ -155,16 +215,6 @@ <h2>② 调参数</h2>
             <input type="range" id="rois" min="0" max="14" step="1" value="6">
             <div class="val" id="roisV">6</div>
           </div>
-          <div class="row">
-            <label>分析分辨率</label>
-            <select id="workRes">
-              <option value="1000">快（1000px）</option>
-              <option value="1400" selected>标准（1400px）</option>
-              <option value="2000">精（2000px）</option>
-              <option value="0">原始分辨率（最慢）</option>
-            </select>
-            <div class="val"></div>
-          </div>
           <div class="row">
             <label>随机种子</label>
             <input type="number" id="seed" value="20261109" step="1" style="width:120px">
@@ -234,9 +284,22 @@ <h2>说明</h2>
 let curFile = null, curImg = null, curRGBA = null, curW = 0, curH = 0;
 let worker = null, result = null;
 
+/* ---------------- 移动端自适应 ---------------- */
+(function adaptMobile() {
+  const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
+                   || (window.matchMedia && window.matchMedia('(max-width:720px)').matches);
+  const lowMem = (navigator.deviceMemory && navigator.deviceMemory <= 4) || isMobile;
+  if (lowMem) {
+    // 手机/小内存默认用最快精度，避免卡顿和内存溢出
+    const sel = $('workRes');
+    if (sel && sel.value === '1400') { sel.value = '1000'; }
+  }
+})();
+
 /* ---------------- 文件选择 ---------------- */
-const drop = $('drop'), fileIn = $('file');
+const drop = $('drop'), fileIn = $('file'), pickBtn = $('pickBtn');
 drop.onclick = () => fileIn.click();
+if (pickBtn) pickBtn.onclick = (e) => { e.stopPropagation(); fileIn.click(); };
 ['dragenter','dragover'].forEach(ev => drop.addEventListener(ev, e => {
   e.preventDefault(); drop.classList.add('on');
 }));
@@ -286,13 +349,26 @@ <h2>说明</h2>
   $('result').style.display = 'none';
   setProg(2); setStat('读取像素…');
 
-  // 抽像素
+  // 抽像素：超大图先降采样到安全上限（手机内存保护）
+  const MAX_PIXELS = 16e6;   // 约 4000×4000
+  let srcW = curW, srcH = curH, srcImg = curImg;
+  if (curW * curH > MAX_PIXELS) {
+    const k = Math.sqrt(MAX_PIXELS / (curW * curH));
+    srcW = Math.round(curW * k); srcH = Math.round(curH * k);
+    const tc = document.createElement('canvas');
+    tc.width = srcW; tc.height = srcH;
+    tc.getContext('2d').drawImage(curImg, 0, 0, srcW, srcH);
+    srcImg = tc;
+    setStat('超大图，已自动缩到 ' + srcW + '×' + srcH + ' 处理…');
+  }
   const cv = document.createElement('canvas');
-  cv.width = curW; cv.height = curH;
+  cv.width = srcW; cv.height = srcH;
   const cx = cv.getContext('2d', { willReadFrequently: true });
-  cx.drawImage(curImg, 0, 0);
-  const data = cx.getImageData(0, 0, curW, curH).data;
+  cx.drawImage(srcImg, 0, 0);
+  const data = cx.getImageData(0, 0, srcW, srcH).data;
   curRGBA = new Uint8ClampedArray(data.buffer.slice(0));
+  // 后续用实际抽样的尺寸作为画布尺寸
+  const procW = srcW, procH = srcH;
 
   const opts = {
     layers: +$('layers').value,
@@ -327,7 +403,7 @@ <h2>说明</h2>
     setStat('Worker 出错：' + e.message, true);
     $('go').disabled = false;
   };
-  worker.postMessage({ type: 'generate', rgba: curRGBA, w: curW, h: curH, opts }, [curRGBA.buffer]);
+  worker.postMessage({ type: 'generate', rgba: curRGBA, w: procW, h: procH, opts }, [curRGBA.buffer]);
 };
 
 function renderLayers(layers) {
@@ -338,6 +414,10 @@ <h2>说明</h2>
 function showResult(r) {
   $('result').style.display = 'block';
   $('hint').style.display = 'none';
+  // 手机上结果在下方，滚动过去让用户看到
+  setTimeout(() => {
+    try { $('result').scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch (_) {}
+  }, 150);
   $('rStrokes').textContent = r.strokes.length.toLocaleString();
   const ok = r.breaks === 0 ? '<b style="color:var(--ok)">通过</b>' : '<b style="color:var(--err)">' + r.breaks + ' 处断裂</b>';
   const totalMB = (new Blob([JSON.stringify(r.strokes)]).size / 1024 / 1024).toFixed(1);