Hugging Face's logo

Spaces:
Group4project
/
EcoQueryQuest
Sleeping

App Files Community
vighnesh-shetty-vs commited on
Commit
d5e582b
·
1 Parent(s): 36f4c80

Add updated files

Browse files
Files changed (1) hide show
  1. app.py +28 -24
app.py CHANGED
@@ -48,8 +48,8 @@ def get_stats_html(water, energy, points):
48
  def get_drip_visuals(water_level):
49
  """Generates an animated SVG character whose expression changes with water level."""
50
 
51
- # SVG Path for a classic water droplet
52
- drop_path = "M 50,15 C 50,15 20,50 20,70 A 30,30 0 1,0 80,70 C 80,50 50,15 50,15 Z"
53
 
54
  if water_level > 70:
55
  # Happy, Plump, Bouncing
@@ -57,12 +57,13 @@ def get_drip_visuals(water_level):
57
  anim = "bounce 2s infinite ease-in-out"
58
  glow = "rgba(56,189,248,0.6)"
59
  status = "Plump & Hydrated"
 
60
  face = """
61
- <circle cx="35" cy="60" r="4" fill="white"/>
62
- <circle cx="65" cy="60" r="4" fill="white"/>
63
- <path d="M 40,70 Q 50,80 60,70" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
64
- <ellipse cx="25" cy="65" rx="5" ry="3" fill="rgba(255,255,255,0.3)"/>
65
- <ellipse cx="75" cy="65" rx="5" ry="3" fill="rgba(255,255,255,0.3)"/>
66
  """
67
  elif 30 <= water_level <= 70:
68
  # Tired, Flat, Sweating
@@ -70,11 +71,12 @@ def get_drip_visuals(water_level):
70
  anim = "float 4s infinite ease-in-out"
71
  glow = "rgba(56,189,248,0.3)"
72
  status = "Shrinking & Tired"
 
73
  face = """
74
- <path d="M 30,60 Q 35,55 40,60" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
75
- <path d="M 60,60 Q 65,55 70,60" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
76
- <line x1="45" y1="72" x2="55" y2="72" stroke="white" stroke-width="3" stroke-linecap="round"/>
77
- <path d="M 75,45 C 75,45 70,55 70,60 A 5,5 0 1,0 80,60 C 80,55 75,45 75,45 Z" fill="rgba(255,255,255,0.6)"/>
78
  """
79
  elif water_level > 0:
80
  # Overheating, Red, Cracked
@@ -82,28 +84,30 @@ def get_drip_visuals(water_level):
82
  anim = "shake 0.5s infinite"
83
  glow = "rgba(239,68,68,0.5)"
84
  status = "Overheating & Raspy"
 
85
  face = """
86
- <line x1="30" y1="55" x2="40" y2="65" stroke="white" stroke-width="3" stroke-linecap="round"/>
87
- <line x1="40" y1="55" x2="30" y2="65" stroke="white" stroke-width="3" stroke-linecap="round"/>
88
- <line x1="60" y1="55" x2="70" y2="65" stroke="white" stroke-width="3" stroke-linecap="round"/>
89
- <line x1="70" y1="55" x2="60" y2="65" stroke="white" stroke-width="3" stroke-linecap="round"/>
90
- <path d="M 40,75 Q 45,70 50,75 T 60,75" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
91
  """
92
  else:
93
  # Ghost / Evaporated
94
- color = "rgba(148, 163, 184, 0.5)"
95
  anim = "floatUp 3s forwards"
96
  glow = "transparent"
97
  status = "Evaporated!"
98
- drop_path = "M 30,80 Q 30,50 50,30 Q 70,50 70,80 Q 60,70 50,80 Q 40,70 30,80 Z" # Cloud/Ghost shape
99
  face = """
100
- <circle cx="40" cy="50" r="3" fill="white"/>
101
- <circle cx="60" cy="50" r="3" fill="white"/>
102
- <circle cx="50" cy="65" r="5" fill="transparent" stroke="white" stroke-width="2"/>
103
  """
104
 
 
105
  svg = f"""
106
- <svg viewBox="0 0 100 100" style="width: 140px; height: 140px; filter: drop-shadow(0px 0px 15px {glow}); animation: {anim};">
107
  <defs>
108
  <linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
109
  <stop offset="0%" style="stop-color:#7dd3fc;stop-opacity:1" />
@@ -114,7 +118,7 @@ def get_drip_visuals(water_level):
114
  <stop offset="100%" style="stop-color:#b91c1c;stop-opacity:1" />
115
  </linearGradient>
116
  </defs>
117
- <path d="{drop_path}" fill="{color}"/>
118
  {face}
119
  </svg>
120
  """
@@ -122,7 +126,7 @@ def get_drip_visuals(water_level):
122
  return f"""
123
  <div class="drip-character-container">
124
  {svg}
125
- <h3 style="margin: 15px 0 0 0; color: #e2e8f0; font-weight: 600; font-size: 1.1rem; text-align: center;">{status}</h3>
126
  </div>
127
  """
