Upload 14 files

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+ENV PORT=8080
+
+CMD ["sh", "-c", "uvicorn app:app --host 0.0.0.0 --port $PORT"]

README.md

@@ -1,12 +1,108 @@
+# 🧬 CANLoc — Protein Subcellular Localization Predictor
+
+CANLoc is a production-ready machine learning web application for predicting the **subcellular localization of proteins** directly from amino acid sequences.  
+It provides accurate, fast, and interpretable predictions through a modern deep-learning–assisted pipeline and an interactive web interface.
+
+---
+
+## 🔬 Model Overview
+
+CANLoc combines:
+
+- **ESM2 (Transformer-based protein language model)**  
+  Used for extracting rich sequence embeddings without alignment.
+
+- **Mean pooling of residue embeddings**  
+  Produces fixed-length feature vectors.
+
+- **XGBoost classifier**  
+  Trained on curated protein datasets for robust multiclass prediction.
+
+### Predicted Classes
+- Cytoplasm  
+- Nucleus  
+- Membrane  
+- Mitochondria  
+
+Each prediction includes **class probabilities** and **confidence visualization.**
+
 ---
-title: Canloc
-emoji: 🏢
-colorFrom: indigo
-colorTo: green
-sdk: docker
-pinned: false
-license: apache-2.0
-short_description: web server for subcellular location of candida
+
+## 📊 Features
+
+- Single sequence prediction
+- Batch prediction via FASTA file upload
+- Probability bar chart and radar plot
+- Confidence-based interpretation
+- Clean, responsive bioinformatics-style UI
+- Dockerized for reproducible deployment
+- FastAPI backend + modern frontend
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## 🧪 Input Formats
+
+### Single Sequence
+Paste a raw amino acid sequence: MVKFKKYGIP...
+
+
+### FASTA File
+Upload a standard FASTA file with one or multiple sequences:
+sp|P25296|CANB_YEAST
+MSLIHPDTAKYPFKFEPF...
+
+
+---
+
+## 📈 Output Interpretation
+
+- **Predicted Location**  
+  The most probable subcellular class.
+
+- **Class Probabilities**  
+  Displayed as percentages for all four classes.
+
+- **Confidence Levels**
+  - High: ≥ 75%
+  - Medium: 60–75%
+  - Low: < 60% (interpret with caution)
+
+---
+
+## ⚙️ Evaluation & Validation
+
+The model was evaluated using:
+- Train/test split
+- 10-fold stratified cross-validation
+- Precision, recall, F1-score
+- Sensitivity and specificity analysis
+- ROC curves per class
+
+These evaluations confirm CANLoc’s reliability for academic/research workflows..
+
+
+---
+
+## 🚀 Deployment
+
+CANLoc is containerized and deployed using **Docker** and **Railway**.
+
+## 📄 License
+This project is licensed under the Apache License 2.0.
+
+>Free for academic and commercial use
+>Includes patent protection
+>No restrictions on deployment or modification
+
+See the LICENSE file for details.
+
+
+## 📬 Contact
+
+For questions, bug report or feedback:
+majidkhan>jssmsc@gmail.com
+
+## 📌 Citation
+
+If you use CANLoc in academic work, please cite appropriately.
+

app.py

