diff --git a/package-lock.json b/package-lock.json index e642146..8cd4be8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13118,19 +13118,6 @@ "node": ">=14.0.0" } }, - "node_modules/react-scripts/node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..f98242f 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index aa069f2..13fdfc8 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,4 @@ - + @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Image2Latex diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..ae0d774 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Image2Latex", + "name": "Image2Latex - Image to Latex code converter", "icons": [ { "src": "favicon.ico", diff --git a/src/App.jsx b/src/App.jsx index 3696955..fc6096e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,4 @@ -import { useState, useCallback } from "react"; +import { useState, useCallback, useEffect, useRef } from "react"; import { useDropzone } from "react-dropzone"; import axios from "axios"; import logo from "./Assets/logo_white.svg"; @@ -7,11 +7,28 @@ export default function App() { const [file, setFile] = useState(null); const [latex, setLatex] = useState(""); const [loading, setLoading] = useState(false); + const inputRef = useRef(null); const onDrop = useCallback((acceptedFiles) => { setFile(acceptedFiles[0]); }, []); + useEffect(() => { + const handlePaste = (e) => { + const items = e.clipboardData?.items; + if (!items) return; + for (const item of items) { + if (item.type.startsWith("image")) { + const pastedFile = item.getAsFile(); + setFile(pastedFile); + break; + } + } + }; + window.addEventListener("paste", handlePaste); + return () => window.removeEventListener("paste", handlePaste); + }, []); + const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: { "image/*": [] }, @@ -21,12 +38,14 @@ export default function App() { if (!file) return; setLoading(true); setLatex(""); - const formData = new FormData(); formData.append("image", file); - try { - const res = await axios.post("https://latex-api.amfoss.in/api/convert", formData); + const res = await axios.post( + "https://latex-api.amfoss.in/api/convert", + formData, + { headers: { "Content-Type": "multipart/form-data" } } + ); setLatex(res.data.latex || "No LaTeX output received."); } catch (err) { console.error(err); @@ -37,88 +56,80 @@ export default function App() { }; return ( -
- {/* Geometric background grid */} +
-

Image to LaTeX

- -
- {/* Dropzone */} -
- - {file ? ( -

{file.name}

- ) : ( -

- Drag & Drop, Paste (Ctrl+V) Image Here -
- or -
- Browse Files -

- )} -
- - {/* Buttons */} -
- - -
+ + {file ? ( +

{file.name}

+ ) : ( +

+ Drag & Drop, Paste (Ctrl+V) Image Here +
+ or +
+ Browse Files +

+ )} +
- {/* Output */} -
-

LaTeX Output:

+
+ + +
-
-