Skip to content

Commit 23c6e5d

Browse files
TobiasMue91TobiasMue91
authored
Update prompt_token_optimizer.html
1 parent a5d11bc commit 23c6e5d

File tree

1 file changed

+128
-127
lines changed

1 file changed

+128
-127
lines changed

‎tools/prompt_token_optimizer.html‎

Lines changed: 128 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,142 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width,initial-scale=1" />
6-
<title>Prompt Token Optimizer</title>
7-
<script src="https://cdn.tailwindcss.com"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
9-
<script src="https://cdn.jsdelivr.net/npm/@dqbd/[email protected]/dist/index.global.js"></script>
10-
</head>
11-
<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
12-
<div class="container mx-auto px-4 py-8 max-w-4xl">
13-
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Token Optimizer</h1>
14-
<div class="flex justify-end mb-4"><button id="themeToggle" class="px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white">Toggle Theme</button></div>
15-
<div class="grid gap-4 md:grid-cols-2">
16-
<div class="space-y-2">
17-
<label class="block text-gray-700 dark:text-gray-300 font-medium">Input Prompt</label>
18-
<textarea id="input" class="w-full h-64 p-3 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white" placeholder="Paste your prompt here..."></textarea>
19-
<div id="inputTokens" class="text-sm text-gray-600 dark:text-gray-400"></div>
20-
</div>
21-
<div class="space-y-2">
22-
<label class="block text-gray-700 dark:text-gray-300 font-medium">Optimized Output</label>
23-
<textarea id="output" class="w-full h-64 p-3 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white" readonly></textarea>
24-
<div id="outputTokens" class="text-sm text-gray-600 dark:text-gray-400"></div>
25-
<button id="copyBtn" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">Copy to Clipboard</button>
26-
</div>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Prompt Token Optimizer</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tiktoken.min.js"></script>
10+
</head>
11+
<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
12+
<div class="container mx-auto px-4 py-8 max-w-4xl">
13+
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Token Optimizer</h1>
14+
15+
<div class="flex justify-end mb-4">
16+
<button id="themeToggle" class="px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white">
17+
Toggle Theme
18+
</button>
19+
</div>
20+
21+
<div class="grid gap-4 md:grid-cols-2">
22+
<div class="space-y-2">
23+
<label class="block text-gray-700 dark:text-gray-300 font-medium">Input Prompt</label>
24+
<textarea
25+
id="input"
26+
class="w-full h-64 p-3 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white"
27+
placeholder="Paste your prompt here..."
28+
></textarea>
29+
<div id="inputTokens" class="text-sm text-gray-600 dark:text-gray-400"></div>
30+
</div>
31+
32+
<div class="space-y-2">
33+
<label class="block text-gray-700 dark:text-gray-300 font-medium">Optimized Output</label>
34+
<textarea
35+
id="output"
36+
class="w-full h-64 p-3 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white"
37+
readonly
38+
></textarea>
39+
<div id="outputTokens" class="text-sm text-gray-600 dark:text-gray-400"></div>
40+
<button id="copyBtn" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
41+
Copy to Clipboard
42+
</button>
2743
</div>
2844
</div>
29-
<script>
30-
const abbreviations = {
31-
about: "abt",
32-
between: "btw",
33-
could: "cld",
34-
without: "w/o",
35-
with: "w/",
36-
would: "wld",
37-
should: "shld",
38-
because: "bc",
39-
through: "thru",
40-
please: "pls",
41-
language: "lang",
42-
example: "ex",
43-
information: "info",
44-
response: "resp",
45-
"response:": "resp:",
46-
assistant: "asst",
47-
human: "usr",
48-
context: "ctx",
49-
understand: "undst",
50-
generate: "gen",
51-
output: "out",
52-
message: "msg",
53-
system: "sys",
54-
function: "func",
55-
parameters: "params",
56-
application: "app",
57-
document: "doc",
58-
implementation: "impl",
59-
configuration: "config",
60-
management: "mgmt",
61-
development: "dev",
62-
environment: "env",
63-
database: "db",
64-
authentication: "auth",
65-
authorization: "authz",
66-
performance: "perf",
67-
optimization: "opt",
68-
processing: "proc",
69-
information: "info",
70-
communication: "comm",
71-
technology: "tech",
72-
requirements: "reqs",
73-
specification: "spec",
74-
implementation: "impl",
75-
integration: "intg",
76-
operation: "op",
77-
reference: "ref",
78-
description: "desc",
79-
presentation: "pres",
80-
organization: "org",
81-
administration: "admin",
82-
evaluation: "eval",
83-
identification: "id",
84-
verification: "verif",
85-
modification: "mod",
86-
distribution: "dist",
87-
installation: "inst",
88-
registration: "reg",
89-
documentation: "docs",
90-
representation: "repr",
91-
initialization: "init",
92-
configuration: "cfg",
93-
calculation: "calc",
94-
transformation: "trans",
95-
visualization: "viz",
96-
customization: "cust",
97-
recommendation: "rec",
98-
classification: "class",
99-
determination: "det",
100-
approximately: "approx",
101-
especially: "esp",
102-
etcetera: "etc",
103-
maximum: "max",
104-
minimum: "min",
105-
optimize: "opt",
106-
previous: "prev",
107-
regarding: "re",
108-
therefore: "thus",
109-
versus: "vs",
110-
};
111-
const encoder = new tiktoken.Tokenizer(tiktoken.load());
112-
function countTokens(text) {
113-
return encoder.encode(text).length;
45+
</div>
46+
47+
<script>
48+
const abbreviations = {
49+
'about': 'abt', 'between': 'btw', 'could': 'cld', 'without': 'w/o', 'with': 'w/',
50+
'would': 'wld', 'should': 'shld', 'because': 'bc', 'through': 'thru', 'please': 'pls',
51+
'language': 'lang', 'example': 'ex', 'information': 'info', 'response': 'resp',
52+
'assistant': 'asst', 'human': 'usr', 'context': 'ctx', 'understand': 'undst',
53+
'generate': 'gen', 'output': 'out', 'message': 'msg', 'system': 'sys',
54+
'function': 'func', 'parameters': 'params', 'application': 'app', 'document': 'doc',
55+
'implementation': 'impl', 'configuration': 'config', 'management': 'mgmt',
56+
'development': 'dev', 'environment': 'env', 'database': 'db', 'authentication': 'auth',
57+
'performance': 'perf', 'optimization': 'opt', 'processing': 'proc',
58+
'communication': 'comm', 'technology': 'tech', 'requirements': 'reqs',
59+
'specification': 'spec', 'integration': 'intg', 'operation': 'op',
60+
'reference': 'ref', 'description': 'desc', 'presentation': 'pres',
61+
'organization': 'org', 'administration': 'admin', 'evaluation': 'eval',
62+
'verification': 'verif', 'modification': 'mod', 'distribution': 'dist',
63+
'installation': 'inst', 'registration': 'reg', 'documentation': 'docs',
64+
'initialization': 'init', 'calculation': 'calc', 'transformation': 'trans',
65+
'visualization': 'viz', 'customization': 'cust', 'recommendation': 'rec',
66+
'classification': 'class', 'approximately': 'approx', 'especially': 'esp',
67+
'etcetera': 'etc', 'maximum': 'max', 'minimum': 'min', 'optimize': 'opt',
68+
'previous': 'prev', 'regarding': 're', 'therefore': 'thus', 'versus': 'vs'
69+
};
70+
71+
let encoder;
72+
73+
async function initializeEncoder() {
74+
try {
75+
encoder = await tiktoken.get_encoding("cl100k_base");
76+
console.log("Encoder initialized successfully");
77+
setupEventListeners();
78+
} catch (error) {
79+
console.error("Failed to initialize encoder:", error);
11480
}
115-
function optimizePrompt(text) {
116-
let optimized = text.replace(/\s+/g, " ").trim();
117-
Object.entries(abbreviations).forEach(([word, abbr]) => {
118-
const regex = new RegExp(`\\b${word}\\b`, "gi");
119-
optimized = optimized.replace(regex, abbr);
120-
});
121-
return optimized + " Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.";
81+
}
82+
83+
function countTokens(text) {
84+
try {
85+
return encoder.encode(text).length;
86+
} catch (error) {
87+
console.error("Error counting tokens:", error);
88+
return 0;
12289
}
123-
document.getElementById("input").addEventListener("input", function () {
90+
}
91+
92+
function optimizePrompt(text) {
93+
let optimized = text.replace(/\s+/g, ' ').trim();
94+
Object.entries(abbreviations).forEach(([word, abbr]) => {
95+
const regex = new RegExp(`\\b${word}\\b`, 'gi');
96+
optimized = optimized.replace(regex, abbr);
97+
});
98+
return optimized + ' Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.';
99+
}
100+
101+
function setupEventListeners() {
102+
const inputArea = document.getElementById('input');
103+
const outputArea = document.getElementById('output');
104+
const inputTokensDiv = document.getElementById('inputTokens');
105+
const outputTokensDiv = document.getElementById('outputTokens');
106+
107+
inputArea.addEventListener('input', function() {
124108
const input = this.value;
125109
const optimized = optimizePrompt(input);
126-
document.getElementById("output").value = optimized;
110+
outputArea.value = optimized;
111+
127112
const inputTokens = countTokens(input);
128113
const outputTokens = countTokens(optimized);
129114
const savings = inputTokens - outputTokens;
130-
document.getElementById("inputTokens").textContent = `Input Tokens: ${inputTokens}`;
131-
document.getElementById("outputTokens").textContent = `Output Tokens: ${outputTokens} (Saved: ${savings} tokens, ${Math.round((savings / inputTokens) * 100)}%)`;
115+
116+
inputTokensDiv.textContent = `Input Tokens: ${inputTokens}`;
117+
outputTokensDiv.textContent = `Output Tokens: ${outputTokens} (Saved: ${savings} tokens, ${Math.round(savings/inputTokens*100)}%)`;
132118
});
133-
new ClipboardJS("#copyBtn", { text: () => document.getElementById("output").value }).on("success", () => {
134-
const btn = document.getElementById("copyBtn");
135-
btn.textContent = "Copied!";
136-
setTimeout(() => (btn.textContent = "Copy to Clipboard"), 2000);
119+
120+
new ClipboardJS('#copyBtn', {
121+
text: () => document.getElementById('output').value
122+
}).on('success', () => {
123+
const btn = document.getElementById('copyBtn');
124+
btn.textContent = 'Copied!';
125+
setTimeout(() => btn.textContent = 'Copy to Clipboard', 2000);
137126
});
138-
document.getElementById("themeToggle").addEventListener("click", () => document.documentElement.classList.toggle("dark"));
139-
</script>
140-
</body>
127+
128+
document.getElementById('themeToggle').addEventListener('click', () =>
129+
document.documentElement.classList.toggle('dark')
130+
);
131+
}
132+
133+
document.addEventListener('DOMContentLoaded', initializeEncoder);
134+
135+
window.addEventListener('unload', () => {
136+
if (encoder) {
137+
encoder.free();
138+
}
139+
});
140+
</script>
141+
</body>
141142
</html>

0 commit comments

Comments
 (0)