Spaces:

talibanta
/

myspace

Running

App Files Files Community

talibanta commited on May 18, 2025

Commit

be8b7f7

verified ·

1 Parent(s): 32bdcda

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +654 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Myspace
-emoji: 📚
-colorFrom: yellow
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: myspace
+emoji: 🐳
+colorFrom: purple
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,654 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AM & FM Modulation Visualizer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .wave-container {
+            position: relative;
+            height: 200px;
+            overflow: hidden;
+            background-color: #1a202c;
+            border-radius: 0.5rem;
+        }
+        .wave {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .slider-container {
+            position: relative;
+            height: 10px;
+            background-color: #e2e8f0;
+            border-radius: 5px;
+            margin: 20px 0;
+        }
+        .slider-track {
+            position: absolute;
+            height: 100%;
+            background-color: #4299e1;
+            border-radius: 5px;
+        }
+        .slider-thumb {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background-color: #3182ce;
+            border-radius: 50%;
+            top: -5px;
+            transform: translateX(-50%);
+            cursor: pointer;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .modulation-diagram {
+            width: 100%;
+            height: 300px;
+            background-color: #f7fafc;
+            border-radius: 0.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">Radio Modulation Visualizer</h1>
+            <p class="text-xl text-gray-600">Explore AM and FM modulation through interactive illustrations</p>
+        </header>
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
+            <div class="flex border-b border-gray-200">
+                <button class="tab-btn flex-1 py-4 px-6 text-center font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition-all duration-300 active" data-tab="am">
+                    <i class="fas fa-wave-square mr-2"></i> Amplitude Modulation (AM)
+                </button>
+                <button class="tab-btn flex-1 py-4 px-6 text-center font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition-all duration-300" data-tab="fm">
+                    <i class="fas fa-satellite-dish mr-2"></i> Frequency Modulation (FM)
+                </button>
+            </div>
+            <div id="am" class="tab-content active p-6">
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <h3 class="text-xl font-semibold mb-4 text-gray-700">AM Modulation Process</h3>
+                        <p class="text-gray-600 mb-6">
+                            Amplitude Modulation varies the strength (amplitude) of the carrier wave in proportion to the waveform being transmitted.
+                            The frequency remains constant while the amplitude changes.
+                        </p>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2">Message Frequency: <span id="am-message-freq-value">1</span> Hz</label>
+                            <div class="slider-container" id="am-message-freq-slider">
+                                <div class="slider-track" style="width: 20%"></div>
+                                <div class="slider-thumb" style="left: 20%"></div>
+                            </div>
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2">Carrier Frequency: <span id="am-carrier-freq-value">10</span> Hz</label>
+                            <div class="slider-container" id="am-carrier-freq-slider">
+                                <div class="slider-track" style="width: 50%"></div>
+                                <div class="slider-thumb" style="left: 50%"></div>
+                            </div>
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2">Modulation Index: <span id="am-mod-index-value">0.5</span></label>
+                            <div class="slider-container" id="am-mod-index-slider">
+                                <div class="slider-track" style="width: 25%"></div>
+                                <div class="slider-thumb" style="left: 25%"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="wave-container mb-4">
+                            <canvas id="am-message-wave" class="wave"></canvas>
+                        </div>
+                        <p class="text-center text-gray-600 mb-2">Message Signal</p>
+                        <div class="wave-container mb-4">
+                            <canvas id="am-carrier-wave" class="wave"></canvas>
+                        </div>
+                        <p class="text-center text-gray-600 mb-2">Carrier Signal</p>
+                        <div class="wave-container mb-4">
+                            <canvas id="am-modulated-wave" class="wave"></canvas>
+                        </div>
+                        <p class="text-center text-gray-600">Modulated Signal</p>
+                    </div>
+                </div>
+                <div class="mt-8">
+                    <h3 class="text-xl font-semibold mb-4 text-gray-700">AM Modulation Diagram</h3>
+                    <div class="modulation-diagram" id="am-diagram">
+                        <canvas id="am-diagram-canvas"></canvas>
+                    </div>
+                </div>
+            </div>
+            <div id="fm" class="tab-content p-6">
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <h3 class="text-xl font-semibold mb-4 text-gray-700">FM Modulation Process</h3>
+                        <p class="text-gray-600 mb-6">
+                            Frequency Modulation varies the frequency of the carrier wave in proportion to the waveform being transmitted.
+                            The amplitude remains constant while the frequency changes.
+                        </p>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2">Message Frequency: <span id="fm-message-freq-value">1</span> Hz</label>
+                            <div class="slider-container" id="fm-message-freq-slider">
+                                <div class="slider-track" style="width: 20%"></div>
+                                <div class="slider-thumb" style="left: 20%"></div>
+                            </div>
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2">Carrier Frequency: <span id="fm-carrier-freq-value">10</span> Hz</label>
+                            <div class="slider-container" id="fm-carrier-freq-slider">
+                                <div class="slider-track" style="width: 50%"></div>
+                                <div class="slider-thumb" style="left: 50%"></div>
+                            </div>
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2">Frequency Deviation: <span id="fm-dev-value">2</span> Hz</label>
+                            <div class="slider-container" id="fm-dev-slider">
+                                <div class="slider-track" style="width: 20%"></div>
+                                <div class="slider-thumb" style="left: 20%"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="wave-container mb-4">
+                            <canvas id="fm-message-wave" class="wave"></canvas>
+                        </div>
+                        <p class="text-center text-gray-600 mb-2">Message Signal</p>
+                        <div class="wave-container mb-4">
+                            <canvas id="fm-carrier-wave" class="wave"></canvas>
+                        </div>
+                        <p class="text-center text-gray-600 mb-2">Carrier Signal</p>
+                        <div class="wave-container mb-4">
+                            <canvas id="fm-modulated-wave" class="wave"></canvas>
+                        </div>
+                        <p class="text-center text-gray-600">Modulated Signal</p>
+                    </div>
+                </div>
+                <div class="mt-8">
+                    <h3 class="text-xl font-semibold mb-4 text-gray-700">FM Modulation Diagram</h3>
+                    <div class="modulation-diagram" id="fm-diagram">
+                        <canvas id="fm-diagram-canvas"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-xl shadow-lg p-6 mt-8">
+            <h2 class="text-2xl font-bold text-gray-800 mb-4">Key Differences</h2>
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="bg-blue-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold text-blue-800 mb-2"><i class="fas fa-wave-square mr-2"></i> AM (Amplitude Modulation)</h3>
+                    <ul class="text-gray-700 space-y-2">
+                        <li><i class="fas fa-arrow-up mr-2 text-blue-600"></i> Varies amplitude of carrier wave</li>
+                        <li><i class="fas fa-waveform mr-2 text-blue-600"></i> More susceptible to noise and interference</li>
+                        <li><i class="fas fa-broadcast-tower mr-2 text-blue-600"></i> Simpler transmitter and receiver design</li>
+                        <li><i class="fas fa-ruler-combined mr-2 text-blue-600"></i> Bandwidth = 2 × message frequency</li>
+                        <li><i class="fas fa-radio mr-2 text-blue-600"></i> Used in AM radio broadcasting (535-1705 kHz)</li>
+                    </ul>
+                </div>
+                <div class="bg-purple-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold text-purple-800 mb-2"><i class="fas fa-satellite-dish mr-2"></i> FM (Frequency Modulation)</h3>
+                    <ul class="text-gray-700 space-y-2">
+                        <li><i class="fas fa-sync-alt mr-2 text-purple-600"></i> Varies frequency of carrier wave</li>
+                        <li><i class="fas fa-shield-alt mr-2 text-purple-600"></i> More resistant to noise and interference</li>
+                        <li><i class="fas fa-microchip mr-2 text-purple-600"></i> More complex circuitry required</li>
+                        <li><i class="fas fa-ruler-combined mr-2 text-purple-600"></i> Bandwidth = 2 × (frequency deviation + message frequency)</li>
+                        <li><i class="fas fa-music mr-2 text-purple-600"></i> Used in FM radio broadcasting (88-108 MHz)</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Tab switching functionality
+        document.querySelectorAll('.tab-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                // Remove active class from all tabs and buttons
+                document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+                document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+                // Add active class to clicked tab and button
+                btn.classList.add('active');
+                const tabId = btn.getAttribute('data-tab');
+                document.getElementById(tabId).classList.add('active');
+                // Redraw charts when switching tabs
+                if (tabId === 'am') {
+                    drawAMCharts();
+                } else {
+                    drawFMCharts();
+                }
+            });
+        });
+        // Slider functionality
+        function createSlider(sliderId, valueId, min, max, step, initialValue, callback) {
+            const slider = document.getElementById(sliderId);
+            const thumb = slider.querySelector('.slider-thumb');
+            const track = slider.querySelector('.slider-track');
+            const valueDisplay = document.getElementById(valueId);
+            let isDragging = false;
+            // Set initial value
+            let value = initialValue;
+            updateSliderPosition();
+            function updateSliderPosition() {
+                const percentage = ((value - min) / (max - min)) * 100;
+                thumb.style.left = `${percentage}%`;
+                track.style.width = `${percentage}%`;
+                valueDisplay.textContent = value.toFixed(step < 1 ? 2 : 0);
+            }
+            function calculateValue(clientX) {
+                const rect = slider.getBoundingClientRect();
+                let percentage = (clientX - rect.left) / rect.width;
+                percentage = Math.max(0, Math.min(1, percentage));
+                const newValue = min + percentage * (max - min);
+                return Math.round(newValue / step) * step;
+            }
+            thumb.addEventListener('mousedown', () => {
+                isDragging = true;
+            });
+            document.addEventListener('mousemove', (e) => {
+                if (!isDragging) return;
+                const newValue = calculateValue(e.clientX);
+                if (newValue !== value) {
+                    value = newValue;
+                    updateSliderPosition();
+                    callback(value);
+                }
+            });
+            document.addEventListener('mouseup', () => {
+                isDragging = false;
+            });
+            slider.addEventListener('click', (e) => {
+                const newValue = calculateValue(e.clientX);
+                if (newValue !== value) {
+                    value = newValue;
+                    updateSliderPosition();
+                    callback(value);
+                }
+            });
+            return {
+                getValue: () => value,
+                setValue: (newValue) => {
+                    value = newValue;
+                    updateSliderPosition();
+                }
+            };
+        }
+        // Wave generation and drawing functions
+        function generateSineWave(frequency, amplitude, phase, sampleRate, duration) {
+            const samples = [];
+            const angularFrequency = 2 * Math.PI * frequency;
+            for (let i = 0; i < sampleRate * duration; i++) {
+                const t = i / sampleRate;
+                samples.push(amplitude * Math.sin(angularFrequency * t + phase));
+            }
+            return samples;
+        }
+        function generateAMWave(messageFreq, carrierFreq, modIndex, sampleRate, duration) {
+            const messageWave = generateSineWave(messageFreq, 1, 0, sampleRate, duration);
+            const carrierWave = generateSineWave(carrierFreq, 1, 0, sampleRate, duration);
+            const modulatedWave = [];
+            for (let i = 0; i < messageWave.length; i++) {
+                const modulation = 1 + modIndex * messageWave[i];
+                modulatedWave.push(modulation * carrierWave[i]);
+            }
+            return {
+                messageWave,
+                carrierWave,
+                modulatedWave
+            };
+        }
+        function generateFMWave(messageFreq, carrierFreq, frequencyDeviation, sampleRate, duration) {
+            const messageWave = generateSineWave(messageFreq, 1, 0, sampleRate, duration);
+            const carrierWave = generateSineWave(carrierFreq, 1, 0, sampleRate, duration);
+            const modulatedWave = [];
+            let phase = 0;
+            for (let i = 0; i < messageWave.length; i++) {
+                const t = i / sampleRate;
+                const instantaneousFrequency = carrierFreq + frequencyDeviation * messageWave[i];
+                phase += 2 * Math.PI * instantaneousFrequency / sampleRate;
+                modulatedWave.push(Math.sin(phase));
+            }
+            return {
+                messageWave,
+                carrierWave,
+                modulatedWave
+            };
+        }
+        function drawWave(canvasId, waveData, color, yScale = 1) {
+            const canvas = document.getElementById(canvasId);
+            const ctx = canvas.getContext('2d');
+            // Set canvas dimensions
+            const container = canvas.parentElement;
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw wave
+            ctx.beginPath();
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 2;
+            const centerY = canvas.height / 2;
+            const amplitude = (canvas.height / 2) * 0.8 * yScale;
+            for (let i = 0; i < waveData.length; i++) {
+                const x = (i / waveData.length) * canvas.width;
+                const y = centerY - waveData[i] * amplitude;
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.stroke();
+        }
+        function drawAMDiagram() {
+            const canvas = document.getElementById('am-diagram-canvas');
+            const ctx = canvas.getContext('2d');
+            const container = document.getElementById('am-diagram');
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw axes
+            ctx.beginPath();
+            ctx.strokeStyle = '#4a5568';
+            ctx.lineWidth = 1;
+            // X axis
+            ctx.moveTo(50, canvas.height / 2);
+            ctx.lineTo(canvas.width - 50, canvas.height / 2);
+            // Y axis
+            ctx.moveTo(canvas.width / 2, 30);
+            ctx.lineTo(canvas.width / 2, canvas.height - 30);
+            ctx.stroke();
+            // Draw labels
+            ctx.font = '14px Arial';
+            ctx.fillStyle = '#4a5568';
+            ctx.textAlign = 'center';
+            ctx.fillText('Time', canvas.width - 30, canvas.height / 2 + 20);
+            ctx.fillText('Amplitude', canvas.width / 2, 20);
+            // Draw modulation diagram
+            const messageFreq = amSliders.messageFreq.getValue();
+            const carrierFreq = amSliders.carrierFreq.getValue();
+            const modIndex = amSliders.modIndex.getValue();
+            const duration = 1;
+            const sampleRate = 1000;
+            const { messageWave, carrierWave, modulatedWave } = generateAMWave(
+                messageFreq, carrierFreq, modIndex, sampleRate, duration
+            );
+            // Draw envelope
+            ctx.beginPath();
+            ctx.strokeStyle = 'rgba(66, 153, 225, 0.5)';
+            ctx.lineWidth = 2;
+            ctx.setLineDash([5, 5]);
+            for (let i = 0; i < modulatedWave.length; i++) {
+                const x = 50 + (i / modulatedWave.length) * (canvas.width - 100);
+                const y = canvas.height / 2 - (1 + modIndex * messageWave[i]) * (canvas.height / 2 - 30) * 0.8;
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            for (let i = 0; i < modulatedWave.length; i++) {
+                const x = 50 + (i / modulatedWave.length) * (canvas.width - 100);
+                const y = canvas.height / 2 - (1 - modIndex * messageWave[i]) * (canvas.height / 2 - 30) * 0.8;
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.stroke();
+            ctx.setLineDash([]);
+            // Draw modulated wave
+            ctx.beginPath();
+            ctx.strokeStyle = '#3182ce';
+            ctx.lineWidth = 2;
+            for (let i = 0; i < modulatedWave.length; i++) {
+                const x = 50 + (i / modulatedWave.length) * (canvas.width - 100);
+                const y = canvas.height / 2 - modulatedWave[i] * (canvas.height / 2 - 30) * 0.8;
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.stroke();
+            // Draw legend
+            ctx.font = '12px Arial';
+            ctx.fillStyle = '#3182ce';
+            ctx.textAlign = 'left';
+            ctx.fillText('Modulated Signal', 60, 30);
+            ctx.fillStyle = 'rgba(66, 153, 225, 0.7)';
+            ctx.fillText('Envelope', 60, 50);
+        }
+        function drawFMDiagram() {
+            const canvas = document.getElementById('fm-diagram-canvas');
+            const ctx = canvas.getContext('2d');
+            const container = document.getElementById('fm-diagram');
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw axes
+            ctx.beginPath();
+            ctx.strokeStyle = '#4a5568';
+            ctx.lineWidth = 1;
+            // X axis
+            ctx.moveTo(50, canvas.height / 2);
+            ctx.lineTo(canvas.width - 50, canvas.height / 2);
+            // Y axis
+            ctx.moveTo(canvas.width / 2, 30);
+            ctx.lineTo(canvas.width / 2, canvas.height - 30);
+            ctx.stroke();
+            // Draw labels
+            ctx.font = '14px Arial';
+            ctx.fillStyle = '#4a5568';
+            ctx.textAlign = 'center';
+            ctx.fillText('Time', canvas.width - 30, canvas.height / 2 + 20);
+            ctx.fillText('Frequency', canvas.width / 2, 20);
+            // Draw modulation diagram
+            const messageFreq = fmSliders.messageFreq.getValue();
+            const carrierFreq = fmSliders.carrierFreq.getValue();
+            const frequencyDeviation = fmSliders.frequencyDev.getValue();
+            const duration = 1;
+            const sampleRate = 1000;
+            const { messageWave, modulatedWave } = generateFMWave(
+                messageFreq, carrierFreq, frequencyDeviation, sampleRate, duration
+            );
+            // Draw frequency variation
+            ctx.beginPath();
+            ctx.strokeStyle = 'rgba(134, 65, 244, 0.5)';
+            ctx.lineWidth = 2;
+            for (let i = 0; i < messageWave.length; i++) {
+                const x = 50 + (i / messageWave.length) * (canvas.width - 100);
+                const frequency = carrierFreq + frequencyDeviation * messageWave[i];
+                const y = canvas.height - 30 - ((frequency - (carrierFreq - frequencyDeviation)) / (2 * frequencyDeviation)) * (canvas.height - 60);
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.stroke();
+            // Draw modulated wave
+            ctx.beginPath();
+            ctx.strokeStyle = '#805ad5';
+            ctx.lineWidth = 2;
+            for (let i = 0; i < modulatedWave.length; i++) {
+                const x = 50 + (i / modulatedWave.length) * (canvas.width - 100);
+                const y = canvas.height / 2 - modulatedWave[i] * (canvas.height / 2 - 30) * 0.8;
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.stroke();
+            // Draw legend
+            ctx.font = '12px Arial';
+            ctx.fillStyle = '#805ad5';
+            ctx.textAlign = 'left';
+            ctx.fillText('Modulated Signal', 60, 30);
+            ctx.fillStyle = 'rgba(134, 65, 244, 0.7)';
+            ctx.fillText('Frequency Variation', 60, 50);
+        }
+        function drawAMCharts() {
+            const messageFreq = amSliders.messageFreq.getValue();
+            const carrierFreq = amSliders.carrierFreq.getValue();
+            const modIndex = amSliders.modIndex.getValue();
+            const { messageWave, carrierWave, modulatedWave } = generateAMWave(
+                messageFreq, carrierFreq, modIndex, 1000, 1
+            );
+            drawWave('am-message-wave', messageWave, '#38a169');
+            drawWave('am-carrier-wave', carrierWave, '#dd6b20');
+            drawWave('am-modulated-wave', modulatedWave, '#3182ce');
+            drawAMDiagram();
+        }
+        function drawFMCharts() {
+            const messageFreq = fmSliders.messageFreq.getValue();
+            const carrierFreq = fmSliders.carrierFreq.getValue();
+            const frequencyDeviation = fmSliders.frequencyDev.getValue();
+            const { messageWave, carrierWave, modulatedWave } = generateFMWave(
+                messageFreq, carrierFreq, frequencyDeviation, 1000, 1
+            );
+            drawWave('fm-message-wave', messageWave, '#38a169');
+            drawWave('fm-carrier-wave', carrierWave, '#dd6b20');
+            drawWave('fm-modulated-wave', modulatedWave, '#805ad5');
+            drawFMDiagram();
+        }
+        // Initialize sliders
+        const amSliders = {
+            messageFreq: createSlider('am-message-freq-slider', 'am-message-freq-value', 0.5, 5, 0.1, 1, drawAMCharts),
+            carrierFreq: createSlider('am-carrier-freq-slider', 'am-carrier-freq-value', 5, 20, 1, 10, drawAMCharts),
+            modIndex: createSlider('am-mod-index-slider', 'am-mod-index-value', 0, 1, 0.05, 0.5, drawAMCharts)
+        };
+        const fmSliders = {
+            messageFreq: createSlider('fm-message-freq-slider', 'fm-message-freq-value', 0.5, 5, 0.1, 1, drawFMCharts),
+            carrierFreq: createSlider('fm-carrier-freq-slider', 'fm-carrier-freq-value', 5, 20, 1, 10, drawFMCharts),
+            frequencyDev: createSlider('fm-dev-slider', 'fm-dev-value', 1, 10, 0.5, 2, drawFMCharts)
+        };
+        // Initial draw
+        drawAMCharts();
+        drawFMCharts();
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            if (document.getElementById('am').classList.contains('active')) {
+                drawAMCharts();
+            } else {
+                drawFMCharts();
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=talibanta/myspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes