sagar007 commited on
Commit
0a69092
·
verified ·
1 Parent(s): 380d0cf

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +78 -157
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: #f2e9e4;
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
- #app-header::before {
84
- content: "";
85
- position: absolute;
86
- top: -50%;
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
- @keyframes shimmer {
94
- 0% { transform: rotate(0deg); }
95
- 100% { transform: rotate(360deg); }
 
 
96
  }
97
- #app-header h1 {
98
- color: #f2e9e4;
99
  font-size: 2.5em;
100
- margin-bottom: 15px;
101
- text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
102
  }
103
- #app-header p {
104
- font-size: 1.2em;
105
- color: #c9ada7;
106
- }
107
- .concept-container {
108
  display: flex;
109
- justify-content: center;
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
- .concept-emoji {
133
- font-size: 60px;
134
- margin-bottom: 10px;
 
 
 
135
  }
136
- .concept-description {
137
- background-color: rgba(110, 72, 170, 0.8);
138
  color: white;
139
- padding: 10px;
140
- font-size: 0.9em;
141
- text-align: center;
142
- width: 100%;
143
- position: absolute;
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
- @keyframes pulse {
180
- 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
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
- .gr-input, .gr-button {
189
- background-color: rgba(255, 255, 255, 0.1) !important;
190
- color: #f2e9e4 !important;
191
- border: 1px solid rgba(255, 255, 255, 0.2) !important;
 
 
192
  }
193
- .gr-button:hover {
194
- background-color: rgba(255, 255, 255, 0.2) !important;
 
195
  }
196
- .gr-form {
197
- background-color: transparent !important;
 
 
198
  }
199
  </style>
200
  """
201
 
202
  # Custom HTML
203
  custom_html = """
204
- <div id="app-header">
205
- <div class="artifact large"></div>
206
- <div class="artifact medium"></div>
207
- <div class="artifact small"></div>
208
- <h1>Visual Math Problem Solver</h1>
209
- <p>Upload an image of a math problem, and I'll try to solve it step by step!</p>
210
- <div class="concept-container">
211
- <div class="concept">
212
- <div class="concept-emoji">🧮</div>
213
- <div class="concept-description">Problem Solving</div>
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="concept">
224
- <div class="concept-emoji">📝</div>
225
- <div class="concept-description">Step-by-Step</div>
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
- with gr.Row():
236
- with gr.Column(scale=1):
237
- input_image = gr.Image(type="pil", label="Upload Math Problem Image")
238
- submit_btn = gr.Button("Solve Problem")
239
- with gr.Column(scale=1):
240
- output_text = gr.Textbox(label="Solution", lines=10)
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()