Hugging Face's logo

Spaces:
Rayan545454
/
ccccc
Running

App Files Community
ccccc
File size: 10,192 Bytes
931adc9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4023a9f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!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 src="https://unpkg.com/feather-icons"></script>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
    body {
      font-family: 'Tajawal', sans-serif;
      background-image: linear-gradient(to bottom right, #f8fafc, #f0fdf4);
    }
    .gradient-bg {
      background: linear-gradient(135deg, #046a38 0%, #0b5 100%);
    }
    .chat-message {
      animation: fadeIn 0.3s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-2xl mx-auto" dir="rtl">
    <!-- Header -->
    <div class="gradient-bg text-white rounded-t-xl p-6 shadow-lg">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-xl sm:text-2xl font-bold">روبوت اليوم الوطني السعودي</h1>
          <p class="mt-2 opacity-90 text-sm sm:text-base">اسأل عن تاريخ المملكة، مآثر الملوك، وقصة التوحيد</p>
        </div>
        <div class="bg-white/20 p-3 rounded-full">
          <i data-feather="message-circle" class="text-white w-6 h-6"></i>
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
      <!-- Quick Questions Chips -->
      <div class="p-6 border-b border-gray-100">
        <h2 class="text-gray-700 font-medium mb-3">أسئلة شائعة</h2>
        <div class="flex flex-wrap gap-2">
          <button onclick="askQuickQuestion('كم سنة المملكة السعودية؟')" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium transition-all duration-200">
            كم سنة المملكة؟
          </button>
          <button onclick="askQuickQuestion('من أول ملك للمملكة؟')" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium transition-all duration-200">
            من أول ملك؟
          </button>
          <button onclick="askQuickQuestion('متى تم توحيد المملكة؟')" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium transition-all duration-200">
            متى تم التوحيد؟
          </button>
          <button onclick="askQuickQuestion('ما شعار اليوم الوطني؟')" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium transition-all duration-200">
            ما الشعار؟
          </button>
        </div>
      </div>

      <!-- Chat Container -->
      <div id="chatContainer" class="h-80 sm:h-96 overflow-y-auto p-4 bg-gray-50">
        <div id="chatMessages" class="space-y-3">
          <div class="chat-message flex justify-start">
            <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs sm:max-w-md border border-gray-100">
              <p class="text-sm text-emerald-700 font-medium">مرحباً! أنا روبوت اليوم الوطني السعودي. يمكنك سؤالي عن تاريخ المملكة وملوكها.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Input Area -->
      <div class="p-4 border-t border-gray-100 bg-white">
        <div class="flex gap-2">
          <input id="questionInput" type="text" placeholder="اكتب سؤالك هنا..." 
                 class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200">
          <button onclick="askQuestion()" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all duration-200 flex items-center gap-2">
            <span>إرسال</span>
            <i data-feather="send" class="w-4 h-4"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="mt-6 text-center text-gray-500 text-sm">
      <p>بمناسبة الذكرى الـ93 ليومنا الوطني المجيد 🇸🇦</p>
    </div>
  </div>

  <script>
    feather.replace();
    
    // Knowledge Base for Saudi National Day
    const knowledgeBase = [
      {
        patterns: [
          "كم سنه المملكه",
          "عمر المملكه",
          "كم عمر السعوديه",
          "كم سنه السعوديه",
          "كم سنه المملكة السعودية"
        ],
        answer: "تحتفل المملكة العربية السعودية هذا العام بالذكرى الـ93 لتوحيدها على يد الملك المؤسس عبدالعزيز آل سعود رحمه الله."
      },
      {
        patterns: [
          "صاحب اول الملك",
          "اول ملك",
          "من اول ملك",
          "من صاحب اول الملك",
          "صاحب اول المملك"
        ],
        answer: "الملك المؤسس عبدالعزيز بن عبدالرحمن آل سعود رحمه الله هو أول ملك للمملكة العربية السعودية الموحدة."
      },
      {
        patterns: [
          "متى التاريخ التوحيد المملكه",
          "متى تاريخ توحيد المملكه",
          "في اي سنه تم توحيد المملكه",
          "متى التوحيد",
          "تاريخ التوحيد",
          "متى التاريخ التوحيد المملكة"
        ],
        answer: "تم توحيد المملكة العربية السعودية بتاريخ 23 سبتمبر 1932م الموافق 21 جمادى الأولى 1351هـ."
      },
      {
        patterns: [
          "شعار اليوم الوطني",
          "ما شعار اليوم الوطني",
          "شعار السعودية"
        ],
        answer: "شعار اليوم الوطني السعودي هو سيفان متقاطعان مع نخلة في المنتصف، ويرمز السيفان إلى العدل والقوة، بينما ترمز النخلة للخير والازدهار."
      }
    ];
    
    // Arabic text normalization
    function normalizeArabic(text) {
      return text.toLowerCase()
        .replace(/[\u064B-\u0652]/g, "")
        .replace(/[\u0640]/g, "")
        .replace(/[إأآٱ]/g, "ا")
        .replace(/ى/g, "ي")
        .replace(/ؤ/g, "و")
        .replace(/ئ/g, "ي")
        .replace(/ة/g, "ه")
        .trim();
    }

    // Find answer in knowledge base
    function findAnswer(question) {
      const normalizedQuestion = normalizeArabic(question);
      
      for (const item of knowledgeBase) {
        for (const pattern of item.patterns) {
          if (normalizedQuestion.includes(normalizeArabic(pattern)) || 
              normalizeArabic(pattern).includes(normalizedQuestion)) {
            return item.answer;
          }
        }
      }
      
      // Fallback for similar questions
      if (normalizedQuestion.match(/(عمر|سنه).*(مملك|سعوديه)/)) {
        return "تحتفل المملكة هذا العام بالذكرى الـ93 لتوحيدها، ويصادف يوم 23 سبتمبر.";
      }
      if (normalizedQuestion.match(/(اول|اولى).*(ملك|الملك)/)) {
        return "الملك عبدالعزيز بن عبدالرحمن آل سعود رحمه الله هو مؤسس المملكة وأول ملك لها.";
      }
      if (normalizedQuestion.match(/(تاريخ|متى).*(توحيد|تأسيس|تاسيس)/)) {
        return "تم توحيد المملكة في 23 سبتمبر 1932م الموافق 21 جمادى الأولى 1351هـ.";
      }
      return "عذراً، لم أفهم سؤالك. يمكنك أن تسأل عن:<br>- كم سنة المملكة؟<br>- من أول ملك؟<br>- متى تم التوحيد؟<br>- ما شعار اليوم الوطني؟";
    }

    // Add message to chat
    function addMessage(text, sender) {
      const chatMessages = document.getElementById('chatMessages');
      const messageElement = document.createElement('div');
      
      if (sender === 'user') {
        messageElement.className = 'chat-message flex justify-end';
        messageElement.innerHTML = `
          <div class="bg-emerald-100 p-3 rounded-lg shadow-sm max-w-xs sm:max-w-md">
            <p class="text-sm text-gray-800">${text}</p>
          </div>
        `;
      } else {
        messageElement.className = 'chat-message flex justify-start';
        messageElement.innerHTML = `
          <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs sm:max-w-md border border-gray-100">
            <p class="text-sm text-gray-700">${text}</p>
          </div>
        `;
      }
      
      chatMessages.appendChild(messageElement);
      document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight;
    }

    // Ask question
    function askQuestion() {
      const input = document.getElementById('questionInput');
      const question = input.value.trim();
      
      if (question) {
        addMessage(question, 'user');
        input.value = '';
        
        setTimeout(() => {
          const answer = findAnswer(question);
          addMessage(answer, 'bot');
        }, 500);
      }
    }

    // Quick question button
    function askQuickQuestion(question) {
      document.getElementById('questionInput').value = question;
      askQuestion();
    }

    // Handle Enter key
    document.getElementById('questionInput').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        askQuestion();
      }
    });
  </script>
</body>
</html>