Understanding Perceptrons Through a Practical Web Example
Tags: webdev, javascript, perceptron, machinelearning
Published: 2024-02-18 00:47:14

What we will be making!

{% codepen https://codepen.io/spenceryonce/pen/WNmmrWG %}

---

Perceptrons are the simplest form of a neural network, designed for binary classification tasks. Invented in 1957 by Frank Rosenblatt, perceptrons paved the way for deep learning and modern artificial intelligence. This article aims to demystify perceptrons by guiding you through a practical web-based example: a decision-making tool that determines whether you should engage in various activities based on certain criteria.

## What is a Perceptron?

A perceptron is a type of artificial neuron that uses a linear binary classifier to decide whether an input, represented by a vector of numbers, belongs to a particular class. The decision is made by weighing the input signals, summing them up, and then passing them through a step function to produce an output.

## Theoretical Background

The perceptron model is defined by three components:

- **Inputs (x)**: Values received from the external environment.
- **Weights (w)**: Values that signify the importance of the corresponding inputs.
- **Threshold (θ)**: A value that the weighted sum of the inputs must exceed for the perceptron to fire (output a 1).

The formula used by a perceptron to make a decision is as follows:


![formula for perceptron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wb34pno3af8fjn6a3co.png)



where \(f\) is the step function that returns 1 if the sum is greater than the threshold, and 0 otherwise.

## Practical Example: Decision-Making Tool

To illustrate how a perceptron works, we'll create a simple web tool that helps decide whether to engage in activities like going to a concert, eating out, or studying tonight. The decision is based on several weighted criteria, such as budget, weather, and personal interest.

### Step 1: Setting Up the HTML Structure

We begin with a basic HTML setup that includes a form for inputting decision criteria and a script for the perceptron logic.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Perceptron Decision Maker</title>
</head>
<body>
    <h1>Should I Go to the Concert?</h1>
    <form id="decisionForm">
        <!-- Criteria checkboxes go here -->
        <button type="button" onclick="calculateDecision()">Decide</button>
    </form>
    <div id="result"></div>

    <script>
        // Perceptron logic will be added here
    </script>
</body>
</html>
```

### Step 2: Adding CSS for Styling

We aim for a modern look similar to NextUI's light theme, focusing on simplicity and readability.

```css
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
    color: #333;
}

form {
    margin-bottom: 20px;
}

button, select {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
}

#result {
    margin-top: 20px;
    padding: 10px;
    background-color: #fafafa;
    border-left: 5px solid #0070f3;
}
```

### Step 3: Implementing the Perceptron Logic in JavaScript

We use JavaScript to dynamically generate the form based on the decisions data, calculate the decision using perceptron logic, and display the result.

```javascript
const decisionsData = {
    "concert": {
        "title": "Will I go to the concert?",
        "category": "Entertainment",
        "threshold": 1.5,
        "criteria": [
            {"id": "artistGood", "label": "Artists is Good", "weight": 0.7},
            // Additional criteria
        ]
    },
    // Other decisions
};

function calculateDecision(decisionKey) {
    const decision = decisionsData[decisionKey];
    let sum = 0;
    decision.criteria.forEach(criterion => {
        const isChecked = document.getElementById(criterion.id).checked ? 1 : 0;
        sum += isChecked * criterion.weight;
    });
    const result = sum > decision.threshold ? "Yes" : "No";
    document.getElementById("result").innerText = result;
}
```

### Step 4: Dynamically Generating Decisions and Categories

To enhance user experience, we allow users to select a decision category before presenting them with specific decision criteria.

```javascript
function populateCategorySelector() {
    const categories = new Set();
    Object.values(decisionsData).forEach(decision => {
        categories.add(decision.category);
    });
    const categorySelector = document.getElementById('categorySelector');
    categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category;
        option.innerText = category;
        categorySelector.appendChild(option);
    });
}

// Function to filter decisions by category
function filterDecisionsByCategory() {
    const selectedCategory = document.getElementById('categorySelector').value;
    createFormsFromData(selectedCategory);
}
```

## Conclusion

Perceptrons, despite their simplicity, lay the groundwork for understanding more complex neural networks. By implementing a perceptron in a real-world application, we gain a practical understanding of its decision-making process. This example serves as a stepping stone to exploring more advanced concepts in machine learning and artificial intelligence.

---

That about wraps it up! I hope you enjoyed this article and would love to add your own decisions to this library of perceptrons!

Add your own decisions as a comment under this post in the correct data format and I'll add them to the library!