statistics

static/css/chat.css

@@ -146,7 +146,6 @@ body.loading #version {
 	width: max-content;
 	padding-top: 28px;
 	background: #363a4f;
-	overflow: hidden;
 	flex-shrink: 0;
 }
 
@@ -170,13 +169,16 @@ body.loading #version {
 	left: 6px;
 }
 
+.statistics .provider::after,
+.statistics .ttft::after,
+.statistics .tps::after,
 .message .tags::before {
 	content: "";
 	position: absolute;
 	top: 7px;
 	left: -10px;
 	height: 2px;
-	width: 5px;
+	width: 6px;
 	background: #939ab7;
 }
 
@@ -284,6 +286,11 @@ body.loading #version {
 	display: none;
 }
 
+#messages .message div.text {
+	border-bottom-left-radius: 6px;
+	border-bottom-right-radius: 6px;
+}
+
 .message.has-reasoning .text {
 	padding-top: 4px;
 }
@@ -357,6 +364,61 @@ body.loading #version {
 	content: ". . .";
 }
 
+.statistics {
+	position: absolute;
+	transition: 150ms;
+	top: calc(100% + 5px);
+	left: 8px;
+	display: flex;
+	align-items: center;
+	gap: 20px;
+	white-space: nowrap;
+	font-size: 13px;
+	line-height: 13px;
+	pointer-events: none;
+}
+
+.statistics .provider,
+.statistics .ttft,
+.statistics .tps,
+.statistics .tokens {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 3px;
+}
+
+.statistics .provider::after,
+.statistics .ttft::after,
+.statistics .tps::after {
+	left: unset;
+	right: -14px;
+}
+
+.statistics .provider::before {
+	background-image: url(icons/provider.svg);
+}
+
+.statistics .ttft::before {
+	background-image: url(icons/ttft.svg);
+}
+
+.statistics .tps::before {
+	background-image: url(icons/tps.svg);
+}
+
+.statistics .tokens::before {
+	background-image: url(icons/amount.svg);
+}
+
+.message:not(:hover) .statistics {
+	opacity: 0;
+}
+
+.message:not(.has-statistics) .statistics {
+	display: none;
+}
+
 #chat {
 	display: flex;
 	position: relative;
@@ -451,16 +513,20 @@ body.loading #version,
 #messages .message .role::before,
 #messages .message .tag-json,
 #messages .message .tag-search,
+#messages .message .copy,
+#messages .message .edit,
+#messages .message .delete,
+.pre-copy,
+.message .statistics .provider::before,
+.message .statistics .ttft::before,
+.message .statistics .tps::before,
+.message .statistics .tokens::before,
 #json,
 #search,
 #scrolling,
 #clear,
 #add,
 #send,
-.pre-copy,
-#messages .message .copy,
-#messages .message .edit,
-.message .delete,
 #chat .option label {
 	display: block;
 	width: 20px;
@@ -470,6 +536,10 @@ body.loading #version,
 	background-repeat: no-repeat;
 }
 
+.message .statistics .provider::before,
+.message .statistics .ttft::before,
+.message .statistics .tps::before,
+.message .statistics .tokens::before,
 #messages .message .tag-json,
 #messages .message .tag-search,
 #messages .message .role::before {
@@ -500,7 +570,7 @@ input.invalid {
 	background-image: url(icons/save.svg);
 }
 
-.message .delete {
+#messages .message .delete {
 	background-image: url(icons/delete.svg);
 }
 

static/css/icons/provider.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/css/icons/tps.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/css/icons/ttft.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/js/chat.js

@@ -45,6 +45,7 @@
 		#text;
 
 		#tags = [];
+		#statistics;
 		#error = false;
 
 		#editing = false;
@@ -60,6 +61,7 @@
 		#_reasoning;
 		#_text;
 		#_edit;
+		#_statistics;
 
 		constructor(role, reasoning, text) {
 			this.#id = uid();
@@ -202,6 +204,11 @@
 				this.delete();
 			});
 
+			// statistics
+			this.#_statistics = make("div", "statistics");
+
+			this.#_message.appendChild(this.#_statistics);
+
 			// add to dom
 			$messages.appendChild(this.#_message);
 
@@ -268,13 +275,42 @@
 
 		#render(only = false, noScroll = false) {
 			if (!only || only === "tags") {
-				this.#_tags.innerHTML = this.#tags
-					.map((tag) => `<div class="tag-${tag}" title="${tag}"></div>`)
-					.join("");
+				const tags = this.#tags.map(
+					(tag) => `<div class="tag-${tag}" title="${tag}"></div>`,
+				);
+
+				this.#_tags.innerHTML = tags.join("");
 
 				this.#_message.classList.toggle("has-tags", this.#tags.length > 0);
 			}
 
+			if (!only || only === "statistics") {
+				let html = "";
+
+				if (this.#statistics) {
+					const { provider, ttft, time, input, output } = this.#statistics;
+
+					const tps = output / (time / 1000);
+
+					html = [
+						provider ? `<div class="provider">${provider}</div>` : "",
+						`<div class="ttft">${formatMilliseconds(ttft)}</div>`,
+						`<div class="tps">${fixed(tps, 2)} t/s</div>`,
+						`<div class="tokens">
+							<div class="input">${input}</div>
+							+
+							<div class="output">${output}</div>
+							=
+							<div class="total">${input + output}</div>
+						</div>`,
+					].join("");
+				}
+
+				this.#_statistics.innerHTML = html;
+
+				this.#_message.classList.toggle("has-statistics", !!html);
+			}
+
 			if (this.#error) {
 				return;
 			}
@@ -329,9 +365,39 @@
 				data.tags = this.#tags;
 			}
 
+			if (this.#statistics) {
+				data.statistics = this.#statistics;
+			}
+
 			return data;
 		}
 
+		setStatistics(statistics) {
+			this.#statistics = statistics;
+
+			this.#render("statistics");
+			this.#save();
+		}
+
+		async loadGenerationData(generationID) {
+			if (!generationID) {
+				return;
+			}
+
+			try {
+				const response = await fetch(`/-/stats/${generationID}`),
+					data = await response.json();
+
+				if (!data || data.error) {
+					throw new Error(data?.error || response.statusText);
+				}
+
+				this.setStatistics(data);
+			} catch (err) {
+				console.error(err);
+			}
+		}
+
 		addTag(tag) {
 			if (this.#tags.includes(tag)) {
 				return;
@@ -586,6 +652,10 @@
 				obj.showError(message.error);
 			}
 
+			if (message.statistics) {
+				obj.setStatistics(message.statistics);
+			}
+
 			if (message.tags) {
 				message.tags.forEach((tag) => obj.addTag(tag));
 			}
@@ -804,6 +874,8 @@
 			message.addTag("search");
 		}
 
+		let generationID;
+
 		stream(
 			"/-/chat",
 			{
@@ -822,10 +894,18 @@
 
 					$chat.classList.remove("completing");
 
+					setTimeout(() => {
+						message.loadGenerationData(generationID);
+					}, 750);
+
 					return;
 				}
 
 				switch (chunk.type) {
+					case "id":
+						generationID = chunk.text;
+
+						break;
 					case "reason":
 						message.setState("reasoning");
 						message.addReasoning(chunk.text);

static/js/lib.js

@@ -60,3 +60,17 @@ function escapeHtml(text) {
 		.replace(/</g, "&lt;")
 		.replace(/>/g, "&gt;");
 }
+
+function formatMilliseconds(ms) {
+	if (ms < 1000) {
+		return `${ms}ms`;
+	} else if (ms < 10000) {
+		return `${(ms / 1000).toFixed(1)}s`;
+	}
+
+	return `${Math.round(ms / 1000)}s`;
+}
+
+function fixed(num, decimals = 0) {
+	return num.toFixed(decimals).replace(/\.?0+$/m, "");
+}