From 11800fd379f661217a72bfc69f427efd79fde046 Mon Sep 17 00:00:00 2001
From: vukrosic <vuk.rosic@beam.ai>
Date: Wed, 15 Oct 2025 21:11:31 +0200
Subject: [PATCH] Enhance "Tiny Recursive Model" project page with a new
 embedded YouTube video for better engagement. Update styling for links and
 improve image handling in the Markdown renderer to accommodate architecture
 diagrams. Revise subtitle for clarity in the content file.

---
 app/blog/tiny-recursive-model/page.tsx           | 16 ++++++++++++++--
 components/markdown-renderer.tsx                 |  8 ++++++--
 .../tiny-recursive-model-content.md              |  2 +-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/blog/tiny-recursive-model/page.tsx b/app/blog/tiny-recursive-model/page.tsx
index 73e242d..3550d8a 100644
--- a/app/blog/tiny-recursive-model/page.tsx
+++ b/app/blog/tiny-recursive-model/page.tsx
@@ -186,7 +186,7 @@ export default function TinyRecursiveModelProject() {
               )}
 
               {/* Links to Paper and GitHub */}
-              <div className="flex flex-wrap items-center justify-center gap-4 mb-8">
+              <div className="relative z-10 flex flex-wrap items-center justify-center gap-4 mb-8">
                 <a 
                   href="https://arxiv.org/pdf/2510.04871v1"
                   target="_blank"
@@ -218,7 +218,7 @@ export default function TinyRecursiveModelProject() {
               </div>
               
               {/* Glow effect for the title */}
-              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm">
+              <div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm pointer-events-none">
                 <span className="bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-cyan-400/20 bg-clip-text text-transparent">
                   {heroData?.title || 'Tiny Recursive Model'}
                 </span>
@@ -280,6 +280,18 @@ export default function TinyRecursiveModelProject() {
 
               {/* Article Body */}
               <div className="px-8 sm:px-12 pb-20">
+                <div className="mb-8">
+                  <div className="relative" style={{ paddingTop: '56.25%' }}>
+                    <iframe
+                      className="absolute top-0 left-0 w-full h-full rounded-lg shadow-2xl"
+                      src="https://www.youtube.com/embed/51uVH-sEvk0"
+                      title="YouTube video player"
+                      frameBorder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowFullScreen
+                    ></iframe>
+                  </div>
+                </div>
                 <div className="prose prose-lg prose-invert max-w-none">
                   <MarkdownRenderer content={markdownContent} />
                 </div>
diff --git a/components/markdown-renderer.tsx b/components/markdown-renderer.tsx
index 5dc348e..64dc2ed 100644
--- a/components/markdown-renderer.tsx
+++ b/components/markdown-renderer.tsx
@@ -106,6 +106,10 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
           img: ({ src, alt }) => {
             if (!src) return null;
             
+            // Check if this is the architecture diagram that should be smaller
+            const isArchitectureDiagram = alt?.includes('Architecture') || src?.includes('architecture');
+            const imageClassName = isArchitectureDiagram ? "w-1/2 h-auto mx-auto" : "w-full h-auto";
+            
             // Handle external images
             if (typeof src === 'string' && src.startsWith('http')) {
               return (
@@ -115,7 +119,7 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
                     alt={alt || ''}
                     width={800}
                     height={400}
-                    className="w-full h-auto"
+                    className={imageClassName}
                     loading="lazy"
                   />
                   {alt && (
@@ -135,7 +139,7 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
                   alt={alt || ''}
                   width={800}
                   height={400}
-                  className="w-full h-auto"
+                  className={imageClassName}
                   priority={false}
                 />
                 {alt && (
diff --git a/public/content/tiny-recursive-model/tiny-recursive-model-content.md b/public/content/tiny-recursive-model/tiny-recursive-model-content.md
index d2d803e..6180ea6 100644
--- a/public/content/tiny-recursive-model/tiny-recursive-model-content.md
+++ b/public/content/tiny-recursive-model/tiny-recursive-model-content.md
@@ -9,7 +9,7 @@ hero:
 
 ## The New AI Reasoning Architecture 
 
-#### How a 7M Model Beats 1T Models at Sudoku, Mazes, ARC-AGI
+How a 7M Model Beats 1T Models at Sudoku, Mazes, ARC-AGI
 
 **The Tiny Reasoning Model (TRM)** uses a 2-layer transformer (7M parameters) that reuses the same layers hundreds of times to reason about problems recursively.