🌱 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:

graph TD
    A[User Inputs Prompt] --> B{API Key Present?}
    
    B -- Yes --> C[Route to Live Cloud Endpoint]
    B -- No --> D[Trigger offline Local Simulation]
    
    C --> C1[Gemini 1.5 Flash API]
    C --> C2[Claude 3.5 Sonnet API]
    C --> C3[Groq Llama 3 API]
    
    C1 --> E[Calculate Input + Output Tokens]
    C2 --> E
    C3 --> E
    D --> E
    
    E --> F[Dual-Stage Environmental Engine]
    
    F --> F1[Energy Draw: Input vs Output scaling]
    F --> F2[Water Evaporation Cooling Rates]
    F --> F3[Carbon Grid Intensity Calculations]
    F --> F4[API Cost Estimation Metrics]
    
    F1 & F2 & F3 & F4 --> G[Update Dashboard Metrics]
    G --> H[Render SVG Circular Eco Score Gauge]
    G --> I[Insert Data Points in Chart.js Timeline]
    G --> J[Refresh Model Matrix Comparison]
    G --> K[Log to Local History Database]

Loading

---

⚡ 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_{in}$): $$T_{in} = \text{Prompt Words} \times 1.3$$
• Output Completion Tokens ($T_{out}$): $$T_{out} = \text{Response Words} \times 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 = \left[ (T_{in} \times 0.00015\text{ kWh}) + (T_{out} \times 0.0005\text{ kWh}) \right] \times \text{Model Factor} \text{ [kWh]}$$

Model Specific Factors:

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

3. Grid Carbon Emissions ($C$)

Assuming an average global grid carbon intensity: $$C = E \times 400\text{g CO}_2\text{ [g]}$$

4. Fresh Water Cooling Evaporation ($W$)

Data center liquid cooling systems evaporate clean water to maintain temperature thresholds: $$W = E \times 1800\text{mL}\text{ [mL]}$$

5. API Cost Estimation ($Cost$)

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]}$$

6. Eco Score Rating ($S$)

An efficiency score clamped between $0$ and $100$: $$S = \max\left(0, \min\left(100, 100 - (C \times 6)\right)\right)$$

---

🛠️ 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:

1. Click the Key icon in the top navbar to expand the Credentials Manager.
2. 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_...).
3. Click Save Credentials.
4. The key status indicator dots will turn green (🟢). Models without keys will safely continue in simulation mode.