# Project export: CallToChange This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 11.0 - Tagline: An LLM emissions logger powered by SUI blockchain - Devpost: https://devpost.com/software/calltochange-ghne9o - GitHub: https://github.com/adityakakarla/calltochange - Demo: https://calltochange-theta.vercel.app/ - Video: https://www.youtube.com/embed/TMWhvw60K70?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 1 GitHub contributor(s) — Aditya Kakarla (11 commits) ## Devpost submission (written by the team) ### Inspiration When we landed in SF, we knew we wanted to tackle climate change with LLMs. We spent a while thinking about it. But then, we realized something—LLMs are (in a sense) furthering climate change. It takes significant amounts of energy to train and run these models, especially multimodal tools. ### What it does Users can log text and image generation calls using our Python library. They can view how many of each call they've made in our dashboard, along with CO2 emissions generated and the cost to offset them. If users choose, they can offset their emissions using Sui. The general public can also verify whether or not a company has offset their emissions through a dynamic page. ### How we built it We built our web app with Next.js. Our frontend was supported by Tailwind CSS and shadcn/ui, while our backend utilized MongoDB to track each user's LLM calls. We used Suiet Wallet kit to enable Sui Wallet integrations into our app. We also developed and published our custom Python library using PyPI. ### Challenges we ran into Setting up blockchain transactions (no prior experience) Connecting to a Chrome extension (no prior experience) Organizing MongoDB functions (wrote 250+ lines of helper functions in <4 hours) ### Accomplishments we're proud of Getting everything deployed on Vercel Configuring blockchain transactions with Sui Getting the Python library to work with our backend API routes Engineering dynamic routes to give the general public transparency into carbon offsetting progress ### What we learned How to work with Sui blockchain transactions How to write optimized functions to fetch and write data to MongoDB How to deploy a Python library That SF is an awesome city ### What's next Building out enterprise-ready code Adding smart contract-esque functionality with Sui Developing carbon credit tokens with Sui ## README (from the GitHub repository) # [CallToChange]([https://calltochange.vercel.app/](https://calltochange-theta.vercel.app/)) 🌍 ## Team LiquidDeath: Aditya, Ganesh --- ## Description CallToChange is a carbon emission calculator designed by Team LiquidDeath. This tool analyzes and calculates the carbon emissions generated by a company's LLM (Large Language Model) calls. The application offers a comprehensive solution for monitoring and reducing the environmental impact of LLM call operations. --- ## Inspiration Our inspiration for CallToChange stemmed from the growing need to address carbon emissions generated by technology operations and a way to keep companies accountable and aware of the emissions they produce from AI usage. We aimed to create a tool that empowers companies to measure and mitigate their carbon footprint related to LLM calls. --- ## What it does CallToChange seamlessly integrates with our custom Python library (call-to-change) to log LLM call emissions. It utilizes academic research and information from the Department of Energy to accurately determine the carbon footprint of each LLM call. Our visually engaging dashboards provide clear insights into emissions data, aiding companies in making informed decisions to reduce their environmental impact. --- ## How we built it We developed CallToChange using Next.js and Python. Our Python library logs LLM calls in MongoDB. Under the hood, our library does this by sending a POST request to API routes in our web app. These API routes securely handle data updates in MongoDB. In our web app, we use Next.js and MongoDB to fetch user information (such as the number of times a user has used text generation). To create an interactive interface, we utilized Tailwind CSS. For user authentication, we used Clerk to manage user accounts. --- ## Screenshots ![image](https://github.com/Arush223/CallToChange/assets/115517528/cabedfe8-b9a7-4473-9759-b6e638612de0) The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. ## Detected evidence (automated analysis) Indexed codebase: 31 recognized source files, 59 KB. - CSS (language) — detected in the code - JavaScript (language) — detected in the code - MongoDB (technology) — detected in the code - Next.js (technology) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code - Python (language) — claimed on Devpost, not found in the code - Vercel (technology) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (38 of 38) ``` .eslintrc.json .gitignore app/about/page.tsx app/actions.ts app/api/image/route.ts app/api/text/route.ts app/contact/page.tsx app/dashboard/page.tsx app/docs/page.tsx app/globals.css app/layout.tsx app/not-found.tsx app/page.tsx app/pay/[amount]/page.tsx app/pay/layout.tsx app/sign-in/[[...sign-in]]/page.tsx app/sign-up/[[...sign-up]]/page.tsx app/verify/[tag]/page.tsx components.json components/Navbar.tsx components/ui/alert.tsx components/ui/button.tsx components/ui/card.tsx components/ui/form.tsx components/ui/input.tsx components/ui/label.tsx components/ui/navigation-menu.tsx components/ValueCard.tsx lib/utils.ts middleware.ts next.config.mjs package.json postcss.config.mjs README.md scripts/emissions.js scripts/mongo.js tailwind.config.ts tsconfig.json ``` ### Dependencies - package.json: @clerk/nextjs@^5.7.5, @geist-ui/core@^2.3.8, @hookform/resolvers@^3.9.0, @mysten/sui@^1.13.0, @radix-ui/react-icons@^1.3.0, @radix-ui/react-label@^2.1.0, @radix-ui/react-navigation-menu@^1.2.1, @radix-ui/react-slot@^1.1.0, @suiet/wallet-kit@^0.3.3, @types/node@^20, @types/react@^18, @types/react-dom@^18, all@^0.0.0, class-variance-authority@^0.7.0, clsx@^2.1.1, dotenv@^16.4.5, eslint@^8, eslint-config-next@14.2.15, geist@^1.3.1, lucide-react@^0.453.0, mini-css-extract-plugin@^2.9.1, mongodb@^6.9.0, next@14.2.15, postcss@^8, react@^18, react-dom@^18, react-hook-form@^7.53.1, react-spinners-kit@^1.9.1, tailwind-merge@^2.5.4, tailwindcss@^3.4.1, tailwindcss-animate@^1.0.7, typescript@^5, web3@^4.13.0, xrpl@^4.0.0, zod@^3.23.8 ### Recent commits (newest first) - updated readme and stuff - ran build - updated sui - updated for sui - metamask - pnpm issue - updated dashboard - finished basic functionality - update ui for ganesh - initial commit - Initial commit from Create Next App ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "chainge", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@clerk/nextjs": "^5.7.5", "@geist-ui/core": "^2.3.8", "@hookform/resolvers": "^3.9.0", "@mysten/sui": "^1.13.0", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-navigation-menu": "^1.2.1", "@radix-ui/react-slot": "^1.1.0", "@suiet/wallet-kit": "^0.3.3", "all": "^0.0.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "dotenv": "^16.4.5", "geist": "^1.3.1", "lucide-react": "^0.453.0", "mongodb": "^6.9.0", "next": "14.2.15", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.53.1", "react-spinners-kit": "^1.9.1", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", "web3": "^4.13.0", "xrpl": "^4.0.0", "zod": "^3.23.8" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.15", "mini-css-extract-plugin": "^2.9.1", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" }, "type": "module" } ``` ### app/layout.tsx ```typescript import type { Metadata } from "next"; import { Quicksand } from "next/font/google"; // Import Quicksand import "./globals.css"; import { Navbar } from "@/components/Navbar"; import { ClerkProvider } from "@clerk/nextjs"; import '@suiet/wallet-kit/style.css'; const quicksand = Quicksand({ subsets: ["latin"], variable: "--font-quicksand", weight: ['300', '400', '500', '700'], // Specify the weights you need }); export const metadata: Metadata = { title: "CallToChange", description: "LLM Emissions Logger With BlockChain", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### app/page.tsx ```typescript import { Button } from "@/components/ui/button"; import Link from "next/link"; export default function VideoWithOverlay() { return (

