Set up watermark remover React application with build output

Built a complete watermark removal tool using React, Tailwind CSS, jsPDF, and PDF.js. Includes source code, configuration files, and pre-built dist/ folder for HuggingFace Spaces deployment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.gitignore

@@ -0,0 +1,33 @@
+# Dependencies
+node_modules/
+
+# Environment variables
+.env
+.env.local
+.env.production.local
+.env.development.local
+
+# Editor directories and files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Testing
+coverage/
+
+# Misc
+.cache/

README.md

@@ -1,10 +0,0 @@
----
-title: Watermark Remover App
-emoji: 💻
-colorFrom: indigo
-colorTo: gray
-sdk: static
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

dist/README.md

@@ -0,0 +1,18 @@
+---
+title: Watermark Remover
+emoji: 🖼️
+colorFrom: blue
+colorTo: indigo
+sdk: static
+pinned: false
+---
+
+# Watermark Remover
+
+A privacy-first, local-processing watermark remover app powered by React, pdf.js, and Canvas API.
+
+## Features
+- 🚀 **100% Local Processing**: No images/PDFs are sent to any server.
+- 📄 **PDF Support**: Handles multi-page PDFs automatically.
+- 🎨 **Smart Inpainting**: Uses Telea and Navier-Stokes algorithms.
+- 🛠️ **Adjustable**: Customize the watermark region, blend radius, and more.

