Hugging Face's logo

Spaces:
leucode1
/
acid-base-buddy
Running

App Files Community
leucode1 commited on
Commit
e6e770e
·
verified ·
1 Parent(s): e805d25

we need this as chart summary

Browse files

Acid-Base Summary
pH 7.35–7.45 Acid-Base [C] = compensator R = respiratory B = base/alkalosis DDC = depending on cause
CO2 35–45
HCO3 22–26
pH < 7.35 ⬇️

CO2 > 45 ⬆️
HCO3 = 22–26 (equal)

Respiratory Acidosis
→ Retain CO2 → ↓ pH

Possible Causes

COPD

DKA

Pneumonia

Anesthesia

Hypoventilation (↓ RR)

muscle weakness

Hyperkalemia (can lead to ↓ D)

Tachycardia

↑ BP

Dysrhythmias

Confusion

Drowsy

24-hour Output (I/O)

↓ Output

↓ LOC

Clear the breath

If HCO3 < 22 = compensate

Treatment / Option (DOC)

Airway

Reverse anesthesia (IVP, bronchodilator)

O2

pH > 7.45 ⬆️

CO2 < 35 ⬇️
HCO3 = 22–26 (equal)

Respiratory Alkalosis
→ Expelling CO2 → ↑ pH

Possible Cause

Anxiety

Pain

Fever

Pulmonary emboli

Mechanical ventilation

Hyperventilation (↑ RR → blowing off CO2)

Hypokalemia (can flip to hypoventilation & VV)

Hypocalcemia (tingling, numbness, Chvostek’s)

Dysrhythmias

Confusion

Headache

Tachycardia

HCO3 = normal
If ↓ → compensation
→ if severe, compensate and flip to acidosis

Treatment / DOC

Slow down RR (breathing)

Paper bag

Rebreather mask

pH < 7.35 ⬇️

CO2 = 35–45 (equal)
HCO3 < 22 ⬇️

Metabolic Acidosis
→ ↓ pH
→ ↓ HCO3

Causes

AKI

CKD

Renal failure

DKA

Diarrhea

Sepsis

Shock

Hyperkalemia

↓ BP

Dysrhythmias

Kussmaul respirations (Rapid RR)

Confusion

Drowsy

Nausea / vomiting

Compensation:

RR ↑ (resp. compensation)

CO2 ↓

K ↑

Treatment / DOC

Hydration (NS or D5W for DKA)

Bicarb

Fall precautions

Antidiarrheals

Dialysis

Treat sepsis source

pH > 7.45 ⬆️

CO2 = 35–45 (equal)
HCO3 > 26 ⬆️

Metabolic Alkalosis
→ ↑ pH
→ ↑ HCO3

Causes

NG suction

Vomiting

Diuretics

Antacids

Steroids

Hypokalemia

Weakness

N/V

Tetany

Confusion

Dysrhythmias

↓ RR

Compensation:

RR ↓ (resp. compensation)

CO2 ↑

K ↓

Treatment / DOC

Anti-emetic

Stop diuretics

Replace electrolytes

Monitor K & Ca

Watch RR in this condition

ABG Reminder:

pH abnormal: <7.35 OR >7.45 → uncompensated

pH 7.35–7.45 (compensated)

pH closer to 7.35 = compensated acidosis

pH closer to 7.45 = compensated alkalosis

If CO2 value matches pH (acid or alk), then it’s respiratory.
If HCO3 matches pH (acid or alk), then it’s metabolic.

Example:

pH: 7.28 ⬇️ (acidic)

CO2: 45 ⬆️ (acidic)

HCO3: 24 (normal)

→ Uncompensated Respiratory Acidosis

pH: 7.48 ⬆️

HCO3: 32 ⬆️ (matches pH result value)

CO2: 40 (normal)

→ Uncompensated Metabolic Alkalosis

🟨 Color Key:

Yellow = diagnostic category (Respiratory / Metabolic + Acidosis / Alkalosis)

Green = key values (pH, CO2, HCO3)

Purple = key terms (DOC, causes)

Blue = important mechanism (hypoventilation, hyperventilation, compensation)

