|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>DeOldify Quantized (Browser)</title>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
|
|
|
<style>
|
|
|
body {
|
|
|
font-family: sans-serif;
|
|
|
max-width: 800px;
|
|
|
margin: 0 auto;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
canvas {
|
|
|
border: 1px solid #ccc;
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
|
|
|
.controls {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
#status {
|
|
|
font-weight: bold;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<h1>DeOldify Quantized Model</h1>
|
|
|
<p style="text-align: center;">Faster, smaller download (61MB), slightly lower quality.</p>
|
|
|
<div class="container">
|
|
|
<div class="controls">
|
|
|
<input type="file" id="imageInput" accept="image/*" />
|
|
|
</div>
|
|
|
<div id="status">Select an image to start...</div>
|
|
|
<canvas id="outputCanvas"></canvas>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
const MODEL_URL = "https://huggingface.co/thookham/DeOldify-on-Browser/resolve/main/deoldify-quant.onnx";
|
|
|
let session = null;
|
|
|
|
|
|
const preprocess = (input_imageData, width, height) => {
|
|
|
const floatArr = new Float32Array(width * height * 3);
|
|
|
let j = 0;
|
|
|
for (let i = 0; i < input_imageData.data.length; i += 4) {
|
|
|
|
|
|
floatArr[j] = input_imageData.data[i] / 255.0;
|
|
|
floatArr[j + 1] = input_imageData.data[i + 1] / 255.0;
|
|
|
floatArr[j + 2] = input_imageData.data[i + 2] / 255.0;
|
|
|
j += 3;
|
|
|
}
|
|
|
return floatArr;
|
|
|
};
|
|
|
|
|
|
const postprocess = (tensor) => {
|
|
|
const channels = tensor.dims[1];
|
|
|
const height = tensor.dims[2];
|
|
|
const width = tensor.dims[3];
|
|
|
const imageData = new ImageData(width, height);
|
|
|
const data = imageData.data;
|
|
|
const tensorData = new Float32Array(tensor.data);
|
|
|
|
|
|
for (let h = 0; h < height; h++) {
|
|
|
for (let w = 0; w < width; w++) {
|
|
|
let rgb = [];
|
|
|
for (let c = 0; c < channels; c++) {
|
|
|
const tensorIndex = (c * height + h) * width + w;
|
|
|
const value = tensorData[tensorIndex];
|
|
|
|
|
|
let val = value * 255.0;
|
|
|
if (val < 0) val = 0;
|
|
|
if (val > 255) val = 255;
|
|
|
rgb.push(Math.round(val));
|
|
|
}
|
|
|
data[(h * width + w) * 4] = rgb[0];
|
|
|
data[(h * width + w) * 4 + 1] = rgb[1];
|
|
|
data[(h * width + w) * 4 + 2] = rgb[2];
|
|
|
data[(h * width + w) * 4 + 3] = 255;
|
|
|
}
|
|
|
}
|
|
|
return imageData;
|
|
|
};
|
|
|
|
|
|
async function init() {
|
|
|
const status = document.getElementById('status');
|
|
|
status.innerText = "Checking cache...";
|
|
|
try {
|
|
|
let buffer;
|
|
|
const cacheName = 'deoldify-models-v1';
|
|
|
|
|
|
|
|
|
try {
|
|
|
const cache = await caches.open(cacheName);
|
|
|
const cachedResponse = await cache.match(MODEL_URL);
|
|
|
|
|
|
if (cachedResponse) {
|
|
|
status.innerText = "Loading model from cache...";
|
|
|
const blob = await cachedResponse.blob();
|
|
|
buffer = await blob.arrayBuffer();
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.warn("Cache API not supported or failed:", e);
|
|
|
}
|
|
|
|
|
|
|
|
|
if (!buffer) {
|
|
|
status.innerText = "Downloading model from Hugging Face... 0%";
|
|
|
const response = await fetch(MODEL_URL);
|
|
|
if (!response.ok) throw new Error(`Failed to fetch model: ${response.statusText}`);
|
|
|
|
|
|
const contentLength = response.headers.get('content-length');
|
|
|
const total = contentLength ? parseInt(contentLength, 10) : 0;
|
|
|
let loaded = 0;
|
|
|
|
|
|
const reader = response.body.getReader();
|
|
|
const chunks = [];
|
|
|
|
|
|
while (true) {
|
|
|
const { done, value } = await reader.read();
|
|
|
if (done) break;
|
|
|
chunks.push(value);
|
|
|
loaded += value.length;
|
|
|
if (total) {
|
|
|
const progress = Math.round((loaded / total) * 100);
|
|
|
status.innerText = `Downloading model from Hugging Face... ${progress}%`;
|
|
|
} else {
|
|
|
status.innerText = `Downloading model from Hugging Face... ${(loaded / 1024 / 1024).toFixed(1)} MB`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const blob = new Blob(chunks);
|
|
|
buffer = await blob.arrayBuffer();
|
|
|
|
|
|
|
|
|
try {
|
|
|
const cache = await caches.open(cacheName);
|
|
|
await cache.put(MODEL_URL, new Response(blob));
|
|
|
console.log("Model saved to cache");
|
|
|
} catch (e) {
|
|
|
console.warn("Failed to save to cache:", e);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
status.innerText = "Initializing session...";
|
|
|
session = await ort.InferenceSession.create(buffer);
|
|
|
|
|
|
status.innerText = "Model loaded! Select an image.";
|
|
|
console.log("Session created:", session);
|
|
|
} catch (e) {
|
|
|
status.innerText = "Error loading model: " + e.message;
|
|
|
console.error(e);
|
|
|
if (e.message.includes("Failed to fetch")) {
|
|
|
status.innerHTML += "<br><br>⚠️ <b>CORS Error Detected</b>: If you are running this file directly (file://), you must use a local server.<br>Run <code>python -m http.server 8000</code> in the terminal and visit <code>http://localhost:8000/quantized.html</code>";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
document.getElementById('imageInput').addEventListener('change', async function (e) {
|
|
|
if (!session) {
|
|
|
await init();
|
|
|
}
|
|
|
|
|
|
const file = e.target.files[0];
|
|
|
if (!file) return;
|
|
|
|
|
|
|
|
|
if (!file.type.startsWith('image/')) {
|
|
|
alert('Please select a valid image file.');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const image = new Image();
|
|
|
const objectUrl = URL.createObjectURL(file);
|
|
|
image.src = objectUrl;
|
|
|
|
|
|
image.onload = async function () {
|
|
|
document.getElementById('status').innerText = "Processing...";
|
|
|
|
|
|
|
|
|
let canvas = document.createElement("canvas");
|
|
|
const size = 256;
|
|
|
canvas.width = size;
|
|
|
canvas.height = size;
|
|
|
let ctx = canvas.getContext("2d");
|
|
|
ctx.drawImage(image, 0, 0, size, size);
|
|
|
|
|
|
const input_img = ctx.getImageData(0, 0, size, size);
|
|
|
const test = preprocess(input_img, size, size);
|
|
|
const input = new ort.Tensor(new Float32Array(test), [1, 3, size, size]);
|
|
|
|
|
|
try {
|
|
|
const result = await session.run({ "input": input });
|
|
|
|
|
|
const output = result["output"] || result["out"] || Object.values(result)[0];
|
|
|
|
|
|
if (!output) throw new Error("No output tensor found in model result");
|
|
|
|
|
|
const imgdata = postprocess(output);
|
|
|
|
|
|
|
|
|
const outCanvas = document.getElementById('outputCanvas');
|
|
|
outCanvas.width = image.width;
|
|
|
outCanvas.height = image.height;
|
|
|
const outCtx = outCanvas.getContext('2d');
|
|
|
|
|
|
|
|
|
const tempCanvas = document.createElement('canvas');
|
|
|
tempCanvas.width = size;
|
|
|
tempCanvas.height = size;
|
|
|
tempCanvas.getContext('2d').putImageData(imgdata, 0, 0);
|
|
|
|
|
|
|
|
|
outCtx.drawImage(tempCanvas, 0, 0, image.width, image.height);
|
|
|
|
|
|
document.getElementById('status').innerText = "Done!";
|
|
|
} catch (err) {
|
|
|
document.getElementById('status').innerText = "Error processing: " + err.message;
|
|
|
console.error(err);
|
|
|
} finally {
|
|
|
|
|
|
URL.revokeObjectURL(objectUrl);
|
|
|
}
|
|
|
};
|
|
|
});
|
|
|
|
|
|
|
|
|
init();
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
