NeuralNodeAI/sentic-ai-backend
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>AI Content Analyzer</title>7 <style>8 /* إعدادات التصميم العام - واجهة داكنة احترافية */9 :root { --accent: #3b82f6; --bg-dark: #111827; --card-bg: #1f2937; --text-light: #f3f4f6; }10 body { font-family: 'Inter', sans-serif; background-color: var(--bg-dark); color: var(--text-light); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }11 .container { background: var(--card-bg); padding: 30px; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); width: 100%; max-width: 600px; text-align: center; border: 1px solid #374151; }12 h1 { margin-bottom: 20px; font-weight: 700; color: var(--accent); }13 textarea { width: 100%; height: 160px; background: #374151; border: 1px solid #4b5563; border-radius: 12px; padding: 15px; color: white; font-size: 16px; margin-bottom: 20px; box-sizing: border-box; outline: none; }14 textarea:focus { border-color: var(--accent); }15 button { background: var(--accent); color: white; border: none; padding: 15px; border-radius: 10px; cursor: pointer; font-size: 18px; font-weight: 600; width: 100%; transition: 0.3s; }16 button:hover { background: #2563eb; }17 button:disabled { background: #4b5563; cursor: not-allowed; }18 #output { margin-top: 25px; padding: 20px; border-radius: 10px; background: #111827; border-left: 5px solid var(--accent); display: none; text-align: left; line-height: 1.6; }19 .spinner { display: none; width: 30px; height: 30px; border: 4px solid rgba(255,255,255,0.1); border-top: 4px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 15px auto; }20 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }21 </style>22</head>23<body>24 25<div class="container">26 <h1>AI Content Insights 🤖</h1>27 <textarea id="userInput" placeholder="Paste your article or text here for deep analysis..."></textarea>28 <button id="btnAnalyze" onclick="startAnalysis()">Analyze Content</button>29 <div id="loader" class="spinner"></div>30 <div id="output"></div>31</div>32 33<script>34 async function startAnalysis() {35 const textValue = document.getElementById('userInput').value;36 const outputDiv = document.getElementById('output');37 const loader = document.getElementById('loader');38 const btn = document.getElementById('btnAnalyze');39 40 if (!textValue.trim()) {41 alert("Please enter some text first.");42 return;43 }44 45 // تفعيل وضع التحميل46 btn.disabled = true;47 loader.style.display = 'block';48 outputDiv.style.display = 'none';49 50 try {51 // التعديل: نستخدم '/analyze' مباشرة لإرسال الطلب لنفس السيرفر52 const response = await fetch('/analyze', {53 method: 'POST',54 headers: { 'Content-Type': 'application/json' },55 body: JSON.stringify({ text: textValue })56 });57 58 const data = await response.json();59 60 if (data.error) {61 outputDiv.innerHTML = `<b style="color: #ef4444;">Error:</b> ${data.error}`;62 } else {63 // عرض النتيجة النهائية من السيرفر64 outputDiv.innerHTML = `<b style="color: #3b82f6;">AI Report:</b> <br> ${data.result}`;65 }66 } catch (error) {67 outputDiv.innerHTML = `<b style="color: #ef4444;">Connection Failed:</b> Could not reach the AI server. Check your internet or server logs.`;68 } finally {69 // إنهاء وضع التحميل70 loader.style.display = 'none';71 outputDiv.style.display = 'block';72 btn.disabled = false;73 }74 }75</script>76 77</body>78</html>79