Skip to content

Commit bd9c614

Browse files
TobiasMue91TobiasMue91
authored
Create prompt_token_optimizer.html
1 parent f0321db commit bd9c614

File tree

1 file changed

+141
-0
lines changed

1 file changed

+141
-0
lines changed

‎tools/prompt_token_optimizer.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<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/[email protected]/dist/gpt-tokenizer.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+
<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>
27+
</div>
28+
</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 tokenizer = new GPTTokenizer({ type: "gpt3" });
112+
function countTokens(text) {
113+
return tokenizer.encode(text).length;
114+
}
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.";
122+
}
123+
document.getElementById("input").addEventListener("input", function () {
124+
const input = this.value;
125+
const optimized = optimizePrompt(input);
126+
document.getElementById("output").value = optimized;
127+
const inputTokens = countTokens(input);
128+
const outputTokens = countTokens(optimized);
129+
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)}%)`;
132+
});
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);
137+
});
138+
document.getElementById("themeToggle").addEventListener("click", () => document.documentElement.classList.toggle("dark"));
139+
</script>
140+
</body>
141+
</html>

0 commit comments

Comments
 (0)