Fruity App by C22-098

🤖 Fruity helps you quickly identify rotten fruit, saving you the hassle of sorting to get fresh fruit.

🌐 Demo Link

In this project, we initially used Railway as a hosting platform for our application. But Railways have limited access. Alternatively, you can visit https://itsfruity.onrender.com/ if the service in https://itsfruity.up.railway.app/ is no longer available.

Click here to view Fruity website

📝 Table of Contents

1. Introduction
2. Demo Link
3. Table of Contents
4. About Fruity
   1. Background
   2. Goal & Aim
5. Quickstart
   1. Built Using
   2. Prerequisite
   3. Installation & Get Started Project
   4. Deploy Machine Learning Model with Flask
6. How Does the Inference Work?
7. Project Management Plan
8. Project Repository Structure
9. Project Resources
10. Academic Paper & References
11. Support
12. Contributing
13. Acknowledgments

🌿 About Fruity

Fruity is a website-based machine learning program which is currently under development process for the Capstone Project of Certified Independent Study of MBKM Dicoding Cycle 3 from Machine Learning & Front End Web Development learning path.

💡Background

Horticulture is an agricultural sub-sector which is important contribution to agriculture in Indonesia. In 2020, the value of horticultural exports increased by 37.75% compared to 2019. This increase was dominated by fruit commodities during the 2020 COVID-19 pandemic. This indicates that fruits have a high level of demand. Assessment of fruit quality is a major challenge in the agricultural sector. Controlling the external quality of fruit manually may be possible. However, it will take a long time and have implications for productivity. Based on the problems above, we propose a website-based classification system "Fruity" to help identify rotten fruit as a first step for quality control in fruit commodities.

🎯 Goal & Aim

This website aims to help everyone (especially fruit growers and fruit sellers) as an utility to help identify fresh and rotten fruits by uploading the image of the fruits. This feature is expected to increase productivity in detecting defects in agricultural fruits.

⚡️ Quickstart

This section will explain the steps for installing and deploying Fruity to a web service with a short code. This process is divided into 3 parts, the first one introduction and prerequisites, the second is creating the Flask project itself, and the last is the hosting process on the platform as a service. Fyi, initially, we used Heroku. Sadly, since today (starting November 28, 2022), Heroku has eliminated all free services. We are using other alternative platforms, one of which is Fly.io and Railway. In the project, we use Railway. But, Railway has drawbacks, access is limited to 500 hours of use. Therefore, we're looking into how to set up Fly.io as a backup host.

📦 Built Using

Fruity is a web-based machine learning program developed by training models using the end-to-end machine learning platform, TensorFlow. And then, the trained model is connected to the web server using Flask.

🎨 Prerequisite

• Python, one of the top machine learning and AI programming languages.
• Tensorflow, The core open-source library to help you develop and train ML models. in this package there is Keras. Keras is a deep learning API written in Python, running on top of the machine learning platform TensorFlow.
• Flask, Flask is a web application framework written in Python.

⚙️ Installation & Get Started Project

This step, steps to creating Flask project and setting up in the development environment, which is running on a local server.

🧵 Installation of the Project to Virtual Environment

To be able to push it into a stand-alone virtual environment, follow this step. If you have already done this, step to the next step.

1. Clone this repository

   $ git clone https://github.com/nurmuhimawann/C22-098-Fruity-Website.git
   

2. Install Python Virtual Environment

   $ virtualenv venv
   

3. Install All the Requirements Inside "requirements.txt"

   $ pip install -r requirements.txt
   

4. Create Flask App Environment Variables & Run Server

   $ env:FLASK_APP = "wsgi"
   
   $ flask run
   

5. Open URL referencing LocalHost in your browser

   🎉 Yeaay, Congrats. The web app is successfully running on the local server. If you want the application accessible on the internet, you must deploy this app to a web service platform. Let's go to the next step 😉.

🚀 Deploy Machine Learning Model with Flask

Annotation

You don't have to use both. Just choose either Fly.io or Railway.

Click on the triangle icon to expand

⚛ How Does the Inference Work?

1. User uploads an image to web application.
2. Gets the user input of images from Flask pages. After that, the application checks file extension to ensure that file uploaded is an image. The uploaded image is stored at static/user_uploads folder.
3. App extract the image's path.
4. Load the images using tf.keras.utils.load_img(img_path, target_size=(150, 150)). This function is applied to load image from specified path for preparation before applying image classification. The image is resized into 150x150px resolution.
5. Because the model can't classify images directly in the initial extension. So, the image is converted first into an array of integers using tf.keras.utils.img_to_array(img).
6. Expand the dimension of the array in input Tensor using tf.expand_dims(img_array, axis=0).
7. Use the model to predict the array's class using fresh_rotten_model.predict(img_array). This function returns an array of model's confidence of each label. From the array, the index of maximum value is fetched using np.argmax(prediction).
8. Cast the label of the prediction using fresh_rotten_label(prediction) to get the result. This integer value is converted into a string based on the JSON labels that matches the value. And the final result will display the predicted, such as “Fresh Apples”, "Rotten Apples" etc.

📑 Project Management Plan

• Capstone Project Management Documents

• Project Brief Document

• Minutes of Meetings with Adviser

🗃️ Project Repository Structure

🗂️ Project Structure

