|
|
<!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> |