@@ -0,0 +1,157 @@
+# ================================
+#  GLOBAL WARNING SUPPRESSION
+# ================================
+import warnings
+warnings.filterwarnings("ignore", category=UserWarning)
+warnings.filterwarnings("ignore", category=FutureWarning)
+warnings.filterwarnings("ignore", category=RuntimeWarning)
+warnings.filterwarnings("ignore", category=DeprecationWarning)
+warnings.simplefilter("ignore")
+
+# ================================
+#  IMPORTS
+# ================================
+import json
+import pickle
+import numpy as np
+import torch
+from io import StringIO
+from Bio import SeqIO
+
+from fastapi import FastAPI, Request, UploadFile, File
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+
+from transformers import AutoTokenizer, AutoModel
+
+# ================================
+#  FASTAPI INIT + MOUNTS
+# ================================
+app = FastAPI()
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+# ================================
+#  LOAD MODEL + TOKENIZER
+# ================================
+DEVICE = torch.device("cpu")
+
+tokenizer = AutoTokenizer.from_pretrained("facebook/esm2_t30_150M_UR50D")
+esm_model = AutoModel.from_pretrained("facebook/esm2_t30_150M_UR50D").to(DEVICE)
+esm_model.eval()
+
+with open("model.pkl", "rb") as f:
+  classifier = pickle.load(f)
+
+with open("label_map.json", "r") as f:
+  LABEL_MAP = json.load(f)
+
+INV_LABEL_MAP = {v: k for k, v in LABEL_MAP.items()}
+
+# ================================
+#  ESM2 EMBEDDING FUNCTION
+# ================================
+def embed_sequence(seq: str) -> np.ndarray:
+  seq = seq.strip()
+  inputs = tokenizer(seq, return_tensors="pt", add_special_tokens=True)
+  inputs = {k: v.to(DEVICE) for k, v in inputs.items()}
+
+  with torch.no_grad():
+    outputs = esm_model(**inputs)
+
+  token_emb = outputs.last_hidden_state.squeeze(0)
+  mean_emb = token_emb[1:-1].mean(dim=0)
+  return mean_emb.cpu().numpy().reshape(1, -1)
+
+# ================================
+#  PREDICT ONE SEQUENCE
+# ================================
+def run_single_prediction(seq: str):
+  emb = embed_sequence(seq)
+  probs = classifier.predict_proba(emb)[0]
+  pred_class = int(np.argmax(probs))
+  pred_label = INV_LABEL_MAP[pred_class]
+
+  return {
+    "prediction_label": pred_label,
+    "probabilities": {INV_LABEL_MAP[i]: float(p) for i, p in enumerate(probs)}
+  }
+
+# ================================
+#  PREDICT FASTA FILE
+# ================================
+def run_fasta_prediction(content: str):
+  results = []
+  handle = StringIO(content)
+
+  for record in SeqIO.parse(handle, "fasta"):
+    seq = str(record.seq).strip()
+    if not seq:
+      continue
+
+    emb = embed_sequence(seq)
+    probs = classifier.predict_proba(emb)[0]
+    pred_class = int(np.argmax(probs))
+    pred_label = INV_LABEL_MAP[pred_class]
+
+    results.append({
+      "sequence": record.id,
+      "length": len(seq),
+      "prediction_label": pred_label,
+      "probabilities": {INV_LABEL_MAP[i]: float(p) for i, p in enumerate(probs)}
+    })
+
+  return {"results": results}
+
+# ================================
+#  PAGE ROUTES
+# ================================
+@app.get("/", response_class=HTMLResponse)
+async def home(request: Request):
+  return templates.TemplateResponse("index.html", {"request": request})
+
+@app.get("/about", response_class=HTMLResponse)
+async def about(request: Request):
+  return templates.TemplateResponse("about.html", {"request": request})
+
+@app.get("/help", response_class=HTMLResponse)
+async def help_page(request: Request):
+  return templates.TemplateResponse("help.html", {"request": request})
+
+@app.get("/contact", response_class=HTMLResponse)
+async def contact(request: Request):
+  return templates.TemplateResponse("contact.html", {"request": request})
+
+# ================================
+#  API: UNIVERSAL SEQUENCE PREDICTION
+# ================================
+@app.post("/api/predict_sequence")
+async def api_predict_sequence(request: Request):
+  # 1. Try JSON
+  try:
+    data = await request.json()
+    if "sequence" in data:
+      return run_single_prediction(data["sequence"])
+  except Exception:
+    pass
+
+  # 2. Try FormData
+  try:
+    form = await request.form()
+    if "sequence" in form:
+      return run_single_prediction(form["sequence"])
+  except Exception:
+    pass
+
+  return {"error": "No sequence provided"}
+
+# ================================
+#  API: FASTA PREDICTION
+# ================================
+@app.post("/api/predict_fasta")
+async def api_predict_fasta(file: UploadFile = File(...)):
+  raw = await file.read()
+  content = raw.decode("utf-8", errors="ignore")
+  return run_fasta_prediction(content)

label_map.json

@@ -0,0 +1,6 @@
+{
+  "cytoplasm": 0,
+  "membrane": 1,
+  "mitochondria": 2,
+  "nucleus": 3
+}

model.pkl

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

requirements.txt

@@ -0,0 +1,12 @@
+numpy<2
+torch==2.2.2
+transformers==4.37.2
+tokenizers==0.15.2
+scikit-learn==1.3.2
+xgboost==2.0.3
+pydantic==1.10.14
+python-multipart
+jinja2
+biopython
+fastapi
+uvicorn

static/script.js

