Spaces:
Running
Running
Update index.html
Browse files- index.html +94 -19
index.html
CHANGED
|
@@ -1,19 +1,94 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>AI Model Prompt Cost Calculator</title>
|
| 7 |
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
| 8 |
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
| 9 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
| 10 |
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
| 11 |
+
<body>
|
| 12 |
+
<div class="container mt-5">
|
| 13 |
+
<h1>AI Model Prompt Cost Calculator</h1>
|
| 14 |
+
<div class="form-group">
|
| 15 |
+
<label for="model">Select Model:</label>
|
| 16 |
+
<select class="form-control" id="model" onchange="updateInputFields(); updateModelDescription();">
|
| 17 |
+
<option value="claude-3-opus">Claude 3 Opus</option>
|
| 18 |
+
<option value="claude-3-sonnet">Claude 3 Sonnet</option>
|
| 19 |
+
<option value="claude-3-haiku">Claude 3 Haiku</option>
|
| 20 |
+
<option value="claude-2.1">Claude 2.1</option>
|
| 21 |
+
<option value="claude-2.0">Claude 2.0</option>
|
| 22 |
+
<option value="claude-instant">Claude Instant</option>
|
| 23 |
+
<option value="gpt-3.5-turbo-1106">GPT-3.5-turbo-1106</option>
|
| 24 |
+
<option value="gpt-3.5-turbo-0613">GPT-3.5-turbo-0613</option>
|
| 25 |
+
<option value="gpt-3.5-turbo-16k-0613">GPT-3.5-turbo-16k-0613</option>
|
| 26 |
+
<option value="gpt-3.5-turbo-0301">GPT-3.5-turbo-0301</option>
|
| 27 |
+
<option value="whisper">Whisper</option>
|
| 28 |
+
<option value="tts">TTS</option>
|
| 29 |
+
<option value="tts-hd">TTS HD</option>
|
| 30 |
+
<option value="dalle-3-standard-1024">DALL·E 3 Standard 1024×1024</option>
|
| 31 |
+
<option value="dalle-3-standard-1792">DALL·E 3 Standard 1024×1792, 1792×1024</option>
|
| 32 |
+
<option value="dalle-3-hd-1024">DALL·E 3 HD 1024×1024</option>
|
| 33 |
+
<option value="dalle-3-hd-1792">DALL·E 3 HD 1024×1792, 1792×1024</option>
|
| 34 |
+
<option value="dalle-2-1024">DALL·E 2 1024×1024</option>
|
| 35 |
+
<option value="dalle-2-512">DALL·E 2 512×512</option>
|
| 36 |
+
<option value="dalle-2-256">DALL·E 2 256×256</option>
|
| 37 |
+
<option value="davinci-002">Davinci-002</option>
|
| 38 |
+
<option value="babbage-002">Babbage-002</option>
|
| 39 |
+
<option value="text-embedding-3-small">Text Embedding 3 Small</option>
|
| 40 |
+
<option value="text-embedding-3-large">Text Embedding 3 Large</option>
|
| 41 |
+
<option value="ada-v2">Ada v2</option>
|
| 42 |
+
<option value="gpt-3.5-turbo-ft">GPT-3.5-turbo Fine-tuning</option>
|
| 43 |
+
<option value="davinci-002-ft">Davinci-002 Fine-tuning</option>
|
| 44 |
+
<option value="babbage-002-ft">Babbage-002 Fine-tuning</option>
|
| 45 |
+
<option value="code-interpreter">Code Interpreter</option>
|
| 46 |
+
<option value="retrieval">Retrieval</option>
|
| 47 |
+
<option value="gpt-3.5-turbo-0125">GPT-3.5-turbo-0125</option>
|
| 48 |
+
<option value="gpt-3.5-turbo-instruct">GPT-3.5-turbo-instruct</option>
|
| 49 |
+
<option value="gpt-4">GPT-4</option>
|
| 50 |
+
<option value="gpt-4-32k">GPT-4-32k</option>
|
| 51 |
+
</select>
|
| 52 |
+
</div>
|
| 53 |
+
<div id="modelDescription" class="mb-3"></div>
|
| 54 |
+
<div class="form-group" id="inputTokensDiv">
|
| 55 |
+
<label for="inputTokens">Input Tokens:</label>
|
| 56 |
+
<input type="number" class="form-control" id="inputTokens" placeholder="Enter input tokens" step="0.00000000000000000001">
|
| 57 |
+
</div>
|
| 58 |
+
<div class="form-group" id="outputTokensDiv" style="display: none;">
|
| 59 |
+
<label for="outputTokens">Output Tokens:</label>
|
| 60 |
+
<input type="number" class="form-control" id="outputTokens" placeholder="Enter output tokens" step="0.00000000000000000001">
|
| 61 |
+
</div>
|
| 62 |
+
<div class="form-group" id="minutesDiv" style="display: none;">
|
| 63 |
+
<label for="minutes">Minutes:</label>
|
| 64 |
+
<input type="number" class="form-control" id="minutes" placeholder="Enter minutes" step="0.00000000000000000001">
|
| 65 |
+
</div>
|
| 66 |
+
<div class="form-group" id="charactersDiv" style="display: none;">
|
| 67 |
+
<label for="characters">Characters:</label>
|
| 68 |
+
<input type="number" class="form-control" id="characters" placeholder="Enter characters" step="0.00000000000000000001">
|
| 69 |
+
</div>
|
| 70 |
+
<div class="form-group" id="imagesDiv" style="display: none;">
|
| 71 |
+
<label for="images">Images:</label>
|
| 72 |
+
<input type="number" class="form-control" id="images" placeholder="Enter number of images" step="0.00000000000000000001">
|
| 73 |
+
</div>
|
| 74 |
+
<div class="form-group" id="sessionsDiv" style="display: none;">
|
| 75 |
+
<label for="sessions">Sessions:</label>
|
| 76 |
+
<input type="number" class="form-control" id="sessions" placeholder="Enter number of sessions" step="0.00000000000000000001">
|
| 77 |
+
</div>
|
| 78 |
+
<div class="form-group" id="storageDiv" style="display: none;">
|
| 79 |
+
<label for="storage">Storage (GB/day):</label>
|
| 80 |
+
<input type="number" class="form-control" id="storage" placeholder="Enter storage in GB/day" step="0.00000000000000000001">
|
| 81 |
+
</div>
|
| 82 |
+
<div class="form-group" id="trainingTokensDiv" style="display: none;">
|
| 83 |
+
<label for="trainingTokens">Training Tokens:</label>
|
| 84 |
+
<input type="number" class="form-control" id="trainingTokens" placeholder="Enter training tokens" step="0.00000000000000000001">
|
| 85 |
+
</div>
|
| 86 |
+
<button class="btn btn-primary" onclick="calculateCost()">Calculate Cost</button>
|
| 87 |
+
<div id="result" class="mt-3"></div>
|
| 88 |
+
</div>
|
| 89 |
+
|
| 90 |
+
<script>
|
| 91 |
+
const pricingData={"claude-3-opus":{inputPrice:15,outputPrice:75,description:"Claude 3 Opus is a powerful language model with a wide range of capabilities."},"claude-3-sonnet":{inputPrice:3,outputPrice:15,description:"Claude 3 Sonnet is a mid-range language model suitable for various tasks."},"claude-3-haiku":{inputPrice:.25,outputPrice:1.25,description:"Claude 3 Haiku is a budget-friendly language model for basic tasks."},"claude-2.1":{inputPrice:8,outputPrice:24,description:"Claude 2.1 has a 200,000 token context window and is suitable for long-form content."},"claude-2.0":{inputPrice:8,outputPrice:24,description:"Claude 2.0 has a 100,000 token context window and is suitable for long-form content."},"claude-instant":{inputPrice:.8,outputPrice:2.4,description:"Claude Instant is a fast and affordable model for instant responses."},"gpt-3.5-turbo-1106":{inputPrice:1,outputPrice:2,description:"GPT-3.5-turbo-1106 is an older version of the GPT-3.5-turbo model."},"gpt-3.5-turbo-0613":{inputPrice:1.5,outputPrice:2,description:"GPT-3.5-turbo-0613 is an older version of the GPT-3.5-turbo model."},"gpt-3.5-turbo-16k-0613":{inputPrice:3,outputPrice:4,description:"GPT-3.5-turbo-16k-0613 is an older version of the GPT-3.5-turbo model with a 16k context window."},"gpt-3.5-turbo-0301":{inputPrice:1.5,outputPrice:2,description:"GPT-3.5-turbo-0301 is an older version of the GPT-3.5-turbo model."},whisper:{minutePrice:.006,description:"Whisper is an audio model that can transcribe speech into text and translate many languages into English."},tts:{characterPrice:15,description:"TTS (Text-to-Speech) can convert text into spoken audio."},"tts-hd":{characterPrice:30,description:"TTS HD (Text-to-Speech High Definition) can convert text into high-quality spoken audio."},"dalle-3-standard-1024":{imagePrice:.04,description:"DALL·E 3 Standard 1024×1024 can generate standard quality images with a resolution of 1024×1024 pixels."},"dalle-3-standard-1792":{imagePrice:.08,description:"DALL·E 3 Standard 1024×1792, 1792×1024 can generate standard quality images with a resolution of 1024×1792 or 1792×1024 pixels."},"dalle-3-hd-1024":{imagePrice:.08,description:"DALL·E 3 HD 1024×1024 can generate high-definition images with a resolution of 1024×1024 pixels."},"dalle-3-hd-1792":{imagePrice:.12,description:"DALL·E 3 HD 1024×1792, 1792×1024 can generate high-definition images with a resolution of 1024×1792 or 1792×1024 pixels."},"dalle-2-1024":{imagePrice:.02,description:"DALL·E 2 1024×1024 can generate images with a resolution of 1024×1024 pixels."},"dalle-2-512":{imagePrice:.018,description:"DALL·E 2 512×512 can generate images with a resolution of 512×512 pixels."},"dalle-2-256":{imagePrice:.016,description:"DALL·E 2 256×256 can generate images with a resolution of 256×256 pixels."},"davinci-002":{inputPrice:2,outputPrice:2,description:"Davinci-002 is a base model suitable for fine-tuning for specific tasks."},"babbage-002":{inputPrice:.4,outputPrice:.4,description:"Babbage-002 is a budget-friendly base model suitable for fine-tuning for specific tasks."},"text-embedding-3-small":{inputPrice:.02,description:"Text Embedding 3 Small is a lightweight model for generating text embeddings."},"text-embedding-3-large":{inputPrice:.13,description:"Text Embedding 3 Large is a powerful model for generating high-quality text embeddings."},"ada-v2":{inputPrice:.1,description:"Ada v2 is a low-cost model suitable for simple tasks and basic embeddings."},"gpt-3.5-turbo-ft":{trainingPrice:8,inputPrice:3,outputPrice:6,description:"GPT-3.5-turbo Fine-tuning allows you to create custom models by fine-tuning the GPT-3.5-turbo model with your training data."},"davinci-002-ft":{trainingPrice:6,inputPrice:12,outputPrice:12,description:"Davinci-002 Fine-tuning allows you to create custom models by fine-tuning the Davinci-002 model with your training data."},"babbage-002-ft":{trainingPrice:.4,inputPrice:1.6,outputPrice:1.6,description:"Babbage-002 Fine-tuning allows you to create custom models by fine-tuning the Babbage-002 model with your training data."},"code-interpreter":{sessionPrice:.03,description:"The Code Interpreter tool can interpret and execute code snippets within the Assistants API."},retrieval:{storagePrice:.2,description:"The Retrieval tool allows you to store and retrieve files for use with the Assistants API."},"gpt-3.5-turbo-0125":{inputPrice:.5,outputPrice:1.5,description:"GPT-3.5-turbo-0125 is the flagship model of the GPT-3.5-turbo family, with a 16K context window and optimized for dialog."},"gpt-3.5-turbo-instruct":{inputPrice:1.5,outputPrice:2,description:"GPT-3.5-turbo-instruct is an Instruct model with a 4K context window, optimized for following instructions."},"gpt-4":{inputPrice:30,outputPrice:60,description:"GPT-4 is a powerful model with broad general knowledge and domain expertise, capable of following complex instructions and solving difficult problems."},"gpt-4-32k":{inputPrice:60,outputPrice:120,description:"GPT-4-32k is a version of GPT-4 with a 32K context window, suitable for processing longer texts."}};function updateModelDescription(){const e=document.getElementById("model").value,t=pricingData[e];document.getElementById("modelDescription").innerHTML=t.description||""}function updateInputFields(){const e=document.getElementById("model").value,t=pricingData[e],i=document.getElementById("inputTokensDiv"),n=document.getElementById("outputTokensDiv"),o=document.getElementById("minutesDiv"),a=document.getElementById("charactersDiv"),r=document.getElementById("imagesDiv"),s=document.getElementById("sessionsDiv"),l=document.getElementById("storageDiv"),u=document.getElementById("trainingTokensDiv");i.style.display="none",n.style.display="none",o.style.display="none",a.style.display="none",r.style.display="none",s.style.display="none",l.style.display="none",u.style.display="none",t.inputPrice||t.outputPrice?(i.style.display="block",n.style.display="block"):t.minutePrice?o.style.display="block":t.characterPrice?a.style.display="block":t.imagePrice?r.style.display="block":t.sessionPrice?s.style.display="block":t.storagePrice?l.style.display="block":t.trainingPrice&&(u.style.display="block",i.style.display="block",n.style.display="block")}function calculateCost(){const e=document.getElementById("model").value,t=pricingData[e];let i=parseFloat(document.getElementById("inputTokens").value)||0,n=parseFloat(document.getElementById("outputTokens").value)||0,o=parseFloat(document.getElementById("minutes").value)||0,a=parseFloat(document.getElementById("characters").value)||0,r=parseFloat(document.getElementById("images").value)||0,s=parseFloat(document.getElementById("sessions").value)||0,l=parseFloat(document.getElementById("storage").value)||0,u=parseFloat(document.getElementById("trainingTokens").value)||0;if(t.inputPrice||t.outputPrice){if(!i||!n)return void alert("Please enter input and output tokens.");const o=i/1e6*t.inputPrice,a=n/1e6*t.outputPrice;displayResult(e,i,n,o,a,o+a)}else if(t.minutePrice){if(!o)return void alert("Please enter minutes.");const i=o/60*t.minutePrice;displayResult(e,o,null,i,null,i)}else if(t.characterPrice){if(!a)return void alert("Please enter characters.");const i=a/1e6*t.characterPrice;displayResult(e,a,null,i,null,i)}else if(t.imagePrice){if(!r)return void alert("Please enter number of images.");const i=r*t.imagePrice;displayResult(e,r,null,i,null,i)}else if(t.sessionPrice){if(!s)return void alert("Please enter number of sessions.");const i=s*t.sessionPrice;displayResult(e,s,null,i,null,i)}else if(t.storagePrice){if(!l)return void alert("Please enter storage in GB/day.");const i=l*t.storagePrice;displayResult(e,l,null,i,null,i)}else if(t.trainingPrice){if(!u)return void alert("Please enter training tokens.");const o=u/1e6*t.trainingPrice,a=i/1e6*t.inputPrice,r=n/1e6*t.outputPrice;displayResult(e,i,n,a,r,o+a+r,o)}}function displayResult(e,t,i,n,o,a,r=0){document.getElementById("result").innerHTML=`\n <p>Model: ${e.replace("-"," ").toUpperCase()}</p>\n ${t?`<p>Input: ${t.toFixed(20)}</p>`:""}\n ${i?`<p>Output: ${i.toFixed(20)}</p>`:""}\n ${n?`<p>Input Cost: $${n.toFixed(20)}</p>`:""}\n ${o?`<p>Output Cost: $${o.toFixed(20)}</p>`:""}\n ${r?`<p>Training Cost: $${r.toFixed(20)}</p>`:""}\n <p>Total Cost: $${a.toFixed(20)}</p>\n `}updateInputFields();
|
| 92 |
+
</script>
|
| 93 |
+
</body>
|
| 94 |
+
</html>
|