Spaces:

maowu
/

PaperDrawing

Sleeping

App Files Files Community

MAO commited on 16 days ago

Commit

87f540c

1 Parent(s): 3639647

Upload project files for Hugging Face Space deployment

Browse files

Files changed (8) hide show

Dockerfile +15 -0
index.html +14 -0
package-lock.json +0 -0
package.json +27 -0
src/App.jsx +599 -0
src/index.css +0 -0
src/main.jsx +10 -0
vite.config.js +7 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,15 @@

+FROM node:18-alpine
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+# Hugging Face Spaces 預設使用 7860 port
+EXPOSE 7860
+# 使用 npx serve 啟動靜態檔案伺服器
+CMD ["npx", "serve", "-s", "dist", "-l", "7860"]

index.html ADDED Viewed

	@@ -0,0 +1,14 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Texture Mapper</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "name": "texturemapper",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "lucide-react": "^0.344.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite": "^4.5.8"
+  }
+}

src/App.jsx ADDED Viewed

	@@ -0,0 +1,599 @@

+import React, { useState, useRef, useEffect } from 'react';
+import { Upload, Plus, Eye, EyeOff, Trash2, Save, FolderOpen, Download, Search } from 'lucide-react';
+// --- 數學與幾何輔助函數 ---
+const dist = (p1, p2) => Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+const distToSegment = (p, a, b) => {
+  const l2 = Math.pow(dist(a, b), 2);
+  if (l2 === 0) return dist(p, a);
+  let t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
+  t = Math.max(0, Math.min(1, t));
+  return dist(p, { x: a.x + t * (b.x - a.x), y: a.y + t * (b.y - a.y) });
+};
+const getRandomColor = () => {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+// --- 主應用程序 ---
+export default function App() {
+  const [imgA, setImgA] = useState(null);
+  const [imgB, setImgB] = useState(null);
+  const [regions, setRegions] = useState([]);
+  const [selectedRegionId, setSelectedRegionId] = useState(null);
+  const [previewMode, setPreviewMode] = useState(false);
+  const [hideUnselected, setHideUnselected] = useState(false);
+  const [hoveredEdge, setHoveredEdge] = useState(null);
+  const [hoveredPoint, setHoveredPoint] = useState(null);
+  const [draggingPoint, setDraggingPoint] = useState(null);
+  // Zoom 功能相關狀態
+  const [isZooming, setIsZooming] = useState(false);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0, relX: 0, relY: 0, rect: null });
+  const imgRefA = useRef(null);
+  const imgRefB = useRef(null);
+  const canvasPreviewRef = useRef(null);
+  const zoomFactor = 4; // 縮放倍率
+  const handleImageUpload = (e, setImg) => {
+    const file = e.target.files[0];
+    if (file) {
+      const url = URL.createObjectURL(file);
+      setImg(url);
+    }
+  };
+  const handleJsonUpload = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const data = JSON.parse(event.target.result);
+        if (Array.isArray(data)) {
+          setRegions(data);
+          setSelectedRegionId(data.length > 0 ? data[0].id : null);
+        }
+      } catch (err) {
+        console.error("JSON 格式錯誤", err);
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = '';
+  };
+  const addRegion = () => {
+    if (!imgA || !imgB) return;
+    const newId = crypto.randomUUID();
+    const newRegion = {
+      id: newId,
+      color: getRandomColor(),
+      pointsA: [{ x: 0.3, y: 0.3 }, { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, { x: 0.3, y: 0.7 }],
+      pointsB: [{ x: 0.3, y: 0.3 }, { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, { x: 0.3, y: 0.7 }]
+    };
+    setRegions([...regions, newRegion]);
+    setSelectedRegionId(newId);
+  };
+  const deleteRegion = (id) => {
+    setRegions(regions.filter(r => r.id !== id));
+    if (selectedRegionId === id) setSelectedRegionId(null);
+  };
+  const handlePointMouseDown = (e, side, regionId, index) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setSelectedRegionId(regionId);
+    setDraggingPoint({ regionId, index, side });
+  };
+  const handleMouseMove = (e, side) => {
+    const imgEl = side === 'A' ? imgRefA.current : imgRefB.current;
+    if (!imgEl) return;
+    const rect = imgEl.getBoundingClientRect();
+    let x = (e.clientX - rect.left) / rect.width;
+    let y = (e.clientY - rect.top) / rect.height;
+    x = Math.max(0, Math.min(1, x));
+    y = Math.max(0, Math.min(1, y));
+    setMousePos({ x: e.clientX, y: e.clientY, relX: x, relY: y, rect });
+    if (draggingPoint && draggingPoint.side === side) {
+      setRegions(prev => prev.map(r => {
+        if (r.id === draggingPoint.regionId) {
+          const pointsKey = side === 'A' ? 'pointsA' : 'pointsB';
+          const newPoints = [...r[pointsKey]];
+          newPoints[draggingPoint.index] = { x, y };
+          return { ...r, [pointsKey]: newPoints };
+        }
+        return r;
+      }));
+      return;
+    }
+    if (selectedRegionId) {
+      const region = regions.find(r => r.id === selectedRegionId);
+      if (region) {
+        const points = side === 'A' ? region.pointsA : region.pointsB;
+        let foundPoint = null;
+        for (let i = 0; i < points.length; i++) {
+          if (dist({ x, y }, points[i]) < 0.02) {
+            foundPoint = { regionId: region.id, index: i };
+            break;
+          }
+        }
+        if (foundPoint) {
+          setHoveredPoint(foundPoint);
+          setHoveredEdge(null);
+          return;
+        } else {
+          setHoveredPoint(null);
+        }
+        let closestDist = Infinity;
+        let closestIndex = -1;
+        for (let i = 0; i < points.length; i++) {
+          const p1 = points[i];
+          const p2 = points[(i + 1) % points.length];
+          const d = distToSegment({ x, y }, p1, p2);
+          if (d < 0.02) {
+            if (d < closestDist) {
+              closestDist = d;
+              closestIndex = i;
+            }
+          }
+        }
+        setHoveredEdge(closestIndex !== -1 ? { regionId: region.id, index: closestIndex, side } : null);
+      }
+    } else {
+      setHoveredPoint(null);
+      setHoveredEdge(null);
+    }
+  };
+  const handleGlobalMouseUp = () => {
+    setDraggingPoint(null);
+  };
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key.toLowerCase() === 'z') {
+        setIsZooming(true);
+      }
+      if ((e.key === 'a' || e.key === 'A') && hoveredEdge && !hoveredPoint) {
+        const { regionId, index } = hoveredEdge;
+        setRegions(prev => prev.map(r => {
+          if (r.id === regionId) {
+            const insertPoint = (pts) => {
+              const p1 = pts[index], p2 = pts[(index + 1) % pts.length];
+              const mid = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
+              const newPts = [...pts];
+              newPts.splice(index + 1, 0, mid);
+              return newPts;
+            };
+            return { ...r, pointsA: insertPoint(r.pointsA), pointsB: insertPoint(r.pointsB) };
+          }
+          return r;
+        }));
+        setHoveredEdge(null);
+      }
+      if ((e.key === 'd' || e.key === 'D' || e.key === 'Backspace') && hoveredPoint) {
+        const { regionId, index } = hoveredPoint;
+        setRegions(prev => prev.map(r => {
+          if (r.id === regionId && r.pointsA.length > 3) {
+            const newPtsA = r.pointsA.filter((_, i) => i !== index);
+            const newPtsB = r.pointsB.filter((_, i) => i !== index);
+            return { ...r, pointsA: newPtsA, pointsB: newPtsB };
+          }
+          return r;
+        }));
+        setHoveredPoint(null);
+      }
+    };
+    const handleKeyUp = (e) => {
+      if (e.key.toLowerCase() === 'z') {
+        setIsZooming(false);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('mouseup', handleGlobalMouseUp);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('mouseup', handleGlobalMouseUp);
+    };
+  }, [hoveredEdge, hoveredPoint]);
+  // --- Ear Clipping Triangulation ---
+  const crossWidth = (a, b, c) => (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+  const isPointInTriangle = (p, a, b, c) => {
+    const u = crossWidth(b, c, p);
+    const v = crossWidth(c, a, p);
+    const w = crossWidth(a, b, p);
+    return (u >= 0 && v >= 0 && w >= 0) || (u <= 0 && v <= 0 && w <= 0);
+  };
+  const triangulatePolygon = (points) => {
+    if (points.length < 3) return [];
+    const indices = [];
+    let area = 0;
+    for (let i = 0; i < points.length; i++) {
+      indices.push(i);
+      const p1 = points[i];
+      const p2 = points[(i + 1) % points.length];
+      area += (p2.x - p1.x) * (p2.y + p1.y);
+    }
+    let safeCount = 0;
+    const result = [];
+    while (indices.length > 3 && safeCount++ < 1000) {
+      let earFound = false;
+      const n = indices.length;
+      for (let i = 0; i < n; i++) {
+        const iPrev = (i - 1 + n) % n;
+        const iNext = (i + 1) % n;
+        const idxPrev = indices[iPrev], idxCurr = indices[i], idxNext = indices[iNext];
+        const pPrev = points[idxPrev], pCurr = points[idxCurr], pNext = points[idxNext];
+        const cross = crossWidth(pPrev, pCurr, pNext);
+        if (Math.abs(cross) > 0.000001 && Math.sign(cross) === Math.sign(area)) continue;
+        let isEar = true;
+        for (let k = 0; k < n; k++) {
+          if (k === iPrev || k === i || k === iNext) continue;
+          if (isPointInTriangle(points[indices[k]], pPrev, pCurr, pNext)) {
+            isEar = false;
+            break;
+          }
+        }
+        if (isEar) {
+          result.push(idxPrev, idxCurr, idxNext);
+          indices.splice(i, 1);
+          earFound = true;
+          break;
+        }
+      }
+      if (!earFound) break;
+    }
+    if (indices.length === 3) result.push(indices[0], indices[1], indices[2]);
+    else if (indices.length > 3) {
+      for (let i = 1; i < indices.length - 1; i++) result.push(indices[0], indices[i], indices[i + 1]);
+    }
+    return result;
+  };
+  useEffect(() => {
+    if (!previewMode || !imgA || !imgB || !canvasPreviewRef.current) return;
+    const canvas = canvasPreviewRef.current;
+    const ctx = canvas.getContext('2d');
+    const imageA = new Image();
+    const imageB = new Image();
+    let isComponentMounted = true;
+    let loadedCount = 0;
+    const onImageLoad = () => {
+      if (!isComponentMounted) return;
+      loadedCount++;
+      if (loadedCount === 2) {
+        canvas.width = imageA.width;
+        canvas.height = imageA.height;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(imageA, 0, 0);
+        regions.forEach(region => {
+          if (region.pointsA.length < 3) return;
+          const ptsA = region.pointsA.map(p => ({ x: p.x * imageA.width, y: p.y * imageA.height }));
+          const ptsB = region.pointsB.map(p => ({ x: p.x * imageB.width, y: p.y * imageB.height }));
+          const indices = triangulatePolygon(ptsB);
+          for (let i = 0; i < indices.length; i += 3) {
+            textureMapTriangle(ctx, imageB, ptsA[indices[i]], ptsA[indices[i + 1]], ptsA[indices[i + 2]], ptsB[indices[i]], ptsB[indices[i + 1]], ptsB[indices[i + 2]]);
+          }
+        });
+      }
+    };
+    imageA.onload = onImageLoad;
+    imageB.onload = onImageLoad;
+    imageA.src = imgA;
+    imageB.src = imgB;
+    return () => { isComponentMounted = false; };
+  }, [previewMode, imgA, imgB, regions]);
+  const exportJson = (e) => {
+    e.preventDefault();
+    const data = JSON.stringify(regions, null, 2);
+    const blob = new Blob([data], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'texture-mapping-config.json';
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+  const downloadPreview = (e) => {
+    if (e) e.preventDefault();
+    const canvas = canvasPreviewRef.current;
+    if (!canvas) return;
+    try {
+      canvas.toBlob((blob) => {
+        if (!blob) return;
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.download = 'texture-mapper-result.png';
+        link.href = url;
+        link.click();
+        URL.revokeObjectURL(url);
+      }, 'image/png');
+    } catch (err) {
+      console.error("下載錯誤:", err);
+    }
+  };
+  const renderOverlay = (side, isZoomView = false) => {
+    const pointsKey = side === 'A' ? 'pointsA' : 'pointsB';
+    // Side B 的過濾邏輯：勾選 hideUnselected 時只顯示選中區域
+    const visibleRegions = (side === 'B' && hideUnselected && selectedRegionId)
+      ? regions.filter(r => r.id === selectedRegionId)
+      : regions;
+    const baseStrokeWidth = 1.5;
+    const selectedStrokeWidth = 3;
+    const baseCircleRadius = 0.5;
+    // 縮放視圖中保持線條比例
+    const currentStrokeW = isZoomView ? (baseStrokeWidth / zoomFactor) : baseStrokeWidth;
+    const currentSelectedStrokeW = isZoomView ? (selectedStrokeWidth / zoomFactor) : selectedStrokeWidth;
+    const currentCircleRadius = isZoomView ? (baseCircleRadius / zoomFactor) : baseCircleRadius;
+    return (
+      <svg
+        className="absolute top-0 left-0 w-full h-full pointer-events-none"
+        style={{ zIndex: 10, overflow: 'visible' }}
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+      >
+        {visibleRegions.map(r => {
+          const isSelected = r.id === selectedRegionId;
+          const points = r[pointsKey];
+          const pointsStr = points.map(p => `${p.x * 100},${p.y * 100}`).join(' ');
+          return (
+            <g key={`poly-group-${r.id}`}>
+              <polygon
+                points={pointsStr}
+                style={{
+                  vectorEffect: 'non-scaling-stroke',
+                  fill: r.color,
+                  fillOpacity: isSelected ? 0.4 : 0.1,
+                  stroke: isSelected ? '#00f2ff' : r.color,
+                  strokeWidth: isSelected ? currentSelectedStrokeW : currentStrokeW,
+                  strokeDasharray: isSelected ? "none" : (isZoomView ? `${0.5 / zoomFactor}, ${0.5 / zoomFactor}` : "2, 2")
+                }}
+                className={isZoomView ? "" : "pointer-events-auto cursor-pointer"}
+                onMouseDown={isZoomView ? undefined : (e) => { e.stopPropagation(); setSelectedRegionId(r.id); }}
+              />
+            </g>
+          );
+        })}
+        {visibleRegions.map(reg => {
+          const isRegSelected = reg.id === selectedRegionId;
+          return reg[pointsKey].map((p, idx) => {
+            let strokeColor = isRegSelected ? '#fff200' : 'rgba(0, 0, 0, 0.4)';
+            let fillColor = reg.color;
+            let radius = isRegSelected ? (currentCircleRadius * 1.5) : currentCircleRadius;
+            let pointStrokeW = isZoomView ? (0.5 / zoomFactor) : (isRegSelected ? 1 : 0.5);
+            const isDragging = !isZoomView && draggingPoint && draggingPoint.regionId === reg.id && draggingPoint.index === idx;
+            const isHovering = !isZoomView && hoveredPoint && hoveredPoint.regionId === reg.id && hoveredPoint.index === idx;
+            if (isDragging || isHovering) {
+              strokeColor = isDragging ? '#ff0000' : '#0066ff';
+              fillColor = 'white';
+              radius = currentCircleRadius * 2;
+              pointStrokeW = isZoomView ? (1 / zoomFactor) : 2;
+            }
+            return (
+              <circle
+                key={`node-${reg.id}-${idx}`}
+                cx={p.x * 100} cy={p.y * 100} r={radius}
+                style={{
+                  vectorEffect: 'non-scaling-stroke',
+                  fill: fillColor,
+                  fillOpacity: (isRegSelected || isHovering) ? 1 : 0.8,
+                  stroke: strokeColor,
+                  strokeWidth: pointStrokeW,
+                  cursor: isZoomView ? 'default' : 'move',
+                  pointerEvents: isZoomView ? 'none' : 'auto'
+                }}
+                onMouseDown={isZoomView ? undefined : (e) => handlePointMouseDown(e, side, reg.id, idx)}
+              />
+            );
+          });
+        })}
+      </svg>
+    );
+  };
+  const renderMagnifier = (side, imageSrc, rect) => {
+    if (!isZooming || !mousePos.relX || !rect) return null;
+    const viewSize = 240; // 放大鏡圓圈的大小
+    // 計算邏輯修正：
+    // 放大鏡中心點應該對應滑鼠目前的相對位置 (relX, relY)
+    // 放大後的內容左上角，相對於放大鏡中心的偏移量：
+    // offsetX = (放大鏡半徑) - (滑鼠相對位置 * 圖片目前的寬度 * 縮放倍率)
+    const centerX = viewSize / 2;
+    const centerY = viewSize / 2;
+    const translateX = centerX - (mousePos.relX * rect.width * zoomFactor);
+    const translateY = centerY - (mousePos.relY * rect.height * zoomFactor);
+    return (
+      <div
+        className="absolute pointer-events-none border-2 border-blue-500 shadow-2xl rounded-full overflow-hidden bg-black z-[100]"
+        style={{
+          left: `${mousePos.relX * 100}%`,
+          top: `${mousePos.relY * 100}%`,
+          width: `${viewSize}px`,
+          height: `${viewSize}px`,
+          transform: 'translate(-50%, -115%)' // 讓放大鏡浮在滑鼠上方
+        }}
+      >
+        <div
+          className="absolute origin-top-left" // 固定從左上角開始繪製內容，不使用 flex 置中
+          style={{
+            width: rect.width,
+            height: rect.height,
+            transform: `translate(${translateX}px, ${translateY}px) scale(${zoomFactor})`,
+          }}
+        >
+          <div className="relative w-full h-full">
+            <img src={imageSrc} className="block w-full h-full object-contain" draggable={false} />
+            {renderOverlay(side, true)}
+          </div>
+        </div>
+        {/* 精準導航準星 */}
+        <div className="absolute top-1/2 left-0 w-full h-px bg-blue-400/50"></div>
+        <div className="absolute left-1/2 top-0 w-px h-full bg-blue-400/50"></div>
+        {/* 內陰影效果 */}
+        <div className="absolute inset-0 rounded-full border-[4px] border-black/20 pointer-events-none shadow-inner"></div>
+      </div>
+    );
+  };
+  return (
+    <div className="flex flex-col h-screen bg-gray-900 text-gray-100 font-sans select-none">
+      <div className="flex items-center justify-between p-4 bg-gray-800 border-b border-gray-700 shadow-md z-50">
+        <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent tracking-tight">UV Texture Mapper</h1>
+        <div className="flex items-center space-x-2 text-[10px] text-gray-500 mr-auto ml-6 font-medium">
+          <span className="bg-gray-700/50 border border-gray-600 px-1.5 py-0.5 rounded text-gray-300">A</span> 新增點
+          <span className="bg-gray-700/50 border border-gray-600 px-1.5 py-0.5 rounded text-gray-300 ml-1">D</span> 刪除點
+          <span className="bg-gray-700/50 border border-gray-600 px-1.5 py-0.5 rounded text-gray-300 ml-1">Z</span> 長按放大
+        </div>
+        <div className="flex items-center space-x-3">
+          <div className="flex space-x-2">
+            <label className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded cursor-pointer text-xs transition-colors border border-gray-600">
+              <Upload size={14} /> <span>圖片 A</span>
+              <input type="file" accept="image/*" className="hidden" onChange={(e) => handleImageUpload(e, setImgA)} />
+            </label>
+            <label className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded cursor-pointer text-xs transition-colors border border-gray-600">
+              <Upload size={14} /> <span>圖片 B</span>
+              <input type="file" accept="image/*" className="hidden" onChange={(e) => handleImageUpload(e, setImgB)} />
+            </label>
+          </div>
+          <div className="w-px h-6 bg-gray-700 mx-1"></div>
+          <button onClick={addRegion} className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 rounded text-xs font-medium transition-all"><Plus size={14} /> 新增區域</button>
+          <div className="flex space-x-2">
+            <label className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded cursor-pointer text-xs transition-colors">
+              <FolderOpen size={14} /> <span>匯入 JSON</span>
+              <input type="file" accept=".json" className="hidden" onChange={handleJsonUpload} />
+            </label>
+            <button onClick={exportJson} className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded text-xs transition-colors"><Save size={14} /> 匯出 JSON</button>
+          </div>
+          {selectedRegionId && <button onClick={() => deleteRegion(selectedRegionId)} className="flex items-center gap-2 px-3 py-1.5 bg-red-900/30 text-red-300 hover:bg-red-900/50 rounded border border-red-800/40 text-xs transition-colors"><Trash2 size={14} /> 刪除</button>}
+          <div className="w-px h-6 bg-gray-700 mx-1"></div>
+          <button onClick={() => setPreviewMode(!previewMode)} className={`flex items-center gap-2 px-4 py-1.5 rounded text-xs font-bold transition-all ${previewMode ? 'bg-emerald-600 text-white shadow-lg' : 'bg-gray-700 hover:bg-gray-600'}`}>
+            {previewMode ? <EyeOff size={14} /> : <Eye size={14} />} {previewMode ? '返回編輯' : '預覽結果'}
+          </button>
+        </div>
+      </div>
+      <div className="flex-1 flex overflow-hidden relative">
+        {!previewMode ? (
+          <div className="flex w-full h-full">
+            <div className="flex-1 flex flex-col border-r border-gray-800 bg-gray-950 p-6 relative">
+              <div className="mb-3 text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 text-center">目標畫布 (Side A)</div>
+              <div className="relative flex-1 bg-black/40 rounded-xl border border-gray-800 overflow-hidden select-none flex items-center justify-center shadow-inner" onMouseMove={(e) => handleMouseMove(e, 'A')} onMouseDown={() => setSelectedRegionId(null)}>
+                {imgA ? (
+                  <div className="relative" style={{ width: 'fit-content', height: 'fit-content', maxWidth: '100%', maxHeight: '100%' }}>
+                    <img ref={imgRefA} src={imgA} className="block w-auto h-auto max-w-full max-h-full shadow-lg" draggable={false} />
+                    {renderOverlay('A')}
+                    {renderMagnifier('A', imgA, mousePos.rect)}
+                  </div>
+                ) : <div className="text-gray-700 text-sm italic">請上傳圖片 A</div>}
+              </div>
+            </div>
+            <div className="flex-1 flex flex-col bg-gray-950 p-6 relative">
+              <div className="mb-3 text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 text-center flex items-center justify-center gap-4">
+                紋理來源 (Side B)
+                <label className="flex items-center gap-2 cursor-pointer normal-case tracking-normal text-gray-400 hover:text-gray-200 transition-colors ml-4 border border-gray-800 px-2 py-0.5 rounded bg-gray-900/50">
+                  <input type="checkbox" className="w-3 h-3 rounded border-gray-700 bg-gray-800 text-blue-600 focus:ring-0" checked={hideUnselected} onChange={(e) => setHideUnselected(e.target.checked)} />
+                  <span className="text-[10px] font-medium">僅顯示選中區域</span>
+                </label>
+              </div>
+              <div className="relative flex-1 bg-black/40 rounded-xl border border-gray-800 overflow-hidden select-none flex items-center justify-center shadow-inner" onMouseMove={(e) => handleMouseMove(e, 'B')} onMouseDown={() => setSelectedRegionId(null)}>
+                {imgB ? (
+                  <div className="relative" style={{ width: 'fit-content', height: 'fit-content', maxWidth: '100%', maxHeight: '100%' }}>
+                    <img ref={imgRefB} src={imgB} className="block w-auto h-auto max-w-full max-h-full shadow-lg" draggable={false} />
+                    {renderOverlay('B')}
+                    {renderMagnifier('B', imgB, mousePos.rect)}
+                  </div>
+                ) : <div className="text-gray-700 text-sm italic">請上傳圖片 B</div>}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="absolute inset-0 z-20 bg-gray-950 flex flex-col items-center justify-center p-8 overflow-auto">
+            <div className="mb-6 flex gap-4">
+              <button type="button" onClick={downloadPreview} className="flex items-center gap-2 px-6 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-full font-bold shadow-xl transition-all active:scale-95">
+                <Download size={18} /> 下載結果 (.png)
+              </button>
+              <button onClick={() => setPreviewMode(false)} className="flex items-center gap-2 px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-full font-bold transition-all">
+                返回編輯
+              </button>
+            </div>
+            <div className="relative shadow-2xl rounded-2xl overflow-hidden border border-gray-800 bg-black max-w-full max-h-[80vh]">
+              <canvas ref={canvasPreviewRef} className="block max-w-full max-h-[75vh] mx-auto" />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+function textureMapTriangle(ctx, img, p0, p1, p2, t0, t1, t2) {
+  ctx.save();
+  const midX = (p0.x + p1.x + p2.x) / 3, midY = (p0.y + p1.y + p2.y) / 3;
+  const expand = (p) => {
+    const dx = p.x - midX, dy = p.y - midY;
+    const mag = Math.sqrt(dx * dx + dy * dy) || 1;
+    return { x: p.x + (dx / mag) * 0.5, y: p.y + (dy / mag) * 0.5 };
+  };
+  const ep0 = expand(p0), ep1 = expand(p1), ep2 = expand(p2);
+  ctx.beginPath();
+  ctx.moveTo(ep0.x, ep0.y); ctx.lineTo(ep1.x, ep1.y); ctx.lineTo(ep2.x, ep2.y);
+  ctx.closePath(); ctx.clip();
+  const x0 = t0.x, y0 = t0.y, x1 = t1.x, y1 = t1.y, x2 = t2.x, y2 = t2.y;
+  const u0 = p0.x, v0 = p0.y, u1 = p1.x, v1 = p1.y, u2 = p2.x, v2 = p2.y;
+  const delta = (x0 - x2) * (y1 - y2) - (x1 - x2) * (y0 - y2);
+  if (Math.abs(delta) < 0.0001) { ctx.restore(); return; }
+  const a = ((u0 - u2) * (y1 - y2) - (u1 - u2) * (y0 - y2)) / delta;
+  const b = ((v0 - v2) * (y1 - y2) - (v1 - v2) * (y0 - v2)) / delta;
+  const c = ((x0 - x2) * (u1 - u2) - (x1 - x2) * (u0 - u2)) / delta;
+  const d = ((x0 - x2) * (v1 - v2) - (x1 - x2) * (v0 - v2)) / delta;
+  const e = u2 - a * x2 - c * y2, f = v2 - b * x2 - d * y2;
+  ctx.setTransform(a, b, c, d, e, f);
+  ctx.drawImage(img, 0, 0, img.width, img.height);
+  ctx.restore();
+}

src/index.css ADDED Viewed

File without changes

src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})