brain.js html load from json code example

Example: json of software for brain.js

<!DOCTYPE html>

<html>
<head runat="server">
    <meta charset="utf-8" />
    <title>Neural Network - Brain.js - Web Method Test</title>
    <style>
        div {
            padding: 12px;
            background-color: aliceblue;
        }

        .txt {
            width: 400px;
        }

        .info {
            font-size: 16px;
        }

        .btn {
            margin: 12px;
            height: 24px;
            width: 50px;
            padding: 6px;
        }

        .entry {
            padding: 30px;
            background: lightblue;
            color: black;
            font-size: 36px;
        }

        .example {
            padding: 100px;
            background: darkred;
            color: white;
            font-size: 36px;
        }

        .header {
            padding 22px;
            background: plum;
            font-size: 48px;
            color: black;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="//unpkg.com/brain.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="header">
            Brain.JS Example
        </div>
        <div class="entry">
            <span class="info">How many Iterations to train (poor but fast: 100, good but slow: 4000)?</span>
            <input type="text" id="txtIterations" value="1000" />
            <br />
            <input type="button" value="Train the AI" onclick="javascript: TrainBrain();" />
        </div>
        <div>
            <span class="info">What is your computer issue?</span>
            <br />
            <input type="text" id="txtInput" class="txt" />
            <br />
            <span class="info">(will answer 'softare' or 'hardware') </span>
            <br />
            <br />
            <input type="button" value="Send Test" onclick="javascript: runRequest();" />
            <br />
        </div>
        <div id="example" class="example">Example Text</div>
    </form>
</body>
</html>

<script>
    const txtBrain = new brain.recurrent.LSTM();
    var example = document.querySelector("#example");

    document.addEventListener('DOMContentLoaded', function () {
        example.innerHTML = 'The Brain is Waiting to be Trained...';
        console.log('here');
    }, false);

    function TrainBrain() {
        example.innerHTML = "Training in progress... please wait"
        console.log('inside TrainBrain');
        var jsn = [];
        var TrainingData
        var TData = [];
        var txtIterations = document.getElementById("txtIterations").value

        setTimeout(function () {

            console.log('inside timeout');

            $.getJSON(['data.json'], function (jsn) {

                TrainingData = JSON.stringify(jsn);

                TData = JSON.parse(TrainingData);


                var TData2 = TData.map(item => ({
                    input: item.input,
                    output: item.output
                }))
                const iterations = txtIterations
                const config = {
                    iterations: iterations
                    , log: details => console.log(details)
                };
                txtBrain.train(TData2, config);
                example.innerHTML = 'Training is completed. Please ask your question.'
            });
        }, 2000);

        console.log('after timeout');
    }

    function runRequest() {
        var output = ''
        var txtInput = document.getElementById("txtInput").value

        console.log(txtInput);
        console.log('inside run request')

        output = txtBrain.run(txtInput.text);
        console.log('Category: ' + output);
        example.innerHTML = txtInput + '<br>... Category: ' + output;

    }

</script>

Tags:

Html Example

Recent Posts