fix mathematical equation

installed kartex

Author: abhibongale

app/blog/posts/now-playing-implementation.mdx

@@ -185,15 +185,17 @@ class AudioCNN(nn.Module):
         return x
 ```
 
-# Training with Tiplet Loss
+# Training with Triplet Loss
 
 ## Triplet Loss 
 
-- A tirplet loss ensures that embeddings are learned such that similar sampels are closer in the embedding space and dissimilar samles are farther apart.
+- A triplet loss ensures that embeddings are learned such that similar sampels are closer in the embedding space and dissimilar samles are farther apart.
 - Formula:
 
 $$
+
 ||f(a) - f(p)||_2^2 + margin \leq ||f(a) - f(n)||_2^2
+
 $$
 
 Here, $(f(x))$ is the embedding function (our CNN in this case), and \(a\), \(p\), and \(n\) are the anchor, positive, and negative inputs, respectively.

app/components/mdx.tsx

@@ -3,6 +3,8 @@ import Image from 'next/image'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { highlight } from 'sugar-high'
 import React from 'react'
+import { useEffect } from 'react'
+import katex from 'katex'
 
 function Table({ data }) {
   let headers = data.headers.map((header, index) => (
@@ -64,6 +66,21 @@ function slugify(str) {
     .replace(/\-\-+/g, '-') // Replace multiple - with single -
 }
 
+// Math Rendering Component (using KaTeX)
+function Math({ children }) {
+  useEffect(() => {
+    // Render math equations after the component mounts
+    const elements = document.querySelectorAll('.math')
+    elements.forEach((el) => {
+      katex.render(el.textContent, el, {
+        throwOnError: false,
+      })
+    })
+  }, [children])
+
+  return <span className="math">{children}</span>
+}
+
 function createHeading(level) {
   const Heading = ({ children }) => {
     let slug = slugify(children)
@@ -97,6 +114,7 @@ let components = {
   a: CustomLink,
   code: Code,
   Table,
+  math: Math, // Add math component for equations
 }
 
 export function CustomMDX(props) {

package.json

@@ -20,6 +20,7 @@
     "react-dom": "18.2.0",
     "sugar-high": "^0.6.0",
     "tailwindcss": "4.0.0-alpha.13",
-    "typescript": "5.3.3"
+    "typescript": "5.3.3",
+    "katex": "^0.16.4"
   }
 }