<Main Repository>
.
├── app/                        # App Modules
│   ├── models/                 # the place where machine learning models are saved
│   │   ├── image_dir           # test image files
│   │   ├── label_dir           # json label dictionary
│   │   └── model_dir           # models hdf5
│   ├── static/                 # the place where JS,Images and CSS files are saved
│   │   ├── css                 # CSS files
│   │   ├── data                 # JSON files
│   │   ├── fonts               # Fonts files
│   │   ├── img                 # Image files
│   │   ├── js                  # Javascripts files
│   │   └── user_uploads        # Store uploaded Files by users
│   ├── templates/              # the place pages & components files are saved
│   │   ├── includes            # Page chunks, components
│   │   └── layouts             # App Layouts (the master pages)
│   └── __init__.py             # the place where flask app are initialized
│   └── application.py          # Bundle all above sections, routing and expose the Flask APP 
├── datasets                    # links datasets
├── notebooks                   # baseline models .ipynb
├── readme-assets               # Contains thumbs used in documentation (README.md)
├── .gitignore                  # Specifies file intentionally untracked files
├── Procfile                    # List of process types in an app
├── README.md                   # Information about a repository
├── requirements.txt            # Application dependencies
├── runtime.txt                 # Specify the version of Python
├── set-env.txt                 # Setting for enviroment python
└── wsgi.py                     # Start the app in development and production

💾 Project Repository & Branch

This repository is divided into a main and two development branches as follows:

• Main Branch (main)

  Main branch is used as an integration between fe-development and ml-development. The flask framework is used to build and integrate models with the front-end.

• Front-End Development Branch (fe-development)

  A branch used exclusively for front-end development. In its development, written in HTML, CSS, and JS.

• Machine Learning Development Branch (ml-development)

  A branch is used exclusively for machine learning development. It's written in Jupyter Notebook using most libraries like Keras and Tensorflow.

📂 Project Resources

Progamming Languange

Datasets:

• Fruits Fresh & Rotten for Classifications:

  https://www.kaggle.com/datasets/sriramr/fruits-fresh-and-rotten-for-classification/

Framework, Library & Utility:

• Colaboratory Notebooks

  https://colab.research.google.com/

• Fly.io

  https://fly.io/

• Railway

  https://railway.app/

• Font Awesome

  https://fontawesome.com/

• Ionicons

  https://ionic.io/ionicons

Design Tools:

• Pexels

  https://www.pexels.com/

• Unsplash

  https://unsplash.com/

Project Management Tools:

• Asana

  https://app.asana.com/

• Project Libre

  https://www.projectlibre.com/

📖 Academic Paper & References

• A. Kumar, R. C. Joshi, M. K. Dutta, M. Jonak and R. Burget, "Fruit-CNN: An Efficient Deep learning-based Fruit Classification and Quality Assessment for Precision Agriculture," 2021 13th International Congress on Ultra Modern Telecommunications and Control Systems and Workshops (ICUMT), 2021, pp. 60-65, doi: 10.1109/ICUMT54235.2021.9631643.

• Cortez, Atreyu Jasper Laxa.(2021)."Deploying Machine Learning Models Into A Website Using Flask". Accessed from https://towardsdatascience.com/deploying-machine-learning-models-into-a-website-using-flask-8582b7ce8802 on October, 23 2022 at 18.00 WIB.

• Kemenko Perekonomian. (2021)."Pengembangan Hortikultura Berorientasi Ekspor Tingkatkan Produktivitas, Kualitas, dan Kontinuitas Produk Hortikultura". Accessed from https://www.ekon.go.id/publikasi/detail/3358/pengembangan-hortikultura-berorientasi-ekspor-tingkatkan-produktivitas-kualitas-dan-kontinuitas-produk-hortikultura on October, 23 2022 at 18.00 WIB.

• Maulana, Febian Fitra dan Rochmawati, Naim,” Klasifikasi Citra Buah Menggunakan Convolutional Neural Network,” Journal of Informatics and Computer Science, vol. 01, no. 02 pp. 2686-2220 2019, doi: 10.26740/jinacs.v1n02.p104-108.

• Naik, Sapan & Patel, Bankim. (2017). Machine Vision based Fruit Classification and Grading - A Review. International Journal of Computer Applications. 170. 22-34. 10.5120/ijca2017914937.

• Sena, Samuel. (2017)." Pengenalan Deep Learning Part 7: Convolutional Neural Network (CNN)". Accessed from https://medium.com/@samuelsena/pengenalan-deep-learning-part-7-convolutional-neural-network-cnn-b003b477dc94 on October, 23 2022 at 18.00 WIB.

💖 Like this project ?

Leave a ⭐ If you think this project is cool.

Share with the world

👥 Contributing

Sarah Salsabilla - Our lovely adviser

Thank you for being such an amazing advisor! You are so understanding, kind and helpful. we very lucky to have you as our advisor teams, and you give a lot of help. A thousand words cannot express our gratitude to you. we really really appreciate you! Thanks kak.

Nur Muhammad Himawan - Team Leader

Putri Nur Aini Mahfudz - Machine Learning Developer

Laily Farkhah Adhimah - Machine Learning Developer

Mohamad Ilman Huda - Front-End Web Developer

🎉 Acknowledgements

• Dicoding Academy
• My Supervisor - Mr. Fahrobby Adnan, S.Kom.,MMSI
• My Advisor - Sarah Salsabilla
• My Mentor - Ahmad Sholihin
• M05 Class
• Inspiration
• References