xtekky/gpt4free
1
1
Fork 0
mirror of https://github.com/xtekky/gpt4free.git synced 2024-11-23 17:23:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add count word and tokens in gui

Browse Source
This commit is contained in:
Heiner Lohaus 2024-02-24 20:09:38 +01:00
parent 55caf8e7de
commit 0ade2098a6
3 changed files with 89 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
g4f/gui/client/css/style.css
View File

@ -129,7 +129,7 @@ body {
flex-direction: column;
overflow: auto;
overflow-wrap: break-word;
padding-bottom: 50px;
padding-bottom: 20px;
}
.conversation .user-input {
@ -291,7 +291,7 @@ body {
.message .content {
display: flex;
flex-direction: column;
gap: 18px;
gap: 10px;
}
.message .content,
@ -343,6 +343,26 @@ body {
display: block;
}
.message .content .provider a,
.message .content .provider {
font-size: 12px;
text-decoration: none;
}
.message .content .provider a {
font-weight: bold;
}
.message .content .count {
font-size: 12px;
}
.count_total {
font-size: 12px;
padding-left: 100px;
padding-top: 10px;
}
.new_convo {
padding: 8px 12px;
display: flex;
@ -367,7 +387,7 @@ body {
.stop_generating, .regenerate {
position: absolute;
bottom: 158px;
bottom: 122px;
left: 50%;
transform: translateX(-50%);
z-index: 1000000;

13
g4f/gui/client/html/index.html
View File

@ -29,10 +29,17 @@
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/mistral-tokenizer-js" async>
import mistralTokenizer from 'mistral-tokenizer-js'
</script>
<script type="module" src="https://belladoreai.github.io/llama-tokenizer-js/llama-tokenizer.js" async>
import llamaTokenizer from 'llama-tokenizer-js'
</script>
<script src="https://unpkg.com/gpt-tokenizer/dist/cl100k_base.js" async></script>
<script>
const user_image = `<img src="/assets/img/user.png" alt="your avatar">`;
const gpt_image = `<img src="/assets/img/gpt.png" alt="your avatar">`;
const user_image = '<img src="/assets/img/user.png" alt="your avatar">';
const gpt_image = '<img src="/assets/img/gpt.png" alt="your avatar">';
</script>
<style>
.hljs {

73
g4f/gui/client/js/chat.v1.js
View File

@ -120,16 +120,8 @@ const remove_cancel_button = async () => {
}, 300);
};
const ask_gpt = async () => {
regenerate.classList.add(`regenerate-hidden`);
messages = await get_messages(window.conversation_id);
// Remove history, if it is selected
if (document.getElementById('history')?.checked) {
messages = [messages[messages.length-1]]
}
new_messages = [];
const filter_messages = (messages) => {
let new_messages = [];
for (i in messages) {
new_message = messages[i];
// Remove generated images from history
@ -143,6 +135,19 @@ const ask_gpt = async () => {
new_messages.push(new_message)
}
}
return new_messages;
}
const ask_gpt = async () => {
regenerate.classList.add(`regenerate-hidden`);
messages = await get_messages(window.conversation_id);
total_messages = messages.length;
// Remove history, if it is selected
if (document.getElementById('history')?.checked) {
messages = [messages[messages.length-1]];
}
messages = filter_messages(messages);
window.scrollTo(0, 0);
window.controller = new AbortController();
@ -159,8 +164,11 @@ const ask_gpt = async () => {
await new Promise((r) => setTimeout(r, 500));
window.scrollTo(0, 0);
el = message_box.querySelector('.count_total');
el ? el.parentElement.removeChild(el) : null;
message_box.innerHTML += `
<div class="message" data-index="${new_messages.length}">
<div class="message" data-index="${total_messages}">
<div class="assistant">
${gpt_image}
<i class="fa-solid fa-xmark"></i>
@ -186,7 +194,7 @@ const ask_gpt = async () => {
web_search: document.getElementById(`switch`).checked,
provider: provider.options[provider.selectedIndex].value,
patch_provider: document.getElementById('patch').checked,
messages: new_messages
messages: messages
});
const headers = {
accept: 'text/event-stream'
@ -240,7 +248,7 @@ const ask_gpt = async () => {
} else {
html = markdown_render(text);
let lastElement, lastIndex = null;
for (element of ['</p>', '</code></pre>', '</li>\n</ol>']) {
for (element of ['</p>', '</code></pre>', '</li>\n</ol>', '</li>\n</ul>']) {
const index = html.lastIndexOf(element)
if (index > lastIndex) {
lastElement = element;
@ -278,8 +286,9 @@ const ask_gpt = async () => {
let cursorDiv = document.getElementById(`cursor`);
if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv);
if (text) {
add_message(window.conversation_id, "assistant", text, provider);
await add_message(window.conversation_id, "assistant", text, provider);
}
await load_conversation(window.conversation_id);
message_box.scrollTop = message_box.scrollHeight;
await remove_cancel_button();
await register_remove_message();
@ -372,10 +381,16 @@ const load_conversation = async (conversation_id) => {
let elements = "";
for (i in messages) {
let item = messages[i];
let provider = item.provider ? `
let next_i = parseInt(i) + 1;
let next_provider = item.provider ? item.provider : (messages.length > next_i ? messages[next_i].provider : null);
let tokens_count = next_provider?.model ? count_tokens(next_provider.model, item.content) : "";
let append_count = tokens_count ? `, ${tokens_count} tokens` : "";
let words_count = `(${count_words(item.content)} words${append_count})`
let provider_link = item?.provider?.name ? `<a href="${item?.provider?.url}" target="_blank">${item.provider.name}</a>` : "";
let provider = provider_link ? `
<div class="provider">
<a href="${item.provider.url}" target="_blank">${item.provider.name}</a>
${item.provider.model ? ' with ' + item.provider.model : ''}
${provider_link}
${item.provider.model ? ' with ' + item.provider.model : ''}
</div>
` : "";
elements += `
@ -391,10 +406,17 @@ const load_conversation = async (conversation_id) => {
<div class="content">
${provider}
<div class="content_inner">${markdown_render(item.content)}</div>
<div class="count">${words_count}</div>
</div>
</div>
`;
}
let count_total = GPTTokenizer_cl100k_base?.encodeChat(filter_messages(messages), "gpt-3.5-turbo").length
if (count_total > 0) {
elements += `<div class="count_total">(${count_total} tokens used)</div>`;
}
message_box.innerHTML = elements;
await register_remove_message();
@ -407,6 +429,23 @@ const load_conversation = async (conversation_id) => {
}, 500);
};
function count_words(text) {
var matches = text.match(/[\w\d\’\'-]+/gi);
return matches ? matches.length : 0;
}
function count_tokens(model, text) {
if (model.startsWith("gpt-3") || model.startsWith("gpt-4")) {
return GPTTokenizer_cl100k_base?.encode(text).length
}
if (model.startsWith("llama2") || model.startsWith("codellama")) {
return llamaTokenizer?.encode(text).length
}
if (model.startsWith("mistral") || model.startsWith("mixtral")) {
return mistralTokenizer?.encode(text).length
}
}
const get_conversation = async (conversation_id) => {
let conversation = await JSON.parse(
localStorage.getItem(`conversation:${conversation_id}`)