Spaces:

Inquisiter
/

Dermatrix

Runtime error

App Files Files Community

Inquisiter07 commited on Apr 11

Commit

07da06b

1 Parent(s): d7e9642

Deploy Flask skin disease app with Grad-CAM

Browse files

Files changed (6) hide show

.gitignore +10 -0
Dockerfile +19 -0
requirements.txt +8 -0
templates/index.html +289 -0
templates/result.html +655 -0
templates/upload.html +517 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,10 @@

+__pycache__/
+*.pyc
+*.pyo
+*.pth
+env/
+.venv/
+*.env
+.DS_Store
+.cache/

Dockerfile ADDED Viewed

	@@ -0,0 +1,19 @@

+FROM python:3.11
+WORKDIR /app
+# Copy all code
+COPY . .
+# Install dependencies
+RUN pip install --upgrade pip && pip install -r requirements.txt
+# Expose port for Hugging Face
+EXPOSE 7860
+# Run Flask
+ENV FLASK_APP=app.py
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_RUN_PORT=7860
+CMD ["flask", "run"]

requirements.txt ADDED Viewed

	@@ -0,0 +1,8 @@

+flask
+torch
+transformers
+torchvision
+huggingface_hub
+Pillow
+torchcam

templates/index.html ADDED Viewed

	@@ -0,0 +1,289 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>SkinAI</title>
