Hugging Face's logo

Kush26
/
Tone_formalizer

ONNX
Model card Files
xet
Community
Tone_formalizer
File size: 3,908 Bytes 
f2d35dc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<!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; }

        

        /* The Slider Toggle */

        .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; } /* Blue for Formal */

        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;



        // UI Loading State

        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>