x

src/App.tsx

@@ -63,6 +63,19 @@ const App: React.FC = () => {
     return price * tokens;
   };
 
+  const calculateBlendedPrice = (
+    inputPrice: number,
+    outputPrice: number,
+    inputTokens: number,
+    outputTokens: number
+  ): number => {
+    const inputRatio = 3; // Fixed input to output ratio
+    const totalInputTokens = inputTokens * inputRatio;
+    const blendedPrice = (inputPrice * totalInputTokens + outputPrice * outputTokens) / (totalInputTokens + outputTokens);
+    return blendedPrice;
+  };
+
+
   const calculateComparison = (
     modelPrice: number,
     comparisonPrice: number
@@ -242,6 +255,9 @@ const App: React.FC = () => {
           Note: If you use Amazon Bedrock or Azure prices for Anthropic, Cohere
           or OpenAI should be the same.
         </p>
+        <p className="italic text-sm text-muted-foreground mb-4">
+          Blended Price reflects the average cost of input and output tokens, calculated using a fixed ratio (e.g., 3:1), to give a unified rate per million tokens.
+        </p>
 
         <Table>
           <TableHeader>
@@ -270,6 +286,8 @@ const App: React.FC = () => {
                   ) : null}
                 </button>
               </TableHead>
+              <TableHead>Blended Price</TableHead>
+
               <TableHead>
                 <button type="button" onClick={() => requestSort('inputPrice')}>
                   Input Price (per 1M tokens){' '}
@@ -294,6 +312,7 @@ const App: React.FC = () => {
                   ) : null}
                 </button>
               </TableHead>
+
               <TableHead>Total Price</TableHead>
               {comparisonModels.map((model) => (
                 <TableHead key={model} colSpan={2}>
@@ -356,8 +375,12 @@ const App: React.FC = () => {
                   </a>
                 </TableCell>
                 <TableCell>{item.name}</TableCell>
+                <TableCell className="font-bold">
+                  ${calculateBlendedPrice(item.inputPrice, item.outputPrice, inputTokens, outputTokens).toFixed(2)}
+                </TableCell>
                 <TableCell>{item.inputPrice.toFixed(2)}</TableCell>
                 <TableCell>{item.outputPrice.toFixed(2)}</TableCell>
+
                 <TableCell className="font-bold">
                   $
                   {(
@@ -365,6 +388,8 @@ const App: React.FC = () => {
                     calculatePrice(item.outputPrice, outputTokens)
                   ).toFixed(2)}
                 </TableCell>
+
+
                 {comparisonModels.flatMap((comparisonModel) => {
                   const [comparisonProvider, comparisonModelName] =
                     comparisonModel.split(':');