changes

index.html

@@ -16,8 +16,11 @@
 
 		<main class="main-content">
 			<section class="why-open-section">
-				<h2 class="section-title">Why Use Open Models</h2>
-				<div class="benefits-grid">
+				<h2 class="section-title collapsible-header" onclick="toggleSection('benefits-content')">
+					Why Use Open Models
+					<span class="toggle-icon">▼</span>
+				</h2>
+				<div class="benefits-grid" id="benefits-content" style="display: none;">
 					<div class="benefit-card">
 						<h3>💰 Cost Control</h3>
 						<p>Eliminate unpredictable API costs and vendor lock-in. Run models locally or choose your own hosting provider.</p>
@@ -51,68 +54,68 @@
 					<div class="recipe-row">
 						<div class="recipe-cell audio">
 							<h3>Audio</h3>
-							<div class="recipe-links">
-								<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">+ 2 more recipes</a>
-							</div>
+								<div class="recipe-links">
+									<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>
+									<span class="recipe-link coming-soon">Text-to-Speech → Bark (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Audio Classification (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Music Generation (Coming Soon)</span>
+									<span class="recipe-link coming-soon">+ 2 more recipes (Coming Soon)</span>
+								</div>
 						</div>
 						<div class="recipe-cell video">
 							<h3>Video</h3>
-							<div class="recipe-links">
-								<a href="video.html#understanding" class="recipe-link">Video Understanding → Video-LLaMA</a>
-								<a href="video.html#generation" class="recipe-link">Video Generation → Stable Video Diffusion</a>
-								<a href="video.html#text" class="recipe-link">Video-to-Text</a>
-								<a href="video.html#editing" class="recipe-link">Video Editing</a>
-								<a href="video.html" class="recipe-link more-recipes">+ 2 more recipes</a>
-							</div>
+								<div class="recipe-links">
+									<span class="recipe-link coming-soon">Video Understanding → Video-LLaMA (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Video Generation → Stable Video Diffusion (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Video-to-Text (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Video Editing (Coming Soon)</span>
+									<span class="recipe-link coming-soon">+ 2 more recipes (Coming Soon)</span>
+								</div>
 						</div>
 					</div>
 					<div class="recipe-row">
 						<div class="recipe-cell multimodal">
 							<h3>Multimodal</h3>
-							<div class="recipe-links">
-								<a href="multimodal.html#gpt4v" class="recipe-link">GPT-4V → LLaVA</a>
-								<a href="multimodal.html#dalle" class="recipe-link">DALL-E → Stable Diffusion</a>
-								<a href="multimodal.html#whisper" class="recipe-link">Whisper → Whisper.cpp</a>
-								<a href="multimodal.html#video" class="recipe-link">Video Understanding</a>
-								<a href="multimodal.html" class="recipe-link more-recipes">+ 4 more recipes</a>
-							</div>
+								<div class="recipe-links">
+									<span class="recipe-link coming-soon">GPT-4V → LLaVA (Coming Soon)</span>
+									<span class="recipe-link coming-soon">DALL-E → Stable Diffusion (Coming Soon)</span>
+									<a href="recipes/whisper_api_to_whisper_cpp.html" class="recipe-link">Whisper → Whisper.cpp</a>
+									<span class="recipe-link coming-soon">Video Understanding (Coming Soon)</span>
+									<span class="recipe-link coming-soon">+ 4 more recipes (Coming Soon)</span>
+								</div>
 						</div>
 						<div class="recipe-cell text">
 							<h3>Text</h3>
-							<div class="recipe-links">
-								<a href="text.html#gpt4" class="recipe-link">GPT-4 → Llama 3</a>
-								<a href="text.html#gpt35" class="recipe-link">GPT-3.5 → Mistral</a>
-								<a href="text.html#embeddings" class="recipe-link">Embeddings → Sentence Transformers</a>
-								<a href="text.html#finetuning" class="recipe-link">Fine-tuning → LoRA</a>
-								<a href="text.html" class="recipe-link more-recipes">+ 5 more recipes</a>
-							</div>
+								<div class="recipe-links">
+									<span class="recipe-link coming-soon">GPT-4 → Llama 3 (Coming Soon)</span>
+									<span class="recipe-link coming-soon">GPT-3.5 → Mistral (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Embeddings → Sentence Transformers (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Fine-tuning → LoRA (Coming Soon)</span>
+									<span class="recipe-link coming-soon">+ 5 more recipes (Coming Soon)</span>
+								</div>
 						</div>
 					</div>
 					<div class="recipe-row">
 						<div class="recipe-cell guardrails">
 							<h3>Guardrails</h3>
-							<div class="recipe-links">
-								<a href="guardrails.html#moderation" class="recipe-link">Content Moderation</a>
-								<a href="guardrails.html#injection" class="recipe-link">Prompt Injection Protection</a>
-								<a href="guardrails.html#validation" class="recipe-link">Output Validation</a>
-								<a href="guardrails.html#rate" class="recipe-link">Rate Limiting</a>
-								<a href="guardrails.html" class="recipe-link more-recipes">+ 6 more recipes</a>
-							</div>
+								<div class="recipe-links">
+									<span class="recipe-link coming-soon">Content Moderation (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Prompt Injection Protection (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Output Validation (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Rate Limiting (Coming Soon)</span>
+									<span class="recipe-link coming-soon">+ 6 more recipes (Coming Soon)</span>
+								</div>
 						</div>
 						<div class="recipe-cell optimization">
 							<h3>Optimization</h3>
-							<div class="recipe-links">
-								<a href="optimization.html#quantization" class="recipe-link">Model Quantization</a>
-								<a href="optimization.html#deployment" class="recipe-link">Local Deployment</a>
-								<a href="optimization.html#caching" class="recipe-link">Caching Strategies</a>
-								<a href="optimization.html#batch" class="recipe-link">Batch Processing</a>
-								<a href="optimization.html" class="recipe-link more-recipes">+ 3 more recipes</a>
-							</div>
+								<div class="recipe-links">
+									<span class="recipe-link coming-soon">Model Quantization (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Local Deployment (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Caching Strategies (Coming Soon)</span>
+									<span class="recipe-link coming-soon">Batch Processing (Coming Soon)</span>
+									<span class="recipe-link coming-soon">+ 3 more recipes (Coming Soon)</span>
+								</div>
 						</div>
 					</div>
 				</div>
@@ -125,65 +128,44 @@
 				<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>
+		
+		<script>
+			function toggleSection(sectionId) {
+				const section = document.getElementById(sectionId);
+				const icon = document.querySelector('.collapsible-header .toggle-icon');
+				
+				if (section.style.display === 'none') {
+					section.style.display = 'block';
+					icon.textContent = '▲';
+				} else {
+					section.style.display = 'none';
+					icon.textContent = '▼';
+				}
+			}
+		</script>
 	</body>
 </html>

recipes/test_notebook.html

@@ -303,6 +303,14 @@ body {
     padding: 0;
 }
 
+.notebook-content pre {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    padding: 1.5rem;
+    overflow-x: auto;
+    margin-bottom: 1.5rem;
+}
+
 .cell-code {
     background: var(--cell-bg);
     border: 1px solid var(--border-color);
@@ -311,7 +319,7 @@ body {
 
 .cell-code pre {
     margin: 0;
-    padding: 8px 8px 4px 8px;
+    padding: 8px 8px 0px 8px;
     overflow-x: auto;
 }
 

recipes/whisper_api_to_whisper_cpp.html

@@ -303,6 +303,14 @@ body {
     padding: 0;
 }
 
+.notebook-content pre {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    padding: 1.5rem;
+    overflow-x: auto;
+    margin-bottom: 1.5rem;
+}
+
 .cell-code {
     background: var(--cell-bg);
     border: 1px solid var(--border-color);
@@ -311,7 +319,7 @@ body {
 
 .cell-code pre {
     margin: 0;
-    padding: 8px 8px 4px 8px;
+    padding: 8px 8px 0px 8px;
     overflow-x: auto;
 }
 

style.css

@@ -686,7 +686,6 @@ body {
 
 .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;
@@ -900,3 +899,32 @@ body {
 		padding: 1.5rem;
 	}
 }
+
+/* Collapsible section styles */
+.collapsible-header {
+	cursor: pointer;
+	user-select: none;
+	transition: opacity 0.2s ease;
+}
+
+.collapsible-header:hover {
+	opacity: 0.8;
+}
+
+.toggle-icon {
+	font-size: 0.8em;
+	margin-left: 0.5rem;
+	transition: transform 0.2s ease;
+}
+
+/* Coming soon styles */
+.recipe-link.coming-soon {
+	color: #666;
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.recipe-link.coming-soon:hover {
+	color: #666;
+	opacity: 0.6;
+}