From 957517b7c058251ddc5e1575f909c6af5517cac6 Mon Sep 17 00:00:00 2001
From: Kai Piper <kai9987kai@gmail.com>
Date: Sun, 29 Dec 2024 20:42:02 +0000
Subject: [PATCH] Create neuralnetworkplayground.html

---
 neuralnetworkplayground.html | 408 +++++++++++++++++++++++++++++++++++
 1 file changed, 408 insertions(+)
 create mode 100644 neuralnetworkplayground.html
diff --git a/neuralnetworkplayground.html b/neuralnetworkplayground.html
new file mode 100644
index 0000000..b795fd4
--- /dev/null
+++ b/neuralnetworkplayground.html
@@ -0,0 +1,408 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced Neural Network Playground</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f2f5;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: #ffffff;
+            padding: 30px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        .node-editor {
+            display: flex;
+            gap: 20px;
+        }
+        .node-palette {
+            width: 220px;
+            border-right: 2px solid #ddd;
+            padding-right: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            background-color: #f9f9f9;
+            border-radius: 8px;
+        }
+        .node {
+            padding: 12px;
+            background-color: #007bff;
+            color: #fff;
+            cursor: grab;
+            margin-bottom: 10px;
+            text-align: center;
+            border-radius: 6px;
+            transition: background-color 0.3s;
+        }
+        .node:hover {
+            background-color: #0056b3;
+        }
+        .node-canvas {
+            flex-grow: 1;
+            min-height: 500px;
+            border: 2px dashed #ccc;
+            position: relative;
+            background-color: #fafafa;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        .node-instance {
+            position: absolute;
+            padding: 12px;
+            background-color: #28a745;
+            color: #fff;
+            border-radius: 6px;
+            cursor: move;
+            user-select: none;
+            transition: background-color 0.3s, transform 0.3s;
+        }
+        .node-instance:hover {
+            background-color: #1e7e34;
+            transform: scale(1.05);
+        }
+        .button-group {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        .button {
+            background-color: #007bff;
+            color: #fff;
+            padding: 12px 20px;
+            border: none;
+            cursor: pointer;
+            border-radius: 6px;
+            transition: background-color 0.3s;
+            flex: 1;
+            min-width: 120px;
+            text-align: center;
+        }
+        .button:hover {
+            background-color: #0056b3;
+        }
+        .training-status {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e9ecef;
+            border-radius: 6px;
+            font-weight: bold;
+        }
+        .metrics {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .canvas-container {
+            margin-top: 20px;
+            text-align: center;
+        }
+        canvas {
+            border: 1px solid #000;
+            border-radius: 8px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Advanced Neural Network Playground</h1>
+        <div class="node-editor">
+            <div class="node-palette">
+                <div class="node" draggable="true" data-type="input">Input Layer</div>
+                <div class="node" draggable="true" data-type="hidden">Hidden Layer</div>
+                <div class="node" draggable="true" data-type="output">Output Layer</div>
+                <div class="node" draggable="true" data-type="conv">Convolutional Layer</div>
+                <div class="node" draggable="true" data-type="pool">Pooling Layer</div>
+                <div class="node" draggable="true" data-type="lstm">LSTM Layer</div>
+                <div class="node" draggable="true" data-type="gru">GRU Layer</div>
+                <div class="node" draggable="true" data-type="q-learning">Q-Learning Layer</div>
+                <div class="node" draggable="true" data-type="gnn">GNN Layer</div>
+                <div class="node" draggable="true" data-type="pretrain">Pretrained Layer</div>
+            </div>
+            <div class="node-canvas" id="nodeCanvas">
+                <p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #aaa; font-size: 18px;">
+                    Drag and drop nodes here to build your network
+                </p>
+            </div>
+        </div>
+        <div class="controls">
+            <div class="input-group">
+                <label for="epochs">Epochs:</label>
+                <input type="number" id="epochs" value="100" min="1">
+            </div>
+            <div class="input-group">
+                <label for="learningRate">Learning Rate:</label>
+                <input type="number" id="learningRate" value="0.01" step="0.001" min="0.001">
+            </div>
+            <div class="input-group">
+                <label for="batchSize">Batch Size:</label>
+                <input type="number" id="batchSize" value="32" min="1">
+            </div>
+            <div class="input-group">
+                <label for="optimizer">Optimizer:</label>
+                <select id="optimizer">
+                    <option value="adam">Adam</option>
+                    <option value="sgd">SGD</option>
+                    <option value="rmsprop">RMSprop</option>
+                </select>
+            </div>
+            <div class="input-group">
+                <label for="loss">Loss Function:</label>
+                <select id="loss">
+                    <option value="meanSquaredError">Mean Squared Error</option>
+                    <option value="binaryCrossentropy">Binary Crossentropy</option>
+                </select>
+            </div>
+            <div class="button-group">
+                <button class="button" onclick="trainModel()">Train Model</button>
+                <button class="button" onclick="saveModel()">Save Model</button>
+                <button class="button" onclick="loadModel()">Load Model</button>
+                <button class="button" onclick="exportArchitecture()">Export Architecture</button>
+                <button class="button" onclick="importArchitecture()">Import Architecture</button>
+                <button class="button" onclick="uploadDataset()">Upload Dataset</button>
+            </div>
+        </div>
+        <div id="trainingStatus" class="training-status">Training Status: Idle</div>
+        <div class="metrics">
+            <canvas id="lossChart"></canvas>
+            <canvas id="accuracyChart"></canvas>
+        </div>
+        <div class="canvas-container">
+            <canvas id="visualizationCanvas" width="800" height="400"></canvas>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        // Initialize variables
+        let nodes = [];
+        let model;
+        let lossChart, accuracyChart;
+        let isTraining = false;
+
+        // Initialize Chart.js for loss and accuracy
+        const lossCtx = document.getElementById('lossChart').getContext('2d');
+        const accuracyCtx = document.getElementById('accuracyChart').getContext('2d');
+
+        lossChart = new Chart(lossCtx, {
+            type: 'line',
+            data: {
+                labels: [],
+                datasets: [{
+                    label: 'Loss',
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                    data: [],
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                }
+            }
+        });
+
+        accuracyChart = new Chart(accuracyCtx, {
+            type: 'line',
+            data: {
+                labels: [],
+                datasets: [{
+                    label: 'Accuracy',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    data: [],
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 1
+                    }
+                }
+            }
+        });
+
+        // Drag and drop functionality
+        const nodeCanvas = document.getElementById('nodeCanvas');
+        const nodePalette = document.querySelector('.node-palette');
+
+        nodePalette.addEventListener('dragstart', (e) => {
+            e.dataTransfer.setData('text/plain', e.target.dataset.type);
+        });
+
+        nodeCanvas.addEventListener('dragover', (e) => {
+            e.preventDefault();
+        });
+
+        nodeCanvas.addEventListener('drop', (e) => {
+            e.preventDefault();
+            const type = e.dataTransfer.getData('text/plain');
+            const newNode = document.createElement('div');
+            newNode.className = 'node-instance';
+            newNode.textContent = type;
+            newNode.style.left = `${e.offsetX}px`;
+            newNode.style.top = `${e.offsetY}px`;
+            newNode.dataset.type = type;
+            nodeCanvas.appendChild(newNode);
+            nodes.push({ type, x: e.offsetX, y: e.offsetY });
+        });
+
+        // Train model function
+        async function trainModel() {
+            if (isTraining) return;
+            isTraining = true;
+            document.getElementById('trainingStatus').textContent = 'Training Status: Training...';
+
+            // Build the model
+            model = tf.sequential();
+            nodes.forEach((node, index) => {
+                switch (node.type) {
+                    case 'input':
+                        model.add(tf.layers.dense({ units: 10, inputShape: [10] }));
+                        break;
+                    case 'hidden':
+                        model.add(tf.layers.dense({ units: 10, activation: 'relu' }));
+                        break;
+                    case 'output':
+                        model.add(tf.layers.dense({ units: 1, activation: 'sigmoid' }));
+                        break;
+                    // Add more cases for other layer types
+                }
+            });
+
+            // Compile the model
+            const optimizer = document.getElementById('optimizer').value;
+            const loss = document.getElementById('loss').value;
+            model.compile({
+                optimizer: optimizer,
+                loss: loss,
+                metrics: ['accuracy']
+            });
+
+            // Generate dummy data for training
+            const xs = tf.randomNormal([100, 10]);
+            const ys = tf.randomUniform([100, 1], 0, 2).round(); // Binary labels (0 or 1)
+
+            // Train the model
+            const epochs = parseInt(document.getElementById('epochs').value);
+            const batchSize = parseInt(document.getElementById('batchSize').value);
+            const history = await model.fit(xs, ys, {
+                epochs: epochs,
+                batchSize: batchSize,
+                callbacks: {
+                    onEpochEnd: (epoch, logs) => {
+                        lossChart.data.labels.push(epoch);
+                        lossChart.data.datasets[0].data.push(logs.loss);
+                        lossChart.update();
+
+                        accuracyChart.data.labels.push(epoch);
+                        accuracyChart.data.datasets[0].data.push(logs.acc);
+                        accuracyChart.update();
+                    }
+                }
+            });
+
+            // Visualize predictions on the output canvas
+            visualizePredictions(xs, ys);
+
+            document.getElementById('trainingStatus').textContent = 'Training Status: Completed';
+            isTraining = false;
+        }
+
+        // Visualize predictions on the output canvas
+        function visualizePredictions(xs, ys) {
+            const canvas = document.getElementById('visualizationCanvas');
+            const ctx = canvas.getContext('2d');
+            const predictions = model.predict(xs).round().dataSync();
+
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = 'black';
+            ctx.font = '14px Arial';
+
+            for (let i = 0; i < 10; i++) { // Display first 10 predictions
+                const x = 50;
+                const y = 30 + i * 30;
+                ctx.fillText(`Input ${i + 1}: Predicted ${predictions[i]}, Actual ${ys.dataSync()[i]}`, x, y);
+            }
+        }
+
+        // Save model function
+        function saveModel() {
+            if (model) {
+                model.save('downloads://my-model');
+            }
+        }
+
+        // Load model function
+        async function loadModel() {
+            model = await tf.loadLayersModel('localstorage://my-model');
+        }
+
+        // Export architecture function
+        function exportArchitecture() {
+            const architecture = JSON.stringify(nodes);
+            const blob = new Blob([architecture], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'architecture.json';
+            a.click();
+        }
+
+        // Import architecture function
+        function importArchitecture() {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'application/json';
+            input.onchange = (e) => {
+                const file = e.target.files[0];
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    nodes = JSON.parse(e.target.result);
+                    nodeCanvas.innerHTML = '';
+                    nodes.forEach(node => {
+                        const newNode = document.createElement('div');
+                        newNode.className = 'node-instance';
+                        newNode.textContent = node.type;
+                        newNode.style.left = `${node.x}px`;
+                        newNode.style.top = `${node.y}px`;
+                        newNode.dataset.type = node.type;
+                        nodeCanvas.appendChild(newNode);
+                    });
+                };
+                reader.readAsText(file);
+            };
+            input.click();
+        }
+
+        // Upload dataset function
+        function uploadDataset() {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = '.csv,.json';
+            input.onchange = (e) => {
+                const file = e.target.files[0];
+                // Handle dataset upload and processing
+            };
+            input.click();
+        }
+    </script>
+</body>
+</html>
