|
|
<!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> |
|
|
|
