statistics

README.md

@@ -20,10 +20,10 @@ whiskr is a private, self-hosted web chat interface for interacting with AI mode
 - Reasoning effort control
 - Web search tool
 - Structured JSON output
+- Statistics for messages (provider, ttft, tps and token count)
 
 ## TODO
 
-- Statistics for messages (tps, token count, etc.)
 - Retry button for assistant messages
 - Import and export of chats
 - Image and file attachments

chat.go

@@ -119,6 +119,9 @@ func HandleChat(w http.ResponseWriter, r *http.Request) {
 	}
 
 	request.Stream = true
+	request.Usage = &openrouter.IncludeUsage{
+		Include: true,
+	}
 
 	// DEBUG
 	dump(request)
@@ -145,6 +148,8 @@ func HandleChat(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	var id string
+
 	for {
 		chunk, err := stream.Recv()
 		if err != nil {
@@ -157,6 +162,12 @@ func HandleChat(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 
+		if id == "" {
+			id = chunk.ID
+
+			response.Send(IDChunk(id))
+		}
+
 		if len(chunk.Choices) == 0 {
 			continue
 		}

main.go

@@ -43,6 +43,7 @@ func main() {
 		})
 	})
 
+	r.Get("/-/stats/{id}", HandleStats)
 	r.Post("/-/chat", HandleChat)
 
 	if !NoOpen {

openrouter.go

@@ -2,10 +2,44 @@ package main
 
 import (
 	"context"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"net/http"
 
 	"github.com/revrost/go-openrouter"
 )
 
+type Generation struct {
+	ID                     string   `json:"id"`
+	TotalCost              float64  `json:"total_cost"`
+	CreatedAt              string   `json:"created_at"`
+	Model                  string   `json:"model"`
+	Origin                 string   `json:"origin"`
+	Usage                  float64  `json:"usage"`
+	IsBYOK                 bool     `json:"is_byok"`
+	UpstreamID             *string  `json:"upstream_id"`
+	CacheDiscount          *float64 `json:"cache_discount"`
+	UpstreamInferenceCost  *float64 `json:"upstream_inference_cost"`
+	AppID                  *int     `json:"app_id"`
+	Streamed               *bool    `json:"streamed"`
+	Cancelled              *bool    `json:"cancelled"`
+	ProviderName           *string  `json:"provider_name"`
+	Latency                *int     `json:"latency"`
+	ModerationLatency      *int     `json:"moderation_latency"`
+	GenerationTime         *int     `json:"generation_time"`
+	FinishReason           *string  `json:"finish_reason"`
+	NativeFinishReason     *string  `json:"native_finish_reason"`
+	TokensPrompt           *int     `json:"tokens_prompt"`
+	TokensCompletion       *int     `json:"tokens_completion"`
+	NativeTokensPrompt     *int     `json:"native_tokens_prompt"`
+	NativeTokensCompletion *int     `json:"native_tokens_completion"`
+	NativeTokensReasoning  *int     `json:"native_tokens_reasoning"`
+	NumMediaPrompt         *int     `json:"num_media_prompt"`
+	NumMediaCompletion     *int     `json:"num_media_completion"`
+	NumSearchResults       *int     `json:"num_search_results"`
+}
+
 func OpenRouterClient() *openrouter.Client {
 	return openrouter.NewClient(OpenRouterToken)
 }
@@ -20,3 +54,34 @@ func OpenRouterStartStream(ctx context.Context, request openrouter.ChatCompletio
 
 	return stream, nil
 }
+
+func OpenRouterGetGeneration(ctx context.Context, id string) (*Generation, error) {
+	req, err := http.NewRequest("GET", fmt.Sprintf("https://openrouter.ai/api/v1/generation?id=%s", id), nil)
+	if err != nil {
+		return nil, err
+	}
+
+	req.Header.Set("Authorization", fmt.Sprintf("Bearer %s", OpenRouterToken))
+
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return nil, err
+	}
+
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return nil, errors.New(resp.Status)
+	}
+
+	var response struct {
+		Data Generation `json:"data"`
+	}
+
+	err = json.NewDecoder(resp.Body).Decode(&response)
+	if err != nil {
+		return nil, err
+	}
+
+	return &response.Data, nil
+}

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
+				const tags = this.#tags.map(
-					.map((tag) => `<div class="tag-${tag}" title="${tag}"></div>`)
+					(tag) => `<div class="tag-${tag}" title="${tag}"></div>`,
-					.join("");
+				);
+
+				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, "");
+}

stats.go

@@ -0,0 +1,67 @@
+package main
+
+import (
+	"net/http"
+	"strings"
+
+	"github.com/go-chi/chi/v5"
+)
+
+type Statistics struct {
+	Provider     *string `json:"provider,omitempty"`
+	Model        string  `json:"model"`
+	Cost         float64 `json:"cost"`
+	TTFT         int     `json:"ttft"`
+	Time         int     `json:"time"`
+	InputTokens  int     `json:"input"`
+	OutputTokens int     `json:"output"`
+}
+
+func HandleStats(w http.ResponseWriter, r *http.Request) {
+	id := chi.URLParam(r, "id")
+
+	if id == "" || !strings.HasPrefix(id, "gen-") {
+		RespondJson(w, http.StatusBadRequest, map[string]any{
+			"error": "invalid id",
+		})
+
+		return
+	}
+
+	generation, err := OpenRouterGetGeneration(r.Context(), id)
+	if err != nil {
+		RespondJson(w, http.StatusInternalServerError, map[string]any{
+			"error": err.Error(),
+		})
+
+		return
+	}
+
+	statistics := Statistics{
+		Provider: generation.ProviderName,
+		Model:    generation.Model,
+		Cost:     generation.TotalCost,
+		TTFT:     Nullable(generation.Latency, 0),
+		Time:     Nullable(generation.GenerationTime, 0),
+	}
+
+	nativeIn := Nullable(generation.NativeTokensPrompt, 0)
+	normalIn := Nullable(generation.TokensPrompt, 0)
+
+	statistics.InputTokens = max(nativeIn, normalIn)
+
+	nativeOut := Nullable(generation.NativeTokensCompletion, 0) + Nullable(generation.NativeTokensReasoning, 0)
+	normalOut := Nullable(generation.TokensCompletion, 0)
+
+	statistics.OutputTokens = max(nativeOut, normalOut)
+
+	RespondJson(w, http.StatusOK, statistics)
+}
+
+func Nullable[T any](ptr *T, def T) T {
+	if ptr == nil {
+		return def
+	}
+
+	return *ptr
+}

stream.go

@@ -64,6 +64,13 @@ func TextChunk(text string) Chunk {
 	}
 }
 
+func IDChunk(id string) Chunk {
+	return Chunk{
+		Type: "id",
+		Text: id,
+	}
+}
+
 func ErrorChunk(err error) Chunk {
 	return Chunk{
 		Type: "error",