# Project export: Skintelligence

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 10.0
- Tagline: Revolutionizing skin health: Snap a photo, and get an instant AI diagnosis. Early detection, user-friendly, and privacy-centric. Join us in transforming dermatology!
- Devpost: https://devpost.com/software/skintelligence
- GitHub: https://github.com/isa-hello/CalHacks2023
- Team: 3 GitHub contributor(s) — jtfong2 (13 commits), Amartya Raybo Ghosh (4 commits), isa-hello (1 commits)

## Devpost submission (written by the team)

### Overview

Our project was inspired by the innovative work showcased at an Intel workshop, which harnessed the power of image recognition for wildfire prediction and even the identification of ancient fossils. This ingenuity sparked our desire to create a groundbreaking skin model. Our goal was to develop a AI solution that could analyze user-submitted skin photos, providing not just a diagnosis but also essential information on disease risks and potential treatments. Our journey was marked by challenges, with the primary hurdle being the fine-tuning of the AI model. We encountered difficulties stemming from dependencies, requiring relentless problem-solving. Additionally, we faced intermittent connectivity issues with Intel's cloud service and Jupyter Notebook, which occasionally disrupted our training process. Despite these obstacles, we remained resolute in our mission to deliver a valuable tool for the early detection of skin diseases.

## README (from the GitHub repository)

No README available.

## Detected evidence (automated analysis)

Indexed codebase: 15 recognized source files, 17 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- Python (language) — detected in the code
- Flask (technology) — claimed on Devpost, not found in the code
- PyTorch (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (16 of 16)

```
.vscode/aboutContent.html
.vscode/aboutIndex.html
.vscode/aboutStyle.css
.vscode/header.html
.vscode/navigation.html
.vscode/styles.css
.vscode/submission_handler.py
.vscode/submitContent.html
.vscode/submitIndex.html
.vscode/submitIndex2.html
.vscode/submitStyle.css
.vscode/submitStyle2.css
index.html
model.ipynb
skintelligenceContent.html
style.css
```

### Dependencies

No dependency index available.

### Recent commits (newest first)

- rewrote all .vscode files
- Merge branch 'main' of https://github.com/isa-hello/CalHacks2023
- final website?
- model transfer and submission handler
- NEWEST WEBSITE NOT FINAL
- Update index.html
- Update aboutIndex.html
- Update index.html
- Centered Image
- adjusted class parameters, removed cell outputs
- adjusted class parameters, removed cell outputs
- Merge branch 'main' of https://github.com/isa-hello/CalHacks2023
- Merge branch 'main' of https://github.com/isa-hello/CalHacks2023
- Submit
- Added functionality to upload file button
- Create Untitled1.ipynb
- test build removed
- Merge branch 'main' of https://github.com/isa-hello/CalHacks2023
- Home+About
- initial test build

## Key source files (fetched from GitHub, selected and truncated for size)

### style.css

```css
*{
    margin: 0;
    padding: 0; 
    font-family: sans-serif;
}
.banner {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),url(https://www.colorhexa.com/326164.png);
    background-size: cover;
    background-position: center;
}
.navbar {
    width: 85%;
    margin: auto;
    padding: 35px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    width: 22%;
    height: 22%;
    cursor: pointer;
}
.navbar ul li{
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    position: relative;
}
.navbar ul li a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}
.navbar ul li::after{
    content: '';
    height: 3px;
    width: 0;
    background: #009688;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
}
.navbar ul li:hover::after{
    width: 100%;
}
.content{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    text-underline-position: below;
}
.content h1{
    font-size: 95px;
    margin-top: 84px;
}
.content p{
    margin: 20px auto;
    font-weight: 100;
    line-height: 25px;
}
button{
    width: 200px;
    padding: 15px 0;
    text-align: center;
    margin: 20px 10px;
    border-radius: 25px;
    font-weight: bold;
    border: 2px solid #009688;
    background: transparent;
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
span{
    background: #009688;
    height: 0;
    width: 100%;
    border-radius: 25px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: 0.4s;
}
button:hover span{
    height: 100%;
    transition: 0.9s;
}
button:hover{
    border: none;
}
body {
    height: 100vh;
    background: linear-gradient(to bottom, yellow 50%, yellow 50%);
}
#previewContainer {
    text-align: center;
}
#previewImage {
    max-width: 300px;
    max-height: 300px;
    display: none;
    margin: 0 auto; /* This will center the image */
}

```

### index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DermaScan</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      h1 {
        font-family: "monospace";
      }
    </style>
  </head>
  <body>
    <div class="banner">
      <div class="navbar">
        <img src="http://imageshack.com/i/po11ErGdp" alt="Logo" class="logo" />
        <ul>
          <li><a href="http://127.0.0.1:5500/index.html">Home</a></li>
          <li>
            <a href="http://127.0.0.1:5500/.vscode/aboutIndex.html">About</a>
          </li>
        </ul>
      </div>
      <div class="content">
        <h1>Skintelligence</h1>
        <p>
          Skintelligence is an AI tool that diagnoses skin conditions by
          analyzing<br />
          user-submitted photos or links, matching them to a comprehensive
          database,<br />
          and offering treatment options and skincare information for better
          skin health.
        </p>
        <button type="button" id="uploadButton">Upload your Image</button>
        <button type="button" id="submitButton">Submit</button>
        <input type="file" id="fileInput" style="display: none" />
        <div id="previewContainer">
          <img id="previewImage" style="display: none" />
        </div>
      </div>
    </div>

    <script>
      let imageData = null;

      document
        .getElementById("uploadButton")
        .addEventListener("click", function () {
          document.getElementById("fileInput").click();
        });

      document
        .getElementById("fileInput")
        .addEventListener("change", function () {
          const file = this.files[0];
          if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
              const image = document.getElementById("previewImage");
              image.src = e.target.result;
              image.style.display = "block";
              imageData = e.target.result;
            };
            reader.readAsDataURL(file);
          }
        });

      document
        .getElementById("submitButton")
        .addEventListener("click", function () {
          if (imageData) {
            const hasSkinDisease = true; // Replace with your AI logic
            window.location.href =
              "http://127.0.0.1:5500/.vscode/submitIndex2.html";
          } else {
            alert("Please upload an image first.");
          }
        });
    </script>
  </body>
