Hugging Face's logo

Spaces:
bahi-bh
/
Spctest
Running

App Files Community
bahi-bh commited on
Commit
66b0c7d
·
verified ·
1 Parent(s): 9d28b46

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +201 -0
index.html ADDED
@@ -0,0 +1,201 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>G4F Chat</title>
7
+ <style>
8
+ * { margin: 0; padding: 0; box-sizing: border-box; }
9
+
10
+ body {
11
+ font-family: 'Segoe UI', Tahoma, sans-serif;
12
+ background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
13
+ min-height: 100vh;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ }
18
+
19
+ .chat-container {
20
+ width: 500px;
21
+ background: rgba(255,255,255,0.05);
22
+ backdrop-filter: blur(20px);
23
+ border-radius: px;
24
+ border: 1px solid rgba(255,255,255,0.1);
25
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
26
+ overflow: hidden;
27
+ }
28
+
29
+ .header {
30
+ background: linear-gradient(90deg, #667eea, #764ba2);
31
+ padding: 20px;
32
+ text-align: center;
33
+ color: white;
34
+ }
35
+
36
+ .header h1 { font-size: 1.2rem; }
37
+ .header small { opacity: 0.8; font-size: 0.8rem; }
38
+
39
+ .chat-messages {
40
+ height: 40px;
41
+ overflow-y: auto;
42
+ padding: 20px;
43
+ }
44
+
45
+ .message {
46
+ margin: 10px 0;
47
+ display: flex;
48
+ }
49
+
50
+ .message.user { justify-content: flex-end; }
51
+ .message.bot { justify-content: flex-start; }
52
+
53
+ .message .bubble {
54
+ max-width: 75%;
55
+ padding: 12px 18px;
56
+ border-radius: 18px;
57
+ font-size: 0.95rem;
58
+ line-height: 1.6;
59
+ }
60
+
61
+ .message.user .bubble {
62
+ background: linear-gradient(135deg, #667eea, #764ba2);
63
+ color: white;
64
+ border-bottom-right-radius: 4px;
65
+ }
66
+
67
+ .message.bot .bubble {
68
+ background: rgba(255,255,255,0.1);
69
+ color: #e0e0e0;
70
+ border-bottom-left-radius: 4px;
71
+ }
72
+
73
+ .input-area {
74
+ display: flex;
75
+ padding: 15px;
76
+ gap: 10px;
77
+ border-top: 1px solid rgba(255,255,255,0.1);
78
+ }
79
+
80
+ #userInput {
81
+ flex: 1;
82
+ padding: 12px 20px;
83
+ border-radius: 25px;
84
+ border: 1px solid rgba(255,255,255,0.2);
85
+ background: rgba(255,255,255,0.08);
86
+ color: white;
87
+ font-size: 0.95rem;
88
+ outline: none;
89
+ }
90
+
91
+ #userInput::placeholder { color: rgba(255,255,255,0.4); }
92
+
93
+ #sendBtn {
94
+ padding: 12px 25px;
95
+ border-radius: 25px;
96
+ border: none;
97
+ background: linear-gradient(135deg, #667eea, #764ba2);
98
+ color: white;
99
+ cursor: pointer;
100
+ font-size: 1rem;
101
+ transition: transform 0.2s;
102
+ }
103
+
104
+ #sendBtn:hover { transform: scale(1.05); }
105
+ #sendBtn:disabled { opacity: 0.5; cursor: not-allowed; }
106
+
107
+ .typing { color: #667eea; font-style: italic; }
108
+ </style>
109
+ </head>
110
+ <body>
111
+
112
+ <div class="chat-container">
113
+ <div class="header">
114
+ <h1>🤖 G4F Chat</h1>
115
+ <small>AI Assistant powered by G4F</small>
116
+ </div>
117
+
118
+ <div class="chat-messages" id="chatBox">
119
+ <div class="message bot">
120
+ <div class="bubble">مرحباً! 👋 اسألني أي شي</div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="input-area">
125
+ <input type="text" id="userInput" placeholder="اكتب رسالتك هنا..."
126
+ onkeypress="if(event.key==='Enter') sendMessage()">
127
+ <button id="sendBtn" onclick="sendMessage()">إرسال</button>
128
+ </div>
129
+ </div>
130
+
131
+ <script>
132
+ // ============================================
133
+ // 🔗 غيّر هذا الرابط حسب السيرفر عندك
134
+ // ============================================
135
+ const API_URL = "https://bahi-bh-spctest.hf.space";
136
+
137
+ // تاريخ المحادثة للحفاظ على السياق
138
+ let chatHistory = [];
139
+
140
+ async function sendMessage() {
141
+ const input = document.getElementById("userInput");
142
+ const message = input.value.trim();
143
+ if (!message) return;
144
+
145
+ const sendBtn = document.getElementById("sendBtn");
146
+
147
+ // إضافة رسالة المستخدم
148
+ addMessage(message, "user");
149
+ input.value = "";
150
+ sendBtn.disabled = true;
151
+
152
+ // إظهار مؤشر الكتابة
153
+ const typingEl = addMessage("⏳ جاري التفكير...", "bot typing");
154
+
155
+ try {
156
+ const response = await fetch(API_URL, {
157
+ method: "POST",
158
+ headers: { "Content-Type": "application/json" },
159
+ body: JSON.stringify({
160
+ message: message,
161
+ model: "gpt-4o-mini",
162
+ history: chatHistory
163
+ })
164
+ });
165
+
166
+ const data = await response.json();
167
+
168
+ // حذف مؤشر الكتابة
169
+ typingEl.remove();
170
+
171
+ if (data.success) {
172
+ addMessage(data.response, "bot");
173
+
174
+ // حفظ السياق
175
+ chatHistory = data.history;
176
+ } else {
177
+ addMessage("❌ خطأ: " + data.error, "bot");
178
+ }
179
+
180
+ } catch (error) {
181
+ typingEl.remove();
182
+ addMessage("❌ فشل الاتصال بالسيرفر - تأكد إن الـ Docker شغال", "bot");
183
+ }
184
+
185
+ sendBtn.disabled = false;
186
+ input.focus();
187
+ }
188
+
189
+ function addMessage(text, type) {
190
+ const chatBox = document.getElementById("chatBox");
191
+ const div = document.createElement("div");
192
+ div.className = `message ${type}`;
193
+ div.innerHTML = `<div class="bubble">${text}</div>`;
194
+ chatBox.appendChild(div);
195
+ chatBox.scrollTop = chatBox.scrollHeight;
196
+ return div;
197
+ }
198
+ </script>
199
+
200
+ </body>
201
+ </html>