@@ -0,0 +1,389 @@
+let barChart = null;
+let radarChart = null;
+let bigBarChartObj = null;
+let bigRadarChartObj = null;
+let fastaResults = [];
+
+const API_BASE = ""; // same origin
+
+//------------------ Safe Fetch ------------------
+async function safeFetchJSON(url, options = {}) {
+  const res = await fetch(url, options);
+  const text = await res.text();
+
+  let data;
+  try {
+    data = JSON.parse(text);
+  } catch {
+    throw new Error(text || `HTTP ${res.status}`);
+  }
+  if (!res.ok) {
+    throw new Error(data.error || `HTTP ${res.status}`);  
+  }
+  return data;
+}
+
+// ------------------ INIT ------------------
+document.addEventListener("DOMContentLoaded", () => {
+  // Tabs
+  const tabSeq = document.getElementById("tab-seq");
+  const tabFasta = document.getElementById("tab-fasta");
+  const panelSeq = document.getElementById("panel-seq");
+  const panelFasta = document.getElementById("panel-fasta");
+
+  if (tabSeq && tabFasta && panelSeq && panelFasta) {
+    tabSeq.addEventListener("click", () => {
+      tabSeq.classList.add("active");
+      tabFasta.classList.remove("active");
+      panelSeq.classList.remove("hidden");
+      panelFasta.classList.add("hidden");
+    });
+
+    tabFasta.addEventListener("click", () => {
+      tabFasta.classList.add("active");
+      tabSeq.classList.remove("active");
+      panelFasta.classList.remove("hidden");
+      panelSeq.classList.add("hidden");
+    });
+  }
+
+  // Buttons
+  const predictBtn = document.getElementById("predictBtn");
+  if (predictBtn) predictBtn.addEventListener("click", predictSequence);
+
+  const predictFastaBtn = document.getElementById("predictFastaBtn");
+  if (predictFastaBtn) predictFastaBtn.addEventListener("click", predictFasta);
+
+  // FASTA modal close events
+  const fastaBackdrop = document.getElementById("fastaModalBackdrop");
+  const fastaClose = document.getElementById("fastaModalClose");
+  if (fastaBackdrop) fastaBackdrop.addEventListener("click", closeFastaModal);
+  if (fastaClose) fastaClose.addEventListener("click", closeFastaModal);
+
+  // Big chart click
+  const barCanvas = document.getElementById("barChart");
+  const radarCanvas = document.getElementById("radarChart");
+  if (barCanvas) barCanvas.addEventListener("click", openBigBar);
+  if (radarCanvas) radarCanvas.addEventListener("click", openBigRadar);
+});
+
+// ------------------ HELPERS ------------------
+function validateSequence(seq) {
+  const s = seq.trim().toUpperCase();
+  if (!s) return [false, "Sequence is empty."];
+  const validAA = /^[ACDEFGHIKLMNPQRSTVWYUBZX*]+$/;
+  if (!validAA.test(s)) return [false, "Invalid characters in sequence."];
+  if (s.length < 15) return [false, "Sequence too short (min 15 AA)."];
+  return [true, null];
+}
+
+// Capitalize class names
+function pretty(name) {
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+// Probability severity
+function getConfidenceMeta(maxProb) {
+  if (maxProb >= 0.75) return { color: "#4ade80", text: "High confidence" };
+  if (maxProb >= 0.6) return { color: "#facc15", text: "Medium confidence" };
+  return { color: "#f87171", text: "Low confidence – interpret cautiously" };
+}
+
+// Bar chart colors
+function buildBarColors(values) {
+  const max = Math.max(...values);
+  return values.map(v =>
+    v === max ? "rgba(45,212,191,0.95)" : "rgba(166,184,184,0.9)"
+  );
+}
+
+// Probability list builder
+function updateProbList(container, probs) {
+  if (!container) return;
+  container.innerHTML = "";
+  Object.entries(probs).forEach(([k, v]) => {
+    const div = document.createElement("div");
+    div.className = "prob-item";
+    const left = document.createElement("span");
+    left.textContent = pretty(k);        // CAPITALIZED
+    const right = document.createElement("span");
+    right.textContent = (v * 100).toFixed(2) + "%";   // PERCENT
+    div.appendChild(left);
+    div.appendChild(right);
+    container.appendChild(div);
+  });
+}
+
+// ------------------ CHART DRAWING ------------------
+function drawCharts(classLabels, rawValues) {
+  const barCanvas = document.getElementById("barChart");
+  const radarCanvas = document.getElementById("radarChart");
+  if (!barCanvas || !radarCanvas) return;
+
+  const labels = classLabels.map(pretty);  // CAPITALIZE
+  const values = rawValues;
+
+  if (barChart) barChart.destroy();
+  if (radarChart) radarChart.destroy();
+
+  // Bar Chart
+  barChart = new Chart(barCanvas.getContext("2d"), {
+    type: "bar",
+    data: {
+      labels,
+      datasets: [
+        {
+          data: values,
+          backgroundColor: buildBarColors(values),
+          borderRadius: 6
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: ctx => (ctx.parsed.y * 100).toFixed(2) + "%"  // PERCENT
+          }
+        }
+      },
+      scales: {
+        y: { beginAtZero: true, max: 1 },
+        x: { ticks: { color: "#e5e7eb" } }
+      }
+    }
+  });
+
+  // Radar Chart
+  radarChart = new Chart(radarCanvas.getContext("2d"), {
+    type: "radar",
+    data: {
+      labels,
+      datasets: [
+        {
+          data: values,
+          backgroundColor: "rgba(45,212,191,0.18)",
+          borderColor: "rgba(45,212,191,0.9)",
+          borderWidth: 2
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: ctx => (ctx.parsed.r * 100).toFixed(2) + "%"  // PERCENT
+          }
+        }
+      },
+      scales: {
+        r: {
+          beginAtZero: true,
+          max: 1,
+          grid: { color: "rgba(55,65,81,0.4)" },
+          angleLines: { color: "rgba(55,65,81,0.4)" },
+          pointLabels: { color: "#e5e7eb", font: { size: 16 } },
+          ticks: { display: false }
+        }
+      }
+    }
+  });
+}
+
+// ------------------ SINGLE SEQUENCE ------------------
+async function predictSequence() {
+  const seqInput = document.getElementById("sequenceInput");
+  const seq = seqInput.value.trim();
+
+  const [ok, err] = validateSequence(seq);
+  if (!ok) return alert(err);
+
+  const loading = document.getElementById("loadingSeq");
+  const resultCard = document.getElementById("seqResultCard");
+  const resultHeader = document.getElementById("seqResultHeader");
+  const warningEl = document.getElementById("seqConfidenceWarning");
+  const probList = document.getElementById("seqProbList");
+
+  loading.classList.remove("hidden");
+  resultCard.classList.add("hidden");
+
+  try {
+    const res = await fetch(`${API_BASE}/api/predict_sequence`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sequence: seq })
+    });
+    const data = await res.json();
+    loading.classList.add("hidden");
+
+    if (!res.ok || data.error) return alert(data.error || "Prediction failed.");
+
+    const label = pretty(data.prediction_label);  // CAPITALIZED
+    const probs = data.probabilities || {};
+    const labels = Object.keys(probs);
+    const values = labels.map(k => probs[k]);
+
+    const maxProb = Math.max(...values);
+    const meta = getConfidenceMeta(maxProb);
+
+    resultHeader.innerHTML = `<span style="color:${meta.color}">Predicted Location: ${label}</span>`;
+    warningEl.textContent = meta.text;
+    warningEl.style.color = meta.color;
+
+    updateProbList(probList, probs);
+    drawCharts(labels, values);
+    resultCard.classList.remove("hidden");
+
+  } catch (e) {
+    loading.classList.add("hidden");
+    alert("Server error: " + e);
+  }
+}
+
+// ------------------ FASTA ------------------
+async function predictFasta() {
+  const fileInput = document.getElementById("fastaFile");
+  const file = fileInput.files[0];
+
+  if (!file) return alert("Choose a FASTA file.");
+
+  const loading = document.getElementById("loadingFasta");
+  const wrapper = document.getElementById("fastaResultsWrapper");
+  const tbody = document.getElementById("fastaTableBody");
+
+  loading.classList.remove("hidden");
+  wrapper.classList.add("hidden");
+  tbody.innerHTML = "";
+  fastaResults = [];
+
+  try {
+    const form = new FormData();
+    form.append("file", file);
+
+    const res = await fetch(`${API_BASE}/api/predict_fasta`, {
+      method: "POST",
+      body: form
+    });
+    const data = await res.json();
+
+    loading.classList.add("hidden");
+
+    if (!res.ok || data.error) return alert(data.error || "FASTA read error.");
+
+    fastaResults = data.results;
+    renderFastaTable();
+    wrapper.classList.remove("hidden");
+
+  } catch (e) {
+    loading.classList.add("hidden");
+    alert("Server error: " + e);
+  }
+}
+
+function renderFastaTable() {
+  const tbody = document.getElementById("fastaTableBody");
+  tbody.innerHTML = "";
+
+  fastaResults.forEach((r, idx) => {
+    const probs = r.probabilities || {};
+    const maxProb = Math.max(...Object.values(probs));
+
+    const tr = document.createElement("tr");
+    tr.dataset.index = idx;
+    tr.innerHTML = `
+      <td>${idx + 1}</td>
+      <td>${r.sequence}</td>
+      <td>${r.length}</td>
+      <td>${pretty(r.prediction_label)}</td>
+      <td>${(maxProb * 100).toFixed(2)}%</td>
+    `;
+    tr.addEventListener("click", () => openFastaModal(idx));
+    tbody.appendChild(tr);
+  });
+}
+
+// FASTA modal (no charts)
+function openFastaModal(i) {
+  const r = fastaResults[i];
+  if (!r) return;
+
+  document.getElementById("fastaModalTitle").textContent =
+    `Sequence: ${r.sequence}`;
+
+  document.getElementById("fastaModalMeta").textContent =
+    `Length: ${r.length} | Predicted: ${pretty(r.prediction_label)}`;
+
+  updateProbList(document.getElementById("fastaProbList"), r.probabilities);
+
+  document.getElementById("fastaModal").classList.remove("hidden");
+}
+
+function closeFastaModal() {
+  document.getElementById("fastaModal").classList.add("hidden");
+}
+
+// ------------------ BIG CHART MODALS ------------------
+function openBigBar() {
+  if (!barChart) return;
+  const modal = document.getElementById("bigBarModal");
+  const ctx = document.getElementById("bigBarChart").getContext("2d");
+
+  if (bigBarChartObj) bigBarChartObj.destroy();
+
+  bigBarChartObj = new Chart(ctx, {
+    type: barChart.config.type,
+    data: barChart.config.data,
+    options: {
+      responsive: false,
+      animation: false,
+      scales: {
+        y: { beginAtZero: true, max: 1 },
+        x: { ticks: { color: "#e5e7eb" } }
+      }
+    }
+  });
+
+  modal.classList.remove("hidden");
+}
+
+function closeBigBar() {
+  document.getElementById("bigBarModal").classList.add("hidden");
+}
+
+function openBigRadar() {
+  if (!radarChart) return;
+  const modal = document.getElementById("bigRadarModal");
+  const ctx = document.getElementById("bigRadarChart").getContext("2d");
+
+  if (bigRadarChartObj) bigRadarChartObj.destroy();
+
+  bigRadarChartObj = new Chart(ctx, {
+    type: radarChart.config.type,
+    data: radarChart.config.data,
+    options: {
+      responsive: false,
+      animation: false,
+      scales: {
+        r: {
+          beginAtZero: true,
+          max: 1,
+          grid: { color: "rgba(55,65,81,0.4)" },
+          angleLines: { color: "rgba(55,65,81,0.4)" },
+          pointLabels: { color: "#e4e4e4ff", font: { size: 18 } },
+          ticks: { display: false }
+        }
+      }
+    }
+  });
+
+  modal.classList.remove("hidden");
+}
+
+function closeBigRadar() {
+  document.getElementById("bigRadarModal").classList.add("hidden");
+}

