Add support for math

2026-01-14 20:59:57 +01:00 · 2024-11-26 11:09:27 +01:00
parent d9d476faef
commit b3d6907b1e
5 changed files with 142 additions and 14 deletions
--- a/app/pages/portfolio/[slug].vue
+++ b/app/pages/portfolio/[slug].vue
@@ -178,6 +178,10 @@ async function handleLike() {
 .prose h4 a {
  @apply no-underline;
 }
+
+.katex-html {
+  display: none;
+}
 </style>

 <i18n lang="json">
--- a/content/portfolio/what-is-machine-learning.md
+++ b/content/portfolio/what-is-machine-learning.md
@@ -68,9 +68,15 @@ Once the model type is defined, the next step is to delve into the full workflow

 A machine learning project generally follows these steps:

-1. **Data Preparation** Splitting data into training and testing sets.\* Preprocessing: scaling, handling missing values, etc.
-2. **Model Training** Fitting the model on training data: `model.fit(X, y)`.\* Optimising parameters and hyperparameters.
-3. **Prediction and Evaluation** Making predictions on unseen data: `model.predict(X)`.\* Comparing predictions ($\hat{y}$) with actual values ($y$).
+1. **Data Preparation**
+   - Splitting data into training and testing sets.
+   - Preprocessing: scaling, handling missing values, etc.
+2. **Model Training**
+   - Fitting the model on training data: `model.fit(X, y)`.
+   - Optimising parameters and hyperparameters.
+3. **Prediction and Evaluation**
+   - Making predictions on unseen data: `model.predict(X)`.
+   - Comparing predictions ($$\hat{y}$$) with actual values ($$y$$).

 ![Modelization in Prog.png](/portfolio/ML/model.png)

@@ -80,14 +86,12 @@ Evaluation is a crucial step to verify the performance of a model. For regressio

 For regression problems, the **R² score** measures the proportion of the target’s variance explained by the model:

-$R2 = 1 - \frac{\text{SS}\_{\text{residual}}}{\text{SS}\_{\text{total}}}$
+$$R2 = 1 - \frac{\text{SS}_{\text{residual}}}{\text{SS}_{\text{total}}}$$   where:

-Where:
+- $$\text{SS}\_{\text{residual}}$$ : Sum of squared residuals between actual and predicted values.
+- $$\text{SS}\_{\text{total}}$$ : Total sum of squares relative to the target’s mean.

- $\text{SS}\_{\text{residual}}$: Sum of squared residuals between actual and predicted values.
- $\text{SS}\_{\text{total}}$: Total sum of squares relative to the target’s mean.
-
-A $R^2$ close to 1 indicates a good fit.
+A $$R^2$$ close to 1 indicates a good fit.

 ![R2 Score.png](/portfolio/ML/r2.png)

@@ -95,4 +99,4 @@ With these concepts in mind, you are better equipped to understand and apply ML

 ## Conclusion

-Machine learning is revolutionising how we solve complex problems using data. Supervised, unsupervised, and reinforcement learning approaches allow us to tackle a wide variety of use cases. In supervised learning, the model choice depends on the problem type, its complexity, and the appropriate algorithmic approach. Finally, a structured workflow and metrics like the R² score ensure the quality of predictions and analyses.
+Machine learning is revolutionising how we solve complex problems using data. Supervised, unsupervised, and reinforcement learning approaches allow us to tackle a wide variety of use cases. In supervised learning, the model choice depends on the problem type, its complexity, and the appropriate algorithmic approach. Finally, a structured workflow and metrics like the R² score ensure the quality of predictions and analyses.
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -39,6 +39,7 @@ export default defineNuxtConfig({
    },
    markdown: {
      remarkPlugins: ['remark-math'],
+      rehypePlugins: ['rehype-katex'],
    },
  },

--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "drizzle-orm": "^0.33.0",
    "h3-zod": "^0.5.3",
    "nuxt": "^3.13.2",
+    "rehype-katex": "^7.0.1",
    "remark-math": "^6.0.0",
    "zod": "^3.23.8"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,9 +38,21 @@ importers:
      nuxt:
        specifier: ^3.13.2
        version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.5.5)(drizzle-orm@0.33.0(@cloudflare/workers-types@4.20240909.0)(@opentelemetry/api@1.9.0))(encoding@0.1.13)(eslint@9.10.0(jiti@1.21.6))(ioredis@5.4.1)(magicast@0.3.5)(meow@9.0.0)(optionator@0.9.4)(rollup@4.21.0)(sass@1.77.6)(terser@5.31.6)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5)(sass@1.77.6)(terser@5.31.6))(vue-tsc@2.1.6(typescript@5.6.2))(webpack-sources@3.2.3)
+      rehype-katex:
+        specifier: ^7.0.1
+        version: 7.0.1
+      rehype-stringify:
+        specifier: ^10.0.1
+        version: 10.0.1
      remark-math:
        specifier: ^6.0.0
        version: 6.0.0
+      remark-parse:
+        specifier: ^11.0.0
+        version: 11.0.0
+      remark-rehype:
+        specifier: ^11.1.1
+        version: 11.1.1
      zod:
        specifier: ^3.23.8
        version: 3.23.8
@@ -3816,6 +3828,15 @@ packages:
    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
    engines: {node: '>= 0.4'}