dist/assets/index-DDQzBmv1.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-auto{height:auto}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-6xl{max-width:72rem}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-gray-600{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-purple-600{--tw-bg-opacity: 1;background-color:rgb(147 51 234 / var(--tw-bg-opacity, 1))}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:bg-blue-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-600:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.hover\:bg-green-700:hover{--tw-bg-opacity: 1;background-color:rgb(21 128 61 / var(--tw-bg-opacity, 1))}.hover\:bg-red-700:hover{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))}.disabled\:bg-gray-600:disabled{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.disabled\:bg-gray-800:disabled{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.disabled\:text-gray-600:disabled{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}@media(min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

dist/assets/purify.es-B6FQ9oRL.js

@@ -0,0 +1,2 @@
+/*! @license DOMPurify 3.3.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.0/LICENSE */const{entries:_t,setPrototypeOf:ct,isFrozen:Yt,getPrototypeOf:Xt,getOwnPropertyDescriptor:jt}=Object;let{freeze:S,seal:y,create:Pe}=Object,{apply:ve,construct:ke}=typeof Reflect<"u"&&Reflect;S||(S=function(o){return o});y||(y=function(o){return o});ve||(ve=function(o,l){for(var a=arguments.length,c=new Array(a>2?a-2:0),O=2;O<a;O++)c[O-2]=arguments[O];return o.apply(l,c)});ke||(ke=function(o){for(var l=arguments.length,a=new Array(l>1?l-1:0),c=1;c<l;c++)a[c-1]=arguments[c];return new o(...a)});const ce=R(Array.prototype.forEach),Vt=R(Array.prototype.lastIndexOf),ft=R(Array.prototype.pop),q=R(Array.prototype.push),$t=R(Array.prototype.splice),ue=R(String.prototype.toLowerCase),Ne=R(String.prototype.toString),Ie=R(String.prototype.match),K=R(String.prototype.replace),qt=R(String.prototype.indexOf),Kt=R(String.prototype.trim),b=R(Object.prototype.hasOwnProperty),A=R(RegExp.prototype.test),Z=Zt(TypeError);function R(s){return function(o){o instanceof RegExp&&(o.lastIndex=0);for(var l=arguments.length,a=new Array(l>1?l-1:0),c=1;c<l;c++)a[c-1]=arguments[c];return ve(s,o,a)}}function Zt(s){return function(){for(var o=arguments.length,l=new Array(o),a=0;a<o;a++)l[a]=arguments[a];return ke(s,l)}}function r(s,o){let l=arguments.length>2&&arguments[2]!==void 0?arguments[2]:ue;ct&&ct(s,null);let a=o.length;for(;a--;){let c=o[a];if(typeof c=="string"){const O=l(c);O!==c&&(Yt(o)||(o[a]=O),c=O)}s[c]=!0}return s}function Jt(s){for(let o=0;o<s.length;o++)b(s,o)||(s[o]=null);return s}function M(s){const o=Pe(null);for(const[l,a]of _t(s))b(s,l)&&(Array.isArray(a)?o[l]=Jt(a):a&&typeof a=="object"&&a.constructor===Object?o[l]=M(a):o[l]=a);return o}function J(s,o){for(;s!==null;){const a=jt(s,o);if(a){if(a.get)return R(a.get);if(typeof a.value=="function")return R(a.value)}s=Xt(s)}function l(){return null}return l}const ut=S(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),Ce=S(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","enterkeyhint","exportparts","filter","font","g","glyph","glyphref","hkern","image","inputmode","line","lineargradient","marker","mask","metadata","mpath","part","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),Me=S(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),Qt=S(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),we=S(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),en=S(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),mt=S(["#text"]),pt=S(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","exportparts","face","for","headers","height","hidden","high","href","hreflang","id","inert","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","part","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","slot","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),xe=S(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","mask-type","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),dt=S(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),fe=S(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),tn=y(/\{\{[\w\W]*|[\w\W]*\}\}/gm),nn=y(/<%[\w\W]*|[\w\W]*%>/gm),on=y(/\$\{[\w\W]*/gm),an=y(/^data-[\-\w.\u00B7-\uFFFF]+$/),rn=y(/^aria-[\-\w]+$/),gt=y(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),sn=y(/^(?:\w+script|data):/i),ln=y(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),ht=y(/^html$/i),cn=y(/^[a-z][.\w]*(-[.\w]+)+$/i);var Tt=Object.freeze({__proto__:null,ARIA_ATTR:rn,ATTR_WHITESPACE:ln,CUSTOM_ELEMENT:cn,DATA_ATTR:an,DOCTYPE_NAME:ht,ERB_EXPR:nn,IS_ALLOWED_URI:gt,IS_SCRIPT_OR_DATA:sn,MUSTACHE_EXPR:tn,TMPLIT_EXPR:on});const Q={element:1,text:3,progressingInstruction:7,comment:8,document:9},fn=function(){return typeof window>"u"?null:window},un=function(o,l){if(typeof o!="object"||typeof o.createPolicy!="function")return null;let a=null;const c="data-tt-policy-suffix";l&&l.hasAttribute(c)&&(a=l.getAttribute(c));const O="dompurify"+(a?"#"+a:"");try{return o.createPolicy(O,{createHTML(P){return P},createScriptURL(P){return P}})}catch{return console.warn("TrustedTypes policy "+O+" could not be created."),null}},Et=function(){return{afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}};function At(){let s=arguments.length>0&&arguments[0]!==void 0?arguments[0]:fn();const o=i=>At(i);if(o.version="3.3.0",o.removed=[],!s||!s.document||s.document.nodeType!==Q.document||!s.Element)return o.isSupported=!1,o;let{document:l}=s;const a=l,c=a.currentScript,{DocumentFragment:O,HTMLTemplateElement:P,Node:me,Element:Ue,NodeFilter:B,NamedNodeMap:St=s.NamedNodeMap||s.MozNamedAttrMap,HTMLFormElement:Rt,DOMParser:Ot,trustedTypes:ee}=s,Y=Ue.prototype,Lt=J(Y,"cloneNode"),yt=J(Y,"remove"),bt=J(Y,"nextSibling"),Dt=J(Y,"childNodes"),te=J(Y,"parentNode");if(typeof P=="function"){const i=l.createElement("template");i.content&&i.content.ownerDocument&&(l=i.content.ownerDocument)}let g,X="";const{implementation:pe,createNodeIterator:Nt,createDocumentFragment:It,getElementsByTagName:Ct}=l,{importNode:Mt}=a;let h=Et();o.isSupported=typeof _t=="function"&&typeof te=="function"&&pe&&pe.createHTMLDocument!==void 0;const{MUSTACHE_EXPR:de,ERB_EXPR:Te,TMPLIT_EXPR:Ee,DATA_ATTR:wt,ARIA_ATTR:xt,IS_SCRIPT_OR_DATA:Pt,ATTR_WHITESPACE:Fe,CUSTOM_ELEMENT:vt}=Tt;let{IS_ALLOWED_URI:He}=Tt,p=null;const ze=r({},[...ut,...Ce,...Me,...we,...mt]);let T=null;const Ge=r({},[...pt,...xe,...dt,...fe]);let u=Object.seal(Pe(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),j=null,_e=null;const v=Object.seal(Pe(null,{tagCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeCheck:{writable:!0,configurable:!1,enumerable:!0,value:null}}));let We=!0,ge=!0,Be=!1,Ye=!0,k=!1,ne=!0,w=!1,he=!1,Ae=!1,U=!1,oe=!1,ie=!1,Xe=!0,je=!1;const kt="user-content-";let Se=!0,V=!1,F={},H=null;const Ve=r({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let $e=null;const qe=r({},["audio","video","img","source","image","track"]);let Re=null;const Ke=r({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),ae="http://www.w3.org/1998/Math/MathML",re="http://www.w3.org/2000/svg",N="http://www.w3.org/1999/xhtml";let z=N,Oe=!1,Le=null;const Ut=r({},[ae,re,N],Ne);let se=r({},["mi","mo","mn","ms","mtext"]),le=r({},["annotation-xml"]);const Ft=r({},["title","style","font","a","script"]);let $=null;const Ht=["application/xhtml+xml","text/html"],zt="text/html";let d=null,G=null;const Gt=l.createElement("form"),Ze=function(e){return e instanceof RegExp||e instanceof Function},ye=function(){let e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if(!(G&&G===e)){if((!e||typeof e!="object")&&(e={}),e=M(e),$=Ht.indexOf(e.PARSER_MEDIA_TYPE)===-1?zt:e.PARSER_MEDIA_TYPE,d=$==="application/xhtml+xml"?Ne:ue,p=b(e,"ALLOWED_TAGS")?r({},e.ALLOWED_TAGS,d):ze,T=b(e,"ALLOWED_ATTR")?r({},e.ALLOWED_ATTR,d):Ge,Le=b(e,"ALLOWED_NAMESPACES")?r({},e.ALLOWED_NAMESPACES,Ne):Ut,Re=b(e,"ADD_URI_SAFE_ATTR")?r(M(Ke),e.ADD_URI_SAFE_ATTR,d):Ke,$e=b(e,"ADD_DATA_URI_TAGS")?r(M(qe),e.ADD_DATA_URI_TAGS,d):qe,H=b(e,"FORBID_CONTENTS")?r({},e.FORBID_CONTENTS,d):Ve,j=b(e,"FORBID_TAGS")?r({},e.FORBID_TAGS,d):M({}),_e=b(e,"FORBID_ATTR")?r({},e.FORBID_ATTR,d):M({}),F=b(e,"USE_PROFILES")?e.USE_PROFILES:!1,We=e.ALLOW_ARIA_ATTR!==!1,ge=e.ALLOW_DATA_ATTR!==!1,Be=e.ALLOW_UNKNOWN_PROTOCOLS||!1,Ye=e.ALLOW_SELF_CLOSE_IN_ATTR!==!1,k=e.SAFE_FOR_TEMPLATES||!1,ne=e.SAFE_FOR_XML!==!1,w=e.WHOLE_DOCUMENT||!1,U=e.RETURN_DOM||!1,oe=e.RETURN_DOM_FRAGMENT||!1,ie=e.RETURN_TRUSTED_TYPE||!1,Ae=e.FORCE_BODY||!1,Xe=e.SANITIZE_DOM!==!1,je=e.SANITIZE_NAMED_PROPS||!1,Se=e.KEEP_CONTENT!==!1,V=e.IN_PLACE||!1,He=e.ALLOWED_URI_REGEXP||gt,z=e.NAMESPACE||N,se=e.MATHML_TEXT_INTEGRATION_POINTS||se,le=e.HTML_INTEGRATION_POINTS||le,u=e.CUSTOM_ELEMENT_HANDLING||{},e.CUSTOM_ELEMENT_HANDLING&&Ze(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(u.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck),e.CUSTOM_ELEMENT_HANDLING&&Ze(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(u.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),e.CUSTOM_ELEMENT_HANDLING&&typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements=="boolean"&&(u.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),k&&(ge=!1),oe&&(U=!0),F&&(p=r({},mt),T=[],F.html===!0&&(r(p,ut),r(T,pt)),F.svg===!0&&(r(p,Ce),r(T,xe),r(T,fe)),F.svgFilters===!0&&(r(p,Me),r(T,xe),r(T,fe)),F.mathMl===!0&&(r(p,we),r(T,dt),r(T,fe))),e.ADD_TAGS&&(typeof e.ADD_TAGS=="function"?v.tagCheck=e.ADD_TAGS:(p===ze&&(p=M(p)),r(p,e.ADD_TAGS,d))),e.ADD_ATTR&&(typeof e.ADD_ATTR=="function"?v.attributeCheck=e.ADD_ATTR:(T===Ge&&(T=M(T)),r(T,e.ADD_ATTR,d))),e.ADD_URI_SAFE_ATTR&&r(Re,e.ADD_URI_SAFE_ATTR,d),e.FORBID_CONTENTS&&(H===Ve&&(H=M(H)),r(H,e.FORBID_CONTENTS,d)),Se&&(p["#text"]=!0),w&&r(p,["html","head","body"]),p.table&&(r(p,["tbody"]),delete j.tbody),e.TRUSTED_TYPES_POLICY){if(typeof e.TRUSTED_TYPES_POLICY.createHTML!="function")throw Z('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if(typeof e.TRUSTED_TYPES_POLICY.createScriptURL!="function")throw Z('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');g=e.TRUSTED_TYPES_POLICY,X=g.createHTML("")}else g===void 0&&(g=un(ee,c)),g!==null&&typeof X=="string"&&(X=g.createHTML(""));S&&S(e),G=e}},Je=r({},[...Ce,...Me,...Qt]),Qe=r({},[...we,...en]),Wt=function(e){let t=te(e);(!t||!t.tagName)&&(t={namespaceURI:z,tagName:"template"});const n=ue(e.tagName),f=ue(t.tagName);return Le[e.namespaceURI]?e.namespaceURI===re?t.namespaceURI===N?n==="svg":t.namespaceURI===ae?n==="svg"&&(f==="annotation-xml"||se[f]):!!Je[n]:e.namespaceURI===ae?t.namespaceURI===N?n==="math":t.namespaceURI===re?n==="math"&&le[f]:!!Qe[n]:e.namespaceURI===N?t.namespaceURI===re&&!le[f]||t.namespaceURI===ae&&!se[f]?!1:!Qe[n]&&(Ft[n]||!Je[n]):!!($==="application/xhtml+xml"&&Le[e.namespaceURI]):!1},D=function(e){q(o.removed,{element:e});try{te(e).removeChild(e)}catch{yt(e)}},x=function(e,t){try{q(o.removed,{attribute:t.getAttributeNode(e),from:t})}catch{q(o.removed,{attribute:null,from:t})}if(t.removeAttribute(e),e==="is")if(U||oe)try{D(t)}catch{}else try{t.setAttribute(e,"")}catch{}},et=function(e){let t=null,n=null;if(Ae)e="<remove></remove>"+e;else{const m=Ie(e,/^[\r\n\t ]+/);n=m&&m[0]}$==="application/xhtml+xml"&&z===N&&(e='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+e+"</body></html>");const f=g?g.createHTML(e):e;if(z===N)try{t=new Ot().parseFromString(f,$)}catch{}if(!t||!t.documentElement){t=pe.createDocument(z,"template",null);try{t.documentElement.innerHTML=Oe?X:f}catch{}}const _=t.body||t.documentElement;return e&&n&&_.insertBefore(l.createTextNode(n),_.childNodes[0]||null),z===N?Ct.call(t,w?"html":"body")[0]:w?t.documentElement:_},tt=function(e){return Nt.call(e.ownerDocument||e,e,B.SHOW_ELEMENT|B.SHOW_COMMENT|B.SHOW_TEXT|B.SHOW_PROCESSING_INSTRUCTION|B.SHOW_CDATA_SECTION,null)},be=function(e){return e instanceof Rt&&(typeof e.nodeName!="string"||typeof e.textContent!="string"||typeof e.removeChild!="function"||!(e.attributes instanceof St)||typeof e.removeAttribute!="function"||typeof e.setAttribute!="function"||typeof e.namespaceURI!="string"||typeof e.insertBefore!="function"||typeof e.hasChildNodes!="function")},nt=function(e){return typeof me=="function"&&e instanceof me};function I(i,e,t){ce(i,n=>{n.call(o,e,t,G)})}const ot=function(e){let t=null;if(I(h.beforeSanitizeElements,e,null),be(e))return D(e),!0;const n=d(e.nodeName);if(I(h.uponSanitizeElement,e,{tagName:n,allowedTags:p}),ne&&e.hasChildNodes()&&!nt(e.firstElementChild)&&A(/<[/\w!]/g,e.innerHTML)&&A(/<[/\w!]/g,e.textContent)||e.nodeType===Q.progressingInstruction||ne&&e.nodeType===Q.comment&&A(/<[/\w]/g,e.data))return D(e),!0;if(!(v.tagCheck instanceof Function&&v.tagCheck(n))&&(!p[n]||j[n])){if(!j[n]&&at(n)&&(u.tagNameCheck instanceof RegExp&&A(u.tagNameCheck,n)||u.tagNameCheck instanceof Function&&u.tagNameCheck(n)))return!1;if(Se&&!H[n]){const f=te(e)||e.parentNode,_=Dt(e)||e.childNodes;if(_&&f){const m=_.length;for(let L=m-1;L>=0;--L){const C=Lt(_[L],!0);C.__removalCount=(e.__removalCount||0)+1,f.insertBefore(C,bt(e))}}}return D(e),!0}return e instanceof Ue&&!Wt(e)||(n==="noscript"||n==="noembed"||n==="noframes")&&A(/<\/no(script|embed|frames)/i,e.innerHTML)?(D(e),!0):(k&&e.nodeType===Q.text&&(t=e.textContent,ce([de,Te,Ee],f=>{t=K(t,f," ")}),e.textContent!==t&&(q(o.removed,{element:e.cloneNode()}),e.textContent=t)),I(h.afterSanitizeElements,e,null),!1)},it=function(e,t,n){if(Xe&&(t==="id"||t==="name")&&(n in l||n in Gt))return!1;if(!(ge&&!_e[t]&&A(wt,t))){if(!(We&&A(xt,t))){if(!(v.attributeCheck instanceof Function&&v.attributeCheck(t,e))){if(!T[t]||_e[t]){if(!(at(e)&&(u.tagNameCheck instanceof RegExp&&A(u.tagNameCheck,e)||u.tagNameCheck instanceof Function&&u.tagNameCheck(e))&&(u.attributeNameCheck instanceof RegExp&&A(u.attributeNameCheck,t)||u.attributeNameCheck instanceof Function&&u.attributeNameCheck(t,e))||t==="is"&&u.allowCustomizedBuiltInElements&&(u.tagNameCheck instanceof RegExp&&A(u.tagNameCheck,n)||u.tagNameCheck instanceof Function&&u.tagNameCheck(n))))return!1}else if(!Re[t]){if(!A(He,K(n,Fe,""))){if(!((t==="src"||t==="xlink:href"||t==="href")&&e!=="script"&&qt(n,"data:")===0&&$e[e])){if(!(Be&&!A(Pt,K(n,Fe,"")))){if(n)return!1}}}}}}}return!0},at=function(e){return e!=="annotation-xml"&&Ie(e,vt)},rt=function(e){I(h.beforeSanitizeAttributes,e,null);const{attributes:t}=e;if(!t||be(e))return;const n={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:T,forceKeepAttr:void 0};let f=t.length;for(;f--;){const _=t[f],{name:m,namespaceURI:L,value:C}=_,W=d(m),De=C;let E=m==="value"?De:Kt(De);if(n.attrName=W,n.attrValue=E,n.keepAttr=!0,n.forceKeepAttr=void 0,I(h.uponSanitizeAttribute,e,n),E=n.attrValue,je&&(W==="id"||W==="name")&&(x(m,e),E=kt+E),ne&&A(/((--!?|])>)|<\/(style|title|textarea)/i,E)){x(m,e);continue}if(W==="attributename"&&Ie(E,"href")){x(m,e);continue}if(n.forceKeepAttr)continue;if(!n.keepAttr){x(m,e);continue}if(!Ye&&A(/\/>/i,E)){x(m,e);continue}k&&ce([de,Te,Ee],lt=>{E=K(E,lt," ")});const st=d(e.nodeName);if(!it(st,W,E)){x(m,e);continue}if(g&&typeof ee=="object"&&typeof ee.getAttributeType=="function"&&!L)switch(ee.getAttributeType(st,W)){case"TrustedHTML":{E=g.createHTML(E);break}case"TrustedScriptURL":{E=g.createScriptURL(E);break}}if(E!==De)try{L?e.setAttributeNS(L,m,E):e.setAttribute(m,E),be(e)?D(e):ft(o.removed)}catch{x(m,e)}}I(h.afterSanitizeAttributes,e,null)},Bt=function i(e){let t=null;const n=tt(e);for(I(h.beforeSanitizeShadowDOM,e,null);t=n.nextNode();)I(h.uponSanitizeShadowNode,t,null),ot(t),rt(t),t.content instanceof O&&i(t.content);I(h.afterSanitizeShadowDOM,e,null)};return o.sanitize=function(i){let e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},t=null,n=null,f=null,_=null;if(Oe=!i,Oe&&(i="<!-->"),typeof i!="string"&&!nt(i))if(typeof i.toString=="function"){if(i=i.toString(),typeof i!="string")throw Z("dirty is not a string, aborting")}else throw Z("toString is not a function");if(!o.isSupported)return i;if(he||ye(e),o.removed=[],typeof i=="string"&&(V=!1),V){if(i.nodeName){const C=d(i.nodeName);if(!p[C]||j[C])throw Z("root node is forbidden and cannot be sanitized in-place")}}else if(i instanceof me)t=et("<!---->"),n=t.ownerDocument.importNode(i,!0),n.nodeType===Q.element&&n.nodeName==="BODY"||n.nodeName==="HTML"?t=n:t.appendChild(n);else{if(!U&&!k&&!w&&i.indexOf("<")===-1)return g&&ie?g.createHTML(i):i;if(t=et(i),!t)return U?null:ie?X:""}t&&Ae&&D(t.firstChild);const m=tt(V?i:t);for(;f=m.nextNode();)ot(f),rt(f),f.content instanceof O&&Bt(f.content);if(V)return i;if(U){if(oe)for(_=It.call(t.ownerDocument);t.firstChild;)_.appendChild(t.firstChild);else _=t;return(T.shadowroot||T.shadowrootmode)&&(_=Mt.call(a,_,!0)),_}let L=w?t.outerHTML:t.innerHTML;return w&&p["!doctype"]&&t.ownerDocument&&t.ownerDocument.doctype&&t.ownerDocument.doctype.name&&A(ht,t.ownerDocument.doctype.name)&&(L="<!DOCTYPE "+t.ownerDocument.doctype.name+`>
+`+L),k&&ce([de,Te,Ee],C=>{L=K(L,C," ")}),g&&ie?g.createHTML(L):L},o.setConfig=function(){let i=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};ye(i),he=!0},o.clearConfig=function(){G=null,he=!1},o.isValidAttribute=function(i,e,t){G||ye({});const n=d(i),f=d(e);return it(n,f,t)},o.addHook=function(i,e){typeof e=="function"&&q(h[i],e)},o.removeHook=function(i,e){if(e!==void 0){const t=Vt(h[i],e);return t===-1?void 0:$t(h[i],t,1)[0]}return ft(h[i])},o.removeHooks=function(i){h[i]=[]},o.removeAllHooks=function(){h=Et()},o}var mn=At();export{mn as default};

dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Watermark Remover</title>
+    <script type="module" crossorigin src="/assets/index-CXi72gcy.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DDQzBmv1.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

index.html

@@ -1,19 +1,12 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Watermark Remover</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "watermark-remover",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "jspdf": "^3.0.4",
+    "lucide-react": "^0.468.0",
+    "pdfjs-dist": "^5.4.394",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.5"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/WatermarkRemover.jsx

@@ -0,0 +1,746 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Upload, Download, Settings, Play, Eye, EyeOff, RotateCcw, ChevronLeft, ChevronRight } from 'lucide-react';
+import * as pdfjsLib from 'pdfjs-dist';
+import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url';
+import { jsPDF } from 'jspdf';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+
+export default function WatermarkRemover() {
+  const [images, setImages] = useState([]);
+  const [originalFileName, setOriginalFileName] = useState('');
+  const [currentPage, setCurrentPage] = useState(0);
+  const [processing, setProcessing] = useState(false);
+  const [showOriginal, setShowOriginal] = useState(false);
+  const [settings, setSettings] = useState({
+    width: 220,
+    height: 80,
+    offsetX: 0,
+    offsetY: 0,
+    blendRadius: 10,
+    method: 'telea' // 'telea' or 'ns' (Navier-Stokes)
+  });
+  const [showSettings, setShowSettings] = useState(false);
+  const canvasRef = useRef(null);
+  const fileInputRef = useRef(null);
+
+  // Convert PDF pages to images using PDF.js approach (simplified - uses canvas rendering)
+  const handleFileUpload = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    setProcessing(true);
+    const loadedImages = [];
+
+    if (file.type === 'application/pdf') {
+      try {
+        setOriginalFileName(file.name.replace(/\.pdf$/i, ''));
+        const arrayBuffer = await file.arrayBuffer();
+        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+        const numPages = pdf.numPages;
+        
+        for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+          const page = await pdf.getPage(pageNum);
+          const scale = 1.5;
+          const viewport = page.getViewport({ scale });
+          
+          const canvas = document.createElement('canvas');
+          const context = canvas.getContext('2d');
+          canvas.width = viewport.width;
+          canvas.height = viewport.height;
+          
+          await page.render({
+            canvasContext: context,
+            viewport: viewport
+          }).promise;
+          
+          const img = new Image();
+          await new Promise((resolve) => {
+            img.onload = resolve;
+            img.src = canvas.toDataURL('image/jpeg', 0.85);
+          });
+          
+          loadedImages.push({
+            original: img,
+            processed: null,
+            name: `${file.name}_page_${pageNum}.png`
+          });
+        }
+        
+        setImages(loadedImages);
+        setCurrentPage(0);
+        setProcessing(false);
+        return;
+      } catch (err) {
+        console.error('PDF loading error:', err);
+        alert('Error loading PDF: ' + err.message);
+        setProcessing(false);
+        return;
+      }
+    }
+
+    // Handle image files
+    if (file.type.startsWith('image/')) {
+      const img = new Image();
+      img.onload = () => {
+        loadedImages.push({
+          original: img,
+          processed: null,
+          name: file.name
+        });
+        setImages(loadedImages);
+        setCurrentPage(0);
+        setProcessing(false);
+      };
+      img.src = URL.createObjectURL(file);
+    }
+  };
+
+  const handleMultipleImages = async (e) => {
+    const files = Array.from(e.target.files);
+    if (files.length === 0) return;
+
+    setProcessing(true);
+    const loadedImages = [];
+
+    for (const file of files) {
+      if (file.type.startsWith('image/')) {
+        await new Promise((resolve) => {
+          const img = new Image();
+          img.onload = () => {
+            loadedImages.push({
+              original: img,
+              processed: null,
+              name: file.name
+            });
+            resolve();
+          };
+          img.src = URL.createObjectURL(file);
+        });
+      }
+    }
+
+    // Sort by filename
+    loadedImages.sort((a, b) => a.name.localeCompare(b.name));
+    setImages(loadedImages);
+    setCurrentPage(0);
+    setProcessing(false);
+  };
+
+  // Telea inpainting algorithm (Fast Marching Method)
+  const inpaintTelea = (imageData, mask, radius) => {
+    const { width, height, data } = imageData;
+    const result = new Uint8ClampedArray(data);
+    
+    // Distance transform for prioritizing pixels
+    const distance = new Float32Array(width * height).fill(Infinity);
+    const known = new Uint8Array(width * height);
+    
+    // Initialize known pixels and boundary
+    const boundary = [];
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        if (!mask[idx]) {
+          known[idx] = 1;
+          distance[idx] = 0;
+        }
+      }
+    }
+    
+    // Find initial boundary (unknown pixels adjacent to known)
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        if (mask[idx]) {
+          // Check 4-neighbors
+          for (const [dx, dy] of [[0, 1], [0, -1], [1, 0], [-1, 0]]) {
+            const nx = x + dx, ny = y + dy;
+            if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+              const nidx = ny * width + nx;
+              if (!mask[nidx]) {
+                distance[idx] = 1;
+                boundary.push({ x, y, dist: 1 });
+                break;
+              }
+            }
+          }
+        }
+      }
+    }
+    
+    // Sort boundary by distance (priority queue simulation)
+    boundary.sort((a, b) => a.dist - b.dist);
+    
+    // Process pixels in order of distance
+    while (boundary.length > 0) {
+      const { x, y } = boundary.shift();
+      const idx = y * width + x;
+      
+      if (known[idx]) continue;
+      
+      // Compute color using weighted average of known neighbors
+      let totalWeight = 0;
+      let r = 0, g = 0, b = 0;
+      
+      for (let dy = -radius; dy <= radius; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+          const nx = x + dx, ny = y + dy;
+          if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+            const nidx = ny * width + nx;
+            if (known[nidx]) {
+              const dist = Math.sqrt(dx * dx + dy * dy);
+              if (dist <= radius && dist > 0) {
+                // Weight based on distance and direction
+                const weight = 1 / (dist * dist);
+                const pixelIdx = nidx * 4;
+                r += result[pixelIdx] * weight;
+                g += result[pixelIdx + 1] * weight;
+                b += result[pixelIdx + 2] * weight;
+                totalWeight += weight;
+              }
+            }
+          }
+        }
+      }
+      
+      if (totalWeight > 0) {
+        const pixelIdx = idx * 4;
+        result[pixelIdx] = r / totalWeight;
+        result[pixelIdx + 1] = g / totalWeight;
+        result[pixelIdx + 2] = b / totalWeight;
+        result[pixelIdx + 3] = 255;
+      }
+      
+      known[idx] = 1;
+      
+      // Add new boundary pixels
+      for (const [dx, dy] of [[0, 1], [0, -1], [1, 0], [-1, 0]]) {
+        const nx = x + dx, ny = y + dy;
+        if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+          const nidx = ny * width + nx;
+          if (mask[nidx] && !known[nidx] && distance[nidx] === Infinity) {
+            distance[nidx] = distance[idx] + 1;
+            boundary.push({ x: nx, y: ny, dist: distance[nidx] });
+            // Keep sorted (simple insertion)
+            boundary.sort((a, b) => a.dist - b.dist);
+          }
+        }
+      }
+    }
+    
+    return new ImageData(result, width, height);
+  };
+
+  // Navier-Stokes based inpainting (diffusion-based)
+  const inpaintNavierStokes = (imageData, mask, radius, iterations = 100) => {
+    const { width, height, data } = imageData;
+    const result = new Float32Array(data.length);
+    for (let i = 0; i < data.length; i++) result[i] = data[i];
+    
+    // Iterative diffusion
+    for (let iter = 0; iter < iterations; iter++) {
+      const temp = new Float32Array(result);
+      
+      for (let y = 1; y < height - 1; y++) {
+        for (let x = 1; x < width - 1; x++) {
+          const idx = y * width + x;
+          if (mask[idx]) {
+            const pixelIdx = idx * 4;
+            
+            // Laplacian diffusion
+            for (let c = 0; c < 3; c++) {
+              const north = ((y - 1) * width + x) * 4 + c;
+              const south = ((y + 1) * width + x) * 4 + c;
+              const east = (y * width + (x + 1)) * 4 + c;
+              const west = (y * width + (x - 1)) * 4 + c;
+              
+              result[pixelIdx + c] = (temp[north] + temp[south] + temp[east] + temp[west]) / 4;
+            }
+            result[pixelIdx + 3] = 255;
+          }
+        }
+      }
+    }
+    
+    const output = new Uint8ClampedArray(result.length);
+    for (let i = 0; i < result.length; i++) {
+      output[i] = Math.max(0, Math.min(255, Math.round(result[i])));
+    }
+    
+    return new ImageData(output, width, height);
+  };
+
+  // Create feathered mask for smooth blending
+  const createFeatheredMask = (width, height, region, featherRadius) => {
+    const mask = new Uint8Array(width * height);
+    const featherWeight = new Float32Array(width * height);
+    
+    const { x: rx, y: ry, w: rw, h: rh } = region;
+    
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        
+        // Check if inside the watermark region
+        if (x >= rx && x < rx + rw && y >= ry && y < ry + rh) {
+          mask[idx] = 1;
+          
+          // Calculate feather weight (distance from edge)
+          const distFromLeft = x - rx;
+          const distFromRight = (rx + rw) - x;
+          const distFromTop = y - ry;
+          const distFromBottom = (ry + rh) - y;
+          const minDist = Math.min(distFromLeft, distFromRight, distFromTop, distFromBottom);
+          
+          if (minDist < featherRadius) {
+            featherWeight[idx] = minDist / featherRadius;
+          } else {
+            featherWeight[idx] = 1;
+          }
+        }
+      }
+    }
+    
+    return { mask, featherWeight };
+  };
+
+  // Process single image
+  const processImage = useCallback((imgData, ctx, imgWidth, imgHeight) => {
+    const { width: wmWidth, height: wmHeight, offsetX, offsetY, blendRadius, method } = settings;
+    
+    // Watermark region (bottom-right corner)
+    const region = {
+      x: imgWidth - wmWidth - offsetX,
+      y: imgHeight - wmHeight - offsetY,
+      w: wmWidth,
+      h: wmHeight
+    };
+    
+    // Get image data
+    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
+    
+    // Create feathered mask
+    const { mask, featherWeight } = createFeatheredMask(imgWidth, imgHeight, region, blendRadius);
+    
+    // Apply inpainting
+    let result;
+    if (method === 'telea') {
+      result = inpaintTelea(imageData, mask, blendRadius);
+    } else {
+      result = inpaintNavierStokes(imageData, mask, blendRadius, 150);
+    }
+    
+    // Blend with feathering for smooth edges
+    const blended = new Uint8ClampedArray(imageData.data);
+    for (let y = 0; y < imgHeight; y++) {
+      for (let x = 0; x < imgWidth; x++) {
+        const idx = y * imgWidth + x;
+        if (mask[idx]) {
+          const pixelIdx = idx * 4;
+          const weight = featherWeight[idx];
+          for (let c = 0; c < 3; c++) {
+            blended[pixelIdx + c] = Math.round(
+              result.data[pixelIdx + c] * weight + 
+              imageData.data[pixelIdx + c] * (1 - weight)
+            );
+          }
+        }
+      }
+    }
+    
+    return new ImageData(blended, imgWidth, imgHeight);
+  }, [settings]);
+
+  // Remove watermark from current page
+  const removeWatermark = useCallback(() => {
+    if (images.length === 0) return;
+    
+    setProcessing(true);
+    
+    setTimeout(() => {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      const img = images[currentPage].original;
+      
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+      
+      const result = processImage(null, ctx, img.width, img.height);
+      ctx.putImageData(result, 0, 0);
+      
+      // Store processed result
+      const processedImg = new Image();
+      processedImg.src = canvas.toDataURL('image/png');
+      
+      setImages(prev => {
+        const updated = [...prev];
+        updated[currentPage] = {
+          ...updated[currentPage],
+          processed: processedImg,
+          processedDataUrl: canvas.toDataURL('image/jpeg', 0.85)
+        };
+        return updated;
+      });
+      
+      setProcessing(false);
+    }, 50);
+  }, [images, currentPage, processImage]);
+
+  // Process all pages
+  const processAllPages = useCallback(async () => {
+    if (images.length === 0) return;
+    
+    setProcessing(true);
+    
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    
+    for (let i = 0; i < images.length; i++) {
+      await new Promise(resolve => {
+        setTimeout(() => {
+          const img = images[i].original;
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0);
+          
+          const result = processImage(null, ctx, img.width, img.height);
+          ctx.putImageData(result, 0, 0);
+          
+          const processedImg = new Image();
+          processedImg.src = canvas.toDataURL('image/png');
+          
+          setImages(prev => {
+            const updated = [...prev];
+            updated[i] = {
+              ...updated[i],
+              processed: processedImg,
+              processedDataUrl: canvas.toDataURL('image/jpeg', 0.85)
+            };
+            return updated;
+          });
+          
+          resolve();
+        }, 50);
+      });
+    }
+    
+    setProcessing(false);
+  }, [images, processImage]);
+
+  // Download current processed image
+  const downloadCurrent = () => {
+    if (!images[currentPage]?.processedDataUrl) return;
+    
+    const link = document.createElement('a');
+    link.download = `processed_${images[currentPage].name}`;
+    link.href = images[currentPage].processedDataUrl;
+    link.click();
+  };
+
+  // Download all as PDF
+  const downloadAll = () => {
+    const processedImages = images.filter(img => img.processedDataUrl);
+    if (processedImages.length === 0) return;
+    
+    const firstImg = processedImages[0].processed;
+    const pdf = new jsPDF({
+      orientation: firstImg.width > firstImg.height ? 'landscape' : 'portrait',
+      unit: 'px',
+      format: [firstImg.width, firstImg.height]
+    });
+    
+    processedImages.forEach((img, idx) => {
+      if (idx > 0) {
+        pdf.addPage([img.processed.width, img.processed.height], 
+          img.processed.width > img.processed.height ? 'landscape' : 'portrait');
+      }
+      pdf.addImage(img.processedDataUrl, 'JPEG', 0, 0, img.processed.width, img.processed.height, undefined, 'FAST');
+    });
+    
+    pdf.save(`${originalFileName || 'processed'}_new.pdf`);
+  };
+
+  // Draw preview with watermark region indicator
+  const drawPreview = useCallback(() => {
+    if (images.length === 0 || !canvasRef.current) return;
+    
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const currentImg = images[currentPage];
+    const img = showOriginal || !currentImg.processed ? currentImg.original : currentImg.processed;
+    
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage(img, 0, 0);
+    
+    // Draw watermark region indicator
+    if (showOriginal || !currentImg.processed) {
+      const { width: wmWidth, height: wmHeight, offsetX, offsetY } = settings;
+      ctx.strokeStyle = '#ff4444';
+      ctx.lineWidth = 2;
+      ctx.setLineDash([5, 5]);
+      ctx.strokeRect(
+        img.width - wmWidth - offsetX,
+        img.height - wmHeight - offsetY,
+        wmWidth,
+        wmHeight
+      );
+      ctx.setLineDash([]);
+    }
+  }, [images, currentPage, showOriginal, settings]);
+
+  React.useEffect(() => {
+    drawPreview();
+  }, [drawPreview]);
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-6">
+      <div className="max-w-6xl mx-auto">
+        <h1 className="text-3xl font-bold mb-2 text-center">Watermark Remover</h1>
+        <p className="text-gray-400 text-center mb-6">
+          Classic CV inpainting for bottom-right watermarks
+        </p>
+
+        {/* Upload Section */}
+        <div className="bg-gray-800 rounded-lg p-6 mb-6">
+          <div className="flex flex-wrap gap-4 justify-center">
+            <label className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg cursor-pointer transition">
+              <Upload size={20} />
+              Upload PDF
+              <input
+                type="file"
+                accept="application/pdf"
+                onChange={handleFileUpload}
+                className="hidden"
+              />
+            </label>
+            
+            <label className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg cursor-pointer transition">
+              <Upload size={20} />
+              Upload Images
+              <input
+                type="file"
+                accept="image/*"
+                multiple
+                onChange={handleMultipleImages}
+                className="hidden"
+                ref={fileInputRef}
+              />
+            </label>
+            
+            <button
+              onClick={() => setShowSettings(!showSettings)}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg transition ${
+                showSettings ? 'bg-purple-600' : 'bg-gray-700 hover:bg-gray-600'
+              }`}
+            >
+              <Settings size={20} />
+              Settings
+            </button>
+          </div>
+
+          {/* Settings Panel */}
+          {showSettings && (
+            <div className="mt-4 p-4 bg-gray-700 rounded-lg">
+              <h3 className="font-semibold mb-3">Watermark Region (Bottom-Right Corner)</h3>
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                <div>
+                  <label className="block text-sm text-gray-400 mb-1">Width (px)</label>
+                  <input
+                    type="number"
+                    value={settings.width}
+                    onChange={(e) => setSettings(s => ({ ...s, width: parseInt(e.target.value) || 0 }))}
+                    className="w-full px-3 py-2 bg-gray-600 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-400 mb-1">Height (px)</label>
+                  <input
+                    type="number"
+                    value={settings.height}
+                    onChange={(e) => setSettings(s => ({ ...s, height: parseInt(e.target.value) || 0 }))}
+                    className="w-full px-3 py-2 bg-gray-600 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-400 mb-1">Offset X (px)</label>
+                  <input
+                    type="number"
+                    value={settings.offsetX}
+                    onChange={(e) => setSettings(s => ({ ...s, offsetX: parseInt(e.target.value) || 0 }))}
+                    className="w-full px-3 py-2 bg-gray-600 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-400 mb-1">Offset Y (px)</label>
+                  <input
+                    type="number"
+                    value={settings.offsetY}
+                    onChange={(e) => setSettings(s => ({ ...s, offsetY: parseInt(e.target.value) || 0 }))}
+                    className="w-full px-3 py-2 bg-gray-600 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-400 mb-1">Blend Radius</label>
+                  <input
+                    type="number"
+                    value={settings.blendRadius}
+                    onChange={(e) => setSettings(s => ({ ...s, blendRadius: parseInt(e.target.value) || 1 }))}
+                    className="w-full px-3 py-2 bg-gray-600 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-400 mb-1">Method</label>
+                  <select
+                    value={settings.method}
+                    onChange={(e) => setSettings(s => ({ ...s, method: e.target.value }))}
+                    className="w-full px-3 py-2 bg-gray-600 rounded"
+                  >
+                    <option value="telea">Telea (Fast Marching)</option>
+                    <option value="ns">Navier-Stokes (Diffusion)</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Main Content */}
+        {images.length > 0 && (
+          <div className="bg-gray-800 rounded-lg p-6">
+            {/* Controls */}
+            <div className="flex flex-wrap gap-3 mb-4 justify-center">
+              <button
+                onClick={removeWatermark}
+                disabled={processing}
+                className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 rounded-lg transition"
+              >
+                <Play size={20} />
+                {processing ? 'Processing...' : 'Remove Watermark'}
+              </button>
+              
+              <button
+                onClick={processAllPages}
+                disabled={processing}
+                className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 rounded-lg transition"
+              >
+                <Play size={20} />
+                Process All ({images.length})
+              </button>
+              
+              <button
+                onClick={() => setShowOriginal(!showOriginal)}
+                className="flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition"
+              >
+                {showOriginal ? <Eye size={20} /> : <EyeOff size={20} />}
+                {showOriginal ? 'Show Processed' : 'Show Original'}
+              </button>
+              
+              {images[currentPage]?.processed && (
+                <>
+                  <button
+                    onClick={downloadCurrent}
+                    className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"
+                  >
+                    <Download size={20} />
+                    Download
+                  </button>
+                  
+                  <button
+                    onClick={downloadAll}
+                    className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"
+                  >
+                    <Download size={20} />
+                    Download full PDF
+                  </button>
+                </>
+              )}
+              
+              <button
+                onClick={() => {
+                  setImages([]);
+                  setCurrentPage(0);
+                }}
+                className="flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition"
+              >
+                <RotateCcw size={20} />
+                Reset
+              </button>
+            </div>
+
+            {/* Navigation */}
+            {images.length > 1 && (
+              <div className="flex items-center justify-center gap-4 mb-4">
+                <button
+                  onClick={() => setCurrentPage(p => Math.max(0, p - 1))}
+                  disabled={currentPage === 0}
+                  className="p-2 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:text-gray-600 rounded-lg transition"
+                >
+                  <ChevronLeft size={24} />
+                </button>
+                <span className="text-lg">
+                  Page {currentPage + 1} of {images.length}
+                </span>
+                <button
+                  onClick={() => setCurrentPage(p => Math.min(images.length - 1, p + 1))}
+                  disabled={currentPage === images.length - 1}
+                  className="p-2 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:text-gray-600 rounded-lg transition"
+                >
+                  <ChevronRight size={24} />
+                </button>
+              </div>
+            )}
+
+            {/* Canvas Preview */}
+            <div className="flex justify-center overflow-auto bg-gray-900 rounded-lg p-4">
+              <canvas
+                ref={canvasRef}
+                className="max-w-full h-auto border border-gray-700"
+                style={{ maxHeight: '600px' }}
+              />
+            </div>
+
+            {/* Status */}
+            <div className="mt-4 text-center text-sm text-gray-400">
+              {processing && <span className="text-yellow-400">Processing... Please wait.</span>}
+              {!processing && images[currentPage]?.processed && (
+                <span className="text-green-400">✓ Watermark removed</span>
+              )}
+              {!processing && !images[currentPage]?.processed && (
+                <span>Red dashed box shows watermark region to remove</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Instructions */}
+        {images.length === 0 && (
+          <div className="bg-gray-800 rounded-lg p-6 text-center">
+            <h3 className="text-xl font-semibold mb-4">How to Use</h3>
+            <ol className="text-left max-w-md mx-auto space-y-2 text-gray-300">
+              <li>1. Convert your PDF pages to PNG/JPG images first</li>
+              <li>2. Upload all page images using the button above</li>
+              <li>3. Adjust the watermark region settings if needed</li>
+              <li>4. Click "Process All" to remove watermarks</li>
+              <li>5. Download the processed images</li>
+            </ol>
+            <p className="mt-4 text-sm text-gray-500">
+              Tip: Use tools like <code className="bg-gray-700 px-1 rounded">pdftoppm</code> or online converters to convert PDF to images
+            </p>
+          </div>
+        )}
+
+        {/* Algorithm Info */}
+        <div className="mt-6 text-sm text-gray-500 text-center">
+          <p>
+            Uses Telea (Fast Marching) or Navier-Stokes inpainting algorithms.
+            <br />
+            Feathered blending ensures smooth edges.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import WatermarkRemover from './WatermarkRemover'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <WatermarkRemover />
+  </React.StrictMode>,
+)

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})