From a4118e2357a0ee699e7d33eb15122b647b0f5784 Mon Sep 17 00:00:00 2001 From: Piotr Szkudlarek Date: Wed, 6 Dec 2023 18:12:31 +0100 Subject: [PATCH] Add login and sign up logic to the app --- PlanktonDetector/DetectionApp/urls.py | 12 +- PlanktonDetector/DetectionApp/views.py | 104 +++++++++++++----- PlanktonDetector/PlanktonDetector/settings.py | 8 +- PlanktonDetector/db.sqlite3 | Bin 143360 -> 143360 bytes .../static/DetectionApp/css/base.css | 40 +++++++ .../static/DetectionApp/css/login_signup.css | 33 ++++++ .../css/{styles.css => upload.css} | 19 ++-- PlanktonDetector/templates/base.html | 30 +++++ PlanktonDetector/templates/login_signup.html | 25 +++++ PlanktonDetector/templates/upload.html | 22 ++-- 10 files changed, 234 insertions(+), 59 deletions(-) create mode 100644 PlanktonDetector/static/DetectionApp/css/base.css create mode 100644 PlanktonDetector/static/DetectionApp/css/login_signup.css rename PlanktonDetector/static/DetectionApp/css/{styles.css => upload.css} (74%) create mode 100644 PlanktonDetector/templates/base.html create mode 100644 PlanktonDetector/templates/login_signup.html diff --git a/PlanktonDetector/DetectionApp/urls.py b/PlanktonDetector/DetectionApp/urls.py index 6b31a57..160f192 100644 --- a/PlanktonDetector/DetectionApp/urls.py +++ b/PlanktonDetector/DetectionApp/urls.py @@ -1,8 +1,12 @@ -from django.urls import path +from django.urls import path, include from . import views from django.conf.urls.static import static from django.conf import settings +from django.contrib.auth import urls -urlpatterns = [path("detect/", views.view, name="detect")] + static( - settings.MEDIA_URL, document_root=settings.MEDIA_ROOT -) +urlpatterns = [ + path("detect/", views.DetectView.as_view(), name="detect"), + path("login/", views.LoginView.as_view(), name="login"), + path("logout/", views.logout_view, name="logout"), + path("register/", views.SignupView.as_view(), name="signup"), +] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) diff --git a/PlanktonDetector/DetectionApp/views.py b/PlanktonDetector/DetectionApp/views.py index 8ed1608..eb2bcf5 100644 --- a/PlanktonDetector/DetectionApp/views.py +++ b/PlanktonDetector/DetectionApp/views.py @@ -1,37 +1,85 @@ -from django.shortcuts import render +from django.shortcuts import render, redirect +from django.views import View from .forms import DetectForm -from .models import DetectImage -from django.core.files.uploadedfile import SimpleUploadedFile from django.conf import settings from ultralytics import YOLO +from django.contrib.auth.forms import AuthenticationForm, UserCreationForm +from django.contrib.auth import authenticate, login, logout # Create your views here. MODEL = YOLO("best.pt") -def view(request): - if request.method == "GET": - form = DetectForm() - return render(request, "upload.html", {"form": form}) - form = DetectForm(request.POST, request.FILES) - if form.is_valid(): - image = form.save() - MODEL.predict( - image.image.path, - save=True, - project=settings.MEDIA_ROOT, - name=f"{image.image.name}_predicted", - imgsz=[640, 640], - ) - print(f"{settings.BASE_DIR}/predicted2/{image.image.name}") - saved = form.is_valid() - return render( - request, - "upload.html", - { - "img_saved": saved, - "img_path": f"{image.image.name}_predicted/{image.image.name.split('/')[-1]}", - }, - ) - else: +class DetectView(View): + form_class = DetectForm + template_name = "upload.html" + + def get(self, request, *args, **kwargs): + form = self.form_class() return render(request, "upload.html", {"form": form}) + + def post(self, request, *args, **kwargs): + form = self.form_class(request.POST, request.FILES) + if form.is_valid(): + image = form.save() + MODEL.predict( + image.image.path, + save=True, + project=settings.MEDIA_ROOT, + name=f"{image.image.name}_predicted", + imgsz=[640, 640], + ) + saved = form.is_valid() + return render( + request, + "upload.html", + { + "img_saved": saved, + "img_path": f"{image.image.name}_predicted/{image.image.name.split('/')[-1]}", + }, + ) + else: + return render(request, "upload.html", {"form": form}) + + +class LoginView(View): + form_class = AuthenticationForm + template_name = "login_signup.html" + + def get(self, request, *args, **kwargs): + form = self.form_class() + return render(request, self.template_name, {"form": form}) + + def post(self, request, *args, **kwargs): + form = self.form_class(data=request.POST) + if form.is_valid(): + user = authenticate( + username=form.cleaned_data["username"], + password=form.cleaned_data["password"], + ) + if user is not None: + login(request, user) + return redirect("detect") + return render(request, self.template_name, {"form": form}) + + +class SignupView(View): + form_class = UserCreationForm + template_name = "login_signup.html" + + def get(self, request, *args, **kwargs): + form = self.form_class() + return render(request, self.template_name, {"form": form, "signup": True}) + + def post(self, request, *args, **kwargs): + form = self.form_class(data=request.POST) + if form.is_valid(): + user = form.save() + login(request, user) + return redirect("detect") + return render(request, self.template_name, {"form": form, "signup": True}) + + +def logout_view(request): + logout(request) + return redirect("detect") diff --git a/PlanktonDetector/PlanktonDetector/settings.py b/PlanktonDetector/PlanktonDetector/settings.py index 5f19555..66a1b06 100644 --- a/PlanktonDetector/PlanktonDetector/settings.py +++ b/PlanktonDetector/PlanktonDetector/settings.py @@ -56,7 +56,7 @@ ROOT_URLCONF = "PlanktonDetector.urls" TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", - "DIRS": [os.path.join(BASE_DIR, 'templates')], + "DIRS": [os.path.join(BASE_DIR, "templates")], "APP_DIRS": True, "OPTIONS": { "context_processors": [ @@ -119,14 +119,16 @@ USE_TZ = True STATIC_URL = "static/" -STATIC_ROOT = '' +STATIC_ROOT = "" -STATICFILES_DIRS = ('static',) +STATICFILES_DIRS = ("static",) MEDIA_ROOT = BASE_DIR / "uploaded_media" MEDIA_URL = "media/" +LOGOUT_REDIRECT_URL = "detect/" + # Default primary key field type # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field diff --git a/PlanktonDetector/db.sqlite3 b/PlanktonDetector/db.sqlite3 index 86639401a72dd23833c5c8e914fb98953bc8ee53..6eb5dc89679c3b195a10e33419106bb32ea85911 100644 GIT binary patch delta 1714 zcma)5OK96>9M{8aX=3SHvp~waJi4Ym3}Szhte3aK96OE^TS*+-v7N1RY*~(9vK(9T zi-9ZFo(9{}90EP;P0(Q)9P~mq82xzk(mZm!Jkd0-u9e$D9MZG5Z9%xm&Z( zTt*ONw0i~~Vi=!7lZKv67*(Z$kK;Il?p?^DukQa~r{FM7P9Pvbenn1nOh6LmBu*ga z71z)>K@9B{wR3GH5SkBYsTHphuEeG+IMs^$Yr?o4E@5}H$4Ix8@qrh9?% zEqV%)V@?TrRcV9r%k|Xa6&ljaEJe>kZkpnq6m&Xh8^^OE$0bXOo;+&ofHVso<|H&|wo9o@2S) zU$l$EICzYJr{FR8egACvCopyfA4mHU@!ngX9ov7}CSD;eL<1ookZIx%qG1hpOpg^q zXFBFI+SV-=sp(3|MOlMdDx>H|UTx{cDun4RH79SE*-Xk&R~YD|DlR?haSHRpeUu{%C;-EzLwU- z)z$1OwPMJgV4}IOVMvZcvYeCQZKBB1Jk+tCY#~#iMNQB(wWX$ujjC!eoT3+*RJNF7 zn^b}QPuAn~u!?t$PXy-@!QxVmjXDYeF-w=kNZjxD!vu_aqtWQ9uPBA$hh$kNOLb)h zO62z+eD)?vT7ZgxpTSL_f&*~SF-3r0+A%M*XK)F9QU8`6s9V>GZQ(u8V7Q~QVHa`f z3{`5WWw|M{X=eMwCwC8?+(pm5(=~Vl0gu2va0lD~nT{C+=+utu{MAX^g&qnwaFv!L z#sih(M~nxm!44k%jlMBWkB?Lk@D2DF1i&!)E%^y4kz>SP#698;ah>oJqt@T7Us!Ki zQ&!rFjeI|Hd!*7a-yUh(HgQBQ7n7xeu9fUPlXi->L(ZP8rZfMZgdoI3G0NHUsC7zt5pef;|;;@f?Zgpr{G8 zZy%F5-Dv)+vbjD2^CM;P$>gi;Z1k ly8jTx(u~7aE^YDa$3Xua#m4u(dkuTZ(t{mbpT$1F{sHd1^dbNN delta 254 zcmZp8z|ru4V}dke^+XwG#_Ej;i{wRCFtGDSFz~du^i|Y&xR~WR6H7}n;!BHDix?Ofgn<|th%+-AGfr2`U=-ebS>Morjgdc|fj@p@ zV<`XR`20K(LtP_71w%6{6ALRN3q39R~h8n*|Fl@i*UDzx~d7Mhyp`;3Ee9M?hUS__sg$�sz s!^7Lcz<->-kKc!%i|+(qKc6q32=5o(!@Ns)TQ)YP@NRF>WvXEU0D7ZKd;kCd diff --git a/PlanktonDetector/static/DetectionApp/css/base.css b/PlanktonDetector/static/DetectionApp/css/base.css new file mode 100644 index 0000000..e665d26 --- /dev/null +++ b/PlanktonDetector/static/DetectionApp/css/base.css @@ -0,0 +1,40 @@ +body, html{ + height:100%; + margin: 0px 0px 0px 0px; + display:flex; + justify-content: center; + flex-direction: column; + font-family:'Inter', sans-serif; +} + +.top-menu a{ + text-decoration: none; + margin-right: 2rem; + color:black; +} + +.top-menu{ + display: flex; + flex-direction: row; + height: 5%; + justify-content:flex-end; + align-items: center; + background-color:lightgray; + margin-bottom:5px; + border: grey solid; + border-width: 0px 2px 2px 2px; +} + + +.footer{ + display:flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 5px; + background-color: lightgray; + border: grey solid; + border-width: 2px 2px 0px 2px; + justify-content: space-evenly; + align-items: center; +} diff --git a/PlanktonDetector/static/DetectionApp/css/login_signup.css b/PlanktonDetector/static/DetectionApp/css/login_signup.css new file mode 100644 index 0000000..934c4c5 --- /dev/null +++ b/PlanktonDetector/static/DetectionApp/css/login_signup.css @@ -0,0 +1,33 @@ +.form_div{ + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.form_div input,label, p{ + font-size: 1.2rem; + margin-bottom: 5px; +} + +.form{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + border: grey solid; + border-width: 4px; + border-radius: 10%; + padding: 5%; + background-color: lightgray; +} + +.form span{ + display: none; +} + +#submit{ + background-color: chartreuse; +} diff --git a/PlanktonDetector/static/DetectionApp/css/styles.css b/PlanktonDetector/static/DetectionApp/css/upload.css similarity index 74% rename from PlanktonDetector/static/DetectionApp/css/styles.css rename to PlanktonDetector/static/DetectionApp/css/upload.css index d1913e2..efd0898 100644 --- a/PlanktonDetector/static/DetectionApp/css/styles.css +++ b/PlanktonDetector/static/DetectionApp/css/upload.css @@ -1,32 +1,34 @@ -html, body, form{ + +form{ height:100%; - width: 100%; + width:100%; display:flex; - flex-direction: row; - font-family:'Inter', sans-serif; + flex-direction:row; + margin:auto; } + .side_menu{ display: flex; - justify-content: flex-start; + justify-content: center; align-items:center; flex-direction: column; width: 25%; background-color: lightgray; + border: grey solid; + border-width: 2px; } #description{ font-size: 40px; - margin-left: 10px; - margin-right: 10px; + text-align: center; } #submit{ margin-bottom: 40px; background-color: chartreuse; margin-top: auto; - justify-self: flex-end; height: 50px; width: 80%; border-radius: 25px; @@ -44,7 +46,6 @@ html, body, form{ .upload_button{ - justify-self: right; display:flex; justify-content: flex-start; align-items: flex-start; diff --git a/PlanktonDetector/templates/base.html b/PlanktonDetector/templates/base.html new file mode 100644 index 0000000..8ddf9b5 --- /dev/null +++ b/PlanktonDetector/templates/base.html @@ -0,0 +1,30 @@ +{% load static %} + + + + + + + + + + + {%block extracss%}{%endblock extracss%} + Plankton Detector + + +
+ Placeholder + Predict + {% if user.is_authenticated %} + Logout {{user}} + {%else%} + Login + {%endif%} +
+ {%block content%}{%endblock content%} +
+

