Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NegaritAI - A Web Based Amharic Text to Speech</title> | |
| <!-- Bootstrap 3 CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <!-- Font Awesome (icons for GitHub, etc.) --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <!-- Favicon --> | |
| <link rel="icon" href="{{ url_for('static', filename='img/log3.jpg') }}" type="image/jpeg"> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-default navbar-fixed-top"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand" href="#"> | |
| <img src="{{ url_for('static', filename='img/logo3.jpg') }}" alt="NegaritAI logo" class="brand-logo"> | |
| <span class="brand-text">NegaritAI</span> | |
| </a> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-nav"> | |
| <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> | |
| </button> | |
| </div> | |
| <div id="top-nav" class="collapse navbar-collapse"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="https://huggingface.co/spaces/bushra-kb/talk-amharic-tts" target="_blank"><i class="fa fa-cloud"></i> Space</a></li> | |
| <li><a href="https://github.com/bushra-kb/" target="_blank"><i class="fa fa-github"></i> GitHub</a></li> | |
| <li><a href="https://github.com/bushra-kb/" target="_blank"><span class="glyphicon glyphicon-book"></span> Docs</a></li> | |
| <li><a href="#contact"><span class="glyphicon glyphicon-earphone"></span> Contact Me</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <!-- Hero --> | |
| <div class="jumbotron hero text-center"> | |
| <p class="hero-subtitle"> | |
| <strong>NegaritAI: </strong> | |
| Practical AI for Ethiopian languages—this page showcases the Amharic Text‑to‑Speech demo.<br> | |
| Developed by <a href="https://github.com/bushra-kb/" class="hero-link">Bushra KB</a> (2025). | |
| </p> | |
| </div> | |
| <!-- Demo section --> | |
| <div id="demo" class="row"> | |
| <div class="col-md-8"> | |
| <div class="panel panel-primary panel-elevated"> | |
| <div class="panel-heading"> | |
| <h3 class="panel-title"> | |
| <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> | |
| የጽሑፍ ማስገቢያ (Text Input) | |
| </h3> | |
| </div> | |
| <div class="panel-body"> | |
| <textarea id="amharicText" class="form-control" rows="6" placeholder="የአማርኛ ጽሑፍ እዚህ ያስገቡ... (Enter Amharic text here...)"></textarea> | |
| <div class="clearfix" style="margin-top:8px;"> | |
| <div class="pull-left text-muted"> | |
| <small id="charCount">0 characters</small> | |
| </div> | |
| <div class="pull-right"> | |
| <div class="btn-group btn-group-sm" role="group" aria-label="Text actions"> | |
| <button id="sampleBtn" type="button" class="btn btn-default" title="Insert sample text" data-toggle="tooltip"> | |
| <span class="glyphicon glyphicon-file"></span> Sample | |
| </button> | |
| <button id="clearBtn" type="button" class="btn btn-default" title="Clear text" data-toggle="tooltip"> | |
| <span class="glyphicon glyphicon-trash"></span> Clear | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="help-block">Tip: Write or paste any Amharic text. Configure settings, then click “Generate”.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="panel panel-info panel-elevated"> | |
| <div class="panel-heading"> | |
| <h3 class="panel-title"> | |
| <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> | |
| ማስተካከያዎች (Configurations) | |
| </h3> | |
| </div> | |
| <div class="panel-body"> | |
| <form class="form-horizontal"> | |
| <!-- TTS Model Selection --> | |
| <div class="form-group"> | |
| <label for="ttsModel" class="col-sm-3 control-label">TTS ሞዴል (Model)</label> | |
| <div class="col-sm-9"> | |
| <select id="ttsModel" class="form-control" title="Choose a TTS provider"> | |
| <option value="gtts">gTTS (Google)</option> | |
| <option value="mms">Hugging Face MMS-TTS</option> | |
| <option value="openai">OpenAI TTS</option> | |
| <option value="azure">Microsoft Azure TTS</option> | |
| </select> | |
| <p class="help-block" id="formatHint">Output: MP3 for gTTS/OpenAI/Azure, WAV for MMS.</p> | |
| </div> | |
| </div> | |
| <!-- Common Configurations: Speed --> | |
| <div class="form-group config-group" id="speed-config"> | |
| <label for="speed" class="col-sm-3 control-label">ፍጥነት (Speed)</label> | |
| <div class="col-sm-7"> | |
| <input type="range" id="speed" class="form-control" min="0.5" max="2" step="0.1" value="1" aria-label="Playback speed"> | |
| </div> | |
| <div class="col-sm-2"> | |
| <p class="form-control-static" id="speed-value">1.0x</p> | |
| </div> | |
| </div> | |
| <!-- OpenAI Specific Configurations --> | |
| <div class="model-config" id="openai-config"> | |
| <div class="form-group"> | |
| <label for="openai-voice" class="col-sm-3 control-label">ድምፅ (Voice)</label> | |
| <div class="col-sm-9"> | |
| <select id="openai-voice" class="form-control"> | |
| <option value="alloy">Alloy</option> | |
| <option value="echo">Echo</option> | |
| <option value="fable">Fable</option> | |
| <option value="onyx">Onyx</option> | |
| <option value="nova">Nova</option> | |
| <option value="shimmer">Shimmer</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Azure Specific Configurations --> | |
| <div class="model-config" id="azure-config"> | |
| <div class="form-group"> | |
| <label for="azure-voice" class="col-sm-3 control-label">ድምፅ (Voice)</label> | |
| <div class="col-sm-9"> | |
| <select id="azure-voice" class="form-control"> | |
| <option value="am-ET-Mekdes-Neural">Mekdes (Female)</option> | |
| <option value="am-ET-Ameha-Neural">Ameha (Male)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="azure-style" class="col-sm-3 control-label">የንግግር ስልት (Style)</label> | |
| <div class="col-sm-9"> | |
| <select id="azure-style" class="form-control"> | |
| <option value="general">General</option> | |
| <option value="cheerful">Cheerful</option> | |
| <option value="sad">Sad</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MMS-TTS Specific Configurations --> | |
| <div class="model-config" id="mms-config"> | |
| <div class="form-group"> | |
| <label for="mms-voice" class="col-sm-3 control-label">ድምፅ (Voice)</label> | |
| <div class="col-sm-9"> | |
| <select id="mms-voice" class="form-control"> | |
| <option value="default">Default</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="panel-footer"> | |
| <button id="generateBtn" class="btn btn-block btn-success"> | |
| <span class="glyphicon glyphicon-bullhorn"></span> | |
| ድምፅ ፍጠር (Generate) | |
| <span id="genSpinner" class="glyphicon glyphicon-refresh glyphicon-refresh-animate" style="margin-left:8px; display:none;"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="audio" class="row text-center" > | |
| <div class="col-md-8 col-md-offset-2"> | |
| <div id="statusMessage" role="status" style="margin-bottom: 15px;" aria-live="polite"></div> | |
| <div class="panel panel-info panel-elevated"> | |
| <div class="panel-heading"> | |
| <h3 class="panel-title">የተፈጠረው ድምፅ (Generated Audio)</h3> | |
| </div> | |
| <div class="panel-body"> | |
| <audio id="audioPlayer" controls disabled style="width: 100%;"></audio> | |
| <button id="downloadBtn" class="btn btn-primary" style="margin-top: 15px;" disabled> | |
| <span class="glyphicon glyphicon-download-alt"></span> አውርድ (Download) | |
| </button> | |
| <p class="help-block" style="margin-top:10px;"> | |
| First play may take longer after idle time. Heavy usage can be rate-limited. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact section --> | |
| <section id="contact" class="contact-section"> | |
| <div class="row"> | |
| <div class="col-md-8 col-md-offset-2"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h3 class="panel-title"><span class="glyphicon glyphicon-envelope"></span> Contact Me</h3> | |
| </div> | |
| <div class="panel-body text-center"> | |
| <p>Questions, feedback, or collaboration? Welcome, Bro! Here are some ways to reach out:</p> | |
| <div class="btn-group"> | |
| <a class="btn btn-default" href="mailto:[email protected]"><i class="fa fa-envelope"></i> Email</a> | |
| <a class="btn btn-default" href="https://github.com/bushra-kb/talk-amharic-tts/issues" target="_blank"><i class="fa fa-github"></i> GitHub Issues</a> | |
| <a class="btn btn-default" href="https://huggingface.co/spaces/bushra-kb/talk-amharic-tts/discussions" target="_blank"><span class="glyphicon glyphicon-comment"></span> Discussions</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer text-center text-muted"> | |
| <small>© 2025 NegaritAI • Developed by Bushra KB</small> | |
| </footer> | |
| </div> | |
| <!-- Back to top --> | |
| <a href="#top" id="backToTop" class="back-to-top" title="Back to top"> | |
| <span class="glyphicon glyphicon-chevron-up"></span> | |
| </a> | |
| <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <!-- Bootstrap 3 JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <!-- Custom JS --> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> |