ML models
=====================

.. raw:: html

   <h3>Structure analyzer</h3>
   <form id="upload-form" enctype="multipart/form-data">
     <p>Select a POSCAR file: <input type="file" name="file" /></p>
     <button type="submit">Analyze</button>
   </form>
   <div id="result" style="margin-top: 1em; font-family: monospace;"></div>
       <script>
 
    document.getElementById('upload-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    const form = new FormData(e.target);
    const response = await fetch('https://poscar-analyzer.onrender.com/analyze', {
      method: 'POST',
      body: form
    });
    const data = await response.json();

    // Format lattice vectors nicely
    let html = `<h3>Analysis Result</h3>`;
    html += `<p><strong>Scale Factor:</strong> ${data.scale_factor}</p>`;
    html += `<p><strong>Lattice Vectors:</strong></p>`;
    html += `<table border="1" cellpadding="5" cellspacing="0">`;
    html += `<tr><th>a</th><th>b</th><th>c</th></tr>`;
    data.lattice_vectors.forEach(vec => {
      html += `<tr><td>${vec[0].toFixed(4)}</td><td>${vec[1].toFixed(4)}</td><td>${vec[2].toFixed(4)}</td></tr>`;
    });
    html += `</table>`;

    document.getElementById('result').innerHTML = html;
  });
        </script>

        <h3>Mobility Prediction</h3>
        <form id="mobility-form">
          <label>Enter features (comma-separated):</label><br>
        <input type="text" id="features" name="features" style="width:300px;" />
        <button type="submit">Predict</button>
        </form>
        <div id="mobility-result" style="margin-top: 1em;"></div>

        <script>
        document.getElementById('mobility-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const input = document.getElementById('features').value;
        const featureArray = input.split(',').map(x => parseFloat(x.trim()));

        const response = await fetch('https://poscar-analyzer.onrender.com/mobility', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ features: featureArray })
    });

    const data = await response.json();
    const units = "cm2/V-s"
    document.getElementById('mobility-result').innerText = `Predicted mobility: ${data.mobility} ${units}` ;
  });
        </script>