Carbon-Neutral LLM Apps.

Built With CallToChange.

); } ``` ### app/pay/layout.tsx ```typescript 'use client' import { WalletProvider } from "@suiet/wallet-kit" export default function PayLayout({ children, }: { children: React.ReactNode }) { return (
{children}
) } ``` ### app/contact/page.tsx ```typescript import Link from "next/link" import { Button } from "@/components/ui/button" export default function Contact() { return (

Contact Us

We love criticism.

Reach us at adi[at]adikakarla[dot]com

) } ``` ### app/about/page.tsx ```typescript import Link from "next/link" import { Button } from "@/components/ui/button" export default function About() { return (

About Us

Built by Aditya Kakarla and Ganesh Kumarappan at Cal Hacks.

Developed using Next.js, Ripple, Clerk, and Tailwind.

UI inspired by LangChain.

) } ``` ### app/docs/page.tsx ```typescript import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }); export default function Docs() { return (

Docs

Getting Started

To get started with our library, install it using pip: 

                        
                            pip install call-to-change

Usage Example

Here’s a simple example of how to use CallToChange in your project: 

                        
                            {`from openai import OpenAI
from call_to_change import log

client = OpenAI()

log(client, 'test@test.com')

response = client.chat.completions.create(
  model="gpt-4o-mini",
  messages=[
    {"role": "system", "content": "You are a helpful assistant."},
    {"role": "user", "content": "Who won the world series in 2020?"},
  ]
)

print(response.choices[0].message.content)`}

Behind The Scenes

Our library consists of multiple systems:

  • Next.js for our full-stack application

  • Clerk for user authentication

  • SUI for carbon offset transactions

  • SingleStore for blazingly fast data updates

); } ``` ### app/dashboard/page.tsx ```typescript "use client"; import React, { useState, useEffect } from "react"; import { addUser, fetchUserInfo } from "../actions"; import { convertEmissionsToOffsetCost, convertTextAndImageCallsToEmissions, } from "@/scripts/emissions"; import ValueCard from "@/components/ValueCard"; import { SignedOut } from "@clerk/nextjs"; import { MetroSpinner } from 'react-spinners-kit'; import { redirect } from "next/navigation"; import Link from "next/link"; import { z } from "zod" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { useForm } from "react-hook-form" import {zodResolver} from "@hookform/resolvers/zod" const formSchema = z.object({ tag: z.string().min(1, { message: "Tag must be at least 1 character.", }).regex(/^[a-zA-Z0-9-]+$/, { message: "Tag can only contain letters, numbers, and hyphens.", }), }) export default function Page() { const [data, setData] = useState<{ label: string; value: number | string }[]>([]); const [loading, setLoading] = useState(true); const [isNewUser, setIsNewUser] = useState(false); const [error, setError] = useState(""); useEffect(() => { const setUserInfo = async () => { setLoading(true); setError(""); try { const result = await fetchUserInfo(); if (result) { const { text_count, image_count, amount_offset } = result; const emissions = convertTextAndImageCallsToEmissions(text_count, image_count); const offsetCost = Math.max(0,convertEmissionsToOffsetCost(emissions) - amount_offset); const newData = [ { label: "LLM calls", value: text_count }, { label: "Image calls", value: image_count }, { label: "Tons of CO2", value: emissions }, { label: "Offset Cost", value: `$${offsetCost}` }, ]; setData(newData); } else { setIsNewUser(true) } } catch (err) { setError("Woah. Something happened"); console.error(err); } finally { setLoading(false); } }; setUserInfo(); }, []); if (error) { redirect('/error'); } const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { tag: "", }, }) const onSubmit = async (value: z.infer) => { setLoading(true); try { await addUser(value.tag); const newData = [ { label: "LLM calls", value: 0 }, { label: "Image calls", value: 0 }, { label: "Tons of CO2", value: 0 }, { label: "Offset Cost", value: '$0' }, ]; setData(newData); } catch (error) { console.error("Error adding user:", error); setError("Failed to add user."); } finally { setIsNewUser(false); setLoading(false); } }; if (isNewUser) { return (
{loading ? (
) : (
( Select a Tag This is a public-facing tag used to identify your entity. )} />
)}
) } return (
{loading ? (
) : (

This is what your dashboard will look like:
[truncated — 824 more characters] ``` ### app/api/text/route.ts ```typescript import { NextRequest, NextResponse } from "next/server"; import { updateTextGenerationCalls } from "@/scripts/mongo"; export const dynamic = "force-dynamic"; export async function POST(request: NextRequest) { const searchParams = request.nextUrl.searchParams; try { const email = searchParams.get("email"); if (!email) { throw new Error("Email is required"); } const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!pattern.test(email)) { throw new Error("Invalid email input"); } await updateTextGenerationCalls(email); return NextResponse.json({ message: "Successfully logged" }, { status: 200 }); } catch (error) { const errorMessage = error instanceof Error ? error.message : "Unknown error"; return NextResponse.json({ error: errorMessage }, { status: 400 }); } } ``` ### app/api/image/route.ts ```typescript import { NextRequest, NextResponse } from "next/server"; import { updateImageGenerationCalls } from "@/scripts/mongo"; export const dynamic = "force-dynamic"; export async function POST(request: NextRequest) { const searchParams = request.nextUrl.searchParams; try { const email = searchParams.get("email"); if (!email) { throw new Error("Email is required"); } const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!pattern.test(email)) { throw new Error("Invalid email input"); } await updateImageGenerationCalls(email); return NextResponse.json({ message: "Successfully logged" }, { status: 200 }); } catch (error) { const errorMessage = error instanceof Error ? error.message : "Unknown error"; return NextResponse.json({ error: errorMessage }, { status: 400 }); } } ``` [21 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]