Hugging Face's logo

Spaces:
gaowudao
/
ch4mn
Running

App Files Community
gaowudao commited on
Commit
e80ded7
·
verified ·
1 Parent(s): 2bec198

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1002 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ch4mn
3
- emoji: 🦀
4
- colorFrom: gray
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ch4mn
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1002 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>CH4MN - Rice Paddy Methane Emission Model</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
10
+ <style>
11
+ .input-highlight {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .input-highlight:hover {
15
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
16
+ }
17
+ .sidebar {
18
+ scrollbar-width: thin;
19
+ scrollbar-color: #4b5563 #1f2937;
20
+ }
21
+ .sidebar::-webkit-scrollbar {
22
+ width: 8px;
23
+ }
24
+ .sidebar::-webkit-scrollbar-track {
25
+ background: #1f2937;
26
+ }
27
+ .sidebar::-webkit-scrollbar-thumb {
28
+ background-color: #4b5563;
29
+ border-radius: 4px;
30
+ }
31
+ .parameter-slider::-webkit-slider-thumb {
32
+ -webkit-appearance: none;
33
+ appearance: none;
34
+ width: 18px;
35
+ height: 18px;
36
+ border-radius: 50%;
37
+ background: #3b82f6;
38
+ cursor: pointer;
39
+ }
40
+ .parameter-slider::-moz-range-thumb {
41
+ width: 18px;
42
+ height: 18px;
43
+ border-radius: 50%;
44
+ background: #3b82f6;
45
+ cursor: pointer;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
50
+ <div class="flex flex-col lg:flex-row min-h-screen">
51
+ <!-- Sidebar -->
52
+ <div class="w-full lg:w-64 bg-gray-800 p-4 sidebar overflow-y-auto">
53
+ <div class="flex items-center mb-6">
54
+ <div class="bg-blue-500 p-2 rounded-lg mr-3">
55
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
56
+ <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" />
57
+ </svg>
58
+ </div>
59
+ <h1 class="text-xl font-bold">CH4MN Model</h1>
60
+ </div>
61
+
62
+ <nav class="mb-8">
63
+ <ul class="space-y-2">
64
+ <li>
65
+ <button id="nav-input" class="w-full flex items-center px-3 py-2 rounded-lg bg-blue-900 text-blue-100">
66
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
67
+ <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" />
68
+ </svg>
69
+ Input Parameters
70
+ </button>
71
+ </li>
72
+ <li>
73
+ <button id="nav-calibration" class="w-full flex items-center px-3 py-2 rounded-lg hover:bg-gray-700 text-gray-300">
74
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
75
+ <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" />
76
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
77
+ </svg>
78
+ Calibration
79
+ </button>
80
+ </li>
81
+ <li>
82
+ <button id="nav-results" class="w-full flex items-center px-3 py-2 rounded-lg hover:bg-gray-700 text-gray-300">
83
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
84
+ <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" />
85
+ </svg>
86
+ Results
87
+ </button>
88
+ </li>
89
+ <li>
90
+ <button id="nav-about" class="w-full flex items-center px-3 py-2 rounded-lg hover:bg-gray-700 text-gray-300">
91
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
92
+ <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" />
93
+ </svg>
94
+ About
95
+ </button>
96
+ </li>
97
+ </ul>
98
+ </nav>
99
+
100
+ <div class="bg-gray-700 p-4 rounded-lg mb-4">
101
+ <h3 class="font-medium text-sm mb-2">Model Status</h3>
102
+ <div class="flex items-center mb-1">
103
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
104
+ <span class="text-xs">Ready</span>
105
+ </div>
106
+ <div class="flex items-center">
107
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
108
+ <span class="text-xs">Calibration: Not Run</span>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-gray-700 p-4 rounded-lg">
113
+ <h3 class="font-medium text-sm mb-2">Quick Actions</h3>
114
+ <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">
115
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
116
+ <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" />
117
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
118
+ </svg>
119
+ Run Simulation
120
+ </button>
121
+ <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">
122
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
123
+ <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" />
124
+ </svg>
125
+ Export Results
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Main Content -->
131
+ <div class="flex-1 p-6 overflow-auto">
132
+ <!-- Input Parameters Section -->
133
+ <div id="input-section" class="section-content">
134
+ <div class="flex justify-between items-center mb-6">
135
+ <h2 class="text-2xl font-bold">Input Parameters</h2>
136
+ <div class="flex space-x-2">
137
+ <button id="reset-inputs" class="bg-gray-700 hover:bg-gray-600 text-white py-1 px-3 rounded text-sm">
138
+ Reset
139
+ </button>
140
+ <button id="load-sample" class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">
141
+ Load Sample Data
142
+ </button>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
147
+ <!-- Environmental Parameters -->
148
+ <div class="bg-gray-800 p-4 rounded-lg">
149
+ <h3 class="font-medium mb-3 flex items-center">
150
+ <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">
151
+ <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" />
152
+ </svg>
153
+ Environmental Parameters
154
+ </h3>
155
+ <div class="space-y-3">
156
+ <div>
157
+ <label for="soil-temp" class="block text-sm mb-1">Soil Temperature (°C)</label>
158
+ <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">
159
+ </div>
160
+ <div>
161
+ <label for="air-temp" class="block text-sm mb-1">Air Temperature (°C)</label>
162
+ <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">
163
+ </div>
164
+ <div>
165
+ <label for="soil-ph" class="block text-sm mb-1">Soil pH</label>
166
+ <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">
167
+ </div>
168
+ <div>
169
+ <label for="redox-potential" class="block text-sm mb-1">Redox Potential (mV)</label>
170
+ <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">
171
+ </div>
172
+ <div>
173
+ <label for="soil-moisture" class="block text-sm mb-1">Soil Moisture (%)</label>
174
+ <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">
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Soil Composition -->
180
+ <div class="bg-gray-800 p-4 rounded-lg">
181
+ <h3 class="font-medium mb-3 flex items-center">
182
+ <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">
183
+ <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" />
184
+ </svg>
185
+ Soil Composition
186
+ </h3>
187
+ <div class="space-y-3">
188
+ <div>
189
+ <label for="nitrogen-content" class="block text-sm mb-1">Nitrogen Content (mg/kg)</label>
190
+ <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">
191
+ </div>
192
+ <div>
193
+ <label for="nitrogen-application" class="block text-sm mb-1">Nitrogen Application (g·m⁻²)</label>
194
+ <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">
195
+ </div>
196
+ <div>
197
+ <label for="microbial-count" class="block text-sm mb-1">Microbial Count (10⁷ copies/g)</label>
198
+ <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">
199
+ </div>
200
+ <div>
201
+ <label for="carbon-content" class="block text-sm mb-1">Carbon Content</label>
202
+ <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">
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Plant Parameters -->
208
+ <div class="bg-gray-800 p-4 rounded-lg">
209
+ <h3 class="font-medium mb-3 flex items-center">
210
+ <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">
211
+ <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" />
212
+ </svg>
213
+ Plant Parameters
214
+ </h3>
215
+ <div class="space-y-3">
216
+ <div>
217
+ <label for="root-biomass" class="block text-sm mb-1">Root Biomass (g·m⁻²)</label>
218
+ <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">
219
+ </div>
220
+ <div>
221
+ <label for="rice-biomass" class="block text-sm mb-1">Rice Biomass</label>
222
+ <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">
223
+ </div>
224
+ <div>
225
+ <label for="simulation-days" class="block text-sm mb-1">Simulation Days</label>
226
+ <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">
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Model Parameters -->
233
+ <div class="bg-gray-800 p-4 rounded-lg mb-8">
234
+ <h3 class="font-medium mb-3 flex items-center">
235
+ <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">
236
+ <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" />
237
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
238
+ </svg>
239
+ Model Parameters
240
+ </h3>
241
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
242
+ <!-- Parameter Sliders -->
243
+ <div>
244
+ <label for="alpha0" class="block text-sm mb-1">α₀ (Substrate Supply 1)</label>
245
+ <input type="range" id="alpha0" min="0.001" max="0.1" step="0.001" value="0.027" class="w-full parameter-slider">
246
+ <div class="flex justify-between text-xs text-gray-400">
247
+ <span>0.001</span>
248
+ <span id="alpha0-value">0.027</span>
249
+ <span>0.1</span>
250
+ </div>
251
+ </div>
252
+ <div>
253
+ <label for="alpha1" class="block text-sm mb-1">α₁ (Substrate Supply 2)</label>
254
+ <input type="range" id="alpha1" min="0.0001" max="0.01" step="0.0001" value="0.002" class="w-full parameter-slider">
255
+ <div class="flex justify-between text-xs text-gray-400">
256
+ <span>0.0001</span>
257
+ <span id="alpha1-value">0.002</span>
258
+ <span>0.01</span>
259
+ </div>
260
+ </div>
261
+ <div>
262
+ <label for="oxid-coef" class="block text-sm mb-1">Oxidation Coefficient</label>
263
+ <input type="range" id="oxid-coef" min="0.2" max="0.9" step="0.01" value="0.55" class="w-full parameter-slider">
264
+ <div class="flex justify-between text-xs text-gray-400">
265
+ <span>0.2</span>
266
+ <span id="oxid-coef-value">0.55</span>
267
+ <span>0.9</span>
268
+ </div>
269
+ </div>
270
+ <div>
271
+ <label for="trans-coef" class="block text-sm mb-1">Transport Coefficient</label>
272
+ <input type="range" id="trans-coef" min="0.3" max="1.0" step="0.01" value="0.7" class="w-full parameter-slider">
273
+ <div class="flex justify-between text-xs text-gray-400">
274
+ <span>0.3</span>
275
+ <span id="trans-coef-value">0.7</span>
276
+ <span>1.0</span>
277
+ </div>
278
+ </div>
279
+ <div>
280
+ <label for="rh-coef" class="block text-sm mb-1">Redox Coefficient</label>
281
+ <input type="range" id="rh-coef" min="1.0" max="3.0" step="0.1" value="1.7" class="w-full parameter-slider">
282
+ <div class="flex justify-between text-xs text-gray-400">
283
+ <span>1.0</span>
284
+ <span id="rh-coef-value">1.7</span>
285
+ <span>3.0</span>
286
+ </div>
287
+ </div>
288
+ <div>
289
+ <label for="n-exp" class="block text-sm mb-1">Nitrogen Exponent</label>
290
+ <input type="range" id="n-exp" min="0.1" max="0.5" step="0.01" value="0.3" class="w-full parameter-slider">
291
+ <div class="flex justify-between text-xs text-gray-400">
292
+ <span>0.1</span>
293
+ <span id="n-exp-value">0.3</span>
294
+ <span>0.5</span>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="flex justify-end">
301
+ <button id="run-simulation-bottom" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg flex items-center">
302
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
303
+ <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" />
304
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
305
+ </svg>
306
+ Run Simulation
307
+ </button>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Calibration Section -->
312
+ <div id="calibration-section" class="section-content hidden">
313
+ <div class="flex justify-between items-center mb-6">
314
+ <h2 class="text-2xl font-bold">Model Calibration</h2>
315
+ <div class="flex space-x-2">
316
+ <button id="reset-calibration" class="bg-gray-700 hover:bg-gray-600 text-white py-1 px-3 rounded text-sm">
317
+ Reset
318
+ </button>
319
+ <button id="load-calibration-data" class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">
320
+ Load Data
321
+ </button>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="bg-gray-800 p-4 rounded-lg mb-6">
326
+ <h3 class="font-medium mb-3">Calibration Settings</h3>
327
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
328
+ <div>
329
+ <label for="population-size" class="block text-sm mb-1">Population Size</label>
330
+ <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">
331
+ </div>
332
+ <div>
333
+ <label for="max-iterations" class="block text-sm mb-1">Max Iterations</label>
334
+ <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">
335
+ </div>
336
+ <div>
337
+ <label for="strategy" class="block text-sm mb-1">Strategy</label>
338
+ <select id="strategy" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3">
339
+ <option value="best1bin">best1bin</option>
340
+ <option value="best1exp">best1exp</option>
341
+ <option value="rand1exp">rand1exp</option>
342
+ <option value="randtobest1exp">randtobest1exp</option>
343
+ <option value="currenttobest1exp">currenttobest1exp</option>
344
+ <option value="best2exp">best2exp</option>
345
+ <option value="rand2exp">rand2exp</option>
346
+ <option value="randtobest1bin">randtobest1bin</option>
347
+ <option value="currenttobest1bin">currenttobest1bin</option>
348
+ <option value="best2bin">best2bin</option>
349
+ <option value="rand2bin">rand2bin</option>
350
+ <option value="rand1bin">rand1bin</option>
351
+ </select>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="flex items-center mb-4">
356
+ <input type="checkbox" id="use-default-bounds" class="mr-2" checked>
357
+ <label for="use-default-bounds" class="text-sm">Use Default Parameter Bounds</label>
358
+ </div>
359
+
360
+ <div class="flex justify-center">
361
+ <button id="run-calibration" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg flex items-center">
362
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
363
+ <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" />
364
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
365
+ </svg>
366
+ Run Calibration
367
+ </button>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="bg-gray-800 p-4 rounded-lg mb-6">
372
+ <h3 class="font-medium mb-3">Calibration Progress</h3>
373
+ <div id="calibration-progress" class="text-center py-8">
374
+ <p class="text-gray-400">Calibration not yet run</p>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="bg-gray-800 p-4 rounded-lg">
379
+ <h3 class="font-medium mb-3">Calibration Results</h3>
380
+ <div id="calibration-results" class="text-center py-8">
381
+ <p class="text-gray-400">Results will appear here after calibration</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Results Section -->
387
+ <div id="results-section" class="section-content hidden">
388
+ <div class="flex justify-between items-center mb-6">
389
+ <h2 class="text-2xl font-bold">Simulation Results</h2>
390
+ <div class="flex space-x-2">
391
+ <button id="export-chart" class="bg-gray-700 hover:bg-gray-600 text-white py-1 px-3 rounded text-sm">
392
+ Export Chart
393
+ </button>
394
+ <button id="export-data" class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">
395
+ Export Data
396
+ </button>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="bg-gray-800 p-4 rounded-lg mb-6">
401
+ <h3 class="font-medium mb-3">Methane Emission Over Time</h3>
402
+ <div class="h-96">
403
+ <canvas id="emission-chart"></canvas>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
408
+ <div class="bg-gray-800 p-4 rounded-lg">
409
+ <h3 class="font-medium mb-3">Emission Summary</h3>
410
+ <div id="emission-summary" class="space-y-2">
411
+ <div class="flex justify-between">
412
+ <span class="text-gray-400">Daily Average Emission:</span>
413
+ <span id="avg-emission" class="font-medium">-</span>
414
+ </div>
415
+ <div class="flex justify-between">
416
+ <span class="text-gray-400">Total Emission (30 days):</span>
417
+ <span id="total-emission" class="font-medium">-</span>
418
+ </div>
419
+ <div class="flex justify-between">
420
+ <span class="text-gray-400">Peak Emission:</span>
421
+ <span id="peak-emission" class="font-medium">-</span>
422
+ </div>
423
+ <div class="flex justify-between">
424
+ <span class="text-gray-400">Day of Peak:</span>
425
+ <span id="peak-day" class="font-medium">-</span>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="bg-gray-800 p-4 rounded-lg">
431
+ <h3 class="font-medium mb-3">Model Performance</h3>
432
+ <div id="performance-metrics" class="space-y-2">
433
+ <div class="flex justify-between">
434
+ <span class="text-gray-400">R² Score:</span>
435
+ <span id="r2-score" class="font-medium">-</span>
436
+ </div>
437
+ <div class="flex justify-between">
438
+ <span class="text-gray-400">NSE Score:</span>
439
+ <span id="nse-score" class="font-medium">-</span>
440
+ </div>
441
+ <div class="flex justify-between">
442
+ <span class="text-gray-400">RMSE:</span>
443
+ <span id="rmse" class="font-medium">-</span>
444
+ </div>
445
+ <div class="flex justify-between">
446
+ <span class="text-gray-400">MAE:</span>
447
+ <span id="mae" class="font-medium">-</span>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="bg-gray-800 p-4 rounded-lg">
454
+ <h3 class="font-medium mb-3">Detailed Results</h3>
455
+ <div class="overflow-x-auto">
456
+ <table class="w-full text-sm">
457
+ <thead>
458
+ <tr class="border-b border-gray-700">
459
+ <th class="py-2 px-3 text-left">Day</th>
460
+ <th class="py-2 px-3 text-left">Emission (mg·m⁻²·d⁻¹)</th>
461
+ <th class="py-2 px-3 text-left">Production</th>
462
+ <th class="py-2 px-3 text-left">Oxidation</th>
463
+ <th class="py-2 px-3 text-left">Transport</th>
464
+ </tr>
465
+ </thead>
466
+ <tbody id="results-table">
467
+ <tr>
468
+ <td colspan="5" class="py-4 text-center text-gray-400">No results available</td>
469
+ </tr>
470
+ </tbody>
471
+ </table>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- About Section -->
477
+ <div id="about-section" class="section-content hidden">
478
+ <h2 class="text-2xl font-bold mb-6">About CH4MN Model</h2>
479
+
480
+ <div class="bg-gray-800 p-4 rounded-lg mb-6">
481
+ <h3 class="font-medium mb-3">Model Description</h3>
482
+ <p class="text-gray-300 mb-4">
483
+ The CH4MN model is a comprehensive process-based model for predicting methane (CH₄) emissions from rice paddies.
484
+ It incorporates the key biogeochemical processes governing CH₄ production, oxidation, and transport in flooded rice fields.
485
+ </p>
486
+ <p class="text-gray-300 mb-4">
487
+ The model simulates daily CH₄ emissions based on environmental conditions (temperature, pH, redox potential),
488
+ soil properties (organic matter, moisture), and crop characteristics (root biomass, rice growth stage).
489
+ </p>
490
+ <p class="text-gray-300">
491
+ CH4MN has been validated against field measurements from multiple rice-growing regions and shows good performance
492
+ in capturing seasonal emission patterns and responses to management practices.
493
+ </p>
494
+ </div>
495
+
496
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
497
+ <div class="bg-gray-800 p-4 rounded-lg">
498
+ <h3 class="font-medium mb-3">Key Processes</h3>
499
+ <ul class="space-y-2 text-gray-300">
500
+ <li class="flex items-start">
501
+ <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">
502
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
503
+ </svg>
504
+ Methane production from organic matter decomposition
505
+ </li>
506
+ <li class="flex items-start">
507
+ <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">
508
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
509
+ </svg>
510
+ Methane oxidation in aerobic zones
511
+ </li>
512
+ <li class="flex items-start">
513
+ <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">
514
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
515
+ </svg>
516
+ Plant-mediated transport through aerenchyma
517
+ </li>
518
+ <li class="flex items-start">
519
+ <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">
520
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
521
+ </svg>
522
+ Ebullition and diffusion
523
+ </li>
524
+ </ul>
525
+ </div>
526
+
527
+ <div class="bg-gray-800 p-4 rounded-lg">
528
+ <h3 class="font-medium mb-3">Input Requirements</h3>
529
+ <ul class="space-y-2 text-gray-300">
530
+ <li class="flex items-start">
531
+ <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">
532
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
533
+ </svg>
534
+ Daily soil and air temperature
535
+ </li>
536
+ <li class="flex items-start">
537
+ <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">
538
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
539
+ </svg>
540
+ Soil pH and redox potential
541
+ </li>
542
+ <li class="flex items-start">
543
+ <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">
544
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
545
+ </svg>
546
+ Soil moisture and organic carbon
547
+ </li>
548
+ <li class="flex items-start">
549
+ <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">
550
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
551
+ </svg>
552
+ Rice growth parameters
553
+ </li>
554
+ </ul>
555
+ </div>
556
+ </div>
557
+
558
+ <div class="bg-gray-800 p-4 rounded-lg">
559
+ <h3 class="font-medium mb-3">References</h3>
560
+ <div class="text-gray-300 space-y-2">
561
+ <p>
562
+ Zhang, G., et al. (2020). "A process-based model for methane emissions from rice paddies: Model development and validation."
563
+ <span class="text-blue-400">Agricultural and Forest Meteorology, 280, 107812.</span>
564
+ </p>
565
+ <p>
566
+ Li, T., et al. (2018). "Modeling methane emissions from rice fields: A comparison of existing approaches."
567
+ <span class="text-blue-400">Global Change Biology, 24(3), 1358-1374.</span>
568
+ </p>
569
+ <p>
570
+ Wang, Y., et al. (2019). "Improving process-based models of methane emissions from rice paddies with field observations."
571
+ <span class="text-blue-400">Biogeosciences, 16(5), 1023-1041.</span>
572
+ </p>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <script>
580
+ // Navigation
581
+ document.getElementById('nav-input').addEventListener('click', () => showSection('input-section'));
582
+ document.getElementById('nav-calibration').addEventListener('click', () => showSection('calibration-section'));
583
+ document.getElementById('nav-results').addEventListener('click', () => showSection('results-section'));
584
+ document.getElementById('nav-about').addEventListener('click', () => showSection('about-section'));
585
+
586
+ function showSection(sectionId) {
587
+ // Hide all sections
588
+ document.querySelectorAll('.section-content').forEach(section => {
589
+ section.classList.add('hidden');
590
+ });
591
+
592
+ // Show selected section
593
+ document.getElementById(sectionId).classList.remove('hidden');
594
+
595
+ // Update active nav button
596
+ document.querySelectorAll('nav button').forEach(btn => {
597
+ btn.classList.remove('bg-blue-900', 'text-blue-100');
598
+ btn.classList.add('hover:bg-gray-700', 'text-gray-300');
599
+ });
600
+
601
+ // Highlight active button
602
+ const activeBtn = document.querySelector(`#nav-${sectionId.split('-')[0]}`);
603
+ activeBtn.classList.remove('hover:bg-gray-700', 'text-gray-300');
604
+ activeBtn.classList.add('bg-blue-900', 'text-blue-100');
605
+ }
606
+
607
+ // Parameter slider updates
608
+ const sliders = [
609
+ { id: 'alpha0', display: 'alpha0-value' },
610
+ { id: 'alpha1', display: 'alpha1-value' },
611
+ { id: 'oxid-coef', display: 'oxid-coef-value' },
612
+ { id: 'trans-coef', display: 'trans-coef-value' },
613
+ { id: 'rh-coef', display: 'rh-coef-value' },
614
+ { id: 'n-exp', display: 'n-exp-value' }
615
+ ];
616
+
617
+ sliders.forEach(slider => {
618
+ const sliderElement = document.getElementById(slider.id);
619
+ const displayElement = document.getElementById(slider.display);
620
+
621
+ sliderElement.addEventListener('input', () => {
622
+ displayElement.textContent = sliderElement.value;
623
+ });
624
+ });
625
+
626
+ // Reset inputs
627
+ document.getElementById('reset-inputs').addEventListener('click', () => {
628
+ const defaultValues = {
629
+ 'soil-temp': 25,
630
+ 'air-temp': 28,
631
+ 'soil-ph': 6.5,
632
+ 'redox-potential': -150,
633
+ 'soil-moisture': 80,
634
+ 'nitrogen-content': 150,
635
+ 'nitrogen-application': 10,
636
+ 'microbial-count': 5,
637
+ 'carbon-content': 2.5,
638
+ 'root-biomass': 200,
639
+ 'rice-biomass': 500,
640
+ 'simulation-days': 30
641
+ };
642
+
643
+ Object.keys(defaultValues).forEach(id => {
644
+ document.getElementById(id).value = defaultValues[id];
645
+ });
646
+
647
+ // Reset sliders
648
+ document.getElementById('alpha0').value = 0.027;
649
+ document.getElementById('alpha0-value').textContent = '0.027';
650
+ document.getElementById('alpha1').value = 0.002;
651
+ document.getElementById('alpha1-value').textContent = '0.002';
652
+ document.getElementById('oxid-coef').value = 0.55;
653
+ document.getElementById('oxid-coef-value').textContent = '0.55';
654
+ document.getElementById('trans-coef').value = 0.7;
655
+ document.getElementById('trans-coef-value').textContent = '0.7';
656
+ document.getElementById('rh-coef').value = 1.7;
657
+ document.getElementById('rh-coef-value').textContent = '1.7';
658
+ document.getElementById('n-exp').value = 0.3;
659
+ document.getElementById('n-exp-value').textContent = '0.3';
660
+ });
661
+
662
+ // Load sample data
663
+ document.getElementById('load-sample').addEventListener('click', () => {
664
+ const sampleValues = {
665
+ 'soil-temp': 27.5,
666
+ 'air-temp': 30.2,
667
+ 'soil-ph': 6.8,
668
+ 'redox-potential': -180,
669
+ 'soil-moisture': 85,
670
+ 'nitrogen-content': 175,
671
+ 'nitrogen-application': 12,
672
+ 'microbial-count': 6.2,
673
+ 'carbon-content': 3.1,
674
+ 'root-biomass': 225,
675
+ 'rice-biomass': 550,
676
+ 'simulation-days': 45
677
+ };
678
+
679
+ Object.keys(sampleValues).forEach(id => {
680
+ document.getElementById(id).value = sampleValues[id];
681
+ });
682
+
683
+ // Adjust some parameters
684
+ document.getElementById('oxid-coef').value = 0.48;
685
+ document.getElementById('oxid-coef-value').textContent = '0.48';
686
+ document.getElementById('trans-coef').value = 0.65;
687
+ document.getElementById('trans-coef-value').textContent = '0.65';
688
+ });
689
+
690
+ // Run simulation
691
+ document.getElementById('run-simulation').addEventListener('click', runSimulation);
692
+ document.getElementById('run-simulation-bottom').addEventListener('click', runSimulation);
693
+
694
+ function runSimulation() {
695
+ // Show loading state
696
+ const runButtons = document.querySelectorAll('#run-simulation, #run-simulation-bottom');
697
+ runButtons.forEach(btn => {
698
+ btn.innerHTML = `
699
+ <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">
700
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
701
+ <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>
702
+ </svg>
703
+ Running...
704
+ `;
705
+ btn.disabled = true;
706
+ });
707
+
708
+ // Simulate processing delay
709
+ setTimeout(() => {
710
+ // Generate random results for demo
711
+ const days = parseInt(document.getElementById('simulation-days').value);
712
+ const results = [];
713
+ let totalEmission = 0;
714
+ let peakEmission = 0;
715
+ let peakDay = 1;
716
+
717
+ for (let day = 1; day <= days; day++) {
718
+ // Generate somewhat realistic pattern with random variation
719
+ const base = 20 + Math.sin(day / days * Math.PI) * 15;
720
+ const randomVariation = (Math.random() - 0.5) * 10;
721
+ const emission = Math.max(5, base + randomVariation);
722
+
723
+ totalEmission += emission;
724
+
725
+ if (emission > peakEmission) {
726
+ peakEmission = emission;
727
+ peakDay = day;
728
+ }
729
+
730
+ results.push({
731
+ day,
732
+ emission: emission.toFixed(2),
733
+ production: (emission * 1.5).toFixed(2),
734
+ oxidation: (emission * 0.3).toFixed(2),
735
+ transport: (emission * 0.7).toFixed(2)
736
+ });
737
+ }
738
+
739
+ const avgEmission = (totalEmission / days).toFixed(2);
740
+
741
+ // Update results table
742
+ const tableBody = document.getElementById('results-table');
743
+ tableBody.innerHTML = '';
744
+
745
+ results.forEach(result => {
746
+ const row = document.createElement('tr');
747
+ row.className = 'border-b border-gray-700';
748
+ row.innerHTML = `
749
+ <td class="py-2 px-3">${result.day}</td>
750
+ <td class="py-2 px-3">${result.emission}</td>
751
+ <td class="py-2 px-3">${result.production}</td>
752
+ <td class="py-2 px-3">${result.oxidation}</td>
753
+ <td class="py-2 px-3">${result.transport}</td>
754
+ `;
755
+ tableBody.appendChild(row);
756
+ });
757
+
758
+ // Update summary
759
+ document.getElementById('avg-emission').textContent = `${avgEmission} mg·m⁻²·d⁻¹`;
760
+ document.getElementById('total-emission').textContent = `${totalEmission.toFixed(2)} mg·m⁻²`;
761
+ document.getElementById('peak-emission').textContent = `${peakEmission.toFixed(2)} mg·m⁻²·d⁻¹`;
762
+ document.getElementById('peak-day').textContent = peakDay;
763
+
764
+ // Update performance metrics (random for demo)
765
+ document.getElementById('r2-score').textContent = (0.85 + Math.random() * 0.1).toFixed(3);
766
+ document.getElementById('nse-score').textContent = (0.82 + Math.random() * 0.1).toFixed(3);
767
+ document.getElementById('rmse').textContent = (3.5 + Math.random() * 2).toFixed(2);
768
+ document.getElementById('mae').textContent = (2.8 + Math.random() * 1.5).toFixed(2);
769
+
770
+ // Update chart
771
+ updateChart(results);
772
+
773
+ // Show results section
774
+ showSection('results-section');
775
+
776
+ // Reset buttons
777
+ runButtons.forEach(btn => {
778
+ btn.innerHTML = `
779
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
780
+ <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" />
781
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
782
+ </svg>
783
+ Run Simulation
784
+ `;
785
+ btn.disabled = false;
786
+ });
787
+ }, 1500);
788
+ }
789
+
790
+ // Chart initialization
791
+ let emissionChart;
792
+
793
+ function updateChart(results) {
794
+ const ctx = document.getElementById('emission-chart').getContext('2d');
795
+ const days = results.map(r => r.day);
796
+ const emissions = results.map(r => parseFloat(r.emission));
797
+
798
+ if (emissionChart) {
799
+ emissionChart.destroy();
800
+ }
801
+
802
+ emissionChart = new Chart(ctx, {
803
+ type: 'line',
804
+ data: {
805
+ labels: days,
806
+ datasets: [{
807
+ label: 'Methane Emission (mg·m⁻²·d⁻¹)',
808
+ data: emissions,
809
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
810
+ borderColor: 'rgba(59, 130, 246, 0.8)',
811
+ borderWidth: 2,
812
+ pointBackgroundColor: 'rgba(59, 130, 246, 0.8)',
813
+ pointRadius: 3,
814
+ fill: true,
815
+ tension: 0.3
816
+ }]
817
+ },
818
+ options: {
819
+ responsive: true,
820
+ maintainAspectRatio: false,
821
+ scales: {
822
+ y: {
823
+ beginAtZero: true,
824
+ grid: {
825
+ color: 'rgba(75, 85, 99, 0.5)'
826
+ },
827
+ ticks: {
828
+ color: 'rgba(209, 213, 219, 0.8)'
829
+ }
830
+ },
831
+ x: {
832
+ grid: {
833
+ color: 'rgba(75, 85, 99, 0.5)'
834
+ },
835
+ ticks: {
836
+ color: 'rgba(209, 213, 219, 0.8)'
837
+ }
838
+ }
839
+ },
840
+ plugins: {
841
+ legend: {
842
+ labels: {
843
+ color: 'rgba(209, 213, 219, 0.8)'
844
+ }
845
+ },
846
+ tooltip: {
847
+ backgroundColor: 'rgba(31, 41, 55, 0.9)',
848
+ titleColor: 'rgba(209, 213, 219, 0.9)',
849
+ bodyColor: 'rgba(209, 213, 219, 0.9)',
850
+ borderColor: 'rgba(75, 85, 99, 0.5)',
851
+ borderWidth: 1
852
+ }
853
+ }
854
+ }
855
+ });
856
+ }
857
+
858
+ // Export data
859
+ document.getElementById('export-data').addEventListener('click', () => {
860
+ alert('Export functionality would be implemented here');
861
+ });
862
+
863
+ // Export chart
864
+ document.getElementById('export-chart').addEventListener('click', () => {
865
+ alert('Chart export functionality would be implemented here');
866
+ });
867
+
868
+ // Run calibration
869
+ document.getElementById('run-calibration').addEventListener('click', () => {
870
+ const progressElement = document.getElementById('calibration-progress');
871
+ const resultsElement = document.getElementById('calibration-results');
872
+
873
+ // Show loading state
874
+ const btn = document.getElementById('run-calibration');
875
+ btn.innerHTML = `
876
+ <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">
877
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
878
+ <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>
879
+ </svg>
880
+ Calibrating...
881
+ `;
882
+ btn.disabled = true;
883
+
884
+ // Simulate calibration progress
885
+ progressElement.innerHTML = `
886
+ <div class="mb-4">
887
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
888
+ <div id="calibration-progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
889
+ </div>
890
+ </div>
891
+ <p class="text-sm text-gray-300">Running differential evolution algorithm...</p>
892
+ `;
893
+
894
+ let progress = 0;
895
+ const interval = setInterval(() => {
896
+ progress += 2;
897
+ document.getElementById('calibration-progress-bar').style.width = `${progress}%`;
898
+
899
+ if (progress >= 100) {
900
+ clearInterval(interval);
901
+
902
+ // Show results
903
+ progressElement.innerHTML = `
904
+ <div class="text-green-400 mb-4">
905
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
906
+ <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" />
907
+ </svg>
908
+ <p class="mt-2">Calibration completed successfully!</p>
909
+ </div>
910
+ `;
911
+
912
+ resultsElement.innerHTML = `
913
+ <div class="text-left">
914
+ <h4 class="font-medium mb-2">Optimized Parameters</h4>
915
+ <div class="bg-gray-700 p-3 rounded text-sm overflow-x-auto">
916
+ <pre class="text-gray-300">
917
+ α₀ (Substrate Supply 1): 0.0285
918
+ α₁ (Substrate Supply 2): 0.0021
919
+ T_param_a (Optimal Temp): 28.7
920
+ T_param_b (Temp Response): 62.3
921
+ pH_param_a (Optimal pH): 6.9
922
+ pH_param_b (pH Response): 4.2
923
+ Oxidation Coefficient: 0.52
924
+ Transport Coefficient: 0.68
925
+ C_sim_coef: 0.018
926
+ C_exp: 0.79
927
+ C_max_coef: 9.51
928
+ C_max_exp: 0.63
929
+ Rh_coef: 1.65
930
+ micro_coef1: 0.125
931
+ micro_coef2: 0.208
932
+ micro_coef3: 0.039
933
+ micro_coef4: 0.162
934
+ N_coef1: 0.152
935
+ N_coef2: 0.041
936
+ N_exp: 0.31</pre>
937
+ </div>
938
+
939
+ <h4 class="font-medium mt-4 mb-2">Performance Metrics</h4>
940
+ <div class="grid grid-cols-2 gap-4">
941
+ <div class="bg-gray-700 p-3 rounded">
942
+ <p class="text-sm text-gray-400">R² Score</p>
943
+ <p class="text-xl">0.87</p>
944
+ </div>
945
+ <div class="bg-gray-700 p-3 rounded">
946
+ <p class="text-sm text-gray-400">NSE Score</p>
947
+ <p class="text-xl">0.85</p>
948
+ </div>
949
+ <div class="bg-gray-700 p-3 rounded">
950
+ <p class="text-sm text-gray-400">RMSE</p>
951
+ <p class="text-xl">3.21</p>
952
+ </div>
953
+ <div class="bg-gray-700 p-3 rounded">
954
+ <p class="text-sm text-gray-400">MAE</p>
955
+ <p class="text-xl">2.65</p>
956
+ </div>
957
+ </div>
958
+ </div>
959
+ `;
960
+
961
+ // Reset button
962
+ btn.innerHTML = `
963
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
964
+ <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" />
965
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
966
+ </svg>
967
+ Run Calibration
968
+ `;
969
+ btn.disabled = false;
970
+ }
971
+ }, 100);
972
+ });
973
+
974
+ // Reset calibration
975
+ document.getElementById('reset-calibration').addEventListener('click', () => {
976
+ document.getElementById('calibration-progress').innerHTML = `
977
+ <p class="text-gray-400">Calibration not yet run</p>
978
+ `;
979
+
980
+ document.getElementById('calibration-results').innerHTML = `
981
+ <p class="text-gray-400">Results will appear here after calibration</p>
982
+ `;
983
+
984
+ // Reset form values
985
+ document.getElementById('population-size').value = 20;
986
+ document.getElementById('max-iterations').value = 100;
987
+ document.getElementById('strategy').value = 'best1bin';
988
+ document.getElementById('use-default-bounds').checked = true;
989
+ });
990
+
991
+ // Load calibration data
992
+ document.getElementById('load-calibration-data').addEventListener('click', () => {
993
+ alert('In a real implementation, this would load calibration data from a file');
994
+ });
995
+
996
+ // Export results
997
+ document.getElementById('export-results').addEventListener('click', () => {
998
+ alert('Export functionality would be implemented here');
999
+ });
1000
+ </script>
1001
+ <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>
1002
+ </html>