learning.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <!-- Background -->
  <rect width="800" height="600" fill="#f0f0f0"/>
  
  <!-- Title -->
  <text x="400" y="30" font-family="Arial, sans-serif" font-size="24" text-anchor="middle" fill="#333">Machine Learning Process for Linear Equation</text>
  
  <!-- Equation -->
  <text x="400" y="70" font-family="Arial, sans-serif" font-size="20" text-anchor="middle" fill="#333">ax + by = c</text>
  
  <!-- Process Steps -->
  <g transform="translate(50, 100)">
    <!-- Initialize -->
    <rect x="0" y="0" width="150" height="60" rx="10" fill="#4CAF50"/>
    <text x="75" y="35" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="white">Initialize Parameters</text>
    
    <!-- Predict -->
    <rect x="200" y="0" width="150" height="60" rx="10" fill="#2196F3"/>
    <text x="275" y="35" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="white">Make Prediction</text>
    
    <!-- Calculate Loss -->
    <rect x="400" y="0" width="150" height="60" rx="10" fill="#FFC107"/>
    <text x="475" y="35" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="white">Calculate Loss</text>
    
    <!-- Update Parameters -->
    <rect x="600" y="0" width="150" height="60" rx="10" fill="#FF5722"/>
    <text x="675" y="35" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="white">Update Parameters</text>
    
    <!-- Arrows -->
    <path d="M150 30 H200" stroke="#333" stroke-width="2" fill="none"/>
    <path d="M350 30 H400" stroke="#333" stroke-width="2" fill="none"/>
    <path d="M550 30 H600" stroke="#333" stroke-width="2" fill="none"/>
    <path d="M750 30 Q775 30 775 60 V350 Q775 380 750 380" stroke="#333" stroke-width="2" fill="none"/>
    <path d="M0 30 Q-25 30 -25 60 V350 Q-25 380 0 380" stroke="#333" stroke-width="2" fill="none"/>
  </g>
  
  <!-- Coefficient Changes -->
  <g transform="translate(50, 200)">
    <text x="0" y="0" font-family="Arial, sans-serif" font-size="18" fill="#333">Coefficient Changes:</text>
    <text x="20" y="30" font-family="Arial, sans-serif" font-size="14" fill="#333">Initial: a = 0.5, b = 0.5</text>
    <text x="20" y="60" font-family="Arial, sans-serif" font-size="14" fill="#333">Iteration 1: a = 0.6, b = 0.4</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="14" fill="#333">Iteration 2: a = 0.7, b = 0.3</text>
    <text x="20" y="120" font-family="Arial, sans-serif" font-size="14" fill="#333">Final: a = 0.8, b = 0.2</text>
  </g>
  
  <!-- Example -->
  <g transform="translate(400, 200)">
    <text x="0" y="0" font-family="Arial, sans-serif" font-size="18" fill="#333">Example:</text>
    <text x="20" y="30" font-family="Arial, sans-serif" font-size="14" fill="#333">Target: 3x + 2y = 10</text>
    <text x="20" y="60" font-family="Arial, sans-serif" font-size="14" fill="#333">Input: x = 2, y = 2</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="14" fill="#333">Expected Output: 10</text>
    <text x="20" y="120" font-family="Arial, sans-serif" font-size="14" fill="#333">Learned: 3.2x + 1.8y ≈ 10</text>
  </g>
  
  <!-- Learning Process -->
  <g transform="translate(50, 400)">
    <text x="0" y="0" font-family="Arial, sans-serif" font-size="18" fill="#333">Learning Process:</text>
    <text x="20" y="30" font-family="Arial, sans-serif" font-size="14" fill="#333">1. Initialize coefficients randomly</text>
    <text x="20" y="60" font-family="Arial, sans-serif" font-size="14" fill="#333">2. Make prediction using current coefficients</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="14" fill="#333">3. Calculate loss (difference from expected)</text>
    <text x="20" y="120" font-family="Arial, sans-serif" font-size="14" fill="#333">4. Update coefficients to minimize loss</text>
    <text x="20" y="150" font-family="Arial, sans-serif" font-size="14" fill="#333">5. Repeat steps 2-4 until convergence</text>
  </g>
</svg>