Hugging Face's logo

Spaces:
holyhigh666
/
drude-smith-test1
Running

App Files Community
holyhigh666 commited on
Commit
f807a5b
·
verified ·
1 Parent(s): 11aeacf

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +834 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Drude Smith Test1
3
- emoji: ⚡
4
- colorFrom: green
5
- colorTo: purple
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: drude-smith-test1
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,834 @@
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>Advanced Drude-Smith Model Visualizer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .slider-thumb::-webkit-slider-thumb {
12
+ -webkit-appearance: none;
13
+ width: 18px;
14
+ height: 18px;
15
+ background: #3b82f6;
16
+ border-radius: 50%;
17
+ cursor: pointer;
18
+ transition: all 0.2s;
19
+ }
20
+ .slider-thumb::-webkit-slider-thumb:hover {
21
+ transform: scale(1.2);
22
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
23
+ }
24
+ .control-panel {
25
+ background: white;
26
+ border-radius: 12px;
27
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
28
+ }
29
+ .parameter-card {
30
+ transition: all 0.2s;
31
+ border-left: 4px solid #3b82f6;
32
+ }
33
+ .parameter-card:hover {
34
+ transform: translateY(-2px);
35
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
36
+ }
37
+ .order-btn.active {
38
+ background: linear-gradient(135deg, #3b82f6, #1d4ed8);
39
+ color: white;
40
+ box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
41
+ }
42
+ .order-btn:not(.active) {
43
+ background: white;
44
+ color: #4b5563;
45
+ border: 1px solid #d1d5db;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <div class="container mx-auto px-4 py-8">
51
+ <div class="max-w-7xl mx-auto">
52
+ <!-- Header with animated title -->
53
+ <div class="text-center mb-10 transform transition-all duration-300 hover:scale-[1.01]">
54
+ <h1 class="text-4xl font-bold text-gray-800 mb-3 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent inline-block">
55
+ Drude-Smith Model Explorer
56
+ </h1>
57
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
58
+ Interactive visualization of conductive materials with backscattering effects.
59
+ <span class="block text-sm text-blue-600 mt-1">Adjust parameters below to see how they affect the conductivity spectrum.</span>
60
+ </p>
61
+ </div>
62
+
63
+ <!-- Main Content Grid -->
64
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
65
+ <!-- Control Panel -->
66
+ <div class="lg:col-span-1 space-y-4">
67
+ <!-- Model Order Selection -->
68
+ <div class="control-panel p-4">
69
+ <h2 class="text-xl font-semibold text-gray-700 mb-3 flex items-center">
70
+ <i class="fas fa-layer-group mr-2 text-blue-500"></i> Model Configuration
71
+ </h2>
72
+ <div class="grid grid-cols-3 gap-2">
73
+ <button id="drudeBtn" class="order-btn active py-2 px-2 rounded-md font-medium transition-all">
74
+ <i class="fas fa-atom mr-1"></i> Drude
75
+ </button>
76
+ <button id="firstOrderBtn" class="order-btn py-2 px-2 rounded-md font-medium transition-all">
77
+ <i class="fas fa-1 mr-1"></i> 1st Order
78
+ </button>
79
+ <button id="secondOrderBtn" class="order-btn py-2 px-2 rounded-md font-medium transition-all">
80
+ <i class="fas fa-2 mr-1"></i> 2nd Order
81
+ </button>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Fundamental Parameters -->
86
+ <div class="control-panel p-4">
87
+ <h2 class="text-xl font-semibold text-gray-700 mb-3 flex items-center">
88
+ <i class="fas fa-sliders-h mr-2 text-blue-500"></i> Fundamental Parameters
89
+ </h2>
90
+
91
+ <div class="parameter-card p-3 mb-4 bg-white rounded-lg">
92
+ <label for="plasmaFreq" class="block text-sm font-medium text-gray-700 mb-1">
93
+ <span class="flex justify-between">
94
+ <span>Plasma Frequency (ωₚ)</span>
95
+ <span class="text-blue-600 font-mono" id="plasmaFreqValue">1.0 ×10<sup>15</sup> rad/s</span>
96
+ </span>
97
+ </label>
98
+ <input type="range" id="plasmaFreq" min="0.1" max="5" step="0.1" value="1"
99
+ class="w-full slider-thumb h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
100
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
101
+ <span>0.1</span>
102
+ <span>5.0</span>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="parameter-card p-3 mb-4 bg-white rounded-lg">
107
+ <label for="scatteringTime" class="block text-sm font-medium text-gray-700 mb-1">
108
+ <span class="flex justify-between">
109
+ <span>Scattering Time (τ)</span>
110
+ <span class="text-blue-600 font-mono" id="scatteringTimeValue">10 fs</span>
111
+ </span>
112
+ </label>
113
+ <input type="range" id="scatteringTime" min="1" max="50" step="1" value="10"
114
+ class="w-full slider-thumb h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
115
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
116
+ <span>1 fs</span>
117
+ <span>50 fs</span>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="parameter-card p-3 bg-white rounded-lg">
122
+ <label for="freqRange" class="block text-sm font-medium text-gray-700 mb-1">
123
+ <span class="flex justify-between">
124
+ <span>Frequency Range</span>
125
+ <span class="text-blue-600 font-mono" id="freqRangeValue">10 ×10<sup>15</sup> rad/s</span>
126
+ </span>
127
+ </label>
128
+ <input type="range" id="freqRange" min="0.1" max="20" step="0.1" value="10"
129
+ class="w-full slider-thumb h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
130
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
131
+ <span>0.1</span>
132
+ <span>20.0</span>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Backscattering Parameters -->
138
+ <div class="control-panel p-4" id="backscatteringParams">
139
+ <h2 class="text-xl font-semibold text-gray-700 mb-3 flex items-center">
140
+ <i class="fas fa-project-diagram mr-2 text-blue-500"></i> Backscattering Parameters
141
+ </h2>
142
+
143
+ <div class="parameter-card p-3 mb-4 bg-white rounded-lg">
144
+ <label for="c1Value" class="block text-sm font-medium text-gray-700 mb-1">
145
+ <span class="flex justify-between">
146
+ <span>First Order (c₁)</span>
147
+ <span class="text-blue-600 font-mono" id="c1ValueDisplay">-0.5</span>
148
+ </span>
149
+ </label>
150
+ <input type="range" id="c1Value" min="-1" max="0" step="0.05" value="-0.5"
151
+ class="w-full slider-thumb h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
152
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
153
+ <span>-1.0</span>
154
+ <span>0.0</span>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="parameter-card p-3 bg-white rounded-lg hidden" id="c2Container">
159
+ <label for="c2Value" class="block text-sm font-medium text-gray-700 mb-1">
160
+ <span class="flex justify-between">
161
+ <span>Second Order (c₂)</span>
162
+ <span class="text-blue-600 font-mono" id="c2ValueDisplay">0.13</span>
163
+ </span>
164
+ </label>
165
+ <input type="range" id="c2Value" min="0" max="1" step="0.01" value="0.13"
166
+ class="w-full slider-thumb h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
167
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
168
+ <span>0.0</span>
169
+ <span>1.0</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- View Options -->
175
+ <div class="control-panel p-4">
176
+ <h2 class="text-xl font-semibold text-gray-700 mb-2 flex items-center">
177
+ <i class="fas fa-eye mr-2 text-blue-500"></i> View Options
178
+ </h2>
179
+ <div class="space-y-2">
180
+ <label class="flex items-center space-x-2 text-sm cursor-pointer">
181
+ <input type="checkbox" id="showDrude" class="rounded text-blue-500" checked>
182
+ <span>Show Drude Model</span>
183
+ </label>
184
+ <label class="flex items-center space-x-2 text-sm cursor-pointer">
185
+ <input type="checkbox" id="logScale" class="rounded text-blue-500">
186
+ <span>Logarithmic Scale</span>
187
+ </label>
188
+ <label class="flex items-center space-x-2 text-sm cursor-pointer">
189
+ <input type="checkbox" id="normalize" class="rounded text-blue-500">
190
+ <span>Normalize to Drude Peak</span>
191
+ </label>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Reset Button -->
196
+ <button id="resetBtn" class="w-full py-2 px-4 bg-white hover:bg-gray-50 text-gray-700 rounded-md font-medium transition-all border border-gray-200 flex items-center justify-center space-x-2">
197
+ <i class="fas fa-redo animate-spin hidden"></i>
198
+ <span id="resetText">Reset Parameters</span>
199
+ </button>
200
+ </div>
201
+
202
+ <!-- Visualization Panel -->
203
+ <div class="lg:col-span-3 space-y-4">
204
+ <!-- Main Plot -->
205
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-4 h-[500px]">
206
+ <div id="plotContainer" class="w-full h-full"></div>
207
+ </div>
208
+
209
+ <!-- Component Plots -->
210
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
211
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-4 h-64">
212
+ <div id="realPartPlot" class="w-full h-full"></div>
213
+ </div>
214
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-4 h-64">
215
+ <div id="imagPartPlot" class="w-full h-full"></div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Model Information -->
222
+ <div class="mt-8 p-6 bg-white rounded-xl shadow-md">
223
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
224
+ <h2 class="text-2xl font-semibold text-gray-800">
225
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i> About the Drude-Smith Model
226
+ </h2>
227
+ <div class="flex space-x-2 mt-2 md:mt-0" id="equation-toggle">
228
+ <button class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-md transition-all hover:bg-blue-200" data-eq="1st">
229
+ 1st Order Equation
230
+ </button>
231
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md transition-all hover:bg-gray-200" data-eq="2nd">
232
+ 2nd Order Equation
233
+ </button>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
238
+ <div>
239
+ <p class="text-gray-700 mb-4">
240
+ The Drude-Smith model extends the classical Drude model to account for the persistence of velocity
241
+ after scattering events, which is particularly important for disordered materials where backscattering
242
+ reduces conductivity.
243
+ </p>
244
+ <ul class="list-disc pl-5 space-y-1 text-gray-700">
245
+ <li><strong>Classical Drude Model:</strong> Assumes complete randomization after each scattering</li>
246
+ <li><strong>First Order DS Model:</strong> Introduces parameter c₁ to account for first-order backscattering</li>
247
+ <li><strong>Second Order DS Model:</strong> Adds c₂ parameter for more complex correlation effects</li>
248
+ <li><strong>c₁ Range:</strong> Typically -1 ≤ c₁ ≤ 0 (0 = Drude model, -1 = complete backscattering)</li>
249
+ </ul>
250
+ </div>
251
+ <div class="border border-blue-100 bg-blue-50 rounded-lg p-4 flex items-center justify-center">
252
+ <div id="equation-display" class="text-center">
253
+ <div id="first-order-eq" class="space-y-2">
254
+ <div class="text-lg font-medium text-gray-800">1st Order Drude-Smith Model:</div>
255
+ <div class="text-2xl font-math">
256
+ σ(ω) = <span class="text-blue-600">σ<sub>D</sub></span> [1 + <span class="text-green-600">c₁</span>/(1 - iωτ)]
257
+ </div>
258
+ <div class="text-sm text-gray-500 mt-2">
259
+ Where σ<sub>D</sub> is the Drude conductivity: ωₚ²τ/[4π(1 - iωτ)]
260
+ </div>
261
+ </div>
262
+ <div id="second-order-eq" class="space-y-2 hidden">
263
+ <div class="text-lg font-medium text-gray-800">2nd Order Drude-Smith Model:</div>
264
+ <div class="text-2xl font-math">
265
+ σ(ω) = <span class="text-blue-600">σ<sub>D</sub></span> [1 + <span class="text-green-600">c₁</span>/(1 - iωτ) + <span class="text-purple-600">c₂</span>/(1 - iωτ)²]
266
+ </div>
267
+ <div class="text-sm text-gray-500 mt-2">
268
+ Typically c₂ ≈ 0.5c₁² for physical consistency
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <script>
279
+ document.addEventListener('DOMContentLoaded', function() {
280
+ // Model parameters
281
+ let modelConfig = {
282
+ order: 'first', // 'drude', 'first', 'second'
283
+ wp: 1.0, // Plasma frequency (10^15 rad/s)
284
+ tau: 10, // Scattering time (fs)
285
+ c1: -0.5, // First order backscattering parameter
286
+ c2: 0.13, // Second order backscattering parameter (typically 0.5*c1^2)
287
+ maxFreq: 10, // Maximum frequency (10^15 rad/s)
288
+ showDrude: true,
289
+ logScale: false,
290
+ normalize: false
291
+ };
292
+
293
+ // DOM Elements
294
+ const elements = {
295
+ // Order selection
296
+ drudeBtn: document.getElementById('drudeBtn'),
297
+ firstOrderBtn: document.getElementById('firstOrderBtn'),
298
+ secondOrderBtn: document.getElementById('secondOrderBtn'),
299
+
300
+ // Sliders
301
+ plasmaFreqSlider: document.getElementById('plasmaFreq'),
302
+ scatteringTimeSlider: document.getElementById('scatteringTime'),
303
+ c1Slider: document.getElementById('c1Value'),
304
+ c2Slider: document.getElementById('c2Value'),
305
+ freqRangeSlider: document.getElementById('freqRange'),
306
+
307
+ // Value displays
308
+ plasmaFreqValue: document.getElementById('plasmaFreqValue'),
309
+ scatteringTimeValue: document.getElementById('scatteringTimeValue'),
310
+ c1ValueDisplay: document.getElementById('c1ValueDisplay'),
311
+ c2ValueDisplay: document.getElementById('c2ValueDisplay'),
312
+ freqRangeValue: document.getElementById('freqRangeValue'),
313
+
314
+ // View options
315
+ showDrude: document.getElementById('showDrude'),
316
+ logScale: document.getElementById('logScale'),
317
+ normalize: document.getElementById('normalize'),
318
+
319
+ // Equation display
320
+ firstOrderEq: document.getElementById('first-order-eq'),
321
+ secondOrderEq: document.getElementById('second-order-eq'),
322
+ eqButtons: document.querySelectorAll('#equation-toggle button'),
323
+
324
+ // Reset button
325
+ resetBtn: document.getElementById('resetBtn'),
326
+ resetText: document.getElementById('resetText'),
327
+ resetIcon: document.querySelector('#resetBtn i'),
328
+
329
+ // Additional parameters container
330
+ backscatteringParams: document.getElementById('backscatteringParams'),
331
+ c2Container: document.getElementById('c2Container'),
332
+
333
+ // Plot containers
334
+ mainPlot: document.getElementById('plotContainer'),
335
+ realPartPlot: document.getElementById('realPartPlot'),
336
+ imagPartPlot: document.getElementById('imagPartPlot')
337
+ };
338
+
339
+ // Initialize plots
340
+ let plots = {
341
+ main: null,
342
+ real: null,
343
+ imag: null
344
+ };
345
+
346
+ // Initialize the application
347
+ function init() {
348
+ setupEventListeners();
349
+ updateParameterVisibility();
350
+ updateModelParameters();
351
+ createPlots();
352
+ }
353
+
354
+ // Set up event listeners
355
+ function setupEventListeners() {
356
+ // Order selection buttons
357
+ elements.drudeBtn.addEventListener('click', () => setModelOrder('drude'));
358
+ elements.firstOrderBtn.addEventListener('click', () => setModelOrder('first'));
359
+ elements.secondOrderBtn.addEventListener('click', () => setModelOrder('second'));
360
+
361
+ // Slider inputs
362
+ elements.plasmaFreqSlider.addEventListener('input', updatePlasmaFrequency);
363
+ elements.scatteringTimeSlider.addEventListener('input', updateScatteringTime);
364
+ elements.c1Slider.addEventListener('input', updateC1Parameter);
365
+ elements.c2Slider.addEventListener('input', updateC2Parameter);
366
+ elements.freqRangeSlider.addEventListener('input', updateFrequencyRange);
367
+
368
+ // View options
369
+ elements.showDrude.addEventListener('change', updateViewOptions);
370
+ elements.logScale.addEventListener('change', updateViewOptions);
371
+ elements.normalize.addEventListener('change', updateViewOptions);
372
+
373
+ // Equation display toggles
374
+ elements.eqButtons.forEach(btn => {
375
+ btn.addEventListener('click', () => {
376
+ const eqType = btn.dataset.eq;
377
+ elements.eqButtons.forEach(b => b.classList.remove('bg-blue-100', 'text-blue-700'));
378
+ elements.eqButtons.forEach(b => b.classList.add('bg-gray-100', 'text-gray-700'));
379
+ btn.classList.remove('bg-gray-100', 'text-gray-700');
380
+ btn.classList.add('bg-blue-100', 'text-blue-700');
381
+
382
+ elements.firstOrderEq.classList.toggle('hidden', eqType !== '1st');
383
+ elements.secondOrderEq.classList.toggle('hidden', eqType !== '2nd');
384
+ });
385
+ });
386
+
387
+ // Reset button
388
+ elements.resetBtn.addEventListener('click', resetParameters);
389
+ }
390
+
391
+ // Set the model order and update UI
392
+ function setModelOrder(order) {
393
+ modelConfig.order = order;
394
+
395
+ // Update button states
396
+ elements.drudeBtn.classList.toggle('active', order === 'drude');
397
+ elements.firstOrderBtn.classList.toggle('active', order === 'first');
398
+ elements.secondOrderBtn.classList.toggle('active', order === 'second');
399
+
400
+ // Update parameter visibility
401
+ updateParameterVisibility();
402
+
403
+ // Recalculate and update plots
404
+ updatePlots();
405
+ }
406
+
407
+ // Update which parameters are visible based on model order
408
+ function updateParameterVisibility() {
409
+ if (modelConfig.order === 'drude') {
410
+ elements.backscatteringParams.classList.add('opacity-50', 'pointer-events-none');
411
+ elements.c2Container.classList.add('hidden');
412
+ } else {
413
+ elements.backscatteringParams.classList.remove('opacity-50', 'pointer-events-none');
414
+ if (modelConfig.order === 'second') {
415
+ elements.c2Container.classList.remove('hidden');
416
+ } else {
417
+ elements.c2Container.classList.add('hidden');
418
+ }
419
+ }
420
+ }
421
+
422
+ // Update individual parameters
423
+ function updatePlasmaFrequency() {
424
+ modelConfig.wp = parseFloat(elements.plasmaFreqSlider.value);
425
+ elements.plasmaFreqValue.textContent = `${modelConfig.wp} ×10¹⁵ rad/s`;
426
+ updatePlots();
427
+ }
428
+
429
+ function updateScatteringTime() {
430
+ modelConfig.tau = parseInt(elements.scatteringTimeSlider.value);
431
+ elements.scatteringTimeValue.textContent = `${modelConfig.tau} fs`;
432
+ updatePlots();
433
+ }
434
+
435
+ function updateC1Parameter() {
436
+ modelConfig.c1 = parseFloat(elements.c1Slider.value);
437
+ elements.c1ValueDisplay.textContent = modelConfig.c1.toFixed(2);
438
+ if (modelConfig.order === 'second') {
439
+ modelConfig.c2 = 0.5 * modelConfig.c1 * modelConfig.c1;
440
+ elements.c2Slider.value = modelConfig.c2.toFixed(2);
441
+ elements.c2ValueDisplay.textContent = modelConfig.c2.toFixed(2);
442
+ }
443
+ updatePlots();
444
+ }
445
+
446
+ function updateC2Parameter() {
447
+ modelConfig.c2 = parseFloat(elements.c2Slider.value);
448
+ elements.c2ValueDisplay.textContent = modelConfig.c2.toFixed(2);
449
+ updatePlots();
450
+ }
451
+
452
+ function updateFrequencyRange() {
453
+ modelConfig.maxFreq = parseFloat(elements.freqRangeSlider.value);
454
+ elements.freqRangeValue.textContent = `${modelConfig.maxFreq} ×10¹⁵ rad/s`;
455
+ updatePlots();
456
+ }
457
+
458
+ function updateViewOptions() {
459
+ modelConfig.showDrude = elements.showDrude.checked;
460
+ modelConfig.logScale = elements.logScale.checked;
461
+ modelConfig.normalize = elements.normalize.checked;
462
+ updatePlots();
463
+ }
464
+
465
+ // Reset all parameters to defaults
466
+ function resetParameters() {
467
+ // Show loading state
468
+ elements.resetText.textContent = "Resetting...";
469
+ elements.resetIcon.classList.remove('hidden');
470
+
471
+ // Reset model configuration
472
+ modelConfig = {
473
+ order: 'first',
474
+ wp: 1.0,
475
+ tau: 10,
476
+ c1: -0.5,
477
+ c2: 0.13,
478
+ maxFreq: 10,
479
+ showDrude: true,
480
+ logScale: false,
481
+ normalize: false
482
+ };
483
+
484
+ // Update UI elements
485
+ elements.plasmaFreqSlider.value = modelConfig.wp;
486
+ elements.scatteringTimeSlider.value = modelConfig.tau;
487
+ elements.c1Slider.value = modelConfig.c1;
488
+ elements.c2Slider.value = modelConfig.c2;
489
+ elements.freqRangeSlider.value = modelConfig.maxFreq;
490
+
491
+ elements.plasmaFreqValue.textContent = `${modelConfig.wp} ×10¹⁵ rad/s`;
492
+ elements.scatteringTimeValue.textContent = `${modelConfig.tau} fs`;
493
+ elements.c1ValueDisplay.textContent = modelConfig.c1.toFixed(2);
494
+ elements.c2ValueDisplay.textContent = modelConfig.c2.toFixed(2);
495
+ elements.freqRangeValue.textContent = `${modelConfig.maxFreq} ×10¹⁵ rad/s`;
496
+
497
+ elements.showDrude.checked = modelConfig.showDrude;
498
+ elements.logScale.checked = modelConfig.logScale;
499
+ elements.normalize.checked = modelConfig.normalize;
500
+
501
+ setModelOrder('first');
502
+
503
+ // Reset equation display
504
+ elements.eqButtons[0].classList.remove('bg-gray-100', 'text-gray-700');
505
+ elements.eqButtons[0].classList.add('bg-blue-100', 'text-blue-700');
506
+ elements.eqButtons[1].classList.remove('bg-blue-100', 'text-blue-700');
507
+ elements.eqButtons[1].classList.add('bg-gray-100', 'text-gray-700');
508
+ elements.firstOrderEq.classList.remove('hidden');
509
+ elements.secondOrderEq.classList.add('hidden');
510
+
511
+ // Update plots after a small delay
512
+ setTimeout(() => {
513
+ elements.resetText.textContent = "Reset Parameters";
514
+ elements.resetIcon.classList.add('hidden');
515
+ updatePlots();
516
+ }, 300);
517
+ }
518
+
519
+ // Calculate Drude-Smith conductivity for given parameters
520
+ function calculateConductivity(omega, wp, tau, c1, c2, order) {
521
+ // Convert tau from fs to seconds
522
+ const tau_s = tau * 1e-15;
523
+ const omega_p = wp * 1e15; // Convert to rad/s
524
+
525
+ // Calculate the Drude term
526
+ const sigma_drude = omega_p * omega_p * tau_s / (4 * Math.PI * (1 - 1i * omega * tau_s));
527
+
528
+ // Apply Smith correction based on order
529
+ let smith_correction = 1;
530
+
531
+ if (order !== 'drude') {
532
+ smith_correction += c1 / (1 - 1i * omega * tau_s);
533
+
534
+ if (order === 'second') {
535
+ smith_correction += c2 / Math.pow(1 - 1i * omega * tau_s, 2);
536
+ }
537
+ }
538
+
539
+ const sigma = sigma_drude * smith_correction;
540
+
541
+ return {
542
+ real: sigma.re,
543
+ imag: sigma.im,
544
+ magnitude: Math.sqrt(sigma.re * sigma.re + sigma.im * sigma.im),
545
+ phase: Math.atan2(sigma.im, sigma.re) * 180 / Math.PI
546
+ };
547
+ }
548
+
549
+ // Generate data for plotting
550
+ function generateData() {
551
+ const data = {
552
+ frequency: [], // in 10^15 rad/s
553
+ drudeReal: [],
554
+ drudeImag: [],
555
+ modelReal: [],
556
+ modelImag: [],
557
+ modelMagnitude: [],
558
+ modelPhase: [],
559
+ normalizedReal: [],
560
+ normalizedImag: []
561
+ };
562
+
563
+ // Generate frequency points
564
+ const step = modelConfig.maxFreq / 200;
565
+ for (let i = 0; i <= 200; i++) {
566
+ const omega = i * step * 1e15; // in rad/s for calculations
567
+ const omegaDisplay = i * step; // in 10^15 rad/s for display
568
+
569
+ data.frequency.push(omegaDisplay);
570
+
571
+ // Calculate Drude model if needed for comparison
572
+ if (modelConfig.showDrude) {
573
+ const drude = calculateConductivity(omega, modelConfig.wp, modelConfig.tau, 0, 0, 'drude');
574
+ data.drudeReal.push(drude.real);
575
+ data.drudeImag.push(drude.imag);
576
+ }
577
+
578
+ // Calculate current model
579
+ let model;
580
+ if (modelConfig.order === 'drude') {
581
+ model = calculateConductivity(omega, modelConfig.wp, modelConfig.tau, 0, 0, 'drude');
582
+ } else if (modelConfig.order === 'first') {
583
+ model = calculateConductivity(omega, modelConfig.wp, modelConfig.tau, modelConfig.c1, 0, 'first');
584
+ } else {
585
+ model = calculateConductivity(omega, modelConfig.wp, modelConfig.tau, modelConfig.c1, modelConfig.c2, 'second');
586
+ }
587
+
588
+ data.modelReal.push(model.real);
589
+ data.modelImag.push(model.imag);
590
+ data.modelMagnitude.push(model.magnitude);
591
+ data.modelPhase.push(model.phase);
592
+
593
+ // Calculate normalized values if needed
594
+ if (modelConfig.normalize) {
595
+ const drudeDC = modelConfig.wp * modelConfig.wp * 1e30 * modelConfig.tau * 1e-15 / (4 * Math.PI);
596
+ data.normalizedReal.push(model.real / drudeDC);
597
+ data.normalizedImag.push(model.imag / drudeDC);
598
+ }
599
+ }
600
+
601
+ return data;
602
+ }
603
+
604
+ // Create all plots
605
+ function createPlots() {
606
+ const data = generateData();
607
+
608
+ // Main plot (showing both real and imaginary parts)
609
+ plots.main = Plotly.newPlot(elements.mainPlot, createMainPlotData(data), getMainPlotLayout(), {responsive: true});
610
+
611
+ // Real part plot
612
+ plots.real = Plotly.newPlot(elements.realPartPlot, createRealPartPlotData(data), getComponentPlotLayout('Real Part (σ₁)'), {responsive: true});
613
+
614
+ // Imaginary part plot
615
+ plots.imag = Plotly.newPlot(elements.imagPartPlot, createImagPartPlotData(data), getComponentPlotLayout('Imaginary Part (σ₂)'), {responsive: true});
616
+ }
617
+
618
+ // Update all plots with new data
619
+ function updatePlots() {
620
+ const data = generateData();
621
+
622
+ Plotly.react(elements.mainPlot, createMainPlotData(data), getMainPlotLayout());
623
+ Plotly.react(elements.realPartPlot, createRealPartPlotData(data), getComponentPlotLayout('Real Part (σ₁)'));
624
+ Plotly.react(elements.imagPartPlot, createImagPartPlotData(data), getComponentPlotLayout('Imaginary Part (σ₂)'));
625
+ }
626
+
627
+ // Data for the main plot
628
+ function createMainPlotData(data) {
629
+ const plotData = [];
630
+
631
+ // Add Drude model if enabled
632
+ if (modelConfig.showDrude && modelConfig.order !== 'drude') {
633
+ plotData.push({
634
+ x: data.frequency,
635
+ y: modelConfig.normalize ? data.normalizedReal : data.drudeReal,
636
+ name: 'Drude (Real)',
637
+ mode: 'lines',
638
+ line: {color: '#9CA3AF', width: 2, dash: 'dash'},
639
+ visible: true
640
+ });
641
+
642
+ plotData.push({
643
+ x: data.frequency,
644
+ y: modelConfig.normalize ? data.normalizedImag : data.drudeImag,
645
+ name: 'Drude (Imag)',
646
+ mode: 'lines',
647
+ line: {color: '#9CA3AF', width: 2, dash: 'dash'},
648
+ visible: true
649
+ });
650
+ }
651
+
652
+ // Add current model
653
+ plotData.push({
654
+ x: data.frequency,
655
+ y: modelConfig.normalize ? data.normalizedReal : data.modelReal,
656
+ name: modelConfig.order === 'drude' ? 'Drude (Real)' :
657
+ (modelConfig.order === 'first' ? 'DS-1 (Real)' : 'DS-2 (Real)'),
658
+ mode: 'lines',
659
+ line: {color: '#3B82F6', width: 3},
660
+ visible: true
661
+ });
662
+
663
+ plotData.push({
664
+ x: data.frequency,
665
+ y: modelConfig.normalize ? data.normalizedImag : data.modelImag,
666
+ name: modelConfig.order === 'drude' ? 'Drude (Imag)' :
667
+ (modelConfig.order === 'first' ? 'DS-1 (Imag)' : 'DS-2 (Imag)'),
668
+ mode: 'lines',
669
+ line: {color: '#EF4444', width: 3},
670
+ visible: true
671
+ });
672
+
673
+ return plotData;
674
+ }
675
+
676
+ // Data for the real part plot
677
+ function createRealPartPlotData(data) {
678
+ const plotData = [];
679
+
680
+ if (modelConfig.showDrude && modelConfig.order !== 'drude') {
681
+ plotData.push({
682
+ x: data.frequency,
683
+ y: modelConfig.normalize ? data.normalizedReal : data.drudeReal,
684
+ name: 'Drude Model',
685
+ mode: 'lines',
686
+ line: {color: '#9CA3AF', width: 2, dash: 'dash'},
687
+ visible: true
688
+ });
689
+ }
690
+
691
+ plotData.push({
692
+ x: data.frequency,
693
+ y: modelConfig.normalize ? data.normalizedReal : data.modelReal,
694
+ name: modelConfig.order === 'drude' ? 'Drude Model' :
695
+ (modelConfig.order === 'first' ? '1st Order DS' : '2nd Order DS'),
696
+ mode: 'lines',
697
+ line: {color: '#3B82F6', width: 3},
698
+ visible: true
699
+ });
700
+
701
+ return plotData;
702
+ }
703
+
704
+ // Data for the imaginary part plot
705
+ function createImagPartPlotData(data) {
706
+ const plotData = [];
707
+
708
+ if (modelConfig.showDrude && modelConfig.order !== 'drude') {
709
+ plotData.push({
710
+ x: data.frequency,
711
+ y: modelConfig.normalize ? data.normalizedImag : data.drudeImag,
712
+ name: 'Drude Model',
713
+ mode: 'lines',
714
+ line: {color: '#9CA3AF', width: 2, dash: 'dash'},
715
+ visible: true
716
+ });
717
+ }
718
+
719
+ plotData.push({
720
+ x: data.frequency,
721
+ y: modelConfig.normalize ? data.normalizedImag : data.modelImag,
722
+ name: modelConfig.order === 'drude' ? 'Drude Model' :
723
+ (modelConfig.order === 'first' ? '1st Order DS' : '2nd Order DS'),
724
+ mode: 'lines',
725
+ line: {color: '#EF4444', width: 3},
726
+ visible: true
727
+ });
728
+
729
+ return plotData;
730
+ }
731
+
732
+ // Layout for the main plot
733
+ function getMainPlotLayout() {
734
+ const yaxisTitle = modelConfig.normalize ? 'Normalized Conductivity' : 'Conductivity (a.u.)';
735
+
736
+ return {
737
+ title: `${getModelName()} Conductivity Response`,
738
+ margin: {l: 60, r: 60, t: 60, b: 60},
739
+ xaxis: {
740
+ title: 'Angular Frequency (10<sup>15</sup> rad/s)',
741
+ range: [0, modelConfig.maxFreq],
742
+ showgrid: true,
743
+ gridcolor: '#E5E7EB',
744
+ type: modelConfig.logScale ? 'log' : 'linear'
745
+ },
746
+ yaxis: {
747
+ title: yaxisTitle,
748
+ showgrid: true,
749
+ gridcolor: '#E5E7EB',
750
+ type: modelConfig.logScale ? 'log' : 'linear'
751
+ },
752
+ legend: {
753
+ x: 1.05,
754
+ y: 1,
755
+ xanchor: 'left',
756
+ yanchor: 'top',
757
+ bgcolor: 'rgba(255,255,255,0.8)'
758
+ },
759
+ hovermode: 'closest',
760
+ showlegend: true,
761
+ annotations: [{
762
+ text: `Parameters: ωₚ = ${modelConfig.wp}×10<sup>15</sup> rad/s, τ = ${modelConfig.tau} fs ${modelConfig.order !== 'drude' ? `, c₁ = ${modelConfig.c1.toFixed(2)}` : ''} ${modelConfig.order === 'second' ? `, c₂ = ${modelConfig.c2.toFixed(2)}` : ''}`,
763
+ x: 0.5,
764
+ y: 1.1,
765
+ xref: 'paper',
766
+ yref: 'paper',
767
+ showarrow: false,
768
+ font: {size: 12}
769
+ }]
770
+ };
771
+ }
772
+
773
+ // Layout for component plots
774
+ function getComponentPlotLayout(title) {
775
+ const yaxisTitle = modelConfig.normalize ? 'Normalized Conductivity' : 'Conductivity (a.u.)';
776
+
777
+ return {
778
+ title: title,
779
+ margin: {l: 60, r: 40, t: 40, b: 60},
780
+ xaxis: {
781
+ title: 'Angular Frequency (10<sup>15</sup> rad/s)',
782
+ range: [0, modelConfig.maxFreq],
783
+ showgrid: true,
784
+ gridcolor: '#E5E7EB',
785
+ type: modelConfig.logScale ? 'log' : 'linear'
786
+ },
787
+ yaxis: {
788
+ title: yaxisTitle,
789
+ showgrid: true,
790
+ gridcolor: '#E5E7EB',
791
+ type: modelConfig.logScale ? 'log' : 'linear'
792
+ },
793
+ showlegend: true,
794
+ legend: {
795
+ x: 1,
796
+ y: 1,
797
+ xanchor: 'right',
798
+ yanchor: 'top',
799
+ bgcolor: 'rgba(255,255,255,0.8)'
800
+ }
801
+ };
802
+ }
803
+
804
+ // Get the display name for the current model
805
+ function getModelName() {
806
+ switch(modelConfig.order) {
807
+ case 'drude': return 'Drude';
808
+ case 'first': return '1st Order Drude-Smith';
809
+ case 'second': return '2nd Order Drude-Smith';
810
+ default: return '';
811
+ }
812
+ }
813
+
814
+ // Update all displayed parameters from modelConfig
815
+ function updateModelParameters() {
816
+ elements.plasmaFreqValue.textContent = `${modelConfig.wp} ×10¹⁵ rad/s`;
817
+ elements.scatteringTimeValue.textContent = `${modelConfig.tau} fs`;
818
+ elements.c1ValueDisplay.textContent = modelConfig.c1.toFixed(2);
819
+ elements.c2ValueDisplay.textContent = modelConfig.c2.toFixed(2);
820
+ elements.freqRangeValue.textContent = `${modelConfig.maxFreq} ×10¹⁵ rad/s`;
821
+ }
822
+
823
+ // Complex number class
824
+ function Complex(re, im) {
825
+ this.re = re;
826
+ this.im = im;
827
+ }
828
+
829
+ // Initialize the application
830
+ init();
831
+ });
832
+ </script>
833
+ <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=holyhigh666/drude-smith-test1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
834
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ explain Drude Smith model, visualize its behavior in different orders in interactive plot
2
+ visualize Drude Smith model in different orders in interactive plot, allow user to select orders, adjust tau, c and other parameters