Upload 8 files

app.yaml

@@ -0,0 +1,19 @@
+entrypoint: gunicorn -b :$PORT main:app
+env: flex
+
+runtime: python
+runtime_config: 
+  python_version: "3.11"
+  operating_system: "ubuntu22"
+
+manual_scaling:
+  instances: 1
+
+resources:
+  cpu: 2
+  memory_gb: 4
+  # disk_size_gb: 20
+
+handlers:
+- url: /.*
+  script: auto

main.py

@@ -0,0 +1,102 @@
+from keras.models import load_model
+from flask import Flask, render_template, request, jsonify
+from tensorflow.keras.preprocessing.image import img_to_array
+import numpy as np
+import json
+from PIL import Image
+import io
+import os
+import cv2
+
+# Creating the app
+app = Flask(__name__)
+
+# Loading the model
+model = load_model("skin_disorder_classifier_EfficientNetB2.h5")
+
+# Loading the json file with the skin disorders
+def get_treatment(path):
+    with open(path) as f:
+        return json.load(f)
+treatment_dict = get_treatment("skin_disorder.json")
+
+# function to check if the file is an allowed image type
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in {'png', 'jpg', 'jpeg'}
+
+# function to detect skin color
+def is_skin(img):
+    # convert image to HSV color space
+    hsv = cv2.cvtColor(img, cv2.COLOR_RGB2HSV)
+    # define range of skin color in HSV
+    lower_skin = np.array([0, 20, 70], dtype=np.uint8)
+    upper_skin = np.array([20, 255, 255], dtype=np.uint8)
+    # create a binary mask of skin color pixels
+    mask = cv2.inRange(hsv, lower_skin, upper_skin)
+    # count the number of skin color pixels
+    skin_pixels = np.sum(mask > 0)
+    # calculate the percentage of skin color pixels in the image
+    skin_percent = skin_pixels / (img.shape[0] * img.shape[1]) * 100
+    # return True if skin percentage is above a threshold, else False
+    return skin_percent > 5
+
+# Define the route for the home page
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+# Define the route for the prediction
+@app.route('/predict', methods=['POST'])
+def predict():
+    # Get the image from the request
+    file = request.files['file']
+
+    # check if the file is an image
+    if not file or not allowed_file(file.filename):
+        return render_template('error.html', error='Only image files are allowed')
+
+    # Open the image using PIL
+    image = Image.open(file)
+
+    # check if the image contains human skin
+    if not is_skin(np.array(image)):
+        return render_template('error.html', error='The uploaded image could not be processed.\
+                                                    Please ensure that the image contains skin and try again.')
+
+    # Preprocess the image
+    img = image.resize((300,300))
+    img_array = img_to_array(img)
+    img = img_array / 255.0
+    image = np.expand_dims(img, axis=0)
+
+    # Make prediction
+    pred = model.predict(image)
+    class_idx = np.argmax(pred)
+
+    # Classes
+    classes = ["Acne", "Basal cell carcinoma", "Benign Keratosis-like Lesions (BKL)", "Atopic dermatitis(Eczema)",
+               "Actinic keratosis(AK)", "Melanoma", "Psoriasis","Tinea(Ringworm)"]
+
+    # Predicted class
+    pred_class = classes[class_idx]
+
+    # Probability of prediction
+    prob = pred[0][class_idx]
+
+    # Set probability threshold
+    threshold = 0.6
+
+    # Check if probability is above threshold
+    if prob < threshold:
+        return render_template('error.html', error='Inconclusive result.\
+                                                    Please consult a healthcare professional for an accurate diagnosis')
+
+    # Treatment options
+    treatments = treatment_dict.get(pred_class, [])
+
+    # Render the results page with the prediction
+    return render_template('results.html', prediction=pred_class, probability=prob, treatments=treatments)
+
+# Run the application   
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,6 @@
+gunicorn
+flask
+keras
+numpy
+Pillow
+tensorflow

skin_disorder.json

