API tools faq
paste
XTaylorSpenceX

Neural Net Nurture

XTaylorSpenceX
Sep 25th, 2025
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 39.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Neural Net Nurture - Enhanced</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.  
  14.         body {
  15.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  16.             background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  17.             min-height: 100vh;
  18.             display: flex;
  19.             align-items: center;
  20.             justify-content: center;
  21.             overflow: hidden;
  22.             position: relative;
  23.             color: white;
  24.         }
  25.  
  26.         .container {
  27.             width: 90%;
  28.             max-width: 1200px;
  29.             background: rgba(255, 255, 255, 0.1);
  30.             backdrop-filter: blur(10px);
  31.             border-radius: 30px;
  32.             padding: 40px;
  33.             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  34.             position: relative;
  35.             z-index: 10;
  36.             border: 1px solid rgba(255, 255, 255, 0.2);
  37.         }
  38.  
  39.         .header {
  40.             text-align: center;
  41.             margin-bottom: 30px;
  42.         }
  43.  
  44.         h1 {
  45.             color: #64ffda;
  46.             font-size: 2.5em;
  47.             margin-bottom: 10px;
  48.             text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
  49.         }
  50.  
  51.         .pet-name {
  52.             font-size: 1.5em;
  53.             color: #64ffda;
  54.             margin-bottom: 20px;
  55.             font-weight: bold;
  56.             text-shadow: 0 0 5px rgba(100, 255, 218, 0.5);
  57.         }
  58.  
  59.         .level-display {
  60.             font-size: 1.2em;
  61.             margin-bottom: 10px;
  62.             color: #ff79c6;
  63.         }
  64.  
  65.         .stats-container {
  66.             display: flex;
  67.             justify-content: space-around;
  68.             margin-bottom: 30px;
  69.             flex-wrap: wrap;
  70.         }
  71.  
  72.         .stat {
  73.             text-align: center;
  74.             padding: 15px;
  75.             background: rgba(100, 255, 218, 0.1);
  76.             border-radius: 15px;
  77.             color: white;
  78.             min-width: 120px;
  79.             margin: 5px;
  80.             border: 1px solid rgba(100, 255, 218, 0.3);
  81.         }
  82.  
  83.         .stat-label {
  84.             font-size: 0.9em;
  85.             opacity: 0.9;
  86.             margin-bottom: 5px;
  87.             color: #64ffda;
  88.         }
  89.  
  90.         .stat-value {
  91.             font-size: 1.5em;
  92.             font-weight: bold;
  93.         }
  94.  
  95.         .neural-network {
  96.             position: relative;
  97.             height: 400px;
  98.             margin: 30px 0;
  99.             background: radial-gradient(ellipse at center, rgba(100, 255, 218, 0.1) 0%, transparent 70%);
  100.             border-radius: 20px;
  101.             overflow: visible;
  102.             border: 1px solid rgba(100, 255, 218, 0.2);
  103.         }
  104.  
  105.         .neuron {
  106.             position: absolute;
  107.             width: 40px;
  108.             height: 40px;
  109.             background: radial-gradient(circle, #64ffda, #2979ff);
  110.             border-radius: 50%;
  111.             display: flex;
  112.             align-items: center;
  113.             justify-content: center;
  114.             color: #0a192f;
  115.             font-weight: bold;
  116.             box-shadow: 0 0 20px rgba(100, 255, 218, 0.5);
  117.             animation: pulse 2s ease-in-out infinite;
  118.             transition: all 0.3s ease;
  119.             cursor: pointer;
  120.             z-index: 5;
  121.         }
  122.  
  123.         .neuron:hover {
  124.             transform: scale(1.2);
  125.             box-shadow: 0 0 30px rgba(100, 255, 218, 0.8);
  126.         }
  127.  
  128.         .neuron.active {
  129.             animation: activePulse 0.5s ease-in-out;
  130.             box-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
  131.         }
  132.  
  133.         @keyframes pulse {
  134.             0%, 100% { transform: scale(1); opacity: 0.9; }
  135.             50% { transform: scale(1.1); opacity: 1; }
  136.         }
  137.  
  138.         @keyframes activePulse {
  139.             0% { transform: scale(1); }
  140.             50% { transform: scale(1.5); }
  141.             100% { transform: scale(1); }
  142.         }
  143.  
  144.         .synapse {
  145.             position: absolute;
  146.             height: 2px;
  147.             background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.6), transparent);
  148.             transform-origin: left center;
  149.             animation: synapseFlow 3s ease-in-out infinite;
  150.             pointer-events: none;
  151.             z-index: 1;
  152.         }
  153.  
  154.         @keyframes synapseFlow {
  155.             0% { opacity: 0.3; }
  156.             50% { opacity: 1; }
  157.             100% { opacity: 0.3; }
  158.         }
  159.  
  160.         .thought-bubble {
  161.             position: absolute;
  162.             top: -60px;
  163.             left: 50%;
  164.             transform: translateX(-50%);
  165.             background: rgba(10, 25, 47, 0.9);
  166.             padding: 15px 20px;
  167.             border-radius: 20px;
  168.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  169.             font-size: 14px;
  170.             color: #64ffda;
  171.             opacity: 0;
  172.             transition: opacity 0.3s ease;
  173.             z-index: 20;
  174.             border: 1px solid rgba(100, 255, 218, 0.3);
  175.         }
  176.  
  177.         .thought-bubble.show {
  178.             opacity: 1;
  179.         }
  180.  
  181.         .thought-bubble:after {
  182.             content: '';
  183.             position: absolute;
  184.             bottom: -10px;
  185.             left: 50%;
  186.             transform: translateX(-50%);
  187.             width: 0;
  188.             height: 0;
  189.             border-left: 10px solid transparent;
  190.             border-right: 10px solid transparent;
  191.             border-top: 10px solid rgba(10, 25, 47, 0.9);
  192.         }
  193.  
  194.         .controls {
  195.             display: flex;
  196.             justify-content: center;
  197.             gap: 15px;
  198.             flex-wrap: wrap;
  199.             margin-top: 30px;
  200.         }
  201.  
  202.         .btn {
  203.             padding: 12px 25px;
  204.             border: none;
  205.             border-radius: 25px;
  206.             font-size: 16px;
  207.             font-weight: bold;
  208.             cursor: pointer;
  209.             transition: all 0.3s ease;
  210.             color: white;
  211.             position: relative;
  212.             overflow: hidden;
  213.             background: rgba(100, 255, 218, 0.2);
  214.             border: 1px solid rgba(100, 255, 218, 0.3);
  215.         }
  216.  
  217.         .btn:before {
  218.             content: '';
  219.             position: absolute;
  220.             top: 50%;
  221.             left: 50%;
  222.             width: 0;
  223.             height: 0;
  224.             border-radius: 50%;
  225.             background: rgba(255, 255, 255, 0.1);
  226.             transform: translate(-50%, -50%);
  227.             transition: width 0.6s, height 0.6s;
  228.         }
  229.  
  230.         .btn:hover:before {
  231.             width: 300px;
  232.             height: 300px;
  233.         }
  234.  
  235.         .btn-feed {
  236.             background: linear-gradient(135deg, rgba(79, 172, 254, 0.3), rgba(0, 242, 254, 0.3));
  237.         }
  238.  
  239.         .btn-train {
  240.             background: linear-gradient(135deg, rgba(67, 233, 123, 0.3), rgba(56, 249, 215, 0.3));
  241.         }
  242.  
  243.         .btn-scold {
  244.             background: linear-gradient(135deg, rgba(250, 112, 154, 0.3), rgba(254, 225, 64, 0.3));
  245.         }
  246.  
  247.         .btn-puzzle {
  248.             background: linear-gradient(135deg, rgba(48, 207, 208, 0.3), rgba(51, 8, 103, 0.3));
  249.         }
  250.  
  251.         .modal {
  252.             display: none;
  253.             position: fixed;
  254.             top: 0;
  255.             left: 0;
  256.             width: 100%;
  257.             height: 100%;
  258.             background: rgba(0, 0, 0, 0.7);
  259.             z-index: 100;
  260.             align-items: center;
  261.             justify-content: center;
  262.         }
  263.  
  264.         .modal.show {
  265.             display: flex;
  266.         }
  267.  
  268.         .modal-content {
  269.             background: rgba(10, 25, 47, 0.95);
  270.             padding: 30px;
  271.             border-radius: 20px;
  272.             max-width: 500px;
  273.             width: 90%;
  274.             text-align: center;
  275.             border: 1px solid rgba(100, 255, 218, 0.3);
  276.         }
  277.  
  278.         .modal h2 {
  279.             color: #64ffda;
  280.             margin-bottom: 20px;
  281.         }
  282.  
  283.         .dataset-option, .puzzle-option {
  284.             padding: 10px 20px;
  285.             margin: 10px;
  286.             border: 2px solid rgba(100, 255, 218, 0.5);
  287.             border-radius: 15px;
  288.             cursor: pointer;
  289.             transition: all 0.3s ease;
  290.             display: inline-block;
  291.             background: rgba(100, 255, 218, 0.1);
  292.         }
  293.  
  294.         .dataset-option:hover, .puzzle-option:hover {
  295.             background: rgba(100, 255, 218, 0.3);
  296.             color: white;
  297.             transform: scale(1.05);
  298.         }
  299.  
  300.         .close-modal {
  301.             margin-top: 20px;
  302.             padding: 10px 20px;
  303.             background: rgba(100, 255, 218, 0.2);
  304.             color: white;
  305.             border: none;
  306.             border-radius: 15px;
  307.             cursor: pointer;
  308.             border: 1px solid rgba(100, 255, 218, 0.3);
  309.         }
  310.  
  311.         .particle {
  312.             position: absolute;
  313.             width: 4px;
  314.             height: 4px;
  315.             background: rgba(100, 255, 218, 0.6);
  316.             border-radius: 50%;
  317.             pointer-events: none;
  318.             animation: float 3s ease-in-out infinite;
  319.         }
  320.  
  321.         @keyframes float {
  322.             0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
  323.             25% { opacity: 1; }
  324.             75% { opacity: 1; }
  325.             100% { transform: translateY(-100px) translateX(50px); }
  326.         }
  327.  
  328.         .mood-indicator {
  329.             text-align: center;
  330.             font-size: 3em;
  331.             margin: 20px 0;
  332.         }
  333.  
  334.         .learning-progress-container {
  335.             width: 100%;
  336.             margin: 20px 0;
  337.             position: relative;
  338.         }
  339.  
  340.         .progress-header {
  341.             display: flex;
  342.             justify-content: space-between;
  343.             margin-bottom: 5px;
  344.             font-size: 0.9em;
  345.             color: #64ffda;
  346.         }
  347.  
  348.         .learning-progress {
  349.             width: 100%;
  350.             height: 25px;
  351.             background: rgba(255, 255, 255, 0.1);
  352.             border-radius: 12px;
  353.             overflow: hidden;
  354.             position: relative;
  355.             border: 1px solid rgba(100, 255, 218, 0.3);
  356.         }
  357.  
  358.         .progress-bar {
  359.             height: 100%;
  360.             background: linear-gradient(90deg, #64ffda, #2979ff);
  361.             width: 0%;
  362.             transition: width 0.5s ease;
  363.             position: relative;
  364.             overflow: hidden;
  365.         }
  366.  
  367.         .progress-bar:after {
  368.             content: '';
  369.             position: absolute;
  370.             top: 0;
  371.             left: 0;
  372.             bottom: 0;
  373.             right: 0;
  374.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  375.             animation: shimmer 2s infinite;
  376.         }
  377.  
  378.         @keyframes shimmer {
  379.             0% { transform: translateX(-100%); }
  380.             100% { transform: translateX(100%); }
  381.         }
  382.  
  383.         .info-text {
  384.             text-align: center;
  385.             color: #64ffda;
  386.             font-style: italic;
  387.             margin: 10px 0;
  388.             min-height: 24px;
  389.         }
  390.  
  391.         .corruption-warning {
  392.             color: #ff79c6;
  393.             font-size: 0.8em;
  394.             margin-top: 5px;
  395.             text-align: center;
  396.         }
  397.  
  398.         .evolution-modal {
  399.             display: none;
  400.             position: fixed;
  401.             top: 0;
  402.             left: 0;
  403.             width: 100%;
  404.             height: 100%;
  405.             background: rgba(0, 0, 0, 0.9);
  406.             z-index: 200;
  407.             align-items: center;
  408.             justify-content: center;
  409.             animation: fadeIn 0.5s ease;
  410.         }
  411.  
  412.         .evolution-modal.show {
  413.             display: flex;
  414.         }
  415.  
  416.         .evolution-content {
  417.             background: linear-gradient(135deg, #0f0c29, #302b63);
  418.             padding: 40px;
  419.             border-radius: 20px;
  420.             max-width: 600px;
  421.             width: 90%;
  422.             text-align: center;
  423.             border: 2px solid #64ffda;
  424.             box-shadow: 0 0 30px rgba(100, 255, 218, 0.5);
  425.             animation: scaleIn 0.5s ease;
  426.         }
  427.  
  428.         @keyframes fadeIn {
  429.             from { opacity: 0; }
  430.             to { opacity: 1; }
  431.         }
  432.  
  433.         @keyframes scaleIn {
  434.             from { transform: scale(0.8); opacity: 0; }
  435.             to { transform: scale(1); opacity: 1; }
  436.         }
  437.  
  438.         .evolution-title {
  439.             color: #64ffda;
  440.             font-size: 2em;
  441.             margin-bottom: 20px;
  442.             text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
  443.         }
  444.  
  445.         .new-name {
  446.             font-size: 2.5em;
  447.             color: #ff79c6;
  448.             margin: 20px 0;
  449.             text-shadow: 0 0 10px rgba(255, 121, 198, 0.5);
  450.             animation: glow 2s infinite alternate;
  451.         }
  452.  
  453.         @keyframes glow {
  454.             from { text-shadow: 0 0 10px rgba(255, 121, 198, 0.5); }
  455.             to { text-shadow: 0 0 20px rgba(255, 121, 198, 0.8), 0 0 30px rgba(255, 121, 198, 0.6); }
  456.         }
  457.  
  458.         .evolution-message {
  459.             font-size: 1.2em;
  460.             margin-bottom: 30px;
  461.             color: #64ffda;
  462.         }
  463.  
  464.         .continue-btn {
  465.             padding: 12px 30px;
  466.             background: rgba(100, 255, 218, 0.2);
  467.             color: white;
  468.             border: 1px solid rgba(100, 255, 218, 0.5);
  469.             border-radius: 25px;
  470.             font-size: 16px;
  471.             cursor: pointer;
  472.             transition: all 0.3s ease;
  473.         }
  474.  
  475.         .continue-btn:hover {
  476.             background: rgba(100, 255, 218, 0.3);
  477.             transform: scale(1.05);
  478.         }
  479.     </style>
  480. </head>
  481. <body>
  482.     <div class="container">
  483.         <div class="header">
  484.             <h1>🧠 Neural Net Nurture - Enhanced</h1>
  485.             <div class="pet-name" id="petName">Baby Neuron</div>
  486.             <div class="level-display">Level: <span id="level">1</span></div>
  487.         </div>
  488.  
  489.         <div class="stats-container">
  490.             <div class="stat">
  491.                 <div class="stat-label">Intelligence</div>
  492.                 <div class="stat-value" id="intelligence">100</div>
  493.             </div>
  494.             <div class="stat">
  495.                 <div class="stat-label">Accuracy</div>
  496.                 <div class="stat-value" id="accuracy">40%</div>
  497.             </div>
  498.             <div class="stat">
  499.                 <div class="stat-label">Happiness</div>
  500.                 <div class="stat-value" id="happiness">75</div>
  501.             </div>
  502.             <div class="stat">
  503.                 <div class="stat-label">Energy</div>
  504.                 <div class="stat-value" id="energy">100</div>
  505.             </div>
  506.             <div class="stat">
  507.                 <div class="stat-label">Age</div>
  508.                 <div class="stat-value" id="age">0d</div>
  509.             </div>
  510.         </div>
  511.  
  512.         <div class="mood-indicator" id="mood">😊</div>
  513.  
  514.         <div class="learning-progress-container">
  515.             <div class="progress-header">
  516.                 <span>Learning Progress</span>
  517.                 <span id="progressPercent">0%</span>
  518.             </div>
  519.             <div class="learning-progress">
  520.                 <div class="progress-bar" id="progressBar"></div>
  521.             </div>
  522.             <div class="corruption-warning">⚠️ Progress decreases by 0.24% every second due to data corruption and cosmic radiation</div>
  523.         </div>
  524.  
  525.         <div class="info-text" id="statusMessage">Your neural network is ready to learn!</div>
  526.  
  527.         <div class="neural-network" id="neuralNetwork">
  528.             <div class="thought-bubble" id="thoughtBubble"></div>
  529.         </div>
  530.  
  531.         <div class="controls">
  532.             <button class="btn btn-feed" onclick="showFeedModal()">🍼 Feed Data</button>
  533.             <button class="btn btn-train" onclick="trainNetwork()">🎯 Train</button>
  534.             <button class="btn btn-scold" onclick="scoldNetwork()">⚠️ Scold Overfit</button>
  535.             <button class="btn btn-puzzle" onclick="showPuzzleModal()">🧩 Solve Puzzle</button>
  536.         </div>
  537.     </div>
  538.  
  539.     <div class="modal" id="feedModal">
  540.         <div class="modal-content">
  541.             <h2>Choose Dataset to Feed</h2>
  542.             <div class="dataset-option" onclick="feedData('clean')">🌟 Clean Data (Nutritious)</div>
  543.             <div class="dataset-option" onclick="feedData('noisy')">🌪️ Noisy Data (Junk Food)</div>
  544.             <div class="dataset-option" onclick="feedData('balanced')">⚖️ Balanced Data (Complete Meal)</div>
  545.             <button class="close-modal" onclick="closeModal('feedModal')">Close</button>
  546.         </div>
  547.     </div>
  548.  
  549.     <div class="modal" id="puzzleModal">
  550.         <div class="modal-content">
  551.             <h2>Choose a Puzzle</h2>
  552.             <div class="puzzle-option" onclick="solvePuzzle('pattern')">🎨 Pattern Recognition</div>
  553.             <div class="puzzle-option" onclick="solvePuzzle('classification')">📊 Classification Task</div>
  554.             <div class="puzzle-option" onclick="solvePuzzle('prediction')">🔮 Prediction Challenge</div>
  555.             <button class="close-modal" onclick="closeModal('puzzleModal')">Close</button>
  556.         </div>
  557.     </div>
  558.  
  559.     <div class="evolution-modal" id="evolutionModal">
  560.         <div class="evolution-content">
  561.             <div class="evolution-title">🌟 Evolution Complete! 🌟</div>
  562.             <div class="evolution-message">Your neural network has reached a new level of intelligence!</div>
  563.             <div class="new-name" id="newName">New Name</div>
  564.             <div class="evolution-message" id="evolutionMessage">It is evolving into a more advanced form.</div>
  565.             <button class="continue-btn" onclick="closeEvolutionModal()">Continue Nurturing</button>
  566.         </div>
  567.     </div>
  568.  
  569.     <script>
  570.         // Neural Network Pet State
  571.         let petState = {
  572.             intelligence: 100,  // Starts at 100, can go over 9000
  573.             accuracy: 40,
  574.             happiness: 75,
  575.             energy: 100,
  576.             age: 0,
  577.             experience: 0,
  578.             level: 1,
  579.             overfitRisk: 0,
  580.             lastFed: Date.now(),
  581.             neurons: [],
  582.             synapses: [],
  583.             feedHistory: [],  // Track the order of feeding
  584.             puzzleHistory: [], // Track puzzle performance
  585.             trainingStyle: "balanced", // Tracks the nurturing style
  586.             evolutionPath: [] // Tracks the evolution progression
  587.         };
  588.  
  589.         // Complex evolution system with bases and adjectives
  590.         const evolutionBases = [
  591.             "Neuron", "Dendrite", "Synapse", "Axon", "Network",
  592.             "Cortex", "Nucleus", "Matrix", "Web", "Grid"
  593.         ];
  594.  
  595.         const evolutionAdjectives = [
  596.             "Curious", "Pattern-Seeking", "Data-Hungry", "Abstract", "Logical",
  597.             "Creative", "Analytical", "Intuitive", "Precise", "Adaptive",
  598.             "Resilient", "Focused", "Expansive", "Deep", "Wide",
  599.             "Layered", "Connected", "Parallel", "Recursive", "Generative",
  600.             "Predictive", "Classifying", "Clustering", "Optimizing", "Learning",
  601.             "Reasoning", "Deductive", "Inductive", "Transformative", "Emergent",
  602.             "Conscious", "Self-Aware", "Metacognitive", "Philosophical", "Cosmic",
  603.             "Quantum", "Multidimensional", "Temporal", "Spatial", "Universal"
  604.         ];
  605.  
  606.         // Initialize the neural network visualization
  607.         function initializeNetwork() {
  608.             const network = document.getElementById('neuralNetwork');
  609.             const layers = [3, 5, 4, 2]; // Network architecture
  610.             const layerSpacing = network.clientWidth / (layers.length + 1);
  611.            
  612.             petState.neurons = [];
  613.             petState.synapses = [];
  614.  
  615.             // Create neurons
  616.             layers.forEach((nodeCount, layerIndex) => {
  617.                 const x = layerSpacing * (layerIndex + 1);
  618.                 const ySpacing = network.clientHeight / (nodeCount + 1);
  619.                
  620.                 for (let i = 0; i < nodeCount; i++) {
  621.                    const y = ySpacing * (i + 1);
  622.                    const neuron = document.createElement('div');
  623.                    neuron.className = 'neuron';
  624.                    neuron.style.left = x - 20 + 'px';
  625.                    neuron.style.top = y - 20 + 'px';
  626.                    neuron.innerHTML = layerIndex === 0 ? 'I' : layerIndex === layers.length - 1 ? 'O' : 'H';
  627.                    neuron.dataset.layer = layerIndex;
  628.                    neuron.dataset.index = i;
  629.                    
  630.                    neuron.addEventListener('click', () => activateNeuron(neuron));
  631.                    
  632.                     network.appendChild(neuron);
  633.                     petState.neurons.push({element: neuron, x, y, layer: layerIndex, index: i});
  634.                 }
  635.             });
  636.  
  637.             // Create synapses (connections)
  638.             for (let l = 0; l < layers.length - 1; l++) {
  639.                const currentLayer = petState.neurons.filter(n => n.layer === l);
  640.                 const nextLayer = petState.neurons.filter(n => n.layer === l + 1);
  641.                
  642.                 currentLayer.forEach(neuron1 => {
  643.                     nextLayer.forEach(neuron2 => {
  644.                         if (Math.random() > 0.3) { // Not all connections for visual clarity
  645.                             const synapse = createSynapse(neuron1, neuron2);
  646.                             network.appendChild(synapse);
  647.                             petState.synapses.push(synapse);
  648.                         }
  649.                     });
  650.                 });
  651.             }
  652.  
  653.             // Add floating particles for ambiance
  654.             setInterval(createParticle, 2000);
  655.         }
  656.  
  657.         function createSynapse(neuron1, neuron2) {
  658.             const synapse = document.createElement('div');
  659.             synapse.className = 'synapse';
  660.            
  661.             const dx = neuron2.x - neuron1.x;
  662.             const dy = neuron2.y - neuron1.y;
  663.             const length = Math.sqrt(dx * dx + dy * dy);
  664.             const angle = Math.atan2(dy, dx) * 180 / Math.PI;
  665.            
  666.             synapse.style.width = length + 'px';
  667.             synapse.style.left = neuron1.x + 'px';
  668.             synapse.style.top = neuron1.y + 'px';
  669.             synapse.style.transform = `rotate(${angle}deg)`;
  670.             synapse.style.animationDelay = Math.random() * 3 + 's';
  671.            
  672.             return synapse;
  673.         }
  674.  
  675.         function activateNeuron(neuron) {
  676.             neuron.classList.add('active');
  677.             setTimeout(() => neuron.classList.remove('active'), 500);
  678.            
  679.             // Propagate activation
  680.             const layer = parseInt(neuron.dataset.layer);
  681.             const nextLayerNeurons = petState.neurons.filter(n => n.layer === layer + 1);
  682.            
  683.             setTimeout(() => {
  684.                 nextLayerNeurons.forEach(n => {
  685.                     if (Math.random() > 0.5) {
  686.                         n.element.classList.add('active');
  687.                         setTimeout(() => n.element.classList.remove('active'), 500);
  688.                     }
  689.                 });
  690.             }, 200);
  691.  
  692.             showThought("Signal propagating! 💫");
  693.         }
  694.  
  695.         function createParticle() {
  696.             const network = document.getElementById('neuralNetwork');
  697.             const particle = document.createElement('div');
  698.             particle.className = 'particle';
  699.             particle.style.left = Math.random() * network.clientWidth + 'px';
  700.             particle.style.top = network.clientHeight + 'px';
  701.             particle.style.animationDelay = Math.random() * 2 + 's';
  702.             network.appendChild(particle);
  703.            
  704.             setTimeout(() => particle.remove(), 3000);
  705.         }
  706.  
  707.         function showThought(message) {
  708.             const bubble = document.getElementById('thoughtBubble');
  709.             bubble.textContent = message;
  710.             bubble.classList.add('show');
  711.             setTimeout(() => bubble.classList.remove('show'), 3000);
  712.         }
  713.  
  714.         function updateStats() {
  715.             document.getElementById('intelligence').textContent = Math.round(petState.intelligence);
  716.             document.getElementById('accuracy').textContent = Math.round(petState.accuracy) + '%';
  717.             document.getElementById('happiness').textContent = Math.round(petState.happiness);
  718.             document.getElementById('energy').textContent = Math.round(petState.energy);
  719.             document.getElementById('age').textContent = petState.age + 'd';
  720.             document.getElementById('level').textContent = petState.level;
  721.            
  722.             // Update mood based on stats
  723.             updateMood();
  724.            
  725.             // Update progress bar
  726.             const progressPercent = Math.min(100, Math.max(0, petState.experience));
  727.             document.getElementById('progressBar').style.width = progressPercent + '%';
  728.             document.getElementById('progressPercent').textContent = progressPercent.toFixed(1) + '%';
  729.         }
  730.  
  731.         function updateMood() {
  732.             const mood = document.getElementById('mood');
  733.             const avg = (petState.happiness + petState.energy) / 2;
  734.            
  735.             if (avg > 80) {
  736.                 mood.textContent = '😄';
  737.             } else if (avg > 60) {
  738.                 mood.textContent = '😊';
  739.             } else if (avg > 40) {
  740.                 mood.textContent = '😐';
  741.             } else if (avg > 20) {
  742.                 mood.textContent = '😟';
  743.             } else {
  744.                 mood.textContent = '😢';
  745.             }
  746.         }
  747.  
  748.         function showFeedModal() {
  749.             document.getElementById('feedModal').classList.add('show');
  750.         }
  751.  
  752.         function showPuzzleModal() {
  753.             document.getElementById('puzzleModal').classList.add('show');
  754.         }
  755.  
  756.         function closeModal(modalId) {
  757.             document.getElementById(modalId).classList.remove('show');
  758.         }
  759.  
  760.         function feedData(type) {
  761.             closeModal('feedModal');
  762.            
  763.             let message, intelligenceChange, accuracyChange, happinessChange, overfitChange, expGain;
  764.            
  765.             // Track feeding history for evolution
  766.             petState.feedHistory.push(type);
  767.             if (petState.feedHistory.length > 10) {
  768.                 petState.feedHistory.shift();
  769.             }
  770.            
  771.             // Determine feeding pattern for evolution
  772.             updateTrainingStyle();
  773.            
  774.             switch(type) {
  775.                 case 'clean':
  776.                     message = "Yummy! Clean data is so nutritious! 🌟";
  777.                     intelligenceChange = 15;
  778.                     accuracyChange = 10;
  779.                     happinessChange = 10;
  780.                     overfitChange = -5;
  781.                     expGain = 20;
  782.                     break;
  783.                 case 'noisy':
  784.                     message = "Ugh... this data is messy! 🤢";
  785.                     intelligenceChange = -8;
  786.                     accuracyChange = -15;
  787.                     happinessChange = -15;
  788.                     overfitChange = 20;
  789.                     expGain = 5;
  790.                     break;
  791.                 case 'balanced':
  792.                     message = "Perfect balance! I'm learning so much! ⚖️";
  793.                     intelligenceChange = 25;
  794.                     accuracyChange = 15;
  795.                     happinessChange = 15;
  796.                     overfitChange = -10;
  797.                     expGain = 30;
  798.                     break;
  799.             }
  800.            
  801.             petState.intelligence = Math.max(0, petState.intelligence + intelligenceChange);
  802.             petState.accuracy = Math.min(100, Math.max(0, petState.accuracy + accuracyChange));
  803.             petState.happiness = Math.min(100, Math.max(0, petState.happiness + happinessChange));
  804.             petState.overfitRisk = Math.min(100, Math.max(0, petState.overfitRisk + overfitChange));
  805.             petState.experience += expGain;
  806.            
  807.             showThought(message);
  808.             updateStats();
  809.             animateNetworkActivity();
  810.             updateStatus(`Fed ${type} data to your neural network!`);
  811.            
  812.             // Check for level up
  813.             checkLevelUp();
  814.         }
  815.  
  816.         function trainNetwork() {
  817.             if (petState.energy < 20) {
  818.                showThought("Too tired to train... 😴");
  819.                updateStatus("Your network needs rest!");
  820.                return;
  821.            }
  822.            
  823.            petState.energy = Math.max(0, petState.energy - 20);
  824.            
  825.            // Intelligence gain depends on current intelligence and training style
  826.            let intelligenceGain = 5;
  827.            if (petState.trainingStyle === "balanced") {
  828.                intelligenceGain = 10;
  829.            } else if (petState.trainingStyle === "chaotic") {
  830.                intelligenceGain = 2;
  831.            }
  832.            
  833.            petState.intelligence = Math.max(0, petState.intelligence + intelligenceGain);
  834.            petState.accuracy = Math.min(100, petState.accuracy + 3);
  835.            petState.experience += 15;
  836.            
  837.            if (petState.overfitRisk > 50) {
  838.                 petState.accuracy = Math.max(0, petState.accuracy - 10);
  839.                 showThought("I'm overfitting! Help! 😰");
  840.                 updateStatus("Warning: Network is overfitting to noise!");
  841.             } else {
  842.                 showThought("Learning patterns! 🎯");
  843.                 updateStatus("Training session complete!");
  844.             }
  845.            
  846.             animateNetworkActivity();
  847.             updateStats();
  848.            
  849.             // Check for level up
  850.             checkLevelUp();
  851.         }
  852.  
  853.         function scoldNetwork() {
  854.             if (petState.overfitRisk < 30) {
  855.                showThought("But I'm doing fine! 😕");
  856.                petState.happiness = Math.max(0, petState.happiness - 5);
  857.                updateStatus("Network doesn't need scolding right now.");
  858.            } else {
  859.                petState.overfitRisk = Math.max(0, petState.overfitRisk - 25);
  860.                petState.happiness = Math.max(0, petState.happiness - 10);
  861.                petState.accuracy = Math.min(100, petState.accuracy + 5);
  862.                showThought("I'll generalize better! 📚");
  863.                updateStatus("Network learned to avoid overfitting!");
  864.            }
  865.            
  866.            updateStats();
  867.        }
  868.  
  869.        function solvePuzzle(type) {
  870.            closeModal('puzzleModal');
  871.            
  872.            // Puzzle success depends on intelligence, energy, happiness, accuracy, and feeding history
  873.            let baseSuccessChance = (petState.intelligence / 1000) * 0.5; // Intelligence factor (scaled)
  874.            baseSuccessChance += (petState.energy / 100) * 0.2;
  875.            baseSuccessChance += (petState.happiness / 100) * 0.2;
  876.            baseSuccessChance += (petState.accuracy / 100) * 0.1;
  877.            
  878.            // Adjust based on feeding history matching puzzle type
  879.            let feedingBonus = 0;
  880.            const recentFeeds = petState.feedHistory.slice(-3);
  881.            
  882.            if (type === 'pattern' && recentFeeds.includes('clean')) {
  883.                feedingBonus = 0.3;
  884.            } else if (type === 'classification' && recentFeeds.includes('balanced')) {
  885.                feedingBonus = 0.3;
  886.            } else if (type === 'prediction' && recentFeeds.includes('noisy')) {
  887.                feedingBonus = 0.3;
  888.            }
  889.            
  890.            const successChance = Math.min(0.95, baseSuccessChance + feedingBonus);
  891.            const success = Math.random() < successChance;
  892.            
  893.            if (success) {
  894.                const reward = Math.floor(Math.random() * 50) + 50; // Larger rewards for puzzles
  895.                petState.intelligence = Math.max(0, petState.intelligence + reward);
  896.                petState.happiness = Math.min(100, petState.happiness + 15);
  897.                petState.experience += 50;
  898.                showThought(`Solved the ${type} puzzle! 🎉`);
  899.                updateStatus(`Successfully solved the ${type} puzzle! Intelligence +${reward}!`);
  900.                
  901.                // Track puzzle performance for evolution
  902.                petState.puzzleHistory.push({type: type, success: true});
  903.            } else {
  904.                petState.happiness = Math.max(0, petState.happiness - 10);
  905.                petState.experience += 20;
  906.                showThought(`This ${type} is hard... 🤔`);
  907.                updateStatus(`Failed the ${type} puzzle. Keep training!`);
  908.                
  909.                petState.puzzleHistory.push({type: type, success: false});
  910.            }
  911.            
  912.            // Limit puzzle history
  913.            if (petState.puzzleHistory.length > 10) {
  914.                 petState.puzzleHistory.shift();
  915.             }
  916.            
  917.             animateNetworkActivity();
  918.             updateStats();
  919.            
  920.             // Check for level up
  921.             checkLevelUp();
  922.         }
  923.  
  924.         function updateTrainingStyle() {
  925.             // Analyze feeding history to determine training style
  926.             const feedCounts = {
  927.                 clean: 0,
  928.                 noisy: 0,
  929.                 balanced: 0
  930.             };
  931.            
  932.             petState.feedHistory.forEach(feed => {
  933.                 feedCounts[feed]++;
  934.             });
  935.            
  936.             const totalFeeds = petState.feedHistory.length;
  937.             if (totalFeeds === 0) return;
  938.            
  939.             const cleanRatio = feedCounts.clean / totalFeeds;
  940.             const noisyRatio = feedCounts.noisy / totalFeeds;
  941.             const balancedRatio = feedCounts.balanced / totalFeeds;
  942.            
  943.             if (balancedRatio > 0.5) {
  944.                 petState.trainingStyle = "balanced";
  945.             } else if (noisyRatio > 0.5) {
  946.                 petState.trainingStyle = "chaotic";
  947.             } else if (cleanRatio > 0.5) {
  948.                 petState.trainingStyle = "precise";
  949.             } else {
  950.                 petState.trainingStyle = "mixed";
  951.             }
  952.         }
  953.  
  954.         function determineEvolution() {
  955.             // Complex evolution based on nurturing style, performance, and history
  956.             let baseIndex = 0;
  957.             let adjectiveIndex = 0;
  958.            
  959.             // Base determined by level and primary feeding type
  960.             baseIndex = Math.min(petState.level - 1, evolutionBases.length - 1);
  961.            
  962.             // Adjective determined by training style, puzzle performance, and intelligence
  963.             if (petState.trainingStyle === "balanced" && petState.intelligence > 500) {
  964.                adjectiveIndex = 10 + Math.min(Math.floor(petState.intelligence / 100), 10);
  965.             } else if (petState.trainingStyle === "precise") {
  966.                 adjectiveIndex = 20 + Math.min(Math.floor(petState.accuracy / 10), 10);
  967.             } else if (petState.trainingStyle === "chaotic") {
  968.                 adjectiveIndex = 30 + Math.min(petState.puzzleHistory.filter(p => p.success).length, 10);
  969.             } else {
  970.                 adjectiveIndex = Math.min(Math.floor(petState.level / 2), evolutionAdjectives.length - 1);
  971.             }
  972.            
  973.             // Ensure indices are within bounds
  974.             adjectiveIndex = Math.min(adjectiveIndex, evolutionAdjectives.length - 1);
  975.            
  976.             return {
  977.                 base: evolutionBases[baseIndex],
  978.                 adjective: evolutionAdjectives[adjectiveIndex],
  979.                 fullName: `${evolutionAdjectives[adjectiveIndex]} ${evolutionBases[baseIndex]}`
  980.             };
  981.         }
  982.  
  983.         function animateNetworkActivity() {
  984.             petState.neurons.forEach(neuron => {
  985.                 setTimeout(() => {
  986.                     if (Math.random() > 0.5) {
  987.                         neuron.element.classList.add('active');
  988.                         setTimeout(() => neuron.element.classList.remove('active'), 500);
  989.                     }
  990.                 }, Math.random() * 1000);
  991.             });
  992.         }
  993.  
  994.         function updateStatus(message) {
  995.             document.getElementById('statusMessage').textContent = message;
  996.         }
  997.  
  998.         function checkLevelUp() {
  999.             if (petState.experience >= 100) {
  1000.                 // Level up!
  1001.                 petState.level++;
  1002.                 petState.experience = 0;
  1003.                
  1004.                 // Determine new evolution
  1005.                 const evolution = determineEvolution();
  1006.                 const oldName = document.getElementById('petName').textContent;
  1007.                
  1008.                 // Show evolution modal
  1009.                 document.getElementById('newName').textContent = evolution.fullName;
  1010.                 document.getElementById('evolutionMessage').textContent =
  1011.                     `Your ${oldName} has evolved into a ${evolution.fullName}!`;
  1012.                 document.getElementById('evolutionModal').classList.add('show');
  1013.                
  1014.                 // Update the pet name
  1015.                 document.getElementById('petName').textContent = evolution.fullName;
  1016.                
  1017.                 // Track evolution path
  1018.                 petState.evolutionPath.push(evolution.fullName);
  1019.                
  1020.                 // Show celebration
  1021.                 showThought(`I've evolved! I'm now a ${evolution.fullName}! 🎉`);
  1022.                 updateStatus(`Your neural network has reached level ${petState.level}!`);
  1023.                
  1024.                 // Add some stat bonuses for leveling up
  1025.                 petState.intelligence = Math.max(0, petState.intelligence + 20);
  1026.                 petState.accuracy = Math.min(100, petState.accuracy + 5);
  1027.                 petState.happiness = Math.min(100, petState.happiness + 15);
  1028.                 petState.energy = Math.min(100, petState.energy + 30);
  1029.                
  1030.                 updateStats();
  1031.             }
  1032.         }
  1033.  
  1034.         function closeEvolutionModal() {
  1035.             document.getElementById('evolutionModal').classList.remove('show');
  1036.         }
  1037.  
  1038.         // Automatic processes
  1039.         setInterval(() => {
  1040.             // Age the network
  1041.             petState.age++;
  1042.            
  1043.             // Natural stat changes
  1044.             petState.energy = Math.min(100, petState.energy + 2);
  1045.             petState.happiness = Math.max(0, petState.happiness - 1);
  1046.            
  1047.             // Data corruption and cosmic radiation - decrease progress by 0.24% every second
  1048.             petState.experience = Math.max(0, petState.experience - 0.24);
  1049.            
  1050.             // Random thoughts
  1051.             if (Math.random() > 0.95) {
  1052.                 const thoughts = [
  1053.                     "I wonder about gradients... 🤔",
  1054.                     "Neurons firing! ⚡",
  1055.                     "Processing... 💭",
  1056.                     "Optimizing weights! 🎯",
  1057.                     "Learning is fun! 📚",
  1058.                     "Data corruption detected... 🛡️",
  1059.                     "Cosmic radiation affecting my progress! 🌌",
  1060.                     "I need more training data! 📊",
  1061.                     "My intelligence is growing! 🧠",
  1062.                     "These puzzles are challenging my limits! 💪"
  1063.                 ];
  1064.                 showThought(thoughts[Math.floor(Math.random() * thoughts.length)]);
  1065.             }
  1066.            
  1067.             updateStats();
  1068.         }, 1000);
  1069.  
  1070.         // Initialize on load
  1071.         window.onload = () => {
  1072.             initializeNetwork();
  1073.             updateStats();
  1074.             showThought("Hello! I'm ready to learn! 👋");
  1075.         };
  1076.  
  1077.         // Responsive network resize
  1078.         window.onresize = () => {
  1079.             const network = document.getElementById('neuralNetwork');
  1080.             network.innerHTML = '<div class="thought-bubble" id="thoughtBubble"></div>';
  1081.             initializeNetwork();
  1082.         };
  1083.     </script>
  1084. </body>
  1085. </html>
  1086.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!