From f02470891a9a000abf7a86405a325837f2a62a2b Mon Sep 17 00:00:00 2001
From: Sampson <jjdsampson@gmail.com>
Date: Fri, 18 Oct 2024 07:01:36 -0700
Subject: [PATCH] Adds token-estimate for prompts

I thought it would be helpful to give the user an idea as to how many tokens will be used up by their system prompt. In this change, we assume a 4/1 (chars to tokens) relationship, and calculate the tokens-used estimate for the user's prompt. This estimate is shared next to the label/tooltip, above the textarea.
---
 app/brave_settings_strings.grdp               |  3 ++
 .../model_config_ui.html                      | 12 ++++++++
 .../model_config_ui.ts                        | 30 +++++++++++++++++++
 ...ave_settings_localized_strings_provider.cc |  1 +
 4 files changed, 46 insertions(+)

diff --git a/app/brave_settings_strings.grdp b/app/brave_settings_strings.grdp
index e160c012e81f..72ef1e11b6f1 100644
--- a/app/brave_settings_strings.grdp
+++ b/app/brave_settings_strings.grdp
@@ -1423,6 +1423,9 @@ Leo. This action can't be undone.
   <message name="IDS_SETTINGS_LEO_ASSISTANT_MODEL_SYSTEM_PROMPT_DESC" desc="A description message for the custom model system prompt">
     Custom instructions and/or context given to the model to guide its responses in a specific direction or style. Use &#x25;datetime&#x25; where you would like the current date and time to be inserted.
   </message>
+  <message name="IDS_SETTINGS_LEO_ASSISTANT_TOKENS_COUNT" desc="A label for the (estimated) number of tokens in the system prompt">
+    ≈<ph name="TOKENS_COUNT">$1<ex>175</ex></ph> tokens
+  </message>
 
   <!-- Settings / Playlist -->
   <message name="IDS_SETTINGS_PLAYLIST_ENABLE_PLAYLIST_LABEL" desc="The text for setting to en/disable Playlist feature">
diff --git a/browser/resources/settings/brave_leo_assistant_page/model_config_ui.html b/browser/resources/settings/brave_leo_assistant_page/model_config_ui.html
index b1d4896c2b2a..5d4ec96edfb9 100644
--- a/browser/resources/settings/brave_leo_assistant_page/model_config_ui.html
+++ b/browser/resources/settings/brave_leo_assistant_page/model_config_ui.html
@@ -55,6 +55,11 @@
     margin-bottom: 5px;
   }
 
+  .inline-note {
+    color: var(--leo-color-text-tertiary);
+    font: var(--leo-font-small-regular);
+  }
+
   .actions-container leo-button:first-of-type {
     margin-right: 5px;
   }
@@ -249,6 +254,12 @@
               <cr-icon class="small"  icon="info-outline"></cr-icon>
             </leo-button>
           </leo-tooltip>
+          <template
+          is="dom-if"
+          if="[[promptTokensEstimate]]"
+        >
+          <span class="inline-note">[[promptTokensEstimateString]]</span>
+        </template>
         </div>
       </div>
       <cr-textarea
@@ -256,6 +267,7 @@
         rows="4"
         placeholder="$i18n{braveLeoAssistantModelSystemPromptPlaceholder}"
         on-change="onModelSystemPromptChange_"
+        on-input="constructTokenEstimateString_"
       ></cr-textarea>
     </div>
 
diff --git a/browser/resources/settings/brave_leo_assistant_page/model_config_ui.ts b/browser/resources/settings/brave_leo_assistant_page/model_config_ui.ts
index 4731486a6b38..8b54db59319d 100644
--- a/browser/resources/settings/brave_leo_assistant_page/model_config_ui.ts
+++ b/browser/resources/settings/brave_leo_assistant_page/model_config_ui.ts
@@ -40,6 +40,14 @@ export class ModelConfigUI extends ModelConfigUIBase {
         type: String,
         value: ''
       },
+      promptTokensEstimate: {
+        type: Number,
+        value: 0
+      },
+      promptTokensEstimateString: {
+        type: String,
+        value: ''
+      },
       endpointUrl: {
         type: String
       },
@@ -78,6 +86,8 @@ export class ModelConfigUI extends ModelConfigUIBase {
   modelRequestName: string
   contextSize: number
   modelSystemPrompt: string | null
+  promptTokensEstimate: number
+  promptTokensEstimateString: string
   endpointUrl: string
   apiKey: string
   modelItem: mojom.Model | null
@@ -167,6 +177,25 @@ export class ModelConfigUI extends ModelConfigUIBase {
     this.apiKey = e.target.value
   }
 
+  constructTokenEstimateString_( e?: any ) {
+    let charsLength = 0;
+    let tokensLength = 0;
+
+    if ( e?.target?.value ) {
+      charsLength = e.target.value.length;
+    } else if ( this.modelSystemPrompt ) {
+      charsLength = this.modelSystemPrompt.length;
+    }
+
+    tokensLength = charsLength > 0 ? Math.ceil(charsLength/4) : 0;
+
+    this.promptTokensEstimate = tokensLength
+    this.promptTokensEstimateString = this.i18n(
+      'braveLeoAssistantTokensCount',
+      this.promptTokensEstimate
+    )
+  }
+
   private saveEnabled_() {
     // Make sure all required fields are filled
     return this.label && this.modelRequestName && this.endpointUrl && !this.isUrlInvalid
@@ -184,6 +213,7 @@ export class ModelConfigUI extends ModelConfigUIBase {
       this.modelSystemPrompt =
         newValue.options.customModelOptions.modelSystemPrompt
     }
+    this.constructTokenEstimateString_()
   }
 
   private computeIsEditing_(modelItem: mojom.Model | null) {
diff --git a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
index 0019e2e6e097..8c9a3f5307a4 100644
--- a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
+++ b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
@@ -493,6 +493,7 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
        IDS_SETTINGS_LEO_ASSISTANT_MODEL_SYSTEM_PROMPT_TITLE},
       {"braveLeoAssistantModelSystemPromptDesc",
        IDS_SETTINGS_LEO_ASSISTANT_MODEL_SYSTEM_PROMPT_DESC},
+      {"braveLeoAssistantTokensCount", IDS_SETTINGS_LEO_ASSISTANT_TOKENS_COUNT},
 
       // New Tab Page
       {"braveNewTab", IDS_SETTINGS_NEW_TAB},