@@ -0,0 +1,53 @@
+{
+    "Acne": [
+        "Topical retinoids (such as tretinoin) - helps unclog pores and prevent new acne lesions from forming.",
+        "Benzoyl peroxide - kills bacteria and reduces inflammation.",
+        "Salicylic acid - helps unclog pores and reduces inflammation.",
+        "Topical antibiotics (such as clindamycin) - helps kill bacteria and reduce inflammation.",
+        "Oral antibiotics (such as doxycycline) - helps kill bacteria and reduce inflammation."
+    ],
+    "Basal cell carcinoma": [
+        "Surgical excision - removal of the tumor and surrounding tissue.",
+        "Mohs surgery - a specialized procedure to remove the cancerous tissue layer by layer, minimizing damage to healthy tissue.",
+        "Radiation therapy - using high-energy radiation to destroy cancer cells.",
+        "Topical chemotherapy - applying a cream or lotion containing medication to kill cancer cells."
+    ],
+    "Benign Keratosis-like Lesions (BKL)": [
+        "Cryotherapy - using liquid nitrogen to freeze off the lesion.",
+        "Electrodesiccation and curettage - scraping off the lesion and using an electric needle to destroy any remaining cells.",
+        "Topical medications (such as imiquimod) - stimulates the immune system to attack the lesion.",
+        "Shave excision - shaving off the lesion with a surgical blade."
+    ],
+    "Atopic dermatitis(Eczema)": [
+        "Emollients - moisturizers that help to repair the skin barrier and reduce dryness.",
+        "Topical corticosteroids - reduce inflammation and itching.",
+        "Oral antihistamines - reduce itching and improve sleep.",
+        "Light therapy (phototherapy) - exposing the skin to specific types of light to reduce inflammation."
+    ],
+    "Actinic keratosis(AK)": [
+        "Cryotherapy - using liquid nitrogen to freeze off the lesion.",
+        "Topical medications (such as imiquimod) - stimulates the immune system to attack the lesion.",
+        "Chemical peels - applying a chemical solution to the skin to remove the lesion.",
+        "Photodynamic therapy - applying a medication to the skin that is activated by light to destroy the lesion."
+    ],
+    "Melanoma": [
+        "Surgical excision - removing the tumor and surrounding tissue.",
+        "Immunotherapy - using medications to stimulate the immune system to attack cancer cells.",
+        "Chemotherapy - using medications to kill cancer cells.",
+        "Radiation therapy - using high-energy radiation to destroy cancer cells."
+    ],
+    "Psoriasis": [
+        "Topical corticosteroids - reduce inflammation and itching.",
+        "Topical retinoids - helps slow down the growth of skin cells.",
+        "Topical calcineurin inhibitors (such as tacrolimus or pimecrolimus) -reduce inflammation and itching, particularly for sensitive areas like the face and neck.",
+        "Phototherapy (UVB light therapy) - slows down skin cell turnover and reduces inflammation."
+    ],
+
+    "Tinea (Ringworm)": [
+        "Antifungal creams, ointments or powders (such as clotrimazole, miconazole or terbinafine) - applied to the affected area for 2-4 weeks to kill the fungus.",
+        "Oral antifungal medications (such as terbinafine or fluconazole) - prescribed for more severe or resistant cases.",
+        "Keeping the affected area clean and dry - to prevent the fungus from spreading.",
+        "Avoiding sharing personal items - such as towels, clothing, and combs to prevent the spread of the fungus to others.",
+        "Washing clothes and bedding in hot water and drying them in a hot dryer - to kill any fungus that may be present."
+    ]
+    }

skin_disorder_classifier_EfficientNetB2.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2f0b51ceb586b7aba1b8c4c822b55d008d7dee7be82265a33f1756ad9bac7dd4
+size 136

templates/error.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DermaAI</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h3><i>Error! {{ error }}</i>.</h3>
+  </body>
+</html>

