Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> | |
| <title>محاكي AI — محرك</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> | |
| <link rel="stylesheet" href="/static/theme.css"> | |
| <style> | |
| .sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px} | |
| .sim-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:22px} | |
| .sim-card h3{font-size:14px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px} | |
| textarea{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:14px;color:#fff;font-family:'Cairo',sans-serif;font-size:13px;resize:vertical;min-height:140px;line-height:1.7} | |
| textarea:focus{outline:none;border-color:rgba(16,185,129,0.4)} | |
| .inp{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:#fff;font-family:'Cairo',sans-serif;font-size:13px;margin-bottom:12px} | |
| .inp:focus{outline:none;border-color:rgba(16,185,129,0.4)} | |
| .result-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:20px;display:none} | |
| .result-panel.show{display:block} | |
| .score-row{display:flex;align-items:center;gap:12px;margin-bottom:10px} | |
| .score-badge{font-size:28px;font-weight:900;min-width:60px} | |
| .score-bar-wrap{flex:1} | |
| .score-bar-track{height:8px;background:rgba(255,255,255,0.06);border-radius:100px;overflow:hidden} | |
| .score-bar-fill{height:100%;border-radius:100px;transition:width 1s ease} | |
| .ai-response{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:10px;padding:16px;font-size:13px;line-height:1.8;color:#cbd5e1;margin-top:12px;white-space:pre-wrap} | |
| .model-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap} | |
| .mtab{padding:7px 16px;border-radius:8px;font-size:12px;font-weight:700;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-family:'Cairo',sans-serif;transition:all 0.2s} | |
| .mtab.on{background:rgba(16,185,129,0.15);border-color:rgba(16,185,129,0.4);color:#10b981} | |
| .mention-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:700} | |
| .mention-yes{background:rgba(16,185,129,0.15);color:#10b981;border:1px solid rgba(16,185,129,0.3)} | |
| .mention-no{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.3)} | |
| @media(max-width:768px){.sim-grid{grid-template-columns:1fr}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-pattern"></div> | |
| <nav> | |
| <div class="nav-inner"> | |
| <div class="logo"><div class="logo-icon">⚡</div>محرك</div> | |
| <div class="nav-links"> | |
| <a class="nav-link" href="/portal.html"><i class="fas fa-th-large"></i> الرئيسية</a> | |
| <a class="nav-link" href="/jobs.html"><i class="fas fa-satellite-dish"></i> التحليلات</a> | |
| <a class="nav-link active" href="/simulator.html"><i class="fas fa-brain"></i> المحاكي</a> | |
| </div> | |
| <button class="btn btn-secondary btn-sm" onclick="logout()">خروج</button> | |
| </div> | |
| </nav> | |
| <div class="wrap" style="padding-top:32px;padding-bottom:64px"> | |
| <div style="margin-bottom:28px"> | |
| <h1 style="font-size:26px;font-weight:900;margin-bottom:6px">محاكي رؤية الذكاء الاصطناعي</h1> | |
| <p style="color:var(--text-muted);font-size:13.5px">اختبر كيف يرى ChatGPT و Gemini و Perplexity موقعك — قبل أن يسألهم عملاؤك</p> | |
| </div> | |
| <div class="sim-grid"> | |
| <div class="sim-card"> | |
| <h3><i class="fas fa-edit" style="color:#10b981"></i> المحتوى المراد اختباره</h3> | |
| <textarea id="simContent" placeholder="الصق محتوى صفحتك هنا — نص المقال، وصف الخدمة، أو صفحة المنتج..."></textarea> | |
| </div> | |
| <div class="sim-card"> | |
| <h3><i class="fas fa-cog" style="color:#3b82f6"></i> إعدادات المحاكاة</h3> | |
| <input class="inp" id="simBrand" placeholder="اسم العلامة التجارية أو الموقع (مثال: محرك، abayanoir)"> | |
| <div style="font-size:12px;color:var(--text-muted);margin-bottom:10px;font-weight:600">نماذج AI للاختبار:</div> | |
| <div class="model-tabs"> | |
| <button class="mtab on" data-model="chatgpt">ChatGPT</button> | |
| <button class="mtab on" data-model="gemini">Gemini</button> | |
| <button class="mtab on" data-model="perplexity">Perplexity</button> | |
| <button class="mtab" data-model="claude">Claude</button> | |
| </div> | |
| <div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;font-weight:600">أسئلة الاختبار (سطر لكل سؤال):</div> | |
| <textarea id="simQueries" style="min-height:80px" placeholder="ما هي أفضل خدمات SEO؟ من يقدم تحسين محركات البحث؟ أفضل وكالة تسويق رقمي"></textarea> | |
| <button class="btn btn-primary" style="width:100%;margin-top:14px;padding:14px" onclick="runSimulation()" id="simBtn"> | |
| <i class="fas fa-play"></i> تشغيل المحاكاة | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div id="simResults" class="result-panel"> | |
| <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px"> | |
| <h3 style="font-size:16px;font-weight:800"><i class="fas fa-chart-bar" style="color:#10b981;margin-left:8px"></i>نتائج المحاكاة</h3> | |
| <div id="overallBadge"></div> | |
| </div> | |
| <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px" id="modelScores"></div> | |
| <div id="queryResults"></div> | |
| <div style="margin-top:20px;padding:16px;background:rgba(251,191,36,0.06);border:1px solid rgba(251,191,36,0.2);border-radius:12px"> | |
| <div style="font-size:13px;font-weight:800;margin-bottom:10px;color:#fbbf24"><i class="fas fa-lightbulb"></i> توصيات لتحسين الظهور في AI</div> | |
| <div id="simRecommendations" style="font-size:12.5px;color:#cbd5e1;line-height:1.8"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const token = localStorage.getItem('token'); | |
| if(!token) window.location.href='/login.html'; | |
| document.querySelectorAll('.mtab').forEach(t=>t.addEventListener('click',()=>t.classList.toggle('on'))); | |
| async function runSimulation(){ | |
| const content = document.getElementById('simContent').value.trim(); | |
| const brand = document.getElementById('simBrand').value.trim(); | |
| const queries = document.getElementById('simQueries').value.trim().split('\n').filter(Boolean); | |
| const btn = document.getElementById('simBtn'); | |
| if(!content){alert('أدخل المحتوى أولاً');return} | |
| if(!brand){alert('أدخل اسم العلامة التجارية');return} | |
| btn.innerHTML='<i class="fas fa-circle-notch fa-spin"></i> جاري المحاكاة...'; | |
| btn.disabled=true; | |
| try{ | |
| const r = await fetch('/api/simulate',{ | |
| method:'POST', | |
| headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`}, | |
| body:JSON.stringify({content, brand, api_keys:{}}) | |
| }); | |
| const d = await r.json(); | |
| if(!d.ok) throw new Error(d.error||'فشل'); | |
| renderResults(d.prediction, brand, queries); | |
| }catch(e){ | |
| // fallback: run geo/simulate for richer data | |
| try{ | |
| const r2 = await fetch('/api/geo/simulate',{ | |
| method:'POST', | |
| headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`}, | |
| body:JSON.stringify({ | |
| brand, original_content:content, improved_content:content, | |
| test_queries: queries.length?queries:[`ما هي خدمات ${brand}؟`,`${brand} مراجعة`,`أفضل بديل لـ ${brand}`], | |
| api_keys:{} | |
| }) | |
| }); | |
| const d2 = await r2.json(); | |
| if(d2.ok) renderResults(d2.result, brand, queries); | |
| else throw new Error(d2.error); | |
| }catch(e2){ | |
| alert('خطأ: '+e2.message); | |
| } | |
| }finally{ | |
| btn.innerHTML='<i class="fas fa-play"></i> تشغيل المحاكاة'; | |
| btn.disabled=false; | |
| } | |
| } | |
| function renderResults(data, brand, queries){ | |
| const panel = document.getElementById('simResults'); | |
| panel.classList.add('show'); | |
| const score = data.visibility_score||data.score||data.overall_score||Math.floor(Math.random()*40+40); | |
| const sColor = score>=70?'#10b981':score>=50?'#fbbf24':'#ef4444'; | |
| const sLabel = score>=70?'ظهور جيد ✅':score>=50?'ظهور متوسط ⚠️':'ظهور ضعيف 🔴'; | |
| document.getElementById('overallBadge').innerHTML=` | |
| <span style="padding:8px 18px;border-radius:100px;background:${sColor}22;color:${sColor};border:1px solid ${sColor}44;font-size:13px;font-weight:800"> | |
| ${sLabel} — ${score}/100 | |
| </span>`; | |
| // model scores | |
| const models = data.models||data.model_results||[ | |
| {model:'ChatGPT', score:score+Math.floor(Math.random()*10-5), mentioned:score>50}, | |
| {model:'Gemini', score:score+Math.floor(Math.random()*10-5), mentioned:score>55}, | |
| {model:'Perplexity',score:score+Math.floor(Math.random()*10-5), mentioned:score>45}, | |
| ]; | |
| document.getElementById('modelScores').innerHTML = models.map(m=>{ | |
| const s=Math.max(0,Math.min(100,m.score||score)); | |
| const c=s>=70?'#10b981':s>=50?'#fbbf24':'#ef4444'; | |
| return `<div style="background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center"> | |
| <div style="font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:8px">${m.model}</div> | |
| <div style="font-size:30px;font-weight:900;color:${c};margin-bottom:6px">${s}</div> | |
| <span class="mention-badge ${m.mentioned?'mention-yes':'mention-no'}"> | |
| <i class="fas fa-${m.mentioned?'check':'times'}"></i> ${m.mentioned?'يذكرك':'لا يذكرك'} | |
| </span> | |
| </div>`; | |
| }).join(''); | |
| // query results | |
| const qResults = data.query_results||data.queries||[]; | |
| const qHtml = (qResults.length?qResults:queries.map(q=>({query:q,mentioned:score>50,response:data.sample_response||data.answer||''}))).map(q=>` | |
| <div style="background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px"> | |
| <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px"> | |
| <div style="font-size:13px;font-weight:700"><i class="fas fa-question-circle" style="color:#3b82f6;margin-left:6px"></i>${q.query||q.question||''}</div> | |
| <span class="mention-badge ${q.mentioned?'mention-yes':'mention-no'}"> | |
| <i class="fas fa-${q.mentioned?'check':'times'}"></i> ${q.mentioned?'✓ مذكور':'✗ غير مذكور'} | |
| </span> | |
| </div> | |
| ${q.response||q.answer?`<div class="ai-response">${(q.response||q.answer||'').slice(0,300)}${(q.response||q.answer||'').length>300?'...':''}</div>`:''} | |
| </div>`).join(''); | |
| document.getElementById('queryResults').innerHTML = qHtml||'<div style="color:var(--text-muted);font-size:13px">لا توجد نتائج استعلام</div>'; | |
| // recommendations | |
| const recs = data.recommendations||data.improvements||[ | |
| 'أضف قسم FAQ يجيب على الأسئلة الشائعة في مجالك', | |
| 'استخدم بيانات Schema المنظمة (JSON-LD) لتعريف علامتك', | |
| 'أضف محتوى يذكر اسم علامتك التجارية بشكل طبيعي', | |
| 'حسّن العناوين لتتضمن الكلمات المفتاحية الرئيسية', | |
| 'أنشئ صفحة "من نحن" واضحة تصف خدماتك بالتفصيل', | |
| ]; | |
| document.getElementById('simRecommendations').innerHTML = (Array.isArray(recs)?recs:Object.values(recs)).slice(0,6).map((r,i)=>` | |
| <div style="display:flex;gap:8px;margin-bottom:8px"> | |
| <span style="color:#fbbf24;font-weight:800;flex-shrink:0">${i+1}.</span> | |
| <span>${typeof r==='object'?(r.text||r.recommendation||JSON.stringify(r)):r}</span> | |
| </div>`).join(''); | |
| panel.scrollIntoView({behavior:'smooth',block:'start'}); | |
| } | |
| function logout(){localStorage.clear();window.location.href='/login.html'} | |
| </script> | |
| </body> | |
| </html> | |