Skip to content

Commit

Permalink
More updates and bug fixes v1.1.8
Browse files Browse the repository at this point in the history 
Adds golden ratio for colors
  • Loading branch information
@metaspartan
metaspartan committed Jan 16, 2025
1 parent a5229a4 commit c168bb0
Show file tree
Hide file tree
Showing 9 changed files with 84 additions and 112 deletions.
51 changes: 35 additions & 16 deletions client/src/components/MetricsDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('://')) {
Expand Down Expand Up @@ -70,8 +71,10 @@ const getEndpointIcon = (modelId: string) => {
{payload.map((entry: any, index: number) => (
<div key={index} className="flex items-center gap-2 text-xs">
<div
className="h-2 w-2 shrink-0 rounded-sm"
style={{ backgroundColor: entry.color }}
className={`h-2 w-2 shrink-0 rounded-sm`}
style={{
backgroundColor: `hsl(${generateChartColor(index)})`
}}
/>
<span className="truncate" title={`${entry.value} (${formatNumber(entry.payload.value)})`}>
{entry.value} ({formatNumber(entry.payload.value)})
Expand All @@ -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;

Expand Down Expand Up @@ -157,7 +168,7 @@ const getEndpointIcon = (modelId: string) => {
</Button> */}
</DialogTitle>
<DialogDescription>
Detailed analysis of your token usage across different models
Detailed analysis of your token usage across different LLM models
</DialogDescription>
</DialogHeader>

Expand Down Expand Up @@ -202,7 +213,15 @@ const getEndpointIcon = (modelId: string) => {
nameKey="model"
innerRadius={60}
paddingAngle={2}
/>
>
{chartData.map((entry, index) => (
<Cell
key={`cell-${index}`}
className={entry.className}
fill={`hsl(${generateChartColor(index)})`}
/>
))}
</Pie>
</PieChart>
</ChartContainer>
<div className="mt-4">
Expand Down Expand Up @@ -322,7 +341,7 @@ const getEndpointIcon = (modelId: string) => {
<p className="font-medium">{formatNumber(data.totalTokens)}</p>
</div>
<div>
<p className="text-xs text-muted-foreground">Total Time</p>
<p className="text-xs text-muted-foreground">Total Inference Time</p>
<p className="font-medium">{data.totalTime.toFixed(1)}s</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/SettingsDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {

<div className="flex justify-center">
<img src={logo} alt="Curiso.ai" title="Curiso.ai" className="w-12 h-12" /></div>
<div className="flex justify-center"><p className="text-sm text-muted-foreground justify-center mb-2">Version v1.1.6 by <a
<div className="flex justify-center"><p className="text-sm text-muted-foreground justify-center mb-2">Version v1.1.8 by <a
href="https://github.com/metaspartan/curiso"
onClick={(e) => {
e.preventDefault();
Expand Down
120 changes: 30 additions & 90 deletions client/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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);
}
.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: '<number>';
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));
}
13 changes: 13 additions & 0 deletions client/src/lib/colors.ts
View file
Original file line number Diff line number Diff line change
@@ -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}%`
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "curiso.ai",
"version": "1.1.7",
"version": "1.1.8",
"author": "Carsen Klock",
"type": "module",
"license": "MIT",
Expand Down
2 changes: 1 addition & 1 deletion src-tauri/Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src-tauri/Cargo.toml
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src-tauri/tauri.conf.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")],
Expand Down

0 comments on commit c168bb0

Please sign in to comment.