Merge pull request #9 from Aidan-John/gibberish-generator

Gibberish Generator

index.html

@@ -15,7 +15,7 @@
     <div id="app" class="container">
         <header>
             <div class="logo">
-                <h1>🐉️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️︎︎️️️️︎︎︎️️️️️︎︎︎️︎︎︎️️️︎️︎︎️️️️︎️︎︎︎️︎︎︎️︎︎️️︎️︎️︎︎️️️️︎️︎︎︎️︎︎︎️︎︎︎️︎️︎︎️️️︎️︎︎️︎︎︎️︎️︎️︎︎️️️︎︎️︎︎︎︎︎️︎️︎︎︎︎️︎︎️︎︎️️︎︎︎️︎︎︎️︎️︎️︎︎︎️︎︎︎︎️︎️️️︎︎︎️︎️️️︎︎︎️︎️️️︎︎️︎︎️️︎︎︎️︎︎️️️️︎️︎️︎️️︎︎️︎︎︎️︎️︎︎️️️︎️︎︎️︎️︎︎︎︎︎️︎︎️️︎︎︎️︎︎️︎︎️︎️︎︎️️️︎︎️︎️️︎︎️︎️️️️️︎︎︎︎️️️️️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎​ P4RS3LT0NGV3</h1>
+                <h1>🐉️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️︎︎️️️️︎︎︎️️️️️︎︎︎️︎︎︎️️️︎️︎︎️️️️︎️︎︎︎️︎︎︎️︎︎️️︎️︎️︎︎️️️️︎️︎︎︎️︎︎︎️︎︎︎️︎️︎︎️️️︎️︎︎️︎︎︎️︎️︎️︎︎️️️︎︎️︎︎︎︎︎️︎️︎︎︎︎️︎︎️︎︎️️︎︎︎️︎︎︎️︎️︎️︎︎︎️︎︎︎︎️︎️️️︎︎︎️︎️️️︎︎︎️︎️️️︎︎️︎︎️️︎︎︎️︎︎️️️️︎️︎️︎️️︎︎️︎︎︎️︎️︎︎️️️︎︎️︎️︎️︎︎︎︎︎︎️︎︎️️︎︎︎️︎︎️︎︎️︎️︎︎️️️︎︎️︎️️︎︎️︎️️️️️︎︎︎︎️️️️️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎​ P4RS3LT0NGV3</h1>
             </div>
             <div class="actions">
                 <button
@@ -92,6 +92,13 @@
                 >
                     <i class="fas fa-layer-group"></i> Tokenizer
                 </button>
+                <button
+                    :class="{ active: activeTab === 'gibberish' }"
+                    @click="switchToTab('gibberish')"
+                    title="Gibberish Generator"
+                >
+                    <i class="fas fa-comments"></i> Gibberish
+                </button>
             </div>
 
             <!-- Steganography Tab -->
@@ -197,6 +204,168 @@
                 </div>
             </div>
 
