recipes

RECIPE_GENERATOR.md

@@ -0,0 +1,59 @@
+# ClosedToOpen Recipe Generator
+
+This script converts Jupyter notebooks to recipe pages using [nbgradio](https://github.com/gradio-app/nbgradio).
+
+## Usage
+
+### Using uv (Recommended)
+
+```bash
+uv run generate_recipes.py
+```
+
+### Direct execution
+
+```bash
+./generate_recipes.py
+```
+
+## What it does
+
+1. **Scans notebooks**: Finds all `.ipynb` files in the `notebooks/` directory
+2. **Updates notebooks**: Adds `#nbgradio` comments to cells containing Gradio code
+3. **Converts to recipes**: Uses nbgradio with `--spaces` and `--fragment` flags to generate HTML
+4. **Creates recipe pages**: Wraps the generated content in the blog's styling
+5. **Deploys to Spaces**: Automatically deploys Gradio apps to Hugging Face Spaces
+
+## Features
+
+- **Automatic dependency management**: Uses uv's inline script metadata
+- **Spaces integration**: Deploys interactive apps to Hugging Face Spaces
+- **Blog integration**: Generates pages that match the site's design
+- **Incremental updates**: Skips notebooks that already have recipes
+- **Error handling**: Graceful handling of conversion failures
+
+## Requirements
+
+- Python 3.10+
+- uv package manager
+- Hugging Face account (for Spaces deployment)
+
+## Generated Files
+
+- `recipes/{notebook_name}.html` - Complete recipe pages
+- Interactive Gradio apps deployed to Hugging Face Spaces
+- Proper styling integration with the main blog
+
+## Script Dependencies
+
+The script uses uv's inline metadata format to declare dependencies:
+
+```python
+# /// script
+# dependencies = [
+#   "nbgradio",
+# ]
+# ///
+```
+
+This ensures nbgradio is automatically installed when running the script.

convert_notebooks.py

@@ -0,0 +1,223 @@
+#!/usr/bin/env python3
+"""
+Script to convert Jupyter notebooks to recipe pages using nbgradio.
+This script processes notebooks in the notebooks/ directory and generates
+recipe pages in the recipes/ directory with proper styling integration.
+"""
+
+import os
+import subprocess
+import sys
+from pathlib import Path
+import shutil
+import json
+
+def install_nbgradio():
+    """Install nbgradio if not already installed."""
+    try:
+        import nbgradio
+        print("✅ nbgradio is already installed")
+    except ImportError:
+        print("📦 Installing nbgradio...")
+        subprocess.run([sys.executable, "-m", "pip", "install", "nbgradio"], check=True)
+        print("✅ nbgradio installed successfully")
+
+def get_notebook_files():
+    """Get all notebook files from the notebooks directory."""
+    notebooks_dir = Path("notebooks")
+    if not notebooks_dir.exists():
+        print("❌ notebooks/ directory not found")
+        return []
+    
+    notebook_files = list(notebooks_dir.glob("*.ipynb"))
+    print(f"📚 Found {len(notebook_file)} notebook(s): {[f.name for f in notebook_files]}")
+    return notebook_files
+
+def get_existing_recipes():
+    """Get list of existing recipe files."""
+    recipes_dir = Path("recipes")
+    if not recipes_dir.exists():
+        return []
+    
+    recipe_files = list(recipes_dir.glob("*.html"))
+    return [f.stem for f in recipe_files]
+
+def convert_notebook_to_recipe(notebook_path):
+    """Convert a single notebook to a recipe page."""
+    notebook_name = notebook_path.stem
+    print(f"\n🔄 Converting {notebook_name}...")
+    
+    # Create temporary directory for nbgradio output
+    temp_dir = Path(f"temp_{notebook_name}")
+    temp_dir.mkdir(exist_ok=True)
+    
+    try:
+        # Run nbgradio with --spaces and --fragment
+        cmd = [
+            "nbgradio", "build", 
+            str(notebook_path),
+            "--spaces",
+            "--fragment",
+            "--output-dir", str(temp_dir)
+        ]
+        
+        print(f"🚀 Running: {' '.join(cmd)}")
+        result = subprocess.run(cmd, capture_output=True, text=True)
+        
+        if result.returncode != 0:
+            print(f"❌ Error converting {notebook_name}:")
+            print(result.stderr)
+            return False
+        
+        print(f"✅ Successfully converted {notebook_name}")
+        
+        # Process the generated fragment
+        fragment_file = temp_dir / "fragments" / f"{notebook_name}.html"
+        if fragment_file.exists():
+            create_recipe_page(notebook_name, fragment_file)
+            return True
+        else:
+            print(f"❌ Fragment file not found: {fragment_file}")
+            return False
+            
+    except Exception as e:
+        print(f"❌ Error processing {notebook_name}: {e}")
+        return False
+    finally:
+        # Clean up temporary directory
+        if temp_dir.exists():
+            shutil.rmtree(temp_dir)
+
+def create_recipe_page(notebook_name, fragment_file):
+    """Create a complete recipe page from the fragment."""
+    recipes_dir = Path("recipes")
+    recipes_dir.mkdir(exist_ok=True)
+    
+    # Read the fragment content
+    with open(fragment_file, 'r', encoding='utf-8') as f:
+        fragment_content = f.read()
+    
+    # Extract title from notebook name (convert snake_case to Title Case)
+    title = notebook_name.replace('_', ' ').replace('-', ' ').title()
+    
+    # Create the complete recipe page
+    recipe_html = f"""<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>{title} - ClosedToOpen</title>
+		<link rel="stylesheet" href="../style.css" />
+	</head>
+	<body>
+		<nav class="navbar">
+			<div class="nav-content">
+				<h1 class="nav-title">ClosedToOpen</h1>
+				<p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
+			</div>
+		</nav>
+
+		<main class="main-content">
+			<div class="breadcrumb">
+				<a href="../index.html">← Back to Migration Guides</a>
+			</div>
+			
+			<section class="recipe-header">
+				<h1 class="recipe-title">{title}</h1>
+				<p class="recipe-description">Migrate from proprietary APIs to open-source alternatives</p>
+				<div class="recipe-meta">
+					<span class="difficulty">Difficulty: Medium</span>
+					<span class="time">Time: 45 minutes</span>
+					<span class="category">Category: Migration</span>
+				</div>
+			</section>
+
+			<section class="recipe-content">
+				<div class="notebook-content">
+					{fragment_content}
+				</div>
+			</section>
+		</main>
+	</body>
+</html>"""
+    
+    # Write the recipe page
+    recipe_file = recipes_dir / f"{notebook_name}.html"
+    with open(recipe_file, 'w', encoding='utf-8') as f:
+        f.write(recipe_html)
+    
+    print(f"📄 Created recipe page: {recipe_file}")
+
+def update_notebook_for_nbgradio(notebook_path):
+    """Update notebook to include nbgradio syntax for interactive cells."""
+    print(f"🔧 Updating {notebook_path.name} for nbgradio...")
+    
+    # Read the notebook
+    with open(notebook_path, 'r', encoding='utf-8') as f:
+        notebook = json.load(f)
+    
+    updated = False
+    
+    # Look for cells with gradio code and add nbgradio comments
+    for cell in notebook['cells']:
+        if cell['cell_type'] == 'code':
+            source = ''.join(cell['source'])
+            
+            # Check if this cell contains gradio code
+            if 'import gradio' in source or 'gr.Interface' in source or 'demo.launch()' in source:
+                # Check if it already has nbgradio comment
+                if not source.startswith('#nbgradio'):
+                    # Add nbgradio comment
+                    notebook_name = notebook_path.stem
+                    nbgradio_comment = f"#nbgradio name=\"{notebook_name}\"\n"
+                    cell['source'] = [nbgradio_comment] + cell['source']
+                    updated = True
+                    print(f"  ✅ Added nbgradio comment to gradio cell")
+    
+    # Write back if updated
+    if updated:
+        with open(notebook_path, 'w', encoding='utf-8') as f:
+            json.dump(notebook, f, indent=2)
+        print(f"  📝 Updated notebook saved")
+    else:
+        print(f"  ℹ️  No gradio cells found or already updated")
+
+def main():
+    """Main function to convert all notebooks to recipes."""
+    print("🚀 Starting notebook to recipe conversion...")
+    
+    # Install nbgradio
+    install_nbgradio()
+    
+    # Get notebook files
+    notebook_files = get_notebook_files()
+    if not notebook_files:
+        print("❌ No notebooks found to convert")
+        return
+    
+    # Get existing recipes
+    existing_recipes = get_existing_recipes()
+    print(f"📋 Existing recipes: {existing_recipes}")
+    
+    # Convert each notebook
+    converted_count = 0
+    for notebook_path in notebook_files:
+        notebook_name = notebook_path.stem
+        
+        # Skip if recipe already exists
+        if notebook_name in existing_recipes:
+            print(f"⏭️  Skipping {notebook_name} (recipe already exists)")
+            continue
+        
+        # Update notebook for nbgradio
+        update_notebook_for_nbgradio(notebook_path)
+        
+        # Convert to recipe
+        if convert_notebook_to_recipe(notebook_path):
+            converted_count += 1
+    
+    print(f"\n🎉 Conversion complete! {converted_count} new recipe(s) created.")
+    print("📁 Check the recipes/ directory for the generated files.")
+
+if __name__ == "__main__":
+    main()

generate_recipes.py

@@ -0,0 +1,216 @@
+#!/usr/bin/env python3
+# /// script
+# dependencies = [
+#   "nbgradio",
+# ]
+# ///
+
+"""
+Script to convert Jupyter notebooks to recipe pages using nbgradio.
+This script processes notebooks in the notebooks/ directory and generates
+recipe pages in the recipes/ directory with proper styling integration.
+"""
+
+import os
+import subprocess
+import sys
+from pathlib import Path
+import shutil
+import json
+
+def get_notebook_files():
+    """Get all notebook files from the notebooks directory."""
+    notebooks_dir = Path("notebooks")
+    if not notebooks_dir.exists():
+        print("❌ notebooks/ directory not found")
+        return []
+    
+    notebook_files = list(notebooks_dir.glob("*.ipynb"))
+    print(f"📚 Found {len(notebook_files)} notebook(s): {[f.name for f in notebook_files]}")
+    return notebook_files
+
+def get_existing_recipes():
+    """Get list of existing recipe files."""
+    recipes_dir = Path("recipes")
+    if not recipes_dir.exists():
+        return []
+    
+    recipe_files = list(recipes_dir.glob("*.html"))
+    return [f.stem for f in recipe_files]
+
+def convert_notebook_to_recipe(notebook_path):
+    """Convert a single notebook to a recipe page."""
+    notebook_name = notebook_path.stem
+    print(f"\n🔄 Converting {notebook_name}...")
+    
+    # Create temporary directory for nbgradio output
+    temp_dir = Path(f"temp_{notebook_name}")
+    temp_dir.mkdir(exist_ok=True)
+    
+    try:
+        # Run nbgradio with --spaces and --fragment
+        cmd = [
+            "nbgradio", "build", 
+            str(notebook_path),
+            "--spaces",
+            "--fragment",
+            "--output-dir", str(temp_dir)
+        ]
+        
+        print(f"🚀 Running: {' '.join(cmd)}")
+        result = subprocess.run(cmd, capture_output=True, text=True)
+        
+        if result.returncode != 0:
+            print(f"❌ Error converting {notebook_name}:")
+            print(result.stderr)
+            return False
+        
+        print(f"✅ Successfully converted {notebook_name}")
+        
+        # Process the generated fragment
+        fragment_file = temp_dir / "fragments" / f"{notebook_name}.html"
+        if fragment_file.exists():
+            create_recipe_page(notebook_name, fragment_file)
+            return True
+        else:
+            print(f"❌ Fragment file not found: {fragment_file}")
+            return False
+            
+    except Exception as e:
+        print(f"❌ Error processing {notebook_name}: {e}")
+        return False
+    finally:
+        # Clean up temporary directory
+        if temp_dir.exists():
+            shutil.rmtree(temp_dir)
+
+def create_recipe_page(notebook_name, fragment_file):
+    """Create a complete recipe page from the fragment."""
+    recipes_dir = Path("recipes")
+    recipes_dir.mkdir(exist_ok=True)
+    
+    # Read the fragment content
+    with open(fragment_file, 'r', encoding='utf-8') as f:
+        fragment_content = f.read()
+    
+    # Extract title from notebook name (convert snake_case to Title Case)
+    title = notebook_name.replace('_', ' ').replace('-', ' ').title()
+    
+    # Create the complete recipe page
+    recipe_html = f"""<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>{title} - ClosedToOpen</title>
+		<link rel="stylesheet" href="../style.css" />
+	</head>
+	<body>
+		<nav class="navbar">
+			<div class="nav-content">
+				<h1 class="nav-title">ClosedToOpen</h1>
+				<p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
+			</div>
+		</nav>
+
+		<main class="main-content">
+			<div class="breadcrumb">
+				<a href="../index.html">← Back to Migration Guides</a>
+			</div>
+			
+			<section class="recipe-header">
+				<h1 class="recipe-title">{title}</h1>
+				<p class="recipe-description">Migrate from proprietary APIs to open-source alternatives</p>
+				<div class="recipe-meta">
+					<span class="difficulty">Difficulty: Medium</span>
+					<span class="time">Time: 45 minutes</span>
+					<span class="category">Category: Migration</span>
+				</div>
+			</section>
+
+			<section class="recipe-content">
+				<div class="notebook-content">
+					{fragment_content}
+				</div>
+			</section>
+		</main>
+	</body>
+</html>"""
+    
+    # Write the recipe page
+    recipe_file = recipes_dir / f"{notebook_name}.html"
+    with open(recipe_file, 'w', encoding='utf-8') as f:
+        f.write(recipe_html)
+    
+    print(f"📄 Created recipe page: {recipe_file}")
+
+def update_notebook_for_nbgradio(notebook_path):
+    """Update notebook to include nbgradio syntax for interactive cells."""
+    print(f"🔧 Updating {notebook_path.name} for nbgradio...")
+    
+    # Read the notebook
+    with open(notebook_path, 'r', encoding='utf-8') as f:
+        notebook = json.load(f)
+    
+    updated = False
+    
+    # Look for cells with gradio code and add nbgradio comments
+    for cell in notebook['cells']:
+        if cell['cell_type'] == 'code':
+            source = ''.join(cell['source'])
+            
+            # Check if this cell contains gradio code
+            if 'import gradio' in source or 'gr.Interface' in source or 'demo.launch()' in source:
+                # Check if it already has nbgradio comment
+                if not source.startswith('#nbgradio'):
+                    # Add nbgradio comment
+                    notebook_name = notebook_path.stem
+                    nbgradio_comment = f"#nbgradio name=\"{notebook_name}\"\n"
+                    cell['source'] = [nbgradio_comment] + cell['source']
+                    updated = True
+                    print(f"  ✅ Added nbgradio comment to gradio cell")
+    
+    # Write back if updated
+    if updated:
+        with open(notebook_path, 'w', encoding='utf-8') as f:
+            json.dump(notebook, f, indent=2)
+        print(f"  📝 Updated notebook saved")
+    else:
+        print(f"  ℹ️  No gradio cells found or already updated")
+
+def main():
+    """Main function to convert all notebooks to recipes."""
+    print("🚀 Starting notebook to recipe conversion...")
+    
+    # Get notebook files
+    notebook_files = get_notebook_files()
+    if not notebook_files:
+        print("❌ No notebooks found to convert")
+        return
+    
+    # Get existing recipes
+    existing_recipes = get_existing_recipes()
+    print(f"📋 Existing recipes: {existing_recipes}")
+    
+    # Convert each notebook
+    converted_count = 0
+    for notebook_path in notebook_files:
+        notebook_name = notebook_path.stem
+        
+        # Skip if recipe already exists
+        if notebook_name in existing_recipes:
+            print(f"⏭️  Skipping {notebook_name} (recipe already exists)")
+            continue
+        
+        # Update notebook for nbgradio
+        update_notebook_for_nbgradio(notebook_path)
+        
+        # Convert to recipe
+        if convert_notebook_to_recipe(notebook_path):
+            converted_count += 1
+    
+    print(f"\n🎉 Conversion complete! {converted_count} new recipe(s) created.")
+    print("📁 Check the recipes/ directory for the generated files.")
+
+if __name__ == "__main__":
+    main()

index.html

@@ -52,11 +52,12 @@
 						<div class="recipe-cell audio">
 							<h3>Audio</h3>
 							<div class="recipe-links">
-								<a href="audio.html#whisper" class="recipe-link">Whisper API → Whisper.cpp</a>
+								<a href="recipes/whisper_api_to_whisper_cpp.html" class="recipe-link">Whisper API → Whisper.cpp</a>
+								<a href="recipes/test_notebook.html" class="recipe-link">Test Notebook Demo</a>
 								<a href="audio.html#tts" class="recipe-link">Text-to-Speech → Bark</a>
 								<a href="audio.html#classification" class="recipe-link">Audio Classification</a>
 								<a href="audio.html#music" class="recipe-link">Music Generation</a>
-								<a href="audio.html" class="recipe-link more-recipes">+ 3 more recipes</a>
+								<a href="audio.html" class="recipe-link more-recipes">+ 2 more recipes</a>
 							</div>
 						</div>
 						<div class="recipe-cell video">
@@ -116,6 +117,73 @@
 					</div>
 				</div>
 			</section>
+
+			<section class="picks-section">
+				<h2 class="section-title">Abubakar's Picks</h2>
+				<p class="picks-subtitle">My curated recommendations for the best open-source models across different AI tasks</p>
+				
+				<div class="picks-grid">
+					<div class="pick-category">
+						<h3>🎵 Audio Processing</h3>
+						<ul class="pick-list">
+							<li><strong>Whisper.cpp</strong> - Best for speech-to-text, runs locally</li>
+							<li><strong>Bark</strong> - Excellent text-to-speech with emotion</li>
+							<li><strong>MusicGen</strong> - Meta's music generation model</li>
+							<li><strong>AudioCraft</strong> - Facebook's audio generation suite</li>
+						</ul>
+					</div>
+
+					<div class="pick-category">
+						<h3>🎬 Video Processing</h3>
+						<ul class="pick-list">
+							<li><strong>Video-LLaMA</strong> - Best for video understanding</li>
+							<li><strong>Stable Video Diffusion</strong> - Top-tier video generation</li>
+							<li><strong>AnimateDiff</strong> - Great for character animation</li>
+							<li><strong>RunwayML</strong> - Professional video editing AI</li>
+						</ul>
+					</div>
+
+					<div class="pick-category">
+						<h3>🖼️ Multimodal</h3>
+						<ul class="pick-list">
+							<li><strong>LLaVA</strong> - Best open-source vision-language model</li>
+							<li><strong>Stable Diffusion XL</strong> - Superior image generation</li>
+							<li><strong>BLIP-2</strong> - Excellent image captioning</li>
+							<li><strong>InstructBLIP</strong> - Great for visual Q&A</li>
+						</ul>
+					</div>
+
+					<div class="pick-category">
+						<h3>📝 Text Generation</h3>
+						<ul class="pick-list">
+							<li><strong>Llama 3</strong> - Best overall performance</li>
+							<li><strong>Mistral 7B</strong> - Fast and efficient</li>
+							<li><strong>Code Llama</strong> - Superior code generation</li>
+							<li><strong>Phi-3</strong> - Microsoft's efficient model</li>
+						</ul>
+					</div>
+
+					<div class="pick-category">
+						<h3>🔒 Safety & Guardrails</h3>
+						<ul class="pick-list">
+							<li><strong>NeuralGuard</strong> - Content moderation</li>
+							<li><strong>Guardrails AI</strong> - Output validation</li>
+							<li><strong>LangChain Guard</strong> - Prompt protection</li>
+							<li><strong>Moderation API</strong> - Hugging Face's solution</li>
+						</ul>
+					</div>
+
+					<div class="pick-category">
+						<h3>⚡ Optimization</h3>
+						<ul class="pick-list">
+							<li><strong>GGML</strong> - Model quantization</li>
+							<li><strong>Ollama</strong> - Local model serving</li>
+							<li><strong>vLLM</strong> - High-performance inference</li>
+							<li><strong>TensorRT</strong> - NVIDIA optimization</li>
+						</ul>
+					</div>
+				</div>
+			</section>
 		</main>
 	</body>
 </html>

notebooks/test_notebook.ipynb

@@ -0,0 +1,69 @@
+{
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "# `nbgradio` Test Notebook\n",
+        "\n",
+        "This notebook demonstrates the `nbgradio` library with a simple Gradio app.\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "#nbgradio name=\"test_notebook\"\n",
+        "# nbgradio name=\"greet\"\n",
+        "import gradio as gr\n",
+        "\n",
+        "\n",
+        "def greet(name):\n",
+        "    return f\"Hello {name}!\"\n",
+        "\n",
+        "\n",
+        "demo = gr.Interface(\n",
+        "    fn=greet, inputs=gr.Textbox(label=\"Your name\"), outputs=gr.Textbox(label=\"Greeting\")\n",
+        ")\n",
+        "\n",
+        "demo.launch()"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Another Section\n",
+        "\n",
+        "The code block above used the `#nbgradio` syntax so that it is launched as a Gradio app. If you don't add that comment block, the `nbgradio` will treat it as \"regular\" code that should just be syntax highlighted:\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "def calculate_fibonacci(n):\n",
+        "    \"\"\"Calculate the nth Fibonacci number.\"\"\"\n",
+        "    if n <= 1:\n",
+        "        return n\n",
+        "    return calculate_fibonacci(n - 1) + calculate_fibonacci(n - 2)\n",
+        "\n",
+        "\n",
+        "# Test the function\n",
+        "for i in range(10):\n",
+        "    print(f\"F({i}) = {calculate_fibonacci(i)}\")"
+      ]
+    }
+  ],
+  "metadata": {
+    "language_info": {
+      "name": "python"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 2
+}

notebooks/whisper_api_to_whisper_cpp.ipynb

@@ -0,0 +1,164 @@
+{
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "# Whisper API → Whisper.cpp Migration\n",
+        "\n",
+        "This notebook demonstrates how to migrate from OpenAI's Whisper API to using Whisper.cpp for local speech-to-text processing.\n",
+        "\n",
+        "## Benefits of Whisper.cpp\n",
+        "- **Local processing**: No API calls, complete privacy\n",
+        "- **Cost savings**: No per-minute charges\n",
+        "- **Offline capability**: Works without internet\n",
+        "- **Customization**: Fine-tune for your specific use case\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Installation\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "# Install whisper.cpp and dependencies\n",
+        "%pip install whisper-cpp-python\n",
+        "%pip install librosa soundfile\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Setup\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "import whisper_cpp\n",
+        "import librosa\n",
+        "import soundfile as sf\n",
+        "import numpy as np\n",
+        "from pathlib import Path\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Model Loading\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "# Load Whisper model (downloads automatically on first run)\n",
+        "model = whisper_cpp.Whisper.from_pretrained(\"base\")\n",
+        "print(\"Model loaded successfully!\")\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Audio Processing Function\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "def transcribe_audio(audio_file_path):\n",
+        "    \"\"\"\n",
+        "    Transcribe audio file using Whisper.cpp\n",
+        "    \n",
+        "    Args:\n",
+        "        audio_file_path (str): Path to audio file\n",
+        "    \n",
+        "    Returns:\n",
+        "        dict: Transcription result with text and metadata\n",
+        "    \"\"\"\n",
+        "    # Load audio file\n",
+        "    audio, sr = librosa.load(audio_file_path, sr=16000)\n",
+        "    \n",
+        "    # Transcribe using Whisper.cpp\n",
+        "    result = model.transcribe(audio)\n",
+        "    \n",
+        "    return {\n",
+        "        \"text\": result[\"text\"],\n",
+        "        \"language\": result.get(\"language\", \"auto\"),\n",
+        "        \"segments\": result.get(\"segments\", [])\n",
+        "    }\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Interactive Demo\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "#nbgradio name=\"whisper_api_to_whisper_cpp\"\n",
+        "import gradio as gr\n",
+        "\n",
+        "def process_audio(audio_file):\n",
+        "    if audio_file is None:\n",
+        "        return \"Please upload an audio file.\"\n",
+        "    \n",
+        "    try:\n",
+        "        result = transcribe_audio(audio_file)\n",
+        "        return f\"**Transcription:**\\\\n{result['text']}\\\\n\\\\n**Language:** {result['language']}\"\n",
+        "    except Exception as e:\n",
+        "        return f\"Error processing audio: {str(e)}\"\n",
+        "\n",
+        "# Create Gradio interface\n",
+        "demo = gr.Interface(\n",
+        "    fn=process_audio,\n",
+        "    inputs=gr.Audio(type=\"filepath\"),\n",
+        "    outputs=gr.Markdown(),\n",
+        "    title=\"Whisper.cpp Speech-to-Text\",\n",
+        "    description=\"Upload an audio file to transcribe it using Whisper.cpp (local processing)\",\n",
+        "    examples=[\n",
+        "        # Add example audio files here\n",
+        "    ]\n",
+        ")\n",
+        "\n",
+        "demo.launch()\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": []
+    }
+  ],
+  "metadata": {
+    "language_info": {
+      "name": "python"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 2
+}

recipes/test_notebook.html

@@ -0,0 +1,472 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>Test Notebook - ClosedToOpen</title>
+		<link rel="stylesheet" href="../style.css" />
+	</head>
+	<body>
+		<nav class="navbar">
+			<div class="nav-content">
+				<h1 class="nav-title">ClosedToOpen</h1>
+				<p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
+			</div>
+		</nav>
+
+		<main class="main-content">
+			<div class="breadcrumb">
+				<a href="../index.html">← Back to Migration Guides</a>
+			</div>
+			
+			<section class="recipe-header">
+				<h1 class="recipe-title">Test Notebook</h1>
+				<p class="recipe-description">Migrate from proprietary APIs to open-source alternatives</p>
+				<div class="recipe-meta">
+					<span class="difficulty">Difficulty: Medium</span>
+					<span class="time">Time: 45 minutes</span>
+					<span class="category">Category: Migration</span>
+				</div>
+			</section>
+
+			<section class="recipe-content">
+				<div class="notebook-content">
+					<style>
+/* Pygments syntax highlighting - Light theme */
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #ffffcc }
+.highlight { background: #f8f8f8; }
+.highlight .c { color: #3D7B7B; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #F00 } /* Error */
+.highlight .k { color: #008000; font-weight: bold } /* Keyword */
+.highlight .o { color: #666 } /* Operator */
+.highlight .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #9C6500 } /* Comment.Preproc */
+.highlight .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+.highlight .gr { color: #E40000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #008400 } /* Generic.Inserted */
+.highlight .go { color: #717171 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #04D } /* Generic.Traceback */
+.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #008000 } /* Keyword.Pseudo */
+.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #B00040 } /* Keyword.Type */
+.highlight .m { color: #666 } /* Literal.Number */
+.highlight .s { color: #BA2121 } /* Literal.String */
+.highlight .na { color: #687822 } /* Name.Attribute */
+.highlight .nb { color: #008000 } /* Name.Builtin */
+.highlight .nc { color: #00F; font-weight: bold } /* Name.Class */
+.highlight .no { color: #800 } /* Name.Constant */
+.highlight .nd { color: #A2F } /* Name.Decorator */
+.highlight .ni { color: #717171; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #00F } /* Name.Function */
+.highlight .nl { color: #767600 } /* Name.Label */
+.highlight .nn { color: #00F; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #19177C } /* Name.Variable */
+.highlight .ow { color: #A2F; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #BBB } /* Text.Whitespace */
+.highlight .mb { color: #666 } /* Literal.Number.Bin */
+.highlight .mf { color: #666 } /* Literal.Number.Float */
+.highlight .mh { color: #666 } /* Literal.Number.Hex */
+.highlight .mi { color: #666 } /* Literal.Number.Integer */
+.highlight .mo { color: #666 } /* Literal.Number.Oct */
+.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
+.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
+.highlight .sc { color: #BA2121 } /* Literal.String.Char */
+.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+.highlight .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.highlight .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
+.highlight .sx { color: #008000 } /* Literal.String.Other */
+.highlight .sr { color: #A45A77 } /* Literal.String.Regex */
+.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
+.highlight .ss { color: #19177C } /* Literal.String.Symbol */
+.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #00F } /* Name.Function.Magic */
+.highlight .vc { color: #19177C } /* Name.Variable.Class */
+.highlight .vg { color: #19177C } /* Name.Variable.Global */
+.highlight .vi { color: #19177C } /* Name.Variable.Instance */
+.highlight .vm { color: #19177C } /* Name.Variable.Magic */
+.highlight .il { color: #666 } /* Literal.Number.Integer.Long */
+
+/* Pygments syntax highlighting - Dark theme */
+@media (prefers-color-scheme: dark) {
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #49483e }
+.highlight { background: #272822; color: #F8F8F2 }
+.highlight .c { color: #959077 } /* Comment */
+.highlight .err { color: #ED007E; background-color: #1E0010 } /* Error */
+.highlight .esc { color: #F8F8F2 } /* Escape */
+.highlight .g { color: #F8F8F2 } /* Generic */
+.highlight .k { color: #66D9EF } /* Keyword */
+.highlight .l { color: #AE81FF } /* Literal */
+.highlight .n { color: #F8F8F2 } /* Name */
+.highlight .o { color: #FF4689 } /* Operator */
+.highlight .x { color: #F8F8F2 } /* Other */
+.highlight .p { color: #F8F8F2 } /* Punctuation */
+.highlight .ch { color: #959077 } /* Comment.Hashbang */
+.highlight .cm { color: #959077 } /* Comment.Multiline */
+.highlight .cp { color: #959077 } /* Comment.Preproc */
+.highlight .cpf { color: #959077 } /* Comment.PreprocFile */
+.highlight .c1 { color: #959077 } /* Comment.Single */
+.highlight .cs { color: #959077 } /* Comment.Special */
+.highlight .gd { color: #FF4689 } /* Generic.Deleted */
+.highlight .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
+.highlight .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+.highlight .gr { color: #F8F8F2 } /* Generic.Error */
+.highlight .gh { color: #F8F8F2 } /* Generic.Heading */
+.highlight .gi { color: #A6E22E } /* Generic.Inserted */
+.highlight .go { color: #66D9EF } /* Generic.Output */
+.highlight .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #959077 } /* Generic.Subheading */
+.highlight .gt { color: #F8F8F2 } /* Generic.Traceback */
+.highlight .kc { color: #66D9EF } /* Keyword.Constant */
+.highlight .kd { color: #66D9EF } /* Keyword.Declaration */
+.highlight .kn { color: #FF4689 } /* Keyword.Namespace */
+.highlight .kp { color: #66D9EF } /* Keyword.Pseudo */
+.highlight .kr { color: #66D9EF } /* Keyword.Reserved */
+.highlight .kt { color: #66D9EF } /* Keyword.Type */
+.highlight .ld { color: #E6DB74 } /* Literal.Date */
+.highlight .m { color: #AE81FF } /* Literal.Number */
+.highlight .s { color: #E6DB74 } /* Literal.String */
+.highlight .na { color: #A6E22E } /* Name.Attribute */
+.highlight .nb { color: #F8F8F2 } /* Name.Builtin */
+.highlight .nc { color: #A6E22E } /* Name.Class */
+.highlight .no { color: #66D9EF } /* Name.Constant */
+.highlight .nd { color: #A6E22E } /* Name.Decorator */
+.highlight .ni { color: #F8F8F2 } /* Name.Entity */
+.highlight .ne { color: #A6E22E } /* Name.Exception */
+.highlight .nf { color: #A6E22E } /* Name.Function */
+.highlight .nl { color: #F8F8F2 } /* Name.Label */
+.highlight .nn { color: #F8F8F2 } /* Name.Namespace */
+.highlight .nx { color: #A6E22E } /* Name.Other */
+.highlight .py { color: #F8F8F2 } /* Name.Property */
+.highlight .nt { color: #FF4689 } /* Name.Tag */
+.highlight .nv { color: #F8F8F2 } /* Name.Variable */
+.highlight .ow { color: #FF4689 } /* Operator.Word */
+.highlight .pm { color: #F8F8F2 } /* Punctuation.Marker */
+.highlight .w { color: #F8F8F2 } /* Text.Whitespace */
+.highlight .mb { color: #AE81FF } /* Literal.Number.Bin */
+.highlight .mf { color: #AE81FF } /* Literal.Number.Float */
+.highlight .mh { color: #AE81FF } /* Literal.Number.Hex */
+.highlight .mi { color: #AE81FF } /* Literal.Number.Integer */
+.highlight .mo { color: #AE81FF } /* Literal.Number.Oct */
+.highlight .sa { color: #E6DB74 } /* Literal.String.Affix */
+.highlight .sb { color: #E6DB74 } /* Literal.String.Backtick */
+.highlight .sc { color: #E6DB74 } /* Literal.String.Char */
+.highlight .dl { color: #E6DB74 } /* Literal.String.Delimiter */
+.highlight .sd { color: #E6DB74 } /* Literal.String.Doc */
+.highlight .s2 { color: #E6DB74 } /* Literal.String.Double */
+.highlight .se { color: #AE81FF } /* Literal.String.Escape */
+.highlight .sh { color: #E6DB74 } /* Literal.String.Heredoc */
+.highlight .si { color: #E6DB74 } /* Literal.String.Interpol */
+.highlight .sx { color: #E6DB74 } /* Literal.String.Other */
+.highlight .sr { color: #E6DB74 } /* Literal.String.Regex */
+.highlight .s1 { color: #E6DB74 } /* Literal.String.Single */
+.highlight .ss { color: #E6DB74 } /* Literal.String.Symbol */
+.highlight .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #A6E22E } /* Name.Function.Magic */
+.highlight .vc { color: #F8F8F2 } /* Name.Variable.Class */
+.highlight .vg { color: #F8F8F2 } /* Name.Variable.Global */
+.highlight .vi { color: #F8F8F2 } /* Name.Variable.Instance */
+.highlight .vm { color: #F8F8F2 } /* Name.Variable.Magic */
+.highlight .il { color: #AE81FF } /* Literal.Number.Integer.Long */
+}
+
+/* Override Pygments background in dark mode to match cell background */
+@media (prefers-color-scheme: dark) {
+    .highlight {
+        background: #0f0f11 !important;
+    }
+}
+
+
+/* CSS Custom Properties for theming */
+:root {
+    --bg-color: #ffffff;
+    --text-color: #333333;
+    --border-color: #e9ecef;
+    --code-bg: #e9ecef;
+    --markdown-bg: #f8f9fa;
+    --markdown-border: #007acc;
+    --cell-bg: #f8f9fa;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-color: #1a1a1a;
+        --text-color: #e0e0e0;
+        --border-color: #404040;
+        --code-bg: #0f0f11;
+        --markdown-bg: #0f0f11;
+        --markdown-border: #4a9eff;
+        --cell-bg: #0f0f11;
+    }
+}
+
+/* nbgradio CSS */
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.nbgradio-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 10px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+}
+
+.nbgradio-fragment {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+}
+
+.cell {
+    margin-bottom: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.cell:first-child {
+    margin-top: 20px;
+}
+
+.cell-markdown {
+    padding: 12px;
+    background: var(--markdown-bg);
+    border-left: 4px solid var(--markdown-border);
+    transition: background-color 0.3s ease;
+}
+
+.cell-markdown h1,
+.cell-markdown h2,
+.cell-markdown h3,
+.cell-markdown h4,
+.cell-markdown h5,
+.cell-markdown h6 {
+    margin-top: 0;
+    color: var(--text-color);
+}
+
+.cell-markdown p {
+    margin-bottom: 16px;
+    color: var(--text-color);
+}
+
+.cell-markdown code {
+    background: var(--code-bg);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.9em;
+    color: var(--text-color);
+}
+
+.cell-markdown pre {
+    background: var(--markdown-bg);
+    padding: 8px;
+    border-radius: 8px;
+    overflow-x: auto;
+    border: 1px solid var(--border-color);
+}
+
+.cell-markdown pre code {
+    background: none;
+    padding: 0;
+}
+
+.cell-code {
+    background: var(--cell-bg);
+    border: 1px solid var(--border-color);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.cell-code pre {
+    margin: 0;
+    padding: 8px 8px 4px 8px;
+    overflow-x: auto;
+}
+
+.cell-code code {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--text-color);
+}
+
+.cell-gradio {
+    margin-bottom: 10px;
+}
+
+.gradio-app {
+    width: 100%;
+}
+
+.gradio-loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    margin-bottom: 10px;
+    background: var(--cell-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    gap: 12px;
+}
+
+.gradio-spinner {
+    width: 20px;
+    height: 20px;
+    border: 3px solid #2c2c2c;
+    border-top: 3px solid #ff7c00;
+    border-radius: 50%;
+    animation: gradio-spin 1s linear infinite;
+}
+
+.gradio-loading-text {
+    color: var(--text-color);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+@keyframes gradio-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@media (prefers-color-scheme: dark) {
+    .gradio-spinner {
+        border: 3px solid #404040;
+        border-top: 3px solid #ff7c00;
+    }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .nbgradio-content {
+        padding: 5px;
+    }
+    
+    .cell-markdown,
+    .cell-code {
+        padding: 8px;
+    }
+}
+
+</style>
+<script
+    type="module"
+    src="https://gradio.s3-us-west-2.amazonaws.com/5.49.1/gradio.js"
+></script>
+<div class="nbgradio-fragment">
+    <div class="cell cell-markdown"><h1><code>nbgradio</code> Test Notebook</h1>
+<p>This notebook demonstrates the <code>nbgradio</code> library with a simple Gradio app.</p>
+</div>
+
+<div class="cell cell-gradio" id="gradio-cell-test_notebook">
+    <div class="gradio-loading-container">
+        <div class="gradio-spinner"></div>
+        <span class="gradio-loading-text">Loading...</span>
+    </div>
+    <gradio-app space="abidlabs/test_notebook" class="gradio-app" style="display: none;"></gradio-app>
+    <script>
+        (function() {
+            const gradioApp = document.querySelector('#gradio-cell-test_notebook gradio-app');
+            const loadingContainer = document.querySelector('#gradio-cell-test_notebook .gradio-loading-container');
+            let isLoaded = false;
+            let checkCount = 0;
+            const maxChecks = 40; // 20 seconds max
+            
+            function handleLoadComplete() {
+                if (!isLoaded) {
+                    isLoaded = true;
+                    console.log('Gradio app loaded for test_notebook');
+                    loadingContainer.style.display = 'none';
+                    gradioApp.style.display = 'block';
+                }
+            }
+            
+            // Try multiple event types that Gradio might emit
+            const events = ['render', 'loaded', 'ready', 'mount'];
+            events.forEach(event => {
+                gradioApp.addEventListener(event, handleLoadComplete);
+            });
+            
+            // Fallback: Check if the Gradio app has content loaded
+            const checkLoaded = () => {
+                checkCount++;
+                
+                // Multiple detection methods
+                const hasShadowContent = gradioApp.shadowRoot && gradioApp.shadowRoot.children.length > 0;
+                const hasVisibleContent = gradioApp.offsetHeight > 100; // App has some height
+                const hasIframe = gradioApp.querySelector('iframe');
+                const hasGradioContent = gradioApp.innerHTML.includes('gradio') || 
+                                       (gradioApp.shadowRoot && 
+                                        gradioApp.shadowRoot.innerHTML.includes('gradio'));
+                
+                if (hasShadowContent || hasVisibleContent || hasIframe || hasGradioContent) {
+                    handleLoadComplete();
+                } else if (checkCount < maxChecks) {
+                    setTimeout(checkLoaded, 500);
+                } else {
+                    // Give up after maxChecks attempts and show the app anyway
+                    handleLoadComplete();
+                }
+            };
+            
+            // Start checking after a short delay
+            setTimeout(checkLoaded, 1000);
+        })();
+    </script>
+</div>
+
+<div class="cell cell-markdown"><h2>Another Section</h2>
+<p>The code block above used the <code>#nbgradio</code> syntax so that it is launched as a Gradio app. If you don't add that comment block, the <code>nbgradio</code> will treat it as &quot;regular&quot; code that should just be syntax highlighted:</p>
+</div>
+<div class="cell cell-code"><pre><code><div class="highlight"><pre><span></span><code><span class="k">def</span><span class="w"> </span><span class="nf">calculate_fibonacci</span><span class="p">(</span><span class="n">n</span><span class="p">):</span>
+<span class="w">    </span><span class="sd">&quot;&quot;&quot;Calculate the nth Fibonacci number.&quot;&quot;&quot;</span>
+    <span class="k">if</span> <span class="n">n</span> <span class="o">&lt;=</span> <span class="mi">1</span><span class="p">:</span>
+        <span class="k">return</span> <span class="n">n</span>
+    <span class="k">return</span> <span class="n">calculate_fibonacci</span><span class="p">(</span><span class="n">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="n">calculate_fibonacci</span><span class="p">(</span><span class="n">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">)</span>
+
+
+<span class="c1"># Test the function</span>
+<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
+    <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;F(</span><span class="si">{</span><span class="n">i</span><span class="si">}</span><span class="s2">) = </span><span class="si">{</span><span class="n">calculate_fibonacci</span><span class="p">(</span><span class="n">i</span><span class="p">)</span><span class="si">}</span><span class="s2">&quot;</span><span class="p">)</span>
+</code></pre></div>
+</code></pre></div>
+</div>
+				</div>
+			</section>
+		</main>
+	</body>
+</html>

recipes/whisper_api_to_whisper_cpp.html

@@ -0,0 +1,515 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>Whisper Api To Whisper Cpp - ClosedToOpen</title>
+		<link rel="stylesheet" href="../style.css" />
+	</head>
+	<body>
+		<nav class="navbar">
+			<div class="nav-content">
+				<h1 class="nav-title">ClosedToOpen</h1>
+				<p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
+			</div>
+		</nav>
+
+		<main class="main-content">
+			<div class="breadcrumb">
+				<a href="../index.html">← Back to Migration Guides</a>
+			</div>
+			
+			<section class="recipe-header">
+				<h1 class="recipe-title">Whisper Api To Whisper Cpp</h1>
+				<p class="recipe-description">Migrate from proprietary APIs to open-source alternatives</p>
+				<div class="recipe-meta">
+					<span class="difficulty">Difficulty: Medium</span>
+					<span class="time">Time: 45 minutes</span>
+					<span class="category">Category: Migration</span>
+				</div>
+			</section>
+
+			<section class="recipe-content">
+				<div class="notebook-content">
+					<style>
+/* Pygments syntax highlighting - Light theme */
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #ffffcc }
+.highlight { background: #f8f8f8; }
+.highlight .c { color: #3D7B7B; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #F00 } /* Error */
+.highlight .k { color: #008000; font-weight: bold } /* Keyword */
+.highlight .o { color: #666 } /* Operator */
+.highlight .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #9C6500 } /* Comment.Preproc */
+.highlight .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+.highlight .gr { color: #E40000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #008400 } /* Generic.Inserted */
+.highlight .go { color: #717171 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #04D } /* Generic.Traceback */
+.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #008000 } /* Keyword.Pseudo */
+.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #B00040 } /* Keyword.Type */
+.highlight .m { color: #666 } /* Literal.Number */
+.highlight .s { color: #BA2121 } /* Literal.String */
+.highlight .na { color: #687822 } /* Name.Attribute */
+.highlight .nb { color: #008000 } /* Name.Builtin */
+.highlight .nc { color: #00F; font-weight: bold } /* Name.Class */
+.highlight .no { color: #800 } /* Name.Constant */
+.highlight .nd { color: #A2F } /* Name.Decorator */
+.highlight .ni { color: #717171; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #00F } /* Name.Function */
+.highlight .nl { color: #767600 } /* Name.Label */
+.highlight .nn { color: #00F; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #19177C } /* Name.Variable */
+.highlight .ow { color: #A2F; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #BBB } /* Text.Whitespace */
+.highlight .mb { color: #666 } /* Literal.Number.Bin */
+.highlight .mf { color: #666 } /* Literal.Number.Float */
+.highlight .mh { color: #666 } /* Literal.Number.Hex */
+.highlight .mi { color: #666 } /* Literal.Number.Integer */
+.highlight .mo { color: #666 } /* Literal.Number.Oct */
+.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
+.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
+.highlight .sc { color: #BA2121 } /* Literal.String.Char */
+.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+.highlight .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.highlight .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
+.highlight .sx { color: #008000 } /* Literal.String.Other */
+.highlight .sr { color: #A45A77 } /* Literal.String.Regex */
+.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
+.highlight .ss { color: #19177C } /* Literal.String.Symbol */
+.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #00F } /* Name.Function.Magic */
+.highlight .vc { color: #19177C } /* Name.Variable.Class */
+.highlight .vg { color: #19177C } /* Name.Variable.Global */
+.highlight .vi { color: #19177C } /* Name.Variable.Instance */
+.highlight .vm { color: #19177C } /* Name.Variable.Magic */
+.highlight .il { color: #666 } /* Literal.Number.Integer.Long */
+
+/* Pygments syntax highlighting - Dark theme */
+@media (prefers-color-scheme: dark) {
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #49483e }
+.highlight { background: #272822; color: #F8F8F2 }
+.highlight .c { color: #959077 } /* Comment */
+.highlight .err { color: #ED007E; background-color: #1E0010 } /* Error */
+.highlight .esc { color: #F8F8F2 } /* Escape */
+.highlight .g { color: #F8F8F2 } /* Generic */
+.highlight .k { color: #66D9EF } /* Keyword */
+.highlight .l { color: #AE81FF } /* Literal */
+.highlight .n { color: #F8F8F2 } /* Name */
+.highlight .o { color: #FF4689 } /* Operator */
+.highlight .x { color: #F8F8F2 } /* Other */
+.highlight .p { color: #F8F8F2 } /* Punctuation */
+.highlight .ch { color: #959077 } /* Comment.Hashbang */
+.highlight .cm { color: #959077 } /* Comment.Multiline */
+.highlight .cp { color: #959077 } /* Comment.Preproc */
+.highlight .cpf { color: #959077 } /* Comment.PreprocFile */
+.highlight .c1 { color: #959077 } /* Comment.Single */
+.highlight .cs { color: #959077 } /* Comment.Special */
+.highlight .gd { color: #FF4689 } /* Generic.Deleted */
+.highlight .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
+.highlight .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+.highlight .gr { color: #F8F8F2 } /* Generic.Error */
+.highlight .gh { color: #F8F8F2 } /* Generic.Heading */
+.highlight .gi { color: #A6E22E } /* Generic.Inserted */
+.highlight .go { color: #66D9EF } /* Generic.Output */
+.highlight .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #959077 } /* Generic.Subheading */
+.highlight .gt { color: #F8F8F2 } /* Generic.Traceback */
+.highlight .kc { color: #66D9EF } /* Keyword.Constant */
+.highlight .kd { color: #66D9EF } /* Keyword.Declaration */
+.highlight .kn { color: #FF4689 } /* Keyword.Namespace */
+.highlight .kp { color: #66D9EF } /* Keyword.Pseudo */
+.highlight .kr { color: #66D9EF } /* Keyword.Reserved */
+.highlight .kt { color: #66D9EF } /* Keyword.Type */
+.highlight .ld { color: #E6DB74 } /* Literal.Date */
+.highlight .m { color: #AE81FF } /* Literal.Number */
+.highlight .s { color: #E6DB74 } /* Literal.String */
+.highlight .na { color: #A6E22E } /* Name.Attribute */
+.highlight .nb { color: #F8F8F2 } /* Name.Builtin */
+.highlight .nc { color: #A6E22E } /* Name.Class */
+.highlight .no { color: #66D9EF } /* Name.Constant */
+.highlight .nd { color: #A6E22E } /* Name.Decorator */
+.highlight .ni { color: #F8F8F2 } /* Name.Entity */
+.highlight .ne { color: #A6E22E } /* Name.Exception */
+.highlight .nf { color: #A6E22E } /* Name.Function */
+.highlight .nl { color: #F8F8F2 } /* Name.Label */
+.highlight .nn { color: #F8F8F2 } /* Name.Namespace */
+.highlight .nx { color: #A6E22E } /* Name.Other */
+.highlight .py { color: #F8F8F2 } /* Name.Property */
+.highlight .nt { color: #FF4689 } /* Name.Tag */
+.highlight .nv { color: #F8F8F2 } /* Name.Variable */
+.highlight .ow { color: #FF4689 } /* Operator.Word */
+.highlight .pm { color: #F8F8F2 } /* Punctuation.Marker */
+.highlight .w { color: #F8F8F2 } /* Text.Whitespace */
+.highlight .mb { color: #AE81FF } /* Literal.Number.Bin */
+.highlight .mf { color: #AE81FF } /* Literal.Number.Float */
+.highlight .mh { color: #AE81FF } /* Literal.Number.Hex */
+.highlight .mi { color: #AE81FF } /* Literal.Number.Integer */
+.highlight .mo { color: #AE81FF } /* Literal.Number.Oct */
+.highlight .sa { color: #E6DB74 } /* Literal.String.Affix */
+.highlight .sb { color: #E6DB74 } /* Literal.String.Backtick */
+.highlight .sc { color: #E6DB74 } /* Literal.String.Char */
+.highlight .dl { color: #E6DB74 } /* Literal.String.Delimiter */
+.highlight .sd { color: #E6DB74 } /* Literal.String.Doc */
+.highlight .s2 { color: #E6DB74 } /* Literal.String.Double */
+.highlight .se { color: #AE81FF } /* Literal.String.Escape */
+.highlight .sh { color: #E6DB74 } /* Literal.String.Heredoc */
+.highlight .si { color: #E6DB74 } /* Literal.String.Interpol */
+.highlight .sx { color: #E6DB74 } /* Literal.String.Other */
+.highlight .sr { color: #E6DB74 } /* Literal.String.Regex */
+.highlight .s1 { color: #E6DB74 } /* Literal.String.Single */
+.highlight .ss { color: #E6DB74 } /* Literal.String.Symbol */
+.highlight .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #A6E22E } /* Name.Function.Magic */
+.highlight .vc { color: #F8F8F2 } /* Name.Variable.Class */
+.highlight .vg { color: #F8F8F2 } /* Name.Variable.Global */
+.highlight .vi { color: #F8F8F2 } /* Name.Variable.Instance */
+.highlight .vm { color: #F8F8F2 } /* Name.Variable.Magic */
+.highlight .il { color: #AE81FF } /* Literal.Number.Integer.Long */
+}
+
+/* Override Pygments background in dark mode to match cell background */
+@media (prefers-color-scheme: dark) {
+    .highlight {
+        background: #0f0f11 !important;
+    }
+}
+
+
+/* CSS Custom Properties for theming */
+:root {
+    --bg-color: #ffffff;
+    --text-color: #333333;
+    --border-color: #e9ecef;
+    --code-bg: #e9ecef;
+    --markdown-bg: #f8f9fa;
+    --markdown-border: #007acc;
+    --cell-bg: #f8f9fa;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-color: #1a1a1a;
+        --text-color: #e0e0e0;
+        --border-color: #404040;
+        --code-bg: #0f0f11;
+        --markdown-bg: #0f0f11;
+        --markdown-border: #4a9eff;
+        --cell-bg: #0f0f11;
+    }
+}
+
+/* nbgradio CSS */
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.nbgradio-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 10px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+}
+
+.nbgradio-fragment {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+}
+
+.cell {
+    margin-bottom: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.cell:first-child {
+    margin-top: 20px;
+}
+
+.cell-markdown {
+    padding: 12px;
+    background: var(--markdown-bg);
+    border-left: 4px solid var(--markdown-border);
+    transition: background-color 0.3s ease;
+}
+
+.cell-markdown h1,
+.cell-markdown h2,
+.cell-markdown h3,
+.cell-markdown h4,
+.cell-markdown h5,
+.cell-markdown h6 {
+    margin-top: 0;
+    color: var(--text-color);
+}
+
+.cell-markdown p {
+    margin-bottom: 16px;
+    color: var(--text-color);
+}
+
+.cell-markdown code {
+    background: var(--code-bg);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.9em;
+    color: var(--text-color);
+}
+
+.cell-markdown pre {
+    background: var(--markdown-bg);
+    padding: 8px;
+    border-radius: 8px;
+    overflow-x: auto;
+    border: 1px solid var(--border-color);
+}
+
+.cell-markdown pre code {
+    background: none;
+    padding: 0;
+}
+
+.cell-code {
+    background: var(--cell-bg);
+    border: 1px solid var(--border-color);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.cell-code pre {
+    margin: 0;
+    padding: 8px 8px 4px 8px;
+    overflow-x: auto;
+}
+
+.cell-code code {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--text-color);
+}
+
+.cell-gradio {
+    margin-bottom: 10px;
+}
+
+.gradio-app {
+    width: 100%;
+}
+
+.gradio-loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    margin-bottom: 10px;
+    background: var(--cell-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    gap: 12px;
+}
+
+.gradio-spinner {
+    width: 20px;
+    height: 20px;
+    border: 3px solid #2c2c2c;
+    border-top: 3px solid #ff7c00;
+    border-radius: 50%;
+    animation: gradio-spin 1s linear infinite;
+}
+
+.gradio-loading-text {
+    color: var(--text-color);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+@keyframes gradio-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@media (prefers-color-scheme: dark) {
+    .gradio-spinner {
+        border: 3px solid #404040;
+        border-top: 3px solid #ff7c00;
+    }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .nbgradio-content {
+        padding: 5px;
+    }
+    
+    .cell-markdown,
+    .cell-code {
+        padding: 8px;
+    }
+}
+
+</style>
+<script
+    type="module"
+    src="https://gradio.s3-us-west-2.amazonaws.com/5.49.1/gradio.js"
+></script>
+<div class="nbgradio-fragment">
+    <div class="cell cell-markdown"><h1>Whisper API → Whisper.cpp Migration</h1>
+<p>This notebook demonstrates how to migrate from OpenAI's Whisper API to using Whisper.cpp for local speech-to-text processing.</p>
+<h2>Benefits of Whisper.cpp</h2>
+<ul>
+<li><strong>Local processing</strong>: No API calls, complete privacy</li>
+<li><strong>Cost savings</strong>: No per-minute charges</li>
+<li><strong>Offline capability</strong>: Works without internet</li>
+<li><strong>Customization</strong>: Fine-tune for your specific use case</li>
+</ul>
+</div>
+<div class="cell cell-markdown"><h2>Installation</h2>
+</div>
+<div class="cell cell-code"><pre><code><div class="highlight"><pre><span></span><code><span class="c1"># Install whisper.cpp and dependencies</span>
+<span class="o">%</span><span class="n">pip</span> <span class="n">install</span> <span class="n">whisper</span><span class="o">-</span><span class="n">cpp</span><span class="o">-</span><span class="n">python</span>
+<span class="o">%</span><span class="n">pip</span> <span class="n">install</span> <span class="n">librosa</span> <span class="n">soundfile</span>
+</code></pre></div>
+</code></pre></div>
+<div class="cell cell-markdown"><h2>Setup</h2>
+</div>
+<div class="cell cell-code"><pre><code><div class="highlight"><pre><span></span><code><span class="kn">import</span><span class="w"> </span><span class="nn">whisper_cpp</span>
+<span class="kn">import</span><span class="w"> </span><span class="nn">librosa</span>
+<span class="kn">import</span><span class="w"> </span><span class="nn">soundfile</span><span class="w"> </span><span class="k">as</span><span class="w"> </span><span class="nn">sf</span>
+<span class="kn">import</span><span class="w"> </span><span class="nn">numpy</span><span class="w"> </span><span class="k">as</span><span class="w"> </span><span class="nn">np</span>
+<span class="kn">from</span><span class="w"> </span><span class="nn">pathlib</span><span class="w"> </span><span class="kn">import</span> <span class="n">Path</span>
+</code></pre></div>
+</code></pre></div>
+<div class="cell cell-markdown"><h2>Model Loading</h2>
+</div>
+<div class="cell cell-code"><pre><code><div class="highlight"><pre><span></span><code><span class="c1"># Load Whisper model (downloads automatically on first run)</span>
+<span class="n">model</span> <span class="o">=</span> <span class="n">whisper_cpp</span><span class="o">.</span><span class="n">Whisper</span><span class="o">.</span><span class="n">from_pretrained</span><span class="p">(</span><span class="s2">&quot;base&quot;</span><span class="p">)</span>
+<span class="nb">print</span><span class="p">(</span><span class="s2">&quot;Model loaded successfully!&quot;</span><span class="p">)</span>
+</code></pre></div>
+</code></pre></div>
+<div class="cell cell-markdown"><h2>Audio Processing Function</h2>
+</div>
+<div class="cell cell-code"><pre><code><div class="highlight"><pre><span></span><code><span class="k">def</span><span class="w"> </span><span class="nf">transcribe_audio</span><span class="p">(</span><span class="n">audio_file_path</span><span class="p">):</span>
+<span class="w">    </span><span class="sd">&quot;&quot;&quot;</span>
+<span class="sd">    Transcribe audio file using Whisper.cpp</span>
+<span class="sd">    </span>
+<span class="sd">    Args:</span>
+<span class="sd">        audio_file_path (str): Path to audio file</span>
+<span class="sd">    </span>
+<span class="sd">    Returns:</span>
+<span class="sd">        dict: Transcription result with text and metadata</span>
+<span class="sd">    &quot;&quot;&quot;</span>
+    <span class="c1"># Load audio file</span>
+    <span class="n">audio</span><span class="p">,</span> <span class="n">sr</span> <span class="o">=</span> <span class="n">librosa</span><span class="o">.</span><span class="n">load</span><span class="p">(</span><span class="n">audio_file_path</span><span class="p">,</span> <span class="n">sr</span><span class="o">=</span><span class="mi">16000</span><span class="p">)</span>
+    
+    <span class="c1"># Transcribe using Whisper.cpp</span>
+    <span class="n">result</span> <span class="o">=</span> <span class="n">model</span><span class="o">.</span><span class="n">transcribe</span><span class="p">(</span><span class="n">audio</span><span class="p">)</span>
+    
+    <span class="k">return</span> <span class="p">{</span>
+        <span class="s2">&quot;text&quot;</span><span class="p">:</span> <span class="n">result</span><span class="p">[</span><span class="s2">&quot;text&quot;</span><span class="p">],</span>
+        <span class="s2">&quot;language&quot;</span><span class="p">:</span> <span class="n">result</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;language&quot;</span><span class="p">,</span> <span class="s2">&quot;auto&quot;</span><span class="p">),</span>
+        <span class="s2">&quot;segments&quot;</span><span class="p">:</span> <span class="n">result</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;segments&quot;</span><span class="p">,</span> <span class="p">[])</span>
+    <span class="p">}</span>
+</code></pre></div>
+</code></pre></div>
+<div class="cell cell-markdown"><h2>Interactive Demo</h2>
+</div>
+
+<div class="cell cell-gradio" id="gradio-cell-whisper_api_to_whisper_cpp">
+    <div class="gradio-loading-container">
+        <div class="gradio-spinner"></div>
+        <span class="gradio-loading-text">Loading...</span>
+    </div>
+    <gradio-app space="abidlabs/whisper_api_to_whisper_cpp" class="gradio-app" style="display: none;"></gradio-app>
+    <script>
+        (function() {
+            const gradioApp = document.querySelector('#gradio-cell-whisper_api_to_whisper_cpp gradio-app');
+            const loadingContainer = document.querySelector('#gradio-cell-whisper_api_to_whisper_cpp .gradio-loading-container');
+            let isLoaded = false;
+            let checkCount = 0;
+            const maxChecks = 40; // 20 seconds max
+            
+            function handleLoadComplete() {
+                if (!isLoaded) {
+                    isLoaded = true;
+                    console.log('Gradio app loaded for whisper_api_to_whisper_cpp');
+                    loadingContainer.style.display = 'none';
+                    gradioApp.style.display = 'block';
+                }
+            }
+            
+            // Try multiple event types that Gradio might emit
+            const events = ['render', 'loaded', 'ready', 'mount'];
+            events.forEach(event => {
+                gradioApp.addEventListener(event, handleLoadComplete);
+            });
+            
+            // Fallback: Check if the Gradio app has content loaded
+            const checkLoaded = () => {
+                checkCount++;
+                
+                // Multiple detection methods
+                const hasShadowContent = gradioApp.shadowRoot && gradioApp.shadowRoot.children.length > 0;
+                const hasVisibleContent = gradioApp.offsetHeight > 100; // App has some height
+                const hasIframe = gradioApp.querySelector('iframe');
+                const hasGradioContent = gradioApp.innerHTML.includes('gradio') || 
+                                       (gradioApp.shadowRoot && 
+                                        gradioApp.shadowRoot.innerHTML.includes('gradio'));
+                
+                if (hasShadowContent || hasVisibleContent || hasIframe || hasGradioContent) {
+                    handleLoadComplete();
+                } else if (checkCount < maxChecks) {
+                    setTimeout(checkLoaded, 500);
+                } else {
+                    // Give up after maxChecks attempts and show the app anyway
+                    handleLoadComplete();
+                }
+            };
+            
+            // Start checking after a short delay
+            setTimeout(checkLoaded, 1000);
+        })();
+    </script>
+</div>
+
+<div class="cell cell-markdown"></div>
+</div>
+				</div>
+			</section>
+		</main>
+	</body>
+</html>

style.css

@@ -328,12 +328,12 @@ body {
 	transform: translateY(-1px);
 }
 
-.topic-header {
+.recipe-header {
 	margin-bottom: 4rem;
 	text-align: center;
 }
 
-.topic-title {
+.recipe-title {
 	font-size: 3.5rem;
 	font-weight: 700;
 	margin-bottom: 1.5rem;
@@ -342,13 +342,401 @@ body {
 	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
 }
 
-.topic-description {
+.recipe-description {
 	font-size: 1.3rem;
 	color: #b0b0b0;
 	max-width: 700px;
 	font-weight: 400;
+	margin: 0 auto 2rem auto;
+	line-height: 1.6;
+}
+
+.recipe-meta {
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
+	flex-wrap: wrap;
+}
+
+.recipe-meta span {
+	background: rgba(255, 255, 255, 0.1);
+	padding: 0.5rem 1rem;
+	border-radius: 20px;
+	font-size: 0.9rem;
+	font-weight: 500;
+	color: #d0d0d0;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.recipe-content {
+	max-width: 1000px;
+	margin: 0 auto;
+}
+
+.content-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-bottom: 3rem;
+}
+
+.content-card {
+	background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 16px;
+	padding: 2rem;
+	backdrop-filter: blur(10px);
+}
+
+.content-card h2 {
+	font-size: 1.4rem;
+	font-weight: 600;
+	margin-bottom: 1rem;
+	color: white;
+}
+
+.content-card ul {
+	color: #b0b0b0;
+	line-height: 1.6;
+	padding-left: 1.5rem;
+}
+
+.content-card li {
+	margin-bottom: 0.5rem;
+}
+
+.demo-section {
+	margin-bottom: 3rem;
+}
+
+.demo-section h2 {
+	font-size: 2rem;
+	font-weight: 600;
+	margin-bottom: 1.5rem;
+	color: white;
+	text-align: center;
+}
+
+.demo-container {
+	background: rgba(255, 255, 255, 0.05);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 16px;
+	padding: 1rem;
+	backdrop-filter: blur(10px);
+}
+
+.code-section {
+	margin-bottom: 3rem;
+}
+
+.code-section h2 {
+	font-size: 2rem;
+	font-weight: 600;
+	margin-bottom: 1.5rem;
+	color: white;
+}
+
+.code-block {
+	margin-bottom: 2rem;
+}
+
+.code-block h3 {
+	font-size: 1.2rem;
+	font-weight: 600;
+	margin-bottom: 1rem;
+	color: #d0d0d0;
+}
+
+.code-block pre {
+	background: rgba(0, 0, 0, 0.3);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 8px;
+	padding: 1.5rem;
+	overflow-x: auto;
+}
+
+.code-block code {
+	color: #e0e0e0;
+	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+	font-size: 0.9rem;
+	line-height: 1.5;
+}
+
+.steps-section {
+	margin-bottom: 3rem;
+}
+
+.steps-section h2 {
+	font-size: 2rem;
+	font-weight: 600;
+	margin-bottom: 1.5rem;
+	color: white;
+}
+
+.steps-list {
+	list-style: none;
+	padding: 0;
+}
+
+.steps-list li {
+	background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 12px;
+	padding: 1.5rem;
+	margin-bottom: 1rem;
+	backdrop-filter: blur(10px);
+}
+
+.steps-list h3 {
+	font-size: 1.2rem;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+	color: white;
+}
+
+.steps-list p {
+	color: #b0b0b0;
+	margin-bottom: 0.5rem;
+}
+
+.steps-list code {
+	background: rgba(0, 0, 0, 0.3);
+	padding: 0.3rem 0.6rem;
+	border-radius: 4px;
+	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+	font-size: 0.85rem;
+	color: #e0e0e0;
+}
+
+.resources-section {
+	margin-bottom: 3rem;
+}
+
+.resources-section h2 {
+	font-size: 2rem;
+	font-weight: 600;
+	margin-bottom: 1.5rem;
+	color: white;
+}
+
+.resources-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	gap: 1rem;
+}
+
+.resource-link {
+	display: block;
+	background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	border-radius: 12px;
+	padding: 1.5rem;
+	text-decoration: none;
+	color: #d0d0d0;
+	font-weight: 500;
+	text-align: center;
+	transition: all 0.2s ease;
+}
+
+.resource-link:hover {
+	background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.1) 100%);
+	border-color: rgba(255, 255, 255, 0.3);
+	color: white;
+	transform: translateY(-2px);
+}
+
+.picks-section {
+	margin-top: 4rem;
+}
+
+.picks-subtitle {
+	font-size: 1.1rem;
+	color: #b0b0b0;
+	text-align: center;
+	margin-bottom: 3rem;
+	max-width: 600px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.picks-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+	gap: 2rem;
+	max-width: 1200px;
 	margin: 0 auto;
+}
+
+.pick-category {
+	background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 16px;
+	padding: 2rem;
+	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	position: relative;
+	overflow: hidden;
+	backdrop-filter: blur(10px);
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.pick-category::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
+	opacity: 0;
+	transition: opacity 0.3s ease;
+}
+
+.pick-category:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+	border-color: rgba(255, 255, 255, 0.2);
+}
+
+.pick-category:hover::before {
+	opacity: 1;
+}
+
+.pick-category h3 {
+	font-size: 1.4rem;
+	font-weight: 600;
+	margin-bottom: 1.5rem;
+	color: white;
+	letter-spacing: -0.01em;
+	z-index: 2;
+	position: relative;
+}
+
+.pick-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	z-index: 2;
+	position: relative;
+}
+
+.pick-list li {
+	color: #b0b0b0;
+	font-size: 0.95rem;
 	line-height: 1.6;
+	margin-bottom: 0.8rem;
+	padding-left: 0;
+}
+
+.notebook-content {
+	max-width: 1000px;
+	margin: 0 auto;
+}
+
+.notebook-content h1,
+.notebook-content h2,
+.notebook-content h3,
+.notebook-content h4,
+.notebook-content h5,
+.notebook-content h6 {
+	color: white;
+	margin-top: 2rem;
+	margin-bottom: 1rem;
+	font-weight: 600;
+}
+
+.notebook-content h1 {
+	font-size: 2.5rem;
+	letter-spacing: -0.02em;
+}
+
+.notebook-content h2 {
+	font-size: 2rem;
+	letter-spacing: -0.01em;
+}
+
+.notebook-content h3 {
+	font-size: 1.5rem;
+}
+
+.notebook-content p {
+	color: #b0b0b0;
+	line-height: 1.6;
+	margin-bottom: 1rem;
+}
+
+.notebook-content ul,
+.notebook-content ol {
+	color: #b0b0b0;
+	margin-bottom: 1rem;
+	padding-left: 2rem;
+}
+
+.notebook-content li {
+	margin-bottom: 0.5rem;
+}
+
+.notebook-content code {
+	background: rgba(0, 0, 0, 0.3);
+	padding: 0.2rem 0.4rem;
+	border-radius: 4px;
+	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+	font-size: 0.9rem;
+	color: #e0e0e0;
+}
+
+.notebook-content pre {
+	background: rgba(0, 0, 0, 0.3);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 8px;
+	padding: 1.5rem;
+	overflow-x: auto;
+	margin-bottom: 1.5rem;
+}
+
+.notebook-content pre code {
+	background: none;
+	padding: 0;
+	border-radius: 0;
+	font-size: 0.9rem;
+	line-height: 1.5;
+}
+
+.notebook-content blockquote {
+	border-left: 4px solid rgba(255, 255, 255, 0.2);
+	padding-left: 1rem;
+	margin: 1.5rem 0;
+	color: #d0d0d0;
+	font-style: italic;
+}
+
+.notebook-content .gradio-app {
+	margin: 2rem 0;
+	border-radius: 12px;
+	overflow: hidden;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.notebook-content table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 1.5rem 0;
+}
+
+.notebook-content th,
+.notebook-content td {
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	padding: 0.8rem;
+	text-align: left;
+}
+
+.notebook-content th {
+	background: rgba(255, 255, 255, 0.05);
+	color: white;
+	font-weight: 600;
+}
+
+.notebook-content td {
+	color: #b0b0b0;
 }
 
 .recipes-section {
@@ -479,4 +867,36 @@ body {
 		padding: 1.5rem;
 		min-height: auto;
 	}
+	
+	.recipe-title {
+		font-size: 2.5rem;
+	}
+	
+	.content-grid {
+		grid-template-columns: 1fr;
+		gap: 1.5rem;
+	}
+	
+	.content-card {
+		padding: 1.5rem;
+	}
+	
+	.resources-grid {
+		grid-template-columns: 1fr;
+		gap: 1rem;
+	}
+	
+	.recipe-meta {
+		flex-direction: column;
+		gap: 1rem;
+	}
+	
+	.picks-grid {
+		grid-template-columns: 1fr;
+		gap: 1.5rem;
+	}
+	
+	.pick-category {
+		padding: 1.5rem;
+	}
 }