Pink = example case

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +279 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Acid Base Buddy
3
- emoji: 🌍
4
- colorFrom: gray
5
- colorTo: red
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: Acid-Base Buddy 🧪
3
+ colorFrom: blue
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,280 @@
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>Acid-Base Buddy</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ diagnostic: {
16
+ yellow: '#fef08a',
17
+ green: '#86efac',
18
+ purple: '#d8b4fe',
19
+ blue: '#93c5fd',
20
+ pink: '#f9a8d4'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ .card-shadow {
29
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
30
+ }
31
+ .arrow-up {
32
+ width: 0;
33
+ height: 0;
34
+ border-left: 5px solid transparent;
35
+ border-right: 5px solid transparent;
36
+ border-bottom: 5px solid #10b981;
37
+ }
38
+ .arrow-down {
39
+ width: 0;
40
+ height: 0;
41
+ border-left: 5px solid transparent;
42
+ border-right: 5px solid transparent;
43
+ border-top: 5px solid #ef4444;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50 min-h-screen">
48
+ <div class="container mx-auto px-4 py-8">
49
+ <header class="mb-10 text-center">
50
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Acid-Base Buddy 🧪</h1>
51
+ <p class="text-lg text-gray-600">Your quick reference guide for acid-base disorders</p>
52
+ </header>
53
+
54
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
55
+ <!-- Respiratory Acidosis Card -->
56
+ <div class="bg-white rounded-lg overflow-hidden card-shadow">
57
+ <div class="bg-diagnostic-yellow p-4">
58
+ <h2 class="text-xl font-bold text-gray-800">Respiratory Acidosis</h2>
59
+ </div>
60
+ <div class="p-4">
61
+ <div class="mb-4">
62
+ <p class="font-semibold text-gray-700">pH < 7.35 <span class="arrow-down inline-block"></span></p>
63
+ <p class="font-semibold text-gray-700">CO2 > 45 <span class="arrow-up inline-block"></span></p>
64
+ <p class="font-semibold text-gray-700">HCO3 = 22-26</p>
65
+ </div>
66
+ <div class="bg-diagnostic-blue p-3 rounded mb-3">
67
+ <p class="text-sm">→ Retain CO2 → ↓ pH</p>
68
+ </div>
69
+ <div class="mb-3">
70
+ <h3 class="font-semibold text-diagnostic-purple mb-1">Possible Causes:</h3>
71
+ <ul class="list-disc list-inside text-sm text-gray-700">
72
+ <li>COPD</li>
73
+ <li>DKA</li>
74
+ <li>Pneumonia</li>
75
+ <li>Anesthesia</li>
76
+ <li>Hypoventilation (↓ RR)</li>
77
+ </ul>
78
+ </div>
79
+ <div>
80
+ <h3 class="font-semibold text-diagnostic-purple mb-1">Treatment (DOC):</h3>
81
+ <ul class="list-disc list-inside text-sm text-gray-700">
82
+ <li>Airway</li>
83
+ <li>Reverse anesthesia</li>
84
+ <li>O2</li>
85
+ </ul>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Respiratory Alkalosis Card -->
91
+ <div class="bg-white rounded-lg overflow-hidden card-shadow">
92
+ <div class="bg-diagnostic-yellow p-4">
93
+ <h2 class="text-xl font-bold text-gray-800">Respiratory Alkalosis</h2>
94
+ </div>
95
+ <div class="p-4">
96
+ <div class="mb-4">
97
+ <p class="font-semibold text-gray-700">pH > 7.45 <span class="arrow-up inline-block"></span></p>
98
+ <p class="font-semibold text-gray-700">CO2 < 35 <span class="arrow-down inline-block"></span></p>
99
+ <p class="font-semibold text-gray-700">HCO3 = 22-26</p>
100
+ </div>
101
+ <div class="bg-diagnostic-blue p-3 rounded mb-3">
102
+ <p class="text-sm">→ Expelling CO2 → ↑ pH</p>
103
+ </div>
104
+ <div class="mb-3">
105
+ <h3 class="font-semibold text-diagnostic-purple mb-1">Possible Causes:</h3>
106
+ <ul class="list-disc list-inside text-sm text-gray-700">
107
+ <li>Anxiety</li>
108
+ <li>Pain</li>
109
+ <li>Fever</li>
110
+ <li>Pulmonary emboli</li>
111
+ <li>Hyperventilation</li>
112
+ </ul>
113
+ </div>
114
+ <div>
115
+ <h3 class="font-semibold text-diagnostic-purple mb-1">Treatment (DOC):</h3>
116
+ <ul class="list-disc list-inside text-sm text-gray-700">
117
+ <li>Slow down RR</li>
118
+ <li>Paper bag</li>
119
+ <li>Rebreather mask</li>
120
+ </ul>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Metabolic Acidosis Card -->
126
+ <div class="bg-white rounded-lg overflow-hidden card-shadow">
127
+ <div class="bg-diagnostic-yellow p-4">
128
+ <h2 class="text-xl font-bold text-gray-800">Metabolic Acidosis</h2>
129
+ </div>
130
+ <div class="p-4">
131
+ <div class="mb-4">
132
+ <p class="font-semibold text-gray-700">pH < 7.35 <span class="arrow-down inline-block"></span></p>
133
+ <p class="font-semibold text-gray-700">CO2 = 35-45</p>
134
+ <p class="font-semibold text-gray-700">HCO3 < 22 <span class="arrow-down inline-block"></span></p>
135
+ </div>
136
+ <div class="bg-diagnostic-blue p-3 rounded mb-3">
137
+ <p class="text-sm">→ ↓ pH → ↓ HCO3</p>
138
+ </div>
139
+ <div class="mb-3">
140
+ <h3 class="font-semibold text-diagnostic-purple mb-1">Possible Causes:</h3>
141
+ <ul class="list-disc list-inside text-sm text-gray-700">
142
+ <li>AKI/CKD</li>
143
+ <li>DKA</li>
144
+ <li>Diarrhea</li>
145
+ <li>Sepsis</li>
146
+ <li>Shock</li>
147
+ </ul>
148
+ </div>
149
+ <div>
150
+ <h3 class="font-semibold text-diagnostic-purple mb-1">Treatment (DOC):</h3>
151
+ <ul class="list-disc list-inside text-sm text-gray-700">
152
+ <li>Hydration</li>
153
+ <li>Bicarb</li>
154
+ <li>Dialysis</li>
155
+ </ul>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Metabolic Alkalosis Card -->
161
+ <div class="bg-white rounded-lg overflow-hidden card-shadow">
162
+ <div class="bg-diagnostic-yellow p-4">
163
+ <h2 class="text-xl font-bold text-gray-800">Metabolic Alkalosis</h2>
164
+ </div>
165
+ <div class="p-4">
166
+ <div class="mb-4">
167
+ <p class="font-semibold text-gray-700">pH > 7.45 <span class="arrow-up inline-block"></span></p>
168
+ <p class="font-semibold text-gray-700">CO2 = 35-45</p>
169
+ <p class="font-semibold text-gray-700">HCO3 > 26 <span class="arrow-up inline-block"></span></p>
170
+ </div>
171
+ <div class="bg-diagnostic-blue p-3 rounded mb-3">
172
+ <p class="text-sm">→ ↑ pH → ↑ HCO3</p>
173
+ </div>
174
+ <div class="mb-3">
175
+ <h3 class="font-semibold text-diagnostic-purple mb-1">Possible Causes:</h3>
176
+ <ul class="list-disc list-inside text-sm text-gray-700">
177
+ <li>NG suction</li>
178
+ <li>Vomiting</li>
179
+ <li>Diuretics</li>
180
+ <li>Antacids</li>
181
+ <li>Steroids</li>
182
+ </ul>
183
+ </div>
184
+ <div>
185
+ <h3 class="font-semibold text-diagnostic-purple mb-1">Treatment (DOC):</h3>
186
+ <ul class="list-disc list-inside text-sm text-gray-700">
187
+ <li>Anti-emetic</li>
188
+ <li>Stop diuretics</li>
189
+ <li>Replace electrolytes</li>
190
+ </ul>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- ABG Interpretation Guide -->
197
+ <div class="bg-white rounded-lg overflow-hidden card-shadow mb-10">
198
+ <div class="bg-diagnostic-yellow p-4">
199
+ <h2 class="text-xl font-bold text-gray-800">ABG Interpretation Guide</h2>
200
+ </div>
201
+ <div class="p-4">
202
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
203
+ <div>
204
+ <h3 class="font-semibold text-diagnostic-green mb-2">Compensation Rules:</h3>
205
+ <ul class="list-disc list-inside text-gray-700 space-y-1">
206
+ <li>pH abnormal: <7.35 OR >7.45 → uncompensated</li>
207
+ <li>pH 7.35-7.45 (compensated)</li>
208
+ <li>pH closer to 7.35 = compensated acidosis</li>
209
+ <li>pH closer to 7.45 = compensated alkalosis</li>
210
+ </ul>
211
+ </div>
212
+ <div>
213
+ <h3 class="font-semibold text-diagnostic-green mb-2">Diagnosis Rules:</h3>
214
+ <ul class="list-disc list-inside text-gray-700 space-y-1">
215
+ <li>If CO2 value matches pH (acid or alk), then it's respiratory</li>
216
+ <li>If HCO3 matches pH (acid or alk), then it's metabolic</li>
217
+ </ul>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Examples Section -->
224
+ <div class="bg-white rounded-lg overflow-hidden card-shadow">
225
+ <div class="bg-diagnostic-yellow p-4">
226
+ <h2 class="text-xl font-bold text-gray-800">Examples</h2>
227
+ </div>
228
+ <div class="p-4">
229
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
230
+ <div class="bg-diagnostic-pink p-4 rounded-lg">
231
+ <h3 class="font-semibold mb-2">Example 1:</h3>
232
+ <p>pH: 7.28 <span class="arrow-down inline-block"></span> (acidic)</p>
233
+ <p>CO2: 45 <span class="arrow-up inline-block"></span> (acidic)</p>
234
+ <p>HCO3: 24 (normal)</p>
235
+ <p class="mt-2 font-semibold">→ Uncompensated Respiratory Acidosis</p>
236
+ </div>
237
+ <div class="bg-diagnostic-pink p-4 rounded-lg">
238
+ <h3 class="font-semibold mb-2">Example 2:</h3>
239
+ <p>pH: 7.48 <span class="arrow-up inline-block"></span></p>
240
+ <p>HCO3: 32 <span class="arrow-up inline-block"></span> (matches pH)</p>
241
+ <p>CO2: 40 (normal)</p>
242
+ <p class="mt-2 font-semibold">→ Uncompensated Metabolic Alkalosis</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Color Key -->
249
+ <div class="mt-10 bg-white p-4 rounded-lg card-shadow">
250
+ <h3 class="font-bold text-gray-800 mb-3">Color Key:</h3>
251
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
252
+ <div class="flex items-center">
253
+ <div class="w-4 h-4 bg-diagnostic-yellow mr-2"></div>
254
+ <span class="text-sm">Diagnostic Category</span>
255
+ </div>
256
+ <div class="flex items-center">
257
+ <div class="w-4 h-4 bg-diagnostic-green mr-2"></div>
258
+ <span class="text-sm">Key Values</span>
259
+ </div>
260
+ <div class="flex items-center">
261
+ <div class="w-4 h-4 bg-diagnostic-purple mr-2"></div>
262
+ <span class="text-sm">Key Terms</span>
263
+ </div>
264
+ <div class="flex items-center">
265
+ <div class="w-4 h-4 bg-diagnostic-blue mr-2"></div>
266
+ <span class="text-sm">Mechanisms</span>
267
+ </div>
268
+ <div class="flex items-center">
269
+ <div class="w-4 h-4 bg-diagnostic-pink mr-2"></div>
270
+ <span class="text-sm">Examples</span>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <script>
277
+ feather.replace();
278
+ </script>
279
+ </body>
280
  </html>