| | <!DOCTYPE html> |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| |
|
| | |
| | <div id="desktop-content"> |
| | |
| | <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> |
| | |
| | |
| | <div class="main-container"> |
| | <div class="radio-buttons"> |
| | |
| | </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> |
| |
|
