|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
|
|
<title>FECUOY AI | المحرك الاحترافي v2.2</title> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css"> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> |
|
|
|
|
|
<style> |
|
|
:root { |
|
|
--bg-dark: #1a1b1e; |
|
|
--bg-sidebar: #111214; |
|
|
--primary: #10a37f; |
|
|
--text-main: #e1e1e6; |
|
|
--input-bg: #2a2b32; |
|
|
--border-color: rgba(255,255,255,0.08); |
|
|
--assistant-msg: rgba(255,255,255,0.04); |
|
|
} |
|
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
body { |
|
|
font-family: 'IBM Plex Sans Arabic', sans-serif; |
|
|
background-color: var(--bg-dark); |
|
|
color: var(--text-main); |
|
|
height: 100dvh; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.app-layout { display: flex; width: 100%; height: 100%; position: relative; } |
|
|
|
|
|
|
|
|
.sidebar { |
|
|
width: 280px; background: var(--bg-sidebar); |
|
|
border-left: 1px solid var(--border-color); |
|
|
display: flex; flex-direction: column; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { position: absolute; right: -280px; height: 100%; z-index: 1000; } |
|
|
.sidebar.active { right: 0; } |
|
|
} |
|
|
|
|
|
.main-content { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; } |
|
|
|
|
|
header { |
|
|
height: 60px; padding: 0 20px; |
|
|
display: flex; align-items: center; justify-content: space-between; |
|
|
border-bottom: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
#chatBox { flex: 1; overflow-y: auto; padding: 30px 15%; scroll-behavior: smooth; } |
|
|
@media (max-width: 1024px) { #chatBox { padding: 20px 5%; } } |
|
|
|
|
|
.msg-row { display: flex; margin-bottom: 25px; animation: fadeIn 0.3s ease; } |
|
|
.msg { max-width: 85%; padding: 15px 20px; border-radius: 12px; line-height: 1.7; font-size: 15.5px; word-wrap: break-word; } |
|
|
.user { background: var(--primary); color: white; margin-right: auto; } |
|
|
.assistant { background: var(--assistant-msg); border: 1px solid var(--border-color); margin-left: auto; } |
|
|
|
|
|
|
|
|
.controls-bar { |
|
|
padding: 10px 15%; |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
background: rgba(0,0,0,0.2); |
|
|
border-top: 1px solid var(--border-color); |
|
|
font-size: 13px; |
|
|
align-items: center; |
|
|
} |
|
|
@media (max-width: 1024px) { .controls-bar { padding: 10px 5%; flex-wrap: wrap; } } |
|
|
|
|
|
.control-group { display: flex; align-items: center; gap: 8px; color: #aaa; } |
|
|
select { background: var(--input-bg); color: white; border: 1px solid var(--border-color); padding: 4px 8px; border-radius: 5px; outline: none; } |
|
|
input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; } |
|
|
|
|
|
.input-area { padding: 10px 15% 30px; } |
|
|
@media (max-width: 1024px) { .input-area { padding: 10px 5% 20px; } } |
|
|
|
|
|
.input-wrapper { |
|
|
background: var(--input-bg); border: 1px solid var(--border-color); |
|
|
border-radius: 16px; padding: 10px 15px; |
|
|
display: flex; align-items: flex-end; gap: 10px; |
|
|
} |
|
|
|
|
|
textarea { flex: 1; background: none; border: none; color: white; resize: none; font-size: 16px; outline: none; max-height: 200px; } |
|
|
.action-btn { background: none; border: none; color: #8e8ea0; cursor: pointer; font-size: 20px; } |
|
|
.send-btn { color: var(--primary); } |
|
|
|
|
|
pre { background: #000 !important; padding: 15px; border-radius: 8px; margin: 10px 0; overflow-x: auto; direction: ltr; } |
|
|
code { font-family: monospace; } |
|
|
#fileInput { display: none; } |
|
|
.upload-success { color: var(--primary) !important; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="app-layout"> |
|
|
<aside class="sidebar" id="sidebar"> |
|
|
<button style="margin:15px; padding:12px; background:var(--primary); border:none; color:white; border-radius:8px; cursor:pointer;" onclick="location.reload()"> |
|
|
<i class="fas fa-plus"></i> محادثة جديدة |
|
|
</button> |
|
|
<div style="flex:1"></div> |
|
|
<div style="padding: 20px; border-top: 1px solid var(--border-color); font-size: 12px; color: #444;"> |
|
|
FECUOY AI v2.2 - Multi-Model Engine |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
<main class="main-content"> |
|
|
<header> |
|
|
<button class="action-btn" onclick="document.getElementById('sidebar').classList.toggle('active')"><i class="fas fa-bars"></i></button> |
|
|
<div style="font-weight:600;">FECUOY <span style="color:var(--primary)">AI</span></div> |
|
|
<div style="width:10px; height:10px; background:var(--primary); border-radius:50%;"></div> |
|
|
</header> |
|
|
|
|
|
<div id="chatBox"> |
|
|
<div class="msg-row"> |
|
|
<div class="msg assistant">مرحباً! يمكنك الآن التبديل بين النماذج وتفعيل أدوات البحث المباشر من الأسفل.</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="controls-bar"> |
|
|
<div class="control-group"> |
|
|
<span>النموذج:</span> |
|
|
<select id="modelSelect"> |
|
|
<option value="qwen_abliterated">Qwen 2.5 72B (محرر)</option> |
|
|
<option value="kimi_k2">Kimi-K2 (رسمي)</option> |
|
|
<option value="internvl_vision">InternVL2 (تحليل صور)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="control-group"> |
|
|
<input type="checkbox" id="toolSearch"> |
|
|
<label for="toolSearch">بحث ويب 🌐</label> |
|
|
</div> |
|
|
<div class="control-group"> |
|
|
<input type="checkbox" id="toolURL"> |
|
|
<label for="toolURL">تحليل روابط 🔗</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-area"> |
|
|
<div class="input-wrapper"> |
|
|
<label for="fileInput" class="action-btn" id="attachLabel"><i class="fas fa-paperclip"></i></label> |
|
|
<input type="file" id="fileInput" onchange="handleFileUpload(this)"> |
|
|
<textarea id="userInput" placeholder="اسأل أي شيء..." rows="1" oninput="this.style.height='auto';this.style.height=this.scrollHeight+'px'"></textarea> |
|
|
<button class="action-btn send-btn" id="sendBtn" onclick="send()"><i class="fas fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let currentFileId = null; |
|
|
|
|
|
async function handleFileUpload(input) { |
|
|
if (!input.files[0]) return; |
|
|
const icon = document.querySelector('#attachLabel i'); |
|
|
icon.className = "fas fa-spinner fa-spin"; |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('file', input.files[0]); |
|
|
|
|
|
try { |
|
|
const res = await fetch('/api/upload', { method: 'POST', body: formData }); |
|
|
const data = await res.json(); |
|
|
if (data.file_id) { |
|
|
currentFileId = data.file_id; |
|
|
icon.className = "fas fa-check-circle upload-success"; |
|
|
} |
|
|
} catch (e) { alert("خطأ في الرفع"); icon.className = "fas fa-paperclip"; } |
|
|
} |
|
|
|
|
|
async function send() { |
|
|
const input = document.getElementById('userInput'); |
|
|
const text = input.value.trim(); |
|
|
if (!text && !currentFileId) return; |
|
|
|
|
|
const selectedModel = document.getElementById('modelSelect').value; |
|
|
const tools = []; |
|
|
if(document.getElementById('toolSearch').checked) tools.push("web_search"); |
|
|
if(document.getElementById('toolURL').checked) tools.push("url_reader"); |
|
|
|
|
|
appendMsg('user', text); |
|
|
input.value = ''; |
|
|
input.style.height = 'auto'; |
|
|
|
|
|
const assistantMsg = appendMsg('assistant', 'جاري المعالجة...'); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/chat/stream', { |
|
|
method: 'POST', |
|
|
headers: {'Content-Type': 'application/json'}, |
|
|
body: JSON.stringify({ |
|
|
message: text, |
|
|
model: selectedModel, |
|
|
tools: tools, |
|
|
file_id: currentFileId |
|
|
}) |
|
|
}); |
|
|
|
|
|
const reader = response.body.getReader(); |
|
|
const decoder = new TextDecoder(); |
|
|
let fullText = ""; |
|
|
|
|
|
while (true) { |
|
|
const { done, value } = await reader.read(); |
|
|
if (done) break; |
|
|
|
|
|
const chunk = decoder.decode(value); |
|
|
const lines = chunk.split('\n'); |
|
|
for (const line of lines) { |
|
|
if (line.startsWith('data: ')) { |
|
|
const data = JSON.parse(line.substring(6)); |
|
|
if (data.token) { |
|
|
fullText += data.token; |
|
|
assistantMsg.innerHTML = marked.parse(fullText); |
|
|
assistantMsg.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el)); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} catch (e) { assistantMsg.innerText = "⚠️ خطأ في الاتصال."; } |
|
|
} |
|
|
|
|
|
function appendMsg(role, content) { |
|
|
const box = document.getElementById('chatBox'); |
|
|
const row = document.createElement('div'); |
|
|
row.className = 'msg-row'; |
|
|
const msg = document.createElement('div'); |
|
|
msg.className = `msg ${role}`; |
|
|
msg.innerHTML = content; |
|
|
row.appendChild(msg); |
|
|
box.appendChild(row); |
|
|
box.scrollTop = box.scrollHeight; |
|
|
return msg; |
|
|
} |
|
|
|
|
|
document.getElementById('userInput').addEventListener('keydown', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
