Koko2011
/

Ai-image-enhancer

ONNX

Model card Files Files and versions

xet

Community

Koko2011 commited on Sep 16, 2025

Commit

06f05e5

verified ·

1 Parent(s): ee0b410

Upload 2 files

Browse files

Files changed (2) hide show

index.html +360 -0
model.onnx +3 -0

index.html ADDED Viewed

	@@ -0,0 +1,360 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>advanced ai image enhancer</title>
+  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
+  <style>
+    :root {
+      --bg-color: #121212; --surface-color: #1e1e1e; --primary-color: #03dac6;
+      --on-primary-color: #000000; --text-color: #e0e0e0; --border-color: #333333;
+    }
+    body {
+      font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, sans-serif;
+      background-color: var(--bg-color); color: var(--text-color); margin: 0;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      min-height: 100vh; padding: 20px; box-sizing: border-box;
+    }
+    h1 { color: var(--primary-color); text-align: center; }
+    .container {
+      width: 100%; max-width: 900px; background-color: var(--surface-color);
+      border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+      padding: 2rem; box-sizing: border-box;
+    }
+    .app-state { display: none; }
+    body.state-loading #loadingstate, body.state-upload #uploadstate,
+    body.state-pre-process #preprocessstate, body.state-processing #processingstate,
+    body.state-results #resultsstate { display: block; }
+    #loadingstate, #processingstate { text-align: center; }
+    .spinner {
+        border: 4px solid rgba(255, 255, 255, 0.2); border-left-color: var(--primary-color);
+        border-radius: 50%; width: 40px; height: 40px;
+        animation: spin 1s linear infinite; margin: 20px auto;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    #drop-area {
+      border: 2px dashed var(--border-color); border-radius: 8px; padding: 40px;
+      text-align: center; transition: background-color 0.2s, border-color 0.2s; cursor: pointer;
+    }
+    #drop-area.highlight { background-color: rgba(3, 218, 198, 0.1); border-color: var(--primary-color); }
+    #drop-area p { margin: 0; font-size: 1.2rem; }
+    .btn {
+      display: inline-block; background-color: var(--primary-color); color: var(--on-primary-color);
+      padding: 12px 24px; border-radius: 6px; border: none; font-weight: bold;
+      margin-top: 20px; cursor: pointer; transition: opacity 0.2s;
+    }
+    .btn:hover { opacity: 0.9; }
+    #fileelem { display: none; }
+    #progressbarcontainer { width: 100%; background-color: var(--border-color); border-radius: 4px; overflow: hidden; margin-top: 20px; }
+    #progressbar { width: 0%; height: 20px; background-color: var(--primary-color); transition: width 0.3s ease-in-out; }
+    .comparison-container { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
+    .comparison-container canvas { display: block; width: 100%; height: auto; }
+    #outputcanvas { position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
+    .slider { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background-color: rgba(255, 255, 255, 0.7); cursor: ew-resize; transform: translatex(-50%); }
+    .slider-handle { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border: 2px solid white; border-radius: 50%; background-color: var(--primary-color); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: space-evenly; }
+    .slider-handle::before, .slider-handle::after { content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
+    .slider-handle::before { border-right: 8px solid var(--on-primary-color); } .slider-handle::after { border-left: 8px solid var(--on-primary-color); }
+    .controls { margin-top: 20px; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
+    #preprocessstate canvas { max-width: 100%; border-radius: 8px; margin-top: 15px; }
+    .blur-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
+  </style>
+</head>
+<body class="state-loading">
+  <div class="container">
+    <h1>ai image enhancer</h1>
+    <div id="loadingstate" class="app-state"><p>loading ai model...</p><div class="spinner"></div><p id="modelerror" style="color: #cf6679; display: none;"></p></div>
+    <div id="uploadstate" class="app-state">
+      <input type="file" id="fileelem" accept="image/*">
+      <div id="drop-area"><p>drag & drop image here</p><p>or</p><label for="fileelem" class="btn">choose a file</label></div>
+    </div>
+    <div id="preprocessstate" class="app-state">
+        <p>your uploaded image:</p>
+        <canvas id="preprocesscanvas"></canvas>
+        <div class="blur-controls">
+            <label for="blurslider">blur radius: <span id="blurvalue">0</span>px</label>
+            <input type="range" id="blurslider" min="0" max="10" value="0" step="0.1" style="width: 80%;">
+        </div>
+        <div class="controls">
+            <button id="enhanceblurredbtn" class="btn">enhance blurred image</button>
+            <button id="enhanceoriginalbtn" class="btn">enhance original</button>
+        </div>
+    </div>
+    <div id="processingstate" class="app-state"><p>enhancing image, please wait...</p><div id="progressbarcontainer"><div id="progressbar"></div></div><p id="progresstext">0%</p></div>
+    <div id="resultsstate" class="app-state">
+      <p style="text-align:center;">slide to compare before vs. after</p>
+      <div class="comparison-container" id="comparisoncontainer"><canvas id="inputcanvas"></canvas><canvas id="outputcanvas"></canvas><div class="slider" id="slider"><div class="slider-handle"></div></div></div>
+      <div class="controls"><button id="downloadbtn" class="btn">download enhanced image</button><button id="resetbtn" class="btn">enhance another</button></div>
+    </div>
+  </div>
+<script>
+    const tile_size = 256;
+    const overlap_size = 32; // Pixels to overlap on each side
+    const effective_tile_size = tile_size - 2 * overlap_size; // The non-overlapping part
+    const dom = {
+        body: document.body, droparea: document.getElementById('drop-area'), fileelem: document.getElementById('fileelem'),
+        progressbar: document.getElementById('progressbar'), progresstext: document.getElementById('progresstext'),
+        modelerrortext: document.getElementById('modelerror'), inputcanvas: document.getElementById('inputcanvas'),
+        outputcanvas: document.getElementById('outputcanvas'), comparisoncontainer: document.getElementById('comparisoncontainer'),
+        slider: document.getElementById('slider'), downloadbtn: document.getElementById('downloadbtn'), resetbtn: document.getElementById('resetbtn'),
+        preprocesscanvas: document.getElementById('preprocesscanvas'), blurslider: document.getElementById('blurslider'),
+        blurvalue: document.getElementById('blurvalue'), enhanceblurredbtn: document.getElementById('enhanceblurredbtn'),
+        enhanceoriginalbtn: document.getElementById('enhanceoriginalbtn')
+    };
+    let session, originalimage;
+    function setappstate(state) { dom.body.className = `state-${state}`; }
+    async function initmodel() {
+      try {
+        session = await ort.InferenceSession.create("./model.onnx");
+        setappstate('upload');
+      } catch (error) {
+        dom.modelerrortext.textContent = `Error: Failed to load model. Make sure 'model.onnx' is in the same directory as this HTML file and you are running a local server. Details: ${error.message}`;
+        dom.modelerrortext.style.display = 'block';
+      }
+    }
+    function getimagetensor(ctx, x, y, width = tile_size, height = tile_size) {
+      const imageData = ctx.getImageData(x, y, width, height);
+      const { data } = imageData;
+      const float32Data = new Float32Array(3 * width * height);
+      for (let i = 0; i < width * height; i++) {
+        float32Data[i] = data[i * 4] / 255.0;
+        float32Data[i + width * height] = data[i * 4 + 1] / 255.0;
+        float32Data[i + 2 * width * height] = data[i * 4 + 2] / 255.0;
+      }
+      return new ort.Tensor("float32", float32Data, [1, 3, height, width]);
+    }
+    function putimagetensor(ctx, x, y, tensor, width = tile_size, height = tile_size) {
+      const outputData = tensor.data;
+      const imageData = ctx.createImageData(width, height);
+      for (let i = 0; i < width * height; i++) {
+        imageData.data[i * 4] = Math.max(0, Math.min(255, outputData[i] * 255));
+        imageData.data[i * 4 + 1] = Math.max(0, Math.min(255, outputData[i + width * height] * 255));
+        imageData.data[i * 4 + 2] = Math.max(0, Math.min(255, outputData[i + 2 * width * height] * 255));
+        imageData.data[i * 4 + 3] = 255;
+      }
+      ctx.putImageData(imageData, x, y);
+    }
+    // New blending function
+    function blendpixels(targetData, sourceData, index, alpha) {
+        targetData[index] = targetData[index] * (1 - alpha) + sourceData[index] * alpha;
+        targetData[index + 1] = targetData[index + 1] * (1 - alpha) + sourceData[index + 1] * alpha;
+        targetData[index + 2] = targetData[index + 2] * (1 - alpha) + sourceData[index + 2] * alpha;
+        targetData[index + 3] = 255; // Alpha channel
+    }
+    async function enhanceimage(sourcecanvas) {
+        setappstate('processing');
+        await new Promise(r => setTimeout(r, 100)); // Allow UI to update
+        const originalWidth = sourcecanvas.width;
+        const originalHeight = sourcecanvas.height;
+        // Calculate padded dimensions to ensure full coverage with effective_tile_size
+        const numTilesX = Math.ceil(originalWidth / effective_tile_size);
+        const numTilesY = Math.ceil(originalHeight / effective_tile_size);
+        const paddedWidth = numTilesX * effective_tile_size + 2 * overlap_size;
+        const paddedHeight = numTilesY * effective_tile_size + 2 * overlap_size;
+        const paddedInputCanvas = document.createElement('canvas');
+        paddedInputCanvas.width = paddedWidth;
+        paddedInputCanvas.height = paddedHeight;
+        const paddedInputCtx = paddedInputCanvas.getContext('2d');
+        // Draw the original image centered within the padded canvas
+        paddedInputCtx.drawImage(sourcecanvas, overlap_size, overlap_size, originalWidth, originalHeight);
+        const paddedOutputCanvas = document.createElement('canvas');
+        paddedOutputCanvas.width = paddedWidth;
+        paddedOutputCanvas.height = paddedHeight;
+        const paddedOutputCtx = paddedOutputCanvas.getContext('2d');
+        const totalTiles = numTilesX * numTilesY;
+        let processedTiles = 0;
+        for (let y_idx = 0; y_idx < numTilesY; y_idx++) {
+            for (let x_idx = 0; x_idx < numTilesX; x_idx++) {
+                // Calculate the top-left corner for extracting the *overlapping* input tile
+                let inputTileX = x_idx * effective_tile_size;
+                let inputTileY = y_idx * effective_tile_size;
+                // Ensure we don't go out of bounds for the input tile extraction
+                inputTileX = Math.min(inputTileX, paddedWidth - tile_size);
+                inputTileY = Math.min(inputTileY, paddedHeight - tile_size);
+                const tensor = getimagetensor(paddedInputCtx, inputTileX, inputTileY, tile_size, tile_size);
+                const results = await session.run({ input: tensor });
+                const outputTensor = results.output;
+                // Get the output tile as ImageData
+                const outputTileImageData = paddedOutputCtx.createImageData(tile_size, tile_size);
+                for (let i = 0; i < tile_size * tile_size; i++) {
+                    outputTileImageData.data[i * 4] = Math.max(0, Math.min(255, outputTensor.data[i] * 255));
+                    outputTileImageData.data[i * 4 + 1] = Math.max(0, Math.min(255, outputTensor.data[i + tile_size * tile_size] * 255));
+                    outputTileImageData.data[i * 4 + 2] = Math.max(0, Math.min(255, outputTensor.data[i + 2 * tile_size * tile_size] * 255));
+                    outputTileImageData.data[i * 4 + 3] = 255;
+                }
+                // Calculate the top-left corner for placing the *effective* part of the output tile
+                const outputPlacementX = x_idx * effective_tile_size;
+                const outputPlacementY = y_idx * effective_tile_size;
+                // Get the current image data from the padded output canvas for blending
+                const currentImageData = paddedOutputCtx.getImageData(outputPlacementX, outputPlacementY, effective_tile_size + overlap_size * 2, effective_tile_size + overlap_size * 2); // Get a larger area for blending
+                // Iterate over the output tile data and blend it into the padded output canvas
+                for (let yy = 0; yy < tile_size; yy++) {
+                    for (let xx = 0; xx < tile_size; xx++) {
+                        const globalX = outputPlacementX + xx;
+                        const globalY = outputPlacementY + yy;
+                        // Check bounds relative to the padded output canvas
+                        if (globalX >= paddedWidth || globalY >= paddedHeight || globalX < 0 || globalY < 0) continue;
+                        const outputTilePixelIndex = (yy * tile_size + xx) * 4;
+                        const globalPixelIndex = ((globalY) * paddedWidth + (globalX)) * 4;
+                        let alpha = 1.0; // Default to full opacity
+                        // Horizontal blending (left side)
+                        if (xx < overlap_size && x_idx > 0) {
+                            alpha *= (xx / overlap_size);
+                        }
+                        // Horizontal blending (right side)
+                        if (xx >= tile_size - overlap_size && x_idx < numTilesX - 1) {
+                            alpha *= ((tile_size - 1 - xx) / overlap_size);
+                        }
+                        // Vertical blending (top side)
+                        if (yy < overlap_size && y_idx > 0) {
+                            alpha *= (yy / overlap_size);
+                        }
+                        // Vertical blending (bottom side)
+                        if (yy >= tile_size - overlap_size && y_idx < numTilesY - 1) {
+                            alpha *= ((tile_size - 1 - yy) / overlap_size);
+                        }
+                        // Apply blending
+                        if (alpha < 1.0) {
+                           // Read existing pixel data from the paddedOutputCtx to blend with
+                           const existingPixelData = paddedOutputCtx.getImageData(globalX, globalY, 1, 1).data;
+                           outputTileImageData.data[outputTilePixelIndex] = Math.round(existingPixelData[0] * (1 - alpha) + outputTileImageData.data[outputTilePixelIndex] * alpha);
+                           outputTileImageData.data[outputTilePixelIndex + 1] = Math.round(existingPixelData[1] * (1 - alpha) + outputTileImageData.data[outputTilePixelIndex + 1] * alpha);
+                           outputTileImageData.data[outputTilePixelIndex + 2] = Math.round(existingPixelData[2] * (1 - alpha) + outputTileImageData.data[outputTilePixelIndex + 2] * alpha);
+                        }
+                    }
+                }
+                paddedOutputCtx.putImageData(outputTileImageData, outputPlacementX, outputPlacementY);
+                processedTiles++;
+                const progress = Math.round((processedTiles / totalTiles) * 100);
+                dom.progressbar.style.width = `${progress}%`;
+                dom.progresstext.textContent = `${progress}%`;
+                await new Promise(resolve => setTimeout(resolve, 0));
+            }
+        }
+        dom.inputcanvas.width = originalWidth;
+        dom.inputcanvas.height = originalHeight;
+        dom.inputcanvas.getContext('2d').drawImage(sourcecanvas, 0, 0);
+        // Draw the effectively enhanced part from the padded output canvas onto the final output canvas
+        dom.outputcanvas.width = originalWidth;
+        dom.outputcanvas.height = originalHeight;
+        dom.outputcanvas.getContext('2d').drawImage(paddedOutputCanvas, overlap_size, overlap_size, originalWidth, originalHeight, 0, 0, originalWidth, originalHeight);
+        setappstate('results');
+    }
+    function applyblurpreview() {
+        const radius = dom.blurslider.value;
+        dom.blurvalue.textContent = radius;
+        const ctx = dom.preprocesscanvas.getContext('2d');
+        ctx.clearRect(0, 0, dom.preprocesscanvas.width, dom.preprocesscanvas.height);
+        ctx.filter = `blur(${radius}px)`;
+        ctx.drawImage(originalimage, 0, 0);
+        ctx.filter = 'none';
+    }
+    function handlefiles(files) {
+        const file = files[0];
+        if (!file || !file.type.startsWith('image/')) return alert('Please upload a valid image file.');
+        const img = new Image();
+        img.onload = () => {
+            originalimage = img;
+            const ctx = dom.preprocesscanvas.getContext('2d');
+            dom.preprocesscanvas.width = img.width;
+            dom.preprocesscanvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+            dom.blurslider.value = 0;
+            dom.blurvalue.textContent = '0';
+            setappstate('pre-process');
+        };
+        img.src = URL.createObjectURL(file);
+    }
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(ename => dom.droparea.addEventListener(ename, e => { e.preventDefault(); e.stopPropagation(); }));
+    ['dragenter', 'dragover'].forEach(ename => dom.droparea.addEventListener(ename, () => dom.droparea.classList.add('highlight')));
+    ['dragleave', 'drop'].forEach(ename => dom.droparea.addEventListener(ename, () => dom.droparea.classList.remove('highlight')));
+    dom.droparea.addEventListener('drop', e => handlefiles(e.dataTransfer.files));
+    dom.fileelem.addEventListener('change', e => handlefiles(e.target.files));
+    dom.downloadbtn.addEventListener('click', () => {
+        const link = document.createElement('a');
+        link.download = 'enhanced_image.png';
+        link.href = dom.outputcanvas.toDataURL('image/png');
+        link.click();
+    });
+    dom.resetbtn.addEventListener('click', () => {
+      setappstate('upload');
+      dom.slider.style.left = '50%';
+      dom.outputcanvas.style.clipPath = 'polygon(0 0, 50% 0, 50% 100%, 0 100%)';
+    });
+    dom.blurslider.addEventListener('input', applyblurpreview);
+    dom.enhanceblurredbtn.addEventListener('click', () => {
+        const blurredcanvas = document.createElement('canvas');
+        blurredcanvas.width = originalimage.width;
+        blurredcanvas.height = originalimage.height;
+        const ctx = blurredcanvas.getContext('2d');
+        ctx.filter = `blur(${dom.blurslider.value}px)`;
+        ctx.drawImage(originalimage, 0, 0);
+        enhanceimage(blurredcanvas);
+    });
+    dom.enhanceoriginalbtn.addEventListener('click', () => enhanceimage(dom.preprocesscanvas));
+    let isdragging = false;
+    const moveslider = (clientX) => {
+        if (!isdragging) return;
+        const rect = dom.comparisoncontainer.getBoundingClientRect();
+        let x = clientX - rect.left;
+        x = Math.max(0, Math.min(x, rect.width));
+        const percent = (x / rect.width) * 100;
+        dom.slider.style.left = `${percent}%`;
+        dom.outputcanvas.style.clipPath = `polygon(0 0, ${percent}% 0, ${percent}% 100%, 0 100%)`;
+    };
+    dom.slider.addEventListener('mousedown', () => isdragging = true);
+    document.addEventListener('mouseup', () => isdragging = false);
+    document.addEventListener('mousemove', e => moveslider(e.clientX));
+    dom.slider.addEventListener('touchstart', e => { isdragging = true; e.preventDefault(); });
+    document.addEventListener('touchend', () => isdragging = false);
+    document.addEventListener('touchmove', e => moveslider(e.touches[0].clientX));
+    initmodel();
+  </script>
+</body>
+</html>

model.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:28df809253011dbd555e460af7b82a062cdddf7d362403393c8545db286f0ca7
+size 124136009