Merge pull request abhisheks008#660 from imksprateek/web-app

[Feature Addition]: User-driven interface for an existing ML model

Body Fat Prediction/README.md

@@ -0,0 +1,132 @@
+# Body Fat Prediction
+
+This repository hosts a Body Fat prediction model, which now includes a Flask-based web interface for user interaction. This document details how to run the app and explains the contributions made to enhance the project with a user-driven web interface.
+
+## Contributions
+
+### Added Features:
+1. **Flask Web Application**: Developed a Flask web application to enable user interaction with the Body Fat prediction model.
+2. **Model Integration**: Integrated the existing Body Fat prediction model with the Flask application using `pickle`.
+3. **User Interface**: Designed a simple and intuitive user interface for inputting data and displaying predictions.
+4. **Instructions for Running the App**: Provided comprehensive instructions for setting up and running the web application.
+
+## How to Run the Application
+
+### Prerequisites
+
+- Python 3.8 or higher
+- Anaconda
+- Jupyter notebook
+- Flask
+- Pickle
+- Necessary libraries (listed in `requirements.txt`)
+
+### Setup Instructions
+
+1. **Clone the Repository**
+
+    ```bash
+    git clone https://github.com/abhisheks008/ML-Crate.git
+    cd Body\ Fat\ Prediction
+    ```
+
+2. **Install Dependencies**
+
+    - Install Anaconda (https://docs.anaconda.com/free/anaconda/install/)
+    <br>
+    Use the following command to confirm the installation of Anaconda
+    ```
+        conda --version 
+    ```
+
+    - It is recommended to use a virtual environment to manage dependencies. You can create and activate a virtual environment as follows:
+
+    ```bash
+    conda create --name myEnv
+    source activate myEnv
+    ```
+
+    Install the required packages:
+
+    ```bash
+    conda update
+    conda install --yes --file requirements. txt
+    ```
+
+ - Install and make sure Jupyter notebook server is running at `http://localhost:8888`
+    ```
+        conda install jupyter
+        jupyter notebook
+    ```
+
+3. **Run the Flask Application**
+
+    Start the Flask development server:
+
+    ```bash
+    python3 Web\ App/app.py
+    ```
+
+    By default, the application will be accessible at `http://127.0.0.1:5000/`.
+
+### Using the Web Interface
+
+1. Open your web browser and navigate to `http://127.0.0.1:5000/`.
+<img src="Images/Web App/initial_1.png" alt="Initial State" width="600" />
+<img src="Images/Web App/initial_2.png" alt="Initial State" width="600" />
+
+2. You will see a form where you can input the necessary parameters for Body Fat prediction.
+<img src="Images/Web App/form_filled.png" alt="Filling the form" width="600" />
+
+
+3. Fill out the form with the required details and click on the "Predict" button.
+<img src="Images/Web App/predicted.png" alt="Prediction output" width="600" />
+
+
+4. The application will process the input data using the pre-trained model and display the predicted body fat percentage.
+
+
+
+## Directory Structure
+
+```
+Body Fat Prediction/
+├── model.pkl                           # Pickle dumped model
+├── requirements.txt                   # Requirements to run the application
+├── README.md                           # Project documentation
+├── Web App/
+    ├── app.py                          # Main Flask application
+    ├── README.md
+    ├── templates/
+        ├── index.html                   # HTML template for the web interface
+    ├── static/
+        ├── css/
+            ├── styles.css              # CSS for styling the web interface
+├── Model/
+    ├── Body_Fat_Prediction.ipynb       # ML model for predicting Body fat
+    ├── README.md                       # Model Documentation
+├── Images/
+    ├── README.md                       # Has links for images of plots (Data visualization) and Web App's working
+    ├── Web App/                        # Has images of Web App's working
+├── Dataset/
+    ├── bodyfat.csv                     # Body fat dataset - CSV file
+    ├── README.md                       # Has Kaggle link for the Dataset
+```
+
+## Additional Notes
+
+- **Model File**: The model file `model.pkl` is stored in the project's root directory. Ensure this file is present when running the application.
+- **Future Improvements**: Potential enhancements include adding user authentication, improving the UI/UX, and deploying the application to a cloud platform for broader access.
+
+## Acknowledgments
+
+- Thanks to the contributors of the original Body Fat prediction model.
+- Special mention to the open-source community for providing the tools and libraries that made this project possible.
+
+CONTRIBUTED BY
+
+[Tandrima Singha](https://github.com/tandrimasingha) (Training the model)<br> [K S Prateek](https://github.com/imksprateek) (Web interface and Documentation)
+
+For any issues or contributions, please refer to the project's GitHub repository [here](https://github.com/abhisheks008/ML-Crate/tree/main/Body%20Fat%20Prediction).
+
+---

Body Fat Prediction/Web App/README.md

@@ -0,0 +1,21 @@
+## Body Fat Prediction - Web Interface
+
+### Goal 🎯
+The main goal of this project is to provide an easy-to-use web interface for predicting body fat percentage based on user input parameters. This tool aims to make body fat prediction accessible to non-technical users by integrating a machine learning model with a user-friendly Flask web application.
+
+### Model(s) used for the Web App 🧮
+The backend part of the web app uses a pre-trained machine learning model (`../Model`) serialized with `pickle`. The model was trained on a dataset of body measurements and is designed to predict body fat percentage accurately.
+
+### Video Demonstration 🎥
+
+
+https://github.com/imksprateek/ML-Crate/assets/122814422/10d99f39-2996-46b0-9d1c-689dff0aac00
+
+
+
+
+### Signature ✒️
+Developed by [K S Prateek](https://github.com/imksprateek)
+- [GitHub](https://github.com/imksprateek)
+- [LinkedIn](https://www.linkedin.com/in/imksprateek/)
+- [Twitter](https://x.com/imksprateek)  

Body Fat Prediction/Web App/app.py

@@ -0,0 +1,40 @@
+import numpy as np
+import pandas as pd
+import seaborn as sns
+import matplotlib.pyplot as plt
+import pickle as pkl
+from sklearn.model_selection import train_test_split, cross_val_score
+from sklearn.linear_model import LinearRegression, Lasso, Ridge
+from sklearn.metrics import mean_squared_error
+from flask import Flask, request, jsonify, render_template
+import pickle
+
+# Create flask app
+app = Flask(__name__)
+
+# Load pickle model
+model = pickle.load(open('../model.pkl', 'rb'))
+
+# Define home route
+
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+# Define route for prediction
+
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    float_features = [float(x) for x in request.form.values()]
+    final_features = [np.array(float_features)]
+    prediction = model.predict(final_features)
+
+    output = round(prediction[0], 2)
+
+    return render_template('index.html', prediction_text='Predicted body fat: {}%'.format(output))
+
+
+if __name__ == "__main__":
+    app.run(debug=True)

Body Fat Prediction/Web App/static/css/styles.css

@@ -0,0 +1,61 @@
+body {
+    font-family: 'Arimo', sans-serif;
+    background: #f0f0f0;
+    margin: 0;
+    padding: 0;
+}
+
+.data {
+    width: 100%;
+    max-width: 400px;
+    margin: 50px auto;
+    padding: 40px;
+    background: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    text-align: center;
+}
+
+.data h1 {
+    font-family: 'Pacifico', cursive;
+    margin-bottom: 20px;
+}
+
+.data form {
+    display: flex;
+    flex-direction: column;
+}
+
+.data input[type="text"],
+.data button {
+    font-family: 'Hind', sans-serif;
+    margin-bottom: 20px;
+    padding: 10px;
+    font-size: 16px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.data input[type="text"] {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.data button {
+    background: #3498db;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background 0.3s ease;
+}
+
+.data button:hover {
+    background: #2980b9;
+}
+
+.data p {
+    font-family: 'Open Sans Condensed', sans-serif;
+    font-size: 30px;
+    color: #333;
+}

Body Fat Prediction/Web App/templates/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html >
+<head>
+  <meta charset="UTF-8">
+  <title>ML API</title>
+  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
+<link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
+<link href='https://fonts.googleapis.com/css?family=Hind:300' rel='stylesheet' type='text/css'>
+<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+
+</head>
+
+<body>
+ <div class="data">
+	<h1>Body Fat Prediction</h1>
+
+     <!-- Main Input For Receiving Query to our ML model-->
+    <form action="{{ url_for('predict')}}"method="post">
+       Age (years): <input type="text" name="Age" placeholder="Age" required="required" />  <br>
+		Weight (lbs): <input type="text" name="Weight" placeholder="Weight" required="required" /> <br>
+		Height (inches): <input type="text" name="Height" placeholder="Height" required="required" /> <br>
+    Neck (cm): <input type="text" name="Neck" placeholder="Neck circumference" required="required" /> <br>
+    Chest circumference (cm): <input type="text" name="Chest" placeholder="Chest circumference" required="required" /> <br>
+    Abdomen circumference (cm): <input type="text" name="Abdomen" placeholder="Abdomen circumference" required="required" /> <br>
+    Hip circumference (cm): <input type="text" name="Hip" placeholder="Hip circumference" required="required" /> <br>
+    Thigh circumference (cm): <input type="text" name="Thigh" placeholder="Thigh circumference" required="required" /> <br>
+    Knee circumference (cm): <input type="text" name="Knee" placeholder="Knee circumference" required="required" /> <br>
+    Ankle circumference (cm): <input type="text" name="Ankle" placeholder="Ankle circumference" required="required" /> <br>
+    Biceps(extended) circumference (cm): <input type="text" name="Biceps" placeholder="Biceps circumference" required="required" /> <br>
+    Forearm circumference (cm): <input type="text" name="Forearm" placeholder="Forearm circumference" required="required" /> <br>
+    Wrist circumference (cm): <input type="text" name="Wrist" placeholder="Wrist circumference" required="required" /> <br>
+        <button type="submit" class="btn btn-primary btn-block btn-large">Predict</button>
+    </form>
+
+   <br>
+   <br>
+   <p class="prediction">{{ prediction_text }}</p>
+
+ </div>
+
+
+</body>
+</html>