templates/index.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Derma AI</title>
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+  <meta content="Webflow" name="generator" />
+  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/css/amoss-wondrous-site.webflow.8f0db2681.css"
+    rel="stylesheet" type="text/css" />
+  <link href="https://fonts.googleapis.com" rel="preconnect" />
+  <link crossorigin="anonymous" href="https://fonts.gstatic.com" rel="preconnect" />
+  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
+  <script type="text/javascript">
+    WebFont.load({
+      google: {
+        families: [
+          "Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
+        ],
+      },
+    });
+  </script>
+
+  <script type="text/javascript">
+    !(function (o, c) {
+      var n = c.documentElement,
+        t = " w-mod-";
+      (n.className += t + "js"),
+        ("ontouchstart" in o ||
+          (o.DocumentTouch && c instanceof DocumentTouch)) &&
+        (n.className += t + "touch");
+    })(window, document);
+  </script>
+  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
+    rel="shortcut icon" type="image/x-icon" />
+  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
+    rel="apple-touch-icon" />
+</head>
+
+<body class="body">
+  <div class="navbar-logo-left wf-section" id="section1">
+    <div class="navbar-logo-left-container shadow-three w-nav" data-animation="default" data-collapse="medium"
+      data-duration="400" data-easing="ease" data-easing2="ease" role="banner">
+      <div class="how-to-use-derma-ai">
+        <div class="navbar-wrapper">
+          <a class="navbar-brand w-nav-brand" href="#"><img alt="LOGO DERMA AI" height="50" loading="lazy"
+              src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
+              width="50" />
+            <div>
+              <h1 class="heading-2">Derma AI</h1>
+            </div>
+          </a>
+          <nav class="nav-menu-wrapper w-nav-menu" role="navigation">
+            <ul class="nav-menu-two w-list-unstyled" role="list">
+              <li><a class="nav-link" href="/">Home</a></li>
+              <li>
+                <div class="nav-divider"></div>
+              </li>
+              <li class="mobile-margin-top-10">
+                <a class="button-primary w-button" href="#contacts">Contact us</a>
+              </li>
+            </ul>
+          </nav>
+          <div class="menu-button w-nav-button">
+            <div class="w-icon-nav-menu"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="div_steps">
+    <section class="hero-without-image wf-section">
+      <div class="how-to-use-derma-ai">
+        <div class="hero-wrapper-two">
+          <h1 class="heading">SKINCARE ONLINE</h1>
+          <p class="margin-bottom-24px">DON'T WAIT TO BE SKINCHECK</p>
+          <form action="{{ url_for('predict') }}" method="post" enctype="multipart/form-data">
+            <label class="button-primary w-button">
+              CHECK YOUR SKIN
+              <input type="file" name="file" style="display: none;" onchange="form.submit()">
+            </label>
+          </form>
+        </div>
+      </div>
+
+    </section>
+    <div class="container-2 w-container"></div>
+  </div>
+  <section class="team-slider wf-section">
+    <div class="how-to-use-derma-ai">
+      <h2 class="centered-heading">How to use Derma AI</h2>
+      <div class="all_steps_wrapper w-slider" data-animation="slide" data-autoplay="false" data-autoplay-limit="0"
+        data-delay="4000" data-disable-swipe="false" data-duration="500" data-easing="ease" data-hide-arrows="false"
+        data-infinite="true" data-nav-spacing="12">
+        <div class="w-slider-mask">
+          <div class="steps_wrapper w-slide">
+            <div class="team-block">
+              <img alt="" class="team-member-image-two" loading="lazy"
+                src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/64382674cacaa11db3a65e79_Screenshot%202023-04-13%20185653.png"
+                width="249" />
+              <div class="team-block-info">
+                <p class="team-member-text">
+                  <strong>Take a photo*<br /></strong>Keep zoomed at the
+                  closest distance (less than 10 cm), keep in focus and center
+                  only the skin mark (without hair, wrinkles and other
+                  objects)
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="steps_wrapper w-slide">
+            <div class="team-block">
+              <img alt="" loading="lazy"
+                src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/64382674d482ac373df4c96d_Screenshot%202023-04-13%20185604.png" />
+              <div class="team-block-info">
+                <p class="team-member-text">
+                  <strong>Identify and send<br /></strong>Send your photo to
+                  the Artificial Intelligence. The system will analyze it and
+                  send you a risk assessment.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="steps_wrapper w-slide">
+            <div class="team-block">
+              <img alt="" class="team-member-image-two" loading="lazy"
+                src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/6438267498748042229f1445_Screenshot%202023-04-13%20185626.png"
+                width="242" />
+              <div class="team-block-info">
+                <p class="team-member-text">
+                  <strong>Receive your risk assessment <br /></strong>Get the
+                  result within 60 seconds and related advice on the next
+                  steps to take.
+                </p>
+              </div>
+            </div>
+          </div>
+
+  </section>
+  <section class="footer-subscribe wf-section">
+    <div class="how-to-use-derma-ai">
+      <div class="footer-wrapper-three">
+        <div class="footer-block-three">
+          <a class="footer-link-three" href="#">About us</a><a class="footer-link-three" href="#">Home</a><a
+            class="footer-link-three" href="#">Get checked</a>
+        </div>
+        <div class="footer-social-block-three" , id="contacts">
+          <a class="footer-social-link-three w-inline-block" href="#"><img alt="" loading="lazy"
+              src="https://uploads-ssl.webflow.com/62434fa732124a0fb112aab4/62434fa732124a705912aaeb_facebook%20big%20filled.svg" /></a><a
+            class="footer-social-link-three w-inline-block" href="#"><img alt="" loading="lazy"
+              src="https://uploads-ssl.webflow.com/62434fa732124a0fb112aab4/62434fa732124ab37a12aaf0_twitter%20big.svg" /></a><a
+            class="footer-social-link-three w-inline-block" href="#"><img alt="" loading="lazy"
+              src="https://uploads-ssl.webflow.com/62434fa732124a0fb112aab4/62434fa732124a61f512aaed_instagram%20big.svg" /></a><a
+            class="footer-social-link-three w-inline-block" href="#"><img alt="" loading="lazy"
+              src="https://uploads-ssl.webflow.com/62434fa732124a0fb112aab4/62434fa732124a717f12aaea_youtube%20small.svg" /></a>
+        </div>
+      </div>
+      <div class="footer-divider-two"></div>
+      <div class="footer-bottom">
+        <div class="footer-copyright">
+          © 2023 Derma AI. All rights reserved
+        </div>
+        <div class="footer-legal-block">
+          <a class="footer-legal-link" href="#">Terms Of Use</a><a class="footer-legal-link" href="#">Privacy Policy</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</body>
+
+</html>

