diff options
Diffstat (limited to 'main.html')
| -rw-r--r-- | main.html | 23 |
1 files changed, 20 insertions, 3 deletions
@@ -325,7 +325,7 @@ .ollama-status.connected { background: rgba(0, 255, 0, 0.1); border: 1px solid var(--success-color); } .ollama-status.disconnected { background: rgba(255, 85, 85, 0.1); border: 1px solid var(--error-color); } /* Toggle slider styles */ - #ollama-optimization-slider::before, #ollama-validator-slider::before { + #ollama-optimization-slider::before, #ollama-validator-slider::before, #ollama-stream-slider::before { content: ""; position: absolute; height: 20px; @@ -337,11 +337,13 @@ transition: 0.3s; } #ollama-optimization-toggle:checked + #ollama-optimization-slider::before, - #ollama-validator-toggle:checked + #ollama-validator-slider::before { + #ollama-validator-toggle:checked + #ollama-validator-slider::before, + #ollama-stream-toggle:checked + #ollama-stream-slider::before { transform: translateX(22px); } #ollama-optimization-toggle:checked + #ollama-optimization-slider, - #ollama-validator-toggle:checked + #ollama-validator-slider { + #ollama-validator-toggle:checked + #ollama-validator-slider, + #ollama-stream-toggle:checked + #ollama-stream-slider { border-color: var(--success-color); } .copy-btn { @@ -609,6 +611,7 @@ <div id="status-bar"> <span id="status-text">Ready</span> <span id="network-status">📶 Online</span> + <span id="stream-status" style="font-size:0.75em; margin-left:4px; color:var(--success-color);">▶ Stream</span> <button id="ai-cancel-btn" style="display:none; background:var(--error-color); color:#fff; border:none; border-radius:4px; padding:2px 10px; cursor:pointer; font-family:inherit; font-size:0.8em; touch-action:manipulation; min-height:28px;" onclick="webx11.executeCommand('ai-stop')">⏹ Stop</button> </div> @@ -691,6 +694,20 @@ <span style="color:var(--warning-color);">Disable for debugging or if model behaves unexpectedly. Reload after toggle.</span> </div> <hr style="border-color:var(--border-color); margin: 15px 0;"> + <h4 style="color: var(--accent-color); margin-bottom: 10px;">⚡ Response Streaming</h4> + <div style="display:flex; align-items:center; gap:10px; margin-bottom: 6px;"> + <span style="color:var(--text-muted); font-size:0.85em;">Stream Tokens:</span> + <label style="position:relative; display:inline-block; width:48px; height:26px;"> + <input type="checkbox" id="ollama-stream-toggle" onchange="webx11.toggleStream()" style="opacity:0; width:0; height:0;"> + <span id="ollama-stream-slider" style="position:absolute; cursor:pointer; inset:0; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:26px; transition:0.3s;"></span> + </label> + <span id="ollama-stream-label" style="font-size:0.85em; color:var(--success-color);">Enabled</span> + </div> + <div style="font-size:0.8em; color:var(--text-muted); margin-bottom: 10px;"> + Show AI responses token-by-token. Disable for instant full responses and reduced crash risk.<br> + <span style="color:var(--warning-color);">Disable on slow connections or when browser becomes unresponsive during long outputs.</span> + </div> + <hr style="border-color:var(--border-color); margin: 15px 0;"> <h4 style="color: var(--info-color); margin-bottom: 10px;">🔍 Validator Agent (Future)</h4> <div style="font-size:0.85em; color:var(--text-muted); margin-bottom: 10px;"> A separate lightweight AI that validates the main agent's tool results. Has its own |