Skip to content

Commit c168bb0

Browse files
metaspartanmetaspartan
committed
More updates and bug fixes v1.1.8
Adds golden ratio for colors
1 parent a5229a4 commit c168bb0

File tree

9 files changed

+84
-112
lines changed

9 files changed

+84
-112
lines changed

‎client/src/components/MetricsDialog.tsx‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { useStore } from "@/lib/store";
2727
import { PRESET_ENDPOINTS } from "@/lib/constants";
2828
import logo from "@/assets/logo.svg";
2929
import { cn } from "@/lib/utils";
30+
import { generateChartColor } from "@/lib/colors";
3031
// Add these functions before the MetricsDialog component
3132
const getEndpointIcon = (modelId: string) => {
3233
if (modelId.includes('://')) {
@@ -70,8 +71,10 @@ const getEndpointIcon = (modelId: string) => {
7071
{payload.map((entry: any, index: number) => (
7172
<div key={index} className="flex items-center gap-2 text-xs">
7273
<div
73-
className="h-2 w-2 shrink-0 rounded-sm"
74-
style={{ backgroundColor: entry.color }}
74+
className={`h-2 w-2 shrink-0 rounded-sm`}
75+
style={{
76+
backgroundColor: `hsl(${generateChartColor(index)})`
77+
}}
7578
/>
7679
<span className="truncate" title={`${entry.value} (${formatNumber(entry.payload.value)})`}>
7780
{entry.value} ({formatNumber(entry.payload.value)})
@@ -93,29 +96,37 @@ const getEndpointIcon = (modelId: string) => {
9396
Output: data.outputTokens,
9497
}));
9598

96-
const chartData = Object.entries(metrics).map(([modelId, data]) => ({
99+
const chartData = Object.entries(metrics).map(([modelId, data], index) => {
100+
const colorValue = generateChartColor(index)
101+
return {
97102
model: modelId,
98103
tokens: data.totalTokens,
99-
fill: `var(--color-${modelId.toLowerCase().replace(/[^a-z0-9]/g, "-")})`,
100-
}));
104+
fill: `hsl(${colorValue})`,
105+
className: `chart-color-${index}`,
106+
style: {
107+
'--chart-color-h': colorValue.split(' ')[0]
108+
} as React.CSSProperties
109+
}
110+
});
101111

102-
const chartConfig = Object.entries(metrics).reduce((acc, [modelId, _]) => {
103-
const safeId = modelId.toLowerCase().replace(/[^a-z0-9]/g, "-");
104-
acc[safeId] = {
112+
const chartConfig = Object.entries(metrics).reduce((acc, [modelId, _], index) => {
113+
const safeId = modelId.toLowerCase().replace(/[^a-z0-9]/g, "-");
114+
const colorValue = generateChartColor(index);
115+
acc[safeId] = {
105116
label: modelId,
106-
color: `hsl(var(--chart-${Object.keys(acc).length + 1}))`,
107-
};
108-
return acc;
117+
color: `hsl(${colorValue})`,
118+
};
119+
return acc;
109120
}, {} as ChartConfig);
110121

111122
const ioChartConfig = {
112123
Input: {
113124
label: "Input Toks",
114-
color: "hsl(var(--chart-1))",
125+
color: "hsl(var(--c-1))",
115126
},
116127
Output: {
117128
label: "Output Toks",
118-
color: "hsl(var(--chart-3))",
129+
color: "hsl(var(--c-3))",
119130
},
120131
} satisfies ChartConfig;
121132

@@ -157,7 +168,7 @@ const getEndpointIcon = (modelId: string) => {
157168
</Button> */}
158169
</DialogTitle>
159170
<DialogDescription>
160-
Detailed analysis of your token usage across different models
171+
Detailed analysis of your token usage across different LLM models
161172
</DialogDescription>
162173
</DialogHeader>
163174

@@ -202,7 +213,15 @@ const getEndpointIcon = (modelId: string) => {
202213
nameKey="model"
203214
innerRadius={60}
204215
paddingAngle={2}
205-
/>
216+
>
217+
{chartData.map((entry, index) => (
218+
<Cell
219+
key={`cell-${index}`}
220+
className={entry.className}
221+
fill={`hsl(${generateChartColor(index)})`}
222+
/>
223+
))}
224+
</Pie>
206225
</PieChart>
207226
</ChartContainer>
208227
<div className="mt-4">
@@ -322,7 +341,7 @@ const getEndpointIcon = (modelId: string) => {
322341
<p className="font-medium">{formatNumber(data.totalTokens)}</p>
323342
</div>
324343
<div>
325-
<p className="text-xs text-muted-foreground">Total Time</p>
344+
<p className="text-xs text-muted-foreground">Total Inference Time</p>
326345
<p className="font-medium">{data.totalTime.toFixed(1)}s</p>
327346
</div>
328347
</div>

‎client/src/components/SettingsDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
8080

8181
<div className="flex justify-center">
8282
<img src={logo} alt="Curiso.ai" title="Curiso.ai" className="w-12 h-12" /></div>
83-
<div className="flex justify-center"><p className="text-sm text-muted-foreground justify-center mb-2">Version v1.1.6 by <a
83+
<div className="flex justify-center"><p className="text-sm text-muted-foreground justify-center mb-2">Version v1.1.8 by <a
8484
href="https://github.com/metaspartan/curiso"
8585
onClick={(e) => {
8686
e.preventDefault();

‎client/src/index.css‎

Lines changed: 30 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -93,48 +93,11 @@
9393
--border: 240 3.7% 15.9%;
9494
--input: 240 3.7% 15.9%;
9595
--ring: 240 4.9% 83.9%;
96-
--color-Input: hsl(var(--chart-1));
97-
--color-Output: hsl(var(--chart-3));
98-
--chart-1: 220 70% 50%;
99-
--chart-5: 160 60% 45%;
100-
--chart-3: 30 80% 55%;
101-
--chart-4: 280 65% 60%;
102-
--chart-2: 340 75% 55%;
103-
--chart-6: 201.8 96.1% 72.9%;
104-
--chart-7: 180 65% 50%;
105-
--chart-8: 300 70% 55%;
106-
--chart-9: 60 75% 50%;
107-
--chart-10: 240 65% 55%;
108-
--chart-11: 120 60% 45%;
109-
--chart-12: 0 80% 60%;
110-
--chart-13: 150 70% 45%;
111-
--chart-14: 270 75% 50%;
112-
--chart-15: 90 65% 45%;
113-
--chart-16: 330 70% 55%;
114-
--chart-17: 200 75% 50%;
115-
--chart-18: 30 65% 50%;
116-
--chart-19: 290 70% 55%;
117-
--chart-20: 110 75% 45%;
118-
--chart-21: 180 70% 50%;
119-
--chart-22: 40 75% 55%;
120-
--chart-23: 260 65% 60%;
121-
--chart-24: 130 70% 45%;
122-
--chart-25: 320 75% 50%;
123-
--chart-26: 210 65% 55%;
124-
--chart-27: 50 70% 50%;
125-
--chart-28: 270 75% 45%;
126-
--chart-29: 140 65% 55%;
127-
--chart-30: 0 70% 50%;
128-
--chart-31: 220 75% 45%;
129-
--chart-32: 60 65% 55%;
130-
--chart-33: 280 70% 50%;
131-
--chart-34: 150 75% 45%;
132-
--chart-35: 330 65% 55%;
133-
--chart-36: 190 70% 50%;
134-
--chart-37: 20 75% 45%;
135-
--chart-38: 240 65% 55%;
136-
--chart-39: 160 70% 50%;
137-
--chart-40: 340 75% 45%;
96+
--color-Input: hsl(var(--c-1));
97+
--color-Output: hsl(var(--c-3));
98+
--c-1: 220 70% 50%;
99+
--c-3: 30 80% 55%;
100+
--chart-color-base: 220 65% 55%;
138101
}
139102
.dark {
140103
--background: 240 10% 3.9%;
@@ -156,53 +119,30 @@
156119
--border: 240 3.7% 15.9%;
157120
--input: 240 3.7% 15.9%;
158121
--ring: 240 4.9% 83.9%;
159-
--color-Input: hsl(var(--chart-1));
160-
--color-Output: hsl(var(--chart-3));
161-
--chart-1: 220 70% 50%;
162-
--chart-5: 160 60% 45%;
163-
--chart-3: 30 80% 55%;
164-
--chart-4: 280 65% 60%;
165-
--chart-2: 340 75% 55%;
166-
--chart-6: 201.8 96.1% 72.9%;
167-
--chart-7: 180 65% 50%;
168-
--chart-8: 300 70% 55%;
169-
--chart-9: 60 75% 50%;
170-
--chart-10: 240 65% 55%;
171-
--chart-11: 120 60% 45%;
172-
--chart-12: 0 80% 60%;
173-
--chart-13: 150 70% 45%;
174-
--chart-14: 270 75% 50%;
175-
--chart-15: 90 65% 45%;
176-
--chart-16: 330 70% 55%;
177-
--chart-17: 200 75% 50%;
178-
--chart-18: 30 65% 50%;
179-
--chart-19: 290 70% 55%;
180-
--chart-20: 110 75% 45%;
181-
--chart-21: 180 70% 50%;
182-
--chart-22: 40 75% 55%;
183-
--chart-23: 260 65% 60%;
184-
--chart-24: 130 70% 45%;
185-
--chart-25: 320 75% 50%;
186-
--chart-26: 210 65% 55%;
187-
--chart-27: 50 70% 50%;
188-
--chart-28: 270 75% 45%;
189-
--chart-29: 140 65% 55%;
190-
--chart-30: 0 70% 50%;
191-
--chart-31: 220 75% 45%;
192-
--chart-32: 60 65% 55%;
193-
--chart-33: 280 70% 50%;
194-
--chart-34: 150 75% 45%;
195-
--chart-35: 330 65% 55%;
196-
--chart-36: 190 70% 50%;
197-
--chart-37: 20 75% 45%;
198-
--chart-38: 240 65% 55%;
199-
--chart-39: 160 70% 50%;
200-
--chart-40: 340 75% 45%;
122+
--color-Input: hsl(var(--c-1));
123+
--color-Output: hsl(var(--c-3));
124+
--c-1: 220 70% 50%;
125+
--c-3: 30 80% 55%;
126+
--chart-color-base: 220 65% 55%;
201127
}
202128

203-
.chart-dot {
204-
height: 0.5rem;
205-
width: 0.5rem;
206-
border-radius: 9999px;
207-
background-color: var(--dot-color);
208-
}
129+
.chart-dot {
130+
height: 0.5rem;
131+
width: 0.5rem;
132+
border-radius: 9999px;
133+
background-color: var(--dot-color);
134+
}
135+
136+
/* Generate dynamic chart colors */
137+
@property --chart-color-h {
138+
syntax: '<number>';
139+
initial-value: 0;
140+
inherits: false;
141+
}
142+
143+
.chart-color {
144+
--chart-color-h: 0;
145+
--chart-color-s: 65%;
146+
--chart-color-l: 55%;
147+
color: hsl(var(--chart-color-h) var(--chart-color-s) var(--chart-color-l));
148+
}

‎client/src/lib/colors.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export function generateChartColor(index: number) {
2+
// Golden ratio for better color distribution
3+
const goldenRatio = 0.618033988749895
4+
5+
// Use the index to generate a hue value between 0 and 360
6+
const hue = (index * goldenRatio * 360) % 360
7+
8+
// Fixed saturation and lightness for consistent look
9+
const saturation = 65
10+
const lightness = 55
11+
12+
return `${hue} ${saturation}% ${lightness}%`
13+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "curiso.ai",
3-
"version": "1.1.7",
3+
"version": "1.1.8",
44
"author": "Carsen Klock",
55
"type": "module",
66
"license": "MIT",

‎src-tauri/Cargo.lock‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src-tauri/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "curiso-ai"
3-
version = "1.1.7"
3+
version = "1.1.8"
44
description = "Curiso AI Desktop"
55
authors = ["Carsen Klock"]
66
license = "MIT"

‎src-tauri/tauri.conf.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"identifier": "com.curiso.ai",
33
"productName": "Curiso AI",
4-
"version": "1.1.7",
4+
"version": "1.1.8",
55
"build": {
66
"beforeBuildCommand": "bun run build",
77
"beforeDevCommand": "bun run dev",

‎tailwind.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default {
8383
animation: {
8484
"accordion-down": "accordion-down 0.2s ease-out",
8585
"accordion-up": "accordion-up 0.2s ease-out",
86-
},
86+
}
8787
},
8888
},
8989
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],

0 commit comments

Comments
 (0)