| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Tone Slider AI</title>
|
| <style>
|
| body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; }
|
| .card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 400px; }
|
| h2 { text-align: center; margin-bottom: 1.5rem; color: #333; }
|
|
|
|
|
| .slider-container { display: flex; justify-content: center; margin-bottom: 1.5rem; gap: 10px; font-weight: bold; }
|
| .switch { position: relative; display: inline-block; width: 60px; height: 34px; }
|
| .switch input { opacity: 0; width: 0; height: 0; }
|
| .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ff9f43; transition: .4s; border-radius: 34px; }
|
| .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
|
| input:checked + .slider { background-color: #2e86de; }
|
| input:checked + .slider:before { transform: translateX(26px); }
|
|
|
| textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 1rem; resize: none; font-family: inherit; }
|
| button { width: 100%; padding: 12px; background: #333; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: 0.2s; }
|
| button:hover { background: #000; }
|
|
|
| #output { margin-top: 1.5rem; padding: 1rem; background: #e9ecef; border-radius: 8px; font-style: italic; min-height: 50px; display: none; }
|
| .badge { font-size: 0.8rem; padding: 2px 6px; border-radius: 4px; margin-left: 5px; }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <div class="card">
|
| <h2>AI Tone Slider</h2>
|
|
|
| <div class="slider-container">
|
| <span style="color: #ff9f43">Casual</span>
|
| <label class="switch">
|
| <input type="checkbox" id="toneSlider">
|
| <span class="slider"></span>
|
| </label>
|
| <span style="color: #2e86de">Formal</span>
|
| </div>
|
|
|
| <textarea id="inputText" placeholder="Type something rude here... (e.g., Your code is garbage)"></textarea>
|
|
|
| <button onclick="transform()">Fix My Tone ✨</button>
|
|
|
| <div id="output"></div>
|
| </div>
|
|
|
| <script>
|
| async function transform() {
|
| const text = document.getElementById('inputText').value;
|
| const isFormal = document.getElementById('toneSlider').checked;
|
| const style = isFormal ? 'formal' : 'casual';
|
| const outputDiv = document.getElementById('output');
|
| const btn = document.querySelector('button');
|
|
|
| if (!text) return;
|
|
|
|
|
| btn.innerText = "Processing...";
|
| btn.disabled = true;
|
| outputDiv.style.display = 'none';
|
|
|
| try {
|
| const response = await fetch('http://127.0.0.1:8000/transform', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ text: text, style: style })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| outputDiv.innerHTML = `<strong>Result:</strong> ${data.transformed} <br><br> <span class="badge" style="background:#ddd">⚡ ${data.latency_ms}ms</span>`;
|
| outputDiv.style.display = 'block';
|
| } catch (error) {
|
| alert("Error connecting to server. Is it running?");
|
| }
|
|
|
| btn.innerText = "Fix My Tone ✨";
|
| btn.disabled = false;
|
| }
|
| </script>
|
|
|
| </body>
|
| </html> |
