Add per-channel hybrid audio spread spectrum and env feature toggles
Spread spectrum v2: independent per-channel embedding with round-robin bit distribution, preserving spatial stereo/surround mix. Adaptive chip tiers (256/512/1024) trade capacity for lossy codec robustness. LFE channel skipped for 5.1+ layouts. v2 header (20B) with backward- compatible v0 decode fallback. Environment toggles (STEGASOO_AUDIO, STEGASOO_VIDEO) gate audio/video features for minimal builds (e.g. Raspberry Pi image-only). Values: auto (default, detect deps), 1/true (force on), 0/false (force off). Web UI fixes: accordion defaults to step 1 on load, chevron arrow styling, required attribute toggling for audio carrier type switch, "Images & Mode" renamed to "Reference, Carrier, Mode". Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
@@ -24,7 +24,11 @@
|
||||
border-left: 3px solid #ffe699;
|
||||
}
|
||||
.step-accordion .accordion-button::after {
|
||||
filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.2);
|
||||
filter: brightness(0) invert(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.step-accordion .accordion-button:not(.collapsed)::after {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.step-accordion .accordion-body {
|
||||
background: rgba(30, 40, 50, 0.4);
|
||||
@@ -172,19 +176,51 @@
|
||||
<div class="accordion step-accordion" id="decodeAccordion">
|
||||
|
||||
<!-- ================================================================
|
||||
STEP 1: IMAGES & MODE
|
||||
STEP 1: CARRIER TYPE (v4.3.0)
|
||||
================================================================ -->
|
||||
<div class="accordion-item" id="carrierTypeStep">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#stepCarrierType">
|
||||
<span class="step-title">
|
||||
<span class="step-number" id="stepCarrierTypeNumber">1</span>
|
||||
<i class="bi bi-collection me-1"></i> Carrier Type
|
||||
</span>
|
||||
<span class="step-summary" id="stepCarrierTypeSummary"></span>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="stepCarrierType" class="accordion-collapse collapse show" data-bs-parent="#decodeAccordion">
|
||||
<div class="accordion-body">
|
||||
<input type="hidden" name="carrier_type" id="carrierTypeInput" value="image">
|
||||
<div class="btn-group w-100" role="group">
|
||||
<input type="radio" class="btn-check" name="carrier_type_select" id="typeImage" value="image" checked>
|
||||
<label class="btn btn-outline-secondary" for="typeImage">
|
||||
<i class="bi bi-image me-1"></i> Image
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="carrier_type_select" id="typeAudio" value="audio"
|
||||
{% if not has_audio %}disabled{% endif %}>
|
||||
<label class="btn btn-outline-secondary {% if not has_audio %}disabled text-muted{% endif %}" for="typeAudio">
|
||||
<i class="bi bi-music-note-beamed me-1"></i> Audio
|
||||
{% if not has_audio %}<small class="d-block" style="font-size: 0.65rem;">(not available)</small>{% endif %}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================================
|
||||
STEP 2: IMAGES & MODE
|
||||
================================================================ -->
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#stepImages">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stepImages">
|
||||
<span class="step-title">
|
||||
<span class="step-number" id="stepImagesNumber">1</span>
|
||||
<i class="bi bi-images me-1"></i> Images & Mode
|
||||
<span class="step-number" id="stepImagesNumber">2</span>
|
||||
<i class="bi bi-images me-1"></i> Reference, Carrier, Mode
|
||||
</span>
|
||||
<span class="step-summary" id="stepImagesSummary">Select reference & stego</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="stepImages" class="accordion-collapse collapse show" data-bs-parent="#decodeAccordion">
|
||||
<div id="stepImages" class="accordion-collapse collapse" data-bs-parent="#decodeAccordion">
|
||||
<div class="accordion-body">
|
||||
|
||||
<div class="row">
|
||||
@@ -213,41 +249,74 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-file-earmark-image me-1"></i> Stego Image
|
||||
</label>
|
||||
<div class="drop-zone pixel-container" id="stegoDropZone">
|
||||
<input type="file" name="stego_image" accept="image/*" required id="stegoInput">
|
||||
<div class="drop-zone-label">
|
||||
<i class="bi bi-cloud-arrow-up fs-3 d-block mb-2 text-muted"></i>
|
||||
<span class="text-muted">Drop image or click</span>
|
||||
</div>
|
||||
<img class="drop-zone-preview d-none" id="stegoPreview">
|
||||
<div class="pixel-blocks"></div>
|
||||
<div class="pixel-scan-line"></div>
|
||||
<div class="pixel-corners">
|
||||
<div class="pixel-corner tl"></div><div class="pixel-corner tr"></div>
|
||||
<div class="pixel-corner bl"></div><div class="pixel-corner br"></div>
|
||||
</div>
|
||||
<div class="pixel-data-panel">
|
||||
<div class="pixel-data-filename"><i class="bi bi-check-circle-fill"></i><span id="stegoFileName">image.png</span></div>
|
||||
<div class="pixel-data-row"><span class="pixel-status-badge">Stego Loaded</span><span class="pixel-data-value" id="stegoFileSize">--</span></div>
|
||||
<div class="pixel-dimensions" id="stegoDims">-- x -- px</div>
|
||||
<div id="imageStegoSection">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-file-earmark-image me-1"></i> Stego Image
|
||||
</label>
|
||||
<div class="drop-zone pixel-container" id="stegoDropZone">
|
||||
<input type="file" name="stego_image" accept="image/*" required id="stegoInput">
|
||||
<div class="drop-zone-label">
|
||||
<i class="bi bi-cloud-arrow-up fs-3 d-block mb-2 text-muted"></i>
|
||||
<span class="text-muted">Drop image or click</span>
|
||||
</div>
|
||||
<img class="drop-zone-preview d-none" id="stegoPreview">
|
||||
<div class="pixel-blocks"></div>
|
||||
<div class="pixel-scan-line"></div>
|
||||
<div class="pixel-corners">
|
||||
<div class="pixel-corner tl"></div><div class="pixel-corner tr"></div>
|
||||
<div class="pixel-corner bl"></div><div class="pixel-corner br"></div>
|
||||
</div>
|
||||
<div class="pixel-data-panel">
|
||||
<div class="pixel-data-filename"><i class="bi bi-check-circle-fill"></i><span id="stegoFileName">image.png</span></div>
|
||||
<div class="pixel-data-row"><span class="pixel-status-badge">Stego Loaded</span><span class="pixel-data-value" id="stegoFileSize">--</span></div>
|
||||
<div class="pixel-dimensions" id="stegoDims">-- x -- px</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-text">Image containing the hidden message</div>
|
||||
</div>
|
||||
<!-- Audio Stego (hidden by default) -->
|
||||
<div class="d-none" id="audioStegoSection">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-file-earmark-music me-1"></i> Stego Audio
|
||||
</label>
|
||||
<div class="drop-zone pixel-container" id="audioStegoDropZone">
|
||||
<input type="file" name="stego_image" accept="audio/*" id="audioStegoInput">
|
||||
<div class="drop-zone-label">
|
||||
<i class="bi bi-music-note-beamed fs-3 d-block mb-2 text-muted"></i>
|
||||
<span class="text-muted">Drop audio or click</span>
|
||||
</div>
|
||||
<div class="pixel-data-panel">
|
||||
<div class="pixel-data-filename"><i class="bi bi-check-circle-fill"></i><span id="audioStegoFileName">audio.wav</span></div>
|
||||
<div class="pixel-data-row"><span class="pixel-status-badge">Audio Loaded</span><span class="pixel-data-value" id="audioStegoFileSize">--</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-text">Audio file containing the hidden message</div>
|
||||
</div>
|
||||
<div class="form-text">Image containing the hidden message</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Extraction Mode -->
|
||||
<div class="d-flex gap-2 align-items-center flex-wrap mb-2">
|
||||
<div class="btn-group" role="group">
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeAuto" value="auto" checked>
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeAuto"><i class="bi bi-magic me-1"></i>Auto</label>
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeLsb" value="lsb">
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeLsb"><i class="bi bi-grid-3x3-gap me-1"></i>LSB</label>
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeDct" value="dct" {% if not has_dct %}disabled{% endif %}>
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeDct" id="dctModeLabel"><i class="bi bi-soundwave me-1"></i>DCT</label>
|
||||
<div id="imageModeGroup">
|
||||
<div class="btn-group" role="group">
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeAuto" value="auto" checked>
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeAuto"><i class="bi bi-magic me-1"></i>Auto</label>
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeLsb" value="lsb">
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeLsb"><i class="bi bi-grid-3x3-gap me-1"></i>LSB</label>
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeDct" value="dct" {% if not has_dct %}disabled{% endif %}>
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeDct" id="dctModeLabel"><i class="bi bi-soundwave me-1"></i>DCT</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Audio Extraction Modes (hidden by default) -->
|
||||
<div class="d-none" id="audioModeGroup">
|
||||
<div class="btn-group" role="group">
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeAudioAuto" value="audio_auto">
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeAudioAuto"><i class="bi bi-magic me-1"></i>Auto</label>
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeAudioLsb" value="audio_lsb">
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeAudioLsb"><i class="bi bi-grid-3x3-gap me-1"></i>LSB</label>
|
||||
<input type="radio" class="btn-check" name="embed_mode" id="modeAudioSpread" value="audio_spread">
|
||||
<label class="btn btn-outline-secondary text-nowrap" for="modeAudioSpread"><i class="bi bi-broadcast me-1"></i>Spread</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-text" id="modeHint">
|
||||
@@ -259,13 +328,13 @@
|
||||
</div>
|
||||
|
||||
<!-- ================================================================
|
||||
STEP 2: SECURITY
|
||||
STEP 3: SECURITY
|
||||
================================================================ -->
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#stepSecurity">
|
||||
<span class="step-title">
|
||||
<span class="step-number" id="stepSecurityNumber">2</span>
|
||||
<span class="step-number" id="stepSecurityNumber">3</span>
|
||||
<i class="bi bi-shield-lock me-1"></i> Security
|
||||
</span>
|
||||
<span class="step-summary" id="stepSecuritySummary">Passphrase & keys</span>
|
||||
@@ -425,7 +494,10 @@
|
||||
const modeHints = {
|
||||
auto: { icon: 'lightning', text: 'Tries LSB first, then DCT' },
|
||||
lsb: { icon: 'hdd', text: 'For email and direct transfers' },
|
||||
dct: { icon: 'phone', text: 'For social media images' }
|
||||
dct: { icon: 'phone', text: 'For social media images' },
|
||||
audio_auto: { icon: 'lightning', text: 'Tries LSB first, then Spread Spectrum' },
|
||||
audio_lsb: { icon: 'grid-3x3-gap', text: 'Direct bit embedding in audio samples' },
|
||||
audio_spread: { icon: 'broadcast', text: 'Noise-resistant spread spectrum encoding' }
|
||||
};
|
||||
|
||||
document.querySelectorAll('input[name="embed_mode"]').forEach(radio => {
|
||||
@@ -442,9 +514,14 @@ document.querySelectorAll('input[name="embed_mode"]').forEach(radio => {
|
||||
// ACCORDION SUMMARY UPDATES
|
||||
// ============================================================================
|
||||
|
||||
const carrierTypeInput = document.getElementById('carrierTypeInput');
|
||||
|
||||
function updateImagesSummary() {
|
||||
const ref = document.getElementById('refPhotoInput')?.files[0];
|
||||
const stego = document.getElementById('stegoInput')?.files[0];
|
||||
const isAudio = carrierTypeInput?.value === 'audio';
|
||||
const stego = isAudio
|
||||
? document.getElementById('audioStegoInput')?.files[0]
|
||||
: document.getElementById('stegoInput')?.files[0];
|
||||
const mode = document.querySelector('input[name="embed_mode"]:checked')?.value?.toUpperCase() || 'AUTO';
|
||||
const summary = document.getElementById('stepImagesSummary');
|
||||
const stepNum = document.getElementById('stepImagesNumber');
|
||||
@@ -460,12 +537,12 @@ function updateImagesSummary() {
|
||||
summary.textContent = ref ? ref.name.slice(0, 15) : stego.name.slice(0, 15);
|
||||
summary.classList.remove('has-content');
|
||||
stepNum.classList.remove('complete');
|
||||
stepNum.textContent = '1';
|
||||
stepNum.textContent = '2';
|
||||
} else {
|
||||
summary.textContent = 'Select reference & stego';
|
||||
summary.textContent = isAudio ? 'Select reference & audio' : 'Select reference & stego';
|
||||
summary.classList.remove('has-content');
|
||||
stepNum.classList.remove('complete');
|
||||
stepNum.textContent = '1';
|
||||
stepNum.textContent = '2';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -493,19 +570,99 @@ function updateSecuritySummary() {
|
||||
summary.textContent = 'Passphrase & keys';
|
||||
summary.classList.remove('has-content');
|
||||
stepNum.classList.remove('complete');
|
||||
stepNum.textContent = '2';
|
||||
stepNum.textContent = '3';
|
||||
}
|
||||
}
|
||||
|
||||
// Attach listeners
|
||||
document.getElementById('refPhotoInput')?.addEventListener('change', updateImagesSummary);
|
||||
document.getElementById('stegoInput')?.addEventListener('change', updateImagesSummary);
|
||||
document.getElementById('audioStegoInput')?.addEventListener('change', updateImagesSummary);
|
||||
document.querySelectorAll('input[name="embed_mode"]').forEach(r => r.addEventListener('change', updateImagesSummary));
|
||||
document.querySelectorAll('#audioModeGroup input[name="embed_mode"]').forEach(r => r.addEventListener('change', updateImagesSummary));
|
||||
|
||||
document.getElementById('passphraseInput')?.addEventListener('input', updateSecuritySummary);
|
||||
document.getElementById('pinInput')?.addEventListener('input', updateSecuritySummary);
|
||||
document.querySelector('input[name="rsa_key"]')?.addEventListener('change', updateSecuritySummary);
|
||||
|
||||
// ============================================================================
|
||||
// CARRIER TYPE TOGGLE (v4.3.0)
|
||||
// ============================================================================
|
||||
|
||||
const carrierTypeRadios = document.querySelectorAll('input[name="carrier_type_select"]');
|
||||
const imageStegoSection = document.getElementById('imageStegoSection');
|
||||
const audioStegoSection = document.getElementById('audioStegoSection');
|
||||
const imageModeGroup = document.getElementById('imageModeGroup');
|
||||
const audioModeGroup = document.getElementById('audioModeGroup');
|
||||
const stepCarrierTypeSummary = document.getElementById('stepCarrierTypeSummary');
|
||||
|
||||
carrierTypeRadios.forEach(radio => {
|
||||
radio.addEventListener('change', function() {
|
||||
const isAudio = this.value === 'audio';
|
||||
carrierTypeInput.value = this.value;
|
||||
|
||||
// Toggle stego sections
|
||||
if (imageStegoSection) imageStegoSection.classList.toggle('d-none', isAudio);
|
||||
if (audioStegoSection) audioStegoSection.classList.toggle('d-none', !isAudio);
|
||||
|
||||
// Toggle required attribute so hidden inputs don't block form submission
|
||||
const imgStego = document.getElementById('stegoInput');
|
||||
const audStego = document.getElementById('audioStegoInput');
|
||||
if (imgStego) { if (isAudio) imgStego.removeAttribute('required'); else imgStego.setAttribute('required', ''); }
|
||||
if (audStego) { if (isAudio) audStego.setAttribute('required', ''); else audStego.removeAttribute('required'); }
|
||||
|
||||
// Toggle mode groups
|
||||
if (imageModeGroup) imageModeGroup.classList.toggle('d-none', isAudio);
|
||||
if (audioModeGroup) audioModeGroup.classList.toggle('d-none', !isAudio);
|
||||
|
||||
// Update summary
|
||||
if (stepCarrierTypeSummary) {
|
||||
stepCarrierTypeSummary.textContent = isAudio ? 'Audio' : 'Image';
|
||||
}
|
||||
|
||||
// Select default mode
|
||||
if (isAudio) {
|
||||
const audioAuto = document.getElementById('modeAudioAuto');
|
||||
if (audioAuto) audioAuto.checked = true;
|
||||
} else {
|
||||
const autoMode = document.getElementById('modeAuto');
|
||||
if (autoMode) autoMode.checked = true;
|
||||
}
|
||||
|
||||
// Clear stego file selections
|
||||
const stegoInput = document.getElementById('stegoInput');
|
||||
const audioStegoInput = document.getElementById('audioStegoInput');
|
||||
if (stegoInput) stegoInput.value = '';
|
||||
if (audioStegoInput) audioStegoInput.value = '';
|
||||
|
||||
// Reset previews
|
||||
document.getElementById('stegoPreview')?.classList.add('d-none');
|
||||
|
||||
// Update mode hint
|
||||
const hint = document.getElementById('modeHint');
|
||||
if (hint) {
|
||||
if (isAudio) {
|
||||
hint.innerHTML = '<i class="bi bi-lightning me-1"></i>Tries LSB first, then Spread Spectrum';
|
||||
} else {
|
||||
hint.innerHTML = '<i class="bi bi-lightning me-1"></i>Tries LSB first, then DCT';
|
||||
}
|
||||
}
|
||||
|
||||
updateImagesSummary();
|
||||
});
|
||||
});
|
||||
|
||||
// Audio stego file info display
|
||||
const audioStegoInput = document.getElementById('audioStegoInput');
|
||||
audioStegoInput?.addEventListener('change', function() {
|
||||
if (this.files && this.files[0]) {
|
||||
const file = this.files[0];
|
||||
document.getElementById('audioStegoFileName').textContent = file.name;
|
||||
document.getElementById('audioStegoFileSize').textContent = (file.size / 1024).toFixed(1) + ' KB';
|
||||
updateImagesSummary();
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// MODE SWITCHING
|
||||
// ============================================================================
|
||||
|
||||
Reference in New Issue
Block a user