|
|
<!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> |
