Spaces:
Running
Running
File size: 7,021 Bytes
04af860 afb9f5f 04af860 afb9f5f 5b3b29e a909440 5b3b29e afb9f5f a909440 afb9f5f a909440 afb9f5f a909440 afb9f5f a909440 afb9f5f a909440 afb9f5f a909440 afb9f5f adc9dea afb9f5f a909440 04af860 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ClosedToOpen - Transition from Closed to Open AI APIs</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">
<section class="why-open-section">
<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>
</div>
<div class="benefit-card">
<h3>🔒 Data Privacy</h3>
<p>Keep your data private and secure. No need to send sensitive information to third-party APIs.</p>
</div>
<div class="benefit-card">
<h3>⚡ Performance</h3>
<p>Faster inference with local deployment, no network latency, and the ability to optimize for your specific use case.</p>
</div>
<div class="benefit-card">
<h3>🛠️ Customization</h3>
<p>Fine-tune models for your specific needs, modify architectures, and integrate seamlessly with your existing systems.</p>
</div>
<div class="benefit-card">
<h3>📈 Reliability</h3>
<p>No dependency on external services. Your AI capabilities won't be affected by API outages or rate limits.</p>
</div>
<div class="benefit-card">
<h3>🚀 Innovation</h3>
<p>Access cutting-edge research models, experiment with new architectures, and stay ahead of the curve.</p>
</div>
</div>
</section>
<section class="recipes-overview">
<h2 class="section-title">Migration Guides</h2>
<div class="recipes-table">
<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>
<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">
<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">
<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">
<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">
<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">
<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>
</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>
</div>
<div class="pick-category">
<h3>🎬 Video Processing</h3>
</div>
<div class="pick-category">
<h3>🖼️ Multimodal</h3>
</div>
<div class="pick-category">
<h3>📝 Text Generation</h3>
</div>
<div class="pick-category">
<h3>🔒 Safety & Guardrails</h3>
</div>
<div class="pick-category">
<h3>⚡ Optimization</h3>
</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>
|