add text info

src/lib/components/chat/ChatIntroduction.svelte

@@ -40,7 +40,7 @@
 			</p>
 		</div>
 	</div>
-	<div class="lg:col-span-2 lg:pl-24">
+	<div class="lg:col-span-2">
 		{#each announcementBanners as banner}
 			<AnnouncementBanner classNames="mb-4" title={banner.title}>
 				<a
@@ -79,8 +79,12 @@
 			<ModelCardMetadata variant="dark" model={currentModel} />
 		</div>
 	</div>
-	{#if currentModel.promptExamples}
-		<div class="lg:col-span-3 lg:mt-6">
+	<div class="lg:col-span-3">
+		<div class="mb-8 rounded-xl border border-gray-100 bg-gray-50 p-6 dark:border-gray-800 dark:bg-gray-800">
+			<h2 class="mb-4 text-xl font-semibold">Tracking Energy Use in ChatUI 🤗 </h2>
+			 <p class="mb-4"> How much energy do your chatbot conversations consume? The first AI chat interface with real-time energy estimates! </p> <p class="mb-4"> This tool helps users compare models, tasks, and strategies (like reasoning), empowering informed decisions. Even small energy savings can scale up across millions of queries — model choice or output length can lead to major environmental impact. </p> <p class="mb-4"> To make these costs more relatable, we compare them to everyday activities (like phone charging or driving) using EPA-based equivalents. </p> <p> With projects like the AI Energy Score and broader research on AI’s energy footprint, we're pushing for transparency in the open-source community. One day, energy usage could be as visible as nutrition labels on food! </p>
+		</div>
+		{#if currentModel.promptExamples}
 			<p class="mb-3 text-gray-600 dark:text-gray-300">Examples</p>
 			<div class="grid gap-3 lg:grid-cols-3 lg:gap-5">
 				{#each currentModel.promptExamples as example}
@@ -93,6 +97,7 @@
 					</button>
 				{/each}
 			</div>
-		</div>{/if}
+		{/if}
+	</div>
 	<div class="h-40 sm:h-24"></div>
 </div>

src/routes/conversation/[id]/+server.ts

@@ -326,7 +326,17 @@ export async function POST({ request, locals, params, getClientAddress }) {
 	// update the conversation with the new messages
 	await collections.conversations.updateOne(
 		{ _id: convId },
-		{ $set: { messages: conv.messages, title: conv.title, updatedAt: new Date() } }
+		{
+			$set: {
+				messages: conv.messages,
+				title: conv.title,
+				updatedAt: new Date(),
+				energy_consumption: conv.messages.reduce((total, message) => {
+					const energy = message.metadata?.energy_wh;
+					return total + (typeof energy === "number" ? energy : 0);
+				}, 0),
+			},
+		}
 	);
 
 	let doneStreaming = false;
@@ -423,8 +433,6 @@ export async function POST({ request, locals, params, getClientAddress }) {
 					messageToWriteTo?.updates?.push(event);
 				}
 
-
-
 				// Avoid remote keylogging attack executed by watching packet lengths
 				// by padding the text with null chars to a fixed length
 				// https://cdn.arstechnica.net/wp-content/uploads/2024/03/LLM-Side-Channel.pdf