</html>

```

### .vscode/aboutContent.html

```html
<!-- Include the shared header -->
<!-- Include the shared navigation -->
<div class="content">
  <!-- Your about content goes here -->
</div>

```

### .vscode/submitContent.html

```html
<!-- Include the shared header -->
<!-- Include the shared navigation -->
<div class="content">
  <!-- Your submit content goes here -->
</div>

```

### .vscode/submitIndex.html

```html
<html>
    <head>
        <title>Skintelligence</title>
    </head>
    <body>
        <link rel="stylesheet" href="submitStyle.css">
        <div class="banner">
            <div class="navbar">
                <img src="http://imageshack.com/i/po11ErGdp" class="logo">
                <ul>
                    <li><a href="http://127.0.0.1:5500/index.html">Home</a></li>
                    <li><a href="http://127.0.0.1:5500/.vscode/aboutIndex.html">About</a></li>
                </ul>
                </div>

            
    </body>
</html>
```

### .vscode/submitStyle.css

```css
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.banner {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),url(https://www.colorhexa.com/326164.png);
    background-size: cover;
    background-position: center;
}
.navbar {
    width: 85%;
    margin: auto;
    padding: 35px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    width: 22%;
    height: 22%;
    cursor: pointer;
}
.navbar ul li{
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    position: relative;
}
.navbar ul li a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}
.navbar ul li::after{
    content: '';
    height: 3px;
    width: 0;
    background: #009688;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
}
.navbar ul li:hover::after{
    width: 100%;
}

```

### .vscode/submission_handler.py

```python
import torch
import torchvision.transforms as transforms
from PIL import Image

model = torch.load('model.pth')
model.eval()

class_names = ["eczema", "warts molluscum", "melanoma", "atopic dermatitis", 
               "basal cell carcinoma", "melanocytic nevi", "benign keratosis", 
               "psoriasis", "seborrhic keratoses", "tinea ringworm candidiasis"]

transform = transforms.Compose([
    transforms.ToTensor(),
    transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
])

def process_image(image_path):
    image = Image.open(image_path)
    input_image = transform(image).unsqueeze(0)
    return input_image

def predict_skin_condition(input_image):

    with torch.no_grad():
        output = model(input_image)

    predicted_class = torch.argmax(output).item()
    predicted_class_name = class_names[predicted_class]

    return predicted_class_name

if __name__ == "__main__":
    image_path = 'path_to_your_image.jpg'
    input_image = process_image(image_path)
    result = predict_skin_condition(input_image)
    print(f"The predicted skin condition is: {result}")

```

### .vscode/aboutStyle.css

```css
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

.banner {
    width: 100%;
    height: 120vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(https://www.colorhexa.com/326164.png);
    background-size: cover;
    background-position: center;
}

.navbar {
    width: 85%;
    margin: auto;
    padding: 35px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 22%;
    height: auto; /* Adjust as needed */
    cursor: pointer;
}

.navbar ul {
    list-style: none;
    display: flex;
}

.navbar ul li {
    margin: 0 15px;
    position: relative;
}

.navbar ul li a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-family: sans-serif; /* Set font-family to fantasy */
}

.navbar ul li::after {
    content: '';
    height: 3px;
    width: 0;
    background: #009688;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
}

