| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>StrokeGPT - AI Hardware Controller</title> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); |
| | |
| | :root { |
| | --background-darker: #21222C; |
| | --background: #282a36; |
| | --background-lighter: #343746; |
| | --foreground: #f8f8f2; |
| | --comment: #6272a4; |
| | --cyan: #8be9fd; |
| | --purple: #bd93f9; |
| | --pink: #ff79c6; |
| | --red: #ff5555; |
| | --yellow: #f1fa8c; |
| | --shadow: rgba(0, 0, 0, 0.2); |
| | } |
| | |
| | * { box-sizing: border-box; } |
| | |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | background-color: var(--background-darker); |
| | color: var(--foreground); |
| | margin: 0; |
| | height: 100vh; |
| | overflow: hidden; |
| | display: grid; |
| | grid-template-columns: 1fr 320px; |
| | transition: grid-template-columns 0.35s ease-in-out; |
| | } |
| | |
| | |
| | @media (max-width: 768px) { |
| | body { |
| | grid-template-columns: 1fr 0px; |
| | font-size: 16px; |
| | } |
| | body:not(.sidebar-collapsed) { |
| | grid-template-columns: 1fr 280px; |
| | } |
| | #splash-screen p { |
| | font-size: 1.5rem; |
| | padding: 0 20px; |
| | text-align: center; |
| | } |
| | #top-bar h1 { |
| | font-size: 1.2rem; |
| | } |
| | .top-bar-info { |
| | font-size: 0.8rem; |
| | } |
| | #user-chat-input { |
| | font-size: 16px; |
| | } |
| | .setting-section { |
| | padding: 15px; |
| | } |
| | .input-text, .select-box { |
| | font-size: 16px; |
| | padding: 12px; |
| | } |
| | .my-button { |
| | padding: 12px 16px; |
| | font-size: 16px; |
| | } |
| | } |
| | body.sidebar-collapsed { grid-template-columns: 1fr 0px; } |
| | |
| | #splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10000; transition: opacity 1s ease-out; opacity: 1; } |
| | #splash-screen.hidden { opacity: 0; pointer-events: none; } |
| | #splash-screen img { max-width: 90%; max-height: 70%; object-fit: contain; border-radius: 16px; } |
| | #splash-screen p { margin-top: 20px; font-size: 2rem; color: #fff; text-shadow: 0 0 10px var(--pink), 0 0 20px var(--pink); animation: pulse 2s infinite; cursor: pointer; } |
| | @keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } |
| | |
| | #main-area { flex-grow: 1; display: flex; flex-direction: column; height: 100%; background-color: var(--background); overflow: hidden; } |
| | |
| | #sidebar { padding: 20px; background-color: var(--background-darker); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--background-lighter); } |
| | |
| | #web-browser { |
| | transition: opacity 0.3s ease; |
| | } |
| | |
| | #web-browser:hover { |
| | opacity: 0.9; |
| | } |
| | |
| | @media (max-width: 768px) { |
| | #sidebar { |
| | position: fixed; |
| | top: 0; |
| | right: 0; |
| | height: 100vh; |
| | z-index: 1000; |
| | transform: translateX(100%); |
| | transition: transform 0.3s ease-in-out; |
| | width: 300px; |
| | box-shadow: -5px 0 15px rgba(0,0,0,0.3); |
| | } |
| | body:not(.sidebar-collapsed) #sidebar { |
| | transform: translateX(0); |
| | } |
| | #toggle-sidebar-btn { |
| | z-index: 1001; |
| | } |
| | #web-browser { |
| | height: 150px; |
| | } |
| | } |
| | |
| | #top-bar { padding: 10px 20px; background-color: var(--background); border-bottom: 1px solid var(--background-lighter); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; position: relative; } |
| | #toggle-sidebar-btn { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); background: var(--background-lighter); border: none; color: var(--foreground); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease-in-out, background-color 0.2s ease; font-size: 1.2em; display: flex; align-items: center; justify-content: center; } |
| | #toggle-sidebar-btn:hover { background-color: var(--comment); } |
| | body.sidebar-collapsed #toggle-sidebar-btn { transform: translateY(-50%) rotate(180deg); } |
| | |
| | #top-bar h1 { margin: 0; font-size: 1.5rem; color: var(--cyan); font-weight: 600; letter-spacing: 1px; text-shadow: 0 0 5px rgba(139, 233, 253, 0.4); } |
| | #top-bar .top-bar-info { display: flex; align-items: center; gap: 15px; margin-right: 45px; } |
| | #mood-display, #edging-timer { background-color: var(--background-lighter); padding: 6px 12px; border-radius: 8px; font-size: 0.9em; } |
| | #edging-timer { color: var(--yellow); font-weight: 600; } |
| | |
| | #chat-view { |
| | flex-grow: 1; |
| | padding: 20px; |
| | overflow-y: auto; |
| | display: flex; |
| | flex-direction: column; |
| | background-image: url('/static/chat-background.png'); |
| | background-size: cover; |
| | background-position: center; |
| | background-repeat: no-repeat; |
| | background-attachment: fixed; |
| | position: relative; |
| | } |
| | |
| | #chat-view::before { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | background: rgba(40, 42, 54, 0.7); |
| | z-index: 1; |
| | } |
| | |
| | #chat-messages-container { |
| | position: relative; |
| | z-index: 2; |
| | } |
| | #bottom-input-area { padding: 20px; border-top: 1px solid var(--background-lighter); background-color: var(--background); flex-shrink: 0; position: relative; z-index: 10; } |
| | |
| | .chat-message-container { |
| | display: flex; |
| | align-items: flex-end; |
| | gap: 10px; |
| | margin-bottom: 15px; |
| | max-width: 85%; |
| | animation: fadeIn 0.4s ease-out; |
| | position: relative; |
| | z-index: 3; |
| | } |
| | @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } |
| | |
| | .chat-pfp { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } |
| | .message-content { display: flex; flex-direction: column; } |
| | .message-bubble { padding: 12px 16px; border-radius: 18px; line-height: 1.5; word-wrap: break-word; } |
| | .message-bubble pre { font-family: 'Courier New', Courier, monospace; font-size: 0.9em; text-align: left; white-space: pre; } |
| | |
| | .bot-bubble { align-self: flex-start; } |
| | .bot-bubble .message-bubble { background-color: var(--background-lighter); border-top-left-radius: 4px; } |
| | .bot-bubble .speaker-name { align-self: flex-start; } |
| | |
| | .user-bubble { align-self: flex-end; } |
| | .user-bubble .message-bubble { background-color: var(--comment); color: var(--foreground); border-top-right-radius: 4px; } |
| | |
| | .speaker-name { font-size: 0.8em; margin-bottom: 4px; color: var(--purple); font-weight: 600; } |
| | .user-bubble .speaker-name { align-self: flex-end; } |
| | |
| | #visualizer-box { height: 40px; background-color: var(--background-darker); border-radius: 8px; margin-bottom: 15px; padding: 5px; pointer-events: none; } |
| | .setting-section { border-radius: 12px; padding: 15px; background-color: var(--background); box-shadow: 0 4px 12px var(--shadow); } |
| | .setting-section h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; font-weight: 600; color: var(--cyan); border-bottom: 1px solid var(--background-lighter); padding-bottom: 10px; } |
| | |
| | .my-button { padding: 10px 16px; border: none; background-color: var(--comment); color: var(--foreground); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-size: 1em; font-weight: 600; width: 100%; box-shadow: 0 2px 4px var(--shadow); } |
| | .my-button:hover { background-color: #798dcc; transform: translateY(-2px); box-shadow: 0 4px 8px var(--shadow); } |
| | .my-button:active { transform: translateY(0); box-shadow: 0 2px 4px var(--shadow); } |
| | .sidebar-button.edging { background-color: var(--yellow); color: var(--background); } |
| | .sidebar-button.edging:hover { background-color: #f7ffae; } |
| | .sidebar-button.milking { background-color: var(--pink); } |
| | .sidebar-button.milking:hover { background-color: #ff92d0; } |
| | .sidebar-button.stop { background-color: var(--red); } |
| | .sidebar-button.stop:hover { background-color: #ff6e6e; } |
| | |
| | .input-text, .select-box, input[type="number"] { padding: 10px; border: 1px solid var(--background-lighter); background-color: var(--background-lighter); color: var(--foreground); border-radius: 8px; font-size: 1em; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } |
| | .input-text:focus, .select-box:focus, input[type="number"]:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.3); } |
| | |
| | #message-input-line { display: flex; gap: 10px; align-items: center; } |
| | #message-input-line .my-button { width: auto; flex-shrink: 0; } |
| | #message-input-line .input-text { flex-grow: 1; } |
| | |
| | .audio-toggle-line { display: flex; align-items: center; gap: 8px; padding-top: 10px; } |
| | |
| | #status-text { margin-top: 15px; font-size: 0.9em; text-align: center; color: var(--purple); } |
| | #setup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 9999; color: var(--foreground); } |
| | #setup-box { text-align: center; background-color: var(--background); padding: 30px; border-radius: 12px; border: 1px solid var(--background-lighter); box-shadow: 0 8px 32px var(--shadow); } |
| | #setup-box h2 { color: var(--cyan); margin-top: 0; } |
| | #setup-box button { margin-top: 15px; } |
| | .slider-container { margin: 15px 0; } |
| | |
| | .timing-row { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; } |
| | .timing-row label { flex-basis: 50px; font-size: 0.9em; } |
| | .timing-row input { flex-grow: 1; width: 40px; } |
| | .timing-row span { padding: 0 5px; } |
| | |
| | .typing-dots span { display: inline-block; animation: blink 1.4s infinite both; font-size: 1.5em; line-height: 0; } |
| | .typing-dots span:nth-child(2) { animation-delay: 0.2s; } |
| | .typing-dots span:nth-child(3) { animation-delay: 0.4s; } |
| | @keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } |
| | |
| | #easter-egg-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; color: #0f0; font-family: 'Courier New', monospace; font-size: 1.5em; display: none; align-items: center; justify-content: center; z-index: 10001; opacity: 0; transition: opacity 1s ease-in-out; text-align: center; } |
| | |
| | </style> |
| | </head> |
| | <body> |
| | <div id="splash-screen"> |
| | <img src="/static/splash.jpg" alt="StrokeGPT" onerror="this.style.display='none'"> |
| | <p>Click anywhere to start</p> |
| | </div> |
| | <div id="main-area"> |
| | <div id="top-bar"> |
| | <h1>StrokeGPT</h1> |
| | <div class="top-bar-info"> |
| | <div id="edging-timer" style="display: none;">00:00</div> |
| | <div id="mood-display">Mood: ...</div> |
| | </div> |
| | <button id="toggle-sidebar-btn">«</button> |
| | </div> |
| | <div id="chat-view"> |
| | <div id="chat-messages-container"> |
| | <div id="typing-indicator" class="chat-message-container bot-bubble" style="display: none;"> |
| | <img class="chat-pfp" id="typing-indicator-pfp" src="/static/default-pfp.png" alt="pfp" onerror="this.style.display='none'"> |
| | <div class="message-content"> |
| | <p class="speaker-name">BOT</p> |
| | <p class="message-bubble typing-dots"><span>.</span><span>.</span><span>.</span></p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div id="bottom-input-area"> |
| | <div id="visualizer-box" style="pointer-events: none;"><canvas id="rhythm-canvas" style="pointer-events: none;"></canvas></div> |
| | <div id="message-input-line"> |
| | <input type="text" id="user-chat-input" class="input-text" placeholder="Type a message or command..." style="z-index: 100; position: relative;"> |
| | <button id="send-chat-btn" class="my-button">Send</button> |
| | </div> |
| | <div id="status-text">Status: Ready to chat! (Note: Ollama AI server needed for responses)</div> |
| | </div> |
| | </div> |
| | <div id="sidebar"> |
| | <div class="setting-section"> |
| | <h3>Web Browser</h3> |
| | <div id="browser-controls"> |
| | <input type="url" id="browser-url" class="input-text" placeholder="Enter URL (e.g., youtube.com)" style="margin-bottom: 10px;"> |
| | <div style="display: flex; gap: 5px; margin-bottom: 10px;"> |
| | <button id="browser-go" class="my-button" style="flex: 1;">Go</button> |
| | <button id="browser-home" class="my-button" style="flex: 1;">Home</button> |
| | <button id="browser-refresh" class="my-button" style="flex: 1;">⟳</button> |
| | </div> |
| | </div> |
| | <div id="browser-container"> |
| | <iframe id="web-browser" src="about:blank" style="width: 100%; height: 200px; border: 1px solid var(--background-lighter); border-radius: 8px; background: var(--background-lighter);"></iframe> |
| | </div> |
| | </div> |
| | <div class="setting-section"> |
| | <h3>Persona</h3> |
| | <label for="pfp-upload" style="cursor: pointer; display: block; margin-bottom: 15px;"> |
| | <img id="ai-pfp-preview" src="/static/default-pfp.png" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 10px auto; display: block; border: 2px solid var(--comment);" onerror="this.style.display='none'"> |
| | </label> |
| | <input type="file" id="pfp-upload" accept="image/*" style="display: none;"> |
| | <input type="text" id="ai-name-input" class="input-text" placeholder="AI's Name..." style="margin-bottom: 10px;"> |
| | <button id="set-ai-name-btn" class="my-button" style="margin-bottom: 15px;">Set Name</button> |
| | <input type="text" id="persona-input" class="input-text" placeholder="Describe the AI's persona..."> |
| | <button id="set-persona-btn" class="my-button" style="margin-top: 10px;">Set Persona</button> |
| | </div> |
| | <div class="setting-section"> |
| | <h3>Mode Timings (Seconds)</h3> |
| | <div class="timing-row"><label for="auto-min-time">Auto:</label><input type="number" id="auto-min-time" min="1" max="60" step="1" value="4"><span>-</span><input type="number" id="auto-max-time" min="1" max="60" step="1" value="7"></div> |
| | <div class="timing-row"><label for="edging-min-time">Edging:</label><input type="number" id="edging-min-time" min="1" max="60" step="1" value="5"><span>-</span><input type="number" id="edging-max-time" min="1" max="60" step="1" value="8"></div> |
| | <div class="timing-row"><label for="milking-min-time">Milking:</label><input type="number" id="milking-min-time" min="1" max="60" step="1" value="2"><span>-</span><input type="number" id="milking-max-time" min="1" max="60" step="1" value="5"></div> |
| | <button id="save-timings-btn" class="my-button">Save Timings</button> |
| | </div> |
| | <div class="setting-section"> |
| | <h3>Voice Output (ElevenLabs)</h3> |
| | <input type="password" id="elevenlabs-key-input" class="input-text" placeholder="ElevenLabs API Key"> |
| | <button id="set-elevenlabs-key-button" class="my-button">Set Key</button> |
| | <select id="elevenlabs-voice-select-box" class="select-box" disabled><option>Set API Key to load voices...</option></select> |
| | <div class="audio-toggle-line"> |
| | <label for="elevenlabs-enabled-checkbox">Enable Voice:</label> |
| | <input type="checkbox" id="elevenlabs-enabled-checkbox" disabled> |
| | </div> |
| | </div> |
| | <div class="setting-section"> |
| | <h3>Hardware Settings</h3> |
| | <input type="password" id="handy-key-input" class="input-text" placeholder="Hardware API Key"> |
| | <button id="set-handy-key-btn" class="my-button">Set Key</button> |
| | </div> |
| | <div class="setting-section"> |
| | <h3>Control Modes</h3> |
| | <div style="margin-bottom: 10px;"> |
| | <label for="pattern-mode-checkbox" style="display: flex; align-items: center; gap: 8px;"> |
| | <input type="checkbox" id="pattern-mode-checkbox"> |
| | <span>Use Pattern Mode</span> |
| | </label> |
| | </div> |
| | <button id="auto-mode-btn" class="my-button sidebar-button">Auto Mode</button> |
| | <button id="edging-mode-btn" class="my-button sidebar-button edging">Edging Mode</button> |
| | <button id="milking-mode-btn" class="my-button sidebar-button milking">Milking Mode</button> |
| | <button id="edge-signal-btn" class="my-button" style="display: none;">I'm Close!</button> |
| | <button id="stop-all-btn" class="my-button sidebar-button stop">Stop All</button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="setup-overlay"> |
| | <div id="setup-box"> |
| | <h2>Welcome to StrokeGPT</h2> |
| | <p>Let's get you set up quickly.</p> |
| | <div style="margin: 20px 0;"> |
| | <label>Hardware API Key:</label> |
| | <input type="password" id="setup-handy-key" class="input-text" placeholder="Enter your API key"> |
| | </div> |
| | <div style="margin: 20px 0;"> |
| | <label>AI Persona:</label> |
| | <input type="text" id="setup-persona" class="input-text" placeholder="Describe your ideal AI partner" value="An energetic and passionate girlfriend"> |
| | </div> |
| | <button id="setup-done-btn" class="my-button">Get Started</button> |
| | </div> |
| | </div> |
| |
|
| | <div id="easter-egg-overlay"> |
| | <div>CLASSIFIED ACCESS GRANTED<br><br>METAL GEAR SOLID REFERENCE DETECTED<br><br>INITIATING TACTICAL ESPIONAGE ACTION</div> |
| | </div> |
| |
|
| | <script> |
| | |
| | let currentAIName = "BOT"; |
| | let currentPersona = ""; |
| | let currentHandyKey = ""; |
| | let currentElevenLabsKey = ""; |
| | let audioEnabled = false; |
| | let sidebarCollapsed = false; |
| | let isSetupComplete = false; |
| | let isPolling = false; |
| | let pendingAudioRequests = []; |
| | |
| | |
| | function showStatus(text, isError = false) { |
| | const statusEl = document.getElementById('status-text'); |
| | statusEl.textContent = text; |
| | statusEl.style.color = isError ? 'var(--red)' : 'var(--purple)'; |
| | } |
| | |
| | function addChatMessage(content, sender = "bot", useCurrentName = true) { |
| | const container = document.getElementById('chat-messages-container'); |
| | const msgDiv = document.createElement('div'); |
| | msgDiv.className = `chat-message-container ${sender === 'user' ? 'user-bubble' : 'bot-bubble'}`; |
| | |
| | const displayName = sender === 'bot' && useCurrentName ? currentAIName : 'You'; |
| | const pfpSrc = sender === 'bot' ? document.getElementById('ai-pfp-preview').src : '/static/default-pfp.png'; |
| | |
| | msgDiv.innerHTML = ` |
| | <img class="chat-pfp" src="${pfpSrc}" alt="pfp" onerror="this.style.display='none'"> |
| | <div class="message-content"> |
| | <p class="speaker-name">${displayName}</p> |
| | <p class="message-bubble">${content}</p> |
| | </div> |
| | `; |
| | |
| | container.appendChild(msgDiv); |
| | container.scrollTop = container.scrollHeight; |
| | |
| | if (sender === 'bot' && audioEnabled) { |
| | requestAudioForMessage(content); |
| | } |
| | } |
| | |
| | function showTypingIndicator() { |
| | document.getElementById('typing-indicator').style.display = 'flex'; |
| | document.getElementById('typing-indicator-pfp').src = document.getElementById('ai-pfp-preview').src; |
| | document.querySelector('#typing-indicator .speaker-name').textContent = currentAIName; |
| | } |
| | |
| | function hideTypingIndicator() { |
| | document.getElementById('typing-indicator').style.display = 'none'; |
| | } |
| | |
| | function updateMoodDisplay(mood) { |
| | document.getElementById('mood-display').textContent = `Mood: ${mood}`; |
| | } |
| | |
| | function updateEdgingTimer(elapsed) { |
| | const timerEl = document.getElementById('edging-timer'); |
| | if (elapsed !== null) { |
| | const minutes = Math.floor(elapsed / 60); |
| | const seconds = elapsed % 60; |
| | timerEl.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
| | timerEl.style.display = 'block'; |
| | } else { |
| | timerEl.style.display = 'none'; |
| | } |
| | } |
| | |
| | function requestAudioForMessage(text) { |
| | |
| | const cleanText = text.replace(/<[^>]+>/g, '').trim(); |
| | if (!cleanText || cleanText.startsWith('(') || cleanText.startsWith('[')) return; |
| | |
| | |
| | if (pendingAudioRequests.length > 2) return; |
| | |
| | pendingAudioRequests.push(cleanText); |
| | setTimeout(() => { |
| | fetch('/get_audio') |
| | .then(response => { |
| | if (response.ok && response.headers.get('content-type')?.includes('audio')) { |
| | return response.blob(); |
| | } |
| | return null; |
| | }) |
| | .then(blob => { |
| | if (blob) { |
| | const audio = new Audio(URL.createObjectURL(blob)); |
| | audio.play().catch(e => console.warn('Audio playback failed:', e)); |
| | } |
| | pendingAudioRequests.shift(); |
| | }) |
| | .catch(e => { |
| | console.warn('Audio request failed:', e); |
| | pendingAudioRequests.shift(); |
| | }); |
| | }, 1000); |
| | } |
| | |
| | |
| | async function sendMessage(message) { |
| | try { |
| | showTypingIndicator(); |
| | const response = await fetch('/send_message', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ |
| | message: message, |
| | persona_desc: currentPersona, |
| | key: currentHandyKey |
| | }) |
| | }); |
| | |
| | const data = await response.json(); |
| | hideTypingIndicator(); |
| | |
| | if (data.status === 'no_key_set') { |
| | showStatus('Please set your hardware API key first.', true); |
| | return false; |
| | } else if (data.status === 'message_relayed_to_active_mode') { |
| | showStatus('Message sent to active mode.'); |
| | return true; |
| | } else if (data.status === 'ok') { |
| | showStatus('Message sent successfully.'); |
| | return true; |
| | } else { |
| | showStatus(`Command executed: ${data.status}`); |
| | return true; |
| | } |
| | } catch (error) { |
| | hideTypingIndicator(); |
| | showStatus('Failed to send message. Check connection.', true); |
| | console.error('Send message error:', error); |
| | return false; |
| | } |
| | } |
| | |
| | async function checkSettings() { |
| | try { |
| | const response = await fetch('/check_settings'); |
| | const data = await response.json(); |
| | |
| | if (data.configured) { |
| | currentPersona = data.persona; |
| | currentHandyKey = data.handy_key; |
| | currentAIName = data.ai_name || 'BOT'; |
| | currentElevenLabsKey = data.elevenlabs_key || ''; |
| | |
| | document.getElementById('persona-input').value = currentPersona; |
| | document.getElementById('ai-name-input').value = currentAIName; |
| | document.getElementById('handy-key-input').value = currentHandyKey; |
| | document.getElementById('elevenlabs-key-input').value = currentElevenLabsKey; |
| | |
| | if (data.pfp) { |
| | document.getElementById('ai-pfp-preview').src = data.pfp; |
| | } |
| | |
| | if (data.timings) { |
| | document.getElementById('auto-min-time').value = data.timings.auto_min; |
| | document.getElementById('auto-max-time').value = data.timings.auto_max; |
| | document.getElementById('edging-min-time').value = data.timings.edging_min; |
| | document.getElementById('edging-max-time').value = data.timings.edging_max; |
| | document.getElementById('milking-min-time').value = data.timings.milking_min; |
| | document.getElementById('milking-max-time').value = data.timings.milking_max; |
| | } |
| | |
| | showStatus('Settings loaded successfully.'); |
| | isSetupComplete = true; |
| | return true; |
| | } else { |
| | showSetupOverlay(); |
| | return false; |
| | } |
| | } catch (error) { |
| | showStatus('Failed to load settings.', true); |
| | console.error('Settings check error:', error); |
| | return false; |
| | } |
| | } |
| | |
| | async function pollMessages() { |
| | if (isPolling) return; |
| | isPolling = true; |
| | |
| | try { |
| | const response = await fetch('/poll_messages'); |
| | const data = await response.json(); |
| | |
| | data.messages.forEach(msg => addChatMessage(msg)); |
| | updateMoodDisplay(data.mood); |
| | updateEdgingTimer(data.edging_elapsed); |
| | |
| | |
| | const edgeBtn = document.getElementById('edge-signal-btn'); |
| | if (data.auto_mode_name === 'edging') { |
| | edgeBtn.style.display = 'block'; |
| | } else { |
| | edgeBtn.style.display = 'none'; |
| | } |
| | |
| | |
| | const autoBtn = document.getElementById('auto-mode-btn'); |
| | autoBtn.textContent = data.auto_active ? 'Stop Auto' : 'Auto Mode'; |
| | |
| | } catch (error) { |
| | console.warn('Polling error:', error); |
| | } finally { |
| | isPolling = false; |
| | } |
| | } |
| | |
| | |
| | function setupEventHandlers() { |
| | |
| | function hideSplashScreen() { |
| | if (!document.getElementById('splash-screen').classList.contains('hidden')) { |
| | document.getElementById('splash-screen').classList.add('hidden'); |
| | setTimeout(() => checkSettings(), 1000); |
| | } |
| | } |
| | |
| | document.addEventListener('keydown', (e) => { |
| | if (e.key === 'Enter') { |
| | hideSplashScreen(); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('splash-screen').addEventListener('click', hideSplashScreen); |
| | document.getElementById('splash-screen').addEventListener('touchstart', hideSplashScreen); |
| | |
| | |
| | document.getElementById('user-chat-input').addEventListener('keydown', (e) => { |
| | if (e.key === 'Enter') { |
| | sendChatMessage(); |
| | } |
| | }); |
| | |
| | document.getElementById('send-chat-btn').addEventListener('click', sendChatMessage); |
| | |
| | |
| | document.getElementById('toggle-sidebar-btn').addEventListener('click', () => { |
| | sidebarCollapsed = !sidebarCollapsed; |
| | document.body.classList.toggle('sidebar-collapsed', sidebarCollapsed); |
| | }); |
| | |
| | |
| | document.getElementById('set-ai-name-btn').addEventListener('click', async () => { |
| | const name = document.getElementById('ai-name-input').value.trim() || 'BOT'; |
| | try { |
| | const response = await fetch('/set_ai_name', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ name }) |
| | }); |
| | const data = await response.json(); |
| | |
| | if (data.status === 'special_persona_activated') { |
| | currentAIName = data.persona; |
| | addChatMessage(data.message, 'bot', false); |
| | showStatus(`Special persona activated: ${data.persona}`); |
| | } else { |
| | currentAIName = name; |
| | showStatus('AI name updated successfully.'); |
| | } |
| | } catch (error) { |
| | showStatus('Failed to set AI name.', true); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('set-persona-btn').addEventListener('click', () => { |
| | currentPersona = document.getElementById('persona-input').value.trim(); |
| | if (currentPersona) { |
| | showStatus('Persona updated successfully.'); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('pfp-upload').addEventListener('change', (e) => { |
| | const file = e.target.files[0]; |
| | if (file) { |
| | const reader = new FileReader(); |
| | reader.onload = async (event) => { |
| | const base64 = event.target.result; |
| | document.getElementById('ai-pfp-preview').src = base64; |
| | |
| | try { |
| | await fetch('/set_profile_picture', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ pfp_b64: base64 }) |
| | }); |
| | showStatus('Profile picture updated.'); |
| | } catch (error) { |
| | showStatus('Failed to save profile picture.', true); |
| | } |
| | }; |
| | reader.readAsDataURL(file); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('set-handy-key-btn').addEventListener('click', async () => { |
| | const key = document.getElementById('handy-key-input').value.trim(); |
| | if (!key) return; |
| | |
| | try { |
| | await fetch('/set_handy_key', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ key }) |
| | }); |
| | currentHandyKey = key; |
| | showStatus('Hardware key saved successfully.'); |
| | } catch (error) { |
| | showStatus('Failed to save hardware key.', true); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('set-elevenlabs-key-button').addEventListener('click', async () => { |
| | const key = document.getElementById('elevenlabs-key-input').value.trim(); |
| | if (!key) return; |
| | |
| | try { |
| | const response = await fetch('/setup_elevenlabs', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ api_key: key }) |
| | }); |
| | |
| | const data = await response.json(); |
| | if (data.status === 'success') { |
| | currentElevenLabsKey = key; |
| | populateVoiceDropdown(data.voices); |
| | showStatus('ElevenLabs key set successfully.'); |
| | } else { |
| | showStatus('Invalid ElevenLabs key.', true); |
| | } |
| | } catch (error) { |
| | showStatus('Failed to set ElevenLabs key.', true); |
| | } |
| | }); |
| | |
| | document.getElementById('elevenlabs-enabled-checkbox').addEventListener('change', async (e) => { |
| | const voiceId = document.getElementById('elevenlabs-voice-select-box').value; |
| | audioEnabled = e.target.checked; |
| | |
| | try { |
| | await fetch('/setup_elevenlabs', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ |
| | voice_id: voiceId, |
| | enabled: audioEnabled |
| | }) |
| | }); |
| | showStatus(`Voice ${audioEnabled ? 'enabled' : 'disabled'}.`); |
| | } catch (error) { |
| | showStatus('Failed to update voice settings.', true); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('save-timings-btn').addEventListener('click', async () => { |
| | const timings = { |
| | auto_min_time: parseFloat(document.getElementById('auto-min-time').value), |
| | auto_max_time: parseFloat(document.getElementById('auto-max-time').value), |
| | edging_min_time: parseFloat(document.getElementById('edging-min-time').value), |
| | edging_max_time: parseFloat(document.getElementById('edging-max-time').value), |
| | milking_min_time: parseFloat(document.getElementById('milking-min-time').value), |
| | milking_max_time: parseFloat(document.getElementById('milking-max-time').value) |
| | }; |
| | |
| | try { |
| | await fetch('/save_timings', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify(timings) |
| | }); |
| | showStatus('Timings saved successfully.'); |
| | } catch (error) { |
| | showStatus('Failed to save timings.', true); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('auto-mode-btn').addEventListener('click', () => { |
| | handleModeAction('auto'); |
| | }); |
| | |
| | document.getElementById('edging-mode-btn').addEventListener('click', () => { |
| | handleModeAction('edging'); |
| | }); |
| | |
| | document.getElementById('milking-mode-btn').addEventListener('click', () => { |
| | handleModeAction('milking'); |
| | }); |
| | |
| | document.getElementById('stop-all-btn').addEventListener('click', () => { |
| | handleModeAction('stop'); |
| | }); |
| | |
| | document.getElementById('edge-signal-btn').addEventListener('click', async () => { |
| | try { |
| | await fetch('/signal_edge', { method: 'POST' }); |
| | showStatus('Edge signal sent.'); |
| | } catch (error) { |
| | showStatus('Failed to send edge signal.', true); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('setup-done-btn').addEventListener('click', async () => { |
| | const handyKey = document.getElementById('setup-handy-key').value.trim(); |
| | const persona = document.getElementById('setup-persona').value.trim(); |
| | |
| | if (!handyKey) { |
| | alert('Please enter your hardware API key.'); |
| | return; |
| | } |
| | |
| | try { |
| | await fetch('/set_handy_key', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ key: handyKey }) |
| | }); |
| | |
| | currentHandyKey = handyKey; |
| | currentPersona = persona; |
| | document.getElementById('setup-overlay').style.display = 'none'; |
| | |
| | |
| | document.getElementById('handy-key-input').value = handyKey; |
| | document.getElementById('persona-input').value = persona; |
| | |
| | isSetupComplete = true; |
| | showStatus('Setup complete! You can now chat with your AI.'); |
| | addChatMessage('Hello! I\'m ready to chat. How can I make you feel good today?'); |
| | |
| | } catch (error) { |
| | alert('Failed to save settings. Please try again.'); |
| | } |
| | }); |
| | } |
| | |
| | function sendChatMessage() { |
| | const input = document.getElementById('user-chat-input'); |
| | const message = input.value.trim(); |
| | |
| | if (!message) return; |
| | if (!isSetupComplete) { |
| | showStatus('Please complete setup first.', true); |
| | return; |
| | } |
| | |
| | addChatMessage(message, 'user'); |
| | input.value = ''; |
| | sendMessage(message); |
| | } |
| | |
| | function populateVoiceDropdown(voices) { |
| | const select = document.getElementById('elevenlabs-voice-select-box'); |
| | select.innerHTML = '<option value="">Select a voice...</option>'; |
| | |
| | Object.entries(voices).forEach(([name, id]) => { |
| | const option = document.createElement('option'); |
| | option.value = id; |
| | option.textContent = name; |
| | select.appendChild(option); |
| | }); |
| | |
| | select.disabled = false; |
| | document.getElementById('elevenlabs-enabled-checkbox').disabled = false; |
| | } |
| | |
| | function showSetupOverlay() { |
| | document.getElementById('setup-overlay').style.display = 'flex'; |
| | } |
| | |
| | async function handleModeAction(action) { |
| | try { |
| | const usePatterns = document.getElementById('pattern-mode-checkbox').checked; |
| | const response = await fetch('/sidebar_mode_action', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ action, use_patterns: usePatterns }) |
| | }); |
| | |
| | const data = await response.json(); |
| | showStatus(`Action: ${data.status}`); |
| | |
| | } catch (error) { |
| | showStatus('Failed to execute mode action.', true); |
| | } |
| | } |
| | |
| | |
| | function setupBrowserControls() { |
| | document.getElementById('browser-go').addEventListener('click', () => { |
| | const url = document.getElementById('browser-url').value.trim(); |
| | if (url) { |
| | let fullUrl = url; |
| | if (!url.startsWith('http://') && !url.startsWith('https://')) { |
| | fullUrl = 'https://' + url; |
| | } |
| | document.getElementById('web-browser').src = fullUrl; |
| | } |
| | }); |
| | |
| | document.getElementById('browser-home').addEventListener('click', () => { |
| | document.getElementById('web-browser').src = 'about:blank'; |
| | document.getElementById('browser-url').value = ''; |
| | }); |
| | |
| | document.getElementById('browser-refresh').addEventListener('click', () => { |
| | const iframe = document.getElementById('web-browser'); |
| | iframe.src = iframe.src; |
| | }); |
| | |
| | document.getElementById('browser-url').addEventListener('keydown', (e) => { |
| | if (e.key === 'Enter') { |
| | document.getElementById('browser-go').click(); |
| | } |
| | }); |
| | } |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | setupEventHandlers(); |
| | setupBrowserControls(); |
| | |
| | |
| | setInterval(pollMessages, 1000); |
| | }); |
| | |
| | |
| | function setupVisualizer() { |
| | const canvas = document.getElementById('rhythm-canvas'); |
| | const ctx = canvas.getContext('2d'); |
| | |
| | function resizeCanvas() { |
| | canvas.width = canvas.offsetWidth; |
| | canvas.height = canvas.offsetHeight; |
| | } |
| | |
| | function animate() { |
| | ctx.clearRect(0, 0, canvas.width, canvas.height); |
| | |
| | |
| | const time = Date.now() * 0.002; |
| | const pulse = (Math.sin(time) + 1) * 0.5; |
| | |
| | ctx.fillStyle = `rgba(139, 233, 253, ${pulse * 0.3})`; |
| | ctx.fillRect(0, 0, canvas.width, canvas.height); |
| | |
| | requestAnimationFrame(animate); |
| | } |
| | |
| | resizeCanvas(); |
| | window.addEventListener('resize', resizeCanvas); |
| | animate(); |
| | } |
| | |
| | setTimeout(setupVisualizer, 1000); |
| | </script> |
| | </body> |
| | </html> |
| |
|
