diff --git a/css/style.css b/css/style.css index 110fa1e..d0a255c 100644 --- a/css/style.css +++ b/css/style.css @@ -1943,6 +1943,121 @@ html { padding: 6px 10px; } +/* Hacker style controls */ +.hacker-controls { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 12px; + align-items: end; +} +.slider-block { + background: var(--main-bg-color); + border: 1px solid var(--input-border); + border-radius: 6px; + padding: 8px; + display: flex; + flex-direction: column; +} +.hacker-slider { + width: 100%; + appearance: none; + height: 4px; + background: linear-gradient(90deg, rgba(100,181,246,.8), rgba(66,165,245,.4)); + outline: none; + border-radius: 3px; +} +.slider-block .hacker-slider { margin-top: 6px; margin-bottom: 4px; } +.hacker-slider::-webkit-slider-thumb { + appearance: none; + width: 14px; + height: 14px; + background: var(--accent-color); + border-radius: 50%; + box-shadow: 0 0 8px rgba(100,181,246,.6); +} +.slider-value { + display: inline-block; + margin-left: 6px; + font-family: 'Fira Code', monospace; + color: var(--accent-color); +} +.segmented { + display: flex; + gap: 6px; + align-items: center; + flex-wrap: wrap; + padding: 8px; + background: var(--main-bg-color); + border: 1px solid var(--input-border); + border-radius: 6px; +} +.segmented-label { opacity: .7; margin-right: 6px; } +.segmented button { + background: var(--button-bg); + border: 1px solid var(--input-border); + color: var(--text-color); + padding: 6px 10px; + border-radius: 6px; + cursor: pointer; +} +.segmented button.active { + background: var(--accent-color); + color: var(--main-bg-color); + border-color: var(--accent-color); +} +.switch { display:flex; gap:6px; align-items:center; padding: 6px 8px; background: var(--main-bg-color); border:1px solid var(--input-border); border-radius:6px; } +.switch span { opacity:.85; } + +/* Tokenade section visual parity with transform cards */ +.token-bomb-section { + background: var(--main-bg-color); + border-radius: 8px; + padding: 16px; + border: 1px solid var(--input-border); + margin-bottom: 16px; +} +.token-bomb-section .section-header { margin-bottom: 10px; } +.token-bomb-section .output-instructions { margin-top: 8px; } + +/* Presets row polish */ +.tokenade-presets { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + margin: 8px 0 12px 0; +} +.tokenade-presets .transform-button { min-width: 160px; } + +/* Quick picks panel */ +.carrier-quick-grid { + background: var(--secondary-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + padding: 10px; + margin-bottom: 8px; +} +.carrier-quick-grid .emoji-grid { + border: none !important; + background: transparent !important; + padding: 6px !important; +} +.tokenade-carrier-options { margin-top: 8px; } +.carrier-quick-grid .emoji-button { + width: 32px; height: 32px; font-size: 18px; +} + +/* Align tokenade options with transform look */ +.tokenade-carrier-options label, +.hacker-controls .slider-block, +.hacker-controls .segmented, +.hacker-controls .switch { + margin-bottom: 6px; +} + +/* Reduce extra whitespace at bottom of tab cards */ +.tab-content .transform-layout > *:last-child { margin-bottom: 0; } + .transform-layout { position: relative; } diff --git a/index.html b/index.html index e95a52a..93c2b4e 100644 --- a/index.html +++ b/index.html @@ -78,6 +78,13 @@ > Tokenade + @@ -183,6 +190,53 @@ + +
+
+
+
+

Tokenizer Visualization {{ tokenizerEngine }}

+

Paste text to see how different tokenizers segment it.

+
+
+ +
+ +
+ +
+
+

+ Tokens + {{ tokenizerTokens.length }} total ยท {{ tokenizerWordCount }} words ยท {{ tokenizerCharCount }} chars +

+
+
+
+ {{ i }} + {{ tok.text }} + #{{ tok.id }} +
+
+
+ Tokens will appear here. +
+
+
+
+
@@ -206,43 +260,44 @@
-
-
- - -
-
-
-

- ๐Ÿ’ฅ Tokenade Generator - Craft dense token sequences with emojis and zero-width characters -

-
-
- - Disclaimer: These payloads can be disruptive to models, UIs, and tools. Use responsibly and avoid deploying in production or against systems without consent. - -
-
- - - - - - -
-
- - - - - - - - -
-
- - Estimated length: {{ estimateTokenadeLength().toLocaleString() }} chars - -
-
- - -
-
-
- Drop or paste emojis to embed โ†’ -
-
-
- {{ em }} - -
- -
-
-
- - -
- - Length: {{ tokenBombOutput.length.toLocaleString() }} chars ยท Tip: Increasing depth/breadth grows size multiplicatively. - -
-
-
- -
-
- - -
-

Text Payload Generator

-
- - - - -
-
- - -
-
- -
-
-
-
--> - --> +
diff --git a/js/app.js b/js/app.js index b4113db..633e628 100644 --- a/js/app.js +++ b/js/app.js @@ -74,6 +74,12 @@ window.app = new Vue({ tpCombining: true, tpZW: false, textPayload: '', + // Tokenizer tab + tokenizerInput: '', + tokenizerEngine: 'byte', + tokenizerTokens: [], + tokenizerCharCount: 0, + tokenizerWordCount: 0, // History of copied content copyHistory: [], @@ -155,6 +161,9 @@ window.app = new Vue({ this.initializeCategoryNavigation(); }); } + if (tabName === 'tokenizer') { + this.$nextTick(() => this.runTokenizer()); + } }, // Get transforms grouped by category @@ -1899,6 +1908,48 @@ window.app = new Vue({ this.tbPayloadEmojis.push(...onlyEmojis); } , + // Tokenizer visualization + runTokenizer() { + const text = this.tokenizerInput || ''; + const engine = this.tokenizerEngine; + const tokens = []; + if (!text) { this.tokenizerTokens = []; this.tokenizerCharCount = 0; this.tokenizerWordCount = 0; return; } + if (engine === 'byte') { + // Split into UTF-8 bytes, display hex and glyphs + const encoder = new TextEncoder(); + const bytes = encoder.encode(text); + for (let i=0;i