Spaces:

without-paper
/

Skin_image_classification

Build error

App Files Files Community

withoutpaper commited on Jul 24, 2025

Commit

96ec22e

1 Parent(s): ec207a2

Clean upload with model only

Browse files

Files changed (5) hide show

gradio_demo.py +55 -0
models/ResNet_model101.py +20 -0
pth/resnet101_model.pth +3 -0
requirements.txt +4 -0
templates/index.html +239 -0

gradio_demo.py ADDED Viewed

	@@ -0,0 +1,55 @@

+import os
+import torch
+from torchvision import transforms
+from PIL import Image
+import gradio as gr
+from models.ResNet_model101 import ResNet101
+# 定义模型类别
+class_names = {
+    'akiec': 'ACTINIC KERATOSIS',
+    'bcc': 'BASAL CELL CARCINOMA',
+    'bkl': 'BENIGN KERATOSIS-LIKE LESIONS',
+    'df': 'DERMATOFIBROMA',
+    'mel': 'MELANOMA',
+    'nv': 'MELANOCYTIC NEVI',
+    'vasc': 'VASCULAR LESIONS'
+}
+labels = list(class_names.values())
+# 图像预处理流程
+data_transform = transforms.Compose([
+    transforms.Resize((256, 256)),
+    transforms.ToTensor(),
+    transforms.Normalize(mean=[0.7633, 0.5458, 0.5704], std=[0.09, 0.1188, 0.1334])
+])
+# 加载模型
+device = torch.device("cpu")
+model = ResNet101(dropout_prob=0.5)
+model.load_state_dict(torch.load("pth/resnet101_model.pth", map_location=device))
+model.to(device)
+model.eval()
+# 推理函数
+def classify_skin_image(image: Image.Image):
+    image = image.convert("RGB")
+    tensor = data_transform(image).unsqueeze(0).to(device)
+    with torch.no_grad():
+        output = model(tensor)
+        pred = output.argmax(dim=1).item()
+        confidence = torch.nn.functional.softmax(output, dim=1)[0][pred].item()
+    return {labels[pred]: float(confidence)}
+# 构建 Gradio 界面
+demo = gr.Interface(
+    fn=classify_skin_image,
+    inputs=gr.Image(type="pil"),
+    outputs=gr.Label(num_top_classes=3),
+    title="Skin Cancer Classifier (ResNet101)",
+    description="Upload a skin lesion image and the model will classify it into one of seven categories.",
+    allow_flagging="never"
+)
+if __name__ == "__main__":
+    demo.launch()

models/ResNet_model101.py ADDED Viewed

	@@ -0,0 +1,20 @@

+import torch.nn as nn
+from torchvision import models
+class ResNet101(nn.Module):
+    def __init__(self, num_classes=7, dropout_prob=0.4):
+        super(ResNet101, self).__init__()
+        self.resnet101 = models.resnet101(pretrained=True)
+        # Add Dropout between the fully connected layers
+        in_features = self.resnet101.fc.in_features
+        self.resnet101.fc = nn.Sequential(
+            nn.Linear(in_features, 512),
+            nn.ReLU(),
+            nn.Dropout(p=dropout_prob),
+            nn.Linear(512, num_classes)
+        )
+    def forward(self, x):
+        return self.resnet101(x)

pth/resnet101_model.pth ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:bf700e92303306823efe1ec60b4508d55937d639bb0debea477977b51334c9ad
+size 174859770

requirements.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+gradio
+torch==-2.1.2+cu121-cp38
+torchvision==0.16.2+cu121-cp38
+pillow

templates/index.html ADDED Viewed

	@@ -0,0 +1,239 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Skin Cancer Image Classification Demo</title>
