Skip to content

Commit 5b07402

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

File tree

1 file changed

+7
-64
lines changed

1 file changed

+7
-64
lines changed

‎tools/prompt_token_optimizer.html‎

Lines changed: 7 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,13 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Prompt Token Optimizer</title>
6+
<title>Prompt Optimizer</title>
77
<script src="https://cdn.tailwindcss.com"></script>
88
<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>
109
</head>
1110
<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
1211
<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>
12+
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Optimizer</h1>
1413

1514
<div class="flex justify-end mb-4">
1615
<button id="themeToggle" class="px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white">
@@ -26,7 +25,6 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Token O
2625
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"
2726
placeholder="Paste your prompt here..."
2827
></textarea>
29-
<div id="inputTokens" class="text-sm text-gray-600 dark:text-gray-400"></div>
3028
</div>
3129

3230
<div class="space-y-2">
@@ -36,7 +34,6 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Token O
3634
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"
3735
readonly
3836
></textarea>
39-
<div id="outputTokens" class="text-sm text-gray-600 dark:text-gray-400"></div>
4037
<button id="copyBtn" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
4138
Copy to Clipboard
4239
</button>
@@ -50,45 +47,10 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Token O
5047
'would': 'wld', 'should': 'shld', 'because': 'bc', 'through': 'thru', 'please': 'pls',
5148
'language': 'lang', 'example': 'ex', 'information': 'info', 'response': 'resp',
5249
'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'
50+
'generate': 'gen', 'output': 'out', 'message': 'msg', 'system': 'sys'
51+
// Add more abbreviations as needed
6952
};
7053

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);
80-
}
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;
89-
}
90-
}
91-
9254
function optimizePrompt(text) {
9355
let optimized = text.replace(/\s+/g, ' ').trim();
9456
Object.entries(abbreviations).forEach(([word, abbr]) => {
@@ -98,27 +60,16 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Token O
9860
return optimized + ' Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.';
9961
}
10062

101-
function setupEventListeners() {
63+
document.addEventListener('DOMContentLoaded', () => {
10264
const inputArea = document.getElementById('input');
10365
const outputArea = document.getElementById('output');
104-
const inputTokensDiv = document.getElementById('inputTokens');
105-
const outputTokensDiv = document.getElementById('outputTokens');
10666

10767
inputArea.addEventListener('input', function() {
108-
const input = this.value;
109-
const optimized = optimizePrompt(input);
110-
outputArea.value = optimized;
111-
112-
const inputTokens = countTokens(input);
113-
const outputTokens = countTokens(optimized);
114-
const savings = inputTokens - outputTokens;
115-
116-
inputTokensDiv.textContent = `Input Tokens: ${inputTokens}`;
117-
outputTokensDiv.textContent = `Output Tokens: ${outputTokens} (Saved: ${savings} tokens, ${Math.round(savings/inputTokens*100)}%)`;
68+
outputArea.value = optimizePrompt(this.value);
11869
});
11970

12071
new ClipboardJS('#copyBtn', {
121-
text: () => document.getElementById('output').value
72+
text: () => outputArea.value
12273
}).on('success', () => {
12374
const btn = document.getElementById('copyBtn');
12475
btn.textContent = 'Copied!';
@@ -128,14 +79,6 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Token O
12879
document.getElementById('themeToggle').addEventListener('click', () =>
12980
document.documentElement.classList.toggle('dark')
13081
);
131-
}
132-
133-
document.addEventListener('DOMContentLoaded', initializeEncoder);
134-
135-
window.addEventListener('unload', () => {
136-
if (encoder) {
137-
encoder.free();
138-
}
13982
});
14083
</script>
14184
</body>

0 commit comments

Comments
 (0)