Show both unfiltered and filtered sinogram

public/UploadImageComponent.js

@@ -12,13 +12,14 @@ export const UploadImageComponent = {
   imageUrl:
     "https://upload.wikimedia.org/wikipedia/commons/e/e5/Shepp_logan.png",
   sinogramUrl: null,
+  filteredSinogramUrl: null, // Added to store the filtered sinogram
   reconstructedUrl: null,
   defaultImageUrl:
     "https://upload.wikimedia.org/wikipedia/commons/e/e5/Shepp_logan.png",
   reconstructionFrames: [],
   currentFrameIndex: 0,
   renderMode: "grayscale", // or "heatmap"
-  useFBP: true,
+  filterType: "ramp", // Added to manage selected filter
 
   drawAngleOverlay(theta) {
     const canvas = this.overlayCanvas;
@@ -57,6 +58,7 @@ export const UploadImageComponent = {
   async loadAndProcess(url, isUploaded = false) {
     this.imageUrl = url;
     this.sinogramUrl = "loading";
+    this.filteredSinogramUrl = null; // Reset filtered sinogram
     this.reconstructedUrl = null;
     m.redraw();
 
@@ -78,18 +80,23 @@ export const UploadImageComponent = {
     this.reconstructionFrames = [];
     this.currentFrameIndex = 0;
 
-    this.reconstructedUrl = await reconstructImageFromSinogram(
+    const reconstructionResult = await reconstructImageFromSinogram(
       this.sinogramUrl,
       undefined,
       (angle, frameUrl) => {
         this.reconstructionFrames.push(frameUrl);
         this.currentFrameIndex = this.reconstructionFrames.length - 1;
-        this.reconstructedUrl = frameUrl;
+        this.reconstructedUrl = frameUrl; // This is the final reconstructed image frame
         m.redraw();
       },
       this.renderMode,
-      this.useFBP
+      this.filterType
     );
+
+    // After all frames are processed, the final reconstructedUrl and filteredSinogramUrl are available
+    this.reconstructedUrl = reconstructionResult.reconstructedUrl;
+    this.filteredSinogramUrl = reconstructionResult.filteredSinogramUrl;
+    m.redraw(); // Ensure UI updates with the final urls
   },
 
   oninit() {
@@ -234,6 +241,22 @@ export const UploadImageComponent = {
                 }),
           ]),
 
+        // Filtered Sinogram Display
+        this.filteredSinogramUrl &&
+          m("div", { class: "mt-10 w-full max-w-md text-center" }, [
+            m(
+              "h2",
+              { class: "text-xl font-semibold text-gray-700 mb-4" },
+              "Filtered Sinogram"
+            ),
+            m("img", {
+              src: this.filteredSinogramUrl,
+              alt: "Filtered Sinogram",
+              class: "rounded shadow max-w-full h-auto mx-auto",
+              style: "width: 100%; max-height: 300px;",
+            }),
+          ]),
+
         m(StepAccordion, { index: 3 }),
 
         // Reconstructed
@@ -272,21 +295,30 @@ export const UploadImageComponent = {
             ]),
 
             m("div", { class: "mt-4 w-full max-w-md text-left" }, [
-              m("label", [
-                m("input", {
-                  type: "checkbox",
-                  checked: this.useFBP,
+              m(
+                "label",
+                { class: "text-sm text-gray-600 mr-2" },
+                "Filter Type:"
+              ),
+              m(
+                "select",
+                {
+                  class: "p-1 border rounded text-sm",
+                  value: this.filterType,
                   onchange: (e) => {
-                    this.useFBP = e.target.checked;
-                    this.loadAndProcess(this.imageUrl); // regenerate with or without FBP
+                    this.filterType = e.target.value;
+                    this.loadAndProcess(this.imageUrl);
                   },
-                }),
-                m(
-                  "span",
-                  { class: "ml-2 text-gray-700" },
-                  "Use Filtered Back Projection (Ramp)"
-                ),
-              ]),
+                },
+                [
+                  m("option", { value: "ramp" }, "Ramp"),
+                  m("option", { value: "shepp-logan" }, "Shepp-Logan"),
+                  m("option", { value: "hann" }, "Hann"),
+                  m("option", { value: "hamming" }, "Hamming"),
+                  m("option", { value: "cosine" }, "Cosine"),
+                  m("option", { value: "none" }, "None"),
+                ]
+              ),
             ]),
 
             this.reconstructionFrames.length > 1 &&