"""## Inspiration

  • Generative AI is powerful but energy-intensive. We wanted a way to make “green by default” prompting tangible: show real energy, CO₂, and water impacts for everyday prompts and help people reduce them without sacrificing quality.
  • Teams asked for something practical they can adopt today—fast feedback, model-aware guidance, and a shared language (clear equivalents like homes powered, km driven, and daily drinking water).

What it does

  • Analyzes any prompt and estimates its environmental footprint across energy (kWh), CO₂ (g), and water (L), scaled to a 10,000,000-token scenario for easy sense-making.
  • Optimizes your prompt and shows token savings with a side-by-side compare.
  • Model-aware: pick a base model to see footprint and cost deltas that reflect that model’s characteristics.
  • Adds context with relatable legends: homes powered for a day (energy), people’s drinking water for a day (water), and km driven in a typical car (CO₂).
  • Gamification & education: earn badges, view a real-time globe of activity, and learn how HPC training vs. inference impacts sustainability.

How we built it

Frontend: Next.js 15 (App Router) + TypeScript with shadcn/ui and Tailwind for a dark, neon, glassmorphism aesthetic; framer-motion for smooth pipeline and UI animations; lucide-react for icons.
Components:

  • Prompt console with a pipeline animation (tokenizing → processing → generating → complete).
  • Impact cards that show energy, CO₂, and water with model-aware scaling to 10M tokens and clear legends.
  • Optimized Prompt compare panel with savings.
  • Model Picker with live deltas based on per-token metrics and estimated costs.
  • 3D Globe for global activity and an HPC education card for context.

Backend:

  • Serverless API routes that call external LLMs (Gemini optimize and Cerebras chat).
  • Robust fallback estimation when APIs are unavailable: local per-token model data → consistent scaling → user-friendly legends.

UX:

  • Tron-like neon theme, glass panels, and subtle motion to keep it inspiring yet focused.
  • Accessibility considerations and responsive layout.

Challenges we ran into

  • Making sustainability metrics understandable without oversimplifying: picking consistent baselines (homes/day kWh, drinking water/day, g CO₂/km) and scaling to 10M tokens.
  • Ensuring model-aware accuracy while providing graceful fallbacks when token usage isn’t returned by providers.
  • Balancing performance (3D globe, animations) with clarity on low-powered devices.
  • Designing a clean flow that fits both newcomers and advanced users without overwhelming them.

Accomplishments that we're proud of

  • A cohesive, production-ready experience that turns abstract sustainability into clear, relatable insights.
  • Model-aware impact computation with consistent 10M-token scaling and human-friendly legends.
  • A delightful UI—glassmorphism, neon accents, subtle motion—that still feels fast and accessible.
  • Gamification that nudges better behavior (badges, progress) without being intrusive.
  • An education layer (HPC card) that empowers users to make informed choices beyond just “use fewer tokens.”

What we learned

  • “Green prompting” resonates when you connect it to everyday equivalents and give actionable next steps.
  • Small prompt improvements can compound massively at scale; the 10M-token lens makes this obvious.
  • Reliability matters: people trust tools that handle API hiccups gracefully and still provide meaningful estimates.
  • Visual feedback (pipeline, globe) increases engagement and understanding without heavy text.

What's next for Sustain-A-Prompt

  • Per-metric savings in the Optimized Prompt compare (energy/CO₂/water bars with their own percentages).
  • Team features: shared workspaces, leaderboards, and policy presets (e.g., “always prefer efficient models”).
  • Reports and exports (CSV/PDF) for sustainability teams and procurement.
  • Browser extension and IDE plugins to optimize prompts in-context.
  • More providers/models and periodic calibration against independent benchmarks.
  • Deeper education modules (e.g., region-specific electricity mixes, renewable offsets) and richer badges. """

Built With

  • accessible
  • cerebras-(chat)
  • framer-motion
  • google-gemini-(optimize)
  • local-per-token-estimation-fallback-(deterministic-simulation)
  • lucide-react
  • next.js-15-(app-router)
  • responsive
  • serverless-api-routes
  • shadcn/ui
  • tailwind-css
  • three.js-(svg-fallback-for-wireframe-globe)
  • typescript
  • ui
Share this project:

Updates