Innovative Summer Project: Converging Technologies in Docker, AWS, CGI, JS/HTML, ML, and Computer Vision

Explore the GitHub Repository:
Frontend, Backend, and Python Tkinter GUI Code All in One Place!

GitHub - drishangupta/project_web

The following are the libraries which we imported in python for the TKinter GUI. You need to download the necessary libraries using pip install <library name>

import tkinter as tk
from tkinter import ttk
import os
import pywhatkit as pwk
from datetime import datetime
import smtplib, ssl
import requests
import cv2
import boto3
import random
from cvzone.HandTrackingModule import HandDetector
import time
import pyttsx3
import openai
from tkinter import *
from math import *
import tkinter
from tkinter.messagebox import *
from tkinter.filedialog import *
import speech_recognition as sr
import YouTubeMusicAPI

We have hosted the front end and the back end on amazon ec2 service using apache server. We can yum install httpd for apache server and then start the service.

After you have configured apache server you need to put your frontend in /var/www/html and backend in /var/www/cgi-bin. Then to give apache the permission to execute commands which require root user acccess, you need to give it in the sudoers file in the /etc folder by adding

apache ALL=(ALL) NOPASSWD:ALL

-anywhere in the sudoers file, This gives apache the power to run more powerful commands on our server.

Each file in our backend performs a different task and a lot of them are there in my previous posts.

In this section I will be explaining you how we can catch data using cgi-bin. To receive data you must first send it through your frontend using variables. The following is a simple form which sends achrs, tvhrs & fridgehrs as variables to the backend file “bill.py” which you can check out in the attached GitHub repository.

<form action="http://13.233.92.181/cgi-bin/bill.py?achrs&tvhrs&fridgehrs" method="get">
      <div class="form-group">
        <label for="acHours">AC Hours:</label>
        <input type="number" name="achrs" id="acHours" required />
      </div>
      <div class="form-group">
        <label for="tvHours">TV Hours:</label>
        <input type="number" name="tvhrs" id="tvHours" required />
      </div>
      <div class="form-group">
        <label for="fridgeHours">Fridge Hours:</label>
        <input type="number" name="fridgehrs" id="fridgeHours" required />
      </div>
      <button class="submit-button" type="submit">Submit</button>
    </form>

The following is how you can use the sent data from the front end in the backend.

import cgi
data=cgi.FieldStorage()
achrs=data.getvalue("achrs")
tvhrs=data.getvalue("tvhrs")
fridgehrs=data.getvalue("fridgehrs")

Now the data from the front end is stored in different variable.

Now I will show you how the project looks like and some of its features
First up the python tkinter menu:

This is how it looks like and you may have noticed how there is a scrollbar in it aswell. The scrollbar provides you with the ability to add as many funtions to the python code as you want without worrying about the lack of space or compromizing on the size of buttons.
There are functions linked to buttons which use amazon aws services like rekognition, translate etc. I hope you guys check out the whole project.
There is a function that plays songs on youtube music, it can even work if you just give it a lyric of a song.
On the top right side is a pomodoro counter to keep your productivity to its best!
Then the short button at the top is my webapp which looks like this:

The buttons are self explanatory and the icons next to them are possible through the use of css. Link to the icon pack and usage in the button. Again you can find all of this and more in my github repository.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 <button class="button" onclick="navigateTo('file.html')">
        <i class="fas fa-upload button-icon"></i>
        To Upload to s3
 </button>

The page is also designed in a way where it can automatically scale depending on the device it is accessed on. To accomplish that, I have used the following code in html head section

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

The next picture is of linux command runner button, after clicking each button, the page redirects us to the next page using navigateTo function in javascript.

The above page uses ajax to print output on the page itself . You can find the ajax and everything for this page in the frnted.html in the html folder in the github link attached.

There is so much more to explain but the post would get unbearably long if I have to explain everything.

There is only one crucial thing left for me to tell and that is you need to disable or allow certain systems to access your public ip assigned to you by EC2 in aws.

The website link:

My Enhanced Web App

At last, I would like to express my gratitude to LinuxWorld for providing me the opportunity to work on this amazing project and honing my technical skills to the next level.