import gradio as gr
import random
custom_css = """
body {
background: linear-gradient(-45deg, #a1c4fd, #c2e9fb, #fbc2eb, #a6c1ee);
background-size: 400% 400%;
animation: gradientShift 20s ease infinite;
font-family: 'Segoe UI', sans-serif;
overflow-x: hidden;
color: #003344;
}
@keyframes gradientShift {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
h1.glow {
font-size: 3.2em;
font-weight: 900;
color: #005f99;
text-align: center;
animation: glowPulse 3s ease-in-out infinite;
margin-bottom: 30px;
}
@keyframes glowPulse {
0%, 100% {
text-shadow:
0 0 5px #00bfff,
0 0 15px #00bfff,
0 0 20px #00bfff,
0 0 40px #00bfff;
}
50% {
text-shadow:
0 0 15px #0077cc,
0 0 25px #0077cc,
0 0 35px #0077cc,
0 0 55px #0077cc;
}
}
#start-screen {
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Neon Start button */
#start-button {
font-size: 2.2em;
font-weight: 900;
color: #00f0ff;
background: linear-gradient(45deg, #00cfff, #00f0ff, #00b0ff, #00f0ff);
background-size: 300% 300%;
border: none;
border-radius: 20px;
padding: 25px 70px;
cursor: pointer;
box-shadow:
0 0 10px #00e0ff,
0 0 20px #00e0ff,
0 0 40px #00e0ff,
inset 0 0 8px #00aaff;
animation: neonPulse 3s ease-in-out infinite;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-transform: uppercase;
letter-spacing: 2px;
user-select: none;
}
#start-button:hover {
transform: scale(1.15) rotate(-2deg);
box-shadow:
0 0 15px #00ffff,
0 0 30px #00ffff,
0 0 60px #00ffff,
inset 0 0 12px #00ccff;
}
@keyframes neonPulse {
0%, 100% {
background-position: 0% 50%;
box-shadow:
0 0 10px #00e0ff,
0 0 20px #00e0ff,
0 0 40px #00e0ff,
inset 0 0 8px #00aaff;
}
50% {
background-position: 100% 50%;
box-shadow:
0 0 20px #00ffff,
0 0 40px #00ffff,
0 0 70px #00ffff,
inset 0 0 12px #00ccff;
}
}
/* Tab Titles */
.gr-tabs .gr-tabs-header {
font-weight: 700;
font-size: 1.3em;
color: #004466;
border-bottom: 3px solid #00bfff;
padding-bottom: 6px;
margin-bottom: 15px;
}
.gr-tabs .gr-tabs-header > div.gr-tabs-header-item:hover {
color: #00bfff !important;
cursor: pointer;
}
/* Tab panel background and border */
.gr-tabs .gr-tabs-panel {
background: rgba(255, 255, 255, 0.85);
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 25px rgba(0, 191, 255, 0.15);
transition: background-color 0.4s ease;
}
/* Headings inside tabs */
h2.tab-title {
color: #007acc;
font-weight: 800;
font-size: 2em;
margin-bottom: 15px;
text-shadow: 0 0 8px #00bfff66;
animation: fadeInDown 1s ease forwards;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Buttons in tab content */
button {
transition: 0.3s ease-in-out;
font-weight: bold;
background: linear-gradient(135deg, #0099ff 0%, #00ccff 100%);
border-radius: 12px;
color: white !important;
box-shadow: 0 6px 15px rgba(0, 204, 255, 0.5);
border: none;
padding: 12px 25px;
font-size: 1.1em;
}
button:hover {
transform: scale(1.05);
background: linear-gradient(135deg, #00ccff 0%, #0099ff 100%);
box-shadow: 0 8px 25px rgba(0, 204, 255, 0.8);
color: white !important;
cursor: pointer;
}
/* Number inputs */
input[type=number] {
transition: box-shadow 0.3s ease, border-color 0.3s ease;
border: 1.5px solid #ccc;
border-radius: 8px;
padding: 7px 12px;
font-size: 1em;
width: 100%;
}
input[type=number]:focus {
outline: none;
border-color: #00bfff;
box-shadow: 0 0 10px #00bfff80;
}
/* Output box styling */
.output-html > div {
animation: glow 2.5s infinite;
transition: transform 0.3s ease;
box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
border-radius: 14px;
background: #f0faff;
padding: 20px;
font-size: 1.15em;
color: #003344;
}
@keyframes glow {
0% { box-shadow: 0 0 10px rgba(0,191,255,0.3); }
50% { box-shadow: 0 0 25px rgba(0,191,255,0.7); }
100% { box-shadow: 0 0 10px rgba(0,191,255,0.3); }
}
/* Usage labels */
.usage-label {
display: inline-block;
animation: pulseGlow 3s ease-in-out infinite;
font-weight: bold;
margin-bottom: 12px;
padding: 7px 15px;
border-radius: 15px;
font-size: 1.3em;
user-select: none;
}
.usage-label.safe {
background-color: #28a745;
color: white;
box-shadow: 0 0 15px #28a745cc;
}
.usage-label.medium {
background-color: #ffc107;
color: black;
box-shadow: 0 0 15px #ffc107cc;
}
.usage-label.dangerous {
background-color: #dc3545;
color: white;
box-shadow: 0 0 15px #dc3545cc;
}
@keyframes pulseGlow {
0%, 100% {
text-shadow: 0 0 5px rgba(0,0,0,0.1);
}
50% {
text-shadow: 0 0 12px rgba(0,0,0,0.3);
}
}
/* Markdown styling for usage and standards tabs */
.gr-markdown p, .gr-markdown ul, .gr-markdown li {
font-size: 1.05em;
line-height: 1.5em;
color: #004466;
margin-bottom: 10px;
}
.gr-markdown ul {
padding-left: 20px;
}
.gr-markdown li {
margin-bottom: 6px;
}
"""
def classify_water(pH, turbidity, hardness, solids, sulfate,
conductivity, fluoride, nitrate,
coliform_count, e_coli,
chloride, calcium, magnesium, sodium,
temperature, iron, manganese, phosphate, zinc, lead):
safe = True
if not (6.5 <= pH <= 8.5): safe = False
if turbidity > 5: safe = False
if hardness > 200: safe = False
if solids > 500: safe = False
if sulfate > 250: safe = False
if conductivity > 500: safe = False
if fluoride > 1.5 or fluoride < 0.6: safe = False
if nitrate > 45: safe = False
if coliform_count > 0 or e_coli > 0: safe = False
if temperature < 0 or temperature > 40: safe = False
if iron > 0.3: safe = False
if manganese > 0.05: safe = False
if phosphate > 0.1: safe = False
if zinc > 5: safe = False
if lead > 0.01: safe = False
medium = True
if coliform_count > 500 or e_coli > 100: medium = False
if solids > 2000: medium = False
if turbidity > 50: medium = False
if safe:
classification_html = f"""
<div class="usage-label safe">SAFE ✅</div>
<p><b>Meaning:</b> Water is safe for drinking, cooking, bathing, and all household uses.</p>
<ul>
<li>✔ Drinking</li>
<li>✔ Cooking</li>
<li>✔ Bathing</li>
<li>✔ Washing clothes/utensils</li>
<li>✔ Irrigation</li>
</ul>
"""
elif medium:
classification_html = f"""
<div class="usage-label medium">MEDIUM ⚠</div>
<p><b>Meaning:</b> Water is <u>not recommended for drinking</u> but may be used for other household uses with caution.</p>
<ul>
<li>❌ Not for drinking</li>
<li>✔ Bathing (if no open wounds)</li>
<li>✔ Washing clothes/utensils (TDS < 1000 mg/L, Turbidity < 10 NTU)</li>
<li>✔ Irrigation (TDS < 2000 mg/L, EC < 2000 µS/cm, Nitrate < 50 mg/L)</li>
</ul>
"""
else:
classification_html = f"""
<div class="usage-label dangerous">DANGEROUS ❌</div>
<p><b>Meaning:</b> Water is unsafe for any use without proper treatment.</p>
<ul>
<li>❌ Do NOT drink or cook</li>
<li>❌ Avoid contact with skin and eyes</li>
<li>❌ Do NOT use for washing food items</li>
<li>❌ Do NOT use for irrigation if pathogens present</li>
</ul>
"""
return classification_htmldef fetch_live_data():
return (round(random.uniform(6.5, 8.5), 2), # pH
round(random.uniform(0, 5), 2), # turbidity
random.randint(50, 200), # hardness
random.randint(200, 500), # solids
random.randint(50, 250), # sulfate
random.randint(100, 500), # conductivity
round(random.uniform(0.5, 1.5), 2), # fluoride
random.randint(10, 45), # nitrate
random.randint(0, 10), # coliform_count
random.randint(0, 5), # e_coli
random.randint(100, 250), # chloride
random.randint(20, 75), # calcium
random.randint(10, 30), # magnesium
random.randint(50, 200), # sodium
random.randint(5, 40), # temperature
round(random.uniform(0, 0.5), 2), # iron
round(random.uniform(0, 0.1), 2), # manganese
round(random.uniform(0, 0.2), 2), # phosphate
random.randint(0, 10), # zinc
round(random.uniform(0, 0.05), 3)) # lead
usage_text = """
🚰 Water Usage Guide
SAFE
✔ Drinking
MEDIUM
❌ Not for drinking
DANGEROUS
❌ Do NOT drink or cook
standards_text = """
💧 Water Quality Standards (WHO + BIS IS 10500:2012)
Drinking Water Standards:
pH: 6.5 – 8.5
Turbidity: ≤ 1 NTU (desirable), max 5 NTU
TDS (Total Dissolved Solids): ≤ 500 mg/L (max 2000 mg/L)
Hardness: ≤ 200 mg/L (max 600 mg/L)
Sulphate: ≤ 200 mg/L (max 400 mg/L)
Conductivity: ≤ 500 µS/cm (max 2000 µS/cm)
Fluoride: 0.6 – 1.5 mg/L
Nitrate: ≤ 45 mg/L
Total Coliform: 0 CFU/100mL
E. coli: 0 CFU/100mL
Additional Usage Guidelines
Iron: ≤ 0.3 mg/L
Manganese: ≤ 0.1 mg/L
Phosphate: ≤ 0.1 mg/L
Zinc: ≤ 5 mg/L
Lead: ≤ 0.01 mg/L
with gr.Blocks(css=custom_css) as demo:
# Start screen
with gr.Column(elem_id="start-screen"):
gr.Markdown("
Water Quality Classifier ")
start_btn = gr.Button("Start", elem_id="start-button")
# Main app container (initially hidden)
main_app = gr.Tabs(visible=False)
with main_app:
with gr.Tab("Classification"):
gr.Markdown("<h2 class='tab-title'>Classify Water Quality</h2>")
with gr.Row():
pH = gr.Number(label="pH", value=7.0, precision=2)
turbidity = gr.Number(label="Turbidity (NTU)", value=1.0, precision=2)
hardness = gr.Number(label="Hardness (mg/L)", value=150)
solids = gr.Number(label="Solids (mg/L)", value=300)
with gr.Row():
sulfate = gr.Number(label="Sulfate (mg/L)", value=150)
conductivity = gr.Number(label="Conductivity (µS/cm)", value=300)
fluoride = gr.Number(label="Fluoride (mg/L)", value=1.0)
nitrate = gr.Number(label="Nitrate (mg/L)", value=20)
with gr.Row():
coliform_count = gr.Number(label="Total Coliform (CFU/100mL)", value=0)
e_coli = gr.Number(label="E. coli (CFU/100mL)", value=0)
chloride = gr.Number(label="Chloride (mg/L)", value=150)
calcium = gr.Number(label="Calcium (mg/L)", value=50)
with gr.Row():
magnesium = gr.Number(label="Magnesium (mg/L)", value=20)
sodium = gr.Number(label="Sodium (mg/L)", value=100)
temperature = gr.Number(label="Temperature (°C)", value=25)
with gr.Row():
iron = gr.Number(label="Iron (mg/L)", value=0.1)
manganese = gr.Number(label="Manganese (mg/L)", value=0.02)
phosphate = gr.Number(label="Phosphate (mg/L)", value=0.05)
zinc = gr.Number(label="Zinc (mg/L)", value=1)
lead = gr.Number(label="Lead (mg/L)", value=0.005)
classify_btn = gr.Button("Classify Water")
fetch_live_btn = gr.Button("Fetch Live Data")
output_html = gr.HTML()
classify_btn.click(fn=classify_water,
inputs=[pH, turbidity, hardness, solids, sulfate,
conductivity, fluoride, nitrate,
coliform_count, e_coli,
chloride, calcium, magnesium, sodium,
temperature, iron, manganese, phosphate, zinc, lead],
outputs=output_html)
fetch_live_btn.click(fn=fetch_live_data,
inputs=None,
outputs=[pH, turbidity, hardness, solids, sulfate,
conductivity, fluoride, nitrate,
coliform_count, e_coli,
chloride, calcium, magnesium, sodium,
temperature, iron, manganese, phosphate, zinc, lead])
with gr.Tab("Water Usage Guide"):
gr.Markdown("<h2 class='tab-title'>Water Usage Guide</h2>")
gr.Markdown(usage_text)
with gr.Tab("Water Quality Standards"):
gr.Markdown("<h2 class='tab-title'>Water Quality Standards</h2>")
gr.Markdown(standards_text)
# Show main app when start clicked
def start_app():
return gr.update(visible=False), gr.update(visible=True)
start_btn.click(fn=start_app, inputs=None, outputs=[start_btn, main_app])demo.launch()
