Spaces:
Build error
Build error
| <html> | |
| <head> | |
| <title>RealChar. - Realtime AI Character</title> | |
| <link rel="stylesheet" type="text/css" href="/static/styles.css"> | |
| <link rel="icon" type="image/png" href="/static/favicon.ico"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <div class="logo-container"> | |
| <img alt="Logo" src="/static/logo.svg" /> | |
| </div> | |
| <!-- Mobile warning message --> | |
| <div id="mobile-warning"> | |
| <p>This website is best viewed on a desktop browser.</p> | |
| <p>Please switch to a desktop for the best experience.</p> | |
| <p>Mobile version is coming soon!</p> | |
| <p>If you have an iOS device, you can test our <a href='https://testflight.apple.com/join/JA6p9sZQ' style="color: green;">iOS beta app</a>.</p> | |
| </div> | |
| <!-- Desktop content --> | |
| <div id="desktop-content"> | |
| <!-- Audio device selection --> | |
| <p class="alert"> Please wear headphone 🎧 <span id="recording" class="recording">Recording</span> </p> | |
| <div id="devices-container" class="devices-container"> | |
| <label class="audio-device-label" for="audio-device-selection">Select an audio input device:</label> | |
| <div class="select-dropdown"> | |
| <select id="audio-device-selection" class="form-select"></select> | |
| </div> | |
| </div> | |
| <div class="header"> | |
| <p></p> | |
| </div> | |
| <button id="connect" class="connect">Connect</button> | |
| <!-- Characters List --> | |
| <div class="main-container"> | |
| <div class="radio-buttons"> | |
| <!-- this part will be dynamically rendered --> | |
| </div> | |
| </div> | |
| <div class="actions"> | |
| <button id="talk-btn" class="talk-btn" disabled>Talk</button> | |
| <button id="text-btn" class="text-btn" disabled>Text</button> | |
| </div> | |
| <div class="main-screen"> | |
| <div id="player-container" class="player-container"> | |
| <div id="sound-wave" class="sound-wave"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <audio id="audio-player" class="audio-player"> | |
| <source src="" type="audio/mp3"> | |
| </audio> | |
| </div> | |
| <textarea id="chat-window" class="chat-window" readonly draggable="false"></textarea> | |
| </div> | |
| </div> | |
| <div class="action-container"> | |
| <div id="stop-call" class="stop-call"> | |
| <img src="/static/end-call.svg" alt="End call icon" class="icon-instance-node"/> | |
| </div> | |
| <div id="continue-call" class="continue-call"> | |
| <img src="/static/continue-call.svg" alt="Continue call icon" class="icon-instance-node"/> | |
| </div> | |
| <div class="message-input-container"> | |
| <input id="message-input" class="message-input" type="text" placeholder="Type your message"> | |
| <span class="focus-border"> | |
| <i></i> | |
| </span> | |
| </div> | |
| <button id="send-btn" class="send-btn">Send Message</button> | |
| </div> | |
| <div class="options-container"> | |
| <div id="disconnect" class="disconnect"> | |
| <img src="/static/connect.svg" alt="Connect Icon" class="icon-instance-node-small" /> | |
| </div> | |
| <div id="message" class="message"> | |
| <img src="/static/message.svg" alt="Message Icon" class="icon-instance-node-small" /> | |
| </div> | |
| <div id="call" class="call"> | |
| <img src="/static/microphone.svg" alt="Connect Icon" class="icon-instance-node-small" /> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="rounded-social-buttons"> | |
| <a class="social-button github" href="https://github.com/Shaunwei/RealChar" target="_blank"><i class="fab fa-github"></i></a> | |
| <a class="social-button discord" href="https://discord.gg/e4AYNnFg2F" target="_blank"><i class="fab fa-discord"></i></a> | |
| <a class="social-button twitter" href="https://twitter.com/agishaun" target="_blank"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| <p class="copyright">Copyright © 2023 RealChar. All rights reserved. This site is for demo purpose only. Any AI character's statements are fictional and don't represent actual beliefs or opinions. </p> | |
| </footer> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |