x

src/App.tsx

@@ -50,6 +50,8 @@ const App: React.FC = () => {
   const [selectedProviders, setSelectedProviders] = useState<string[]>([]);
   const [selectedModels, setSelectedModels] = useState<string[]>([]);
   const [expandedProviders, setExpandedProviders] = useState<string[]>([]);
+  const [tokenCalculation, setTokenCalculation] = useState<string>('million');
+
   const [sortConfig, setSortConfig] = useState<{
     key: keyof FlattenedModel;
     direction: string;
@@ -60,9 +62,18 @@ const App: React.FC = () => {
   }, []);
 
   const calculatePrice = (price: number, tokens: number): number => {
-    return price * tokens;
+    let multiplier = 1;
+    if (tokenCalculation === 'thousand') {
+      multiplier = 1e-3;
+    } else if (tokenCalculation === 'unit') {
+      multiplier = 1e-6;
+    } else if (tokenCalculation === 'billion') {
+      multiplier = 1e3;
+    }
+    return price * tokens * multiplier;
   };
 
+
   const calculateBlendedPrice = (
     inputPrice: number,
     outputPrice: number,
@@ -76,6 +87,8 @@ const App: React.FC = () => {
   };
 
 
+
+
   const calculateComparison = (
     modelPrice: number,
     comparisonPrice: number
@@ -225,7 +238,8 @@ const App: React.FC = () => {
               htmlFor="inputTokens"
               className="block text-sm font-medium text-gray-700"
             >
-              Input Tokens (millions)
+
+              Input Tokens ({tokenCalculation})
             </label>
             <Input
               id="inputTokens"
@@ -241,7 +255,7 @@ const App: React.FC = () => {
               htmlFor="outputTokens"
               className="block text-sm font-medium text-gray-700"
             >
-              Output Tokens (millions)
+              Output Tokens ({tokenCalculation})
             </label>
             <Input
               id="outputTokens"
@@ -252,14 +266,36 @@ const App: React.FC = () => {
               className="mt-1"
             />
           </div>
+          <div className="flex-1">
+            <label
+              htmlFor="tokenCalculation"
+              className="block text-sm font-medium text-gray-700"
+            >
+              Token Calculation
+            </label>
+            <select
+              id="tokenCalculation"
+              value={tokenCalculation}
+              onChange={(e) => setTokenCalculation(e.target.value)}
+              className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            >
+              <option value="billion">Billion Tokens</option>
+              <option value="million">Million Tokens</option>
+              <option value="thousand">Thousand Tokens</option>
+              <option value="unit">Unit Tokens</option>
+            </select>
+
+          </div>
+
         </div>
 
+
         <p className="italic text-sm text-muted-foreground mb-4">
           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 (3:1), to give a unified rate per million tokens.
+          Blended Price reflects the average cost of input and output tokens, calculated using a fixed ratio (3:1), to give a unified rate per {tokenCalculation} tokens.
         </p>
 
         <Table>
@@ -293,7 +329,7 @@ const App: React.FC = () => {
 
               <TableHead>
                 <button type="button" onClick={() => requestSort('inputPrice')}>
-                  Input Price (per 1M tokens){' '}
+                  Input Price (million tokens)
                   {sortConfig?.key === 'inputPrice' ? (
                     sortConfig.direction === 'ascending' ? (
                       '▲'
@@ -305,7 +341,7 @@ const App: React.FC = () => {
               </TableHead>
               <TableHead>
                 <button type="button" onClick={() => requestSort('outputPrice')}>
-                  Output Price (per 1M tokens){' '}
+                  Output Price (million tokens)
                   {sortConfig?.key === 'outputPrice' ? (
                     sortConfig.direction === 'ascending' ? (
                       '▲'
@@ -316,7 +352,8 @@ const App: React.FC = () => {
                 </button>
               </TableHead>
 
-              <TableHead>Total Price</TableHead>
+
+              <TableHead>Total Price (per {tokenCalculation} tokens){' '}</TableHead>
               {comparisonModels.map((model) => (
                 <TableHead key={model} colSpan={2}>
                   Compared to {model}