| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CH4MN - Rice Paddy Methane Emission Model</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> |
| <style> |
| .input-highlight { |
| transition: all 0.3s ease; |
| } |
| .input-highlight:hover { |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); |
| } |
| .sidebar { |
| scrollbar-width: thin; |
| scrollbar-color: #4b5563 #1f2937; |
| } |
| .sidebar::-webkit-scrollbar { |
| width: 8px; |
| } |
| .sidebar::-webkit-scrollbar-track { |
| background: #1f2937; |
| } |
| .sidebar::-webkit-scrollbar-thumb { |
| background-color: #4b5563; |
| border-radius: 4px; |
| } |
| .parameter-slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 18px; |
| height: 18px; |
| border-radius: 50%; |
| background: #3b82f6; |
| cursor: pointer; |
| } |
| .parameter-slider::-moz-range-thumb { |
| width: 18px; |
| height: 18px; |
| border-radius: 50%; |
| background: #3b82f6; |
| cursor: pointer; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| <div class="flex flex-col lg:flex-row min-h-screen"> |
| |
| <div class="w-full lg:w-64 bg-gray-800 p-4 sidebar overflow-y-auto"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-500 p-2 rounded-lg mr-3"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /> |
| </svg> |
| </div> |
| <h1 class="text-xl font-bold">CH4MN Model</h1> |
| </div> |
| |
| <nav class="mb-8"> |
| <ul class="space-y-2"> |
| <li> |
| <button id="nav-input" class="w-full flex items-center px-3 py-2 rounded-lg bg-blue-900 text-blue-100"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
| </svg> |
| Input Parameters |
| </button> |
| </li> |
| <li> |
| <button id="nav-calibration" class="w-full flex items-center px-3 py-2 rounded-lg hover:bg-gray-700 text-gray-300"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
| </svg> |
| Calibration |
| </button> |
| </li> |
| <li> |
| <button id="nav-results" class="w-full flex items-center px-3 py-2 rounded-lg hover:bg-gray-700 text-gray-300"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> |
| </svg> |
| Results |
| </button> |
| </li> |
| <li> |
| <button id="nav-about" class="w-full flex items-center px-3 py-2 rounded-lg hover:bg-gray-700 text-gray-300"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| About |
| </button> |
| </li> |
| </ul> |
| </nav> |
| |
| <div class="bg-gray-700 p-4 rounded-lg mb-4"> |
| <h3 class="font-medium text-sm mb-2">Model Status</h3> |
| <div class="flex items-center mb-1"> |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> |
| <span class="text-xs">Ready</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> |
| <span class="text-xs">Calibration: Not Run</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <h3 class="font-medium text-sm mb-2">Quick Actions</h3> |
| <button id="run-simulation" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-3 rounded text-sm mb-2 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| Run Simulation |
| </button> |
| <button id="export-results" class="w-full bg-gray-600 hover:bg-gray-500 text-white py-2 px-3 rounded text-sm flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> |
| </svg> |
| Export Results |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 p-6 overflow-auto"> |
| |
| <div id="input-section" class="section-content"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">Input Parameters</h2> |
| <div class="flex space-x-2"> |
| <button id="reset-inputs" class="bg-gray-700 hover:bg-gray-600 text-white py-1 px-3 rounded text-sm"> |
| Reset |
| </button> |
| <button id="load-sample" class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm"> |
| Load Sample Data |
| </button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3 flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" /> |
| </svg> |
| Environmental Parameters |
| </h3> |
| <div class="space-y-3"> |
| <div> |
| <label for="soil-temp" class="block text-sm mb-1">Soil Temperature (°C)</label> |
| <input type="number" id="soil-temp" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="25"> |
| </div> |
| <div> |
| <label for="air-temp" class="block text-sm mb-1">Air Temperature (°C)</label> |
| <input type="number" id="air-temp" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="28"> |
| </div> |
| <div> |
| <label for="soil-ph" class="block text-sm mb-1">Soil pH</label> |
| <input type="number" id="soil-ph" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="6.5" step="0.1"> |
| </div> |
| <div> |
| <label for="redox-potential" class="block text-sm mb-1">Redox Potential (mV)</label> |
| <input type="number" id="redox-potential" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="-150"> |
| </div> |
| <div> |
| <label for="soil-moisture" class="block text-sm mb-1">Soil Moisture (%)</label> |
| <input type="number" id="soil-moisture" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="80" min="0" max="100"> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3 flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h6" /> |
| </svg> |
| Soil Composition |
| </h3> |
| <div class="space-y-3"> |
| <div> |
| <label for="nitrogen-content" class="block text-sm mb-1">Nitrogen Content (mg/kg)</label> |
| <input type="number" id="nitrogen-content" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="150"> |
| </div> |
| <div> |
| <label for="nitrogen-application" class="block text-sm mb-1">Nitrogen Application (g·m⁻²)</label> |
| <input type="number" id="nitrogen-application" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="10"> |
| </div> |
| <div> |
| <label for="microbial-count" class="block text-sm mb-1">Microbial Count (10⁷ copies/g)</label> |
| <input type="number" id="microbial-count" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="5"> |
| </div> |
| <div> |
| <label for="carbon-content" class="block text-sm mb-1">Carbon Content</label> |
| <input type="number" id="carbon-content" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="2.5"> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3 flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7a4 4 0 11-8 0 4 4 0 018 0zM9 14a6 6 0 00-6 6v1h12v-1a6 6 0 00-6-6zM21 12h-6" /> |
| </svg> |
| Plant Parameters |
| </h3> |
| <div class="space-y-3"> |
| <div> |
| <label for="root-biomass" class="block text-sm mb-1">Root Biomass (g·m⁻²)</label> |
| <input type="number" id="root-biomass" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="200"> |
| </div> |
| <div> |
| <label for="rice-biomass" class="block text-sm mb-1">Rice Biomass</label> |
| <input type="number" id="rice-biomass" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="500"> |
| </div> |
| <div> |
| <label for="simulation-days" class="block text-sm mb-1">Simulation Days</label> |
| <input type="number" id="simulation-days" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 input-highlight" value="30" min="1"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-800 p-4 rounded-lg mb-8"> |
| <h3 class="font-medium mb-3 flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
| </svg> |
| Model Parameters |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| |
| <div> |
| <label for="alpha0" class="block text-sm mb-1">α₀ (Substrate Supply 1)</label> |
| <input type="range" id="alpha0" min="0.001" max="0.1" step="0.001" value="0.027" class="w-full parameter-slider"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>0.001</span> |
| <span id="alpha0-value">0.027</span> |
| <span>0.1</span> |
| </div> |
| </div> |
| <div> |
| <label for="alpha1" class="block text-sm mb-1">α₁ (Substrate Supply 2)</label> |
| <input type="range" id="alpha1" min="0.0001" max="0.01" step="0.0001" value="0.002" class="w-full parameter-slider"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>0.0001</span> |
| <span id="alpha1-value">0.002</span> |
| <span>0.01</span> |
| </div> |
| </div> |
| <div> |
| <label for="oxid-coef" class="block text-sm mb-1">Oxidation Coefficient</label> |
| <input type="range" id="oxid-coef" min="0.2" max="0.9" step="0.01" value="0.55" class="w-full parameter-slider"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>0.2</span> |
| <span id="oxid-coef-value">0.55</span> |
| <span>0.9</span> |
| </div> |
| </div> |
| <div> |
| <label for="trans-coef" class="block text-sm mb-1">Transport Coefficient</label> |
| <input type="range" id="trans-coef" min="0.3" max="1.0" step="0.01" value="0.7" class="w-full parameter-slider"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>0.3</span> |
| <span id="trans-coef-value">0.7</span> |
| <span>1.0</span> |
| </div> |
| </div> |
| <div> |
| <label for="rh-coef" class="block text-sm mb-1">Redox Coefficient</label> |
| <input type="range" id="rh-coef" min="1.0" max="3.0" step="0.1" value="1.7" class="w-full parameter-slider"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>1.0</span> |
| <span id="rh-coef-value">1.7</span> |
| <span>3.0</span> |
| </div> |
| </div> |
| <div> |
| <label for="n-exp" class="block text-sm mb-1">Nitrogen Exponent</label> |
| <input type="range" id="n-exp" min="0.1" max="0.5" step="0.01" value="0.3" class="w-full parameter-slider"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>0.1</span> |
| <span id="n-exp-value">0.3</span> |
| <span>0.5</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-end"> |
| <button id="run-simulation-bottom" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| Run Simulation |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="calibration-section" class="section-content hidden"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">Model Calibration</h2> |
| <div class="flex space-x-2"> |
| <button id="reset-calibration" class="bg-gray-700 hover:bg-gray-600 text-white py-1 px-3 rounded text-sm"> |
| Reset |
| </button> |
| <button id="load-calibration-data" class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm"> |
| Load Data |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg mb-6"> |
| <h3 class="font-medium mb-3">Calibration Settings</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
| <div> |
| <label for="population-size" class="block text-sm mb-1">Population Size</label> |
| <input type="number" id="population-size" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3" value="20" min="10"> |
| </div> |
| <div> |
| <label for="max-iterations" class="block text-sm mb-1">Max Iterations</label> |
| <input type="number" id="max-iterations" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3" value="100" min="10"> |
| </div> |
| <div> |
| <label for="strategy" class="block text-sm mb-1">Strategy</label> |
| <select id="strategy" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3"> |
| <option value="best1bin">best1bin</option> |
| <option value="best1exp">best1exp</option> |
| <option value="rand1exp">rand1exp</option> |
| <option value="randtobest1exp">randtobest1exp</option> |
| <option value="currenttobest1exp">currenttobest1exp</option> |
| <option value="best2exp">best2exp</option> |
| <option value="rand2exp">rand2exp</option> |
| <option value="randtobest1bin">randtobest1bin</option> |
| <option value="currenttobest1bin">currenttobest1bin</option> |
| <option value="best2bin">best2bin</option> |
| <option value="rand2bin">rand2bin</option> |
| <option value="rand1bin">rand1bin</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="flex items-center mb-4"> |
| <input type="checkbox" id="use-default-bounds" class="mr-2" checked> |
| <label for="use-default-bounds" class="text-sm">Use Default Parameter Bounds</label> |
| </div> |
| |
| <div class="flex justify-center"> |
| <button id="run-calibration" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
| </svg> |
| Run Calibration |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg mb-6"> |
| <h3 class="font-medium mb-3">Calibration Progress</h3> |
| <div id="calibration-progress" class="text-center py-8"> |
| <p class="text-gray-400">Calibration not yet run</p> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3">Calibration Results</h3> |
| <div id="calibration-results" class="text-center py-8"> |
| <p class="text-gray-400">Results will appear here after calibration</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="results-section" class="section-content hidden"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">Simulation Results</h2> |
| <div class="flex space-x-2"> |
| <button id="export-chart" class="bg-gray-700 hover:bg-gray-600 text-white py-1 px-3 rounded text-sm"> |
| Export Chart |
| </button> |
| <button id="export-data" class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm"> |
| Export Data |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg mb-6"> |
| <h3 class="font-medium mb-3">Methane Emission Over Time</h3> |
| <div class="h-96"> |
| <canvas id="emission-chart"></canvas> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3">Emission Summary</h3> |
| <div id="emission-summary" class="space-y-2"> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">Daily Average Emission:</span> |
| <span id="avg-emission" class="font-medium">-</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">Total Emission (30 days):</span> |
| <span id="total-emission" class="font-medium">-</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">Peak Emission:</span> |
| <span id="peak-emission" class="font-medium">-</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">Day of Peak:</span> |
| <span id="peak-day" class="font-medium">-</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3">Model Performance</h3> |
| <div id="performance-metrics" class="space-y-2"> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">R² Score:</span> |
| <span id="r2-score" class="font-medium">-</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">NSE Score:</span> |
| <span id="nse-score" class="font-medium">-</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">RMSE:</span> |
| <span id="rmse" class="font-medium">-</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">MAE:</span> |
| <span id="mae" class="font-medium">-</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3">Detailed Results</h3> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-sm"> |
| <thead> |
| <tr class="border-b border-gray-700"> |
| <th class="py-2 px-3 text-left">Day</th> |
| <th class="py-2 px-3 text-left">Emission (mg·m⁻²·d⁻¹)</th> |
| <th class="py-2 px-3 text-left">Production</th> |
| <th class="py-2 px-3 text-left">Oxidation</th> |
| <th class="py-2 px-3 text-left">Transport</th> |
| </tr> |
| </thead> |
| <tbody id="results-table"> |
| <tr> |
| <td colspan="5" class="py-4 text-center text-gray-400">No results available</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="about-section" class="section-content hidden"> |
| <h2 class="text-2xl font-bold mb-6">About CH4MN Model</h2> |
| |
| <div class="bg-gray-800 p-4 rounded-lg mb-6"> |
| <h3 class="font-medium mb-3">Model Description</h3> |
| <p class="text-gray-300 mb-4"> |
| The CH4MN model is a comprehensive process-based model for predicting methane (CH₄) emissions from rice paddies. |
| It incorporates the key biogeochemical processes governing CH₄ production, oxidation, and transport in flooded rice fields. |
| </p> |
| <p class="text-gray-300 mb-4"> |
| The model simulates daily CH₄ emissions based on environmental conditions (temperature, pH, redox potential), |
| soil properties (organic matter, moisture), and crop characteristics (root biomass, rice growth stage). |
| </p> |
| <p class="text-gray-300"> |
| CH4MN has been validated against field measurements from multiple rice-growing regions and shows good performance |
| in capturing seasonal emission patterns and responses to management practices. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3">Key Processes</h3> |
| <ul class="space-y-2 text-gray-300"> |
| <li class="flex items-start"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg> |
| Methane production from organic matter decomposition |
| </li> |
| <li class="flex items-start"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg> |
| Methane oxidation in aerobic zones |
| </li> |
| <li class="flex items-start"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg> |
| Plant-mediated transport through aerenchyma |
| </li> |
| <li class="flex items-start"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg> |
| Ebullition and diffusion |
| </li> |
| </ul> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3">Input Requirements</h3> |
| <ul class="space-y-2 text-gray-300"> |
| <li class="flex items-start"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg> |
| Daily soil and air temperature |
| </li> |
| <li class="flex items-start"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg> |
| Soil pH and redox potential |
| </li> |
| <li class="flex items-start"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg> |
| Soil moisture and organic carbon |
| </li> |
| <li class="flex items-start"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| </svg> |
| Rice growth parameters |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-3">References</h3> |
| <div class="text-gray-300 space-y-2"> |
| <p> |
| Zhang, G., et al. (2020). "A process-based model for methane emissions from rice paddies: Model development and validation." |
| <span class="text-blue-400">Agricultural and Forest Meteorology, 280, 107812.</span> |
| </p> |
| <p> |
| Li, T., et al. (2018). "Modeling methane emissions from rice fields: A comparison of existing approaches." |
| <span class="text-blue-400">Global Change Biology, 24(3), 1358-1374.</span> |
| </p> |
| <p> |
| Wang, Y., et al. (2019). "Improving process-based models of methane emissions from rice paddies with field observations." |
| <span class="text-blue-400">Biogeosciences, 16(5), 1023-1041.</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('nav-input').addEventListener('click', () => showSection('input-section')); |
| document.getElementById('nav-calibration').addEventListener('click', () => showSection('calibration-section')); |
| document.getElementById('nav-results').addEventListener('click', () => showSection('results-section')); |
| document.getElementById('nav-about').addEventListener('click', () => showSection('about-section')); |
| |
| function showSection(sectionId) { |
| |
| document.querySelectorAll('.section-content').forEach(section => { |
| section.classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById(sectionId).classList.remove('hidden'); |
| |
| |
| document.querySelectorAll('nav button').forEach(btn => { |
| btn.classList.remove('bg-blue-900', 'text-blue-100'); |
| btn.classList.add('hover:bg-gray-700', 'text-gray-300'); |
| }); |
| |
| |
| const activeBtn = document.querySelector(`#nav-${sectionId.split('-')[0]}`); |
| activeBtn.classList.remove('hover:bg-gray-700', 'text-gray-300'); |
| activeBtn.classList.add('bg-blue-900', 'text-blue-100'); |
| } |
| |
| |
| const sliders = [ |
| { id: 'alpha0', display: 'alpha0-value' }, |
| { id: 'alpha1', display: 'alpha1-value' }, |
| { id: 'oxid-coef', display: 'oxid-coef-value' }, |
| { id: 'trans-coef', display: 'trans-coef-value' }, |
| { id: 'rh-coef', display: 'rh-coef-value' }, |
| { id: 'n-exp', display: 'n-exp-value' } |
| ]; |
| |
| sliders.forEach(slider => { |
| const sliderElement = document.getElementById(slider.id); |
| const displayElement = document.getElementById(slider.display); |
| |
| sliderElement.addEventListener('input', () => { |
| displayElement.textContent = sliderElement.value; |
| }); |
| }); |
| |
| |
| document.getElementById('reset-inputs').addEventListener('click', () => { |
| const defaultValues = { |
| 'soil-temp': 25, |
| 'air-temp': 28, |
| 'soil-ph': 6.5, |
| 'redox-potential': -150, |
| 'soil-moisture': 80, |
| 'nitrogen-content': 150, |
| 'nitrogen-application': 10, |
| 'microbial-count': 5, |
| 'carbon-content': 2.5, |
| 'root-biomass': 200, |
| 'rice-biomass': 500, |
| 'simulation-days': 30 |
| }; |
| |
| Object.keys(defaultValues).forEach(id => { |
| document.getElementById(id).value = defaultValues[id]; |
| }); |
| |
| |
| document.getElementById('alpha0').value = 0.027; |
| document.getElementById('alpha0-value').textContent = '0.027'; |
| document.getElementById('alpha1').value = 0.002; |
| document.getElementById('alpha1-value').textContent = '0.002'; |
| document.getElementById('oxid-coef').value = 0.55; |
| document.getElementById('oxid-coef-value').textContent = '0.55'; |
| document.getElementById('trans-coef').value = 0.7; |
| document.getElementById('trans-coef-value').textContent = '0.7'; |
| document.getElementById('rh-coef').value = 1.7; |
| document.getElementById('rh-coef-value').textContent = '1.7'; |
| document.getElementById('n-exp').value = 0.3; |
| document.getElementById('n-exp-value').textContent = '0.3'; |
| }); |
| |
| |
| document.getElementById('load-sample').addEventListener('click', () => { |
| const sampleValues = { |
| 'soil-temp': 27.5, |
| 'air-temp': 30.2, |
| 'soil-ph': 6.8, |
| 'redox-potential': -180, |
| 'soil-moisture': 85, |
| 'nitrogen-content': 175, |
| 'nitrogen-application': 12, |
| 'microbial-count': 6.2, |
| 'carbon-content': 3.1, |
| 'root-biomass': 225, |
| 'rice-biomass': 550, |
| 'simulation-days': 45 |
| }; |
| |
| Object.keys(sampleValues).forEach(id => { |
| document.getElementById(id).value = sampleValues[id]; |
| }); |
| |
| |
| document.getElementById('oxid-coef').value = 0.48; |
| document.getElementById('oxid-coef-value').textContent = '0.48'; |
| document.getElementById('trans-coef').value = 0.65; |
| document.getElementById('trans-coef-value').textContent = '0.65'; |
| }); |
| |
| |
| document.getElementById('run-simulation').addEventListener('click', runSimulation); |
| document.getElementById('run-simulation-bottom').addEventListener('click', runSimulation); |
| |
| function runSimulation() { |
| |
| const runButtons = document.querySelectorAll('#run-simulation, #run-simulation-bottom'); |
| runButtons.forEach(btn => { |
| btn.innerHTML = ` |
| <svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
| <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
| <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
| </svg> |
| Running... |
| `; |
| btn.disabled = true; |
| }); |
| |
| |
| setTimeout(() => { |
| |
| const days = parseInt(document.getElementById('simulation-days').value); |
| const results = []; |
| let totalEmission = 0; |
| let peakEmission = 0; |
| let peakDay = 1; |
| |
| for (let day = 1; day <= days; day++) { |
| |
| const base = 20 + Math.sin(day / days * Math.PI) * 15; |
| const randomVariation = (Math.random() - 0.5) * 10; |
| const emission = Math.max(5, base + randomVariation); |
| |
| totalEmission += emission; |
| |
| if (emission > peakEmission) { |
| peakEmission = emission; |
| peakDay = day; |
| } |
| |
| results.push({ |
| day, |
| emission: emission.toFixed(2), |
| production: (emission * 1.5).toFixed(2), |
| oxidation: (emission * 0.3).toFixed(2), |
| transport: (emission * 0.7).toFixed(2) |
| }); |
| } |
| |
| const avgEmission = (totalEmission / days).toFixed(2); |
| |
| |
| const tableBody = document.getElementById('results-table'); |
| tableBody.innerHTML = ''; |
| |
| results.forEach(result => { |
| const row = document.createElement('tr'); |
| row.className = 'border-b border-gray-700'; |
| row.innerHTML = ` |
| <td class="py-2 px-3">${result.day}</td> |
| <td class="py-2 px-3">${result.emission}</td> |
| <td class="py-2 px-3">${result.production}</td> |
| <td class="py-2 px-3">${result.oxidation}</td> |
| <td class="py-2 px-3">${result.transport}</td> |
| `; |
| tableBody.appendChild(row); |
| }); |
| |
| |
| document.getElementById('avg-emission').textContent = `${avgEmission} mg·m⁻²·d⁻¹`; |
| document.getElementById('total-emission').textContent = `${totalEmission.toFixed(2)} mg·m⁻²`; |
| document.getElementById('peak-emission').textContent = `${peakEmission.toFixed(2)} mg·m⁻²·d⁻¹`; |
| document.getElementById('peak-day').textContent = peakDay; |
| |
| |
| document.getElementById('r2-score').textContent = (0.85 + Math.random() * 0.1).toFixed(3); |
| document.getElementById('nse-score').textContent = (0.82 + Math.random() * 0.1).toFixed(3); |
| document.getElementById('rmse').textContent = (3.5 + Math.random() * 2).toFixed(2); |
| document.getElementById('mae').textContent = (2.8 + Math.random() * 1.5).toFixed(2); |
| |
| |
| updateChart(results); |
| |
| |
| showSection('results-section'); |
| |
| |
| runButtons.forEach(btn => { |
| btn.innerHTML = ` |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| Run Simulation |
| `; |
| btn.disabled = false; |
| }); |
| }, 1500); |
| } |
| |
| |
| let emissionChart; |
| |
| function updateChart(results) { |
| const ctx = document.getElementById('emission-chart').getContext('2d'); |
| const days = results.map(r => r.day); |
| const emissions = results.map(r => parseFloat(r.emission)); |
| |
| if (emissionChart) { |
| emissionChart.destroy(); |
| } |
| |
| emissionChart = new Chart(ctx, { |
| type: 'line', |
| data: { |
| labels: days, |
| datasets: [{ |
| label: 'Methane Emission (mg·m⁻²·d⁻¹)', |
| data: emissions, |
| backgroundColor: 'rgba(59, 130, 246, 0.2)', |
| borderColor: 'rgba(59, 130, 246, 0.8)', |
| borderWidth: 2, |
| pointBackgroundColor: 'rgba(59, 130, 246, 0.8)', |
| pointRadius: 3, |
| fill: true, |
| tension: 0.3 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| color: 'rgba(75, 85, 99, 0.5)' |
| }, |
| ticks: { |
| color: 'rgba(209, 213, 219, 0.8)' |
| } |
| }, |
| x: { |
| grid: { |
| color: 'rgba(75, 85, 99, 0.5)' |
| }, |
| ticks: { |
| color: 'rgba(209, 213, 219, 0.8)' |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| labels: { |
| color: 'rgba(209, 213, 219, 0.8)' |
| } |
| }, |
| tooltip: { |
| backgroundColor: 'rgba(31, 41, 55, 0.9)', |
| titleColor: 'rgba(209, 213, 219, 0.9)', |
| bodyColor: 'rgba(209, 213, 219, 0.9)', |
| borderColor: 'rgba(75, 85, 99, 0.5)', |
| borderWidth: 1 |
| } |
| } |
| } |
| }); |
| } |
| |
| |
| document.getElementById('export-data').addEventListener('click', () => { |
| alert('Export functionality would be implemented here'); |
| }); |
| |
| |
| document.getElementById('export-chart').addEventListener('click', () => { |
| alert('Chart export functionality would be implemented here'); |
| }); |
| |
| |
| document.getElementById('run-calibration').addEventListener('click', () => { |
| const progressElement = document.getElementById('calibration-progress'); |
| const resultsElement = document.getElementById('calibration-results'); |
| |
| |
| const btn = document.getElementById('run-calibration'); |
| btn.innerHTML = ` |
| <svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
| <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
| <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
| </svg> |
| Calibrating... |
| `; |
| btn.disabled = true; |
| |
| |
| progressElement.innerHTML = ` |
| <div class="mb-4"> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div id="calibration-progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300">Running differential evolution algorithm...</p> |
| `; |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += 2; |
| document.getElementById('calibration-progress-bar').style.width = `${progress}%`; |
| |
| if (progress >= 100) { |
| clearInterval(interval); |
| |
| |
| progressElement.innerHTML = ` |
| <div class="text-green-400 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| <p class="mt-2">Calibration completed successfully!</p> |
| </div> |
| `; |
| |
| resultsElement.innerHTML = ` |
| <div class="text-left"> |
| <h4 class="font-medium mb-2">Optimized Parameters</h4> |
| <div class="bg-gray-700 p-3 rounded text-sm overflow-x-auto"> |
| <pre class="text-gray-300"> |
| α₀ (Substrate Supply 1): 0.0285 |
| α₁ (Substrate Supply 2): 0.0021 |
| T_param_a (Optimal Temp): 28.7 |
| T_param_b (Temp Response): 62.3 |
| pH_param_a (Optimal pH): 6.9 |
| pH_param_b (pH Response): 4.2 |
| Oxidation Coefficient: 0.52 |
| Transport Coefficient: 0.68 |
| C_sim_coef: 0.018 |
| C_exp: 0.79 |
| C_max_coef: 9.51 |
| C_max_exp: 0.63 |
| Rh_coef: 1.65 |
| micro_coef1: 0.125 |
| micro_coef2: 0.208 |
| micro_coef3: 0.039 |
| micro_coef4: 0.162 |
| N_coef1: 0.152 |
| N_coef2: 0.041 |
| N_exp: 0.31</pre> |
| </div> |
| |
| <h4 class="font-medium mt-4 mb-2">Performance Metrics</h4> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-gray-700 p-3 rounded"> |
| <p class="text-sm text-gray-400">R² Score</p> |
| <p class="text-xl">0.87</p> |
| </div> |
| <div class="bg-gray-700 p-3 rounded"> |
| <p class="text-sm text-gray-400">NSE Score</p> |
| <p class="text-xl">0.85</p> |
| </div> |
| <div class="bg-gray-700 p-3 rounded"> |
| <p class="text-sm text-gray-400">RMSE</p> |
| <p class="text-xl">3.21</p> |
| </div> |
| <div class="bg-gray-700 p-3 rounded"> |
| <p class="text-sm text-gray-400">MAE</p> |
| <p class="text-xl">2.65</p> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| |
| btn.innerHTML = ` |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
| </svg> |
| Run Calibration |
| `; |
| btn.disabled = false; |
| } |
| }, 100); |
| }); |
| |
| |
| document.getElementById('reset-calibration').addEventListener('click', () => { |
| document.getElementById('calibration-progress').innerHTML = ` |
| <p class="text-gray-400">Calibration not yet run</p> |
| `; |
| |
| document.getElementById('calibration-results').innerHTML = ` |
| <p class="text-gray-400">Results will appear here after calibration</p> |
| `; |
| |
| |
| document.getElementById('population-size').value = 20; |
| document.getElementById('max-iterations').value = 100; |
| document.getElementById('strategy').value = 'best1bin'; |
| document.getElementById('use-default-bounds').checked = true; |
| }); |
| |
| |
| document.getElementById('load-calibration-data').addEventListener('click', () => { |
| alert('In a real implementation, this would load calibration data from a file'); |
| }); |
| |
| |
| document.getElementById('export-results').addEventListener('click', () => { |
| alert('Export functionality would be implemented here'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gaowudao/ch4mn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
