Spaces:
Sleeping
Sleeping
Update loading_animations.py
Browse files- loading_animations.py +18 -112
loading_animations.py
CHANGED
|
@@ -1,146 +1,52 @@
|
|
| 1 |
"""
|
| 2 |
Loading animations for Gradio chatbot interface.
|
| 3 |
-
Contains functions to generate animated thinking indicators.
|
| 4 |
"""
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
def create_thinking_indicator(message="Thinking"):
|
| 9 |
"""
|
| 10 |
-
Creates an HTML thinking indicator with animated dots.
|
| 11 |
-
|
| 12 |
-
Args:
|
| 13 |
-
message (str): The text to show before the dots (default: "Thinking")
|
| 14 |
|
| 15 |
Returns:
|
| 16 |
-
str: HTML string with animated
|
| 17 |
"""
|
| 18 |
-
return
|
| 19 |
-
|
| 20 |
<span class="dot"></span>
|
| 21 |
<span class="dot"></span>
|
| 22 |
<span class="dot"></span>
|
| 23 |
</div>
|
| 24 |
</div>'''
|
| 25 |
|
| 26 |
-
def
|
| 27 |
-
"""
|
| 28 |
-
Returns a random thinking message for variety.
|
| 29 |
-
|
| 30 |
-
Returns:
|
| 31 |
-
str: Random thinking message
|
| 32 |
-
"""
|
| 33 |
-
messages = [
|
| 34 |
-
"Thinking",
|
| 35 |
-
"Processing",
|
| 36 |
-
"Analyzing",
|
| 37 |
-
"Working on it",
|
| 38 |
-
"Let me think",
|
| 39 |
-
"Calculating",
|
| 40 |
-
"Considering",
|
| 41 |
-
"Evaluating"
|
| 42 |
-
]
|
| 43 |
-
return random.choice(messages)
|
| 44 |
-
|
| 45 |
-
def create_random_thinking_indicator():
|
| 46 |
"""
|
| 47 |
-
Creates a thinking indicator with
|
| 48 |
-
|
| 49 |
-
Returns:
|
| 50 |
-
str: HTML string with animated thinking indicator
|
| 51 |
-
"""
|
| 52 |
-
return create_thinking_indicator(get_random_thinking_message())
|
| 53 |
-
|
| 54 |
-
def get_thinking_indicator_by_query(query):
|
| 55 |
-
"""
|
| 56 |
-
Creates a context-appropriate thinking indicator based on the user query.
|
| 57 |
|
| 58 |
Args:
|
| 59 |
-
query (str): The user's query text
|
| 60 |
-
|
| 61 |
-
Returns:
|
| 62 |
-
str: HTML string with context-appropriate thinking indicator
|
| 63 |
-
"""
|
| 64 |
-
query_lower = query.lower()
|
| 65 |
-
|
| 66 |
-
if any(word in query_lower for word in ["math", "calculate", "equation", "formula"]):
|
| 67 |
-
return create_thinking_indicator("Calculating")
|
| 68 |
-
elif any(word in query_lower for word in ["graph", "chart", "plot", "visualization"]):
|
| 69 |
-
return create_thinking_indicator("Creating visualization")
|
| 70 |
-
elif any(word in query_lower for word in ["explain", "define", "what is"]):
|
| 71 |
-
return create_thinking_indicator("Analyzing")
|
| 72 |
-
elif any(word in query_lower for word in ["solve", "problem", "solution"]):
|
| 73 |
-
return create_thinking_indicator("Solving")
|
| 74 |
-
elif any(word in query_lower for word in ["code", "program", "algorithm"]):
|
| 75 |
-
return create_thinking_indicator("Processing")
|
| 76 |
-
else:
|
| 77 |
-
return create_random_thinking_indicator()
|
| 78 |
-
|
| 79 |
-
def create_custom_thinking_indicator(message, dot_count=3):
|
| 80 |
-
"""
|
| 81 |
-
Creates a custom thinking indicator with specified message and dot count.
|
| 82 |
-
|
| 83 |
-
Args:
|
| 84 |
-
message (str): Custom message to display
|
| 85 |
dot_count (int): Number of animated dots (default: 3)
|
| 86 |
|
| 87 |
Returns:
|
| 88 |
-
str: HTML string with custom
|
| 89 |
"""
|
| 90 |
dots = ''.join(['<span class="dot"></span>' for _ in range(dot_count)])
|
| 91 |
|
| 92 |
return f'''<div class="thinking-indicator">
|
| 93 |
-
|
| 94 |
{dots}
|
| 95 |
</div>
|
| 96 |
</div>'''
|
| 97 |
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
Returns a list of processing stage messages for longer operations.
|
| 101 |
-
|
| 102 |
-
Returns:
|
| 103 |
-
list: List of progressive thinking messages
|
| 104 |
-
"""
|
| 105 |
-
return [
|
| 106 |
-
"Reading your question",
|
| 107 |
-
"Analyzing the request",
|
| 108 |
-
"Gathering information",
|
| 109 |
-
"Processing response",
|
| 110 |
-
"Finalizing answer"
|
| 111 |
-
]
|
| 112 |
-
|
| 113 |
-
def get_stage_thinking_indicator(stage_index):
|
| 114 |
"""
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
Args:
|
| 118 |
-
stage_index (int): Current stage (0-based index)
|
| 119 |
|
| 120 |
Returns:
|
| 121 |
-
str: HTML string
|
| 122 |
"""
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
if 0 <= stage_index < len(stages):
|
| 126 |
-
return create_thinking_indicator(stages[stage_index])
|
| 127 |
-
else:
|
| 128 |
-
return create_thinking_indicator("Processing")
|
| 129 |
|
| 130 |
-
# Quick usage
|
| 131 |
if __name__ == "__main__":
|
| 132 |
-
|
| 133 |
-
print(
|
| 134 |
-
print(create_thinking_indicator())
|
| 135 |
-
print()
|
| 136 |
-
|
| 137 |
-
print("Random thinking indicator:")
|
| 138 |
-
print(create_random_thinking_indicator())
|
| 139 |
-
print()
|
| 140 |
-
|
| 141 |
-
print("Query-based thinking indicator:")
|
| 142 |
-
print(get_thinking_indicator_by_query("What's the derivative of x^2?"))
|
| 143 |
-
print()
|
| 144 |
-
|
| 145 |
-
print("Custom thinking indicator:")
|
| 146 |
-
print(create_custom_thinking_indicator("Deep thinking", 5))
|
|
|
|
| 1 |
"""
|
| 2 |
Loading animations for Gradio chatbot interface.
|
| 3 |
+
Contains functions to generate animated thinking indicators with just pulsing dots.
|
| 4 |
"""
|
| 5 |
|
| 6 |
+
def create_thinking_indicator():
|
|
|
|
|
|
|
| 7 |
"""
|
| 8 |
+
Creates an HTML thinking indicator with just animated dots.
|
|
|
|
|
|
|
|
|
|
| 9 |
|
| 10 |
Returns:
|
| 11 |
+
str: HTML string with animated dots only
|
| 12 |
"""
|
| 13 |
+
return '''<div class="thinking-indicator">
|
| 14 |
+
<div class="dots-container">
|
| 15 |
<span class="dot"></span>
|
| 16 |
<span class="dot"></span>
|
| 17 |
<span class="dot"></span>
|
| 18 |
</div>
|
| 19 |
</div>'''
|
| 20 |
|
| 21 |
+
def create_custom_dot_indicator(dot_count=3):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
"""
|
| 23 |
+
Creates a thinking indicator with specified number of dots.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
|
| 25 |
Args:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 26 |
dot_count (int): Number of animated dots (default: 3)
|
| 27 |
|
| 28 |
Returns:
|
| 29 |
+
str: HTML string with custom number of dots
|
| 30 |
"""
|
| 31 |
dots = ''.join(['<span class="dot"></span>' for _ in range(dot_count)])
|
| 32 |
|
| 33 |
return f'''<div class="thinking-indicator">
|
| 34 |
+
<div class="dots-container">
|
| 35 |
{dots}
|
| 36 |
</div>
|
| 37 |
</div>'''
|
| 38 |
|
| 39 |
+
# Main function to use in the chatbot
|
| 40 |
+
def get_thinking_dots():
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 41 |
"""
|
| 42 |
+
Returns the standard thinking dots indicator.
|
|
|
|
|
|
|
|
|
|
| 43 |
|
| 44 |
Returns:
|
| 45 |
+
str: HTML string with animated thinking dots
|
| 46 |
"""
|
| 47 |
+
return create_thinking_indicator()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 48 |
|
| 49 |
+
# Quick usage example:
|
| 50 |
if __name__ == "__main__":
|
| 51 |
+
print("Thinking dots indicator:")
|
| 52 |
+
print(get_thinking_dots())
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|