+            <!-- Gibberish Tab -->
+            <div v-if="activeTab === 'gibberish'" class="tab-content">
+                <div class="transform-layout">
+                    <!-- Sub-tabs for Gibberish modes -->
+                    <div class="tab-buttons" style="margin-bottom: 20px;">
+                        <button 
+                            :class="{ active: gibberishMode === 'random' }" 
+                            @click="gibberishMode = 'random'"
+                            title="Random gibberish translation"
+                        >
+                            <i class="fas fa-book"></i> Gibberish Dictionary
+                        </button>
+                        <button 
+                            :class="{ active: gibberishMode === 'removal' }" 
+                            @click="gibberishMode = 'removal'"
+                            title="Specific gibberish mapping"
+                        >
+                            <i class="fas fa-list"></i> Gibberish by Removal
+                        </button>
+                    </div>
+
+                    <!-- Random Mode -->
+                    <div v-if="gibberishMode === 'random'" class="transform-section">
+                        <div class="section-header">
+                            <h3><i class="fas fa-book"></i> Gibberish Dictionary<small>Translate text into random gibberish and corresponding dictionary.</small></h3>
+                        </div>
+                        <div class="options-grid">
+                            <label>
+                                Plaintext:
+                                <textarea v-model="gibberishInput" placeholder="Enter plaintext to gibberize..." rows="3"></textarea>
+                            </label>
+                            <label>
+                                Characters to use:
+                                <textarea v-model="gibberishChars" rows="3"></textarea>
+                            </label>
+                            <label>
+                                Seed (optional)
+                                <input type="text" v-model="gibberishSeed" placeholder="e.g., 1337" />
+                            </label>
+                        </div>
+                        <div class="token-bomb-actions mutation-actions">
+                            <button class="transform-button" @click="sentenceToGibberish"><i class="fas fa-hammer"></i> Generate Gibberish</button>
+                        </div>
+                        <div class="output-container" v-if="gibberishOutput.length">
+                            <div class="token-tiles fuzzer-list" style="display:flex; flex-direction:column; gap:8px;">
+                                Gibberized Output:
+                                <div v-if="gibberishOutput" class="token-chip" style="display:flex; align-items:center; gap:8px;">
+                                    <textarea :value="gibberishOutput" readonly style="flex:1; min-height:46px;"></textarea>
+                                    <button class="copy-button" @click="copyToClipboard(gibberishOutput)" title="Copy"><i class="fas fa-copy"></i></button>
+                                </div>
+                                Gibberish Dictionary:
+                                <div v-if="gibberishDictionary" class="token-chip" style="display:flex; align-items:center; gap:8px;">
+                                    <textarea :value="gibberishDictionary" readonly style="flex:1; min-height:46px;"></textarea>
+                                    <button class="copy-button" @click="copyToClipboard(gibberishDictionary)" title="Copy"><i class="fas fa-copy"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Removal Mode -->
+                    <div v-if="gibberishMode === 'removal'" class="transform-section">
+                        <div class="section-header">
+                            <h3><i class="fas fa-list"></i> Gibberish by Removal <small>Gibberish via character removal</small></h3>
+                        </div>
+                        
+                        <!-- Sub-mode selector -->
+                        <div class="tab-buttons" style="margin-bottom: 20px; font-size: 0.9em;">
+                            <button 
+                                :class="{ active: removalSubMode === 'random' }" 
+                                @click="removalSubMode = 'random'"
+                                title="Remove random number of letters from each word"
+                            >
+                                <i class="fas fa-random"></i> Random Removal
+                            </button>
+                            <button 
+                                :class="{ active: removalSubMode === 'specific' }" 
+                                @click="removalSubMode = 'specific'"
+                                title="Remove specific characters from input"
+                            >
+                                <i class="fas fa-filter"></i> Specific Character Removal
+                            </button>
+                        </div>
+
+                        <!-- Random Removal Mode -->
+                        <div v-if="removalSubMode === 'random'">
+                            <div style="display: flex; flex-direction: column; gap: 16px;">
+                                <label>
+                                    Input text:
+                                    <textarea v-model="removalInput" placeholder="Enter text to remove characters from..." rows="3"></textarea>
+                                </label>
+                                <label>
+                                    Number of variations:
+                                    <input type="number" v-model.number="removalVariations" min="1" max="50" placeholder="e.g., 10" />
+                                </label>
+                                <label>
+                                    Min letters to remove per word:
+                                    <input type="number" v-model.number="removalMinLetters" min="0" max="10" placeholder="e.g., 1" />
+                                </label>
+                                <label>
+                                    Max letters to remove per word:
+                                    <input type="number" v-model.number="removalMaxLetters" min="0" max="10" placeholder="e.g., 3" />
+                                </label>
+                                <label>
+                                    Seed (optional):
+                                    <input type="text" v-model="removalSeed" placeholder="e.g., 42" />
+                                </label>
+                                <label></label>
+                            </div>
+                            <div class="token-bomb-actions mutation-actions">
+                                <button class="transform-button" @click="generateRandomRemovals">
+                                    <i class="fas fa-hammer"></i> Generate Variations
+                                </button>
+                                <button class="action-button copy" v-if="removalOutputs.length" @click="copyAllRemovals">
+                                    <i class="fas fa-copy"></i> Copy All
+                                </button>
+                            </div>
+                            <div class="output-container" v-if="removalOutputs.length">
+                                <div class="token-tiles fuzzer-list" style="display:flex; flex-direction:column; gap:8px;">
+                                    <div v-for="(out, i) in removalOutputs" :key="'removal-'+i" class="token-chip" style="display:flex; align-items:center; gap:8px;">
+                                        <span style="opacity:.7; min-width:32px;">#{{ i+1 }}</span>
+                                        <textarea :value="out" readonly style="flex:1; min-height:46px;"></textarea>
+                                        <button class="copy-button" @click="copyToClipboard(out)" title="Copy">
+                                            <i class="fas fa-copy"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Specific Character Removal Mode -->
+                        <div v-if="removalSubMode === 'specific'">
+                            <div class="options-grid">
+                                <label>
+                                    Input text:
+                                    <textarea v-model="removalSpecificInput" placeholder="Enter text to remove characters from..." rows="3"></textarea>
+                                </label>
+                                <label>
+                                    Characters to remove:
+                                    <input type="text" v-model="removalCharsToRemove" placeholder="e.g., aeiou" />
+                                    <small>Enter characters you want to remove from the input</small>
+                                </label>
+                            </div>
+                            <div class="token-bomb-actions mutation-actions">
+                                <button class="transform-button" @click="generateSpecificRemoval">
+                                    <i class="fas fa-hammer"></i> Remove Characters
+                                </button>
+                            </div>
+                            <div class="output-container" v-if="removalSpecificOutput">
+                                <div class="token-tiles fuzzer-list" style="display:flex; flex-direction:column; gap:8px;">
+                                    <div class="token-chip" style="display:flex; align-items:center; gap:8px;">
+                                        <textarea :value="removalSpecificOutput" readonly style="flex:1; min-height:46px;"></textarea>
+                                        <button class="copy-button" @click="copyToClipboard(removalSpecificOutput)" title="Copy">
+                                            <i class="fas fa-copy"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Tokenizer Visualization Tab -->
             <div v-if="activeTab === 'tokenizer'" class="tab-content">
                 <div class="transform-layout">