128
 
 
48
  def get_drip_visuals(water_level):
49
  """Generates an animated SVG character whose expression changes with water level."""
50
 
51
+ # The new base path provided by you
52
+ base_drop_path = 'd="M60 8 C60 8,102 66,102 90 C102 118,83 137,60 137 C37 137,18 118,18 90 C18 66,60 8,60 8Z"'
53
 
54
  if water_level > 70:
55
  # Happy, Plump, Bouncing
 
57
  anim = "bounce 2s infinite ease-in-out"
58
  glow = "rgba(56,189,248,0.6)"
59
  status = "Plump & Hydrated"
60
+ drop_path = f'<path id="dbody" {base_drop_path} fill="{color}" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" opacity="1"></path>'
61
  face = """
62
+ <circle cx="45" cy="85" r="5" fill="white"/>
63
+ <circle cx="75" cy="85" r="5" fill="white"/>
64
+ <path d="M 50,100 Q 60,115 70,100" stroke="white" stroke-width="3.5" fill="transparent" stroke-linecap="round"/>
65
+ <ellipse cx="35" cy="95" rx="6" ry="4" fill="rgba(255,255,255,0.3)"/>
66
+ <ellipse cx="85" cy="95" rx="6" ry="4" fill="rgba(255,255,255,0.3)"/>
67
  """
68
  elif 30 <= water_level <= 70:
69
  # Tired, Flat, Sweating
 
71
  anim = "float 4s infinite ease-in-out"
72
  glow = "rgba(56,189,248,0.3)"
73
  status = "Shrinking & Tired"
74
+ drop_path = f'<path id="dbody" {base_drop_path} fill="{color}" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" opacity="1"></path>'
75
  face = """
76
+ <path d="M 40,85 Q 45,80 50,85" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
77
+ <path d="M 70,85 Q 75,80 80,85" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
78
+ <line x1="55" y1="102" x2="65" y2="102" stroke="white" stroke-width="3" stroke-linecap="round"/>
79
+ <path d="M 85,60 C 85,60 78,75 78,80 A 7,7 0 1,0 92,80 C 92,75 85,60 85,60 Z" fill="rgba(255,255,255,0.6)"/>
80
  """
81
  elif water_level > 0:
82
  # Overheating, Red, Cracked
 
84
  anim = "shake 0.5s infinite"
85
  glow = "rgba(239,68,68,0.5)"
86
  status = "Overheating & Raspy"
87
+ drop_path = f'<path id="dbody" {base_drop_path} fill="{color}" stroke="rgba(239,68,68,0.8)" stroke-width="1.5" opacity="1"></path>'
88
  face = """
89
+ <line x1="40" y1="80" x2="50" y2="90" stroke="white" stroke-width="3" stroke-linecap="round"/>
90
+ <line x1="50" y1="80" x2="40" y2="90" stroke="white" stroke-width="3" stroke-linecap="round"/>
91
+ <line x1="70" y1="80" x2="80" y2="90" stroke="white" stroke-width="3" stroke-linecap="round"/>
92
+ <line x1="80" y1="80" x2="70" y2="90" stroke="white" stroke-width="3" stroke-linecap="round"/>
93
+ <path d="M 50,105 Q 55,98 60,105 T 70,105" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
94
  """
95
  else:
96
  # Ghost / Evaporated
97
+ color = "rgba(148, 163, 184, 0.4)"
98
  anim = "floatUp 3s forwards"
99
  glow = "transparent"
100
  status = "Evaporated!"
101
+ drop_path = f'<path id="dbody" {base_drop_path} fill="{color}" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" opacity="1"></path>'
102
  face = """
103
+ <circle cx="50" cy="80" r="3" fill="white"/>
104
+ <circle cx="70" cy="80" r="3" fill="white"/>
105
+ <circle cx="60" cy="95" r="5" fill="transparent" stroke="white" stroke-width="2"/>
106
  """
107
 
108
+ # ViewBox expanded to 120x150 to accommodate the new path boundaries
109
  svg = f"""
110
+ <svg viewBox="0 0 120 150" style="width: 150px; height: 180px; filter: drop-shadow(0px 0px 15px {glow}); animation: {anim};">
111
  <defs>
112
  <linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
113
  <stop offset="0%" style="stop-color:#7dd3fc;stop-opacity:1" />
 
118
  <stop offset="100%" style="stop-color:#b91c1c;stop-opacity:1" />
119
  </linearGradient>
120
  </defs>
121
+ {drop_path}
122
  {face}
123
  </svg>
124
  """
 
126
  return f"""
127
  <div class="drip-character-container">
128
  {svg}
129
+ <h3 style="margin: 10px 0 0 0; color: #e2e8f0; font-weight: 600; font-size: 1.1rem; text-align: center;">{status}</h3>
130
  </div>
131
  """
132