Obtaining and displaying token usage on web page

I have spent some time reading over other threads but not finding what I need to get started. If I have missed answer here pot OpenAI API docs, please forgive this poor eye-sight gal:)

When I call openai with my example.php, there is a response returned from openai api that under dev network / Response. example below.

{"id": "chatcmpl-XXXXXXXXXXXXXXXXXXXX", "object": "chat.completion", "created": 1702400270, "model": "gpt-4-1106-vision-preview", "usage": {"prompt_tokens": 820, "completion_tokens": 520, "total_tokens": 1340}, "choices": [{"message": {"role": "assistant", "content":

How is it possible using php / javascript to extra and show on web page like:

Prompt Tokens:
Completion Tokens:
Total Tokens:

This all came about while working on a classroom project. Student asked how to do it and I have no clue…

Anyone else solve this mystery using php / javascript?

Not sure if this is allowed in the forums, but this actually seemed like a really good question for GPT4 to answer?

To extract and display the data from the response you received from the OpenAI API on a webpage using PHP and JavaScript, you can follow these steps:

PHP Backend

  1. Receive the API Response: Assuming you’re using PHP to call the OpenAI API, you would receive the JSON response as a string.

  2. Decode the JSON Response: Use json_decode in PHP to convert the JSON string into an associative array.

  3. Extract the Required Data: Access the usage field of the array to get prompt_tokens, completion_tokens, and total_tokens.

  4. Send the Data to the Frontend: You can either render this data directly in PHP or send it to the frontend (JavaScript) through an AJAX call.

Example PHP Code:

<?php
// Example response from OpenAI API
$responseFromOpenAI = '{"id": "chatcmpl-XXXXXXXXXXXXXXXXXXXX", "object": "chat.completion", "created": 1702400270, "model": "gpt-4-1106-vision-preview", "usage": {"prompt_tokens": 820, "completion_tokens": 520, "total_tokens": 1340}}';

// Decoding the JSON string to an associative array
$responseArray = json_decode($responseFromOpenAI, true);

// Extracting usage data
$usageData = $responseArray['usage'];

// You can echo these values directly in PHP or pass them to JavaScript
echo json_encode($usageData);
?>

JavaScript Frontend

  1. Fetch the Data: Use AJAX (with XMLHttpRequest or fetch API) to get the data from your PHP backend.

  2. Display the Data: Once you receive the data, you can display it on the webpage using DOM manipulation.

Example JavaScript Code:

fetch('path_to_your_php_script.php')
.then(response => response.json())
.then(data => {
    // Assuming you have HTML elements with these IDs
    document.getElementById('promptTokens').textContent = 'Prompt Tokens: ' + data.prompt_tokens;
    document.getElementById('completionTokens').textContent = 'Completion Tokens: ' + data.completion_tokens;
    document.getElementById('totalTokens').textContent = 'Total Tokens: ' + data.total_tokens;
})
.catch(error => console.error('Error:', error));

HTML

<div id="promptTokens"></div>
<div id="completionTokens"></div>
<div id="totalTokens"></div>

This is a basic example. Depending on your application’s architecture, you might need to adjust the AJAX call, the PHP script’s location, and how you handle the response.

Never had a clue it might not be allowed, thought that was what the forum was for:) Hope I did not break any rules.

We had attempted asking OpenAI via gpt-4 and others api’s without true success.

Tomorrow during class I will attempt using your code @jmportilla

Really appreciate you taking the time to assist.

Sorry, I meant I wasn’t sure if my own reply was against the rules :slight_smile:
Since I used GPT-4 to help create the answer. Best of luck in class tomorrow!

1 Like

Unfortunately did nt work. Pretty much the same code we got when querying gpt-4. Looks good on paper but outcome disappointing.

Why is this hidden? Is this a taboo subject?

At least give me a chance to see the reply.

The reply was hidden because it was flagged for being a bot-generated answer without disclosure, little relevance to the topic, or value to the community.


If you are not using streaming (where you don’t get a report, but rather have to encode the text received word-by-word to tokens yourself and then count with a library like tiktoken), but instead are just using the completion normally and getting the statistics for “usage” as you show, you’d need to parse the return object, loading json into arrays or using a json method, or even simply doing string matching.

When I ask an AI, knowing what you are looking at and looking for, I get a more cohesive answer:

// Decode the JSON string into a PHP array
$data = json_decode($jsonString, true);

// Access the value of "total_tokens"
$totalTokens = $data['usage']['total_tokens'];
1 Like

Thank you for explaining the question about hidden post, understand now.

Good info to know about streaming.

I will explore this more, thank you @_j

Normal teacher for computer coding class is out on medical, so I am thrown in with no safety rope. Ok though, will figure it out eventually.