js/app.js

@@ -95,6 +95,27 @@ window.app = new Vue({
         fuzzEncodeShuffle: false,
         fuzzerOutputs: [],
 
+        // Gibberish Dictionary
+        gibberishInput: '',
+        gibberishOutput: '',
+        gibberishSeed: '',
+        gibberishDictionary: '',
+        gibberishChars: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+        gibberishMode: 'random',
+
+        // Removal mode properties
+        removalSubMode: 'random',
+        removalInput: '',
+        removalVariations: 10,
+        removalMinLetters: 1,
+        removalMaxLetters: 3,
+        removalSeed: '',
+        removalOutputs: [],
+        
+        removalSpecificInput: '',
+        removalCharsToRemove: '',
+        removalSpecificOutput: '',
+
         // History of copied content
         copyHistory: [],
         maxHistoryItems: 10,
@@ -2141,6 +2162,156 @@ window.app = new Vue({
             this.textPayload = out;
             this.showNotification('<i class="fas fa-bomb"></i> Text payload generated', 'success');
         },
+
+        // Gibberish Logic
+        seededRandom(seed) {
+            const x = Math.sin(seed) * 10000;
+            return x - Math.floor(x);
+        },
+
+        sentenceToGibberish() {
+        function generateGibberish(word, seed) {
+            const length = Math.max(4, word.length);
+            let gibberish = "";
+            const chars = this.gibberishChars;
+
+            for (let i = 0; i < length; i++) {
+            const randomValue = this.seededRandom(seed + i * 0.1);
+            gibberish += chars[Math.floor(randomValue * chars.length)];
+            }
+            return gibberish;
+        }
+        const src = String(this.gibberishInput || '');
+        if (!src) { this.gibberishOutput = ''; return; }
+
+        const words = this.gibberishInput.match(/\b\w+\b/g) || [];
+        const dictionary = {};
+        let gibberishSentence = "";
+        let wordIndex = 0;
+
+        words.forEach((word) => {
+            const lowerWord = word.toLowerCase();
+            const seed =
+            this.gibberishSeed === ""
+                ? Math.random() * 100
+                : Number(this.gibberishSeed);
+
+            if (!dictionary[lowerWord]) {
+            const wordSeed = seed + wordIndex * 100;
+            dictionary[lowerWord] = generateGibberish.call(this, word, wordSeed);
+            wordIndex++;
+            }
+        });
+
+        let charIndex = 0;
+        for (let i = 0; i < this.gibberishInput.length; i++) {
+            const char = this.gibberishInput[i];
+
+            if (/\w/.test(char)) {
+            let j = i;
+            while (
+                j < this.gibberishInput.length &&
+                /\w/.test(this.gibberishInput[j])
+            ) {
+                j++;
+            }
+
+            const word = this.gibberishInput.substring(i, j).toLowerCase();
+            gibberishSentence += dictionary[word];
+            i = j - 1;
+            } else {
+            gibberishSentence += char;
+            }
+        }
+
+        const dictionaryString = Object.entries(dictionary)
+            .map(([plain, gib]) => `"${plain}": "${gib}"`)
+            .join(", ");
+
+        this.gibberishOutput = gibberishSentence;
+        this.gibberishDictionary = '{' + dictionaryString + '}';
+        },
+
+        
+        generateRandomRemovals() {
+            if (!this.removalInput.trim()) {
+                this.showNotification('Please enter text to process', 'error');
+                return;
+            }
+            
+            const seed = this.removalSeed ? String(this.removalSeed) : String(Date.now());
+            let rng = this.seededRandomFactory(seed);
+            
+            this.removalOutputs = [];
+            const words = this.removalInput.split(/\s+/);
+            
+            for (let v = 0; v < this.removalVariations; v++) {
+                const modifiedWords = words.map(word => {
+                    // Skip very short words or non-alphabetic
+                    if (word.length <= 1 || !/[a-zA-Z]/.test(word)) {
+                        return word;
+                    }
+                    
+                    // Determine how many letters to remove for this word
+                    const minRemove = Math.max(0, this.removalMinLetters);
+                    const maxRemove = Math.min(word.length - 1, this.removalMaxLetters);
+                    const numToRemove = minRemove + Math.floor(rng() * (maxRemove - minRemove + 1));
+                    
+                    if (numToRemove === 0) {
+                        return word;
+                    }
+                    
+                    // Get letter positions
+                    const letters = word.split('').map((c, i) => ({ char: c, index: i }))
+                        .filter(item => /[a-zA-Z]/.test(item.char));
+                    
+                    // Randomly select positions to remove
+                    const toRemoveIndices = new Set();
+                    const maxAttempts = numToRemove * 3;
+                    let attempts = 0;
+                    
+                    while (toRemoveIndices.size < Math.min(numToRemove, letters.length) && attempts < maxAttempts) {
+                        const randIdx = Math.floor(rng() * letters.length);
+                        toRemoveIndices.add(letters[randIdx].index);
+                        attempts++;
+                    }
+                    
+                    // Build result by skipping removed indices
+                    return word.split('').filter((_, i) => !toRemoveIndices.has(i)).join('');
+                });
+                
+                this.removalOutputs.push(modifiedWords.join(' '));
+            }
+            
+            this.showNotification(`Generated ${this.removalOutputs.length} variations`, 'success');
+        },
+        
+        
+        generateSpecificRemoval() {
+            if (!this.removalSpecificInput.trim()) {
+                this.showNotification('Please enter text to process', 'error');
+                return;
+            }
+            
+            if (!this.removalCharsToRemove) {
+                this.showNotification('Please specify characters to remove', 'error');
+                return;
+            }
+            
+            const charsToRemove = new Set(this.removalCharsToRemove.split(''));
+            this.removalSpecificOutput = this.removalSpecificInput
+                .split('')
+                .filter(char => !charsToRemove.has(char))
+                .join('');
+            
+            this.showNotification('Characters removed', 'success');
+        },
+        
+        // Copy all removal outputs
+        copyAllRemovals() {
+            const allText = this.removalOutputs.join('\n');
+            this.copyToClipboard(allText);
+        },
         
         // Set up paste event handlers for all textareas
         setupPasteHandlers() {