Delete Dermatrix

Dermatrix/.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

Dermatrix/.gitignore

@@ -1,10 +0,0 @@
-__pycache__/
-*.pyc
-*.pyo
-*.pth
-env/
-.venv/
-*.env
-.DS_Store
-.cache/
-

Dermatrix/Dockerfile

@@ -1,19 +0,0 @@
-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"]
-

Dermatrix/README.md

@@ -1,11 +0,0 @@
----
-title: Dermatrix
-emoji: 💻
-colorFrom: gray
-colorTo: purple
-sdk: docker
-pinned: false
-license: apache-2.0
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

Dermatrix/app.py

@@ -1,132 +0,0 @@
-from flask import Flask, request, jsonify, render_template, send_from_directory
-from transformers import AutoModelForImageClassification, AutoImageProcessor
-from huggingface_hub import InferenceClient
-from PIL import Image
-import torch
-import os
-
-app = Flask(__name__)
-
-# =======================================
-# 🔐 Hugging Face LLM Token + InferenceClient
-# =======================================
-HUGGINGFACE_TOKEN = os.environ.get("HUGGINGFACE_TOKEN")
-
-client = InferenceClient(
-    model="mistralai/Mistral-7B-Instruct-v0.1",
-    token=HUGGINGFACE_TOKEN
-)
-
-# =======================================
-# 🧠 Load Skin Disease Model
-# =======================================
-print("Loading skin condition classifier...")
-model_name = "Jayanth2002/dinov2-base-finetuned-SkinDisease"
-image_model = AutoModelForImageClassification.from_pretrained(model_name)
-processor = AutoImageProcessor.from_pretrained(model_name)
-
-# Class labels
-class_names = [
-    'Basal Cell Carcinoma', 'Darier_s Disease', 'Epidermolysis Bullosa Pruriginosa',
-    'Hailey-Hailey Disease', 'Herpes Simplex', 'Impetigo', 'Larva Migrans',
-    'Leprosy Borderline', 'Leprosy Lepromatous', 'Leprosy Tuberculoid', 'Lichen Planus',
-    'Lupus Erythematosus Chronicus Discoides', 'Melanoma', 'Molluscum Contagiosum',
-    'Mycosis Fungoides', 'Neurofibromatosis', 'Papilomatosis Confluentes And Reticulate',
-    'Pediculosis Capitis', 'Pityriasis Rosea', 'Porokeratosis Actinic', 'Psoriasis',
-    'Tinea Corporis', 'Tinea Nigra', 'Tungiasis', 'actinic keratosis', 'dermatofibroma',
-    'nevus', 'pigmented benign keratosis', 'seborrheic keratosis', 'squamous cell carcinoma',
-    'vascular lesion'
-]
-
-# =======================================
-# 🌐 Frontend Routes
-# =======================================
-@app.route("/")
-def index():
-    return render_template("index.html")
-
-@app.route("/upload")
-def upload():
-    return render_template("upload.html")
-
-@app.route("/result")
-def result():
-    return render_template("result.html")  # Notice: matches the filename "results.html" instead of "result.html"
-
-# =======================================
-# 📸 /analyze Route
-# =======================================
-@app.route('/analyze', methods=['POST'])
-def analyze():
-    if 'image' not in request.files:
-        return jsonify({"error": "No image uploaded"}), 400
-
-    image_file = request.files['image']
-    image = Image.open(image_file.stream).convert("RGB")
-    inputs = processor(images=image, return_tensors="pt")
-
-    with torch.no_grad():
-        logits = image_model(**inputs).logits
-        probs = torch.softmax(logits, dim=-1)[0]
-
-    top_idx = torch.argmax(probs).item()
-    top_conf = probs[top_idx].item()
-    prediction = class_names[top_idx]
-
-    top_conditions = sorted(
-        zip(class_names, probs.tolist()),
-        key=lambda x: x[1],
-        reverse=True
-    )[:5]
-
-    return jsonify({
-        "prediction": prediction,
-        "confidence": round(top_conf, 4),
-        "topConditions": [(name, round(prob, 4)) for name, prob in top_conditions],
-        "description": f"{prediction} is a skin condition. Please consult a medical professional.",
-        "recommendations": [
-            "Take a clearer image if unsure.",
-            "Consider visiting a dermatologist.",
-            "Avoid self-diagnosis or self-treatment."
-        ]
-    })
-
-# =======================================
-# 💬 /ask Route
-# =======================================
-@app.route('/ask', methods=['POST'])
-def ask():
-    data = request.json
-    question = data.get("question", "")
-    condition = data.get("condition", "")
-
-    if not question:
-        return jsonify({"answer": "Please ask a valid question."}), 400
-
-    messages = [
-        {
-            "role": "user",
-            "content": f"A user may have {condition}. They asked: '{question}'. Respond like a helpful AI medical assistant."
-        }
-    ]
-
-    try:
-        response = client.chat_completion(
-            messages=messages,
-            max_tokens=200
-        )
-        answer = response.choices[0]["message"]["content"]
-        return jsonify({"answer": answer.strip()})
-    except Exception as e:
-        return jsonify({"answer": f"Error communicating with Hugging Face: {e}"}), 500
-
-# Add route for placeholder images if needed
-@app.route('/api/placeholder/<width>/<height>')  
-def placeholder(width, height):
-    # This is a simple implementation - you might want to generate an actual placeholder image
-    # For now, we'll just serve a static placeholder
-    return send_from_directory('static/images', 'placeholder.jpg')
-
-
-if __name__ == '__main__':
-    app.run(debug=True)

Dermatrix/requirements.txt

@@ -1,8 +0,0 @@
-flask
-torch
-transformers
-torchvision
-huggingface_hub
-Pillow
-torchcam
-

Dermatrix/templates/index.html

@@ -1,289 +0,0 @@
-<!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>

Dermatrix/templates/result.html

@@ -1,655 +0,0 @@
-<!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>

Dermatrix/templates/upload.html

@@ -1,517 +0,0 @@
-<!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>