Size
6.2 KB
Version
1.0.1
Created
Nov 16, 2025
Updated
29 days ago
1// ==UserScript==
2// @name AI Water Usage Calculator
3// @description Calculate water consumption for AI image generation
4// @version 1.0.1
5// @match https://*.chatgpt.com/*
6// @icon https://cdn.oaistatic.com/assets/favicon-l4nq08hd.svg
7// ==/UserScript==
8(function() {
9 'use strict';
10
11 // Fixed constants for water usage calculations
12 const ENERGY_PER_IMAGE_KWH = 0.002907;
13 const WUE_ONSITE_L_PER_KWH = 1.9;
14 const PUE = 1.56;
15 const WUE_OFFSITE_L_PER_KWH = 14.7;
16
17 // Calculate water usage
18 function calculateWaterUsage(numberOfImages) {
19 const onsiteWater = ENERGY_PER_IMAGE_KWH * WUE_ONSITE_L_PER_KWH;
20 const offsiteWater = ENERGY_PER_IMAGE_KWH * PUE * WUE_OFFSITE_L_PER_KWH;
21 const totalWaterPerImage = onsiteWater + offsiteWater;
22
23 return {
24 onsiteWater: onsiteWater * numberOfImages,
25 offsiteWater: offsiteWater * numberOfImages,
26 totalWater: totalWaterPerImage * numberOfImages,
27 perImage: {
28 onsite: onsiteWater,
29 offsite: offsiteWater,
30 total: totalWaterPerImage
31 }
32 };
33 }
34
35 // Create the calculator UI
36 function createCalculatorUI() {
37 const container = document.createElement('div');
38 container.id = 'ai-water-calculator';
39 container.style.cssText = `
40 position: fixed;
41 top: 20px;
42 right: 20px;
43 background: #ffffff;
44 border: 2px solid #333333;
45 border-radius: 12px;
46 padding: 20px;
47 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
48 z-index: 10000;
49 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
50 min-width: 320px;
51 max-width: 400px;
52 `;
53
54 container.innerHTML = `
55 <h3 style="margin: 0 0 16px 0; color: #1a1a1a; font-size: 18px; font-weight: 600;">
56 AI Water Usage Calculator
57 </h3>
58
59 <div style="margin-bottom: 16px;">
60 <label style="display: block; margin-bottom: 6px; color: #333333; font-size: 14px; font-weight: 500;">
61 Number of Images:
62 </label>
63 <input
64 type="number"
65 id="image-count-input"
66 min="1"
67 value="1"
68 style="width: 100%; padding: 10px; border: 1px solid #cccccc; border-radius: 6px; font-size: 14px; box-sizing: border-box;"
69 />
70 </div>
71
72 <button
73 id="calculate-btn"
74 style="width: 100%; padding: 12px; background: #0066cc; color: #ffffff; border: none; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: 16px;"
75 >
76 Calculate
77 </button>
78
79 <div id="results-container" style="display: none;">
80 <div style="background: #f5f5f5; padding: 14px; border-radius: 8px; margin-bottom: 12px;">
81 <div style="color: #666666; font-size: 12px; margin-bottom: 4px;">Onsite Water</div>
82 <div id="onsite-result" style="color: #1a1a1a; font-size: 18px; font-weight: 600;"></div>
83 </div>
84
85 <div style="background: #f5f5f5; padding: 14px; border-radius: 8px; margin-bottom: 12px;">
86 <div style="color: #666666; font-size: 12px; margin-bottom: 4px;">Offsite Water</div>
87 <div id="offsite-result" style="color: #1a1a1a; font-size: 18px; font-weight: 600;"></div>
88 </div>
89
90 <div style="background: #e6f2ff; padding: 14px; border-radius: 8px; border: 2px solid #0066cc;">
91 <div style="color: #0066cc; font-size: 12px; margin-bottom: 4px; font-weight: 600;">Total Water Usage</div>
92 <div id="total-result" style="color: #0066cc; font-size: 20px; font-weight: 700;"></div>
93 </div>
94 </div>
95 `;
96
97 document.body.appendChild(container);
98 console.log('AI Water Calculator UI created');
99
100 // Add event listeners
101 const calculateBtn = document.getElementById('calculate-btn');
102 const imageCountInput = document.getElementById('image-count-input');
103
104 calculateBtn.addEventListener('click', handleCalculate);
105 imageCountInput.addEventListener('keypress', (e) => {
106 if (e.key === 'Enter') {
107 handleCalculate();
108 }
109 });
110
111 // Hover effect for button
112 calculateBtn.addEventListener('mouseenter', () => {
113 calculateBtn.style.background = '#0052a3';
114 });
115 calculateBtn.addEventListener('mouseleave', () => {
116 calculateBtn.style.background = '#0066cc';
117 });
118 }
119
120 // Handle calculate button click
121 function handleCalculate() {
122 const imageCountInput = document.getElementById('image-count-input');
123 const numberOfImages = parseInt(imageCountInput.value);
124
125 if (isNaN(numberOfImages) || numberOfImages < 1) {
126 alert('Please enter a valid number of images (minimum 1)');
127 return;
128 }
129
130 console.log(`Calculating water usage for ${numberOfImages} images`);
131
132 const results = calculateWaterUsage(numberOfImages);
133
134 // Display results
135 document.getElementById('onsite-result').textContent = `${results.onsiteWater.toFixed(4)} L`;
136 document.getElementById('offsite-result').textContent = `${results.offsiteWater.toFixed(4)} L`;
137 document.getElementById('total-result').textContent = `${results.totalWater.toFixed(4)} L`;
138
139 document.getElementById('results-container').style.display = 'block';
140
141 console.log('Calculation results:', results);
142 }
143
144 // Initialize the extension
145 function init() {
146 console.log('AI Water Usage Calculator initialized');
147
148 // Wait for body to be ready
149 if (document.body) {
150 createCalculatorUI();
151 } else {
152 document.addEventListener('DOMContentLoaded', createCalculatorUI);
153 }
154 }
155
156 // Start the extension
157 init();
158})();