Spaces:
Running
Running
| <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> | |