templates/results.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Derma AI</title>
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+  <meta content="Webflow" name="generator" />
+  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/css/amoss-wondrous-site.webflow.ebef6ed16.css"
+    rel="stylesheet" type="text/css" />
+  <link href="https://fonts.googleapis.com" rel="preconnect" />
+  <link crossorigin="anonymous" href="https://fonts.gstatic.com" rel="preconnect" />
+  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
+  <script type="text/javascript">
+    WebFont.load({
+      google: {
+        families: [
+          "Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
+        ],
+      },
+    });
+  </script>
+  <script type="text/javascript">
+    !(function (o, c) {
+      var n = c.documentElement,
+        t = " w-mod-";
+      (n.className += t + "js"),
+        ("ontouchstart" in o ||
+          (o.DocumentTouch && c instanceof DocumentTouch)) &&
+        (n.className += t + "touch");
+    })(window, document);
+  </script>
+  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
+    rel="shortcut icon" type="image/x-icon" />
+  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
+    rel="apple-touch-icon" />
+</head>
+
+<body class="body">
+  <div class="navbar-logo-left wf-section">
+    <div class="navbar-logo-left-container shadow-three w-nav" data-animation="default" data-collapse="medium"
+      data-duration="400" data-easing="ease" data-easing2="ease" role="banner">
+      <div class="how-to-use-derma-ai">
+        <div class="navbar-wrapper">
+          <a class="navbar-brand w-nav-brand" href="#"><img alt="LOGO DERMA AI" height="50" loading="lazy"
+              src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
+              width="50" />
+            <div>
+              <h1 class="heading-2">Derma AI</h1>
+            </div>
+          </a>
+          <nav class="nav-menu-wrapper w-nav-menu" role="navigation">
+            <ul class="nav-menu-two w-list-unstyled" role="list">
+              <li>
+                <div class="nav-divider"></div>
+              </li>
+              <li class="mobile-margin-top-10">
+              <li><a class="nav-link" href="/" target="_blank">Home</a>
+              </li>
+              </li>
+              <li class="mobile-margin-top-10">
+                <a class="button-primary w-button" href="#">contact us</a>
+              </li>
+            </ul>
+          </nav>
+          <div class="menu-button w-nav-button">
+            <div class="w-icon-nav-menu"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="div_steps"></div>
+  <section class="testimonial-stack wf-section">
+    <div class="container">
+      <div class="testimonial-card-three">
+        <div class="testimonial-card-content">
+          <h3 class="testimonial-card-heading">Skin Condition Diagnosis</h3>
+          <p class="testimonial-text-three">
+            Based on our analysis, you may have <strong><i>{{ prediction }}</i></strong>.
+          </p>
+          <div class="testimonial-info-four">
+            <div>
+              <h3 class="testimonial-author-name-three">Common treatments include:</h3>
+              <div class="testimonial-title">
+                <ul>
+                  {% for treatment in treatments %}
+
+                  <li>{{treatment }}</li>
+                  </br>
+                  {% endfor %}
+                </ul>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        </br>
+        <em>Disclaimer: This information is provided for educational purposes
+          only and should not be used as a substitute for medical advice.
+          Please consult a healthcare professional for an accurate diagnosis
+          and treatment plan.</em>
+      </div>
+    </div>
+  </section>
+  <section class="footer-subscribe-2 wf-section">
+    <div class="container">
+      <div class="footer-divider-two-2"></div>
+      <div class="footer-bottom-2">
+        <div class="footer-copyright-2">
+          © 2023 Derma AI. All rights reserved
+        </div>
+        <div class="footer-legal-block-2">
+          <a class="footer-legal-link-2" href="#">Terms Of Use</a><a class="footer-legal-link-2" href="#">Privacy
+            Policy</a>
+        </div>
+      </div>
+    </div>
+  </section>
+  <script crossorigin="anonymous" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+    src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6436bd9de183596b1cff71c7"
+    type="text/javascript"></script>
+  <script src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/js/webflow.d24760b11.js"
+    type="text/javascript"></script>
+</body>
+
+</html>