add streaming of energy, J conversion

src/lib/components/chat/ChatMessage.svelte

@@ -28,6 +28,7 @@
 	import OpenReasoningResults from "./OpenReasoningResults.svelte";
 	import Alternatives from "./Alternatives.svelte";
 	import Vote from "./Vote.svelte";
+	import EnergyDisplay from './EnergyDisplay.svelte';
 
 	interface Props {
 		message: Message;
@@ -198,24 +199,13 @@
 					class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
 				>
 					<MarkdownRenderer content={message.content} sources={webSearchSources} />
-					{#if message.metadata?.energy_wh || message.metadata?.duration_seconds}
-					<div class="mt-2 flex gap-2">
-						{#if message.metadata?.energy_wh}
-							<div
-								class="text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit"
-							>
-								{message.metadata.energy_wh.toFixed(4)} Wh {#if message.metadata?.model_name !== "Qwen/Qwen2.5-VL-7B-Instruct"} (estimated)
-								{/if}
-							</div>
-						{/if}
-						{#if message.metadata?.duration_seconds}
-							<div
-								class="text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit"
-							>
-								{message.metadata.duration_seconds} sec
-							</div>
-						{/if}
-					</div>
+					{#if message.metadata?.duration_seconds || message.metadata?.energy_wh_sim}
+					<EnergyDisplay
+						energyWh={message.metadata?.energy_wh}
+						energyWhSim={message.metadata?.energy_wh_sim}
+						durationSeconds={message.metadata?.duration_seconds}
+					/>
+
 				{/if}
 				
 				</div>

src/lib/components/chat/ChatWindow.svelte

@@ -354,11 +354,13 @@
 		class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
 	>
 		{#if messages.length > 0}
-			{@const totalEnergy = messages.reduce((total, msg) => total + (msg.metadata?.energy_wh || 0), 0)}
+			{@const totalEnergy = messages.reduce((total, msg) => total + (msg.metadata?.energy_wh || msg.metadata?.energy_wh_sim || 0), 0)}
+			{@const isNotEstimated = typeof messages.at(-1)?.metadata?.energy_wh === "number" && messages.at(-1).metadata.energy_wh !== 0}
 			{#if totalEnergy > 0}
 				<div class="mb-4 flex items-center justify-center">
 					<div class="text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded">
-						Total Energy: {totalEnergy.toFixed(4)} Wh (about {((totalEnergy / 19) * 100).toFixed(2)}% of charging a phone)
+						Total Energy: {totalEnergy.toFixed(4)} Wh {#if !isNotEstimated} (estimated) {/if}
+						(about {((totalEnergy / 19) * 100).toFixed(2)}% of charging a phone)
 					</div>
 				</div>
 			{/if}

src/lib/components/chat/EnergyDisplay.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	export let energyWh: number | undefined = undefined;
+	export let energyWhSim: number | undefined = undefined;
+	export let durationSeconds: number | undefined = undefined;
+
+	let showJoules = false;
+	let showTooltip = false;
+
+	const isEstimated = !(typeof energyWh === 'number' && energyWh !== 0);
+	const energyToDisplay = isEstimated ? energyWhSim : energyWh;
+
+	function convertToJoules(wh: number): number {
+		return wh * 3600;
+	}
+</script>
+
+<style>
+	.energy-box {
+		transition: transform 0.2s ease;
+		cursor: pointer;
+		position: relative;
+	}
+	.energy-box:hover {
+		transform: scale(1.05);
+	}
+	.tooltip {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		z-index: 10;
+		margin-top: 0.25rem;
+		padding: 0.5rem;
+		background-color: #f3f4f6;
+		color: #1f2937;
+		font-size: 0.75rem;
+		border-radius: 0.25rem;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+		width: max-content;
+		max-width: 400px;
+	}
+    .info-button {
+        transition: transform 0.2s ease;
+        cursor: pointer;
+        position: relative;
+    }
+    .info-button:hover {
+        transform: scale(1.2);
+    }
+</style>
+
+{#if durationSeconds || energyToDisplay}
+	<div class="mt-2 flex gap-2 items-center relative">
+
+        <!-- Info button -->
+    <div
+        class="relative"
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}>
+        <button
+            class="text-xs text-gray-500 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full info-button">
+            ⓘ
+        </button>
+    </div>
+        
+
+		<!-- Energy Box -->
+		{#if energyToDisplay}
+			<div
+				class="text-xs text-gray-500 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit energy-box"
+				on:click={() => (showJoules = !showJoules)}
+			>
+				{#if showJoules}
+					{convertToJoules(energyToDisplay).toFixed(2)} J {isEstimated ? "(estimated)" : ""}
+				{:else}
+					{energyToDisplay.toFixed(4)} Wh {isEstimated ? "(estimated)" : ""}
+				{/if}
+			</div>
+		{/if}
+
+		
+        <!-- Duration -->
+		{#if durationSeconds}
+        <div
+            class="text-xs text-gray-500 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit"
+        >
+            {durationSeconds} sec
+        </div>
+    {/if}
+		
+
+		<!-- Tooltip -->
+		{#if showTooltip}
+			<div class="tooltip">
+				{#if isEstimated}
+					Estimated energy consumption based on the average GPU power and inference duration. Use Qwen/Qwen/Qwen2.5-VL-7B-Instruct model for exact results.
+				{:else}
+					Energy consumption measured directly on the GPU during inference.
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}

src/lib/server/textGeneration/generate.ts

@@ -128,38 +128,15 @@ Do not use prefixes such as Response: or Answer: when answering to the user.`,
 				webSources: output.webSources,
 			};
 
-			// simulation of metadata
-			const durationInSeconds = (new Date().getTime() - startTime.getTime()) / 1000;
-
-			// LLama 3.1 8B uses 17.38 Wh for 1000 queries according to https://huggingface.co/spaces/AIEnergyScore/Leaderboard
-
-			const energyUsedwh_sim = 50 * (durationInSeconds / 3600); // Using P = 50W (H100 can use up to 700W)
-			console.log("energyUsedwh_sim", energyUsedwh_sim);
-			let energyUsedwh = 0;
-			console.log("output", output);
-			if (output.energy_consumption === undefined) {
-				energyUsedwh = energyUsedwh_sim;
-			} else {
-				// if the model has energy consumption, we use it instead
-				energyUsedwh = output.energy_consumption / 1000 / 3600; // converting from mJ to Wh
+			if (output.energy_consumption !== undefined) {
+				const energyUsedwh = output.energy_consumption / 1000 / 3600; // converting from mJ to Wh;
+				console.log("energyUsedwh", energyUsedwh);
+				yield {
+					type: MessageUpdateType.Metadata,
+					key: "energy_wh",
+					value: energyUsedwh,
+				};
 			}
-			console.log("energyUsedwh", energyUsedwh);
-			console.log("model.name", model.name);
-			yield {
-				type: MessageUpdateType.Metadata,
-				key: "energy_wh",
-				value: energyUsedwh,
-			};
-			yield {
-				type: MessageUpdateType.Metadata,
-				key: "duration_seconds",
-				value: durationInSeconds,
-			};
-			yield {
-				type: MessageUpdateType.Metadata,
-				key: "model_name",
-				value: model.name,
-			};
 
 			continue;
 		}
@@ -222,6 +199,24 @@ Do not use prefixes such as Response: or Answer: when answering to the user.`,
 			yield { type: MessageUpdateType.Stream, token: output.token.text };
 		}
 
+		if (!output.token.special) {
+			// simulation of metadata
+			const durationInSeconds = (new Date().getTime() - startTime.getTime()) / 1000;
+			const energyUsedwh_sim = 55 * (durationInSeconds / 3600); // Using P = 50W (H100 can use up to 700W)
+			console.log("energyUsedwh_sim", energyUsedwh_sim);
+			console.log("model.name", model.name);
+			yield {
+				type: MessageUpdateType.Metadata,
+				key: "energy_wh_sim",
+				value: energyUsedwh_sim,
+			};
+			yield {
+				type: MessageUpdateType.Metadata,
+				key: "duration_seconds",
+				value: durationInSeconds,
+			};
+		}
+
 		// abort check
 		const date = AbortedGenerations.getInstance().getList().get(conv._id.toString());
 		if (date && date > promptedAt) break;

src/routes/conversation/[id]/+page.svelte

@@ -328,6 +328,15 @@
 					if (update.subtype === MessageReasoningUpdateType.Stream) {
 						messageToWriteTo.reasoning += update.token;
 					}
+					
+					} else if (update.type === MessageUpdateType.Metadata) {
+						if (!messageToWriteTo.metadata) messageToWriteTo.metadata = {};
+						messageToWriteTo.metadata = {
+							...messageToWriteTo.metadata,
+							[update.key]: update.value,
+						};
+
+					
 				}
 			}
 		} catch (err) {