LFM2 Math Web 🧮

This is a simple web app that demonstrates how to use the LFM2-350M-Math model in the browser using Transformers.js and ONNX Runtime Web. The application allows users to submit math problems and receive step-by-step solutions — all running locally in the browser via WebGPU.

Note: LFM2-350M-Math is a single-turn model. Each question is answered independently; previous messages are not passed as context to the model.

Project Structure

The project is structured as follows:

• public/: Static assets like images, icons, and fonts.

• src/: Core source code for the application.

  • components/: Reusable React components for the application.

    • icons/: Icon components for the application.

      • ArrowRightIcon.jsx: Arrow right icon component.
      • BotIcon.jsx: Bot icon component.
      • StopIcon.jsx: Stop icon component.
      • UserIcon.jsx: User icon component.

    • Chat.jsx: Chat component for displaying chat messages.

    • Progress.jsx: Progress component for displaying a progress bar.

  • styles/: CSS files for styling the application.

    • index.css: Global CSS styles for the application.
    • Chat.css: CSS styles for the chat interface.

  • worker.js: Web Worker for running the LFM2-350M-Math model using Transformers.js.

  • App.jsx: Main React component for the application.

  • main.jsx: Entry point for the application.

• .gitignore: Specifies which files and directories should be ignored by Git.

• LICENSE: Project licensing information.

• README.md: Project documentation and setup instructions.

• index.html: Main HTML file for the application.

• package.json: Project dependencies and script configuration.

• eslint.config.js: ESLint configuration file.

• postcss.config.js: PostCSS configuration file.

• tailwind.config.js: Tailwind CSS configuration file.

• vite.config.js: Vite configuration file for the project.

Technologies Used

• HTML: Standard markup language for creating web pages.
• Tailwind CSS: Utility-first CSS framework for styling web applications.
• JavaScript: High-level programming language for building web applications.
• React: JavaScript library for building user interfaces.
• Transformers.js: JavaScript library for running Hugging Face models in the browser.
• Marked: Markdown parser for rendering model responses.
• DOMPurify: DOM-only XSS sanitizer for secure HTML rendering.
• MathJax: JavaScript library for rendering mathematical expressions.

Getting Started

To get started with this project, follow the steps below:

1. Clone the repository: git clone https://github.com/sitammeur/lfm2-math-web.git
2. Change the directory: cd lfm2-math-web
3. Install the required dependencies: npm install
4. Run the application: npm run dev

Open your local host to view the web application in your browser at http://localhost:5173/.

Results

The application allows users to solve math problems with LFM2-350M-Math, a compact 350M parameter reasoning model by LiquidAI fine-tuned for competition-level mathematics, running entirely in the browser via 🤗 Transformers.js and ONNX Runtime Web.

Contributing

Contributions are welcome! If you would like to contribute to this project, please raise an issue to discuss the changes you would like to make. Once the changes are approved, you can create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

If you have any questions or suggestions regarding the project, feel free to reach out to me on my GitHub profile.

Happy coding! 🚀