Spaces:

AIOmarRehan
/

CNN_Autoencoder_For_Image_Denoising

Running

App Files Files Community

AIOmarRehan commited on 29 days ago

Commit

923b2e0

verified ·

1 Parent(s): 7fcfa16

Upload 6 files

Browse files

Files changed (7) hide show

.gitattributes +1 -0
Backend/U-NET.py +46 -0
Backend/static/index.html +27 -0
Backend/static/script.js +83 -0
Backend/static/style.css +87 -0
Notebook/A_U_Net_Based_CNN_Autoencoder_for_Preprocessing_Noisy_Images_in_Classification_Tasks.ipynb +0 -0
Results/A_U-Net_Autoencoder.mp4 +3 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* 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

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+Results/A_U-Net_Autoencoder.mp4 filter=lfs diff=lfs merge=lfs -text

Backend/U-NET.py ADDED Viewed

	@@ -0,0 +1,46 @@

+import numpy as np
+import io
+from flask import Flask, request, jsonify, send_file
+from flask_cors import CORS
+from tensorflow.keras.models import load_model
+from PIL import Image
+# Load model
+model = load_model("unet_model.h5", compile = False)
+app = Flask(__name__)
+CORS(app)  # allow frontend to fetch
+# Preprocess function
+def preprocess_image(image, target_size = (192, 176)):
+    image = image.resize((target_size[1], target_size[0]))  # width, height
+    image = np.array(image) / 255.0
+    if image.ndim == 2:
+        image = np.expand_dims(image, axis = -1)
+    return np.expand_dims(image, axis = 0)
+@app.route("/predict", methods=["POST"])
+def predict():
+    if "file" not in request.files:
+        return jsonify({"error": "No file uploaded"}), 400
+    file = request.files["file"]
+    img = Image.open(file.stream).convert("L")  # grayscale
+    input_data = preprocess_image(img)
+    pred = model.predict(input_data)[0]
+    if pred.ndim == 3 and pred.shape[-1] == 1:
+        pred = np.squeeze(pred, axis = -1)
+    pred_img = (pred * 255).astype(np.uint8)
+    pred_img = Image.fromarray(pred_img)
+    buf = io.BytesIO()
+    pred_img.save(buf, format="PNG")
+    buf.seek(0)
+    return send_file(buf, mimetype = "image/png")
+if __name__ == "__main__":
+    app.run(host = "127.0.0.1", port = 5000, debug = True)

Backend/static/index.html ADDED Viewed

	@@ -0,0 +1,27 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>U-Net Segmentation</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>U-Net Image Denoising</h1>
+  <div class="upload-area" id="uploadArea">
+    <p>Drag & Drop your image here or click to browse</p>
+    <input type="file" id="fileInput" accept="image/*" hidden>
+  </div>
+  <div class="preview" id="preview"></div>
+  <button id="runBtn">Run Image Denoising</button>
+  <div class="loader" id="loader"></div>
+  <div class="result" id="result"></div>
+  <script src="script.js"></script>
+</body>
+</html>

Backend/static/script.js ADDED Viewed

	@@ -0,0 +1,83 @@

+const uploadArea = document.getElementById("uploadArea");
+const fileInput = document.getElementById("fileInput");
+const preview = document.getElementById("preview");
+const runBtn = document.getElementById("runBtn");
+const loader = document.getElementById("loader");
+const result = document.getElementById("result");
+let uploadedFile = null;
+// Open file browser on click
+uploadArea.addEventListener("click", () => fileInput.click());
+// Handle file input
+fileInput.addEventListener("change", (e) => {
+  uploadedFile = e.target.files[0];
+  showPreview(uploadedFile);
+});
+// Drag & drop
+uploadArea.addEventListener("dragover", (e) => {
+  e.preventDefault();
+  uploadArea.style.background = "rgba(79,195,247,0.2)";
+});
+uploadArea.addEventListener("dragleave", () => {
+  uploadArea.style.background = "rgba(255,255,255,0.05)";
+});
+uploadArea.addEventListener("drop", (e) => {
+  e.preventDefault();
+  uploadedFile = e.dataTransfer.files[0];
+  showPreview(uploadedFile);
+});
+function showPreview(file) {
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    preview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
+  };
+  reader.readAsDataURL(file);
+}
+runBtn.addEventListener("click", async () => {
+  if (!uploadedFile) {
+    alert("Please upload an image first!");
+    return;
+  }
+  loader.style.display = "block";
+  result.innerHTML = "";
+  const formData = new FormData();
+  formData.append("file", uploadedFile);
+  try {
+    const response = await fetch("http://127.0.0.1:5000/predict", {
+      method: "POST",
+      body: formData,
+    });
+    if (!response.ok) throw new Error("Failed to fetch result from backend.");
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    loader.style.display = "none";
+    result.innerHTML = `
+      <div>
+        <h3>Original</h3>
+        <img src="${URL.createObjectURL(uploadedFile)}" alt="Original">
+      </div>
+      <div>
+        <h3>Denoised Image</h3>
+        <img src="${url}" alt="Denoised Image">
+      </div>
+    `;
+  } catch (err) {
+    loader.style.display = "none";
+    alert(err.message);
+  }
+});

Backend/static/style.css ADDED Viewed

	@@ -0,0 +1,87 @@

+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: linear-gradient(135deg, #141e30, #243b55);
+  color: #fff;
+  text-align: center;
+  padding: 30px;
+}
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+}
+.upload-area {
+  border: 2px dashed #4fc3f7;
+  border-radius: 20px;
+  padding: 40px;
+  margin: 20px auto;
+  width: 70%;
+  max-width: 600px;
+  cursor: pointer;
+  transition: 0.3s;
+  background: rgba(255, 255, 255, 0.05);
+}
+.upload-area:hover {
+  background: rgba(79, 195, 247, 0.1);
+  transform: scale(1.02);
+}
+.preview {
+  margin-top: 20px;
+}
+.preview img {
+  max-width: 300px;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+}
+button {
+  background: #4fc3f7;
+  border: none;
+  padding: 12px 24px;
+  margin-top: 20px;
+  border-radius: 30px;
+  color: #fff;
+  font-size: 1.1rem;
+  cursor: pointer;
+  transition: 0.3s;
+}
+button:hover {
+  background: #039be5;
+}
+.result {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 40px;
+  flex-wrap: wrap;
+}
+.result img {
+  max-width: 350px;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+}
+.loader {
+  display: none;
+  margin-top: 20px;
+  border: 6px solid #f3f3f3;
+  border-top: 6px solid #4fc3f7;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin-left: auto;
+  margin-right: auto;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

Notebook/A_U_Net_Based_CNN_Autoencoder_for_Preprocessing_Noisy_Images_in_Classification_Tasks.ipynb ADDED Viewed

The diff for this file is too large to render. See raw diff

Results/A_U-Net_Autoencoder.mp4 ADDED Viewed

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

+version https://git-lfs.github.com/spec/v1
+oid sha256:076748cdbeb1edef5da3d59610802675e1c9f3164e3267be4cddd69408d39af4
+size 6695182