Footer

+
+ + \ No newline at end of file diff --git a/PlanktonDetector/templates/login_signup.html b/PlanktonDetector/templates/login_signup.html new file mode 100644 index 0000000..7522886 --- /dev/null +++ b/PlanktonDetector/templates/login_signup.html @@ -0,0 +1,25 @@ +{% extends 'base.html' %} +{%load static%} +{%block extracss%} + +{%endblock extracss%} +{%block content%} +
+{%if signup is not None%} +

Register

+{% else%} +

Login

+{%endif%} +
+ {%csrf_token%} + {{form}} + {% if signup is None%} + +
+ +{%else%} + + +{%endif%} +
+{%endblock content%} \ No newline at end of file diff --git a/PlanktonDetector/templates/upload.html b/PlanktonDetector/templates/upload.html index f84e6ac..ddd1f57 100644 --- a/PlanktonDetector/templates/upload.html +++ b/PlanktonDetector/templates/upload.html @@ -1,16 +1,9 @@ - - -{% load static %} - - - - Plankton Detector - - - - - - +{% extends 'base.html' %} +{%load static%} +{%block extracss%} + +{%endblock extracss%} +{%block content%}
{% csrf_token %}
@@ -50,5 +43,4 @@ }); - - \ No newline at end of file + {%endblock content%} \ No newline at end of file