Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Live2D Stream Assistant</title> | |
| <meta name="description" content="Advanced Live2D streaming assistant with chat integration and AI memory"> | |
| <meta name="keywords" content="Live2D, streaming, twitch, youtube, chatbot, vtuber"> | |
| <meta name="author" content="Live2D Stream Assistant"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="stylesheet" href="assets/css/chat.css"> | |
| <link rel="stylesheet" href="assets/css/controls.css"> | |
| <!-- Live2D SDK --> | |
| <script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script> | |
| <!-- Font Awesome for icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-robot"></i> | |
| <span>Live2D Stream Assistant</span> | |
| </div> | |
| <nav class="nav"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| <button id="settingsBtn" class="btn-icon"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button id="fullscreenBtn" class="btn-icon"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </header> | |
| <main class="main-container"> | |
| <div class="layout-grid"> | |
| <!-- Live2D Model Container --> | |
| <section class="model-section"> | |
| <div class="model-container"> | |
| <canvas id="live2d-canvas" width="800" height="600"></canvas> | |
| <div class="model-overlay"> | |
| <div class="model-status"> | |
| <span id="modelStatus" class="status-indicator online">Online</span> | |
| <span id="fpsCounter">FPS: 60</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model Controls --> | |
| <div class="model-controls"> | |
| <button id="modelChangeBtn" class="btn-primary"> | |
| <i class="fas fa-user-circle"></i> Change Model | |
| </button> | |
| <button id="expressionBtn" class="btn-secondary"> | |
| <i class="fas fa-smile"></i> Expressions | |
| </button> | |
| <button id="motionBtn" class="btn-secondary"> | |
| <i class="fas fa-running"></i> Motions | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Chat and Interaction Section --> | |
| <section class="interaction-section"> | |
| <!-- Platform Tabs --> | |
| <div class="platform-tabs"> | |
| <button class="tab-btn active" data-platform="twitch"> | |
| <i class="fab fa-twitch"></i> Twitch | |
| </button> | |
| <button class="tab-btn" data-platform="youtube"> | |
| <i class="fab fa-youtube"></i> YouTube | |
| </button> | |
| <button class="tab-btn" data-platform="local"> | |
| <i class="fas fa-comments"></i> Local | |
| </button> | |
| </div> | |
| <!-- Chat Container --> | |
| <div class="chat-container"> | |
| <div id="chatMessages" class="chat-messages"> | |
| <div class="system-message"> | |
| <i class="fas fa-info-circle"></i> | |
| <span>System initialized. Ready to connect...</span> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="chat-input-container"> | |
| <input type="text" id="chatInput" placeholder="Type a message..." maxlength="500"> | |
| <button id="sendBtn" class="btn-send"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| <button id="voiceBtn" class="btn-voice"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Memory Panel --> | |
| <div class="memory-panel"> | |
| <div class="memory-header"> | |
| <h3><i class="fas fa-brain"></i> Memory Context</h3> | |
| <button id="clearMemoryBtn" class="btn-small"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| <div id="memoryContent" class="memory-content"> | |
| <div class="memory-item"> | |
| <span class="memory-time">10:23</span> | |
| <span class="memory-text">User mentioned favorite game: Valorant</span> | |
| </div> | |
| <div class="memory-item"> | |
| <span class="memory-time">10:25</span> | |
| <span class="memory-text">Conversation about streaming schedule</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Visual Processing Section --> | |
| <section class="visual-section"> | |
| <div class="video-container"> | |
| <video id="streamVideo" autoplay muted></video> | |
| <canvas id="processingCanvas" width="640" height="480"></canvas> | |
| </div> | |
| <div class="visual-controls"> | |
| <button id="cameraBtn" class="btn-primary"> | |
| <i class="fas fa-video"></i> Camera | |
| </button> | |
| <button id="screenBtn" class="btn-secondary"> | |
| <i class="fas fa-desktop"></i> Screen | |
| </button> | |
| <button id="effectsBtn" class="btn-secondary"> | |
| <i class="fas fa-magic"></i> Effects | |
| </button> | |
| </div> | |
| <!-- Performance Stats --> | |
| <div class="performance-stats"> | |
| <div class="stat-item"> | |
| <span class="stat-label">Latency:</span> | |
| <span id="latency" class="stat-value">12ms</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-label">CPU:</span> | |
| <span id="cpuUsage" class="stat-value">15%</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-label">Memory:</span> | |
| <span id="memoryUsage" class="stat-value">128MB</span> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Settings</h2> | |
| <button class="modal-close">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="settings-section"> | |
| <h3>Platform Configuration</h3> | |
| <div class="form-group"> | |
| <label for="twitchChannel">Twitch Channel</label> | |
| <input type="text" id="twitchChannel" placeholder="channel_name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="youtubeVideoId">YouTube Video ID</label> | |
| <input type="text" id="youtubeVideoId" placeholder="video_id"> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h3>Performance</h3> | |
| <div class="form-group"> | |
| <label for="quality">Model Quality</label> | |
| <select id="quality"> | |
| <option value="low">Low (Fast)</option> | |
| <option value="medium" selected>Medium</option> | |
| <option value="high">High (Quality)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="maxFPS">Max FPS</label> | |
| <input type="range" id="maxFPS" min="15" max="120" value="60"> | |
| <span id="fpsValue">60</span> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h3>AI Settings</h3> | |
| <div class="form-group"> | |
| <label for="responseDelay">Response Delay (ms)</label> | |
| <input type="number" id="responseDelay" value="500" min="0" max="5000"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="personality">Personality</label> | |
| <select id="personality"> | |
| <option value="friendly">Friendly</option> | |
| <option value="energetic">Energetic</option> | |
| <option value="calm">Calm</option> | |
| <option value="professional">Professional</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button id="saveSettings" class="btn-primary">Save</button> | |
| <button id="cancelSettings" class="btn-secondary">Cancel</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expression Picker Modal --> | |
| <div id="expressionModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Select Expression</h2> | |
| <button class="modal-close">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="expression-grid"> | |
| <button class="expression-btn" data-expression="happy"> | |
| <i class="fas fa-smile"></i> Happy | |
| </button> | |
| <button class="expression-btn" data-expression="sad"> | |
| <i class="fas fa-sad-tear"></i> Sad | |
| </button> | |
| <button class="expression-btn" data-expression="angry"> | |
| <i class="fas fa-angry"></i> Angry | |
| </button> | |
| <button class="expression-btn" data-expression="surprised"> | |
| <i class="fas fa-surprise"></i> Surprised | |
| </button> | |
| <button class="expression-btn" data-expression="love"> | |
| <i class="fas fa-heart"></i> Love | |
| </button> | |
| <button class="expression-btn" data-expression="sleepy"> | |
| <i class="fas fa-bed"></i> Sleepy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="assets/js/live2d-manager.js"></script> | |
| <script src="assets/js/chat-manager.js"></script> | |
| <script src="assets/js/memory-manager.js"></script> | |
| <script src="assets/js/visual-processor.js"></script> | |
| <script src="assets/js/performance-monitor.js"></script> | |
| <script src="assets/js/settings-manager.js"></script> | |
| <script src="assets/js/app.js"></script> | |
| </body> | |
| </html> |