HTML CSS JAVASCRIPT SQL MYSQL PYTHON JAVA PHP C C++ C# PACKET TRACER CYBERSECURITY REACT TYPESCRIPT NODE.JS GIT & GITHUB DATA SCIENCE BOOTSTRAP GO KOTLIN JQUERY DJANGO VUE ANGULAR MONGODB POSTGRESQL SASS NUMPY PANDAS SCIPY DSA RUST SWIFT BASH XML W3.CSS ANGULARJS AI WORD POWERPOINT
Corso gratuito

Corso AI e Machine Learning in italiano

Dall'intelligenza artificiale al machine learning: scopri come le macchine imparano dai dati. Reti neurali, percettroni, training e testing, regressione, clustering e deep learning โ€” con la matematica e la statistica che li rendono possibili. Esempi interattivi in JavaScript con grafici, brain.js e TensorFlow.js.

Introduzione all'Intelligenza Artificiale

L'Intelligenza Artificiale (AI) รจ la disciplina che costruisce macchine capaci di svolgere compiti che normalmente richiedono l'intelligenza umana: riconoscere immagini, capire il linguaggio, prendere decisioni, giocare a scacchi.

Il Machine Learning (ML, apprendimento automatico) รจ il sottoinsieme piรน importante dell'AI: invece di programmare regole esplicite, si forniscono dati alla macchina che impara da sola gli schemi.

ConcettoDescrizione
AIQualsiasi tecnica per simulare l'intelligenza umana
Machine LearningAlgoritmi che imparano dai dati senza essere programmati esplicitamente
Deep LearningML basato su reti neurali profonde a molti strati
Neural NetworkModello ispirato ai neuroni del cervello
๐Ÿง  Gerarchia: Deep Learning โŠ‚ Machine Learning โŠ‚ Intelligenza Artificiale. Ogni livello รจ un sottoinsieme piรน specifico del precedente.

Una storia lunga decenni

Il termine "Intelligenza Artificiale" nasce nel 1956 alla conferenza di Dartmouth. Da allora l'AI ha attraversato periodi di entusiasmo e "inverni". La svolta รจ arrivata negli anni 2010 grazie a tre fattori: big data, potenza di calcolo (GPU) e nuovi algoritmi di deep learning.

AI e Machine Learning

La differenza fondamentale tra programmazione tradizionale e machine learning sta nel flusso:

Programmazione classicaMachine Learning
InputDati + RegoleDati + Risposte
OutputRisposteRegole (il modello)

Nella programmazione classica scrivi tu le regole. Nel ML la macchina scopre le regole guardando esempi di input e output corretti.

Esempio concreto: filtro antispam

  • Classico: scrivi regole come "se contiene 'vinci soldi' โ†’ spam". Fragile e infinito.
  • ML: mostri 10.000 email etichettate come spam/non-spam. Il modello impara da solo quali parole e schemi indicano spam.
๐Ÿ’ก Il ML eccelle quando le regole sono troppe, troppo complesse o cambiano nel tempo โ€” come riconoscere un volto o tradurre una lingua.

Linguaggi e strumenti

Il machine learning si puรฒ fare in molti linguaggi. Python รจ il piรน popolare grazie alle sue librerie, ma anche JavaScript permette di addestrare modelli direttamente nel browser.

StrumentoLinguaggioUso
TensorFlowPython / JSDeep learning, produzione
PyTorchPythonRicerca, deep learning
scikit-learnPythonML classico
TensorFlow.jsJavaScriptML nel browser
Brain.jsJavaScriptReti neurali semplici nel browser
Plotly.js / Chart.jsJavaScriptVisualizzazione dati
๐ŸŒ In questo corso useremo JavaScript con Plotly.js, Brain.js e TensorFlow.js, cosรฌ potrai eseguire ogni esempio direttamente nel browser cliccando "Provalo tu", senza installare nulla.

Grafici lineari

Visualizzare i dati รจ il primo passo del machine learning. Un grafico lineare mostra la relazione tra due variabili. Usiamo Plotly.js, una potente libreria di grafici.

HTML + Plotly.js โ€” grafico lineare
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>

<h3>Vendite mensili</h3>
<div id="grafico"></div>

<script>
const mesi  = ['Gen','Feb','Mar','Apr','Mag','Giu'];
const vendite = [120, 145, 130, 180, 210, 250];

const traccia = {
  x: mesi,
  y: vendite,
  type: 'scatter',
  mode: 'lines+markers',
  line: { color: '#4f46e5', width: 3 },
  marker: { size: 10 }
};

Plotly.newPlot('grafico', [traccia], {
  title: 'Andamento vendite 2026',
  xaxis: { title: 'Mese' },
  yaxis: { title: 'Vendite (kโ‚ฌ)' }
});
</script>

</body>
</html>

I grafici lineari sono perfetti per mostrare tendenze nel tempo e per visualizzare la retta che un modello di regressione "impara".

Scatter plot

Lo scatter plot (grafico a dispersione) disegna un punto per ogni osservazione. รˆ fondamentale nel ML per vedere come i dati si distribuiscono e se esistono raggruppamenti o correlazioni.

HTML + Plotly.js โ€” scatter plot
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>

<h3>Altezza vs Peso</h3>
<div id="scatter"></div>

<script>
// Dati: altezza (cm) e peso (kg) di alcune persone
const altezza = [150, 160, 165, 170, 175, 180, 185, 190];
const peso    = [50,  58,  63,  68,  72,  80,  85,  92];

const punti = {
  x: altezza,
  y: peso,
  mode: 'markers',
  type: 'scatter',
  marker: { size: 14, color: '#0d9488', opacity: 0.8 }
};

Plotly.newPlot('scatter', [punti], {
  title: 'Relazione altezza-peso',
  xaxis: { title: 'Altezza (cm)' },
  yaxis: { title: 'Peso (kg)' }
});
</script>

</body>
</html>
๐Ÿ’ก Quando i punti formano una linea immaginaria crescente, c'รจ una correlazione positiva: al crescere di X cresce anche Y. รˆ esattamente ciรฒ che un modello di regressione cerca di catturare.

Percettroni

Il percettrone รจ il mattone fondamentale delle reti neurali, inventato nel 1958. Simula un singolo neurone: riceve input, li moltiplica per dei pesi, li somma e applica una funzione di attivazione per produrre l'output.

output = attivazione( wโ‚ยทxโ‚ + wโ‚‚ยทxโ‚‚ + ... + wโ‚™ยทxโ‚™ + bias )

Durante il training, il percettrone aggiusta i pesi per ridurre gli errori. Vediamo un percettrone che impara la funzione logica AND da zero, in puro JavaScript:

HTML + JS โ€” percettrone che impara AND
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 20px; }
    pre  { background: #1e293b; color: #e2e8f0; padding: 14px; border-radius: 8px; }
  </style>
</head>
<body>

<h3>๐Ÿง  Percettrone: impara la funzione AND</h3>
<pre id="output"></pre>

<script>
// Dati di training: input [x1, x2] -> output atteso (AND logico)
const dati = [
  { in: [0,0], out: 0 },
  { in: [0,1], out: 0 },
  { in: [1,0], out: 0 },
  { in: [1,1], out: 1 }
];

// Pesi iniziali casuali + bias
let pesi = [Math.random(), Math.random()];
let bias = Math.random();
const lr = 0.1; // learning rate

// Funzione di attivazione a gradino
const attiva = x => x >= 0 ? 1 : 0;

const log = [];

// Addestramento: 20 epoche
for (let epoca = 0; epoca < 20; epoca++) {
  let errori = 0;
  for (const d of dati) {
    const somma = d.in[0]*pesi[0] + d.in[1]*pesi[1] + bias;
    const pred  = attiva(somma);
    const err   = d.out - pred;
    if (err !== 0) errori++;
    // Aggiorna pesi e bias
    pesi[0] += lr * err * d.in[0];
    pesi[1] += lr * err * d.in[1];
    bias    += lr * err;
  }
  log.push('Epoca ' + (epoca+1) + ': errori = ' + errori);
  if (errori === 0) { log.push('โœ… Convergenza raggiunta!'); break; }
}

// Verifica finale
log.push('\nRisultati dopo il training:');
for (const d of dati) {
  const somma = d.in[0]*pesi[0] + d.in[1]*pesi[1] + bias;
  log.push(d.in[0] + ' AND ' + d.in[1] + ' = ' + attiva(somma));
}

document.getElementById('output').textContent = log.join('\n');
</script>

</body>
</html>
๐Ÿ”‘ Il percettrone aggiorna i pesi con la regola: peso += learning_rate ร— errore ร— input. Ripetendo su tutti gli esempi per piรน "epoche", l'errore tende a zero.

Training (addestramento)

Il training รจ il processo con cui il modello impara dai dati. Si presenta ripetutamente al modello il dataset di addestramento e si aggiustano i parametri per minimizzare l'errore (funzione di costo o loss).

TermineSignificato
EpocaUn passaggio completo su tutto il dataset
Loss (perdita)Misura quanto il modello sbaglia
Learning rateQuanto velocemente il modello aggiusta i pesi
Gradient descentAlgoritmo che minimizza la loss passo dopo passo
HTML + Plotly.js โ€” la loss che scende durante il training
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>

<h3>๐Ÿ“‰ Curva di apprendimento (loss)</h3>
<div id="loss"></div>

<script>
// Simuliamo la loss che diminuisce a ogni epoca
const epoche = [];
const perdita = [];
let loss = 1.0;
for (let e = 1; e <= 50; e++) {
  epoche.push(e);
  perdita.push(loss);
  // La loss decresce esponenzialmente con un po' di rumore
  loss = loss * 0.92 + (Math.random()-0.5) * 0.02;
  if (loss < 0) loss = 0.01;
}

Plotly.newPlot('loss', [{
  x: epoche, y: perdita,
  type: 'scatter', mode: 'lines',
  line: { color: '#dc2626', width: 3 }
}], {
  title: 'La loss diminuisce mentre il modello impara',
  xaxis: { title: 'Epoca' },
  yaxis: { title: 'Loss (errore)' }
});
</script>

</body>
</html>

Una curva di loss che scende e si stabilizza indica che il modello sta imparando correttamente.

Testing (validazione)

Dopo il training bisogna verificare quanto il modello generalizza su dati mai visti. Per questo si divide il dataset:

SetPercentuale tipicaScopo
Training set70-80%Il modello impara da questi dati
Validation set10-15%Regolare gli iperparametri
Test set10-20%Valutazione finale imparziale
โš ๏ธ Overfitting: quando il modello "memorizza" i dati di training invece di imparare schemi generali. Va benissimo sul training set ma fallisce sui dati nuovi. Si combatte con piรน dati, regolarizzazione e un buon test set.
๐Ÿ“Š Underfitting รจ l'opposto: il modello รจ troppo semplice e sbaglia anche sul training. La soluzione รจ un modello piรน complesso o feature migliori.

Tipi di apprendimento

Esistono tre grandi paradigmi di machine learning:

TipoDatiEsempio
SupervisionatoInput + etichette corretteClassificare email spam/non-spam
Non supervisionatoSolo input, nessuna etichettaRaggruppare clienti simili (clustering)
Per rinforzoRicompense/penalitร Un'AI che impara a giocare

Apprendimento supervisionato

Il piรน comune. Si divide in due compiti:

  • Classificazione: prevedere una categoria (spam/non-spam, gatto/cane)
  • Regressione: prevedere un numero continuo (prezzo di una casa, temperatura)
๐Ÿ’ก Regola pratica: se la risposta รจ una etichetta โ†’ classificazione. Se รจ un numero โ†’ regressione.

Terminologia essenziale

TermineDefinizione
FeatureUna caratteristica in input (es. altezza, etร )
Label (etichetta)La risposta corretta che vogliamo prevedere
Model (modello)La funzione che mappa input โ†’ output
Weight (peso)Parametro che il modello impara
BiasTermine costante aggiunto alla somma pesata
ActivationFunzione non lineare (ReLU, sigmoid, tanh)
HyperparameterImpostazione scelta da te (learning rate, epoche)
InferenceUsare il modello addestrato per fare previsioni

Funzioni di attivazione comuni

Sigmoid: ฯƒ(x) = 1 / (1 + eโปหฃ) โ†’ output tra 0 e 1 ReLU: f(x) = max(0, x) โ†’ la piรน usata nel deep learning Tanh: tanh(x) โ†’ output tra -1 e 1
HTML + Plotly.js โ€” confronto funzioni di attivazione
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>

<h3>Funzioni di attivazione</h3>
<div id="att"></div>

<script>
const x = [];
const sigmoid = [], relu = [], tanh = [];
for (let v = -6; v <= 6; v += 0.2) {
  x.push(v);
  sigmoid.push(1 / (1 + Math.exp(-v)));
  relu.push(Math.max(0, v));
  tanh.push(Math.tanh(v));
}

Plotly.newPlot('att', [
  { x, y: sigmoid, name: 'Sigmoid', line: { color:'#4f46e5' } },
  { x, y: relu,    name: 'ReLU',    line: { color:'#0d9488' } },
  { x, y: tanh,    name: 'Tanh',    line: { color:'#dc2626' } }
], {
  title: 'Confronto funzioni di attivazione',
  xaxis: { title: 'input' },
  yaxis: { title: 'output' }
});
</script>

</body>
</html>

Clustering

Il clustering รจ apprendimento non supervisionato: raggruppa automaticamente i dati simili senza etichette. L'algoritmo piรน famoso รจ K-Means, che divide i dati in K gruppi.

HTML + Plotly.js โ€” K-Means da zero
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>

<h3>๐ŸŽฏ K-Means: 3 cluster trovati automaticamente</h3>
<div id="cluster"></div>

<script>
// Generiamo 3 gruppi di punti attorno a 3 centri
function genGruppo(cx, cy, n) {
  const pts = [];
  for (let i = 0; i < n; i++)
    pts.push([cx + (Math.random()-0.5)*3, cy + (Math.random()-0.5)*3]);
  return pts;
}
let punti = [...genGruppo(2,2,20), ...genGruppo(8,3,20), ...genGruppo(5,9,20)];

// K-Means con K=3
const K = 3;
let centri = [punti[0], punti[20], punti[40]].map(p => [...p]);
let assegnazioni = new Array(punti.length).fill(0);

const dist = (a,b) => Math.hypot(a[0]-b[0], a[1]-b[1]);

for (let iter = 0; iter < 10; iter++) {
  // Assegna ogni punto al centro piรน vicino
  punti.forEach((p, i) => {
    let best = 0, bd = Infinity;
    centri.forEach((c, k) => { const d = dist(p,c); if (d < bd) { bd = d; best = k; } });
    assegnazioni[i] = best;
  });
  // Ricalcola i centri
  for (let k = 0; k < K; k++) {
    const membri = punti.filter((_, i) => assegnazioni[i] === k);
    if (membri.length) {
      centri[k] = [
        membri.reduce((s,p)=>s+p[0],0)/membri.length,
        membri.reduce((s,p)=>s+p[1],0)/membri.length
      ];
    }
  }
}

// Disegna i cluster
const colori = ['#4f46e5','#0d9488','#dc2626'];
const tracce = [];
for (let k = 0; k < K; k++) {
  const membri = punti.filter((_, i) => assegnazioni[i] === k);
  tracce.push({
    x: membri.map(p=>p[0]), y: membri.map(p=>p[1]),
    mode: 'markers', type: 'scatter', name: 'Cluster ' + (k+1),
    marker: { size: 10, color: colori[k] }
  });
}
// Centri
tracce.push({
  x: centri.map(c=>c[0]), y: centri.map(c=>c[1]),
  mode: 'markers', type: 'scatter', name: 'Centri',
  marker: { size: 22, color: 'black', symbol: 'x' }
});

Plotly.newPlot('cluster', tracce, { title: 'Clustering K-Means (K=3)' });
</script>

</body>
</html>
๐ŸŽฏ K-Means alterna due passi finchรฉ i centri si stabilizzano: (1) assegna ogni punto al centro piรน vicino, (2) sposta ogni centro nella media dei suoi punti.

Regressione lineare

La regressione lineare trova la retta che meglio approssima i dati. รˆ il "Hello World" del machine learning supervisionato. La retta ha forma y = mยทx + b dove il modello impara la pendenza m e l'intercetta b.

HTML + Plotly.js โ€” regressione lineare con gradient descent
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>

<h3>๐Ÿ“ˆ Regressione lineare appresa dai dati</h3>
<div id="reg"></div>
<p id="eq" style="font-family:monospace;font-size:1.1rem;color:#4f46e5"></p>

<script>
// Dati (con relazione lineare + rumore)
const X = [1,2,3,4,5,6,7,8,9,10];
const Y = [2.1,3.9,6.2,7.8,10.1,12.3,13.8,16.2,18.1,20.3];

// Gradient descent per trovare m e b
let m = 0, b = 0;
const lr = 0.01, n = X.length;
for (let it = 0; it < 2000; it++) {
  let dm = 0, db = 0;
  for (let i = 0; i < n; i++) {
    const pred = m*X[i] + b;
    const err  = pred - Y[i];
    dm += (2/n) * err * X[i];
    db += (2/n) * err;
  }
  m -= lr * dm;
  b -= lr * db;
}

document.getElementById('eq').textContent =
  'Retta appresa:  y = ' + m.toFixed(3) + ' x + ' + b.toFixed(3);

// Punti reali + retta predetta
const rettaX = [0, 11];
const rettaY = rettaX.map(x => m*x + b);

Plotly.newPlot('reg', [
  { x: X, y: Y, mode:'markers', type:'scatter', name:'Dati reali',
    marker:{ size:12, color:'#0d9488' } },
  { x: rettaX, y: rettaY, mode:'lines', name:'Modello',
    line:{ color:'#dc2626', width:3 } }
], { title:'Regressione lineare', xaxis:{title:'X'}, yaxis:{title:'Y'} });
</script>

</body>
</html>
Loss (MSE) = (1/n) ยท ฮฃ (yโ‚šแตฃโ‚‘แตฅแตขโ‚›โ‚œโ‚’ โˆ’ yแตฃโ‚‘โ‚โ‚—โ‚‘)ยฒ

Il gradient descent calcola la derivata della loss rispetto a m e b e li aggiusta nella direzione che riduce l'errore.

Deep Learning

Il deep learning usa reti neurali con molti strati nascosti (da cui "profondo"). Ogni strato impara feature sempre piรน astratte: i primi strati riconoscono bordi, quelli successivi forme, e gli ultimi oggetti interi.

ArchitetturaUso principale
CNN (Convolutional)Immagini e visione artificiale
RNN / LSTMSequenze, testo, serie temporali
TransformerLinguaggio naturale (GPT, BERT)
GANGenerazione di immagini

Struttura di una rete neurale

  • Input layer: riceve i dati (es. pixel di un'immagine)
  • Hidden layers: elaborano e trasformano le informazioni
  • Output layer: produce la previsione finale
๐Ÿค– I Large Language Model come quelli alla base degli assistenti AI usano l'architettura Transformer con miliardi di parametri, addestrati su enormi quantitร  di testo.

Brain.js

Brain.js รจ una libreria JavaScript che rende semplicissimo creare e addestrare reti neurali nel browser. Vediamo una rete che impara la funzione logica XOR โ€” un problema che un singolo percettrone NON puรฒ risolvere, ma una rete con strato nascosto sรฌ.

HTML + Brain.js โ€” rete neurale impara XOR
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/brain.js@2.0.0-beta.23/dist/browser.js"></script>
  <style>
    body { font-family: Arial; padding: 20px; }
    pre  { background: #1e293b; color: #e2e8f0; padding: 14px; border-radius: 8px; font-size: 1rem; }
  </style>
</head>
<body>

<h3>๐Ÿง  Brain.js: rete neurale impara XOR</h3>
<pre id="out">Addestramento in corso...</pre>

<script>
// Crea una rete neurale
const net = new brain.NeuralNetwork({ hiddenLayers: [3] });

// Dati di training: XOR logico
const dati = [
  { input: [0,0], output: [0] },
  { input: [0,1], output: [1] },
  { input: [1,0], output: [1] },
  { input: [1,1], output: [0] }
];

// Addestra
const stats = net.train(dati, { iterations: 2000, errorThresh: 0.005 });

// Testa la rete
let testo = 'Rete addestrata in ' + stats.iterations + ' iterazioni\n';
testo += 'Errore finale: ' + stats.error.toFixed(5) + '\n\n';
testo += 'Risultati XOR:\n';
dati.forEach(d => {
  const pred = net.run(d.input)[0];
  testo += d.input[0] + ' XOR ' + d.input[1] +
           ' = ' + pred.toFixed(3) +
           ' (arrotondato: ' + Math.round(pred) + ')\n';
});

document.getElementById('out').textContent = testo;
</script>

</body>
</html>
๐Ÿ’ก Lo strato nascosto hiddenLayers: [3] permette alla rete di apprendere relazioni non lineari come XOR. Senza di esso, sarebbe impossibile.

TensorFlow.js

TensorFlow.js รจ la versione JavaScript di TensorFlow, la libreria di Google per il deep learning. Permette di addestrare ed eseguire modelli direttamente nel browser, sfruttando la GPU via WebGL.

HTML + TensorFlow.js โ€” addestra un modello a prevedere y = 2x โˆ’ 1
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.20.0/dist/tf.min.js"></script>
  <style>
    body { font-family: Arial; padding: 20px; }
    pre  { background: #1e293b; color: #e2e8f0; padding: 14px; border-radius: 8px; font-size: 1rem; }
  </style>
</head>
<body>

<h3>๐Ÿ”ข TensorFlow.js: impara la relazione y = 2x โˆ’ 1</h3>
<pre id="out">Addestramento in corso (attendi qualche secondo)...</pre>

<script>
async function run() {
  // Crea un modello con un singolo neurone
  const model = tf.sequential();
  model.add(tf.layers.dense({ units: 1, inputShape: [1] }));
  model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' });

  // Dati: y = 2x - 1
  const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
  const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

  // Addestra per 200 epoche
  await model.fit(xs, ys, { epochs: 200 });

  // Previsione per x = 10 (atteso: 19)
  const pred = model.predict(tf.tensor2d([10], [1, 1]));
  const valore = (await pred.data())[0];

  document.getElementById('out').textContent =
    'Modello addestrato!\n\n' +
    'Previsione per x = 10:\n' +
    'y = ' + valore.toFixed(2) + '   (valore atteso: 19)\n\n' +
    'Il modello ha imparato da solo che y โ‰ˆ 2x - 1';
}
run();
</script>

</body>
</html>
โš™๏ธ tf.sequential() crea un modello a strati. model.fit() esegue il training, model.predict() fa le previsioni. รˆ lo stesso flusso di TensorFlow in Python.

Tensori

Un tensore รจ la struttura dati fondamentale del deep learning: un array multidimensionale. Scalari, vettori e matrici sono tutti tensori di diverso "rango".

RangoNomeEsempio
0Scalare5
1Vettore[1, 2, 3]
2Matrice[[1,2],[3,4]]
3+TensoreImmagine RGB: [altezza, larghezza, 3]
HTML + TensorFlow.js โ€” operazioni sui tensori
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.20.0/dist/tf.min.js"></script>
  <style>
    body { font-family: Arial; padding: 20px; }
    pre  { background: #1e293b; color: #e2e8f0; padding: 14px; border-radius: 8px; }
  </style>
</head>
<body>

<h3>๐Ÿงฎ Operazioni sui tensori</h3>
<pre id="out"></pre>

<script>
async function run() {
  const log = [];

  // Vettore (tensore di rango 1)
  const a = tf.tensor1d([1, 2, 3, 4]);
  log.push('Vettore a = ' + a.arraySync());

  // Operazioni elemento per elemento
  log.push('a * 2 = ' + a.mul(2).arraySync());
  log.push('a + 10 = ' + a.add(10).arraySync());

  // Matrice (tensore di rango 2)
  const m = tf.tensor2d([[1, 2], [3, 4]]);
  log.push('\nMatrice m:');
  log.push(JSON.stringify(m.arraySync()));

  // Prodotto matriciale
  const prod = m.matMul(m);
  log.push('\nm ร— m:');
  log.push(JSON.stringify(prod.arraySync()));

  // Statistiche
  log.push('\nSomma di a: ' + (await a.sum().data())[0]);
  log.push('Media di a: ' + (await a.mean().data())[0]);

  document.getElementById('out').textContent = log.join('\n');
}
run();
</script>

</body>
</html>

Algebra lineare per l'AI

La matematica del machine learning รจ soprattutto algebra lineare. Le reti neurali sono, in fondo, lunghe sequenze di moltiplicazioni tra matrici.

Funzioni lineari

y = mยทx + b (la retta: m = pendenza, b = intercetta)

Una funzione lineare ha una pendenza costante. Le reti neurali combinano funzioni lineari con attivazioni non lineari per modellare relazioni complesse.

HTML + Plotly.js โ€” visualizzare la pendenza di una retta
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>

<h3>Rette con pendenze diverse</h3>
<div id="rette"></div>

<script>
const x = [];
for (let v = -5; v <= 5; v += 0.5) x.push(v);

function retta(m, b) { return x.map(v => m*v + b); }

Plotly.newPlot('rette', [
  { x, y: retta(1, 0),    name: 'y = x',       line:{color:'#4f46e5'} },
  { x, y: retta(2, 1),    name: 'y = 2x + 1',  line:{color:'#0d9488'} },
  { x, y: retta(-0.5, 2), name: 'y = -0.5x+2', line:{color:'#dc2626'} }
], {
  title: 'La pendenza (m) determina l\'inclinazione',
  xaxis: { title: 'x', zeroline: true },
  yaxis: { title: 'y', zeroline: true }
});
</script>

</body>
</html>

Vettori e Matrici

Un vettore รจ una lista di numeri (una direzione nello spazio). Una matrice รจ una griglia di numeri. Le operazioni chiave nel ML sono il prodotto scalare e la moltiplicazione tra matrici.

Prodotto scalare: a ยท b = aโ‚bโ‚ + aโ‚‚bโ‚‚ + ... + aโ‚™bโ‚™
HTML + JS โ€” vettori, prodotto scalare, matrici
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 20px; }
    pre  { background: #1e293b; color: #e2e8f0; padding: 14px; border-radius: 8px; }
  </style>
</head>
<body>

<h3>๐Ÿงฎ Algebra dei vettori in JavaScript</h3>
<pre id="out"></pre>

<script>
const log = [];

// Vettori
const a = [1, 2, 3];
const b = [4, 5, 6];

// Somma vettoriale
const somma = a.map((v, i) => v + b[i]);
log.push('a + b = [' + somma + ']');

// Prodotto scalare (dot product)
const dot = a.reduce((s, v, i) => s + v * b[i], 0);
log.push('a ยท b = ' + dot);

// Norma (lunghezza) di un vettore
const norma = Math.hypot(...a);
log.push('|a| = ' + norma.toFixed(3));

// Moltiplicazione matrice ร— vettore
const M = [[1, 0], [0, 2], [1, 1]];  // 3ร—2
const x = [3, 4];                    // 2
const Mx = M.map(riga => riga.reduce((s, v, i) => s + v * x[i], 0));
log.push('\nM ร— x = [' + Mx + ']');

document.getElementById('out').textContent = log.join('\n');
</script>

</body>
</html>
๐Ÿ”ข In una rete neurale, l'output di uno strato รจ attivazione(W ยท x + b) dove W รจ la matrice dei pesi e x il vettore di input. Tutto si riduce a moltiplicazioni tra matrici.

Statistica di base

La statistica descrive i dati e quantifica l'incertezza. Concetti come media, varianza e distribuzione sono indispensabili nel machine learning.

MisuraSignificato
MediaValore centrale (somma / conteggio)
MedianaValore che divide i dati a metร 
VarianzaQuanto i dati si disperdono dalla media
Deviazione standardRadice della varianza (stessa unitร  dei dati)
HTML + JS โ€” statistiche descrittive
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 20px; }
    pre  { background: #1e293b; color: #e2e8f0; padding: 14px; border-radius: 8px; }
  </style>
</head>
<body>

<h3>๐Ÿ“Š Statistiche descrittive</h3>
<pre id="out"></pre>

<script>
const dati = [4, 8, 15, 16, 23, 42, 8, 15, 16, 4];
const n = dati.length;

// Media
const media = dati.reduce((s, v) => s + v, 0) / n;

// Mediana
const ord = [...dati].sort((a, b) => a - b);
const mediana = n % 2 === 0
  ? (ord[n/2 - 1] + ord[n/2]) / 2
  : ord[(n-1)/2];

// Varianza e deviazione standard
const varianza = dati.reduce((s, v) => s + (v - media)**2, 0) / n;
const devStd = Math.sqrt(varianza);

// Moda
const conteggi = {};
dati.forEach(v => conteggi[v] = (conteggi[v] || 0) + 1);
const moda = Object.keys(conteggi).reduce((a, b) =>
  conteggi[a] > conteggi[b] ? a : b);

document.getElementById('out').textContent =
  'Dati: [' + dati + ']\n\n' +
  'Media:               ' + media.toFixed(2) + '\n' +
  'Mediana:             ' + mediana + '\n' +
  'Moda:                ' + moda + '\n' +
  'Varianza:            ' + varianza.toFixed(2) + '\n' +
  'Deviazione standard: ' + devStd.toFixed(2);
</script>

</body>
</html>
๐Ÿ’ก La normalizzazione dei dati (sottrarre la media e dividere per la deviazione standard) รจ un passaggio quasi sempre necessario prima di addestrare un modello.

Etica dell'Intelligenza Artificiale

L'AI รจ potente, ma solleva questioni etiche importanti che ogni sviluppatore deve conoscere.

TemaDescrizione
Bias (pregiudizio)Se i dati di training sono distorti, il modello eredita e amplifica i pregiudizi
PrivacyI modelli possono memorizzare dati sensibili usati nell'addestramento
TrasparenzaLe reti profonde sono "scatole nere" difficili da interpretare
LavoroL'automazione trasforma e sostituisce alcune professioni
Responsabilitร Chi รจ responsabile di una decisione presa da un'AI?
โš ๏ธ Un modello รจ buono solo quanto i dati con cui รจ stato addestrato. "Garbage in, garbage out": dati di scarsa qualitร  o distorti producono modelli inaffidabili e ingiusti.
๐ŸŒ Sviluppare AI in modo responsabile significa curare la qualitร  dei dati, testare i bias, proteggere la privacy ed essere trasparenti sui limiti del modello.

Esercizi pratici

๐Ÿ† Esercizio 1 โ€” Classificatore OR

Modifica l'esempio del percettrone per fargli imparare la funzione logica OR invece di AND. Cambia gli output attesi nel dataset e verifica che converga. Poi prova con NAND.

๐Ÿ† Esercizio 2 โ€” La tua regressione

Usa l'esempio di regressione lineare con dati tuoi: inventa 10 coppie (ore di studio, voto). Addestra il modello e prevedi il voto per 7 ore di studio. Visualizza punti e retta con Plotly.

๐Ÿ† Esercizio 3 โ€” Rete neurale con Brain.js

Con Brain.js crea una rete che, dati 3 input binari (es. caratteristiche di un animale), classifichi se รจ un "mammifero" o no. Inventa 6-8 esempi di training e testa la rete su un nuovo caso.

๐Ÿ† Esercizio 4 โ€” Statistiche su dati reali

Prendi i voti dei tuoi ultimi 10 esami/verifiche, calcola media, mediana, varianza e deviazione standard con JavaScript, poi disegna un istogramma con Plotly.

E ora?

Complimenti! Hai completato il corso di Intelligenza Artificiale e Machine Learning. Ora conosci i concetti fondamentali e hai addestrato veri modelli direttamente nel browser.

Cosa hai imparato:
  • Differenza tra AI, Machine Learning e Deep Learning
  • Percettroni e reti neurali da zero
  • Training, testing, overfitting e underfitting
  • Apprendimento supervisionato, non supervisionato e per rinforzo
  • Regressione lineare con gradient descent
  • Clustering K-Means
  • Reti neurali con Brain.js e TensorFlow.js
  • Algebra lineare, vettori, matrici, tensori e statistica
  • Etica e uso responsabile dell'AI

Il passo successivo? Approfondisci il machine learning in Python con scikit-learn e TensorFlow, dove troverai un ecosistema ancora piรน ricco per progetti reali.

Vai al corso Python โ†’Vai al corso Data Science โ†’Torna ai Corsi๐Ÿ“… Prenota una lezione
Provalo tu
Anteprima