Technical Implementation

This section explores the technical aspects of the AI Footprint Calculator implementation, including technology stack selection, project structure, data organization, and development challenges.

Technology Stack Selection

Based on the project requirements, the following technology stack was chosen:

Frontend: React.js (for component reusability and interactive UI)
State Management: React Context API (for managing calculation results)
Styling: CSS with variables for the color palette
Build Tool: Vite (for fast development and optimized production builds)
Deployment: Static site deployment (for simple hosting and migration)

This stack was selected to create a client-side application without backend dependencies, focusing on performance, maintainability, and ease of deployment. The decision to use React was based on its component model, which aligned well with the calculator's modular design requirements.

Project Structure

A modular architecture was designed with the following key components:

ai-footprint-calculator/
├── public/
├── src/
│   ├── components/
│   │   ├── common/
│   │   ├── layout/
│   │   ├── calculator/
│   │   │   ├── CloudAICalculator.jsx
│   │   │   ├── LocalAICalculator.jsx
│   │   │   ├── AgenticAICalculator.jsx
│   │   ├── results/
│   │   ├── offsetting/
│   ├── pages/
│   ├── utils/
│   │   ├── calculationEngine.js
│   ├── styles/
│   ├── App.jsx
│   └── index.jsx
└── package.json
  

This structure implemented several key architectural principles:

Component-based UI structure: Reusable interface elements organized by function
Separation of calculator logic from presentation: Core calculations isolated in utility functions
Centralized calculation engine: Single source of truth for all environmental impact formulas
Data-driven tier and profile definitions: Structured data objects for different AI categories
Responsive design: Adaptable layouts for all device sizes

Core Data Structures

Data from the research documents was transformed into structured JavaScript objects:

Cloud AI Tier Definitions

// Example of Cloud AI tier data structure
export const cloudAITiers = {
  text: {
    small: {
      name: "Small Text Models",
      examples: ["GPT-3.5-Turbo", "Claude Instant"],
      energyPerToken: 0.0003, // kWh per token
      waterPerToken: 0.0005,  // liters per token
      co2PerToken: 0.00015    // kg CO2e per token
    },
    // medium and large tiers...
  },
  image: {
    // image generation tiers...
  },
  // other AI categories...
};
  

Local AI Hardware Profiles

// Example of Local AI hardware profile structure
export const hardwareProfiles = {
  cpu: {
    standard: {
      name: "Standard CPU",
      powerDraw: 65,  // watts
      examples: ["Intel Core i5", "AMD Ryzen 5"]
    },
    // high-performance and server tiers...
  },
  gpu: {
    // consumer, professional, and datacenter tiers...
  }
};
  

Grid Carbon Intensity Factors

// Example of regional grid carbon intensity data
export const gridIntensity = {
  global: 0.475,  // kg CO2e per kWh (global average)
  regions: {
    "north-america": 0.385,
    "europe": 0.275,
    "asia-pacific": 0.555,
    // other regions...
  }
};
  

Calculation Engine Implementation

A comprehensive calculation engine was implemented with functions for:

Cloud AI footprint estimation: Based on model tier, usage volume, and region
Local AI footprint estimation: Based on hardware profile, utilization, duration, and region
Agentic AI footprint estimation: Accounting for component models and orchestration overhead
Result formatting and unit conversion: Standardizing outputs across calculator types
Equivalency generation: Converting technical metrics to relatable comparisons

The calculation functions were designed to be pure and testable, taking structured inputs and returning consistent output formats regardless of calculator type.

UI Components

The following key components were developed:

Calculator forms: Specialized inputs for Cloud, Local, and Agentic AI
Results dashboard: Visualizations of energy, water, and carbon metrics
Offsetting guidance: Educational content and actionable recommendations
Methodology explanation: Transparent documentation of calculation approaches
Navigation and layout: Consistent structure across the application

All UI components were styled according to the specified design system, with a minimalist, high-resolution, white-on-black modern CRT aesthetic.

Styling Implementation

The application was styled according to the specified design system:

CSS variables: For consistent color palette application
Typography: IBM Plex Mono and IBM Plex Sans fonts
Custom UI elements: Designed to match the minimalist aesthetic
Responsive layouts: Adaptable to all screen sizes

The styling approach prioritized readability, accessibility, and consistency with the specified aesthetic.

Bug Identification and Resolution

A critical issue was identified during testing: calculation results weren't being displayed after clicking the Calculate button. This was fixed by:

Adding form submission handlers to calculator components
Implementing state management for calculation results
Adding navigation from calculator to results page
Enhancing the Results page to display calculation data

This bug fix was essential for the core functionality of the application and demonstrated the importance of thorough testing and validation.

Performance Optimization

Several strategies were employed to optimize performance:

Client-side calculations: Eliminating server dependencies for faster response
Efficient state management: Minimizing unnecessary re-renders
Minimal dependencies: Reducing bundle size and load times

These optimizations ensured that the application remained responsive and efficient, even when performing complex calculations.

Accessibility and Usability

The implementation included several features to enhance accessibility:

High contrast design: Ensuring readability for users with visual impairments
Keyboard navigable interface: Supporting non-mouse interaction
Clear labeling and instructions: Improving usability for all users
Responsive design: Accommodating various devices and screen sizes

These features were integrated throughout the development process to ensure the application was accessible to a wide range of users.