NeuralNodeAI/AI-TransSummarizer
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>AI TransSummarizer</title>6 <style>7 :root { --accent: #8b5cf6; --bg: #0f172a; --text: #f8fafc; }8 body { font-family: sans-serif; background: var(--bg); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }9 .card { background: #1e293b; padding: 30px; border-radius: 15px; width: 90%; max-width: 500px; text-align: center; border: 1px solid #334155; }10 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; }11 .opts { margin-bottom: 20px; display: flex; justify-content: space-around; }12 button { width: 100%; padding: 12px; background: var(--accent); border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; }13 #res { margin-top: 20px; padding: 15px; background: #0f172a; border-left: 4px solid var(--accent); display: none; text-align: left; }14 </style>15</head>16<body>17 <div class="card">18 <h2>AI TransSummarizer 🤖</h2>19 <textarea id="txt" placeholder="Enter your English text..."></textarea>20 <div class="opts">21 <label><input type="checkbox" id="s"> Summarize</label>22 <label><input type="checkbox" id="t"> Translate</label>23 </div>24 <button onclick="run()">Process</button>25 <div id="res"><strong>Result:</strong><p id="out"></p></div>26 </div>27 <script>28 async function run() {29 const txt = document.getElementById('txt').value;30 if(!txt) return alert("Empty text!");31 let final = txt;32 if(document.getElementById('s').checked) final += " summarize";33 if(document.getElementById('t').checked) final += " ترجم";34 35 const btn = document.querySelector('button');36 btn.disabled = true; btn.innerText = "Processing...";37 38 try {39 const r = await fetch('/process', {40 method: 'POST',41 headers: {'Content-Type': 'application/json'},42 body: JSON.stringify({text: final})43 });44 const d = await r.json();45 document.getElementById('out').innerText = d;46 document.getElementById('res').style.display = 'block';47 } catch(e) { alert("Error!"); }48 btn.disabled = false; btn.innerText = "Process";49 }50 </script>51</body>52</html>