From b2a5b54eef7618bf14a0afaa526cef46b571f469 Mon Sep 17 00:00:00 2001
From: Shimo-1999 <63487964+Shimo-1999@users.noreply.github.com>
Date: Wed, 22 Oct 2025 00:13:42 +0900
Subject: [PATCH 1/5] chore(web): include bootstrap.bundle and cache els.notice

---
 web/index.html   | 2 ++
 web/js/script.js | 1 +
 2 files changed, 3 insertions(+)

diff --git a/web/index.html b/web/index.html
index b4f4151..4aedf67 100644
--- a/web/index.html
+++ b/web/index.html
@@ -47,6 +47,7 @@ <h3 id="settings-heading" class="section-title mb-3">操作</h3>
               <i class="bi bi-1-circle fs-5 text-primary" aria-hidden="true"></i>
               <h4 class="mb-1">画像選択</h4>
             </div>
+            <div id="notice" class="d-none" role="status" aria-live="polite" aria-atomic="true"></div>
             <div class="d-flex flex-column">
               <label for="fileInput" class="form-label mb-1 small text-muted">ファイル</label>
               <input type="file" id="fileInput" class="form-control form-control-sm" accept="image/png,image/jpeg,image/webp,image/gif,image/svg+xml" aria-describedby="fileHelp">
@@ -164,6 +165,7 @@ <h3 id="preview-heading" class="section-title mb-0">再生・保存</h3>
     <span>© 2025 Rectangle Fitting by <a href="https://github.com/Shimo-1999" target="_blank" rel="noopener">Shimo-1999</a></span>
   </footer>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
   <script src="./vendor/gif.js"></script>
   <script src="./js/script.js" type="module"></script>
   <script type="module">
