Hugging Face's logo

Spaces:
theWitcher
/
sagi-ai-tools
Running

App Files Community
sagi-ai-tools
File size: 3,466 Bytes 
489f090
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
779e1b3
 
 
 
 
 
 
 
 
489f090
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>צ'אטבוט</title>
  <style>
    body {
      margin: 0;
      font-family: 'Arial', sans-serif;
      background-color: #f3f4f6;
    }
    .chat-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .chat-header {
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      color: white;
      padding: 16px;
      font-size: 18px;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .chat-messages {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      background-color: #ffffff;
    }
    .chat-bubble {
      max-width: 80%;
      margin-bottom: 10px;
      padding: 10px 14px;
      border-radius: 20px;
      line-height: 1.5;
      font-size: 14px;
    }
    .user-bubble {
      background-color: #3b82f6;
      color: white;
      margin-left: auto;
      border-bottom-right-radius: 0;
    }
    .bot-bubble {
      background-color: #e5e7eb;
      color: #111827;
      margin-right: auto;
      border-bottom-left-radius: 0;
    }
    .chat-input {
      display: flex;
      padding: 12px;
      border-top: 1px solid #d1d5db;
      background-color: #f9fafb;
    }
    .chat-input input {
      flex: 1;
      padding: 10px;
      border-radius: 9999px;
      border: 1px solid #d1d5db;
      font-size: 14px;
      outline: none;
    }
    .chat-input button {
      margin-right: 8px;
      background-color: #8b5cf6;
      color: white;
      border: none;
      border-radius: 9999px;
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-JVF8N1DVSG"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'G-JVF8N1DVSG');
  </script>
</head>
<body>
  <div class="chat-container">
    <div class="chat-header">
      צ'אט עם הבינה של שגיא
    </div>
    <div class="chat-messages" id="chatMessages">
      <div class="chat-bubble bot-bubble">שלום! איך אפשר לעזור לך היום?</div>
    </div>
    <div class="chat-input">
      <input type="text" id="chatInput" placeholder="הקלד הודעה...">
      <button onclick="sendMessage()">שלח</button>
    </div>
  </div>

  <script>
    function sendMessage() {
      const input = document.getElementById('chatInput');
      const message = input.value.trim();
      if (!message) return;
      
      const messagesDiv = document.getElementById('chatMessages');

      const userBubble = document.createElement('div');
      userBubble.className = 'chat-bubble user-bubble';
      userBubble.textContent = message;
      messagesDiv.appendChild(userBubble);

      const botBubble = document.createElement('div');
      botBubble.className = 'chat-bubble bot-bubble';
      botBubble.textContent = getBotResponse(message);
      messagesDiv.appendChild(botBubble);

      input.value = '';
      messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }

    function getBotResponse(userText) {
      // כאן תוכל לשלב לוגיקה אמיתית או חיבור ל-AI
      return 'זוהי תגובה אוטומטית :)';
    }
  </script>
</body>
</html>