Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance LLM API Pricing Calculator with new features #3197

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhance LLM API Pricing Calculator with new features #3197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 0 additions & 26 deletions bifrost/app/PostHogPageView.tsx
View file
Open in desktop

This file was deleted.

23 changes: 20 additions & 3 deletions bifrost/app/llm-cost/CalculatorInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {
AccordionTrigger,
AccordionContent,
} from "@radix-ui/react-accordion";
import { ChevronRight } from "lucide-react";
import { ChevronRight, Info, HelpCircle } from "lucide-react";
import Link from "next/link";
import React from "react";
import React, { useState, useEffect } from "react";

// Function to format provider names
export function formatProviderName(provider: string): string {
Expand Down Expand Up @@ -374,8 +374,25 @@ type CalculatorInfoProps = {
};

const CalculatorInfo: React.FC<CalculatorInfoProps> = ({ model, provider }) => {
const [darkMode, setDarkMode] = useState(false);

useEffect(() => {
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
setDarkMode(darkModeMediaQuery.matches);

const handleChange = (e: MediaQueryListEvent) => {
setDarkMode(e.matches);
};

darkModeMediaQuery.addEventListener("change", handleChange);

return () => {
darkModeMediaQuery.removeEventListener("change", handleChange);
};
}, []);

return (
<div className="mt-12 space-y-8 max-w-3xl mx-auto">
<div className={`mt-12 space-y-8 max-w-3xl mx-auto ${darkMode ? "dark" : ""}`}>
{model && provider ? (
<>
{(() => {
Expand Down
22 changes: 22 additions & 0 deletions bifrost/app/llm-cost/ModelPriceCalculator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
Plus,
XCircle,
ChevronRight,
HelpCircle,
} from "lucide-react";
import { costOf, costOfPrompt } from "../../packages/cost"; // Ensure the path is correct
import { providers } from "../../packages/cost/providers/mappings"; // Ensure the path is correct
Expand All @@ -24,6 +25,7 @@ import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { ThemedTextDropDown } from "@/components/ui/themedTextDropDown";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

type ModelPriceCalculatorProps = {
model?: string;
Expand Down Expand Up @@ -433,6 +435,16 @@ Optimize your AI API costs:`;
>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tooltip implementation needs to be completed for provider selection, model selection, cost breakdown sections, and share/contribution buttons. Additionally, ARIA labels for help icons and keyboard navigation for tooltips should be implemented for better accessibility.

Input Tokens
</Label>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="w-4 h-4 text-slate-500 cursor-pointer" />
</TooltipTrigger>
<TooltipContent>
<p>Number of tokens in the input prompt.</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="grow shrink basis-0 self-stretch relative">
<Input
id="inputTokens"
Expand All @@ -450,6 +462,16 @@ Optimize your AI API costs:`;
>
Output Tokens
</Label>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="w-4 h-4 text-slate-500 cursor-pointer" />
</TooltipTrigger>
<TooltipContent>
<p>Number of tokens in the output response.</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="grow shrink basis-0 flex-col justify-start items-start gap-1.5 inline-flex">
<div className="self-stretch relative w-full">
<Input
Expand Down
15 changes: 0 additions & 15 deletions bifrost/app/providers.tsx
View file
Open in desktop

This file was deleted.