Hugging Face's logo

Spaces:
osamabyc86
/
offload
Running

App Files Community
offload
File size: 2,976 Bytes 
222080b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>الدردشة مع نورا</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <style>
    #chat-box {
      height: 70vh;
      overflow-y: auto;
      border: 1px solid #ddd;
      padding: 15px;
      background-color: #fff;
    }
    .message {
      margin-bottom: 10px;
    }
    .user {
      text-align: right;
      font-weight: bold;
    }
    .noura {
      text-align: left;
      color: #0d6efd;
    }
  </style>
</head>
<body class="bg-light p-4">
  <div class="container">
    <h3 class="text-center mb-4">مرحبًا بك يا {{ username }}، تحدث مع نورا</h3>
    <div id="chat-box" class="mb-3"></div>
    <form id="chat-form" class="d-flex flex-column gap-2">
      <div class="d-flex">
        <input type="text" id="user-input" class="form-control me-2" placeholder="اكتب رسالتك..." autocomplete="off">
        <input type="file" id="file-input" class="form-control me-2" multiple>
        <button type="submit" class="btn btn-primary">إرسال</button>
      </div>
    </form>
  </div>

  <script>
    const chatBox = document.getElementById("chat-box");
    const chatForm = document.getElementById("chat-form");
    const userInput = document.getElementById("user-input");
    const fileInput = document.getElementById("file-input");
    const sendButton = chatForm.querySelector("button");

    chatForm.addEventListener("submit", async (e) => {
      e.preventDefault();
      const message = userInput.value.trim();
      const files = fileInput.files;

      if (!message && files.length === 0) return;

      if (message) {
        chatBox.innerHTML += `<div class="message user">أنت: ${message}</div>`;
      }

      const formData = new FormData();
      formData.append("username", "{{ username }}");
      formData.append("message", message);
      for (const file of files) {
        formData.append("files", file);
      }

      userInput.value = "";
      fileInput.value = "";
      sendButton.disabled = true;

      try {
        const res = await fetch("/api", {
          method: "POST",
          body: formData
        });

        if (!res.ok) throw new Error("فشل في الاتصال بالخادم.");

        const data = await res.json();
        chatBox.innerHTML += `<div class="message noura">نورا: ${data.reply}</div>`;
      } catch (error) {
        chatBox.innerHTML += `<div class="message noura text-danger">حدث خطأ أثناء إرسال الرسالة أو الملفات.</div>`;
      } finally {
        chatBox.scrollTop = chatBox.scrollHeight;
        sendButton.disabled = false;
      }
    });

    userInput.addEventListener("keydown", (e) => {
      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        chatForm.dispatchEvent(new Event("submit"));
      }
    });
  </script>
</body>
</html>