| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Awesome Whisper Apps - Project Browser</title> |
| | <link rel="stylesheet" href="style.css"> |
| | </head> |
| | <body> |
| | <header> |
| | <div class="container"> |
| | <h1>Awesome Whisper Apps</h1> |
| | <p class="subtitle">A curated collection of applications built with OpenAI Whisper for speech recognition</p> |
| | </div> |
| | </header> |
| |
|
| | <main class="container"> |
| | <section class="filters"> |
| | <h2>Browse Projects</h2> |
| | <div class="filter-group"> |
| | <div class="filter-section"> |
| | <h3>By Platform</h3> |
| | <div class="filter-buttons" id="platform-filters"> |
| | <button class="filter-btn active" data-filter="all" data-type="platform">All Platforms</button> |
| | <button class="filter-btn" data-filter="linux" data-type="platform">Linux</button> |
| | <button class="filter-btn" data-filter="macos" data-type="platform">macOS</button> |
| | <button class="filter-btn" data-filter="windows" data-type="platform">Windows</button> |
| | <button class="filter-btn" data-filter="android" data-type="platform">Android</button> |
| | <button class="filter-btn" data-filter="ios" data-type="platform">iOS</button> |
| | <button class="filter-btn" data-filter="cross-platform" data-type="platform">Cross-Platform</button> |
| | <button class="filter-btn" data-filter="web" data-type="platform">Web</button> |
| | </div> |
| | </div> |
| |
|
| | <div class="filter-section"> |
| | <h3>By Use Case</h3> |
| | <div class="filter-buttons" id="usecase-filters"> |
| | <button class="filter-btn active" data-filter="all" data-type="usecase">All Use Cases</button> |
| | <button class="filter-btn" data-filter="voice-typing" data-type="usecase">Voice Typing</button> |
| | <button class="filter-btn" data-filter="subtitles" data-type="usecase">Subtitles & Captioning</button> |
| | <button class="filter-btn" data-filter="meetings" data-type="usecase">Meetings & Productivity</button> |
| | <button class="filter-btn" data-filter="real-time" data-type="usecase">Real-Time Transcription</button> |
| | <button class="filter-btn" data-filter="developer" data-type="usecase">Developer Tools</button> |
| | <button class="filter-btn" data-filter="model-variants" data-type="usecase">Model Variants</button> |
| | </div> |
| | </div> |
| |
|
| | <div class="search-section"> |
| | <input type="text" id="search-input" placeholder="Search projects by name or description..."> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | <section class="results"> |
| | <div class="results-header"> |
| | <h2>Projects <span id="project-count"></span></h2> |
| | <div class="sort-controls"> |
| | <label>Sort by:</label> |
| | <select id="sort-select"> |
| | <option value="name">Name (A-Z)</option> |
| | <option value="platform">Platform</option> |
| | <option value="usecase">Use Case</option> |
| | </select> |
| | </div> |
| | </div> |
| | <div id="projects-grid" class="projects-grid"> |
| | |
| | </div> |
| | </section> |
| | </main> |
| |
|
| | <footer> |
| | <div class="container"> |
| | <p>Data sourced from the <a href="projects.md" target="_blank">Awesome Whisper Apps</a> collection</p> |
| | <p>Learn more about <a href="https://github.com/openai/whisper" target="_blank">OpenAI Whisper</a></p> |
| | </div> |
| | </footer> |
| |
|
| | <script src="script.js"></script> |
| | </body> |
| | </html> |
| |
|
