From a5d2de661c396a9384c165c0566a995cba8f0f7f Mon Sep 17 00:00:00 2001 From: adarsh Date: Fri, 24 May 2024 18:26:49 +0530 Subject: [PATCH] fixed web page bugs --- django-backend/mlApi/bert_darkp.py | 7 +- django-backend/mlApi/data_preprocess.py | 31 ------- django-backend/mlApi/models.py | 5 +- django-backend/mlApi/predict_darkp.py | 2 +- django-backend/mlApi/scrapingTerms.py | 2 + django-backend/mlApi/views.py | 14 +-- django-backend/static/css/report.css | 2 +- django-backend/static/css/style.css | 85 +++--------------- .../static/img/{4560 1.png => home-img.png} | Bin django-backend/static/js/app.js | 82 ++++++++--------- django-backend/templates/base.html | 5 +- django-backend/templates/index.html | 3 +- 12 files changed, 78 insertions(+), 160 deletions(-) rename django-backend/static/img/{4560 1.png => home-img.png} (100%) diff --git a/django-backend/mlApi/bert_darkp.py b/django-backend/mlApi/bert_darkp.py index dcb0005..12b358b 100644 --- a/django-backend/mlApi/bert_darkp.py +++ b/django-backend/mlApi/bert_darkp.py @@ -1,4 +1,4 @@ -# Implementing TowardsDS's BERT model for dark pattern detection +# Implementing TowardsDS's BERT model for dark pattern detection traning for mulit-class classification import torch from tqdm import tqdm @@ -151,7 +151,7 @@ def accuracy_per_class(preds, labels): ## TraningLoop for BERT -# for loading cpu model on gpu +# for loading model on gpu device = torch.device("cuda" if torch.cuda.is_available() else "cpu") @@ -163,6 +163,8 @@ def accuracy_per_class(preds, labels): torch.manual_seed(seed_val) torch.cuda.manual_seed_all(seed_val) +# evaluating the model + def evaluate(dataloader_val): model.eval() @@ -230,6 +232,7 @@ def evaluate(dataloader_val): progress_bar.set_postfix({'training_loss': '{:.3f}'.format(loss.item()/len(batch))}) + # saving the model after each epoch (name as per your choice) torch.save(model.state_dict(), f'fine_tuned_bert/finetuned_BERT_epoch_{epoch}.model') tqdm.write(f'\nEpoch {epoch}') diff --git a/django-backend/mlApi/data_preprocess.py b/django-backend/mlApi/data_preprocess.py index acb9a03..f5e6ac7 100644 --- a/django-backend/mlApi/data_preprocess.py +++ b/django-backend/mlApi/data_preprocess.py @@ -36,37 +36,6 @@ print(dark_pattern_counts3) -# Alternatively, you can use df.isnull().sum() - -# Print or use the information about NaN values -# print(nan_values) - -# print(uniqueVal1) -# print(uniqueVal3) - -# new_df = df[['text', 'Pattern Category']] -# new_df.to_csv('F:/backup-kali/codeFiles/projects/cognigaurd/api/datasets/new_dp_dataset.csv',sep="\t", index=False) - - -# import pandas as pd - -# output_file_path = "F:/backup-kali/codeFiles/projects/cognigaurd/api/datasets/new_dp_dataset.csv" - -# # Read the TSV file -# df = pd.read_csv(file_path2, sep='\t') - -# # Write the DataFrame to a CSV file -# df.to_csv(output_file_path, index=False) - -# print("TSV file converted to CSV successfully!") - -# df3 = pd.read_csv(output_file_path) -# dark_pattern_counts3 = df3['Category'].value_counts() -# print(dark_pattern_counts3) - - -##3 checking for incosistency in dataset - import csv diff --git a/django-backend/mlApi/models.py b/django-backend/mlApi/models.py index e771089..fb17a04 100644 --- a/django-backend/mlApi/models.py +++ b/django-backend/mlApi/models.py @@ -2,7 +2,7 @@ # Create your models here. - +# beta feature - saving the transparency score to the database class WebsiteTransparencyScore(models.Model): website_name = models.CharField(max_length=255, unique=True) transparency_score = models.FloatField() @@ -12,7 +12,7 @@ class WebsiteTransparencyScore(models.Model): def __str__(self): return f"{self.website_name} - Transparency Score: {self.transparency_score}" - +# saving dark pattern data to the database class DarkPatternsData(models.Model): website_url = models.URLField() @@ -23,6 +23,7 @@ def __str__(self): return f"{self.website_url} - Dark Pattern: {self.dark_pattern_label}" +# saving each request to the database class DpRequest(models.Model): diff --git a/django-backend/mlApi/predict_darkp.py b/django-backend/mlApi/predict_darkp.py index d6aabbe..e9b978e 100644 --- a/django-backend/mlApi/predict_darkp.py +++ b/django-backend/mlApi/predict_darkp.py @@ -50,7 +50,7 @@ def find_dark_pattern(text_predict): -# # text_to_predict = "Hello my name is adarsh and my friend name is aman , he is only on sale for the next two days. " +# # text_to_predict = "Hello my name is adarsh and my friend name is aman " # welcomeMsg = """******* Welcome to Dark Pattern Detector ********""" # text_to_predict = input("Enter the the text to find Dark Pattern : ") diff --git a/django-backend/mlApi/scrapingTerms.py b/django-backend/mlApi/scrapingTerms.py index 090ce1b..ca2d865 100644 --- a/django-backend/mlApi/scrapingTerms.py +++ b/django-backend/mlApi/scrapingTerms.py @@ -1,3 +1,5 @@ +# This script scrapes the terms and conditions of the websites mentioned in the 'websites' list and saves the data to a CSV file. + import requests from bs4 import BeautifulSoup import csv diff --git a/django-backend/mlApi/views.py b/django-backend/mlApi/views.py index 86f9c80..5144f8c 100644 --- a/django-backend/mlApi/views.py +++ b/django-backend/mlApi/views.py @@ -105,13 +105,13 @@ class MessageListView(generics.ListAPIView): ## You need to ensure that it doesn't call the dpData function if the dpCond is False # Fetching urls from model - # dpUrls = DpRequest.objects.all() - # urlLen = len(dpUrls) - # myDpUrl = dpUrls[urlLen-1].url - # print(dpUrls) - # myOutput = dpData(myDpUrl) - # print(myOutput) - # dpCond = False + dpUrls = DpRequest.objects.all() + urlLen = len(dpUrls) + myDpUrl = dpUrls[urlLen-1].url + print(dpUrls) + myOutput = dpData(myDpUrl) + print(myOutput) + dpCond = False diff --git a/django-backend/static/css/report.css b/django-backend/static/css/report.css index 07423ff..18a99a4 100644 --- a/django-backend/static/css/report.css +++ b/django-backend/static/css/report.css @@ -3,7 +3,7 @@ } .content-section { gap: 3rem; - padding-left: 30rem; + /* padding-left: 30rem; */ } .heading-section { display: flex; diff --git a/django-backend/static/css/style.css b/django-backend/static/css/style.css index 8d4ed48..b5b2bb4 100644 --- a/django-backend/static/css/style.css +++ b/django-backend/static/css/style.css @@ -17,16 +17,7 @@ --font-large: 3rem; --font-ex-large: 3.5rem; } -@media (max-width: 768px) { - :root { - --font-ex-small: 0.25rem; - --font-small: 0.5rem; - --font-mid-medium: 1rem; - --font-medium: 1.25rem; - --font-mid-large: 1.75rem; - --font-large: 2rem; - } -} + a { text-decoration: none; } @@ -110,11 +101,7 @@ a { align-items: center; gap: 5rem; margin: 4rem 0; - @media (max-width: 768px) { - margin: 5vh 0 !important; - flex-direction: column; - gap: 3rem; - } + } .blue-text { color: var(--color-primary); @@ -122,10 +109,8 @@ a { /* main section */ .main-section { display: flex; - justify-content: center; - @media (max-width: 768px) { - flex-direction: column; - } + /* justify-content: center; */ + /* gap: 2rem; padding: 0 2.87rem; */ } @@ -136,10 +121,7 @@ a { align-items: center; margin: 6rem 2rem 2rem 4rem; gap: 8rem; - @media (max-width: 768px) { - margin: 10vh 10vw; - gap: 15vh; - } + } /* navbar */ .navbar { @@ -158,27 +140,12 @@ a { background: white; gap: 2rem; height: 558px; - @media (max-width: 768px) { - flex-direction: row; - height: 100px; - padding: 0 5vw; - /* - width: 100%; - position: fixed; - top: 0; - left: 0; - z-index: 100; - transform: translateX(-100%); - transition: 0.5s; */ - } + } .navbar__logo img { height: 5.75rem; width: 9.55rem; - @media (max-width: 768px) { - height: 5rem; - width: 8.5rem; - } + } .navbar__links { display: flex; @@ -186,17 +153,7 @@ a { align-items: flex-start; gap: 2rem; width: 14rem; - @media (max-width: 768px) { - position: fixed; - z-index: 3; - background-color: white; - padding: 3vh 5vw; - border-radius: 10px; - right: -100vw; - top: 25vh; - border: 1px solid black; - transition: all 0.5s ease-in-out; - } + } .show { transform: translateX(-100vw); @@ -217,9 +174,7 @@ a { } .welcome-img { height: 40vh; - @media (max-width: 768px) { - height: 25vh; - } + } .welcome-btns { display: flex; @@ -246,9 +201,7 @@ a { } .cogni-about img { height: 50vh; - @media (max-width: 768px) { - height: 30vh; - } + } /* footer */ footer { @@ -275,11 +228,7 @@ footer { color: white; justify-content: space-evenly; align-items: center; - @media (max-width: 768px) { - flex-direction: column; - align-items: flex-start; - gap: 10vh; - } + } .footer-text a { color: white; @@ -310,9 +259,7 @@ footer { width: 50%; flex-direction: column; gap: 1rem; - @media (max-width: 768px) { - width: auto; - } + } .cogni-desc p { letter-spacing: 0.5px; @@ -323,9 +270,7 @@ footer { display: flex; flex-direction: column; gap: 2rem; - @media (max-width: 768px) { - gap: 1.5rem; - } + } .cogni-links div:first-child { display: flex; @@ -390,9 +335,7 @@ footer { cursor: pointer; padding: 0; z-index: 10; - @media (max-width: 768px) { - display: flex; - } + } .line { diff --git a/django-backend/static/img/4560 1.png b/django-backend/static/img/home-img.png similarity index 100% rename from django-backend/static/img/4560 1.png rename to django-backend/static/img/home-img.png diff --git a/django-backend/static/js/app.js b/django-backend/static/js/app.js index 9281978..e915f1f 100644 --- a/django-backend/static/js/app.js +++ b/django-backend/static/js/app.js @@ -1,45 +1,45 @@ -const footer = document.querySelector('footer') -const navbar = document.querySelector('.navbar') -const contentScetion = document.querySelector('.content-section') -let flag = true -document.addEventListener('scroll', () => { - console.log( - window.scrollY, - window.innerHeight, - window.scrollY + window.innerHeight, - footer.offsetTop - ) - if ( - window.scrollY + window.innerHeight >= footer.offsetTop && - flag === true - ) { - navbar.style.position = 'absolute' - navbar.style.top = footer.offsetTop - navbar.scrollHeight - 50 + 'px' - flag = false - } else if ( - flag === false && - window.scrollY + window.innerHeight < footer.offsetTop - ) { - navbar.style.position = 'fixed' - navbar.style.top = null - flag = true - } -}) +// const footer = document.querySelector('footer') +// const navbar = document.querySelector('.navbar') +// const contentScetion = document.querySelector('.content-section') +// let flag = true +// document.addEventListener('scroll', () => { +// console.log( +// window.scrollY, +// window.innerHeight, +// window.scrollY + window.innerHeight, +// footer.offsetTop +// ) +// if ( +// window.scrollY + window.innerHeight >= footer.offsetTop && +// flag === true +// ) { +// navbar.style.position = 'absolute' +// navbar.style.top = footer.offsetTop - navbar.scrollHeight - 50 + 'px' +// flag = false +// } else if ( +// flag === false && +// window.scrollY + window.innerHeight < footer.offsetTop +// ) { +// navbar.style.position = 'fixed' +// navbar.style.top = null +// flag = true +// } +// }) // scrllY + innerHeight = offsetHeight // menu transition -const menu = document.querySelector('.hamburger-menu ') -const sideBar = document.querySelector('.navbar__links') -const hamburgerMenu = document.querySelector('.hamburger-menu') -const overlay = document.querySelector('#overlay') +// const menu = document.querySelector('.hamburger-menu ') +// const sideBar = document.querySelector('.navbar__links') +// const hamburgerMenu = document.querySelector('.hamburger-menu') +// const overlay = document.querySelector('#overlay') -hamburgerMenu.addEventListener('click', () => { - hamburgerMenu.classList.toggle('change') - overlay.style.display = hamburgerMenu.classList.contains('change') - ? 'block' - : 'none' - hamburgerMenu.classList.toggle('change') -}) -menu.addEventListener('click', () => { - sideBar.classList.toggle('show') -}) +// hamburgerMenu.addEventListener('click', () => { +// hamburgerMenu.classList.toggle('change') +// overlay.style.display = hamburgerMenu.classList.contains('change') +// ? 'block' +// : 'none' +// hamburgerMenu.classList.toggle('change') +// }) +// menu.addEventListener('click', () => { +// sideBar.classList.toggle('show') +// }) diff --git a/django-backend/templates/base.html b/django-backend/templates/base.html index 71b6d99..48a2037 100644 --- a/django-backend/templates/base.html +++ b/django-backend/templates/base.html @@ -73,7 +73,7 @@ Detected Dark Patterns - +
@@ -106,8 +106,7 @@

CogniGuard

-

A web extension which is capable of identifying dark patterns and compatible across all popular - web browsers like Chrome, Firefox and Safari. A dedicated website for crowdsourced database +

A web extension which is capable of identifying dark patterns A dedicated website for crowdsourced database built on Django and an API for communicating with JavaScript extension and having ML model.

diff --git a/django-backend/templates/index.html b/django-backend/templates/index.html index d4537b9..a6ee6a9 100644 --- a/django-backend/templates/index.html +++ b/django-backend/templates/index.html @@ -7,7 +7,8 @@ {% block content %}
-
shield-and-security
+
shield-and-security
+

Welcome to Cogniguard