Implementation
Frontend
1. HTML
2. Flask
Features
HTML determines the structure of web pages. This structure alone is
not enough to make a web page look good and interactive. So you'll
use assisted technologies such as CSS and JavaScript to make your
HTML beautiful and add interactivity, respectively.
Flask is a web framework, it’s a Python module that lets you develop
web applications easily. It’s has a small and easy-to-extend core: it’s a
microframework that doesn’t include an ORM (Object Relational
Manager) or such features. Flask is a web framework that provides
libraries to build lightweight web applications in python. It is
developed by Armin Ronacher who leads an international group of
python enthusiasts (POCCO). It is based on WSGI toolkit and jinja2
template engine. Flask is considered as a micro framework
Front End Code
Code for Implementation using Flask
# Importing essential libraries and modules
from flask import Flask, render_template, request, Markup
import numpy as np
import pandas as pd
from [Link] import fertilizer_dic
import requests
import config
import pickle
import io
import torch
from torchvision import transforms
from PIL import Image
from [Link] import ResNet9
# Loading crop recommendation model
crop_recommendation_model_path = 'models/[Link]'
crop_recommendation_model = [Link](
open(crop_recommendation_model_path, 'rb'))
def weather_fetch(city_name):
"""
Fetch and returns the temperature and humidity of a city
:params: city_name
:return: temperature, humidity
"""
api_key = config.weather_api_key
base_url = "[Link]
complete_url = base_url + "appid=" + api_key + "&q=" + city_name
response = [Link](complete_url)
x = [Link]()
if x["cod"] != "404":
y = x["main"]
temperature = round((y["temp"] - 273.15), 2)
humidity = y["humidity"]
return temperature, humidity
else:
return None
#Flask App
app = Flask(__name__)
# render home page
@ [Link]('/')
def home():
title = 'Farm Simple'
return render_template('[Link]', title=title)
# render crop recommendation form page
@ [Link]('/crop-recommend')
def crop_recommend():
title = 'Crop Recommendation'
return render_template('[Link]', title=title)
# render fertilizer recommendation form page
@ [Link]('/fertilizer')
def fertilizer_recommendation():
title = 'Fertilizer Suggestion'
return render_template('[Link]', title=title)
@ [Link]('/crop-predict', methods=['POST'])
def crop_prediction():
title = 'Harvestify - Crop Recommendation'
if [Link] == 'POST':
N = int([Link]['nitrogen'])
P = int([Link]['phosphorous'])
K = int([Link]['pottasium'])
ph = float([Link]['ph'])
rainfall = float([Link]['rainfall'])
# state = [Link]("stt")
city = [Link]("city")
if weather_fetch(city) != None:
temperature, humidity = weather_fetch(city)
data = [Link]([[N, P, K, temperature, humidity, ph, rainfall]])
my_prediction = crop_recommendation_model.predict(data)
final_prediction = my_prediction[0]
return render_template('[Link]',
prediction=final_prediction, title=title)
else:
return render_template('try_again.html', title=title)
# render fertilizer recommendation result page
@ [Link]('/fertilizer-predict', methods=['POST'])
def fert_recommend():
title = 'Harvestify - Fertilizer Suggestion'
crop_name = str([Link]['cropname'])
N = int([Link]['nitrogen'])
P = int([Link]['phosphorous'])
K = int([Link]['pottasium'])
# ph = float([Link]['ph'])
df = pd.read_csv('Data/[Link]')
nr = df[df['Crop'] == crop_name]['N'].iloc[0]
pr = df[df['Crop'] == crop_name]['P'].iloc[0]
kr = df[df['Crop'] == crop_name]['K'].iloc[0]
n = nr - N
p = pr - P
k = kr - K
temp = {abs(n): "N", abs(p): "P", abs(k): "K"}
max_value = temp[max([Link]())]
if max_value == "N":
if n < 0:
key = 'NHigh'
else:
key = "Nlow"
elif max_value == "P":
if p < 0:
key = 'PHigh'
else:
key = "Plow"
else:
if k < 0:
key = 'KHigh'
else:
key = "Klow"
response = Markup(str(fertilizer_dic[key]))
return render_template('[Link]', recommendation=response,
title=title)
if __name__ == '__main__':
[Link](debug=False)
Code for Main Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FarmSimple</title>
<link
href="[Link]
rel="stylesheet"
/>
<link
href="[Link]
y=swap"
rel="stylesheet"
/>
<link
href="[Link]
rel="stylesheet"
/>
<link
href="[Link]
beta1/dist/css/[Link]"
rel="stylesheet"
integrity="sha384-
0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/static/css/[Link]" />
</head>
<body>
<style>
body {
background-image:
url('C:\Harvestify\static\images\farm_background_1.jpg');
}
</style>
<div class="top-header-area">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12">
<div class="main-menu-wrap">
<div class="site-logo">
<a href="/">
<img src="C:\Harvestify\static\images\[Link]" alt="" />
</a>
</div>
<nav class="main-menu">
<ul>
<li class="current-list-item">
<a style="padding-left: 75px" href="/">Home</a>
</li>
<li><a href="/about">About</a></li>
<li><a href="{{ url_for('crop_recommend') }}">Predict
Crops</a></li>
<li><a href="{{ url_for('fertilizer_recommendation') }}">Get
Suggestion for Fertilizer</a></li>
<li></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="hero-area hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="hero-text">
<div class="hero-text-tablecell">
<h1>Find the Best for Your Field!</h1>
<p class="subtitle">with FarmSimple</p>
<div class="hero-btns">
<a href="{{ url_for('crop_recommend') }}" class="boxed-
btn">Predict Crops</a>
</div>
<div class="hero-btns">
<a href="{{ url_for('fertilizer_recommendation') }}"
class="boxed-btn">Get Fertilizer Suggestion</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="[Link]
beta1/dist/js/[Link]"
integrity="sha384-
pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
Code for Crop-Prediction Page
{% extends '[Link]' %} {% block body %}
<style>
html body {
background-color: #0d877d5c;
}
</style>
<!--Form Section-->
<br /><br />
<h2 style="text-align: center; margin: 0px; color: black">
<b>Find out the most suitable crop to grow in your farm</b>
</h2>
<br />
<div
style="
width: 350px;
height: 50rem;
margin: 0px auto;
color: black;
border-radius: 25px;
padding: 10px 10px;
"
>
<form method="POST" action="{{ url_for('crop_prediction') }}">
<div class="form-group">
<label for="Nitrogen" style="font-size: 17px"><b>Nitrogen</b></label>
<input
type="number"
class="form-control"
id="Nitrogen"
name="nitrogen"
placeholder="Enter the value (example:50)"
style="font-weight: bold"
required
/>
</div>
<div class="form-group">
<label for="Phosphorous" style="font-size: 17px"
><b>Phosphorous</b></label
>
<input
type="number"
class="form-control"
id="Phosphorous"
name="phosphorous"
placeholder="Enter the value (example:50)"
style="font-weight: bold"
required
/>
</div>
<div class="form-group">
<label for="Pottasium" style="font-size: 17px"><b>Pottasium</b></label>
<input
type="number"
class="form-control"
id="Pottasium"
name="pottasium"
placeholder="Enter the value (example:50)"
style="font-weight: bold"
required
/>
</div>
<div class="form-group">
<label for="ph" style="font-size: 17px"><b>ph level</b></label>
<input
type="number"
step="0.01"
class="form-control"
id="ph"
name="ph"
placeholder="Enter the value"
style="font-weight: bold"
required
/>
</div>
<div class="form-group">
<label for="Rainfall" style="font-size: 17px"
><b>Rainfall (in mm)</b></label
>
<input
type="number"
step="0.01"
class="form-control"
id="Rainfall"
name="rainfall"
placeholder="Enter the value"
style="font-weight: bold"
required
/>
</div>
<div class="form-group">
<label for="State" style="font-size: 17px"><b>State</b></label>
<select
onchange="print_city('state', [Link]);"
id="sts"
name="stt"
class="form-control"
style="font-weight: bold; color: black"
required
></select>
<br />
<label for="City" style="font-size: 17px"><b>City</b></label>
<select
id="state"
class="form-control"
name="city"
style="font-weight: bold; color: black"
required
></select>
<script language="javascript">
print_state("sts");
</script>
</div>
<div class="d-flex justify-content-center">
<button
type="submit"
class="btn btn-info"
style="
color: black;
font-weight: bold;
width: 130px;
height: 50px;
border-radius: 12px;
font-size: 21px;
"
>
Predict
</button>
</div>
</form>
</div>
<!-- Form section -->
{% endblock %}
Code for Crop-Result Page
{% extends '[Link]' %} {% block body %}
<style>
.mt-0 {
margin-top: 50 !important;
}
</style>
<body style="background-color:powderblue;"></body>
<div class="container py-2 mx-auto my-50 h-10 " style="margin: 12rem;">
<div class="row">
<div class="col-sm py-2 py-md-3">
<div class="card card-body" style="justify-content: center;">
<h1 class="text-center"><b>You should grow <i>{{ prediction }}
</i>in your farm</b></h1>
</div>
</div>
</div>
</div>
{% endblock %}
Code for Fertilizer-Advice Page
{% extends '[Link]' %} {% block body %}
<style>
html body {
background-color: rgb(206, 206, 228);
}
</style>
<!--Form Section-->
<br /><br />
<h2 style="text-align: center; margin: 0px; color: black">
<b>Get informed advice on fertilizer based on soil</b>
</h2>
<br />
<div
style="
width: 350px;
height: 40rem;
margin: 0px auto;
color: black;
border-radius: 25px;
padding: 10px 10px;
"
>
<form method="POST" action="{{ url_for('fert_recommend') }}">
<div class="form-group">
<label for="Nitrogen" style="font-size: 17px"><b>Nitrogen</b></label>
<input
type="number"
class="form-control"
id="Nitrogen"
name="nitrogen"
placeholder="Enter the value (example:50)"
style="font-weight: bold"
required
/>
</div>
<div class="form-group">
<label for="Phosphorous" style="font-size: 17px"
><b>Phosphorous</b></label
>
<input
type="number"
class="form-control"
id="Phosphorous"
name="phosphorous"
placeholder="Enter the value (example:50)"
style="font-weight: bold"
required
/>
</div>
<div class="form-group">
<label for="Pottasium" style="font-size: 17px"><b>Pottasium</b></label>
<input
type="number"
class="form-control"
id="Pottasium"
name="pottasium"
placeholder="Enter the value (example:50)"
style="font-weight: bold"
required
/>
</div>
<div class="form-group">
<label for="crop" style="font-size: 17px"
><b>Crop you want to grow</b></label
>
<select
name="cropname"
class="form-control"
id="crop"
placeholder="Select a crop"
style="font-weight: bold"
required
>
<option selected>Select crop</option>
<option>rice</option>
<option>maize</option>
<option>chickpea</option>
<option>kidneybeans</option>
<option>pigeonpeas</option>
<option>mothbeans</option>
<option>mungbean</option>
<option>blackgram</option>
<option>lentil</option>
<option>pomegranate</option>
<option>banana</option>
<option>mango</option>
<option>grapes</option>
<option>watermelon</option>
<option>muskmelon</option>
<option>apple</option>
<option>orange</option>
<option>papaya</option>
<option>coconut</option>
<option>cotton</option>
<option>jute</option>
<option>coffee</option>
</select>
</div>
<div class="d-flex justify-content-center">
<button
type="submit"
class="btn btn-info"
style="
color: black;
font-weight: bold;
width: 130px;
height: 50px;
border-radius: 12px;
font-size: 21px;
"
>
Predict
</button>
</div>
</form>
</div>
{% endblock %}
Code for Fertilizer-result page
{% extends '[Link]' %} {% block body %}
<div class="container py-2 mx-auto my-50 h-10 " style="margin: 9rem;">
<div class="row">
<div class="col-sm py-2 py-md-3">
<div class="card card-body" style="justify-content: center;
background-color:blanchedalmond">
<p class="text-center" style="color: black; font-size:
20px;">{{ recommendation }}</p>
</div>
</div>
</div>
</div>
{% endblock %}
Code for Wrong Parameters page
{% extends '[Link]' %} {% block body %}
<div class="container py-2 mx-auto my-50 h-10 text-center" style="margin:
9rem;">
<div class="row">
<div class="col-sm py-2 py-md-3">
<div class="card card-body" style="justify-content: center; background-
color:blanchedalmond">
<h1 class="text-center" style="color: black; font-size:
20px;"><b>Sorry we couldn't process your request
currently. <br><br> Please enter correct
parameters</b></h1><br></h1>
<a href="{{ url_for('home') }}">
<button type="submit" class="btn btn-info text-center" style="
color: black;
font-weight: bold;
margin: 1rem;">
Try again
</button>
</a>
</div>
</div>
</div>
</div>
{% endblock %}