) => {
128 | if (!isDrawing) {
129 | return;
130 | }
131 | const canvas = canvasRef.current;
132 | if (canvas) {
133 | const ctx = canvas.getContext('2d');
134 | if (ctx) {
135 | ctx.strokeStyle = color;
136 | ctx.lineTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
137 | ctx.stroke();
138 | }
139 | }
140 | };
141 | const stopDrawing = () => {
142 | setIsDrawing(false);
143 | };
144 |
145 | const runRoute = async () => {
146 | const canvas = canvasRef.current;
147 |
148 | if (canvas) {
149 | const response = await axios({
150 | method: 'post',
151 | url: `${import.meta.env.VITE_API_URL}/calculate`,
152 | data: {
153 | image: canvas.toDataURL('image/png'),
154 | dict_of_vars: dictOfVars
155 | }
156 | });
157 |
158 | const resp = await response.data;
159 | console.log('Response', resp);
160 | resp.data.forEach((data: Response) => {
161 | if (data.assign === true) {
162 | // dict_of_vars[resp.result] = resp.answer;
163 | setDictOfVars({
164 | ...dictOfVars,
165 | [data.expr]: data.result
166 | });
167 | }
168 | });
169 | const ctx = canvas.getContext('2d');
170 | const imageData = ctx!.getImageData(0, 0, canvas.width, canvas.height);
171 | let minX = canvas.width, minY = canvas.height, maxX = 0, maxY = 0;
172 |
173 | for (let y = 0; y < canvas.height; y++) {
174 | for (let x = 0; x < canvas.width; x++) {
175 | const i = (y * canvas.width + x) * 4;
176 | if (imageData.data[i + 3] > 0) { // If pixel is not transparent
177 | minX = Math.min(minX, x);
178 | minY = Math.min(minY, y);
179 | maxX = Math.max(maxX, x);
180 | maxY = Math.max(maxY, y);
181 | }
182 | }
183 | }
184 |
185 | const centerX = (minX + maxX) / 2;
186 | const centerY = (minY + maxY) / 2;
187 |
188 | setLatexPosition({ x: centerX, y: centerY });
189 | resp.data.forEach((data: Response) => {
190 | setTimeout(() => {
191 | setResult({
192 | expression: data.expr,
193 | answer: data.result
194 | });
195 | }, 1000);
196 | });
197 | }
198 | };
199 |
200 | return (
201 | <>
202 |
203 |
211 |
212 | {SWATCHES.map((swatch) => (
213 | setColor(swatch)} />
214 | ))}
215 |
216 |
224 |
225 |
234 |
235 | {latexExpression && latexExpression.map((latex, index) => (
236 | setLatexPosition({ x: data.x, y: data.y })}
240 | >
241 |
244 |
245 | ))}
246 |
247 | );
248 | }
249 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: ["class"],
4 | content: [
5 | './pages/**/*.{ts,tsx}',
6 | './components/**/*.{ts,tsx}',
7 | './app/**/*.{ts,tsx}',
8 | './src/**/*.{ts,tsx}',
9 | ],
10 | prefix: "",
11 | theme: {
12 | container: {
13 | center: true,
14 | padding: "2rem",
15 | screens: {
16 | "2xl": "1400px",
17 | },
18 | },
19 | extend: {
20 | colors: {
21 | border: "hsl(var(--border))",
22 | input: "hsl(var(--input))",
23 | ring: "hsl(var(--ring))",
24 | background: "hsl(var(--background))",
25 | foreground: "hsl(var(--foreground))",
26 | primary: {
27 | DEFAULT: "hsl(var(--primary))",
28 | foreground: "hsl(var(--primary-foreground))",
29 | },
30 | secondary: {
31 | DEFAULT: "hsl(var(--secondary))",
32 | foreground: "hsl(var(--secondary-foreground))",
33 | },
34 | destructive: {
35 | DEFAULT: "hsl(var(--destructive))",
36 | foreground: "hsl(var(--destructive-foreground))",
37 | },
38 | muted: {
39 | DEFAULT: "hsl(var(--muted))",
40 | foreground: "hsl(var(--muted-foreground))",
41 | },
42 | accent: {
43 | DEFAULT: "hsl(var(--accent))",
44 | foreground: "hsl(var(--accent-foreground))",
45 | },
46 | popover: {
47 | DEFAULT: "hsl(var(--popover))",
48 | foreground: "hsl(var(--popover-foreground))",
49 | },
50 | card: {
51 | DEFAULT: "hsl(var(--card))",
52 | foreground: "hsl(var(--card-foreground))",
53 | },
54 | },
55 | borderRadius: {
56 | lg: "var(--radius)",
57 | md: "calc(var(--radius) - 2px)",
58 | sm: "calc(var(--radius) - 4px)",
59 | },
60 | keyframes: {
61 | "accordion-down": {
62 | from: { height: "0" },
63 | to: { height: "var(--radix-accordion-content-height)" },
64 | },
65 | "accordion-up": {
66 | from: { height: "var(--radix-accordion-content-height)" },
67 | to: { height: "0" },
68 | },
69 | },
70 | animation: {
71 | "accordion-down": "accordion-down 0.2s ease-out",
72 | "accordion-up": "accordion-up 0.2s ease-out",
73 | },
74 | },
75 | },
76 | plugins: [require("tailwindcss-animate")],
77 | }
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 | "baseUrl": ".",
9 | "paths": {
10 | "@/*": ["./src/*"]
11 | },
12 | /* Bundler mode */
13 | "moduleResolution": "bundler",
14 | "allowImportingTsExtensions": true,
15 | "isolatedModules": true,
16 | "moduleDetection": "force",
17 | "noEmit": true,
18 | "jsx": "react-jsx",
19 |
20 | /* Linting */
21 | "strict": true,
22 | "noUnusedLocals": true,
23 | "noUnusedParameters": true,
24 | "noFallthroughCasesInSwitch": true
25 | },
26 | "include": ["src"]
27 | }
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "@/*": ["./src/*"]
6 | }
7 | },
8 | "files": [],
9 | "references": [
10 | { "path": "./tsconfig.app.json" },
11 | { "path": "./tsconfig.node.json" }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2022",
4 | "lib": ["ES2023"],
5 | "module": "ESNext",
6 | "skipLibCheck": true,
7 | "baseUrl": ".",
8 | "paths": {
9 | "@/*": [
10 | "./src/*"
11 | ]
12 | },
13 |
14 | /* Bundler mode */
15 | "moduleResolution": "bundler",
16 | "allowImportingTsExtensions": true,
17 | "isolatedModules": true,
18 | "moduleDetection": "force",
19 | "noEmit": true,
20 |
21 | /* Linting */
22 | "strict": true,
23 | "noUnusedLocals": true,
24 | "noUnusedParameters": true,
25 | "noFallthroughCasesInSwitch": true
26 | },
27 | "include": ["vite.config.ts"]
28 | }
29 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import path from "path"
2 | import react from "@vitejs/plugin-react"
3 | import eslint from 'vite-plugin-eslint';
4 | import { defineConfig } from "vite"
5 |
6 | export default defineConfig({
7 | plugins: [react(),eslint()],
8 | resolve: {
9 | alias: {
10 | "@": path.resolve(__dirname, "./src"),
11 | },
12 | },
13 | })
14 |
--------------------------------------------------------------------------------