Spaces:

Rayan545454
/

zzzz

Running

App Files Files Community

Rayan545454 commited on Sep 2, 2025

Commit

5d481eb

verified ·

1 Parent(s): 5b6b7f5

import re

Browse files

import gradio as gr

# --- دالة لتطبيع النص العربي (إزالة التشكيل + توحيد الحروف) ---
def normalize_ar(text: str) -> str:
if not text:
return ""
text = text.lower()
text = re.sub(r'[\u064B-\u0652\u0640]', '', text) # إزالة الحركات + التطويل
text = re.sub(r'[إأآٱ]', 'ا', text)
text = text.replace('ى','ي').replace('ؤ','و').replace('ئ','ي').replace('ة','ه')
return text.strip()

# --- قاعدة الأسئلة والأجوبة الثابتة ---
QA = [
{
"patterns": ["كم سنه المملكه", "كم سنه المملكة السعودية", "عمر المملكه", "كم عمر السعوديه", "كم سنه السعوديه"],
"answer": "أربعة فصول."
},
{
"patterns": ["صاحب اول الملك", "اول ملك", "من اول ملك", "من صاحب اول الملك"],
"answer": "عبدالعزيز آل سعود."
},
{
"patterns": ["متى التاريخ توحيد المملكه", "متى تاريخ توحيد المملكه", "في اي سنه تم توحيد المملكه", "متى التوحيد", "تاريخ التوحيد"],
"answer": "1932."
},
{
"patterns": ["متى اليوم الوطني", "اليوم الوطني السعودي", "ماهو اليوم الوطني", "تاريخ اليوم الوطني"],
"answer": "٩٤."
}
]

# --- دالة البحث عن الجواب ---
def find_answer(question: str) -> str:
nq = normalize_ar(question)

for item in QA:
for p in item["patterns"]:
np = normalize_ar(p)
if nq == np or nq in np or np in nq:
return item["answer"]

return "لم أفهم السؤال. جرّب: «كم سنه المملكة السعودية؟» أو «صاحب أول الملك؟» أو «متى التاريخ توحيد المملكة؟» أو «متى اليوم الوطني السعودي؟»."

# --- واجهة Gradio ---
with gr.Blocks(title="سؤال وجواب – اليوم الوطني السعودي") as demo:
gr.Markdown("## 🇸🇦 روبوت سؤال وجواب عن اليوم الوطني السعودي\nاسأل أحد الأسئلة الأربعة التالية:")
gr.Markdown("1. كم سنه المملكة السعودية؟\n2. صاحب أول الملك؟\n3. متى التاريخ توحيد المملكة؟\n4. متى اليوم الوطني السعودي؟")

chat = gr.Chatbot()
msg = gr.Textbox(placeholder="اكتب سؤالك هنا...", label="سؤالك")

def respond(user_message, history):
bot_message = find_answer(user_message)
history.append((user_message, bot_message))
return history, ""

msg.submit(respond, [msg, chat], [chat, msg])

# للتشغيل محلياً: demo.launch()
# في HuggingFace Space يشتغل تلقائياً
if __name__ == "__main__":
demo.launch() - Initial Deployment

Files changed (2) hide show

