diff --git a/css/style.css b/css/style.css index 81d4499..c6134dc 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,10 @@ +.danger-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 3000; display:flex; align-items:center; justify-content:center; } +.danger-modal { width: 560px; max-width: calc(100% - 32px); background: #0b0f0b; border: 1px solid #2e7d32; border-radius: 10px; box-shadow: 0 18px 48px rgba(0,0,0,.6); } +.danger-header { display:flex; align-items:center; gap:8px; padding: 14px 16px; color:#69f0ae; border-bottom:1px solid #1b5e20; font-size:1.05rem; } +.danger-body { padding: 14px 16px; color:#e0f2f1; opacity:.95; } +.danger-actions { display:flex; gap:8px; justify-content:flex-end; padding: 12px 16px; border-top:1px solid #1b5e20; } +.danger-cancel { background: var(--button-bg); border:1px solid var(--input-border); padding:8px 12px; border-radius:6px; cursor:pointer; } +.danger-proceed { background:#1b5e20; border:1px solid #2e7d32; color:#69f0ae; padding:8px 12px; border-radius:6px; cursor:pointer; box-shadow: 0 0 12px rgba(105,240,174,.35) inset, 0 0 16px rgba(105,240,174,.2); } /* Modern dark theme styling */ :root { --main-bg-color: #1a1a1a; @@ -2032,6 +2039,22 @@ html { .token-bomb-section .section-header { margin-bottom: 10px; } .token-bomb-section .output-instructions { margin-top: 8px; } +/* Tokenade disclaimer styling */ +.tokenade-disclaimer { + display: flex; + align-items: flex-start; + gap: 8px; + margin: 10px 0 12px 0; + padding: 10px 12px; + border: 1px solid #1b5e20; + background: rgba(27, 94, 32, 0.15); + color: #69f0ae; + border-radius: 6px; + font-size: 0.95rem; + line-height: 1.35; +} +.tokenade-disclaimer i { color: #69f0ae; margin-top: 2px; } + /* Presets row polish */ .tokenade-presets { display: flex; diff --git a/index.html b/index.html index 03035ef..aa49714 100644 --- a/index.html +++ b/index.html @@ -250,10 +250,9 @@ 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. - +
+ + Safety notice: Tokenade payloads can severely degrade model performance and crash UIs. Use for testing only. Do not deploy to production or target systems without explicit permission.
@@ -331,7 +330,7 @@
-
+ +
+
+
+ + Danger zone warning +
+
+

Your projected payload size exceeds 25,000,000 characters. Generating this will very likely freeze/crash your browser or downstream tools, and can rack up serious costs if sent to a model.

+

Proceed only if you fully understand the risks and are testing in a safe, isolated environment.

+
+
+ + +
+
+
+
diff --git a/js/app.js b/js/app.js index b8e56ce..832e81f 100644 --- a/js/app.js +++ b/js/app.js @@ -86,7 +86,12 @@ window.app = new Vue({ copyHistory: [], maxHistoryItems: 10, showCopyHistory: false, - showUnicodePanel: false + showUnicodePanel: false, + + // Danger zone controls + showDangerModal: false, + dangerThresholdTokens: 25_000_000, + _pendingTokenadeAction: null }, methods: { toggleUnicodePanel() { @@ -1698,6 +1703,32 @@ window.app = new Vue({ }); } , + // Quick estimate of token count for Tokenade + estimateTokenadeTokens() { + // Roughly approximate tokens by estimated character length + // This intentionally errs on the conservative side for warning purposes + const approx = this.estimateTokenadeLength(); + return Math.max(0, approx); + }, + + // Confirm danger threshold before generating + checkTokenadeDangerThenGenerate() { + const estTokens = this.estimateTokenadeTokens(); + if (estTokens > this.dangerThresholdTokens) { + this._pendingTokenadeAction = 'generate'; + this.showDangerModal = true; + return; + } + this.generateTokenBomb(); + }, + + // Proceed/cancel handlers for modal + proceedDangerAction() { + const action = this._pendingTokenadeAction; this._pendingTokenadeAction = null; this.showDangerModal = false; + if (action === 'generate') this.generateTokenBomb(); + }, + cancelDangerAction() { this._pendingTokenadeAction = null; this.showDangerModal = false; }, + // Token Bomb Generator Logic generateTokenBomb() { const depth = Math.max(1, Math.min(8, Number(this.tbDepth) || 1));