diff --git a/web/js/script.js b/web/js/script.js
index c5bc874..3c1eede 100644
--- a/web/js/script.js
+++ b/web/js/script.js
@@ -16,6 +16,7 @@ window.addEventListener("DOMContentLoaded", async () => {
 
   // cache DOM
   els = {
+    notice: document.getElementById("notice"),
     fileInput: document.getElementById("fileInput"),
     algo: document.getElementById("algorithm"),
     numRects: document.getElementById("numRectangles"),

From 9aef97d110b9fef1d1be2261153655fd70389d8a Mon Sep 17 00:00:00 2001
From: Shimo-1999 <63487964+Shimo-1999@users.noreply.github.com>
Date: Wed, 22 Oct 2025 00:16:26 +0900
Subject: [PATCH 2/5] enforce image byte/pixel/side limits and block run while
 warn is shown

---
 web/js/script.js | 96 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)

diff --git a/web/js/script.js b/web/js/script.js
index 3c1eede..ace33d2 100644
--- a/web/js/script.js
+++ b/web/js/script.js
@@ -1,5 +1,13 @@
 import init, { Store } from "./../wasm/pkg/wasm.js";
 
+// ---------- limits & notice helpers ----------
+const LIMITS = {
+  IMG_MAX_BYTES: 15 * 1024 * 1024,  // 15MB
+  RECT_MAX_INPUT: 5000,
+  IMG_MAX_PIXELS: 20_000_000,
+  IMG_MAX_SIDE: 8192,
+};
+
 // ---------- module-scope state ----------
 const state = {
   store: null, // wasm Store
@@ -57,6 +65,40 @@ window.addEventListener("DOMContentLoaded", async () => {
   requestAnimationFrame(loop);
 });
 
+function hasActiveWarn() {
+  return !!els.notice?.querySelector(".alert");
+}
+
+function syncRunButtonWithWarn() {
+  if (els.runBtn) els.runBtn.disabled = hasActiveWarn();
+}
+
+function showWarn(msg, variant = "warning") {
+  const box = els.notice; if (!box) return;
+  box.classList.remove("d-none");
+  box.innerHTML = "";
+  box.insertAdjacentHTML("beforeend", `
+    <div class="alert alert-${variant} alert-dismissible fade show" role="alert">
+      <div>${msg}</div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="閉じる"></button>
+    </div>
+  `);
+  syncRunButtonWithWarn();
+
+  const alertEl = box.querySelector(".alert:last-child");
+  alertEl?.addEventListener("closed.bs.alert", () => {
+    if (!hasActiveWarn()) box.classList.add("d-none");
+    syncRunButtonWithWarn();
+  });
+}
+
+function clearWarn() {
+  const box = els.notice; if (!box) return;
+  box.innerHTML = "";
+  box.classList.add("d-none");
+  syncRunButtonWithWarn();
+}
+
 // ---------- UI toggles ----------
 function setResultReady(on) {
   state.hasResult = on;
@@ -89,8 +131,62 @@ async function onFileChange() {
   resetControls();
   clearStage();
   state.store.clear();
+
+  const file = els.fileInput.files?.[0];
+  if (!file) {
+    clearWarn();
+    return;
+  }
+
+  if (file.size > LIMITS.IMG_MAX_BYTES) {
+    els.fileInput.value = "";
+    showWarn(
+      `ファイルが大きすぎます（${(file.size/1024/1024).toFixed(1)}MB）。` +
+      `上限は ${(LIMITS.IMG_MAX_BYTES/1024/1024)}MB です。`,
+      "warning"
+    );
+    return;
+  }
+
+  try {
+    const bmp = await createImageBitmap(file);
+    const w = bmp.width, h = bmp.height;
+    bmp.close?.();
+
+    if (Number.isFinite(LIMITS.IMG_MAX_PIXELS)) {
+      const px = w * h;
+      if (px > LIMITS.IMG_MAX_PIXELS) {
+        els.fileInput.value = "";
+        showWarn(
+          `解像度が大きすぎます（${w}×${h} ≈ ${(px/1e6).toFixed(1)}MP）。` +
+          `上限は ${(LIMITS.IMG_MAX_PIXELS/1e6)}MP です。`,
+          "warning"
+        );
+        return;
+      }
+    }
+    if (Number.isFinite(LIMITS.IMG_MAX_SIDE)) {
+      const sideMax = LIMITS.IMG_MAX_SIDE;
+      if (Math.max(w, h) > sideMax) {
+        els.fileInput.value = "";
+        showWarn(
+          `一辺が大きすぎます（${w}×${h}）。` +
+          `上限は ${sideMax}px です。`,
+          "warning"
+        );
+        return;
+      }
+    }
+  } catch (e) {
+    els.fileInput.value = "";
+    showWarn("画像の読み込みに失敗しました。別のファイルをお試しください。", "danger");
+    return;
+  }
+
+  clearWarn();
 }
 
+
 async function fetchDefaultAsFile() {
   const resp = await fetch("./assets/images/Parrot.jpg");
   const blob = await resp.blob();

From 7346d246165b0711763d63b3f83b126256ac5fc8 Mon Sep 17 00:00:00 2001
From: Shimo-1999 <63487964+Shimo-1999@users.noreply.github.com>
Date: Wed, 22 Oct 2025 00:18:27 +0900
Subject: [PATCH 3/5] clamp rectangle count and set default to 500

---
 web/index.html   |  2 +-
 web/js/script.js | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/web/index.html b/web/index.html
index 4aedf67..08b0552 100644
--- a/web/index.html
+++ b/web/index.html
@@ -85,7 +85,7 @@ <h4 class="mb-1">アルゴリズム選択</h4>
               </div>
               <div>
                 <label for="numRectangles" class="form-label mb-1 small text-muted">長方形の数</label>
-                <input type="number" id="numRectangles" class="form-control form-control-sm" value="1000" min="1" step="1" inputmode="numeric" aria-describedby="rectHelp" autocomplete="off">
+                <input type="number" id="numRectangles" class="form-control form-control-sm" value="500" min="1" max="5000" step="1" inputmode="numeric" aria-describedby="rectHelp" autocomplete="off">
               </div>
             </div>
           </fieldset>
diff --git a/web/js/script.js b/web/js/script.js
index ace33d2..0c4c4d0 100644
--- a/web/js/script.js
+++ b/web/js/script.js
@@ -45,6 +45,12 @@ window.addEventListener("DOMContentLoaded", async () => {
     speed: document.getElementById("speed"),
   };
 
+  els.numRects?.setAttribute("max", String(LIMITS.RECT_MAX_INPUT));
+  els.numRects?.setAttribute("min", "1");
+
+  els.numRects?.addEventListener("input", clampRectCount);
+  els.numRects?.addEventListener("wheel", (e) => e.preventDefault(), { passive: false });
+
   // events
   els.fileInput.addEventListener("change", onFileChange);
   els.runBtn?.addEventListener("click", onRunClick);
@@ -99,6 +105,18 @@ function clearWarn() {
   syncRunButtonWithWarn();
 }
 
+// ---------- clamp helper ----------
+function clampRectCount() {
+  if (!els.numRects) return;
+  const max = LIMITS.RECT_MAX_INPUT;
+  const min = 1;
+  let v = parseInt(els.numRects.value, 10);
+  if (!Number.isFinite(v)) v = min;
+  if (v < min) v = min;
+  if (v > max) v = max;
+  els.numRects.value = String(v);
+}
+
 // ---------- UI toggles ----------
 function setResultReady(on) {
   state.hasResult = on;
@@ -212,7 +230,7 @@ async function runPipeline(file) {
     const { width, height, rgba } = await decodeToRGBA(file);
     state.srcSize = { width, height };
 
-    const numRects = Number(els.numRects?.value || 1000);
+    const numRects = Number(els.numRects?.value || 500);
     const algoId = Number(els.algo?.value || 1);
 
     const rgbaView = new Uint8Array(rgba.buffer, rgba.byteOffset, rgba.byteLength);
@@ -318,7 +336,6 @@ function loop(now) {
 }
 
 // ========== Save （PNG / GIF） ==========
-
 async function onSavePng() {
   if (!state.store || !state.hasResult) return;
   try {
@@ -448,7 +465,6 @@ async function drawSvgOntoCanvas(svgString, canvas, { background = null } = {})
   }
 }
 
-
 function parseSvgSize(svgString) {
   const m = svgString.match(/viewBox\s*=\s*["']\s*0\s+0\s+([\d.]+)\s+([\d.]+)\s*["']/i);
   if (m) return { width: Number(m[1]), height: Number(m[2]) };

From 42b28a08dec26cfd7a92cd2123352160184b43d4 Mon Sep 17 00:00:00 2001
From: Shimo-1999 <63487964+Shimo-1999@users.noreply.github.com>
Date: Wed, 22 Oct 2025 00:26:13 +0900
Subject: [PATCH 4/5] feat(web): add disclaimer modal; update README

---
 README.md      |  5 ++++-
 web/index.html | 26 +++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b129d6f..bc84d19 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ python -m http.server
 
 - **コード**：**MIT License**（[`LICENSE`](./LICENSE) を参照）
 - **メディア（デモ用画像・動画/GIF）**：**CC BY-SA 4.0**  
-  詳細は [`CREDITS.md`](./CREDITS.md) および [`docs/assets/licenses/CC-BY-SA-4.0.txt`](./docs/assets/licenses/CC-BY-SA-4.0.txt)を参照
+  詳細は [`CREDITS.md`](./CREDITS.md) および [`docs/assets/licenses/CC-BY-SA-4.0.txt`](./docs/assets/licenses/LICENSE-CC-BY-SA-4.0.txt)を参照
 
 ### メディア配置
 - 画像（デモ用画像）：`web/assets/images/`
@@ -88,3 +88,6 @@ python -m http.server
 
 - **Box Fitting — Jared Tarbell**  
   http://www.complexification.net/gallery/machines/boxFitting
+
+## 免責事項
+本アプリの利用に関連して発生した損害について、開発者は一切の責任を負いません。
diff --git a/web/index.html b/web/index.html
index 08b0552..f7431e8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -162,9 +162,33 @@ <h3 id="preview-heading" class="section-title mb-0">再生・保存</h3>
   </main>
 
   <footer class="container-xxl my-5 text-center text-muted small">
-    <span>© 2025 Rectangle Fitting by <a href="https://github.com/Shimo-1999" target="_blank" rel="noopener">Shimo-1999</a></span>
+  <span>© 2025 Rectangle Fitting by
+    <a href="https://github.com/Shimo-1999" target="_blank" rel="noopener">Shimo-1999</a>
+  </span>
+  ·
+  <a href="#" data-bs-toggle="modal" data-bs-target="#tosModal">注意 / 免責事項</a>
   </footer>
 
+  <div class="modal fade" id="tosModal" tabindex="-1" aria-labelledby="tosLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 id="tosLabel" class="modal-title">注意 / 免責事項</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
+        </div>
+        <div class="modal-body small text-start">
+          <p><strong>注意</strong><br>
+          画像サイズや解像度が大きい場合、ブラウザや端末のメモリ使用量が増加し、フリーズやクラッシュが発生することがあります。作業中のデータは事前に保存し、十分な電源と余裕のある環境でご利用ください。</p>
+          <p><strong>免責事項</strong><br>
+          本アプリの利用に関連して発生した損害について、開発者は一切の責任を負いません。</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-primary" data-bs-dismiss="modal">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
   <script src="./vendor/gif.js"></script>
   <script src="./js/script.js" type="module"></script>

From 943a01d58c79189cb1474602f461d219a47273d9 Mon Sep 17 00:00:00 2001
From: Shimo-1999 <63487964+Shimo-1999@users.noreply.github.com>
Date: Wed, 22 Oct 2025 00:34:23 +0900
Subject: [PATCH 5/5] Update README.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bc84d19..3ad3b3d 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ python -m http.server
 
 - **コード**：**MIT License**（[`LICENSE`](./LICENSE) を参照）
 - **メディア（デモ用画像・動画/GIF）**：**CC BY-SA 4.0**  
-  詳細は [`CREDITS.md`](./CREDITS.md) および [`docs/assets/licenses/CC-BY-SA-4.0.txt`](./docs/assets/licenses/LICENSE-CC-BY-SA-4.0.txt)を参照
+  詳細は [`CREDITS.md`](./CREDITS.md) および [`docs/assets/licenses/LICENSE-CC-BY-SA-4.0.txt`](./docs/assets/licenses/LICENSE-CC-BY-SA-4.0.txt)を参照
 
 ### メディア配置
 - 画像（デモ用画像）：`web/assets/images/`