upload home.html
This commit is contained in:
parent
177f93b7ed
commit
2d0b713737
|
|
@ -0,0 +1,216 @@
|
|||
{% extends "base.html" %}
|
||||
{% block contentcarousel %}
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url_for('static', filename='img/background.png') }}" class="d-block w-100" height="0%" alt="carouselbg">
|
||||
<div class="carousel-caption text-start">
|
||||
<h1>EARLY DETECTION OF PARKINSON'S</h1>
|
||||
<p>Early Detection of Parkinson's Disease Through Spiral and Wave Images Helps Early Identification of Parkinson's Symptoms</p>
|
||||
<p>Click the button below to continue</p>
|
||||
<a href="{{ url_for('klasifikasi') }}" type="button" class="btn me-md-2 mb-4" style="background: #00A9A7; color: white; border-radius: 10px;">Classification</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url_for('static', filename='img/background.png') }}" class="d-block w-100" height="0%" alt="carouselbg">
|
||||
<div class="carousel-caption text-start">
|
||||
<h1>Guide</h1>
|
||||
<p>Parkinson's Spiral & Wave Handwriting Classification Guide</p>
|
||||
<p>Click the button below to view</p>
|
||||
<button type="button" class="btn mb-4" style="background: #00A9A7; color: white; border-radius: 10px;" data-bs-toggle="modal" data-bs-target="#exampleModal">Guide</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="exampleModalLabel">Parkinson's Spiral & Wave Handwriting Classification Guide</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Step 1 : Select Spiral or Wave Handwriting Image</h6>
|
||||
<ol>
|
||||
<li>Make writing in the form of a spiral or wave image like the example below.</li>
|
||||
<img src="{{ url_for('static', filename='img/langkah0.jpg') }}" alt="langkah-1" style="width: 65%;">
|
||||
<li>After that, take a photo of the image and save it in the form of an image file.</li>
|
||||
</ol>
|
||||
<h6>Step 2 : Select Spiral or Wave Handwriting Image</h6>
|
||||
<ol>
|
||||
<li>Click the “Choose File” button in the “Insert Image” section to select the spiral or wave handwriting image that you want to classify.</li>
|
||||
<img src="{{ url_for('static', filename='img/langkah1.png') }}" alt="langkah-2" style="width: 65%;">
|
||||
<li>Select the handwriting image from your device storage. Make sure the image must exceed
|
||||
<b>the minimum limit of 20 kb and below the maximum limit of 5 MB</b>.</li>
|
||||
</ol>
|
||||
<h6>Step 3 : Classifying the Image</h6>
|
||||
<ol>
|
||||
<li>After selecting the handwriting image, click the “Classification” button to start the classification process.</li>
|
||||
<img src="{{ url_for('static', filename='img/langkah2.png') }}" alt="langkah-3" style="width: 40%;">
|
||||
<li>Wait for some time for the classification process to complete.</li>
|
||||
</ol>
|
||||
<h6>Step 4 : Classification Results</h6>
|
||||
<ol>
|
||||
<li>Once the classification process is complete, the classification results will be displayed in the “Classification Results” section.</li>
|
||||
<li>You will see the classification result whether the handwriting is indicated as Tremor or Non Tremor.</li>
|
||||
<img src="{{ url_for('static', filename='img/langkah3.png') }}" alt="langkah-4" style="width: 60%;">
|
||||
</ol>
|
||||
<h6>Step 5 : Interpretation of Results</h6>
|
||||
<ol>
|
||||
<li>If the classification result shows that your handwriting is indicated as Tremor or Non Tremor, you can also see the confidence level of the classification result.</li>
|
||||
<img src="{{ url_for('static', filename='img/langkah4-1.png') }}" alt="langkah-5" style="width: 14%;">
|
||||
<li>Read the advice given for further action based on the classification result.</li>
|
||||
<img src="{{ url_for('static', filename='img/langkah4-2.png') }}" alt="langkah-5" style="width: 45%;">
|
||||
</ol>
|
||||
<h6>Step 6 : Refresh or Repeat Process</h6>
|
||||
<ol>
|
||||
<li>If you want to reclassify with a different handwriting image, click the “Refresh” button.</li>
|
||||
<img src="{{ url_for('static', filename='img/langkah5.png') }}" alt="langkah-6" style="width: 20%;">
|
||||
<li>Repeat the steps from the beginning to perform classification with a new handwriting image.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="container px-4 py-4" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom text-center" style="color: #00A9A7; font-weight: bolder;">Parkinson</h2>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
|
||||
<div class="feature col text-center">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/logo.png') }}" alt="parkinson" style="height: 365px; width: 365px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<p style="font-size: 16px; text-align: justify;">Parkinson's disease (PD) is a neurodegenerative disease that affects body movement.
|
||||
Symptoms include tremors, muscle stiffness and difficulty moving. The Parkinson's early detection website app helps users conduct
|
||||
an initial screening through the spiral and wave patterns of their handwriting. By uploading an image of the handwriting pattern,
|
||||
users can see the results of tremor or non-tremor classification. The website also provides information and advice on a good
|
||||
lifestyle for people with Parkinson's.<br>
|
||||
The data used is secondary data obtained on the <a href="https://www.kaggle.com/datasets/kmader/parkinsons-drawings" style="font-weight: bold;">Kaggle.com</a>
|
||||
site from the account name <b>K Scott Mader</b>. The dataset used shows journals that can be used as references to prove
|
||||
that the data was indeed obtained from Parkinson's patients and has been validated by the RMIT University Human Research
|
||||
Ethics Committee and in accordance with the Declaration of Helsinki.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="container px-4 py-4" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom" style="color: #00A9A7; font-weight: bolder;">Spiral</h2>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
|
||||
<div class="feature col">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/spiral-t.png') }}" alt="picdataset" style="height: 150px;">
|
||||
</div>
|
||||
<h3 class="mt-2">Tremor</h3>
|
||||
<p>In spiral images, tremors tend to have irregular lines, vibrations, or “tremors”, which are clearly visible in the spiral pattern.</p>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/spiral-nt.png') }}" alt="picdataset" style="height: 150px;">
|
||||
</div>
|
||||
<h3 class="mt-2">Non Tremor</h3>
|
||||
<p>In non tremor spiral images, the spiral circles tend to be neat and have no significant tremors.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-4 py-4" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom" style="color: #00A9A7; font-weight: bolder;">Waves</h2>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
|
||||
<div class="feature col">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/gelombang-t.png') }}" alt="picdataset" style="height: 150px;">
|
||||
</div>
|
||||
<h3 class="mt-2">Tremor</h3>
|
||||
<p>Tremor wave images tend to have irregular lines, vibrations, or “tremors” evident in the wave pattern.</p>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/gelombang-nt.png') }}" alt="picdataset" style="height: 150px;">
|
||||
</div>
|
||||
<h3 class="mt-2">Non Tremor</h3>
|
||||
<p>In non tremor wave images, the wave lines tend to be neat and have no significant vibrations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-4 py-4" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom text-center" style="color: #00A9A7; font-weight: bolder;">The Development Team</h2>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
|
||||
<div class="feature col">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/team1.jpg') }}" alt="team" style="width: 150px; height: 180px; border-radius: 20px; object-fit: cover;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h5 class="mt-2">Azizatul Mashwafah</h5>
|
||||
<p>Mahasiswa D4 TI<br>
|
||||
Politeknik Negeri Jember</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/team2.jpg') }}" alt="team" style="width: 150px; height: 180px; border-radius: 20px; object-fit: cover;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h5 class="mt-2">Zilvanhisna Emka Fitri, ST., MT</h5>
|
||||
<p>Dosen D4 Teknik Informatika<br>
|
||||
Politeknik Negeri Jember</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
|
||||
<div class="feature col">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/team3.jpeg') }}" alt="team" style="width: 150px; height: 180px; border-radius: 20px; object-fit: cover;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h5 class="mt-2">Ir. Arizal Mujibtamala Nanda Imron, ST., MT</h5>
|
||||
<p>Dosen D4 Teknologi Rekayasa Elektronika<br>
|
||||
Universitas Negeri Jember</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="feature-icon">
|
||||
<img src="{{ url_for('static', filename='img/team4.jpg') }}" alt="team" style="width: 150px; height: 180px; border-radius: 20px; object-fit: cover;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h5 class="mt-2">dr. Ahdinar Rosdiana Dewi Sp. N</h5>
|
||||
<p>Dokter Spesialis Neurologi<br>
|
||||
RSUD Johar Baru, Jakarta</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue