AI-TransSummarizer/index.html at main · NeuralNodeAI/AI-TransSummarizer · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI TransSummarizer</title>
    <style>
        :root { --accent: #8b5cf6; --bg: #0f172a; --text: #f8fafc; }
        body { font-family: sans-serif; background: var(--bg); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
        .card { background: #1e293b; padding: 30px; border-radius: 15px; width: 90%; max-width: 500px; text-align: center; border: 1px solid #334155; }
        textarea { width: 100%; height: 150px; background: #0f172a; border: 1px solid #334155; border-radius: 8px; color: white; padding: 10px; margin-bottom: 15px; box-sizing: border-box; }
        .opts { margin-bottom: 20px; display: flex; justify-content: space-around; }
        button { width: 100%; padding: 12px; background: var(--accent); border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; }
        #res { margin-top: 20px; padding: 15px; background: #0f172a; border-left: 4px solid var(--accent); display: none; text-align: left; }
    </style>
</head>
<body>
    <div class="card">
        <h2>AI TransSummarizer 🤖</h2>
        <textarea id="txt" placeholder="Enter your English text..."></textarea>
        <div class="opts">
            <label><input type="checkbox" id="s"> Summarize</label>
            <label><input type="checkbox" id="t"> Translate</label>
        </div>
        <button onclick="run()">Process</button>
        <div id="res"><strong>Result:</strong><p id="out"></p></div>
    </div>
    <script>
        async function run() {
            const txt = document.getElementById('txt').value;
            if(!txt) return alert("Empty text!");
            let final = txt;
            if(document.getElementById('s').checked) final += " summarize";
            if(document.getElementById('t').checked) final += " ترجم";

            const btn = document.querySelector('button');
            btn.disabled = true; btn.innerText = "Processing...";

            try {
                const r = await fetch('/process', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({text: final})
                });
                const d = await r.json();
                document.getElementById('out').innerText = d;
                document.getElementById('res').style.display = 'block';
            } catch(e) { alert("Error!"); }
            btn.disabled = false; btn.innerText = "Process";
        }
    </script>
</body>
</html>