Merge pull request #6 from Open-Superintelligence-Lab/new

Enhance "Tiny Recursive Model" project page with a new embedded YouTu…

Author: vukrosic

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>

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 && (

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.