Spaces:

AnesKAM
/

s

Running

App Files Files Community

AnesKAM commited on 28 days ago

Commit

cb1d881

verified ·

1 Parent(s): 0cbe35b

Update index.html

Browse files

Files changed (1) hide show

index.html +162 -19

index.html CHANGED Viewed

@@ -1,19 +1,162 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html data-theme="dark" dir="rtl" lang="ar">
+<head>
+    <meta charset="utf-8" />
+    <title>SurfGO Research | المختبر الذكي</title>
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
+    <style>
+        :root { --bg: #05070a; --panel: #0f172a; --accent: #3b82f6; --thinking-bg: #1e293b; --text: #f1f5f9; }
+        body { font-family: 'Tajawal', sans-serif; background: var(--bg); color: var(--text); margin: 0; overflow: hidden; }
+        .research-container { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; }
+        /* الجانب الأيمن: محادثة الذكاء الاصطناعي */
+        .ai-section { background: var(--panel); border-left: 1px solid #1e293b; display: flex; flex-direction: column; padding: 20px; }
+        .chat-box { flex-grow: 1; overflow-y: auto; padding: 10px; }
+        .message { margin-bottom: 20px; line-height: 1.6; }
+        .thinking-block {
+            font-family: 'Fira Code', monospace; font-size: 13px; background: var(--thinking-bg);
+            padding: 15px; border-radius: 10px; border-right: 4px solid var(--accent); margin: 10px 0;
+            color: #94a3b8; white-space: pre-wrap;
+        }
+        /* الجانب الأيسر: الوثائق والنتائج المقترحة */
+        .results-section { padding: 30px; overflow-y: auto; background: var(--bg); }
+        .doc-card {
+            background: #111827; border: 1px solid #1f2937; padding: 15px;
+            border-radius: 8px; margin-bottom: 15px; transition: 0.3s;
+        }
+        .doc-card:hover { transform: translateY(-3px); border-color: var(--accent); }
+        .search-input-area {
+            background: #1e293b; padding: 15px; border-radius: 12px;
+            display: flex; gap: 10px; align-items: center;
+        }
+        input { flex-grow: 1; background: transparent; border: none; color: white; outline: none; font-size: 16px; }
+        .badge { background: var(--accent); padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 5px; }
+    </style>
+</head>
+<body>
+<div class="research-container">
+    <!-- قسم التفاعل مع DeepSeek -->
+    <section class="ai-section">
+        <div style="display:flex; justify-content:space-between; align-items:center;">
+            <h2><i class="fas fa-microscope"></i> مختبر الأبحاث</h2>
+            <span id="modelStatus" style="font-size:12px; color:#10b981;">● DeepSeek V4 Flash Online</span>
+        </div>
+        <div class="chat-box" id="chatBox">
+            <div class="message ai">
+                أهلاً بك في ميزة البحث المعمق. ما هو الموضوع الذي تود تفكيكه اليوم؟ سأقوم بطرح أسئلة دقيقة لبناء استعلام بحث مثالي.
+            </div>
+        </div>
+        <div id="currentThinking" class="thinking-block" style="display:none;"></div>
+        <div class="search-input-area">
+            <input type="text" id="userInput" placeholder="اكتب موضوع البحث هنا..." />
+            <button id="sendBtn" style="background:var(--accent); border:none; color:white; padding:10px 20px; border-radius:8px; cursor:pointer;">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+    </section>
+    <!-- قسم عرض الوثائق المستخرجة -->
+    <section class="results-section" id="resultsSection">
+        <h3><i class="fas fa-file-invoice"></i> الوثائق والنتائج المبدئية</h3>
+        <p style="color:#64748b; font-size:14px;">بناءً على حوارك مع الذكاء الاصطناعي، ستظهر هنا أدق الوثائق من NASA و ASJP وغيرها.</p>
+        <div id="docsList">
+            <!-- ستظهر النتائج هنا -->
+        </div>
+    </section>
+</div>
+<script type="module">
+    import { Ollama } from "https://esm.sh/ollama/browser";
+    const ollama = new Ollama();
+    const chatBox = document.getElementById('chatBox');
+    const thinkingBlock = document.getElementById('currentThinking');
+    const userInput = document.getElementById('userInput');
+    const sendBtn = document.getElementById('sendBtn');
+    const docsList = document.getElementById('docsList');
+    sendBtn.onclick = async () => {
+        const text = userInput.value;
+        if (!text) return;
+        // إضافة رسالة المستخدم للواجهة
+        chatBox.innerHTML += `<div class="message user" style="color:var(--accent)"><strong>أنت:</strong> ${text}</div>`;
+        userInput.value = '';
+        try {
+            const stream = await ollama.chat({
+                model: 'deepseek-v4-flash', // أو deepseek-v4-flash حسب المتاح في حسابك
+                messages: [{ role: 'user', content: text }],
+                stream: true,
+            });
+            thinkingBlock.style.display = 'block';
+            thinkingBlock.innerText = '';
+            let content = '';
+            for await (const chunk of stream) {
+                if (chunk.message.thinking) {
+                    thinkingBlock.innerText += chunk.message.thinking;
+                } else if (chunk.message.content) {
+                    thinkingBlock.style.display = 'none'; // إخفاء التفكير عند بدء الرد
+                    content += chunk.message.content;
+                    // تحديث الرد في الواجهة
+                    updateAIChat(content);
+                }
+            }
+            // بعد انتهاء الحوار، نقوم بعمل webSearch آلي بناءً على ما فهمه الموديل
+            triggerAutomaticSearch(text);
+        } catch (error) {
+            console.error("Error:", error);
+        }
+    };
+    function updateAIChat(content) {
+        let lastMsg = chatBox.lastElementChild;
+        if (lastMsg.classList.contains('ai-reply')) {
+            lastMsg.innerText = content;
+        } else {
+            const div = document.createElement('div');
+            div.className = 'message ai-reply';
+            div.innerText = content;
+            chatBox.appendChild(div);
+        }
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+    async function triggerAutomaticSearch(query) {
+        docsList.innerHTML = '<p><i class="fas fa-spinner fa-spin"></i> جاري استخراج الوثائق الأكثر صلة...</p>';
+        try {
+            const searchData = await ollama.webSearch(query);
+            docsList.innerHTML = ''; // تنظيف التحميل
+            searchData.results.forEach(doc => {
+                docsList.innerHTML += `
+                    <div class="doc-card">
+                        <span class="badge">وثيقة علمية</span>
+                        <h4 style="margin:10px 0;"><a href="${doc.url}" target="_blank" style="color:white; text-decoration:none;">${doc.title}</a></h4>
+                        <p style="font-size:13px; color:#94a3b8;">${doc.content}</p>
+                    </div>
+                `;
+            });
+        } catch (e) {
+            docsList.innerHTML = '<p>تعذر جلب الوثائق حالياً، حاول مرة أخرى.</p>';
+        }
+    }
+</script>
+</body>
+</html>