static/style.css

@@ -0,0 +1,436 @@
+:root{
+  --navy:#04293a;
+  --navy-dark:#02151a;
+  --turq:#2dd4bf;
+  --turq-light:#5ffbf1;
+  --text:#e6f7f5;
+  --muted:#a6b8b8;
+  --card-bg:rgba(255,255,255,0.02);
+  --border:rgba(255,255,255,0.04);
+  --glass:rgba(255,255,255,0.03);
+}
+
+/* RESET */
+*{
+  margin:0;
+  padding:0;
+  box-sizing:border-box;
+  font-family:Inter, system-ui, Roboto, "Helvetica Neue", Arial;
+}
+body{
+  background:linear-gradient(180deg, var(--navy-dark), #041a20);
+  color:var(--text);
+  -webkit-font-smoothing:antialiased;
+}
+
+/* NAVBAR */
+.nav.fixed{
+  position:fixed;
+  top:0; left:0; right:0;
+  z-index:100;
+  background:rgba(4,41,58,0.93);
+  backdrop-filter:blur(8px);
+  border-bottom:1px solid var(--border);
+}
+.nav-inner{
+  max-width:1180px;
+  margin:auto;
+  padding:12px 16px;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+}
+.nav-left{
+  display:flex;
+  align-items:center;
+}
+.logo-circle{
+  width:42px;
+  height:42px;
+  border-radius:50%;
+  background:linear-gradient(135deg, var(--turq), #0be8c4);
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  font-size:20px;
+}
+.logo-text{
+  margin-left:10px;
+}
+.logo-title{
+  font-weight:700;
+  font-size:20px;
+}
+.logo-sub{
+  color:var(--muted);
+  font-size:12px;
+  margin-top:2px;
+}
+.nav-links{
+  display:flex;
+  gap:20px;
+}
+.nav-link{
+  text-decoration:none;
+  color:var(--muted);
+  font-size:14px;
+  padding:6px 10px;
+  border-radius:8px;
+}
+.nav-link:hover{
+  color:var(--turq);
+  background:rgba(255,255,255,0.03);
+}
+
+/* HERO (SVG background) */
+.hero{
+  height:260px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  position:relative;
+  overflow:hidden;
+  margin-top:70px;
+  background:linear-gradient(180deg, var(--navy-dark), #042029);
+}
+.hero-network{
+  position:absolute;
+  inset:0;
+  background-image:url("/static/protein_hero.svg");
+  background-size:cover;
+  background-position:center;
+  opacity:0.42;
+  filter:drop-shadow(0 0 35px var(--turq));
+  pointer-events:none;
+}
+.hero-inner{
+  position:relative;
+  z-index:2;
+  text-align:center;
+}
+.hero-title{
+  font-size:42px;
+  font-weight:700;
+  line-height:1.1;
+  text-shadow:0 0 8px rgba(20,184,166,0.55);
+}
+.hero-title span{
+  color:var(--turq);
+}
+.hero-sub{
+  color:var(--muted);
+  margin-top:10px;
+  font-size:15px;
+  max-width:850px;
+  margin:auto;
+}
+
+/* MAIN LAYOUT */
+.main-wrap{
+  max-width:1100px;
+  margin:20px auto 60px auto;
+  padding:0 16px;
+}
+.card{
+  background:var(--card-bg);
+  border:1px solid var(--border);
+  border-radius:14px;
+  padding:20px;
+  box-shadow:0 10px 30px rgba(0,0,0,0.5);
+  margin-bottom:20px;
+}
+
+/* TABS */
+.tabs{
+  display:flex;
+  gap:10px;
+  margin-bottom:16px;
+}
+.tab{
+  padding:8px 16px;
+  border-radius:999px;
+  border:1px solid var(--border);
+  background:transparent;
+  color:var(--muted);
+  cursor:pointer;
+}
+.tab.active{
+  background:linear-gradient(90deg, var(--turq), #24d6b3);
+  color:#05323a;
+  font-weight:700;
+}
+.panel{
+  margin-top:10px;
+}
+
+/* TEXTAREA + UPLOAD */
+.label{
+  color:var(--muted);
+  font-size:13px;
+  margin-bottom:6px;
+  display:block;
+}
+textarea{
+  width:100%;
+  min-height:160px;
+  background:var(--glass);
+  border:1px solid var(--border);
+  border-radius:10px;
+  padding:12px;
+  color:var(--text);
+  resize:vertical;
+}
+input[type=file]{
+  color:var(--muted);
+}
+.row{
+  margin-top:12px;
+  display:flex;
+  align-items:center;
+  gap:12px;
+}
+.btn{
+  background:linear-gradient(90deg, var(--turq), #25cdb6);
+  color:#032b2a;
+  border:none;
+  font-weight:700;
+  padding:10px 18px;
+  border-radius:999px;
+  cursor:pointer;
+}
+.btn:hover{
+  filter:brightness(1.08);
+}
+.loading{
+  font-size:13px;
+  color:var(--muted);
+}
+
+/* RESULT CARD */
+.result-card{
+  background:rgba(255,255,255,0.02);
+  margin-top:20px;
+  padding:18px;
+  border-radius:12px;
+  border:1px solid var(--border);
+}
+.result-header{
+  font-size:20px;
+  font-weight:700;
+}
+.warning-text{
+  color:var(--muted);
+  margin-top:6px;
+}
+
+/* PROBABILITIES */
+.prob-box{
+  margin-top:14px;
+}
+.prob-list{
+  display:grid;
+  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
+  gap:10px;
+}
+.prob-item{
+  background:rgba(255,255,255,0.02);
+  padding:8px;
+  border-radius:8px;
+  border:1px solid var(--border);
+  display:flex;
+  justify-content:space-between;
+  font-size:14px;
+}
+
+/* CHARTS */
+.chart-title {
+  text-align: center;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.charts-row{
+  display:flex;
+  gap:16px;
+  flex-wrap:wrap;
+  margin-top:14px;
+}
+.chart-card{
+  flex:1 1 300px;
+  background:rgba(255,255,255,0.01);
+  border:1px solid var(--border);
+  padding:12px;
+  border-radius:10px;
+}
+canvas{
+  width:100%!important;
+  height:240px!important;
+}
+
+/* FASTA TABLE */
+.fasta-wrapper{
+  margin-top:18px;
+}
+.small-text{
+  color:var(--muted);
+  font-size:13px;
+  margin-bottom:8px;
+}
+.table-container{
+  margin-top:8px;
+  border-radius:12px;
+  overflow:hidden;
+  border:1px solid var(--border);
+}
+.results-table{
+  width:100%;
+  border-collapse:collapse;
+  font-size:14px;
+}
+.results-table th,
+.results-table td{
+  padding:10px;
+  border-bottom:1px solid rgba(255,255,255,0.04);
+  color:var(--muted);
+}
+.results-table tbody tr{
+  cursor:pointer;
+}
+.results-table tbody tr:hover{
+  background:rgba(255,255,255,0.04);
+}
+
+/* FASTA MODAL (no charts) */
+.modal{
+  position:fixed;
+  inset:0;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  z-index:200;
+}
+.modal-backdrop{
+  position:absolute;
+  inset:0;
+  background:rgba(0,0,0,0.7);
+}
+.modal-content{
+  position:relative;
+  z-index:2;
+  background:linear-gradient(180deg,#041e21,#022326);
+  border:1px solid var(--border);
+  padding:16px;
+  border-radius:14px;
+  width:92%;
+  max-width:600px;
+}
+.modal-close{
+  position:absolute;
+  top:8px;
+  right:10px;
+  background:transparent;
+  border:none;
+  font-size:22px;
+  color:var(--muted);
+  cursor:pointer;
+}
+.modal-meta{
+  color:var(--muted);
+  font-size:13px;
+  margin-bottom:8px;
+}
+
+/* BIG CHART MODALS */
+.chart-modal{
+  position:fixed;
+  inset:0;
+  background:rgba(0,0,0,0.75);
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  z-index:3000;
+}
+.chart-modal-content{
+  position:relative;
+  background:#0f172a;
+  padding:20px;
+  border-radius:10px;
+}
+.close-big-chart{
+  position:absolute;
+  top:10px;
+  right:15px;
+  font-size:26px;
+  cursor:pointer;
+  color:white;
+}
+
+/* FOOTER */
+.footer{
+  text-align:center;
+  padding:18px 0;
+  color:var(--muted);
+  border-top:1px solid var(--border);
+  margin-top:40px;
+}
+
+/*  FASTA TABLE ALIGNMENT  */
+/* Targets the table you already render: .results-table */
+.results-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;       /* force column widths to be respected */
+  font-size: 14px;
+}
+
+.results-table th,
+.results-table td {
+  text-align: center;
+  padding: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* set sensible column widths (adjust numbers if needed) */
+.results-table th:nth-child(1),
+.results-table td:nth-child(1) { width: 48px; }   /* # */
+.results-table th:nth-child(2),
+.results-table td:nth-child(2) { width: 360px; }  /* Sequence ID */
+.results-table th:nth-child(3),
+.results-table td:nth-child(3) { width: 110px; }  /* Length */
+.results-table th:nth-child(4),
+.results-table td:nth-child(4) { width: 180px; }  /* Predicted Location */
+.results-table th:nth-child(5),
+.results-table td:nth-child(5) { width: 120px; }  /* Max Confidence */
+
+/* visual niceties */
+.results-table thead th {
+  background: rgba(10, 61, 98, 0.95);
+  color: #fff;
+  font-weight: 600;
+}
+.results-table tbody tr:hover {
+  background: rgba(255,255,255,0.02);
+}
+
+
+/* UTILITIES */
+.hidden{
+  display:none;
+}
+
+/* RESPONSIVE */
+@media(max-width:860px){
+  .nav-inner{
+    flex-direction:column;
+    align-items:flex-start;
+    gap:6px;
+  }
+  .hero-title{
+    font-size:32px;
+  }
+  canvas{
+    height:220px!important;
+  }
+}

templates/about.html

@@ -0,0 +1,70 @@
+{% extends "base.html" %}
+{% block content %}
+
+<div class="main-wrap">
+  <section class="card">
+    <h2>About CANLoc</h2>
+
+    <p>
+      CANLoc is a machine-learning system designed to predict the subcellular
+      localization of proteins directly from the protein sequence. It combines
+      transformer-based embeddings from the <b>ESM2</b> model
+      with an optimized <b>XGBoost</b> classifier trained on curated
+      protein datasets.
+    </p>
+
+    <h3>Performance & Evaluation</h3>
+
+    <p>
+      CANLoc achieves high accuracy, precision, recall, and F1-scores across all
+      classes. We additionally validate the model using:
+    </p>
+
+    <ul>
+      <li>Train/test split evaluation</li>
+      <li>10-fold stratified cross-validation</li>
+      <li>ROC curves for each class</li>
+      <li>Sensitivity and specificity analysis</li>
+    </ul>
+
+    <p>
+      These evaluations confirm that CANLoc predictions are reliable for academic
+      and research workflows.
+    </p>
+
+    <h3>Intended Use</h3>
+
+    <p>
+      CANLoc is designed for:
+    </p>
+
+    <ul>
+      <li>Functional protein studies</li>
+      <li>Localization-oriented drug delivery strategy</li>
+    </ul>
+
+    <h3>Model Strengths</h3>
+    <ul>
+      <li>Fast and scalable for single or batch prediction</li>
+      <li>Transformer embeddings provide rich biological context</li>
+      <li>High accuracy with interpretable confidence metrics</li>
+      <li>No alignment or preprocessing required beyond the raw sequence</li>
+    </ul>
+
+    <h3>Limitations</h3>
+    <ul>
+      <li>Performance depends on sequence length and quality</li>
+      <li>Ambiguous sequences may reduce confidence</li>
+      <li>Designed for four major classes only</li>
+    </ul>
+
+    <p>
+      CANLoc represents a balance between modern deep learning and classical machine
+      learning methods, producing a system that is both <b>reliable</b> and
+      <b>lightweight enough to deploy</b> in real-world web applications.
+    </p>
+
+  </section>
+</div>
+
+{% endblock %}

templates/base.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>CANLoc – Protein Subcellular Localization Predictor</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <link rel="stylesheet" href="/static/style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="/static/script.js" defer></script>
+</head>
+<body>
+  <!-- Fixed Navbar -->
+  <header class="nav fixed">
+    <div class="nav-inner">
+      <div class="nav-left">
+        <div class="logo-circle">🧬</div>
+        <div class="logo-text">
+          <div class="logo-title">Welcome to CANLoc</div>
+          <div class="logo-sub">A web server for predicting subcellular localization of protein</div>
+        </div>
+      </div>
+      <nav class="nav-links">
+        <a href="/" class="nav-link">Home</a>
+        <a href="/about" class="nav-link">About</a>
+        <a href="/help" class="nav-link">Help</a>
+        <a href="/contact" class="nav-link">Contact</a>
+      </nav>
+    </div>
+  </header>
+
+  <!-- Hero with neon SVG background -->
+  <section class="hero">
+    <div class="hero-network"></div>
+    <div class="hero-inner">
+      <h1 class="hero-title">
+        CANLoc<br>
+      </h1>
+      <p class="hero-sub">
+        Subcellular localization predictor of Candida.
+      </p>
+    </div>
+  </section>
+
+  {% block content %}{% endblock %}
+
+  <footer class="footer">
+    CANLoc – v1.0 Research/Academic Use Only.
+  </footer>
+</body>
+</html>

templates/contact.html

@@ -0,0 +1,53 @@
+{% extends "base.html" %}
+{% block content %}
+
+<section class="section-card">
+  <h2>Contact for feedback or bug reports</h2>
+
+  <table style="width:100%; max-width:900px; margin:auto; border-collapse:collapse;">
+    <tr>
+      <!-- Supervisor column -->
+      <td style="width:50%; vertical-align: top; padding:10px;">
+        <h3>Dr. SM JAIMOHAN</h3>
+        <p><strong>Project Planning & Supervision</strong></p>
+        <p>
+          Senior Scientist<br>
+          Advanced Materials Laboratory<br>
+          CSIR-CLRI<br>
+          Adyar, Chennai 600020<br>
+          TN, India
+        </p>
+        <p>
+          Email:
+          <a>
+            jai_clri@csir.res.in
+          </a>
+        </p>
+      </td>
+
+      <!-- Developer column -->
+      <td style="width:50%; vertical-align: top; padding:10px;">
+        <h3>Mr. MAJID KHAN, M.Sc Bioinformatics</h3>
+        <p><strong>Developer</strong></p>
+        <p>
+          Workflow designer<br>
+          Architecture behind the Prediction Webserver, 
+          responsible for system design, implementation, and optimisation.
+        </p>
+        <p>
+          Advanced Materials Laboratory<br>
+          CSIR-CLRI<br>
+          Chennai 600020
+        </p>
+        <p>
+          Email:
+          <a>
+            majidkhan.jssmsc@gmail.com
+          </a>
+        </p>
+      </td>
+    </tr>
+  </table>
+</section>
+
+{% endblock %}

templates/help.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% block content %}
+
+<div class="main-wrap">
+  <section class="card">
+    <h2>Help &amp; Usage</h2>
+
+    <h3>Single Sequence</h3>
+    <ul>
+      <li>Paste a protein sequence using single-letter amino acid code.</li>
+      <li>Remove spaces, numbers, headers, or other characters.</li>
+      <li>Minimum length: 15 amino acids.</li>
+    </ul>
+
+    <h3>FASTA File</h3>
+    <ul>
+      <li>For Multiple sequences, upload a valid FASTA file (.fa, .fasta).</li>
+      <li>Each entry will be analyzed individually.</li>
+      <li>Refer to a row in the results table to see probabilities for that sequence.</li>
+    </ul>
+
+    <h3>Interpreting Predictions</h3>
+    <ul>
+      <li><b>Predicted Location</b>: class with the highest probability.</li>
+      <li><b>Confidence Bar Chart</b>: probability of each class.</li>
+      <li><b>Radar Plot</b>: comparative view of probabilities across all classes.</li>
+      <li>Use medium/low confidence predictions cautiously and combine with biological context.</li>
+    </ul>
+  </section>
+</div>
+
+{% endblock %}

templates/index.html

@@ -0,0 +1,104 @@
+{% extends "base.html" %}
+{% block content %}
+
+<main class="main-wrap">
+  <section class="card">
+    <div class="tabs">
+      <button id="tab-seq" class="tab active">Single Sequence</button>
+      <button id="tab-fasta" class="tab">Multiple Sequences</button>
+    </div>
+
+    <!-- Single sequence panel -->
+    <div id="panel-seq" class="panel">
+      <label class="label">Protein Sequence</label>
+      <textarea id="sequenceInput" placeholder="Paste protein sequence"></textarea>
+      <div class="row">
+        <button id="predictBtn" class="btn">Predict Localization</button>
+        <div id="loadingSeq" class="loading hidden">Running prediction…</div>
+      </div>
+
+      <div id="seqResultCard" class="result-card hidden">
+        <div id="seqResultHeader" class="result-header"></div>
+        <div id="seqConfidenceWarning" class="warning-text"></div>
+
+        <div class="charts-row">
+          <div class="chart-card">
+            <h4 class="chart-title">Confidence Bar Chart</h4>
+            <canvas id="barChart"></canvas>
+          </div>
+          <div class="chart-card">
+            <h4 class="chart-title">Radar Plot</h4>
+            <canvas id="radarChart"></canvas>
+          </div>
+        </div>
+
+        <div class="prob-box">
+          <h4>Class Probabilities</h4>
+          <div id="seqProbList" class="prob-list"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- FASTA panel -->
+    <div id="panel-fasta" class="panel hidden">
+      <label class="label">Upload FASTA file</label>
+      <input id="fastaFile" type="file" accept=".fa,.fasta" />
+      <div class="row">
+        <button id="predictFastaBtn" class="btn">Predict from FASTA</button>
+        <div id="loadingFasta" class="loading hidden">Running batch prediction…</div>
+      </div>
+
+      <div id="fastaResultsWrapper" class="fasta-wrapper hidden">
+        <h3>FASTA Predictions</h3>
+        <p class="small-text">  Refer to the row for probabilities of the sequence.</p>
+        <div class="table-container">
+          <table class="results-table">
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Sequence ID</th>
+                <th>Length</th>
+                <th>Predicted Location</th>
+                <th>Max Confidence</th>
+              </tr>
+            </thead>
+            <tbody id="fastaTableBody"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
+
+<!-- FASTA detail modal (NO graphs, only details) -->
+<div id="fastaModal" class="modal hidden">
+  <div class="modal-backdrop" id="fastaModalBackdrop"></div>
+  <div class="modal-content">
+    <button id="fastaModalClose" class="modal-close">&times;</button>
+    <h3 id="fastaModalTitle">Sequence details</h3>
+    <p id="fastaModalMeta" class="modal-meta"></p>
+
+    <div class="prob-box">
+      <h4>Class Probabilities</h4>
+      <div id="fastaProbList" class="prob-list"></div>
+    </div>
+  </div>
+</div>
+
+<!-- BIG BAR CHART MODAL -->
+<div id="bigBarModal" class="chart-modal hidden">
+  <div class="chart-modal-content">
+    <span class="close-big-chart" onclick="closeBigBar()">&times;</span>
+    <canvas id="bigBarChart" width="700" height="700"></canvas>
+  </div>
+</div>
+
+<!-- BIG RADAR CHART MODAL -->
+<div id="bigRadarModal" class="chart-modal hidden">
+  <div class="chart-modal-content">
+    <span class="close-big-chart" onclick="closeBigRadar()">&times;</span>
+    <canvas id="bigRadarChart" width="700" height="700"></canvas>
+  </div>
+</div>
+
+{% endblock %}