Advanced Convolution Visualizer

Untitled Web App

Info

Created On: August 18, 2023

Created By: @CalculatorTools

AI

Model: chatgpt-plugin

Time: 0 seconds

Prompt Tokens: 0

Completion Tokens: 0

Total Token Cost: 0

Get This App On Your Website

<iframe src="https://calculators.tools/prompt//iframe/" width="100%" height="100%" frameborder="0" scrolling="yes" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="midi; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write; notifications; payment-handler; persistent-storage; background-sync; ambient-light-sensor; accessibility-events;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-downloads allow-presentation allow-pointer-lock allow-orientation-lock" allowfullscreen="true" allowpaymentrequest="true" frameborder="0"></iframe><br><a href="https://calculator.tools/prompt/4344/" target="_blank" style="font-size: 12px; text-decoration: none;" alt="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools" title="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools">Powered by Calculator Tools</a>

1. Copy the code above with the iframe and link.
2. Paste the code into your website.
3. Resize the iframe to fit your website.

Javascript, HTML, CSS Code

                    <!DOCTYPE html>

<html lang="en">

<head>

		<script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script>



    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Advanced Convolution Visualizer</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            padding: 20px;

        }

        table, th, td {

            border: 1px solid black;

            border-collapse: collapse;

            padding: 5px;

            text-align: center;

        }

        .container {

            display: flex;

            flex-direction: column;

            gap: 10px;

        }

        .toggle-container {

            display: flex;

            gap: 10px;

            align-items: center;

        }

    </style>



	<link rel="canonical" href="https://calculator.tools/prompt/4344/">

	<meta charset="utf-8">

</head>

<body>



<h2>Advanced Convolution Visualizer</h2>



<div class="toggle-container">

    <label for="toggle">Input Mode:</label>

    <select id="toggle" onchange="toggleInputMode()">

        <option value="simple">Simple Sequences</option>

        <option value="js">JavaScript Sequences</option>

    </select>

</div>



<div class="container" id="simpleContainer">

    <label for="simpleSequence1">Sequence 1:</label>

    <textarea id="simpleSequence1" rows="4" cols="50"></textarea>

    <label for="simpleSequence2">Sequence 2:</label>

    <textarea id="simpleSequence2" rows="4" cols="50"></textarea>

</div>



<div class="container" id="jsContainer" style="display: none;">

    <label for="functionNames">Function Names (5 alphanumeric characters, comma-separated):</label>

    <input type="text" id="functionNames" placeholder="fFunc1, fFunc2, ...">



    <label for="variableNames">Variable Names (3 alphanumeric characters, comma-separated):</label>

    <input type="text" id="variableNames" placeholder="vVar1, vVar2, ...">



    <label for="variableValues">Variable Values (pairs of variable names and their values):</label>

    <input type="text" id="variableValues" placeholder="vVar1=5, vVar2=10, ...">



    <label for="functionDefinition">Function Definition (use 'return' and allowed characters):</label>

    <textarea id="functionDefinition" rows="4" cols="50" placeholder="return fFunc1vVar1 + fFunc2vVar2;"></textarea>

</div>



<button onclick="computeConvolution()">Compute Convolution</button>



<h3>Convolution Grid:</h3>

<table id="convolutionTable"></table>



<h3>Convolution Result:</h3>

<p id="convolutionResult"></p>



<script>

    function toggleInputMode() {

        const mode = document.getElementById('toggle').value;

        if (mode === 'simple') {

            document.getElementById('simpleContainer').style.display = 'block';

            document.getElementById('jsContainer').style.display = 'none';

        } else {

            document.getElementById('simpleContainer').style.display = 'none';

            document.getElementById('jsContainer').style.display = 'block';

        }

    }



    function computeConvolution() {

        const mode = document.getElementById('toggle').value;

        let seq1, seq2;

        if (mode === 'simple') {

            seq1 = parseSimpleSequence(document.getElementById('simpleSequence1').value);

            seq2 = parseSimpleSequence(document.getElementById('simpleSequence2').value);

        } else {

            seq1 = parseJsSequence(document.getElementById('functionNames').value, document.getElementById('variableNames').value, document.getElementById('variableValues').value, document.getElementById('functionDefinition').value, 1);

            seq2 = parseJsSequence(document.getElementById('functionNames').value, document.getElementById('variableNames').value, document.getElementById('variableValues').value, document.getElementById('functionDefinition').value, 2);

        }



        displayConvolutionGrid(seq1, seq2);

    }



    function parseSimpleSequence(sequence) {

        return sequence.split(',').map(x => parseFloat(x.trim()));

    }



    function parseJsSequence(functionNames, variableNames, variableValues, functionDefinition, seqNum) {

        // Sanitization and parsing logic here

        // This is a placeholder and needs to be implemented

        return [];

    }



    function displayConvolutionGrid(seq1, seq2) {

        // Display logic here

        // This is a placeholder and needs to be implemented

    }

</script>



        <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname +  "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script>



        <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script>

</body>

</html>

Advanced Convolution Visualizer

Info

Tags

AI

Get This App On Your Website

Javascript, HTML, CSS Code

IMAGE TO APP (New!)

SCREENSHOT TO APP (New!)

FAQ

What is Calculator Tools?

What Do You Mean Make An App?

Does This Use ChatGPT?

Calculator Tools

Want Better Apps?