www.xbdev.net
xbdev - software development
Friday February 6, 2026
Home | Contact | Support | WebGPU Graphics and Compute ... | Neural Networks and WebGPU Compute.. Learning from Data.....
     
 

Neural Networks and WebGPU Compute..

Learning from Data.....

 



Name and Gender


Given a dataset of names and their associated gender (male/female) try and have the neural network see if their is any correlating patterns.

Few things happening - the letters of the name are converted to a binary value (ascii to number scale). The names for males and females are loaded in and put in a large array.



Complete Code


// Name to Gender

await xinitialize( {layers:[7,6,2], build:'cpu'learningrate:0.2} );

var 
INPUT_LENGTH 7;

async function dynamicscript(url) {
   
let fp await fetchurl );
   
let ft await fp.text();
   var 
script document.createElement('script');
   
//script.src = 'https://cdn.plot.ly/plotly-2.1.0.min.js';
   
script.innerHTML ft;
   
document.head.appendChild(script); 
}
await dynamicscript'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js' );
await dynamicscript'https://webgpulab.xbdev.net/var/resources/female.json' );
await dynamicscript'https://webgpulab.xbdev.net/var/resources/male.json' );


var 
females JSON.parse(female);
var 
males   JSON.parse(male);

/*
display the console.log output to the window
*/
let divLog document.createElement('div');
divLog.id 'debug';
divLog.style.left     "0px";
divLog.style.top      "0px";
divLog.style.width    "500";
divLog.style.height   "500";
divLog.style['box-sizing'] = 'border-box'
divLog.style['padding'] = "10px";
divLog.style["pointer-events"] = "none";

console.oldlog console.log;
console.log7 = function(txt){
    
console.oldlogtxt );
    
// extract code to get the line number the log was called from
    
    
var err = new Error();
    var 
line err.stack.split("\n")[2];
    var 
index line.indexOf("at ");
    var 
clean line.slice(index+2line.length);
    
clean clean.split('/');
    
clean cleanclean.length-];
    
    
// write the text to the debug div window
    
divLog.innerHTML += 'debug: ['+clean+'] ' txt '<br>';
    
    
//divLog += txt + '<br>';
}

function 
convertNameToInput(name) {
   
name name.toLowerCase();
   if(
name.length INPUT_LENGTH)
       
name name.substring(INPUT_LENGTH);
   while(
name.length INPUT_LENGTH)
       
name " " name;
   var 
characters name.split("");
   return 
characters.map(
      (
c) => == " " c.charCodeAt(0)/1000
   
);
}

var 
trainingData = [];

for(var 
0females.lengthi++) {
    
trainingData.push({
        
inputsconvertNameToInput(females[i]),
        
outputs: [01// Male = false, Female = true
    
});
}

for(var 
0males.lengthi++) {
    for(var 
02j++) {
        
trainingData.push({
            
inputsconvertNameToInput(males[i]),
            
outputs: [10// Male = true, Female = false
        
});
    }
}

for(var 
i=0;i<10;i++)
    
trainingData _.shuffle(trainingData);


console.logtrainingData[0] );

for (
let epoch 0epoch <= 10epoch++) {
  
let indexes = Array.from( Array( trainingData.length-100 ).keys() );
  
indexes.sort(() => Math.random() - 0.5);
  
  for (
let j of indexes) {
    
await xactivate(  trainingData[0].inputs ); 
    
await xpropagatetrainingData[0].outputs);
  }
  
  if (
epoch === 0) {
    
let cost 0;
    for (
let j 0trainingData.lengthj++) {
      
let o await xactivate(  trainingData[j].inputs );
      for (
let b=0b<trainingData[j].outputs.lengthb++)
      {
        
cost += Math.powtrainingData[j].outputs[b] - o[b], 2);
      }
    }
    
cost /= 4;
    
console.log(`epoch ${epoch} mean squared error: ${cost}`);
  }
  
}

async function getGender(name) {
    var 
result await xactivateconvertNameToInput(name) );
    if(
result[0] > result[1])
       return 
"Male (" + (result[0]*100).toFixed() + "% sure)";
    return 
"Female (" + (result[1]*100).toFixed() + "% sure)";
}

console.log('ready to process names');

console.log'Bob:'   await getGender('Bob')   );
console.log'John:'  await getGender('John')  );
console.log'Alice:' await getGender('Alice') );



Things to Try


• Try linking other information into the dataset (e.g., country, city or age)
• Predict other information other than just if the name is linked to gender (e.g., hair color, spicy food, )
• Look around for datasets with names and associated characteristics online (free open source dataset) - see what information can be associated with a name (even if it seems random - can the neural network identify any characteristics/probabilities)



Resources and Links


• WebGPU Lab Example [LINK]
















WebGPU by Example: Fractals, Image Effects, Ray-Tracing, Procedural Geometry, 2D/3D, Particles, Simulations WebGPU Compute graphics and animations using the webgpu api 12 week course kenwright learn webgpu api kenwright programming compute and graphics applications with html5 and webgpu api kenwright real-time 3d graphics with webgpu kenwright webgpu api develompent a quick start guide kenwright webgpu by example 2022 kenwright webgpu gems kenwright webgpu interactive compute and graphics visualization cookbook kenwright wgsl webgpu shading language cookbook kenwright wgsl webgpugems shading language cookbook kenwright



 
Advert (Support Website)

 
 Visitor:
Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.