+  hast-util-from-dom@5.0.1:
+    resolution: {integrity: sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==}
+
+  hast-util-from-html-isomorphic@2.0.0:
+    resolution: {integrity: sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==}
+
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
  hast-util-from-parse5@8.0.1:
    resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}

@@ -3831,15 +3852,27 @@ packages:
  hast-util-raw@9.0.4:
    resolution: {integrity: sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==}

+  hast-util-to-html@9.0.3:
+    resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==}
+
  hast-util-to-parse5@8.0.0:
    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}

  hast-util-to-string@3.0.0:
    resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==}

+  hast-util-to-text@4.0.2:
+    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
  hastscript@8.0.0:
    resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}

+  hastscript@9.0.0:
+    resolution: {integrity: sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw==}
+
  he@1.2.0:
    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
    hasBin: true
@@ -5324,6 +5357,9 @@ packages:
  rehype-external-links@3.0.0:
    resolution: {integrity: sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==}

+  rehype-katex@7.0.1:
+    resolution: {integrity: sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==}
+
  rehype-raw@7.0.0:
    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}

@@ -5336,6 +5372,9 @@ packages:
  rehype-sort-attributes@5.0.0:
    resolution: {integrity: sha512-6tJUH4xHFcdO85CZRwAcEtHNCzjZ9V9S0VZLgo1pzbN04qy8jiVCZ3oAxDmBVG3Rth5b1xFTDet5WG/UYZeJLQ==}

+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
  remark-emoji@5.0.1:
    resolution: {integrity: sha512-QCqTSvcZ65Ym+P+VyBKd4JfJfh7icMl7cIOGVmPMzWkDtdD8pQ0nQG7yxGolVIiMzSx90EZ7SwNiVpYpfTxn7w==}
    engines: {node: '>=18'}
@@ -5352,8 +5391,8 @@ packages:
  remark-parse@11.0.0:
    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}

-  remark-rehype@11.1.0:
-    resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==}
+  remark-rehype@11.1.1:
+    resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}

  remark-stringify@11.0.0:
    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
@@ -5985,6 +6024,9 @@ packages:
  unist-builder@4.0.0:
    resolution: {integrity: sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==}

+  unist-util-find-after@5.0.0:
+    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
+
  unist-util-is@6.0.0:
    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}

@@ -8136,7 +8178,7 @@ snapshots:
      remark-gfm: 4.0.0
      remark-mdc: 3.2.1
      remark-parse: 11.0.0
-      remark-rehype: 11.1.0
+      remark-rehype: 11.1.1
      scule: 1.3.0
      shiki: 1.14.1
      ufo: 1.5.4
@@ -10677,6 +10719,28 @@ snapshots:
    dependencies:
      function-bind: 1.1.2

+  hast-util-from-dom@5.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hastscript: 9.0.0
+      web-namespaces: 2.0.1
+
+  hast-util-from-html-isomorphic@2.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-dom: 5.0.1
+      hast-util-from-html: 2.0.3
+      unist-util-remove-position: 5.0.0
+
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.1
+      parse5: 7.1.2
+      vfile: 6.0.2
+      vfile-message: 4.0.2
+
  hast-util-from-parse5@8.0.1:
    dependencies:
      '@types/hast': 3.0.4
@@ -10716,6 +10780,20 @@ snapshots:
      web-namespaces: 2.0.1
      zwitch: 2.0.4

+  hast-util-to-html@9.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
  hast-util-to-parse5@8.0.0:
    dependencies:
      '@types/hast': 3.0.4
@@ -10730,6 +10808,17 @@ snapshots:
    dependencies:
      '@types/hast': 3.0.4

+  hast-util-to-text@4.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      hast-util-is-element: 3.0.0
+      unist-util-find-after: 5.0.0
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
  hastscript@8.0.0:
    dependencies:
      '@types/hast': 3.0.4
@@ -10738,6 +10827,14 @@ snapshots:
      property-information: 6.5.0
      space-separated-tokens: 2.0.2

+  hastscript@9.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+
  he@1.2.0: {}

  hookable@5.5.3: {}
@@ -12671,6 +12768,16 @@ snapshots:
      space-separated-tokens: 2.0.2
      unist-util-visit: 5.0.0

+  rehype-katex@7.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/katex': 0.16.7
+      hast-util-from-html-isomorphic: 2.0.0
+      hast-util-to-text: 4.0.2
+      katex: 0.16.11
+      unist-util-visit-parents: 6.0.1
+      vfile: 6.0.2
+
  rehype-raw@7.0.0:
    dependencies:
      '@types/hast': 3.0.4
@@ -12696,6 +12803,12 @@ snapshots:
      '@types/hast': 3.0.4
      unist-util-visit: 5.0.0

+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.3
+      unified: 11.0.5
+
  remark-emoji@5.0.1:
    dependencies:
      '@types/mdast': 4.0.4
@@ -12756,7 +12869,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  remark-rehype@11.1.0:
+  remark-rehype@11.1.1:
    dependencies:
      '@types/hast': 3.0.4
      '@types/mdast': 4.0.4
@@ -13505,6 +13618,11 @@ snapshots:
    dependencies:
      '@types/unist': 3.0.3

+  unist-util-find-after@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
  unist-util-is@6.0.0:
    dependencies:
      '@types/unist': 3.0.3