Skip to content

Commit

Permalink
Update prompt_token_optimizer.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@TobiasMue91
TobiasMue91 authored Jan 23, 2025
1 parent 5b07402 commit c9bae4e
Showing 1 changed file with 65 additions and 52 deletions.
117 changes: 65 additions & 52 deletions tools/prompt_token_optimizer.html
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,60 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prompt Optimizer</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
<style>
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
}
textarea {
resize: vertical;
min-height: 200px;
}
</style>
</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 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
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<main class="container max-w-4xl mx-auto p-4">
<header class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Prompt Optimizer</h1>
<button
onclick="document.documentElement.classList.toggle('dark')"
class="p-2 rounded bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
aria-label="Toggle theme">
🌓
</button>
</div>
</header>

<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>
<section>
<label class="block font-medium mb-2" for="input">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"
id="input"
class="w-full p-3 rounded border bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600"
placeholder="Paste your prompt here..."
></textarea>
</div>
oninput="updateOutput(this.value)">
</textarea>
</section>

<div class="space-y-2">
<label class="block text-gray-700 dark:text-gray-300 font-medium">Optimized Output</label>
<section>
<label class="block font-medium mb-2" for="output">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>
<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
id="output"
class="w-full p-3 rounded border bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600"
readonly>
</textarea>
<button
onclick="copyOutput()"
class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
Copy
</button>
</div>
</section>
</div>
</div>
</main>

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

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.';
function updateOutput(text) {
const output = document.getElementById('output');
output.value = text
.replace(/\s+/g, ' ')
.trim()
.replace(new RegExp(`\\b(${Object.keys(abbreviations).join('|')})\\b`, 'gi'),
match => abbreviations[match.toLowerCase()])
+ ' Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.';
}

document.addEventListener('DOMContentLoaded', () => {
const inputArea = document.getElementById('input');
const outputArea = document.getElementById('output');

inputArea.addEventListener('input', function() {
outputArea.value = optimizePrompt(this.value);
});

new ClipboardJS('#copyBtn', {
text: () => outputArea.value
}).on('success', () => {
const btn = document.getElementById('copyBtn');
async function copyOutput() {
const btn = document.querySelector('button:last-of-type');
const originalText = btn.textContent;

try {
await navigator.clipboard.writeText(document.getElementById('output').value);
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = 'Copy to Clipboard', 2000);
});
setTimeout(() => btn.textContent = originalText, 1000);
} catch (err) {
btn.textContent = 'Failed to copy';
setTimeout(() => btn.textContent = originalText, 1000);
}
}

document.getElementById('themeToggle').addEventListener('click', () =>
document.documentElement.classList.toggle('dark')
);
});
// Match system color scheme by default
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
</script>
</body>
</html>

0 comments on commit c9bae4e

Please sign in to comment.