Alirezamp's picture
Upload 15 files
b1ff431 verified
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="{{ url_for('static', filename='js/WebAudioRecorder.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/WebAudioRecorderWav.min.js') }}"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</head>
<body>
<div class="container h-700">
<div class="row">
<div class="col-12" style="margin-top: 2rem">
<h1 class="text-center">Voice Assistant</h1>
<p class="text-center" style="font-size: 20px">
Personal assistant powered by OpenAI's OSS-GPT model and Google's Speech-to-Text
</p>
</div>
<div class="col-12" style="font-size: 16px">
<p class="text-center mb-4">
Type in your question or record it by clicking the microphone!
</p>
<ol id="recordingsList"></ol>
</div>
<div class="col-12 text-center d-flex justify-content-around">
<div class="custom-control custom-switch mb-3 d-inline-block">
<input
type="checkbox"
class="custom-control-input"
id="light-dark-mode-switch"
/>
<label class="custom-control-label" for="light-dark-mode-switch"
>Toggle light/dark mode</label
>
</div>
<div class="d-inline-block">
<!-- <label class="voice-options-label" for="voice-options"
>Choose a Voice Language</label
>
<select id="voice-options">
<option value="en-US">English(default)</option>
<option value="fa">Persian</option>
</select> -->
</div>
<div class="d-inline-block">
<label class="voice-options-label" for="stt-language-options"
>Choose Speech Language</label
>
<select id="stt-language-options">
<option value="en-US">English(default)</option>
<option value="fa">Persian</option>
<option value="fr-FR">French</option>
<option value="es-ES">Spanish</option>
</select>
</div>
</div>
<div class="col-12 col-md-8 mx-auto mb-4">
<div id="chat-window" class="p-3 h-700">
<div id="message-list"></div>
<div class="loading-animation my-loading">
<div class="loading-dots my-loading">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="loading-animation">
<div class="loading-dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<div class="input-group mt-1">
<input
type="text"
id="message-input"
class="form-control"
placeholder="Type your message here..."
/>
<div class="input-group-append">
<!-- <button id="send-button" class="btn btn-primary">Send</button> -->
<button id="send-button" class="btn btn-primary microphone">
<i class="fa fa-microphone"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>