A web application for recognizing fonts in images, built with React and Flask. Users can upload images, identify fonts, preview sample text in the detected font, and download the corresponding font file.
-
Image Upload: Upload an image containing text to identify its font.
-
Font Prediction: The app processes the image, recognizes the font, and displays its name.
-
Text Preview: Preview sample text using the identified font for visual reference.
-
Font Download: Download the identified font file directly from the app.
-
Frontend: React
-
Backend: Flask (Python)
-
Machine Learning Model: Keras (.keras model file for font recognition)
-
Database: MySQL (optional, if database storage is required)
-
Node.js and npm
-
Python 3.x
-
Flask
-
MySQL (if database is required)
-
keras, tensorflow, flask, and flask_cors Python packages
git clone https://github.com/ravindusenavirathna/font-recognition-app.git
cd font-recognition-app- Navigate to the backend directory:
cd backend- Create a virtual environment and activate it:
python -m venv venv
source venv/bin/activate # On Windows, use `venv\Scripts\activate`- Install the required packages:
pip install -r requirements.txt- Place your trained model file (e.g.,
font_recognition_model.keras) in themodeldirectory. - Run the Flask server:
python app.py- Navigate to the frontend directory:
cd frontend- Install dependencies:
npm install- Start the React development server:
npm start-
Update the Flask server URL in
frontend/src/ImageUpload.jsxif your backend runs on a different address or port. -
Ensure the Flask CORS settings in
app.pyallow requests from your React frontend's address (usuallyhttp://localhost:3000).
-
Launch both the Flask and React servers.
-
In the React app, upload an image with text.
-
The app will display the identified font on the right side, with a sample text preview and a download link for the font file.
This project is licensed under the MIT License.