Create prompt_token_optimizer.html

TobiasMue91 · Jan 23, 2025 · bd9c614 · bd9c614
1 parent f0321db
commit bd9c614
Showing 1 changed file with 141 additions and 0 deletions.
diff --git a/tools/prompt_token_optimizer.html b/tools/prompt_token_optimizer.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>Prompt Token Optimizer</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gpt-tokenizer.min.js"></script>
+    </head>
+    <body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
+        <div class="container mx-auto px-4 py-8 max-w-4xl">
+            <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Token Optimizer</h1>
+            <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>
+            <div class="grid gap-4 md:grid-cols-2">
+                <div class="space-y-2">
+                    <label class="block text-gray-700 dark:text-gray-300 font-medium">Input Prompt</label>
+                    <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>
+                    <div id="inputTokens" class="text-sm text-gray-600 dark:text-gray-400"></div>
+                </div>
+                <div class="space-y-2">
+                    <label class="block text-gray-700 dark:text-gray-300 font-medium">Optimized Output</label>
+                    <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>
+                    <div id="outputTokens" class="text-sm text-gray-600 dark:text-gray-400"></div>
+                    <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>
+                </div>
+            </div>
+        </div>
+        <script>
+            const abbreviations = {
+                about: "abt",
+                between: "btw",
+                could: "cld",
+                without: "w/o",
+                with: "w/",
+                would: "wld",
+                should: "shld",
+                because: "bc",
+                through: "thru",
+                please: "pls",
+                language: "lang",
+                example: "ex",
+                information: "info",
+                response: "resp",
+                "response:": "resp:",
+                assistant: "asst",
+                human: "usr",
+                context: "ctx",
+                understand: "undst",
+                generate: "gen",
+                output: "out",
+                message: "msg",
+                system: "sys",
+                function: "func",
+                parameters: "params",
+                application: "app",
+                document: "doc",
+                implementation: "impl",
+                configuration: "config",
+                management: "mgmt",
+                development: "dev",
+                environment: "env",
+                database: "db",
+                authentication: "auth",
+                authorization: "authz",
+                performance: "perf",
+                optimization: "opt",
+                processing: "proc",
+                information: "info",
+                communication: "comm",
+                technology: "tech",
+                requirements: "reqs",
+                specification: "spec",
+                implementation: "impl",
+                integration: "intg",
+                operation: "op",
+                reference: "ref",
+                description: "desc",
+                presentation: "pres",
+                organization: "org",
+                administration: "admin",
+                evaluation: "eval",
+                identification: "id",
+                verification: "verif",
+                modification: "mod",
+                distribution: "dist",
+                installation: "inst",
+                registration: "reg",
+                documentation: "docs",
+                representation: "repr",
+                initialization: "init",
+                configuration: "cfg",
+                calculation: "calc",
+                transformation: "trans",
+                visualization: "viz",
+                customization: "cust",
+                recommendation: "rec",
+                classification: "class",
+                determination: "det",
+                approximately: "approx",
+                especially: "esp",
+                etcetera: "etc",
+                maximum: "max",
+                minimum: "min",
+                optimize: "opt",
+                previous: "prev",
+                regarding: "re",
+                therefore: "thus",
+                versus: "vs",
+            };
+            const tokenizer = new GPTTokenizer({ type: "gpt3" });
+            function countTokens(text) {
+                return tokenizer.encode(text).length;
+            }
+            function optimizePrompt(text) {
+                let optimized = text.replace(/\s+/g, " ").trim();
+                Object.entries(abbreviations).forEach(([word, abbr]) => {
+                    const regex = new RegExp(`\\b${word}\\b`, "gi");
+                    optimized = optimized.replace(regex, abbr);
+                });
+                return optimized + " Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.";
+            }
+            document.getElementById("input").addEventListener("input", function () {
+                const input = this.value;
+                const optimized = optimizePrompt(input);
+                document.getElementById("output").value = optimized;
+                const inputTokens = countTokens(input);
+                const outputTokens = countTokens(optimized);
+                const savings = inputTokens - outputTokens;
+                document.getElementById("inputTokens").textContent = `Input Tokens: ${inputTokens}`;
+                document.getElementById("outputTokens").textContent = `Output Tokens: ${outputTokens} (Saved: ${savings} tokens, ${Math.round((savings / inputTokens) * 100)}%)`;
+            });
+            new ClipboardJS("#copyBtn", { text: () => document.getElementById("output").value }).on("success", () => {
+                const btn = document.getElementById("copyBtn");
+                btn.textContent = "Copied!";
+                setTimeout(() => (btn.textContent = "Copy to Clipboard"), 2000);
+            });
+            document.getElementById("themeToggle").addEventListener("click", () => document.documentElement.classList.toggle("dark"));
+        </script>
+    </body>
+</html>