Fix image upload button

app/page.tsx

@@ -153,6 +153,7 @@ export default function Home() {
   const [historyQuery, setHistoryQuery] = useState("");
   const [status, setStatus] = useState("示例图已准备好，可以直接转换");
   const sourceImageRef = useRef<HTMLImageElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
   const cropCanvasRef = useRef<HTMLCanvasElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const cropPreviewRef = useRef<HTMLDivElement | null>(null);
@@ -462,7 +463,13 @@ export default function Home() {
           <div className="upload-card crop-preview" style={{ aspectRatio: `${Math.max(8, requestedWidth || 8)} / ${Math.max(8, requestedHeight || 8)}` }} ref={cropPreviewRef} onPointerDown={handleCropPointerDown} onPointerMove={handleCropPointerMove} onPointerUp={handleCropPointerUp} onPointerCancel={handleCropPointerUp}>
             <canvas ref={cropCanvasRef} aria-label="转换区域预览，可拖动调整取景" />
             <span className="crop-frame" aria-hidden="true" />
-            <label className="upload-overlay">更换图片<input type="file" accept="image/png,image/jpeg,image/webp" onChange={handleUpload} /></label>
+            <button
+              type="button"
+              className="upload-overlay"
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={(event) => { event.stopPropagation(); fileInputRef.current?.click(); }}
+            >更换图片</button>
+            <input ref={fileInputRef} className="file-input" type="file" accept="image/png,image/jpeg,image/webp" onChange={handleUpload} />
           </div>
           <p className="file-name" title={sourceName}>{sourceName}</p>