"""## 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

Log in or sign up for Devpost to join the conversation.