Improve look of app, ive broken accordion content so will need to fix

public/CTAccordion .js

@@ -97,12 +97,19 @@ export const StepAccordion = {
   },
 };
 
-// You must provide a markdownToHTML() function or use a library like marked.js
+// Use marked.js for robust Markdown to HTML conversion
+const renderer = new marked.Renderer();
+renderer.image = (href, title, text) => {
+  // Add Tailwind classes for styling images
+  return `<img src="${href}" alt="${text}" title="${
+    title || ""
+  }" class="my-2 rounded shadow max-w-full h-auto mx-auto">`;
+};
+
+marked.setOptions({ renderer });
+
 function markdownToHTML(text) {
-  return text
-    .replace(/\n/g, "<br>")
-    .replace(
-      /!\[(.*?)\]\((.*?)\)/g,
-      '<img alt="$1" src="$2" class="my-2 rounded shadow max-w-full">'
-    );
+  // Replace escaped newlines from template literals with actual newlines for marked
+  const processedText = text.replace(/\\n/g, "\n");
+  return marked.parse(processedText);
 }

public/index.html

@@ -17,6 +17,7 @@
         };
     </script>
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 
 </head>
 

public/sinogram.js

@@ -19,7 +19,7 @@ export async function generateSinogram(
     const theta = (angle * Math.PI) / angles;
 
     if (drawAngleCallback) drawAngleCallback(theta);
-    await new Promise((r) => setTimeout(r, 0.01));
+    // await new Promise((r) => setTimeout(r, 0.01)); // Removed for performance
 
     ctx.clearRect(0, 0, size, size);
     ctx.save();
@@ -167,7 +167,7 @@ export async function reconstructImageFromSinogram(
       }
 
       outputCtx.putImageData(imageData, 0, 0);
-      await new Promise((r) => setTimeout(r, 1));
+      // await new Promise((r) => setTimeout(r, 1)); // Removed for performance
       onFrame(angle, outputCanvas.toDataURL());
     }
   }