diff --git a/client/src/components/MetricsDialog.tsx b/client/src/components/MetricsDialog.tsx index f3730a7..861faf0 100644 --- a/client/src/components/MetricsDialog.tsx +++ b/client/src/components/MetricsDialog.tsx @@ -27,6 +27,7 @@ import { useStore } from "@/lib/store"; import { PRESET_ENDPOINTS } from "@/lib/constants"; import logo from "@/assets/logo.svg"; import { cn } from "@/lib/utils"; +import { generateChartColor } from "@/lib/colors"; // Add these functions before the MetricsDialog component const getEndpointIcon = (modelId: string) => { if (modelId.includes('://')) { @@ -70,8 +71,10 @@ const getEndpointIcon = (modelId: string) => { {payload.map((entry: any, index: number) => (
{entry.value} ({formatNumber(entry.payload.value)}) @@ -93,29 +96,37 @@ const getEndpointIcon = (modelId: string) => { Output: data.outputTokens, })); - const chartData = Object.entries(metrics).map(([modelId, data]) => ({ + const chartData = Object.entries(metrics).map(([modelId, data], index) => { + const colorValue = generateChartColor(index) + return { model: modelId, tokens: data.totalTokens, - fill: `var(--color-${modelId.toLowerCase().replace(/[^a-z0-9]/g, "-")})`, - })); + fill: `hsl(${colorValue})`, + className: `chart-color-${index}`, + style: { + '--chart-color-h': colorValue.split(' ')[0] + } as React.CSSProperties + } + }); - const chartConfig = Object.entries(metrics).reduce((acc, [modelId, _]) => { - const safeId = modelId.toLowerCase().replace(/[^a-z0-9]/g, "-"); - acc[safeId] = { + const chartConfig = Object.entries(metrics).reduce((acc, [modelId, _], index) => { + const safeId = modelId.toLowerCase().replace(/[^a-z0-9]/g, "-"); + const colorValue = generateChartColor(index); + acc[safeId] = { label: modelId, - color: `hsl(var(--chart-${Object.keys(acc).length + 1}))`, - }; - return acc; + color: `hsl(${colorValue})`, + }; + return acc; }, {} as ChartConfig); const ioChartConfig = { Input: { label: "Input Toks", - color: "hsl(var(--chart-1))", + color: "hsl(var(--c-1))", }, Output: { label: "Output Toks", - color: "hsl(var(--chart-3))", + color: "hsl(var(--c-3))", }, } satisfies ChartConfig; @@ -157,7 +168,7 @@ const getEndpointIcon = (modelId: string) => { */} - Detailed analysis of your token usage across different models + Detailed analysis of your token usage across different LLM models @@ -202,7 +213,15 @@ const getEndpointIcon = (modelId: string) => { nameKey="model" innerRadius={60} paddingAngle={2} - /> + > + {chartData.map((entry, index) => ( + + ))} +
@@ -322,7 +341,7 @@ const getEndpointIcon = (modelId: string) => {

{formatNumber(data.totalTokens)}

-

Total Time

+

Total Inference Time

{data.totalTime.toFixed(1)}s

diff --git a/client/src/components/SettingsDialog.tsx b/client/src/components/SettingsDialog.tsx index 0e36ab8..80c5656 100644 --- a/client/src/components/SettingsDialog.tsx +++ b/client/src/components/SettingsDialog.tsx @@ -80,7 +80,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
Curiso.ai
-

Version v1.1.6 by

Version v1.1.8 by { e.preventDefault(); diff --git a/client/src/index.css b/client/src/index.css index c547af0..085964a 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -93,48 +93,11 @@ --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; - --color-Input: hsl(var(--chart-1)); - --color-Output: hsl(var(--chart-3)); - --chart-1: 220 70% 50%; - --chart-5: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-2: 340 75% 55%; - --chart-6: 201.8 96.1% 72.9%; - --chart-7: 180 65% 50%; - --chart-8: 300 70% 55%; - --chart-9: 60 75% 50%; - --chart-10: 240 65% 55%; - --chart-11: 120 60% 45%; - --chart-12: 0 80% 60%; - --chart-13: 150 70% 45%; - --chart-14: 270 75% 50%; - --chart-15: 90 65% 45%; - --chart-16: 330 70% 55%; - --chart-17: 200 75% 50%; - --chart-18: 30 65% 50%; - --chart-19: 290 70% 55%; - --chart-20: 110 75% 45%; - --chart-21: 180 70% 50%; - --chart-22: 40 75% 55%; - --chart-23: 260 65% 60%; - --chart-24: 130 70% 45%; - --chart-25: 320 75% 50%; - --chart-26: 210 65% 55%; - --chart-27: 50 70% 50%; - --chart-28: 270 75% 45%; - --chart-29: 140 65% 55%; - --chart-30: 0 70% 50%; - --chart-31: 220 75% 45%; - --chart-32: 60 65% 55%; - --chart-33: 280 70% 50%; - --chart-34: 150 75% 45%; - --chart-35: 330 65% 55%; - --chart-36: 190 70% 50%; - --chart-37: 20 75% 45%; - --chart-38: 240 65% 55%; - --chart-39: 160 70% 50%; - --chart-40: 340 75% 45%; + --color-Input: hsl(var(--c-1)); + --color-Output: hsl(var(--c-3)); + --c-1: 220 70% 50%; + --c-3: 30 80% 55%; + --chart-color-base: 220 65% 55%; } .dark { --background: 240 10% 3.9%; @@ -156,53 +119,30 @@ --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; - --color-Input: hsl(var(--chart-1)); - --color-Output: hsl(var(--chart-3)); - --chart-1: 220 70% 50%; - --chart-5: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-2: 340 75% 55%; - --chart-6: 201.8 96.1% 72.9%; - --chart-7: 180 65% 50%; - --chart-8: 300 70% 55%; - --chart-9: 60 75% 50%; - --chart-10: 240 65% 55%; - --chart-11: 120 60% 45%; - --chart-12: 0 80% 60%; - --chart-13: 150 70% 45%; - --chart-14: 270 75% 50%; - --chart-15: 90 65% 45%; - --chart-16: 330 70% 55%; - --chart-17: 200 75% 50%; - --chart-18: 30 65% 50%; - --chart-19: 290 70% 55%; - --chart-20: 110 75% 45%; - --chart-21: 180 70% 50%; - --chart-22: 40 75% 55%; - --chart-23: 260 65% 60%; - --chart-24: 130 70% 45%; - --chart-25: 320 75% 50%; - --chart-26: 210 65% 55%; - --chart-27: 50 70% 50%; - --chart-28: 270 75% 45%; - --chart-29: 140 65% 55%; - --chart-30: 0 70% 50%; - --chart-31: 220 75% 45%; - --chart-32: 60 65% 55%; - --chart-33: 280 70% 50%; - --chart-34: 150 75% 45%; - --chart-35: 330 65% 55%; - --chart-36: 190 70% 50%; - --chart-37: 20 75% 45%; - --chart-38: 240 65% 55%; - --chart-39: 160 70% 50%; - --chart-40: 340 75% 45%; + --color-Input: hsl(var(--c-1)); + --color-Output: hsl(var(--c-3)); + --c-1: 220 70% 50%; + --c-3: 30 80% 55%; + --chart-color-base: 220 65% 55%; } - .chart-dot { - height: 0.5rem; - width: 0.5rem; - border-radius: 9999px; - background-color: var(--dot-color); - } \ No newline at end of file +.chart-dot { + height: 0.5rem; + width: 0.5rem; + border-radius: 9999px; + background-color: var(--dot-color); +} + +/* Generate dynamic chart colors */ +@property --chart-color-h { + syntax: ''; + initial-value: 0; + inherits: false; +} + +.chart-color { + --chart-color-h: 0; + --chart-color-s: 65%; + --chart-color-l: 55%; + color: hsl(var(--chart-color-h) var(--chart-color-s) var(--chart-color-l)); +} \ No newline at end of file diff --git a/client/src/lib/colors.ts b/client/src/lib/colors.ts new file mode 100644 index 0000000..436beae --- /dev/null +++ b/client/src/lib/colors.ts @@ -0,0 +1,13 @@ +export function generateChartColor(index: number) { + // Golden ratio for better color distribution + const goldenRatio = 0.618033988749895 + + // Use the index to generate a hue value between 0 and 360 + const hue = (index * goldenRatio * 360) % 360 + + // Fixed saturation and lightness for consistent look + const saturation = 65 + const lightness = 55 + + return `${hue} ${saturation}% ${lightness}%` +} \ No newline at end of file diff --git a/package.json b/package.json index ee576fc..e3aa513 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "curiso.ai", - "version": "1.1.7", + "version": "1.1.8", "author": "Carsen Klock", "type": "module", "license": "MIT", diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 2eedbdf..f759885 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -546,7 +546,7 @@ dependencies = [ [[package]] name = "curiso-ai" -version = "1.1.7" +version = "1.1.8" dependencies = [ "serde", "serde_json", diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 6db7d4c..1d45d94 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "curiso-ai" -version = "1.1.7" +version = "1.1.8" description = "Curiso AI Desktop" authors = ["Carsen Klock"] license = "MIT" diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 4d9673e..efb2804 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "identifier": "com.curiso.ai", "productName": "Curiso AI", - "version": "1.1.7", + "version": "1.1.8", "build": { "beforeBuildCommand": "bun run build", "beforeDevCommand": "bun run dev", diff --git a/tailwind.config.ts b/tailwind.config.ts index 27ddbfb..07600b7 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -83,7 +83,7 @@ export default { animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", - }, + } }, }, plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],