Update app.py
Browse files
app.py
CHANGED
@@ -59,198 +59,119 @@ def load_image_from_file(file_path):
|
|
59 |
else:
|
60 |
raise FileNotFoundError(f"Image file not found: {file_path}")
|
61 |
# Custom CSS
|
|
|
62 |
custom_css = """
|
63 |
<style>
|
64 |
body {
|
65 |
-
background: linear-gradient(135deg, #1a1c2c, #4a4e69, #9a8c98);
|
66 |
font-family: 'Arial', sans-serif;
|
67 |
-
color: #
|
68 |
margin: 0;
|
69 |
padding: 0;
|
70 |
-
min-height: 100vh;
|
71 |
-
}
|
72 |
-
#app-header {
|
73 |
-
text-align: center;
|
74 |
-
background: rgba(255, 255, 255, 0.1);
|
75 |
-
padding: 30px;
|
76 |
-
border-radius: 20px;
|
77 |
-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
78 |
-
position: relative;
|
79 |
-
overflow: hidden;
|
80 |
-
margin: 20px auto;
|
81 |
-
max-width: 800px;
|
82 |
}
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
left: -50%;
|
88 |
-
width: 200%;
|
89 |
-
height: 200%;
|
90 |
-
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
|
91 |
-
animation: shimmer 15s infinite linear;
|
92 |
}
|
93 |
-
|
94 |
-
|
95 |
-
|
|
|
|
|
96 |
}
|
97 |
-
|
98 |
-
|
99 |
font-size: 2.5em;
|
100 |
-
margin-bottom: 15px;
|
101 |
-
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
102 |
}
|
103 |
-
|
104 |
-
font-size: 1.2em;
|
105 |
-
color: #c9ada7;
|
106 |
-
}
|
107 |
-
.concept-container {
|
108 |
display: flex;
|
109 |
-
justify-content:
|
110 |
-
gap: 20px;
|
111 |
margin-top: 30px;
|
112 |
-
flex-wrap: wrap;
|
113 |
-
}
|
114 |
-
.concept {
|
115 |
-
position: relative;
|
116 |
-
transition: transform 0.3s, box-shadow 0.3s;
|
117 |
-
border-radius: 15px;
|
118 |
-
overflow: hidden;
|
119 |
-
background: rgba(255, 255, 255, 0.1);
|
120 |
-
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
121 |
-
width: 150px;
|
122 |
-
height: 150px;
|
123 |
-
display: flex;
|
124 |
-
flex-direction: column;
|
125 |
-
justify-content: center;
|
126 |
-
align-items: center;
|
127 |
-
}
|
128 |
-
.concept:hover {
|
129 |
-
transform: translateY(-10px) rotate(3deg);
|
130 |
-
box-shadow: 0 15px 30px rgba(0,0,0,0.4);
|
131 |
}
|
132 |
-
.
|
133 |
-
|
134 |
-
|
|
|
|
|
|
|
135 |
}
|
136 |
-
.
|
137 |
-
background-color:
|
138 |
color: white;
|
139 |
-
|
140 |
-
|
141 |
-
|
142 |
-
|
143 |
-
|
144 |
-
bottom: 0;
|
145 |
-
}
|
146 |
-
.artifact {
|
147 |
-
position: absolute;
|
148 |
-
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
|
149 |
-
border-radius: 50%;
|
150 |
-
opacity: 0.5;
|
151 |
-
pointer-events: none;
|
152 |
-
}
|
153 |
-
.artifact.large {
|
154 |
-
width: 400px;
|
155 |
-
height: 400px;
|
156 |
-
top: -100px;
|
157 |
-
left: -200px;
|
158 |
-
animation: float 20s infinite ease-in-out;
|
159 |
-
}
|
160 |
-
.artifact.medium {
|
161 |
-
width: 300px;
|
162 |
-
height: 300px;
|
163 |
-
bottom: -150px;
|
164 |
-
right: -150px;
|
165 |
-
animation: float 15s infinite ease-in-out reverse;
|
166 |
-
}
|
167 |
-
.artifact.small {
|
168 |
-
width: 150px;
|
169 |
-
height: 150px;
|
170 |
-
top: 50%;
|
171 |
-
left: 50%;
|
172 |
-
transform: translate(-50%, -50%);
|
173 |
-
animation: pulse 5s infinite alternate;
|
174 |
-
}
|
175 |
-
@keyframes float {
|
176 |
-
0%, 100% { transform: translateY(0) rotate(0deg); }
|
177 |
-
50% { transform: translateY(-20px) rotate(10deg); }
|
178 |
}
|
179 |
-
|
180 |
-
|
181 |
-
100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
|
182 |
-
}
|
183 |
-
/* Gradio component styling */
|
184 |
-
.gr-box {
|
185 |
-
background-color: rgba(255, 255, 255, 0.1) !important;
|
186 |
-
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
187 |
}
|
188 |
-
.
|
189 |
-
|
190 |
-
color:
|
191 |
-
border:
|
|
|
|
|
192 |
}
|
193 |
-
.
|
194 |
-
|
|
|
195 |
}
|
196 |
-
.
|
197 |
-
|
|
|
|
|
198 |
}
|
199 |
</style>
|
200 |
"""
|
201 |
|
202 |
# Custom HTML
|
203 |
custom_html = """
|
204 |
-
<div
|
205 |
-
<div class="
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
<
|
210 |
-
|
211 |
-
|
212 |
-
|
213 |
-
|
214 |
-
</div>
|
215 |
-
<div class="concept">
|
216 |
-
<div class="concept-emoji">📷</div>
|
217 |
-
<div class="concept-description">Image Recognition</div>
|
218 |
-
</div>
|
219 |
-
<div class="concept">
|
220 |
-
<div class="concept-emoji">🤖</div>
|
221 |
-
<div class="concept-description">AI-Powered</div>
|
222 |
</div>
|
223 |
-
<div class="
|
224 |
-
<
|
225 |
-
|
226 |
</div>
|
227 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
228 |
</div>
|
229 |
"""
|
230 |
|
231 |
-
|
232 |
# Create the Gradio interface
|
233 |
with gr.Blocks(css=custom_css) as iface:
|
234 |
-
gr.HTML(custom_html)
|
235 |
-
|
236 |
-
|
237 |
-
|
238 |
-
|
239 |
-
|
240 |
-
|
241 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
242 |
submit_btn.click(fn=solve_math_problem, inputs=input_image, outputs=output_text)
|
243 |
-
|
244 |
-
gr.Examples(
|
245 |
-
examples=[
|
246 |
-
os.path.join(os.path.dirname(__file__), "eqn1.png"),
|
247 |
-
os.path.join(os.path.dirname(__file__), "eqn2.png")
|
248 |
-
],
|
249 |
-
inputs=input_image,
|
250 |
-
outputs=output_text,
|
251 |
-
fn=solve_math_problem,
|
252 |
-
cache_examples=True,
|
253 |
-
)
|
254 |
|
255 |
# Launch the app
|
256 |
iface.launch()
|
|
|
59 |
else:
|
60 |
raise FileNotFoundError(f"Image file not found: {file_path}")
|
61 |
# Custom CSS
|
62 |
+
# Custom CSS
|
63 |
custom_css = """
|
64 |
<style>
|
65 |
body {
|
|
|
66 |
font-family: 'Arial', sans-serif;
|
67 |
+
background-color: #f0f3f7;
|
68 |
margin: 0;
|
69 |
padding: 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
70 |
}
|
71 |
+
.container {
|
72 |
+
max-width: 1200px;
|
73 |
+
margin: 0 auto;
|
74 |
+
padding: 20px;
|
|
|
|
|
|
|
|
|
|
|
75 |
}
|
76 |
+
.header {
|
77 |
+
background-color: #2c3e50;
|
78 |
+
color: white;
|
79 |
+
padding: 20px 0;
|
80 |
+
text-align: center;
|
81 |
}
|
82 |
+
.header h1 {
|
83 |
+
margin: 0;
|
84 |
font-size: 2.5em;
|
|
|
|
|
85 |
}
|
86 |
+
.main-content {
|
|
|
|
|
|
|
|
|
87 |
display: flex;
|
88 |
+
justify-content: space-between;
|
|
|
89 |
margin-top: 30px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
90 |
}
|
91 |
+
.input-section, .output-section {
|
92 |
+
width: 48%;
|
93 |
+
background-color: white;
|
94 |
+
border-radius: 8px;
|
95 |
+
padding: 20px;
|
96 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
97 |
}
|
98 |
+
.gr-button {
|
99 |
+
background-color: #27ae60;
|
100 |
color: white;
|
101 |
+
border: none;
|
102 |
+
padding: 10px 20px;
|
103 |
+
border-radius: 5px;
|
104 |
+
cursor: pointer;
|
105 |
+
transition: background-color 0.3s;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
106 |
}
|
107 |
+
.gr-button:hover {
|
108 |
+
background-color: #2ecc71;
|
|
|
|
|
|
|
|
|
|
|
|
|
109 |
}
|
110 |
+
.examples-section {
|
111 |
+
margin-top: 30px;
|
112 |
+
background-color: white;
|
113 |
+
border-radius: 8px;
|
114 |
+
padding: 20px;
|
115 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
116 |
}
|
117 |
+
.examples-section h3 {
|
118 |
+
margin-top: 0;
|
119 |
+
color: #2c3e50;
|
120 |
}
|
121 |
+
.footer {
|
122 |
+
text-align: center;
|
123 |
+
margin-top: 30px;
|
124 |
+
color: #7f8c8d;
|
125 |
}
|
126 |
</style>
|
127 |
"""
|
128 |
|
129 |
# Custom HTML
|
130 |
custom_html = """
|
131 |
+
<div class="container">
|
132 |
+
<div class="header">
|
133 |
+
<h1>AI Math Equation Solver</h1>
|
134 |
+
<p>Upload an image of a math problem, and our AI will solve it step by step!</p>
|
135 |
+
</div>
|
136 |
+
<div class="main-content">
|
137 |
+
<div class="input-section">
|
138 |
+
<h2>Upload Your Math Problem</h2>
|
139 |
+
{input_image}
|
140 |
+
{submit_btn}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
141 |
</div>
|
142 |
+
<div class="output-section">
|
143 |
+
<h2>Solution</h2>
|
144 |
+
{output_text}
|
145 |
</div>
|
146 |
</div>
|
147 |
+
<div class="examples-section">
|
148 |
+
<h3>Try These Examples</h3>
|
149 |
+
{examples}
|
150 |
+
</div>
|
151 |
+
<div class="footer">
|
152 |
+
<p>Powered by Gradio and AI - Created for educational purposes</p>
|
153 |
+
</div>
|
154 |
</div>
|
155 |
"""
|
156 |
|
|
|
157 |
# Create the Gradio interface
|
158 |
with gr.Blocks(css=custom_css) as iface:
|
159 |
+
with gr.HTML(custom_html):
|
160 |
+
input_image = gr.Image(type="pil", label="Upload Math Problem Image")
|
161 |
+
submit_btn = gr.Button("Solve Problem", elem_classes=["gr-button"])
|
162 |
+
output_text = gr.Textbox(label="Step-by-step Solution", lines=10)
|
163 |
+
examples = gr.Examples(
|
164 |
+
examples=[
|
165 |
+
os.path.join(os.path.dirname(__file__), "eqn1.png"),
|
166 |
+
os.path.join(os.path.dirname(__file__), "eqn2.png")
|
167 |
+
],
|
168 |
+
inputs=input_image,
|
169 |
+
outputs=output_text,
|
170 |
+
fn=solve_math_problem,
|
171 |
+
cache_examples=True,
|
172 |
+
)
|
173 |
+
|
174 |
submit_btn.click(fn=solve_math_problem, inputs=input_image, outputs=output_text)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
175 |
|
176 |
# Launch the app
|
177 |
iface.launch()
|