GPUvsAPI/index.html at main · MichaelMartinez/GPUvsAPI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GPU vs API Cost Calculator</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1>GPU vs API Cost Calculator</h1>
      <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-2">
          <h2>GPU Cost Calculator</h2>

          <form class="pure-form pure-form-stacked">
            <div class="tooltip">
              <label for="purchasePrice">Initial Purchase Price ($):</label>
              <span class="tooltiptext"
                >Enter the initial purchase price of the GPU</span
              >
            </div>
            <input type="number" id="purchasePrice" value="1500" required />

            <div class="tooltip">
              <label for="powerCost"
                >Cost of Power Consumption per Kilowatt Hour ($):</label
              >
              <span class="tooltiptext"
                >Enter the cost of power consumption per kilowatt hour in your
                region</span
              >
            </div>
            <input
              type="number"
              id="powerCost"
              step="0.01"
              value="0.12"
              required
            />

            <div class="tooltip">
              <label for="gpuWattage">GPU Power Consumption (Watts):</label>
              <span class="tooltiptext"
                >Enter the power consumption of your GPU or GPUs in watts</span
              >
            </div>
            <input type="number" id="gpuWattage" value="350" required />

            <div class="tooltip">
              <label for="depreciationRate"
                >Depreciation Rate (% per year):</label
              >
              <span class="tooltiptext"
                >Enter the depreciation rate of the GPU per year</span
              >
            </div>
            <input type="number" id="depreciationRate" value="8" required />

            <div class="tooltip">
              <label for="yearsOfOwnership">Years of Ownership:</label>
              <span class="tooltiptext"
                >Enter the number of years you plan to own the GPU or how long
                it will be useful</span
              >
            </div>
            <input type="number" id="yearsOfOwnership" value="4" required />

            <div class="tooltip">
              <label for="hoursPerDay">Hours of Use per Day:</label>
              <span class="tooltiptext"
                >Enter the number of hours the GPU is used per day</span
              >
            </div>
            <input type="number" id="hoursPerDay" value="8" required />

            <div class="tooltip">
              <label for="tokensPerSecond"
                >Estimated Tokens Generated per Second:</label
              >
              <span class="tooltiptext"
                >Enter the estimated number of tokens generated per second</span
              >
            </div>
            <input type="number" id="tokensPerSecond" value="30" required />
          </form>
        </div>

        <div class="pure-g">
          <div class="pure-u-1">
            <h1>Understanding Token Calculations</h1>
            <p>
              Tokens are a fundamental unit used to measure the amount of text
              processed by our model. Here's how we approximate the usage and
              cost:
            </p>

            <h2>Token to Word Conversion:</h2>
            <ul>
              <li>
                Tokens are calculated based on the text input to and output from
                the model.
              </li>
              <li>
                For instance, if you generate 32,000 tokens, this roughly
                translates to 24,000 words, as typically 3/4 of the tokens
                represent actual words.
              </li>
            </ul>

            <h2>Words to Pages Estimation:</h2>
            <ul>
              <li>On average, each page contains about 500 words.</li>
              <li>
                Therefore, 24,000 words are equivalent to approximately 48 pages
                (since 24,000 words / 500 words per page = 48 pages).
              </li>
            </ul>

            <h2>Input and Output Token Relationship:</h2>
            <ul>
              <li>
                For every input token, there is typically an equivalent output
                token. This means that the total number of tokens considered
                will be a combination of both input and output tokens.
              </li>
            </ul>

            <h2>Cost Calculation:</h2>
            <ul>
              <li>
                The cost is computed based on the total tokens processed. This
                includes both the tokens for input and the tokens for output.
              </li>
              <li>
                Although this method provides a good baseline, please note that
                it is an approximation and might vary based on specific text
                characteristics and model behavior.
              </li>
            </ul>

            <p>
              This approach gives you a straightforward way to estimate how much
              content you can process and the associated costs. Remember, this
              is a starting point, and you might need to adjust these estimates
              based on your actual usage.
            </p>
          </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-2">
          <h2>API Cost Calculator</h2>
          <form class="pure-form pure-form-stacked">
            <div class="tooltip">
              <label for="inputTokenPrice"
                >Price of Tokens for Input ($ per million):</label
              >
              <span class="tooltiptext"
                >Enter the price of tokens for input in millions</span
              >
            </div>
            <input type="number" id="inputTokenPrice" value="10" required />

            <div class="tooltip">
              <label for="outputTokenPrice"
                >Price of Tokens for Output ($ per million):</label
              >
              <span class="tooltiptext"
                >Enter the price of tokens for output in millions</span
              >
            </div>
            <input type="number" id="outputTokenPrice" value="15" required />

            <div class="tooltip">
              <label for="tokensPerDay">Tokens per Day:</label>
              <span class="tooltiptext"
                >Enter the number of tokens you plan to generate per day for
                token calculation</span
              >
            </div>
            <input type="number" id="tokensPerDay" value="10000" required />
          </form>
        </div>
      </div>

      <div class="pure-g">
        <div class="pure-u-1">
          <h2>Cost Comparison Chart</h2>
          <canvas id="costChart"></canvas>
        </div>
      </div>

      <div class="pure-g">
        <div class="pure-u-1 text-center">
          <button id="calculateBtn" class="pure-button pure-button-primary">
            Calculate
          </button>
          <button id="resetBtn" class="pure-button">Reset</button>
        </div>
      </div>

      <div class="pure-g">
        <div class="pure-u-1">
          <h2>Cost Report</h2>
          <div id="costReport"></div>
          <button id="downloadReport" class="pure-button pure-button-primary">
            Download Report
          </button>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>