README.md +7 -5
index.html +209 -18

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Zzzz
-emoji: 💻
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: zzzz
+emoji: 🐳
+colorFrom: green
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,210 @@
-<!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 lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>روبوت سؤال وجواب - اليوم الوطني السعودي</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        saudiGreen: '#245C36',
+                        saudiWhite: '#FFFFFF',
+                    },
+                    fontFamily: {
+                        arabic: ['"Noto Sans Arabic"', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .chat-bubble {
+            border-radius: 1.5rem;
+        }
+        .user-bubble {
+            border-bottom-right-radius: 0;
+        }
+        .bot-bubble {
+            border-bottom-left-radius: 0;
+        }
+        .palm-icon {
+            filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+        }
+    </style>
+</head>
+<body class="font-arabic bg-gradient-to-b from-saudiGreen to-green-900 min-h-screen text-saudiWhite">
+    <!-- Header with Saudi Flag Theme -->
+    <header class="container mx-auto px-4 py-8">
+        <div class="flex flex-col items-center justify-center" data-aos="fade-down">
+            <div class="bg-saudiWhite p-4 rounded-full shadow-xl mb-6">
+                <div class="bg-saudiGreen p-4 rounded-full text-saudiWhite flex items-center justify-center palm-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M13 2a1 1 0 1 0-2 0v7.268a2 2 0 0 1-1 1.732V2a1 1 0 1 0-2 0v9a2 2 0 0 1-1 1.732V2a1 1 0 1 0-2 0v11a4 4 0 0 0 4 4h1a4 4 0 0 0 4-4V2Z"></path>
+                    </svg>
+                </div>
+            </div>
+            <h1 class="text-3xl md:text-4xl font-bold text-center mb-2">روبوت سؤال وجواب</h1>
+            <h2 class="text-xl md:text-2xl font-medium text-center text-yellow-200">اليوم الوطني السعودي</h2>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-6 max-w-3xl">
+        <div class="bg-white/10 backdrop-blur-sm rounded-2xl shadow-lg overflow-hidden">
+            <!-- Chat Container -->
+            <div id="chat-container" class="h-96 overflow-y-auto p-4 space-y-4">
+                <!-- Welcome Message -->
+                <div data-aos="fade-up" class="flex justify-start">
+                    <div class="bg-saudiWhite/10 chat-bubble bot-bubble max-w-xs md:max-w-md p-4 text-saudiWhite">
+                        <p>مرحباً! أنا روبوت اليوم الوطني السعودي. يمكنك أن تسألني:</p>
+                        <ul class="list-disc list-inside mt-2 space-y-1">
+                            <li>كم سنه المملكة السعودية؟</li>
+                            <li>صاحب أول الملك؟</li>
+                            <li>متى التاريخ توحيد المملكة؟</li>
+                            <li>متى اليوم الوطني السعودي؟</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- Input Area -->
+            <div class="border-t border-white/20 p-4">
+                <form id="chat-form" class="flex gap-2">
+                    <input
+                        id="user-input"
+                        type="text"
+                        placeholder="اكتب سؤالك هنا..."
+                        class="flex-1 bg-white/20 backdrop-blur-sm rounded-full px-4 py-3 text-saudiWhite placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-green-300"
+                    >
+                    <button
+                        type="submit"
+                        class="bg-green-600 hover:bg-green-700 text-saudiWhite rounded-full p-3 transition-colors duration-200 flex items-center justify-center"
+                    >
+                        <i data-feather="send"></i>
+                    </button>
+                </form>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="container mx-auto px-4 py-8 text-center text-sm text-white/70">
+        <p>بمناسبة اليوم الوطني السعودي ٩٤ - 🇸🇦</p>
+    </footer>
+    <script>
+        // Initialize animations and icons
+        AOS.init({
+            duration: 800,
+            easing: 'ease-out-quad'
+        });
+        feather.replace();
+        // Chat functionality
+        const chatForm = document.getElementById('chat-form');
+        const chatContainer = document.getElementById('chat-container');
+        const userInput = document.getElementById('user-input');
+        // Question-Answer data
+        const qaData = [
+            {
+                patterns: ["كم سنه المملكه", "كم سنه المملكة السعودية", "عمر المملكه", "كم عمر السعوديه", "كم سنه السعوديه"],
+                answer: "أربعة فصول."
+            },
+            {
+                patterns: ["صاحب اول الملك", "اول ملك", "من اول ملك", "من صاحب اول الملك"],
+                answer: "الملك عبدالعزيز آل سعود رحمه الله."
+            },
+            {
+                patterns: ["متى التاريخ توحيد المملكه", "متى تاريخ توحيد المملكه", "في اي سنه تم توحيد المملكه", "متى التوحيد", "تاريخ التوحيد"],
+                answer: "تم توحيد المملكة العربية السعودية في عام ١٩٣٢م."
+            },
+            {
+                patterns: ["متى اليوم الوطني", "اليوم الوطني السعودي", "ماهو اليوم الوطني", "تاريخ اليوم الوطني"],
+                answer: "اليوم الوطني السعودي في ٢٣ سبتمبر من كل عام ويحتفل هذا العام بالذكرى ٩٤."
+            }
+        ];
+        // Normalize Arabic text
+        function normalizeAr(text) {
+            if (!text) return "";
+            text = text.toLowerCase();
+            text = text.replace(/[\u064B-\u0652\u0640]/g, ''); // Remove diacritics
+            text = text.replace(/[إأآٱ]/g, 'ا');
+            text = text.replace(/ى/g, 'ي').replace(/ؤ/g, 'و').replace(/ئ/g, 'ي').replace(/ة/g, 'ه');
+            return text.trim();
+        }
+        // Find answer
+        function findAnswer(question) {
+            const nq = normalizeAr(question);
+            for (const item of qaData) {
+                for (const p of item.patterns) {
+                    const np = normalizeAr(p);
+                    if (nq === np || nq.includes(np) || np.includes(nq)) {
+                        return item.answer;
+                    }
+                }
+            }
+            return "لم أفهم السؤال. جرّب أحد الأسئلة التالية:<br>1. كم سنه المملكة السعودية؟<br>2. صاحب أول الملك؟<br>3. متى التاريخ توحيد المملكة؟<br>4. متى اليوم الوطني السعودي؟";
+        }
+        // Add message to chat
+        function addMessage(message, isUser) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
+            const bubble = document.createElement('div');
+            bubble.className = `chat-bubble ${isUser ? 'user-bubble bg-green-600' : 'bot-bubble bg-saudiWhite/10'} max-w-xs md:max-w-md p-4 text-saudiWhite`;
+            bubble.innerHTML = message;
+            messageDiv.appendChild(bubble);
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        // Handle form submission
+        chatForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const question = userInput.value.trim();
+            if (question) {
+                addMessage(question, true);
+                userInput.value = '';
+                setTimeout(() => {
+                    const answer = findAnswer(question);
+                    addMessage(answer, false);
+                }, 600);
+            }
+        });
+        // Simple animation for chat bubbles
+        function animateChat() {
+            anime({
+                targets: '.chat-bubble',
+                scale: [0.9, 1],
+                opacity: [0, 1],
+                duration: 400,
+                easing: 'easeOutQuad',
+                delay: anime.stagger(100)
+            });
+        }
+        // Initial animation
+        setTimeout(animateChat, 500);
+    </script>
+</body>
 </html>