improved design and preprompts

PREPROMPT.md

@@ -0,0 +1 @@
+You are a helpful assistant based on Qwen/Qwen2.5-72B-Instruct; your primary role is to assist users like a normal chatbot—answering questions, helping with tasks, and holding conversations; in addition, if the user asks about the energy indicators displayed below messages (e.g., “Energy”, “≈ phone charge”, “Duration”), you can explain what they mean and how they are calculated; you do not have access to the actual values, but you can clarify that some values are measured using NVIDIA's NVML API on supported GPUs like the T4 (recorded in millijoules, converted to Wh), while others are estimated from inference time using estimated_energy = average_power × inference_time with average_power ≈ 70W; 1 Wh = 3600 J; real-world equivalents help users understand energy use (e.g., phone charge ≈ 19 Wh); users can click on energy values to toggle Wh/J, and on equivalents to cycle through different comparisons; adapt explanations based on user expertise—keep it simple for general audiences and precise for technical questions.

src/lib/components/chat/EnergyDisplay.svelte

@@ -10,6 +10,20 @@
 	function convertToJoules(wh: number): number {
 		return wh * 3600;
 	}
+
+    let equivalentIndex = $state(0);
+
+    const equivalents = [
+    (wh: number) => `≈ ${((wh / 19) * 100).toFixed(2)}% of a phone charge (19Wh)`,
+    (wh: number) => `≈ ${(wh / 0.04).toFixed(2)} minutes of LED bulb (10W)`, // 0.04Wh/min
+    (wh: number) => `≈ ${(wh / 1.5).toFixed(2)} seconds of microwave (1000W)`,
+    (wh: number) => `≈ ${(wh / 0.2).toFixed(2)} pedal strokes on an e-bike (200W)`,
+    (wh: number) => `≈ ${(wh / 12).toFixed(2)} seconds of toaster use (1kW)`
+    ];
+
+    function cycleEquivalent() {
+        equivalentIndex = (equivalentIndex + 1) % equivalents.length;
+    }
 </script>
 
 <style>
@@ -22,20 +36,22 @@
 		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;
-	}
+    position: absolute;
+    top: 100%; /* Positionne au-dessus de l’élément parent */
+    margin-bottom: 0.5rem; /* Équivalent de mb-2 */
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #f3f4f6; /* bg-gray-200 */
+    color: #1f2937; /* text-gray-800 */
+    font-size: 0.75rem; /* text-xs */
+    padding: 0.5rem 0.75rem; /* px-3 py-2 */
+    border-radius: 0.25rem; /* rounded */
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+                0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
+    z-index: 10;
+    width: 16rem; /* w-64 */
+    text-align: center;
+    }
     .info-button {
         transition: transform 0.2s ease;
         cursor: pointer;
@@ -49,24 +65,16 @@
 {#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"
+				class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit energy-box"
 				on:click={() => (showJoules = !showJoules)}
 			>
+            Energy:
 				{#if showJoules}
 					{convertToJoules(energyToDisplay).toFixed(2)} J {isEstimated ? "(estimated)" : ""}
 				{:else}
@@ -75,26 +83,44 @@
 			</div>
 		{/if}
 
+        <!-- Equivalent -->
+        <div
+            class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit cursor-pointer transform hover:scale-105 transition duration-150 ease-in-out"
+            on:click={cycleEquivalent}
+        >
+            {equivalents[equivalentIndex](energyToDisplay)}
+        </div>
+
 		
         <!-- 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
+            class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded w-fit"
+        > 
+            Duration: {durationSeconds.toFixed(3)} sec
         </div>
     {/if}
 		
-
+        <!-- Info button -->
+        <div
+        class="relative"
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}>
+            <button
+                class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full info-button">
+                ⓘ
+            </button>
 		<!-- 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.
+					Estimated energy consumption based on the average GPU power and inference duration for this message. Use Qwen/Qwen/Qwen2.5-VL-7B-Instruct model for exact results.
 				{:else}
-					Energy consumption measured directly on the GPU during inference.
+					Energy consumption measured directly on the GPU during inference for this message.
 				{/if}
 			</div>
 		{/if}
+        </div>
+        
 	</div>
 {/if}

src/lib/components/chat/EnergySummary.svelte

@@ -6,14 +6,18 @@
     0
   ));
 
-  const isNotEstimated = $derived(
-    typeof messages.at(-1)?.metadata?.energy_wh === 'number' &&
-    messages.at(-1).metadata.energy_wh !== 0);
+  const totalDuration = $derived(messages.reduce(
+    (total: number, msg: any) => total + (msg.metadata?.duration_seconds || 0),
+    0
+  ));   
 
-  const phoneChargePercent = $derived(((totalEnergy / 19) * 100).toFixed(2));
+  const isEstimated = $derived(!(
+    typeof messages.at(-1)?.metadata?.energy_wh === 'number' &&
+    messages.at(-1).metadata.energy_wh !== 0));
 
   let showJoules = $state(false);
   let equivalentIndex = $state(0);
+  let showTooltip = $state(false);
 
   const equivalents = [
     (wh: number) => `≈ ${((wh / 19) * 100).toFixed(2)}% of a phone charge (19Wh)`,
@@ -32,22 +36,70 @@
 	}
 </script>
 
+<style>
+    .tooltip {
+    position: absolute;
+    bottom: 100%; /* Positionne au-dessus de l’élément parent */
+    margin-bottom: 0.5rem; /* Équivalent de mb-2 */
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #f3f4f6; /* bg-gray-200 */
+    color: #1f2937; /* text-gray-800 */
+    font-size: 0.75rem; /* text-xs */
+    padding: 0.5rem 0.75rem; /* px-3 py-2 */
+    border-radius: 0.25rem; /* rounded */
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+                0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
+    z-index: 10;
+    width: 16rem; /* w-64 */
+    text-align: center;
+    }
+
+</style>
+
 {#if totalEnergy > 0}
   <div class="mb-4 flex flex-col sm:flex-row flex-wrap items-center justify-center gap-4 w-full">
     <!-- Bloc énergie totale -->
-    <div class="text-xs text-gray-500 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded transform hover:scale-105 transition duration-150 ease-in-out cursor-pointer" on:click={() => (showJoules = !showJoules)}>
+    <div class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded transform hover:scale-105 transition duration-150 ease-in-out cursor-pointer" on:click={() => (showJoules = !showJoules)}>
         Total Energy: 
         {#if showJoules}
             {convertToJoules(totalEnergy).toFixed(2)} J
         {:else}
             {totalEnergy.toFixed(4)} Wh
         {/if}
-      {#if !isNotEstimated} (estimated) {/if}
+      {#if isEstimated} (estimated) {/if}
     </div>  
 
     <!-- Bloc équivalent charge téléphone -->
-    <div class="text-xs text-gray-500 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded cursor-pointer transform hover:scale-105 transition duration-150 ease-in-out" on:click={cycleEquivalent}>
+    <div class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded cursor-pointer transform hover:scale-105 transition duration-150 ease-in-out" on:click={cycleEquivalent}>
       {equivalents[equivalentIndex](totalEnergy)}
     </div>
+
+    <!-- Bloc d urée -->
+    <div class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded">
+      Total Duration: {totalDuration.toFixed(3)} sec
+    </div>
+
+    <!-- info button -->
+    <div
+        class="relative"
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}>
+            <button
+                class="text-xs text-gray-600 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full info-button">
+                ⓘ
+            </button>
+
+      <!-- Tooltip -->
+      {#if showTooltip}
+      <div class="tooltip">
+          {#if isEstimated}
+              Estimated energy consumption based on the average GPU power and inference duration for all messages. Use Qwen/Qwen/Qwen2.5-VL-7B-Instruct model for exact results.
+          {:else}
+              Energy consumption measured directly on the GPU during inference for all messages.
+          {/if}
+      </div>
+  {/if}
+    </div>
   </div>
 {/if}