Skip to content

Commit c9bae4e

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

File tree

1 file changed

+65
-52
lines changed

1 file changed

+65
-52
lines changed

‎tools/prompt_token_optimizer.html‎

Lines changed: 65 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,60 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Prompt Optimizer</title>
77
<script src="https://cdn.tailwindcss.com"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
8+
<style>
9+
@media (prefers-color-scheme: dark) {
10+
:root {
11+
color-scheme: dark;
12+
}
13+
}
14+
textarea {
15+
resize: vertical;
16+
min-height: 200px;
17+
}
18+
</style>
919
</head>
10-
<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
11-
<div class="container mx-auto px-4 py-8 max-w-4xl">
12-
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Optimizer</h1>
13-
14-
<div class="flex justify-end mb-4">
15-
<button id="themeToggle" class="px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white">
16-
Toggle Theme
20+
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
21+
<main class="container max-w-4xl mx-auto p-4">
22+
<header class="flex justify-between items-center mb-6">
23+
<h1 class="text-2xl font-bold">Prompt Optimizer</h1>
24+
<button
25+
onclick="document.documentElement.classList.toggle('dark')"
26+
class="p-2 rounded bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
27+
aria-label="Toggle theme">
28+
🌓
1729
</button>
18-
</div>
30+
</header>
1931

2032
<div class="grid gap-4 md:grid-cols-2">
21-
<div class="space-y-2">
22-
<label class="block text-gray-700 dark:text-gray-300 font-medium">Input Prompt</label>
33+
<section>
34+
<label class="block font-medium mb-2" for="input">Input Prompt</label>
2335
<textarea
24-
id="input"
25-
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"
36+
id="input"
37+
class="w-full p-3 rounded border bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600"
2638
placeholder="Paste your prompt here..."
27-
></textarea>
28-
</div>
39+
oninput="updateOutput(this.value)">
40+
</textarea>
41+
</section>
2942

30-
<div class="space-y-2">
31-
<label class="block text-gray-700 dark:text-gray-300 font-medium">Optimized Output</label>
43+
<section>
44+
<label class="block font-medium mb-2" for="output">Optimized Output</label>
3245
<textarea
33-
id="output"
34-
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"
35-
readonly
36-
></textarea>
37-
<button id="copyBtn" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
38-
Copy to Clipboard
46+
id="output"
47+
class="w-full p-3 rounded border bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600"
48+
readonly>
49+
</textarea>
50+
<button
51+
onclick="copyOutput()"
52+
class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
53+
Copy
3954
</button>
40-
</div>
55+
</section>
4156
</div>
42-
</div>
57+
</main>
4358

4459
<script>
4560
const abbreviations = {
@@ -48,38 +63,36 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Optimiz
4863
'language': 'lang', 'example': 'ex', 'information': 'info', 'response': 'resp',
4964
'assistant': 'asst', 'human': 'usr', 'context': 'ctx', 'understand': 'undst',
5065
'generate': 'gen', 'output': 'out', 'message': 'msg', 'system': 'sys'
51-
// Add more abbreviations as needed
5266
};
5367

54-
function optimizePrompt(text) {
55-
let optimized = text.replace(/\s+/g, ' ').trim();
56-
Object.entries(abbreviations).forEach(([word, abbr]) => {
57-
const regex = new RegExp(`\\b${word}\\b`, 'gi');
58-
optimized = optimized.replace(regex, abbr);
59-
});
60-
return optimized + ' Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.';
68+
function updateOutput(text) {
69+
const output = document.getElementById('output');
70+
output.value = text
71+
.replace(/\s+/g, ' ')
72+
.trim()
73+
.replace(new RegExp(`\\b(${Object.keys(abbreviations).join('|')})\\b`, 'gi'),
74+
match => abbreviations[match.toLowerCase()])
75+
+ ' Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.';
6176
}
6277

63-
document.addEventListener('DOMContentLoaded', () => {
64-
const inputArea = document.getElementById('input');
65-
const outputArea = document.getElementById('output');
66-
67-
inputArea.addEventListener('input', function() {
68-
outputArea.value = optimizePrompt(this.value);
69-
});
70-
71-
new ClipboardJS('#copyBtn', {
72-
text: () => outputArea.value
73-
}).on('success', () => {
74-
const btn = document.getElementById('copyBtn');
78+
async function copyOutput() {
79+
const btn = document.querySelector('button:last-of-type');
80+
const originalText = btn.textContent;
81+
82+
try {
83+
await navigator.clipboard.writeText(document.getElementById('output').value);
7584
btn.textContent = 'Copied!';
76-
setTimeout(() => btn.textContent = 'Copy to Clipboard', 2000);
77-
});
85+
setTimeout(() => btn.textContent = originalText, 1000);
86+
} catch (err) {
87+
btn.textContent = 'Failed to copy';
88+
setTimeout(() => btn.textContent = originalText, 1000);
89+
}
90+
}
7891

79-
document.getElementById('themeToggle').addEventListener('click', () =>
80-
document.documentElement.classList.toggle('dark')
81-
);
82-
});
92+
// Match system color scheme by default
93+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
94+
document.documentElement.classList.add('dark');
95+
}
8396
</script>
8497
</body>
8598
</html>

0 commit comments

Comments
 (0)