+  <style>
+    /* Reset */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #ffffff;
+      color: #000;
+    }
+    /* Top Navigation with Enhanced Hover Effects */
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 15px 5%;
+      background-color: #fff;
+      border-bottom: 1px solid #ccc;
+      position: relative;
+      z-index: 10;
+    }
+    .logo {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #333;
+    }
+    nav a {
+      text-decoration: none;
+      color: #333;
+      margin-left: 20px;
+      font-weight: 500;
+      padding: 5px 0;
+      position: relative;
+      transition: color 0.3s ease;
+    }
+    /* Underline hover effect for nav links */
+    nav a:after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background-color: #007BFF;
+      transition: width 0.3s ease;
+    }
+    nav a:hover {
+      color: #007BFF;
+      text-decoration: none;
+    }
+    nav a:hover:after {
+      width: 100%;
+    }
+    .help-btn {
+      background-color: #007BFF;
+      color: #fff;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-left: 20px;
+      transition: all 0.3s ease;
+    }
+    .help-btn:hover {
+      background-color: #0056b3;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0,123,255,0.3);
+    }
+    /* Hero Section with Video Background */
+    .hero {
+      position: relative;
+      height: 60vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 0 5%;
+      overflow: hidden; /* Ensure video doesn't spill out */
+    }
+    /* Video Background Styling */
+    .video-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover; /* Cover the entire container */
+      z-index: 1;
+    }
+    .hero-overlay {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      background-color: rgba(0,0,0,0.4); /* Dark overlay for readability */
+      z-index: 2;
+    }
+    .hero-content {
+      position: relative; /* So it sits on top of the overlay */
+      color: #fff;
+      max-width: 600px;
+      z-index: 3; /* Ensure content is above video and overlay */
+    }
+    .hero-content h1 {
+      font-size: 2.5rem;
+      margin-bottom: 15px;
+      font-weight: 700;
+    }
+    .hero-content p {
+      font-size: 1.1rem;
+      margin-bottom: 20px;
+    }
+    .upload-btn {
+      background-color: #007BFF;
+      color: #fff;
+      border: none;
+      padding: 12px 24px;
+      font-size: 1rem;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .upload-btn:hover {
+      background-color: #0056b3;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,123,255,0.4);
+    }
+    /* Benefits Section with Enhanced Card Hover Effects */
+    .benefits {
+      padding: 60px 5%;
+      text-align: center;
+    }
+    .benefits h2 {
+      font-size: 2rem;
+      margin-bottom: 40px;
+      font-weight: 700;
+    }
+    .benefit-cards {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 30px;
+    }
+    .card {
+      flex: 1 1 250px;
+      max-width: 300px;
+      background-color: #f9f9f9;
+      border-radius: 8px;
+      padding: 25px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      transition: all 0.3s ease;
+      border-bottom: 3px solid transparent;
+    }
+    /* Card hover effects */
+    .card:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
+      border-bottom: 3px solid #007BFF;
+      background-color: #fff;
+    }
+    .card h3 {
+      margin-bottom: 15px;
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: #333;
+      transition: color 0.3s ease;
+    }
+    .card:hover h3 {
+      color: #007BFF;
+    }
+    .card p {
+      font-size: 0.95rem;
+      line-height: 1.4;
+      color: #555;
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+      .hero {
+        height: 50vh;
+      }
+      .hero-content h1 {
+        font-size: 2rem;
+      }
+      .benefits h2 {
+        font-size: 1.7rem;
+      }
+      .card {
+        margin: 0 auto;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Top Navigation -->
+  <header>
+    <div class="logo">SkinAI</div>
+    <nav>
+      <a href="/" style="color: #007BFF;">Home</a>
+      <a href="/upload">Upload</a>
+      <a href="/result">Results</a>
+      <a href="#">Contact</a>
+      <button class="help-btn">Help</button>
+    </nav>
+  </header>
+  <!-- Hero Section with Video Background -->
+  <section class="hero">
+    <!-- Video Background -->
+    <video class="video-bg" autoplay muted loop>
+      <source src="{{ url_for('static', filename='videos/background-video.mp4') }}" type="video/mp4">
+      <!-- Add fallback sources if needed -->
+      <source src="{{ url_for('static', filename='videos/background-video.webm') }}" type="video/webm">
+      <!-- Fallback for browsers that don't support video -->
+      Your browser does not support the video tag.
+    </video>
+    <div class="hero-overlay"></div>
+    <div class="hero-content">
+      <h1>Identify Skin Issues Instantly</h1>
+      <p>Upload an image to get AI-driven skin health insights.</p>
+      <a href="/upload"><button class="upload-btn">Upload Image</button></a>
+    </div>
+  </section>
+  <!-- Benefits Section -->
+  <section class="benefits">
+    <h2>Benefits of the Service</h2>
+    <div class="benefit-cards">
+      <!-- Card 1 -->
+      <div class="card">
+        <h3>Accurate Identification</h3>
+        <p>Our tool analyzes skin images to provide precise detections, minimizing human error.</p>
+      </div>
+      <!-- Card 2 -->
+      <div class="card">
+        <h3>Diverse Skin Conditions</h3>
+        <p>Identify various issues like psoriasis, eczema, and more with our comprehensive database.</p>
+      </div>
+      <!-- Card 3 -->
+      <div class="card">
+        <h3>Speed and Efficiency</h3>
+        <p>Our service provides rapid results, enabling timely medical interventions.</p>
+      </div>
+    </div>
+  </section>
+  <script>
+    // JavaScript can be added here for additional functionality
+    document.querySelector('.upload-btn').addEventListener('click', function() {
+      window.location.href = '/upload';
+    });
+  </script>
+</body>
+</html>

templates/result.html ADDED Viewed

	@@ -0,0 +1,655 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>SkinAI - Results</title>
+  <style>
+    /* Reset */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f5f8fa;
+      color: #000;
+    }
+    /* Top Navigation with Enhanced Hover Effects */
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 15px 5%;
+      background-color: #fff;
+      border-bottom: 1px solid #ccc;
+      position: relative;
+      z-index: 10;
+    }
+    .logo {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #333;
+    }
+    nav a {
+      text-decoration: none;
+      color: #333;
+      margin-left: 20px;
+      font-weight: 500;
+      padding: 5px 0;
+      position: relative;
+      transition: color 0.3s ease;
+    }
+    /* Underline hover effect for nav links */
+    nav a:after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background-color: #007BFF;
+      transition: width 0.3s ease;
+    }
+    nav a:hover {
+      color: #007BFF;
+      text-decoration: none;
+    }
+    nav a:hover:after {
+      width: 100%;
+    }
+    .help-btn {
+      background-color: #007BFF;
+      color: #fff;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-left: 20px;
+      transition: all 0.3s ease;
+    }
+    .help-btn:hover {
+      background-color: #0056b3;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0,123,255,0.3);
+    }
+    /* Main Content Area */
+    .container {
+      max-width: 1200px;
+      margin: 40px auto;
+      padding: 0 20px;
+    }
+    /* Results Section */
+    .results-section {
+      background-color: #fff;
+      border-radius: 10px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+      padding: 40px;
+      margin-bottom: 40px;
+    }
+    .results-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 30px;
+    }
+    .results-header h1 {
+      font-size: 2rem;
+      color: #333;
+    }
+    .results-header .new-analysis {
+      background-color: #f8f9fa;
+      color: #333;
+      border: 1px solid #ddd;
+      padding: 8px 16px;
+      border-radius: 4px;
+      text-decoration: none;
+      transition: all 0.3s ease;
+    }
+    .results-header .new-analysis:hover {
+      background-color: #e9ecef;
+      transform: translateY(-2px);
+    }
+    /* Results Grid */
+    .results-grid {
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+      gap: 30px;
+    }
+    /* Image Section */
+    .image-section {
+      background-color: #f8f9fa;
+      border-radius: 8px;
+      padding: 20px;
+      text-align: center;
+    }
+    .image-section img {
+      max-width: 100%;
+      max-height: 300px;
+      border-radius: 8px;
+      margin-bottom: 15px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    .image-caption {
+      font-size: 0.9rem;
+      color: #666;
+    }
+    /* Analysis Section */
+    .analysis-section {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .analysis-card {
+      background-color: #f8f9fa;
+      border-radius: 8px;
+      padding: 20px;
+      border-left: 4px solid #007BFF;
+    }
+    .analysis-card h2 {
+      font-size: 1.4rem;
+      color: #333;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .confidence-badge {
+      background-color: #e6f4ff;
+      color: #0066cc;
+      font-size: 0.9rem;
+      padding: 4px 12px;
+      border-radius: 20px;
+      font-weight: normal;
+    }
+    .analysis-card p {
+      font-size: 1rem;
+      color: #555;
+      line-height: 1.6;
+      margin-bottom: 15px;
+    }
+    /* Recommendations List */
+    .recommendations-list {
+      margin-top: 10px;
+    }
+    .recommendations-list h3 {
+      font-size: 1.1rem;
+      color: #333;
+      margin-bottom: 15px;
+    }
+    .recommendations-list ul {
+      padding-left: 20px;
+    }
+    .recommendations-list li {
+      margin-bottom: 10px;
+      line-height: 1.5;
+      font-size: 0.95rem;
+      color: #444;
+    }
+    /* Other Possible Conditions */
+    .other-conditions {
+      margin-top: 20px;
+    }
+    .other-conditions h3 {
+      font-size: 1.1rem;
+      color: #333;
+      margin-bottom: 15px;
+    }
+    .condition-bars {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .condition-bar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .condition-name {
+      min-width: 100px;
+      font-size: 0.9rem;
+    }
+    .progress-bar {
+      flex-grow: 1;
+      height: 10px;
+      background-color: #e9ecef;
+      border-radius: 5px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background-color: #007BFF;
+    }
+    .condition-percentage {
+      font-size: 0.9rem;
+      color: #666;
+      min-width: 50px;
+      text-align: right;
+    }
+    /* Q&A Section */
+    .qa-section {
+      background-color: #fff;
+      border-radius: 10px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+      padding: 40px;
+    }
+    .qa-section h2 {
+      font-size: 1.6rem;
+      color: #333;
+      margin-bottom: 25px;
+    }
+    .qa-form {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 30px;
+    }
+    .qa-input {
+      flex-grow: 1;
+      padding: 12px 15px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 1rem;
+    }
+    .qa-btn {
+      background-color: #007BFF;
+      color: #fff;
+      border: none;
+      padding: 0 20px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .qa-btn:hover {
+      background-color: #0056b3;
+    }
+    .qa-response {
+      background-color: #f8f9fa;
+      border-radius: 8px;
+      padding: 20px;
+      border-left: 4px solid #28a745;
+      margin-bottom: 20px;
+      display: none; /* Initially hidden */
+    }
+    .qa-response h3 {
+      font-size: 1.1rem;
+      color: #333;
+      margin-bottom: 10px;
+    }
+    .qa-response p {
+      font-size: 0.95rem;
+      color: #555;
+      line-height: 1.6;
+    }
+    .disclaimer {
+      margin-top: 20px;
+      padding: 15px;
+      background-color: #fff8e1;
+      border-left: 4px solid #ffc107;
+      font-size: 0.9rem;
+      color: #6c4a00;
+      line-height: 1.5;
+    }
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 20px;
+      margin-top: 40px;
+      color: #777;
+      font-size: 0.9rem;
+    }
+    /* Loader */
+    .loader-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 0;
+    }
+    .loader {
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #007BFF;
+      border-radius: 50%;
+      width: 30px;
+      height: 30px;
+      animation: spin 1s linear infinite;
+      margin-right: 10px;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+      .container {
+        padding: 0 15px;
+        margin: 20px auto;
+      }
+      .results-section, .qa-section {
+        padding: 30px 15px;
+      }
+      .results-grid {
+        grid-template-columns: 1fr;
+      }
+      .results-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Top Navigation -->
+  <header>
+    <div class="logo">SkinAI</div>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/upload">Upload</a>
+      <a href="/result" style="color: #007BFF;">Results</a>
+      <a href="#">Contact</a>
+      <button class="help-btn">Help</button>
+    </nav>
+  </header>
+  <div class="container">
+    <!-- Results Section -->
+    <section class="results-section">
+      <div class="results-header">
+        <h1>Analysis Results</h1>
+        <a href="upload" class="new-analysis">Upload New Image</a>
+      </div>
+      <div class="results-grid">
+        <!-- Image Section -->
+        <div class="image-section">
+          <img id="analyzed-image" src="#" alt="Analyzed Skin Image">
+          <div class="image-caption">Uploaded on <span id="upload-date">April 8, 2025</span></div>
+        </div>
+        <!-- Analysis Section -->
+        <div class="analysis-section">
+          <div class="analysis-card">
+            <h2>
+              <span id="condition-name">Loading result...</span>
+              <span class="confidence-badge" id="confidence-level">--</span>
+            </h2>
+            <p id="condition-description">Analyzing your image...</p>
+            <!-- Loader (initially shown) -->
+            <div class="loader-container" id="analysis-loader">
+              <div class="loader"></div>
+              <span>Processing image with AI...</span>
+            </div>
+            <!-- Recommendations (initially hidden) -->
+            <div class="recommendations-list" id="recommendations-section" style="display: none;">
+              <h3>Recommendations</h3>
+              <ul id="recommendations-list">
+                <!-- Recommendations will be inserted here -->
+              </ul>
+            </div>
+            <!-- Other Possible Conditions -->
+            <div class="other-conditions" id="other-conditions-section" style="display: none;">
+              <h3>Other Possible Conditions</h3>
+              <div class="condition-bars" id="condition-bars">
+                <!-- Condition bars will be inserted here -->
+              </div>
+            </div>
+          </div>
+          <div class="disclaimer">
+            <strong>Disclaimer:</strong> This analysis is for informational purposes only and should not replace professional medical advice. Please consult a healthcare provider for proper diagnosis and treatment.
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Q&A Section -->
+    <section class="qa-section">
+      <h2>Ask About Your Condition</h2>
+      <div class="qa-form">
+        <input type="text" class="qa-input" id="question-input" placeholder="Ask a question about your skin condition...">
+        <button class="qa-btn" id="ask-btn">Ask</button>
+      </div>
+      <!-- QA Response (initially hidden) -->
+      <div class="qa-response" id="qa-response">
+        <h3>Response</h3>
+        <p id="qa-answer">The answer will appear here.</p>
+      </div>
+      <div class="disclaimer">
+        <strong>Important:</strong> The AI assistant provides general information about skin conditions. Your specific case may vary, and medical professionals should be consulted for personalized advice and treatment.
+      </div>
+    </section>
+  </div>
+  <footer>
+    <p>© 2025 SkinAI. All rights reserved. For educational purposes only. Not a substitute for professional medical advice.</p>
+  </footer>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      // Retrieve data from sessionStorage (set during upload)
+      const imageData = sessionStorage.getItem('analyzedImage');
+      const analysisResult = JSON.parse(sessionStorage.getItem('analysisResult') || '{}');
+      const condition = sessionStorage.getItem('detectedCondition') || '';
+      // Set the image
+      if (imageData) {
+        document.getElementById('analyzed-image').src = imageData;
+      } else {
+        document.getElementById('analyzed-image').src = "/api/placeholder/400/320";
+        document.getElementById('analyzed-image').alt = "No image available";
+      }
+      // Set the current date
+      const now = new Date();
+      document.getElementById('upload-date').textContent = now.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      });
+      // Process and display results if available
+      if (Object.keys(analysisResult).length > 0) {
+        displayResults(analysisResult);
+      } else {
+        // If no results in session storage, check URL params
+        // This allows direct navigation to this page with the results as parameters
+        const urlParams = new URLSearchParams(window.location.search);
+        const resultParam = urlParams.get('result');
+        if (resultParam) {
+          try {
+            const decodedResult = JSON.parse(decodeURIComponent(resultParam));
+            displayResults(decodedResult);
+          } catch (e) {
+            console.error("Failed to parse result from URL parameter", e);
+            document.getElementById('condition-name').textContent = "No results available";
+            document.getElementById('condition-description').textContent = "Please upload an image for analysis.";
+            document.getElementById('analysis-loader').style.display = "none";
+          }
+        } else {
+          // No results available - show message
+          document.getElementById('condition-name').textContent = "No results available";
+          document.getElementById('condition-description').textContent = "Please upload an image for analysis.";
+          document.getElementById('analysis-loader').style.display = "none";
+        }
+      }
+      // Handle Q&A form submission
+      document.getElementById('ask-btn').addEventListener('click', function() {
+        askQuestion();
+      });
+      document.getElementById('question-input').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+          askQuestion();
+        }
+      });
+      // Function to display analysis results
+      function displayResults(result) {
+        // Hide loader
+        document.getElementById('analysis-loader').style.display = "none";
+        // Display primary condition and confidence
+        document.getElementById('condition-name').textContent = result.prediction || "Unknown Condition";
+        const confidencePercent = result.confidence ? Math.round(result.confidence * 100) : 0;
+        document.getElementById('confidence-level').textContent = `${confidencePercent}% Confidence`;
+        // Display description
+        document.getElementById('condition-description').textContent = result.description ||
+          "No detailed information available for this condition.";
+        // Display recommendations
+        if (result.recommendations && result.recommendations.length > 0) {
+          const recommendationsList = document.getElementById('recommendations-list');
+          recommendationsList.innerHTML = '';
+          result.recommendations.forEach(rec => {
+            const li = document.createElement('li');
+            li.textContent = rec;
+            recommendationsList.appendChild(li);
+          });
+          document.getElementById('recommendations-section').style.display = "block";
+        }
+        // Display other possible conditions
+        if (result.topConditions && result.topConditions.length > 0) {
+          const conditionBars = document.getElementById('condition-bars');
+          conditionBars.innerHTML = '';
+          // Skip the first condition (already shown as primary) if it's the same as the top result
+          const startIndex = (result.topConditions[0][0] === result.prediction) ? 1 : 0;
+          // Display up to 4 additional conditions
+          for (let i = startIndex; i < Math.min(startIndex + 4, result.topConditions.length); i++) {
+            const condition = result.topConditions[i];
+            const conditionName = condition[0];
+            const probability = condition[1];
+            const percentage = Math.round(probability * 100);
+            const conditionBar = document.createElement('div');
+            conditionBar.className = 'condition-bar';
+            conditionBar.innerHTML = `
+              <div class="condition-name">${conditionName}</div>
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: ${percentage}%"></div>
+              </div>
+              <div class="condition-percentage">${percentage}%</div>
+            `;
+            conditionBars.appendChild(conditionBar);
+          }
+          document.getElementById('other-conditions-section').style.display = "block";
+        }
+        // Store detected condition for Q&A
+        sessionStorage.setItem('detectedCondition', result.prediction || '');
+      }
+      // Function to handle Q&A
+      function askQuestion() {
+        const questionInput = document.getElementById('question-input');
+        const question = questionInput.value.trim();
+        if (!question) return;
+        // Get the detected condition
+        const detectedCondition = sessionStorage.getItem('detectedCondition') || '';
+        // Show loading indication
+        document.getElementById('qa-answer').textContent = "Getting answer...";
+        document.getElementById('qa-response').style.display = "block";
+        // Call the backend API
+        fetch('/ask', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            question: question,
+            condition: detectedCondition
+          })
+        })
+        .then(response => response.json())
+        .then(data => {
+          document.getElementById('qa-answer').textContent = data.answer ||
+            "I couldn't generate an answer for that question.";
+        })
+        .catch(error => {
+          console.error('Error:', error);
+          document.getElementById('qa-answer').textContent =
+            "Sorry, there was an error processing your question. Please try again later.";
+        });
+        // Clear the input
+        questionInput.value = '';
+      }
+    });
+  </script>
+</body>
+</html>