.navbar ul li:hover::after {
    width: 100%;
}

.content {
    text-align: center;
    color: #fff;
    padding: 10px; /* Add padding to the content */
}

.content h2 {
    font-size: 28px;
    margin-top: 18px; /* Adjust as needed */
    font-family: monospace; /* Set font-family to fantasy */
}

.content p {
    margin: 20px auto;
    font-weight: 100;
    line-height: 1.6; /* Adjust line height as needed */
    font-family: sans-serif; /* Set font-family to fantasy */
}
```

### .vscode/submitStyle2.css

```css
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

.banner {
    width: 100%;
    height: 120vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(https://www.colorhexa.com/326164.png);
    background-size: cover;
    background-position: center;
}

.navbar {
    width: 85%;
    margin: auto;
    padding: 35px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 22%;
    height: auto; /* Adjust as needed */
    cursor: pointer;
}

.navbar ul {
    list-style: none;
    display: flex;
}

.navbar ul li {
    margin: 0 15px;
    position: relative;
}

.navbar ul li a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-family: sans-serif; /* Set font-family to fantasy */
}

.navbar ul li::after {
    content: '';
    height: 3px;
    width: 0;
    background: #009688;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
}

.navbar ul li:hover::after {
    width: 100%;
}

.content {
    text-align: center;
    color: #fff;
    padding: 10px; /* Add padding to the content */
}

.content h2 {
    font-size: 28px;
    margin-top: 18px; /* Adjust as needed */
    font-family: monospace; /* Set font-family to fantasy */
}

.content p {
    margin: 20px auto;
    font-weight: 100;
    line-height: 1.6; /* Adjust line height as needed */
    font-family: sans-serif; /* Set font-family to fantasy */
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0; /* Set the background color as needed */
  }
  
  .content {
    text-align: center;
  }
  
  h1 {
    font-size: 2rem; /* Adjust the font size as needed */
    margin-bottom: 20px;
  }
  
  p {
    font-size: 1.2rem; /* Adjust the font size as needed */
    line-height: 1.5;
  }
  
  button {
    background-color: #009688;
    color: #fff;
    padding: 10px 20px;
    font-size: 1.2rem; /* Adjust the font size as needed */
    border: none;
    border-radius: 25px;
    cursor: pointer;
  }
  
  #previewContainer {
    text-align: center;
  }
  
  #previewImage {
    max-width: 300px;
    max-height: 300px;
    display: none;
    margin: 0 auto; /* This will center the image */
  }
```

### .vscode/aboutIndex.html

```html
<html>
    <head>
        <title>DermaScan</title>
    </head>
    <body>
        <link rel="stylesheet" href="aboutStyle.css">
        <div class="banner">
            <div class="navbar">
                <img src="http://imageshack.com/i/po11ErGdp" class="logo">
                <ul>
                    <li><a href="http://127.0.0.1:5500/index.html">Home</a></li>
                    <li><a href="http://127.0.0.1:5500/.vscode/aboutIndex.html">About</a></li>
                </ul>
                </div>
                <!DOCTYPE html>
<html>
<head>
    <title>About MedAIbility</title>
    <link rel="stylesheet" href="style.css"> <!-- Include your CSS file here -->
</head>
<body>
    
    <div class="content">
        <section id="medical-ai">
            <h2>Our Medical Structured, AI-Powered, Accessibility-Based Ideals</h2>
            <p>Our team, MedAIbility, is committed to leveraging advanced artificial intelligence to create <br>innovative medical solutions. Our primary focus is to ensure accessibility, making healthcare more inclusive<br> and efficient. We believe in a future where technology bridges the gap in healthcare, making medical<br> knowledge and services available to all, irrespective of their location or background.</p>
        </section>

        <section id="future-plans">
            <h2>Future Plans for Skintelligence</h2>
            <p>Our vision for Skintelligence goes beyond skin disease recognition. We plan to broaden our<br> disease detection capabilities to include eye recognition, burn recognition, wound recognition, and more.<br> In addition, we are developing a chatbot feature that can diagnose users based on their descriptions,<br> providing quick and reliable medical insights.</p>
        </section>

        <section id="derma-scan">
            <h2>Exploring Skintelligence</h2>
            <p>Skintelligence is our cutting-edge AI tool designed to diagnose various skin conditions accurately.<br> This section will provide an in-depth overview of Skintelligence's features, how it works, and its benefits.<br> Skintelligence can diagnose up to 10 skin diseases and recommend advice and treatments for all of them.<br> It's accessibility makes it a good option instead of a meaningless visit to the doctor and it's AI capabilities make<br> it a good option instead of looking the issue up.</p>
        </section>
    </div>        
    </body>
</html>
```

[1 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]