🌱 EcoPrompt — AI Environmental Impact Tracker Responsible AI Initiative: Understand and optimize the hidden environmental costs of your Large Language Model (LLM) operations in real-time.

EcoPrompt is a modern, responsive single-page web dashboard designed to calculate, analyze, and minimize the carbon emissions, clean water consumption, grid energy draw, and cost of LLM queries. It supports direct browser-side API integrations with Google Gemini, Anthropic Claude, and Groq cloud endpoints alongside a quantized local edge simulation.

📊 Processing & Carbon Calculation Flow The following flowchart maps how a query is processed, tracked, and visualized in the EcoPrompt dashboard:

⚡ Mathematical Impact Algorithm Operational inference (every token processed and generated) represents a growing share of global compute energy. EcoPrompt splits calculations into two distinct hardware phases:

1. Token Metrics Input Prompt Tokens ( T i n ): T i n = Prompt Words × 1.3 Output Completion Tokens ( T o u t ): T o u t = Response Words × 1.3
2. Grid Energy Consumption ( E ) Input pre-fill processing is parallelized and consumes significantly less energy per token compared to token-by-token autoregressive generation: E = [ ( T i n × 0.00015 kWh ) + ( T o u t × 0.0005 kWh ) ] × Model Factor [kWh]

Model Specific Factors:

GPT-4: 2.2 × scale factor (Large Mixture of Experts draw) Claude: 1.6 × scale factor Gemini: 1.0 × scale factor (Standard Base) Llama 3: 0.7 × scale factor (Cloud Optimized) Local Edge Model: 0.3 × scale factor (Low-power localized execution)

1. Grid Carbon Emissions ( C ) Assuming an average global grid carbon intensity:

   C

   E × 400 g CO 2 [g]

2. Fresh Water Cooling Evaporation ( W ) Data center liquid cooling systems evaporate clean water to maintain temperature thresholds:

   W

   E × 1800 mL [mL]

3. API Cost Estimation ( C o s t ) Input tokens are calculated at 1 / 4 the cost of generation tokens, matching real API structures: $$\text{Cost} = \frac{T_{in} \times (\text{Cost}{1k} / 4)}{1000} + \frac{T{out} \times \text{Cost}_{1k}}{1000}\text{ [USD]}$$

4. Eco Score Rating ( S ) An efficiency score clamped between 0 and 100 :

   S

   max ( 0 , min ( 100 , 100 − ( C × 6 ) ) )

🛠️ Technology Stack & Libraries HTML5: Semantic nodes, responsive viewport tags. CSS3 (Vanilla): Grid variables, dark/light theme tokens, layout flexboxes, key status indicators, and typewriter timelines. JavaScript (Vanilla ES6): Pure DOM logic, localStorage history logs, and fetch client routes. Chart.js (CDN): Dual-axis combined line-bar footprint tracker. html2pdf.js (CDN): High-resolution PDF exporting. Font Awesome (CDN): Interface icons. 🚀 Getting Started (Local Setup) The application is entirely serverless and runs directly in standard web browsers.

Running a Local HTTP Server To verify theme transitions, API keys caching, CSV log downloads, and PDF exports, run a simple static files server in the root of the workspace directory:

Using Python

python -m http.server 8000 Open http://localhost:8000 in your web browser.

🔑 API Keys Configuration To test cloud queries directly inside the browser:

Click the Key icon in the top navbar to expand the Credentials Manager. Input keys for the endpoints you wish to use: Gemini: Input Google AI Studio key (AIzaSy...). Claude: Input Anthropic API key (sk-ant-...). Groq: Input Groq Cloud key (gsk_...). Click Save Credentials. The key status indicator dots will turn green (🟢). Models without keys will safely continue in simulation mode.

Built With

• css3
• html5
• javascript