+    <style>
+        /* Reset basic styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        /* Body styling */
+        body {
+            font-family: 'Arial', sans-serif;
+            background: #f4f7f6;
+            color: #333;
+            text-align: center;
+            padding: 30px 0;
+        }
+        /* Container for content */
+        .container {
+            width: 90%;
+            max-width: 1000px;
+            margin: auto;
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            overflow: hidden;
+        }
+        /* Title */
+        h1 {
+            font-size: 2.5em;
+            color: #4CAF50;
+            margin-bottom: 20px;
+        }
+        h3 {
+            font-size: 1.2em;
+            margin-top: 20px;
+            color: #333;
+        }
+        /* Image section styling */
+        .image-container {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .image-container img {
+            width: 180px;
+            height: 180px;
+            object-fit: cover;
+            border-radius: 8px;
+            transition: transform 0.3s ease-in-out;
+            cursor: pointer;
+            border: 2px solid transparent;  /* Initially no border */
+        }
+        .image-container img:hover {
+            transform: scale(1.1);
+        }
+        /* Highlight selected image */
+        .image-container img.selected {
+            border: 4px solid black;  /* Border when selected */
+        }
+        /* Button Container */
+        .button-container {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        /* Input fields styling */
+        input[type="file"], input[type="text"] {
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ddd;
+            width: 60%;
+            margin: 10px 0;
+            font-size: 1em;
+        }
+        input[type="text"] {
+            width: 50%;
+        }
+        /* Classify button styling */
+        button {
+            padding: 12px 25px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 25px;
+            font-size: 1.1em;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.2s ease-in-out;
+        }
+        button:hover {
+            background-color: #45a049;
+            transform: translateY(-3px);
+        }
+        button:active {
+            transform: translateY(2px);
+        }
+        /* Feedback styling */
+        .feedback {
+            margin-top: 20px;
+            font-size: 1.2em;
+            color: #4CAF50;
+        }
+        .feedback.error {
+            color: red;
+        }
+        /* Media Queries for responsiveness */
+        @media (max-width: 768px) {
+            .image-container {
+                flex-direction: column;
+                align-items: center;
+            }
+            input[type="file"], input[type="text"] {
+                width: 80%;
+            }
+            button {
+                width: 80%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Skin Cancer Image Classification Demo</h1>
+        <form method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
+            <!-- Image selection section -->
+            <div class="image-container">
+                {% for image in image_urls %}
+                    <div>
+                        <img src="{{ image }}" alt="Image {{ loop.index }}" onclick="selectImage(this)">
+                        <input type="radio" name="image_choice" value="{{ loop.index0 }}" id="image{{ loop.index0 }}" style="display:none;">
+                    </div>
+                {% endfor %}
+            </div>
+            <!-- Upload image section -->
+            <div class="button-container">
+                <h3>Or Upload Your Own Image</h3>
+                <input type="file" name="image_file" accept="image/*"><br><br>
+                <label for="real_category">Real Category: </label>
+                <select id="real_category" name="real_category">
+                    <option value="" disabled selected>Select the category</option>
+                    <option value="ACTINIC KERATOSIS">ACTINIC KERATOSIS</option>
+                    <option value="BASAL CELL CARCINOMA">BASAL CELL CARCINOMA</option>
+                    <option value="BENIGN KERATOSIS-LIKE LESIONS">BENIGN KERATOSIS-LIKE LESIONS</option>
+                    <option value="DERMATOFIBROMA">DERMATOFIBROMA</option>
+                    <option value="MELANOMA">MELANOMA</option>
+                    <option value="MELANOCYTIC NEVI">MELANOCYTIC NEVI</option>
+                    <option value="VASCULAR LESIONS">VASCULAR LESIONS</option>
+                </select><br><br>
+                <button type="submit">Classify Image</button>
+            </div>
+        </form>
+        {% if feedback %}
+        <div class="feedback {% if feedback == 'ResNet101: Oops :( I hope I can do better next time' %}error{% endif %}">
+            <p><strong>Real Category:</strong> {{ real_category }}</p>
+            <p><strong>Prediction:</strong> {{ predicted_category }}</p>
+            <p>{{ feedback }}</p>
+        </div>
+        {% endif %}
+    </div>
+    <script>
+        let selectedImage = null;  // Variable to track the selected image
+        function selectImage(imgElement) {
+            // If the clicked image is already selected, deselect it
+            if (imgElement === selectedImage) {
+                imgElement.classList.remove('selected');
+                var radioButton = imgElement.nextElementSibling;  // Find the corresponding radio button
+                radioButton.checked = false;
+                selectedImage = null;  // Reset the selected image tracker
+            } else {
+                // Deselect the previously selected image (if any)
+                if (selectedImage !== null) {
+                    selectedImage.classList.remove('selected');
+                    var previousRadioButton = selectedImage.nextElementSibling;
+                    previousRadioButton.checked = false;
+                }
+                // Select the clicked image and apply the 'selected' class for the border
+                imgElement.classList.add('selected');
+                // Mark the radio button as selected
+                var radioButton = imgElement.nextElementSibling;  // Find the corresponding radio button
+                radioButton.checked = true;
+                // Update the selected image tracker
+                selectedImage = imgElement;
+            }
+        }
+        function validateForm() {
+            var imageChoice = document.querySelector('input[name="image_choice"]:checked');
+            var imageFile = document.querySelector('input[name="image_file"]').files[0];
+            var realCategory = document.getElementById('real_category').value.trim();
+            if ((imageChoice && imageFile) || (!imageChoice && !imageFile)) {
+                alert("Please either select an image or upload your own image, but not both.");
+                return false;
+            }
+            if (imageFile && !realCategory) {
+                alert("Please select the real category for the uploaded image.");
+                return false;
+            }
+            return true;
+        }
+    </script>
+</body>
+</html>