Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MediBot Conversational AI</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <!-- Video Element (for video mode) --> | |
| <video id="video-feed" autoplay playsinline muted></video> | |
| <div class="chat-app"> | |
| <div class="header"> | |
| <div class="app-title"> | |
| <i class="fas fa-robot"></i> | |
| <span>MediBot Assistant</span> | |
| </div> | |
| <div class="status-indicator" id="status-indicator">● Connecting...</div> | |
| </div> | |
| <div class="chat-box" id="chat-box"> | |
| <!-- Messages will be appended here --> | |
| </div> | |
| <div class="loading-indicator" id="loading-indicator" style="display: none;"> | |
| <div class="spinner"></div> | |
| <span>MediBot is thinking...</span> | |
| </div> | |
| <div class="input-area"> | |
| <input type="text" id="text-input" placeholder="Type your message..."> | |
| <button id="mic-btn" class="control-btn"><i class="fas fa-microphone"></i></button> | |
| <button id="send-btn" class="control-btn"><i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| <div class="controls-panel"> | |
| <h3>Controls</h3> | |
| <div class="mode-switcher"> | |
| <button id="mode-text" class="mode-btn active">Text</button> | |
| <button id="mode-voice" class="mode-btn">Voice</button> | |
| <button id="mode-video" class="mode-btn">Video</button> | |
| </div> | |
| <div id="voice-controls" class="control-section hidden"> | |
| <h4>Voice Settings</h4> | |
| <div class="toggle-switch"> | |
| <span>Push-to-Talk</span> | |
| <label class="switch"> | |
| <input type="checkbox" id="continuous-toggle"> | |
| <span class="slider round"></span> | |
| </label> | |
| <span>Continuous</span> | |
| </div> | |
| <div class="tts-settings"> | |
| <label for="rate">Speed:</label> | |
| <input type="range" id="rate" min="0.5" max="2" value="1" step="0.1"> | |
| <label for="pitch">Pitch:</label> | |
| <input type="range" id="pitch" min="0" max="2" value="1" step="0.1"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Capture Popup/Modal --> | |
| <div id="image-capture-modal" class="modal-overlay hidden"> | |
| <div class="modal-content"> | |
| <h3><i class="fas fa-camera"></i> Image Capture Required</h3> | |
| <p>Don't shake the camera, I am analyzing the object.</p> | |
| <button id="close-modal-btn">Okay, I'm Ready</button> | |
| </div> | |
| </div> | |
| <!-- Canvas for capturing image --> | |
| <canvas id="canvas" style="display: none;"></canvas> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |