Image Scrapper Deployment

Rudra Pratap Oct 12 2020 · 3 min read
Share this

1. At first create ImageScrapper folder in your system.

2. Inside that create folders:

’static’, and ‘templates’, and then create 'css' folder inside  static folder. It should look like this:

3. a) Now open pycharm and open the folder and create 'app.py' by pressing alt+insert and then on python file just like 

Press enter now you will have your app.py open in your console write the code from github link provided in the dashboard.

b) If you are using windows in the add .exe after ./chromedriver just like

4.  Inside the folder ‘templates’, create HTML files called: 'index.html', ‘ShowImage.html’, 'base.html', and 'results.html' using the above shown procedure in step 3a and just selecting html in place of python and then creating it. Write these pieces of codes in:

In base.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% block head %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>

In index.html

{% extends 'base.html' %}

{% block head %}

<title>Search Page</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% endblock %}

{% block body %}
<div class="content">
<h1 style="text-align: center">Search</h1>

<div class="form">
<form action="/review" method="POST">
<input type="text" name="content" id="content">
<input type="submit" value="Search">
</form>
</div>
</div>
{% endblock %}

In results.html

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Review Page</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">


</head>

<body>

<div class="table-users">
<div class="header">Reviews</div>

<table cellspacing="0">
<tr>
<th>Product</th>
<th>Name</th>
<th>Rating</th>
<th>Comment Heading</th>
<th width="230">Comments</th>
</tr>
{% for review in reviews %}
<tr>
<td>{{review['Product']}}</td>
<td>{{review['Name']}}</td>
<td>{{review['Rating']}}</td>
<td>{{review['CommentHead']}}</td>
<td>{{review['Comment']}} </td>
{% endfor %}
</table>
</div>



</body>

</html>

In ShowImage.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
</html>

5. Create two css files: 'main.css', 'style.css' inside css folder and write the following code:

In main.css:

body, html {
margin: 0;
font-family: sans-serif;
}

.content {
margin: 0 auto;
width: 400px;
}

table, td, th {
border: 1px solid #aaa;
}

table {
border-collapse: collapse;
width: 100%;
}

th {
height: 30px;
}

td {
text-align: center;
padding: 5px;
}

.form {
margin-top: 20px;
}

#content {
width: 70%;
}

In style.css:

body {
background-color: #91ced4;
}
body * {
box-sizing: border-box;
}

.header {
background-color: #327a81;
color: white;
font-size: 1.5em;
padding: 1rem;
text-align: center;
text-transform: uppercase;
}

img {
border-radius: 50%;
height: 60px;
width: 60px;
}

.table-users {
border: 1px solid #327a81;
border-radius: 10px;
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
max-width: calc(100% - 2em);
margin: 1em auto;
overflow: hidden;
width: 800px;
}

table {
width: 100%;
}
table td, table th {
color: #2b686e;
padding: 10px;
}
table td {
text-align: center;
vertical-align: middle;
}
table td:last-child {
font-size: 0.95em;
line-height: 1.4;
text-align: left;
}
table th {
background-color: #daeff1;
font-weight: 300;
}
table tr:nth-child(2n) {
background-color: white;
}
table tr:nth-child(2n+1) {
background-color: #edf7f8;
}

@media screen and (max-width: 700px) {
table, tr, td {
display: block;
}

td:first-child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100px;
}
td:not(:first-child) {
clear: both;
margin-left: 100px;
padding: 4px 20px 4px 90px;
position: relative;
text-align: left;
}
td:not(:first-child):before {
color: #91ced4;
content: '';
display: block;
left: 0;
position: absolute;
}
td:nth-child(2):before {
content: 'Name:';
}
td:nth-child(3):before {
content: 'Email:';
}
td:nth-child(4):before {
content: 'Phone:';
}
td:nth-child(5):before {
content: 'Comments:';
}

tr {
padding: 10px 0;
position: relative;
}
tr:first-child {
display: none;
}
}
@media screen and (max-width: 500px) {
.header {
background-color: transparent;
color: white;
font-size: 2em;
font-weight: 700;
padding: 0;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

img {
border: 3px solid;
border-color: #daeff1;
height: 100px;
margin: 0.5rem 0;
width: 100px;
}

td:first-child {
background-color: #c8e7ea;
border-bottom: 1px solid #91ced4;
border-radius: 10px 10px 0 0;
position: relative;
top: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
width: 100%;
}
td:not(:first-child) {
margin: 0;
padding: 5px 1em;
width: 100%;
}
td:not(:first-child):before {
font-size: .8em;
padding-top: 0.3em;
position: relative;
}
td:last-child {
padding-bottom: 1rem !important;
}

tr {
background-color: white !important;
border: 1px solid #6cbec6;
border-radius: 10px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
margin: 0.5rem 0;
padding: 0;
}

.table-users {
border: none;
box-shadow: none;
overflow: visible;
}
}

Your folder structure should look like this in your pycharm:

7. Now we will be creating a python interpreter for our project click on files>Settings and then follow as shown in the pic:

Press add and then select conda environment and write your environment name as ImageScrapperNew as shown in the image:

Press ok and then press apply and then ok.

8.Create a requirements.txt in your ImageScrapper folder and then write the following in it:

9.Open your terminal in pycharm and write the following command to activate your environment if not activated(to be on the safer side write it):

10. Now write pip install -r requirements.txt to install all the dependencies required for the project.

Now write pip install selenium 

11. Now open your google chrome click on the three dots on the right hand side then on help then about google chrome then you will get a page like this:

See the version and download the closest chromedriver version from the link https://chromedriver.storage.googleapis.com/index.html . Mine chrome version was  86.0.4240.75 so I downloaded 

Download the win32 version extract it and then keep the file in the ImageScrapper folder.

Your folder should look like this

12. Open pycharm and then open app.py and then press right click and then run app.

For the first time it may ask for access, allow it.

The pics will be downloaded and will be available in the images folder in the ImageScrapper folder.

13. To download any other image just change search term in your app.py as per your wish.

Your Image scrapper is ready to use.

Comments
Read next