templates/upload.html ADDED Viewed

	@@ -0,0 +1,517 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>SkinAI - Upload</title>
+  <style>
+    /* Reset */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f5f8fa;
+      color: #000;
+    }
+    /* Top Navigation with Enhanced Hover Effects */
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 15px 5%;
+      background-color: #fff;
+      border-bottom: 1px solid #ccc;
+      position: relative;
+      z-index: 10;
+    }
+    .logo {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #333;
+    }
+    nav a {
+      text-decoration: none;
+      color: #333;
+      margin-left: 20px;
+      font-weight: 500;
+      padding: 5px 0;
+      position: relative;
+      transition: color 0.3s ease;
+    }
+    /* Underline hover effect for nav links */
+    nav a:after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background-color: #007BFF;
+      transition: width 0.3s ease;
+    }
+    nav a:hover {
+      color: #007BFF;
+      text-decoration: none;
+    }
+    nav a:hover:after {
+      width: 100%;
+    }
+    .help-btn {
+      background-color: #007BFF;
+      color: #fff;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-left: 20px;
+      transition: all 0.3s ease;
+    }
+    .help-btn:hover {
+      background-color: #0056b3;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0,123,255,0.3);
+    }
+    /* Main Content Area */
+    .container {
+      max-width: 1200px;
+      margin: 40px auto;
+      padding: 0 20px;
+    }
+    /* Upload Section */
+    .upload-section {
+      background-color: #fff;
+      border-radius: 10px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+      padding: 40px;
+      margin-bottom: 40px;
+      text-align: center;
+    }
+    .upload-section h1 {
+      font-size: 2rem;
+      color: #333;
+      margin-bottom: 20px;
+    }
+    .upload-section p {
+      font-size: 1.1rem;
+      color: #666;
+      margin-bottom: 30px;
+      max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    /* Upload Area */
+    .upload-area {
+      border: 2px dashed #aac;
+      border-radius: 10px;
+      padding: 50px 20px;
+      background-color: #f8faff;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      margin-bottom: 30px;
+    }
+    .upload-area:hover {
+      border-color: #007BFF;
+      background-color: #f0f8ff;
+    }
+    .upload-area.active {
+      border-color: #007BFF;
+      background-color: #e6f4ff;
+    }
+    .upload-icon {
+      font-size: 3rem;
+      color: #007BFF;
+      margin-bottom: 15px;
+    }
+    .upload-text {
+      font-size: 1.2rem;
+      color: #666;
+      margin-bottom: 10px;
+    }
+    .upload-subtext {
+      font-size: 0.9rem;
+      color: #888;
+    }
+    /* File Input */
+    #file-input {
+      display: none;
+    }
+    /* Preview Area */
+    .preview-area {
+      display: none;
+      margin: 30px auto;
+      max-width: 500px;
+    }
+    .preview-area img {
+      max-width: 100%;
+      max-height: 400px;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+    .preview-info {
+      margin-top: 15px;
+      font-size: 0.9rem;
+      color: #666;
+    }
+    /* Button Styles */
+    .btn {
+      background-color: #007BFF;
+      color: #fff;
+      border: none;
+      padding: 12px 24px;
+      font-size: 1rem;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: inline-block;
+    }
+    .btn:hover {
+      background-color: #0056b3;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,123,255,0.4);
+    }
+    .btn-secondary {
+      background-color: #6c757d;
+      margin-right: 10px;
+    }
+    .btn-secondary:hover {
+      background-color: #5a6268;
+    }
+    /* Instructions Section */
+    .instructions {
+      background-color: #fff;
+      border-radius: 10px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+      padding: 30px;
+    }
+    .instructions h2 {
+      font-size: 1.5rem;
+      color: #333;
+      margin-bottom: 20px;
+    }
+    .instruction-cards {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+    .instruction-card {
+      flex: 1 1 300px;
+      background-color: #f9f9f9;
+      border-radius: 8px;
+      padding: 20px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      transition: all 0.3s ease;
+      border-left: 3px solid transparent;
+    }
+    .instruction-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 15px rgba(0,0,0,0.1);
+      border-left: 3px solid #007BFF;
+    }
+    .instruction-card h3 {
+      font-size: 1.1rem;
+      color: #333;
+      margin-bottom: 10px;
+    }
+    .instruction-card p {
+      font-size: 0.95rem;
+      color: #666;
+      line-height: 1.5;
+    }
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 20px;
+      margin-top: 40px;
+      color: #777;
+      font-size: 0.9rem;
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+      .container {
+        padding: 0 15px;
+        margin: 20px auto;
+      }
+      .upload-section {
+        padding: 30px 15px;
+      }
+      .upload-section h1 {
+        font-size: 1.7rem;
+      }
+      .upload-area {
+        padding: 30px 15px;
+      }
+      .instructions {
+        padding: 20px 15px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Top Navigation -->
+  <header>
+    <div class="logo">SkinAI</div>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/upload" style="color: #007BFF;">Upload</a>
+      <a href="/result">Results</a>
+      <a href="#">Contact</a>
+      <button class="help-btn">Help</button>
+    </nav>
+  </header>
+  <div class="container">
+    <!-- Upload Section -->
+    <section class="upload-section">
+      <h1>Upload Your Skin Image</h1>
+      <p>Our AI will analyze your image and provide insights about potential skin conditions. Please upload a clear, well-lit photo of the affected area.</p>
+      <!-- Upload Area -->
+      <div class="upload-area" id="drop-area">
+        <div class="upload-icon">📤</div>
+        <div class="upload-text">Drag & Drop your image here</div>
+        <div class="upload-subtext">or click to browse files</div>
+        <input type="file" id="file-input" accept="image/*">
+      </div>
+      <!-- Preview Area (initially hidden) -->
+      <div class="preview-area" id="preview-area">
+        <img id="preview-image" src="#" alt="Preview">
+        <div class="preview-info" id="file-info">File information will appear here</div>
+        <div style="margin-top: 20px;">
+          <button class="btn btn-secondary" id="cancel-btn">Cancel</button>
+          <button class="btn" id="analyze-btn">Analyze Image</button>
+        </div>
+      </div>
+    </section>
+    <!-- Instructions Section -->
+    <section class="instructions">
+      <h2>Best Practices for Accurate Results</h2>
+      <div class="instruction-cards">
+        <!-- Instruction 1 -->
+        <div class="instruction-card">
+          <h3>Good Lighting</h3>
+          <p>Ensure your photo is taken in bright, natural light. Avoid shadows or harsh lighting that might distort colors or details.</p>
+        </div>
+        <!-- Instruction 2 -->
+        <div class="instruction-card">
+          <h3>Clear Focus</h3>
+          <p>Take a clear, in-focus image of the affected area. Blurry images may lead to inaccurate results.</p>
+        </div>
+        <!-- Instruction 3 -->
+        <div class="instruction-card">
+          <h3>Proper Distance</h3>
+          <p>Capture the image from about 6-12 inches away to show sufficient detail while maintaining context of the affected area.</p>
+        </div>
+      </div>
+    </section>
+  </div>
+  <footer>
+    <p>© 2025 SkinAI. All rights reserved. For educational purposes only. Not a substitute for professional medical advice.</p>
+  </footer>
+  <script>
+    // JavaScript for handling file uploads and preview
+   // JavaScript for handling file uploads, preview, and analysis
+document.addEventListener('DOMContentLoaded', function() {
+  const dropArea = document.getElementById('drop-area');
+  const fileInput = document.getElementById('file-input');
+  const previewArea = document.getElementById('preview-area');
+  const previewImage = document.getElementById('preview-image');
+  const fileInfo = document.getElementById('file-info');
+  const cancelBtn = document.getElementById('cancel-btn');
+  const analyzeBtn = document.getElementById('analyze-btn');
+  // Open file browser when clicking the upload area
+  dropArea.addEventListener('click', () => {
+    fileInput.click();
+  });
+  // Handle file selection
+  fileInput.addEventListener('change', handleFiles);
+  // Prevent default drag behaviors
+  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    dropArea.addEventListener(eventName, preventDefaults, false);
+    document.body.addEventListener(eventName, preventDefaults, false);
+  });
+  // Highlight drop area when dragging over it
+  ['dragenter', 'dragover'].forEach(eventName => {
+    dropArea.addEventListener(eventName, highlight, false);
+  });
+  ['dragleave', 'drop'].forEach(eventName => {
+    dropArea.addEventListener(eventName, unhighlight, false);
+  });
+  // Handle dropped files
+  dropArea.addEventListener('drop', handleDrop, false);
+  // Cancel button functionality
+  cancelBtn.addEventListener('click', () => {
+    resetUpload();
+  });
+  // Analyze button functionality - send to backend
+  analyzeBtn.addEventListener('click', () => {
+    sendImageForAnalysis();
+  });
+  // Functions
+  function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  function highlight() {
+    dropArea.classList.add('active');
+  }
+  function unhighlight() {
+    dropArea.classList.remove('active');
+  }
+  function handleDrop(e) {
+    const dt = e.dataTransfer;
+    const files = dt.files;
+    handleFiles(files);
+  }
+  function handleFiles(e) {
+    const files = this.files || e;
+    if (files && files[0]) {
+      const file = files[0];
+      // Check if it's an image
+      if (!file.type.match('image.*')) {
+        alert('Please upload an image file');
+        return;
+      }
+      // Display file info
+      const size = (file.size / 1024).toFixed(2);
+      fileInfo.textContent = `${file.name} (${size} KB)`;
+      // Show preview
+      const reader = new FileReader();
+      reader.onload = function(e) {
+        previewImage.src = e.target.result;
+        dropArea.style.display = 'none';
+        previewArea.style.display = 'block';
+        // Store image data for results page
+        sessionStorage.setItem('analyzedImage', e.target.result);
+      }
+      reader.readAsDataURL(file);
+    }
+  }
+  function resetUpload() {
+    fileInput.value = '';
+    previewImage.src = '#';
+    previewArea.style.display = 'none';
+    dropArea.style.display = 'block';
+    // Clear session storage data
+    sessionStorage.removeItem('analyzedImage');
+    sessionStorage.removeItem('analysisResult');
+    sessionStorage.removeItem('detectedCondition');
+  }
+  function sendImageForAnalysis() {
+    // Show loading state
+    analyzeBtn.disabled = true;
+    analyzeBtn.textContent = 'Analyzing...';
+    // Get the file
+    const file = fileInput.files[0];
+    if (!file) {
+      alert('Please select an image first');
+      analyzeBtn.disabled = false;
+      analyzeBtn.textContent = 'Analyze Image';
+      return;
+    }
+    // Create FormData object
+    const formData = new FormData();
+    formData.append('image', file);
+    // Send to backend
+    fetch('/analyze',  {
+      method: 'POST',
+      body: formData
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      return response.json();
+    })
+    .then(result => {
+      // Store result in session storage
+      sessionStorage.setItem('analysisResult', JSON.stringify(result));
+      sessionStorage.setItem('detectedCondition', result.prediction || '');
+      // Redirect to results page
+      window.location.href = 'result';
+    })
+    .catch(error => {
+      console.error('Error:', error);
+      alert('There was an error analyzing your image. Please try again.');
+      // Reset button state
+      analyzeBtn.disabled = false;
+      analyzeBtn.textContent = 'Analyze Image';
+    });
+  }
+});
+  </script>
+</body>
+</html>