Update index.html
Browse files- index.html +127 -36
index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>ChatGPT
|
| 7 |
<style>
|
| 8 |
* {
|
| 9 |
margin: 0;
|
|
@@ -280,7 +280,7 @@
|
|
| 280 |
</head>
|
| 281 |
<body>
|
| 282 |
<div class="container">
|
| 283 |
-
<h1>ChatGPT
|
| 284 |
|
| 285 |
<div class="upload-area" id="uploadArea">
|
| 286 |
<p>Drop image(s) here or click to upload</p>
|
|
@@ -562,40 +562,8 @@
|
|
| 562 |
const width = imageData.width;
|
| 563 |
const height = imageData.height;
|
| 564 |
|
| 565 |
-
// Step 1:
|
| 566 |
-
|
| 567 |
-
|
| 568 |
-
// Detect yellow tint severity
|
| 569 |
-
const yellowFactor = ((avgR + avgG) / 2) / (avgB + 1);
|
| 570 |
-
const yellowSeverity = Math.min(Math.max((yellowFactor - 1.0) / 0.5, 0), 1);
|
| 571 |
-
|
| 572 |
-
// Adaptive correction based on tint level
|
| 573 |
-
const targetGray = 165 + yellowSeverity * 20;
|
| 574 |
-
const blueBoost = 1.08 + yellowSeverity * 0.12;
|
| 575 |
-
const redReduction = 0.96 - yellowSeverity * 0.04;
|
| 576 |
-
|
| 577 |
-
let scaleB = (targetGray * blueBoost) / avgB;
|
| 578 |
-
let scaleG = targetGray / avgG;
|
| 579 |
-
let scaleR = (targetGray * redReduction) / avgR;
|
| 580 |
-
|
| 581 |
-
// Apply safety limits
|
| 582 |
-
scaleB = Math.min(Math.max(scaleB, 0.7), 3.0);
|
| 583 |
-
scaleG = Math.min(Math.max(scaleG, 0.7), 2.5);
|
| 584 |
-
scaleR = Math.min(Math.max(scaleR, 0.7), 2.5);
|
| 585 |
-
|
| 586 |
-
// Apply channel scaling
|
| 587 |
-
for (let i = 0; i < data.length; i += 4) {
|
| 588 |
-
data[i] *= scaleR;
|
| 589 |
-
data[i + 1] *= scaleG;
|
| 590 |
-
data[i + 2] *= scaleB;
|
| 591 |
-
}
|
| 592 |
-
|
| 593 |
-
// Clip
|
| 594 |
-
for (let i = 0; i < data.length; i += 4) {
|
| 595 |
-
data[i] = Math.min(255, Math.max(0, data[i]));
|
| 596 |
-
data[i + 1] = Math.min(255, Math.max(0, data[i + 1]));
|
| 597 |
-
data[i + 2] = Math.min(255, Math.max(0, data[i + 2]));
|
| 598 |
-
}
|
| 599 |
|
| 600 |
// Step 2: Adaptive exposure compensation
|
| 601 |
const meanBrightness = this.calculateMeanBrightness(data);
|
|
@@ -640,6 +608,129 @@
|
|
| 640 |
return new ImageData(result, width, height);
|
| 641 |
}
|
| 642 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 643 |
robustMean(data) {
|
| 644 |
const rValues = [];
|
| 645 |
const gValues = [];
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>ChatGPT yellow tint corrector</title>
|
| 7 |
<style>
|
| 8 |
* {
|
| 9 |
margin: 0;
|
|
|
|
| 280 |
</head>
|
| 281 |
<body>
|
| 282 |
<div class="container">
|
| 283 |
+
<h1>ChatGPT yellow tint corrector</h1>
|
| 284 |
|
| 285 |
<div class="upload-area" id="uploadArea">
|
| 286 |
<p>Drop image(s) here or click to upload</p>
|
|
|
|
| 562 |
const width = imageData.width;
|
| 563 |
const height = imageData.height;
|
| 564 |
|
| 565 |
+
// Step 1: Smart white balance with feedback
|
| 566 |
+
this.smartWhiteBalance(data);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 567 |
|
| 568 |
// Step 2: Adaptive exposure compensation
|
| 569 |
const meanBrightness = this.calculateMeanBrightness(data);
|
|
|
|
| 608 |
return new ImageData(result, width, height);
|
| 609 |
}
|
| 610 |
|
| 611 |
+
smartWhiteBalance(data) {
|
| 612 |
+
// Find what should be white in the image
|
| 613 |
+
const whitePoint = this.findWhitePoint(data);
|
| 614 |
+
|
| 615 |
+
if (!whitePoint) {
|
| 616 |
+
// No clear white point, use robust mean method with full correction
|
| 617 |
+
this.fallbackWhiteBalance(data);
|
| 618 |
+
return;
|
| 619 |
+
}
|
| 620 |
+
|
| 621 |
+
// Calculate correction needed to make the white point actually white
|
| 622 |
+
const targetWhite = 255; // Pure white target
|
| 623 |
+
|
| 624 |
+
// Calculate multipliers
|
| 625 |
+
let scaleR = targetWhite / whitePoint.r;
|
| 626 |
+
let scaleG = targetWhite / whitePoint.g;
|
| 627 |
+
let scaleB = targetWhite / whitePoint.b;
|
| 628 |
+
|
| 629 |
+
// Normalize scales relative to green (most accurate channel)
|
| 630 |
+
const baseScale = scaleG;
|
| 631 |
+
scaleR = scaleR / baseScale;
|
| 632 |
+
scaleB = scaleB / baseScale;
|
| 633 |
+
scaleG = scaleG / baseScale;
|
| 634 |
+
|
| 635 |
+
// Apply overall brightness adjustment to reach target
|
| 636 |
+
const brightnessFactor = baseScale;
|
| 637 |
+
scaleR *= brightnessFactor;
|
| 638 |
+
scaleG *= brightnessFactor;
|
| 639 |
+
scaleB *= brightnessFactor;
|
| 640 |
+
|
| 641 |
+
// Apply safety limits but allow more aggressive correction
|
| 642 |
+
scaleR = Math.min(Math.max(scaleR, 0.5), 3.0);
|
| 643 |
+
scaleG = Math.min(Math.max(scaleG, 0.5), 3.0);
|
| 644 |
+
scaleB = Math.min(Math.max(scaleB, 0.5), 3.5); // Allow more blue boost
|
| 645 |
+
|
| 646 |
+
// Apply correction
|
| 647 |
+
for (let i = 0; i < data.length; i += 4) {
|
| 648 |
+
data[i] *= scaleR;
|
| 649 |
+
data[i + 1] *= scaleG;
|
| 650 |
+
data[i + 2] *= scaleB;
|
| 651 |
+
data[i] = Math.min(255, Math.max(0, data[i]));
|
| 652 |
+
data[i + 1] = Math.min(255, Math.max(0, data[i + 1]));
|
| 653 |
+
data[i + 2] = Math.min(255, Math.max(0, data[i + 2]));
|
| 654 |
+
}
|
| 655 |
+
}
|
| 656 |
+
|
| 657 |
+
findWhitePoint(data) {
|
| 658 |
+
// Find pixels that should be white
|
| 659 |
+
// These are bright pixels with low color variation
|
| 660 |
+
const candidates = [];
|
| 661 |
+
|
| 662 |
+
for (let i = 0; i < data.length; i += 40) { // Sample every 10th pixel for speed
|
| 663 |
+
const r = data[i];
|
| 664 |
+
const g = data[i + 1];
|
| 665 |
+
const b = data[i + 2];
|
| 666 |
+
|
| 667 |
+
const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
|
| 668 |
+
const max = Math.max(r, g, b);
|
| 669 |
+
const min = Math.min(r, g, b);
|
| 670 |
+
const saturation = max > 0 ? (max - min) / max : 0;
|
| 671 |
+
|
| 672 |
+
// Look for bright, desaturated pixels
|
| 673 |
+
if (brightness > 190 && saturation < 0.2) { // Slightly lower threshold to catch more whites
|
| 674 |
+
candidates.push({ r, g, b, brightness });
|
| 675 |
+
}
|
| 676 |
+
}
|
| 677 |
+
|
| 678 |
+
if (candidates.length === 0) {
|
| 679 |
+
return null;
|
| 680 |
+
}
|
| 681 |
+
|
| 682 |
+
// Sort by brightness and take top 2% (more selective)
|
| 683 |
+
candidates.sort((a, b) => b.brightness - a.brightness);
|
| 684 |
+
const topCount = Math.max(1, Math.floor(candidates.length * 0.02));
|
| 685 |
+
|
| 686 |
+
// Average the top candidates
|
| 687 |
+
let sumR = 0, sumG = 0, sumB = 0;
|
| 688 |
+
for (let i = 0; i < topCount; i++) {
|
| 689 |
+
sumR += candidates[i].r;
|
| 690 |
+
sumG += candidates[i].g;
|
| 691 |
+
sumB += candidates[i].b;
|
| 692 |
+
}
|
| 693 |
+
|
| 694 |
+
return {
|
| 695 |
+
r: sumR / topCount,
|
| 696 |
+
g: sumG / topCount,
|
| 697 |
+
b: sumB / topCount
|
| 698 |
+
};
|
| 699 |
+
}
|
| 700 |
+
|
| 701 |
+
fallbackWhiteBalance(data) {
|
| 702 |
+
// Full correction when no clear white point (not conservative)
|
| 703 |
+
const { avgR, avgG, avgB } = this.robustMean(data);
|
| 704 |
+
|
| 705 |
+
// Detect yellow tint severity
|
| 706 |
+
const yellowFactor = ((avgR + avgG) / 2) / (avgB + 1);
|
| 707 |
+
const yellowSeverity = Math.min(Math.max((yellowFactor - 1.0) / 0.5, 0), 1);
|
| 708 |
+
|
| 709 |
+
// Full correction strength (same as original)
|
| 710 |
+
const targetGray = 165 + yellowSeverity * 20;
|
| 711 |
+
const blueBoost = 1.08 + yellowSeverity * 0.12;
|
| 712 |
+
const redReduction = 0.96 - yellowSeverity * 0.04;
|
| 713 |
+
|
| 714 |
+
let scaleB = (targetGray * blueBoost) / avgB;
|
| 715 |
+
let scaleG = targetGray / avgG;
|
| 716 |
+
let scaleR = (targetGray * redReduction) / avgR;
|
| 717 |
+
|
| 718 |
+
// Safety limits
|
| 719 |
+
scaleB = Math.min(Math.max(scaleB, 0.7), 3.0);
|
| 720 |
+
scaleG = Math.min(Math.max(scaleG, 0.7), 2.5);
|
| 721 |
+
scaleR = Math.min(Math.max(scaleR, 0.7), 2.5);
|
| 722 |
+
|
| 723 |
+
// Apply correction
|
| 724 |
+
for (let i = 0; i < data.length; i += 4) {
|
| 725 |
+
data[i] *= scaleR;
|
| 726 |
+
data[i + 1] *= scaleG;
|
| 727 |
+
data[i + 2] *= scaleB;
|
| 728 |
+
data[i] = Math.min(255, Math.max(0, data[i]));
|
| 729 |
+
data[i + 1] = Math.min(255, Math.max(0, data[i + 1]));
|
| 730 |
+
data[i + 2] = Math.min(255, Math.max(0, data[i + 2]));
|
| 731 |
+
}
|
| 732 |
+
}
|
| 733 |
+
|
| 734 |
robustMean(data) {
|
| 735 |
const rValues = [];
|
| 736 |
const gValues = [];
|