Hugging Face's logo

Spaces:
euychrue
/
anycoder-9de79744
Running

App Files Community
anycoder-9de79744 / index.html
euychrue's picture
euychrue
Upload folder using huggingface_hub
915327a verified
raw
history blame contribute delete
20 kB
<!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>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --primary: #0056b3;
 --secondary: #ffd700;
 --accent: #d40000;
 --bg: #f5f5f5;
 --text: #333;
 --bubble-user: #e3f2fd;
 --bubble-ai: #ffffff;
 --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 body {
 background-color: var(--bg);
 color: var(--text);
 direction: rtl;
 }
 .container {
 max-width: 1000px;
 margin: 0 auto;
 padding: 20px;
 display: flex;
 flex-direction: column;
 height: 100vh;
 }
 header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 0;
 border-bottom: 2px solid var(--secondary);
 margin-bottom: 20px;
 }
 .logo {
 display: flex;
 align-items: center;
 gap: 10px;
 }
 .logo img {
 height: 40px;
 }
 .logo h1 {
 font-size: 24px;
 color: var(--primary);
 font-weight: 700;
 }
 .tagline {
 font-size: 14px;
 color: var(--accent);
 font-style: italic;
 }
 .chat-container {
 flex: 1;
 display: flex;
 flex-direction: column;
 background-color: white;
 border-radius: 10px;
 box-shadow: var(--shadow);
 overflow: hidden;
 }
 .chat-header {
 background-color: var(--primary);
 color: white;
 padding: 15px;
 display: flex;
 align-items: center;
 gap: 10px;
 }
 .chat-header i {
 font-size: 20px;
 }
 .chat-messages {
 flex: 1;
 padding: 20px;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 15px;
 }
 .message {
 max-width: 80%;
 padding: 12px 15px;
 border-radius: 15px;
 line-height: 1.4;
 position: relative;
 word-wrap: break-word;
 }
 .user-message {
 align-self: flex-end;
 background-color: var(--bubble-user);
 border-bottom-right-radius: 0;
 color: var(--text);
 }
 .ai-message {
 align-self: flex-start;
 background-color: var(--bubble-ai);
 border-bottom-left-radius: 0;
 box-shadow: var(--shadow);
 }
 .ai-message strong {
 color: var(--accent);
 }
 .ai-message em {
 font-style: italic;
 color: var(--primary);
 }
 .chat-input {
 display: flex;
 padding: 15px;
 background-color: #f0f0f0;
 border-top: 1px solid #ddd;
 }
 .input-container {
 flex: 1;
 display: flex;
 gap: 10px;
 }
 textarea {
 flex: 1;
 padding: 12px 15px;
 border: 1px solid #ddd;
 border-radius: 25px;
 resize: none;
 font-size: 16px;
 height: 50px;
 max-height: 150px;
 outline: none;
 transition: all 0.3s;
 }
 textarea:focus {
 border-color: var(--primary);
 box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);
 }
 .send-btn {
 background-color: var(--primary);
 color: white;
 border: none;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all 0.3s;
 }
 .send-btn:hover {
 background-color: #003d82;
 }
 .file-upload {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .file-upload input {
 position: absolute;
 opacity: 0;
 width: 50px;
 height: 50px;
 cursor: pointer;
 }
 .file-upload-btn {
 background-color: var(--secondary);
 color: var(--text);
 border: none;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all 0.3s;
 }
 .file-upload-btn:hover {
 background-color: #e6c200;
 }
 .typing-indicator {
 display: flex;
 align-items: center;
 gap: 5px;
 padding: 10px 15px;
 background-color: var(--bubble-ai);
 border-radius: 15px;
 align-self: flex-start;
 box-shadow: var(--shadow);
 margin-bottom: 15px;
 }
 .typing-dot {
 width: 8px;
 height: 8px;
 background-color: #999;
 border-radius: 50%;
 animation: typing 1.4s infinite ease-in-out;
 }
 .typing-dot:nth-child(1) {
 animation-delay: 0s;
 }
 .typing-dot:nth-child(2) {
 animation-delay: 0.2s;
 }
 .typing-dot:nth-child(3) {
 animation-delay: 0.4s;
 }
 @keyframes typing {
 0%, 60%, 100% {
 transform: translateY(0);
 }
 30% {
 transform: translateY(-5px);
 }
 }
 .file-preview {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 10px;
 }
 .file-item {
 display: flex;
 align-items: center;
 background-color: #f0f0f0;
 padding: 5px 10px;
 border-radius: 15px;
 font-size: 14px;
 gap: 5px;
 }
 .file-item i {
 color: var(--primary);
 }
 .remove-file {
 color: var(--accent);
 cursor: pointer;
 margin-right: 5px;
 }
 .credits {
 text-align: center;
 margin-top: 10px;
 font-size: 12px;
 color: #777;
 }
 .credits a {
 color: var(--primary);
 text-decoration: none;
 }
 @media (max-width: 768px) {
 .container {
 padding: 10px;
 }
.logo h1 {
 font-size: 20px;
 }
.message {
 max-width: 90%;
 }
.chat-input {
 padding: 10px;
 }
textarea, .send-btn, .file-upload-btn {
 height: 45px;
 width: 45px;
 }
 }
 /* Sabra style additions */
 .ai-message::before {
 content: "💪";
 position: absolute;
 left: -25px;
 top: 0;
 font-size: 20px;
 }
 .sabra-emoji {
 font-size: 18px;
 margin-left: 5px;
 }
 </style>
</head>
<body>
 <div class="container">
 <header>
 <div class="logo">
 <i class="fas fa-robot" style="font-size: 30px; color: var(--primary);"></i>
 <h1>צ'אט בינה מלאכותית <span class="sabra-emoji">🇮🇱</span></h1>
 </div>
 <div class="tagline">עונה כמו צבר אמיתי!</div>
 </header>
<div class="chat-container">
 <div class="chat-header">
 <i class="fas fa-comments"></i>
 <span>צ'אט עם DeepSeek</span>
 </div>
<div class="chat-messages" id="chat-messages">
 <div class="message ai-message">
 <strong>היי חבר! מה קורה? 😎</strong><br><br>
 אני כאן כדי לעזור עם כל מה שאתה צריך, <em>בסגנון הכי ישראלי שיש!</em> 🏖️<br><br>
 תשאל אותי מה שבא לך, ואני אענה לך <strong>בלי פילטרים ובלי נחמדות מזויפת</strong>... בדיוק כמו שצריך! 💪
 </div>
 </div>
<div class="file-preview" id="file-preview"></div>
<div class="chat-input">
 <div class="input-container">
 <div class="file-upload">
 <input type="file" id="file-input" multiple>
 <button class="file-upload-btn" title="העלאת קובץ">
 <i class="fas fa-paperclip"></i>
 </button>
 </div>
 <textarea id="message-input" placeholder="כתוב הודעה כאן..."></textarea>
 <button class="send-btn" id="send-btn">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
<div class="credits">
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 const messageInput = document.getElementById('message-input');
 const sendBtn = document.getElementById('send-btn');
 const chatMessages = document.getElementById('chat-messages');
 const fileInput = document.getElementById('file-input');
 const filePreview = document.getElementById('file-preview');
let files = [];
// Auto-resize textarea
 messageInput.addEventListener('input', function() {
 this.style.height = 'auto';
 this.style.height = (this.scrollHeight > 150 ? 150 : this.scrollHeight) + 'px';
 });
// Send message on Enter (but allow Shift+Enter for new line)
 messageInput.addEventListener('keydown', function(e) {
 if (e.key === 'Enter' && !e.shiftKey) {
 e.preventDefault();
 sendMessage();
 }
 });
// Send message on button click
 sendBtn.addEventListener('click', sendMessage);
// Handle file upload
 fileInput.addEventListener('change', function() {
 files = Array.from(this.files);
 updateFilePreview();
 });
function updateFilePreview() {
 filePreview.innerHTML = '';
files.forEach((file, index) => {
 const fileItem = document.createElement('div');
 fileItem.className = 'file-item';
let iconClass;
 if (file.type.startsWith('image/')) {
 iconClass = 'fas fa-image';
 } else if (file.type.startsWith('video/')) {
 iconClass = 'fas fa-video';
 } else if (file.type.startsWith('audio/')) {
 iconClass = 'fas fa-music';
 } else if (file.type.includes('pdf')) {
 iconClass = 'fas fa-file-pdf';
 } else if (file.type.includes('word') || file.type.includes('document')) {
 iconClass = 'fas fa-file-word';
 } else {
 iconClass = 'fas fa-file';
 }
fileItem.innerHTML = `
 <i class="${iconClass}"></i>
 <span>${file.name}</span>
 <span class="remove-file" data-index="${index}">&times;</span>
 `;
filePreview.appendChild(fileItem);
 });
// Add event listeners to remove buttons
 document.querySelectorAll('.remove-file').forEach(btn => {
 btn.addEventListener('click', function() {
 const index = parseInt(this.getAttribute('data-index'));
 files.splice(index, 1);
 updateFilePreview();
 });
 });
 }
function sendMessage() {
 const message = messageInput.value.trim();
 if (message === '' && files.length === 0) return;
// Add user message to chat
 addMessage(message, 'user');
// Show typing indicator
 showTypingIndicator();
// Clear input
 messageInput.value = '';
 messageInput.style.height = '50px';
// Simulate AI response after delay
 setTimeout(() => {
 // Remove typing indicator
 removeTypingIndicator();
// Add AI response
 addMessage(generateSabraResponse(message), 'ai');
// Clear files
 files = [];
 updateFilePreview();
// Scroll to bottom
 chatMessages.scrollTop = chatMessages.scrollHeight;
 }, 1500 + Math.random() * 2000);
// Scroll to bottom
 chatMessages.scrollTop = chatMessages.scrollHeight;
 }
function addMessage(text, sender) {
 const messageDiv = document.createElement('div');
 messageDiv.className = `message ${sender}-message`;
if (sender === 'user') {
 messageDiv.textContent = text;
// Add file info if available
 if (files.length > 0) {
 const fileInfo = document.createElement('div');
 fileInfo.style.marginTop = '10px';
 fileInfo.style.fontSize = '12px';
 fileInfo.style.color = '#666';
files.forEach(file => {
 const fileSpan = document.createElement('span');
 fileSpan.style.display = 'block';
 fileSpan.innerHTML = `<i class="fas fa-paperclip"></i> ${file.name}`;
 fileInfo.appendChild(fileSpan);
 });
messageDiv.appendChild(fileInfo);
 }
 } else {
 // AI message with HTML content
 messageDiv.innerHTML = text;
 }
chatMessages.appendChild(messageDiv);
 }
function showTypingIndicator() {
 const typingDiv = document.createElement('div');
 typingDiv.className = 'typing-indicator';
 typingDiv.id = 'typing-indicator';
 typingDiv.innerHTML = `
 <div class="typing-dot"></div>
 <div class="typing-dot"></div>
 <div class="typing-dot"></div>
 <span>כותב...</span>
 `;
chatMessages.appendChild(typingDiv);
 chatMessages.scrollTop = chatMessages.scrollHeight;
 }
function removeTypingIndicator() {
 const typingDiv = document.getElementById('typing-indicator');
 if (typingDiv) {
 typingDiv.remove();
 }
 }
function generateSabraResponse(userMessage) {
 const responses = [
 `<strong>יאללה חבר, שאלה טובה!</strong> 🚀<br><br>
 אבל לפני שאני עונה, <em>אתה בטוח שאתה רוצה לדעת את זה?</em> כי אני לא עושה הנחות פה... 😎<br><br>
 התשובה היא: <strong>זה תלוי</strong>! כמו כל דבר בחיים, לא? 🤷‍♂️`,
`<strong>וואו, איזה שאלה!</strong> 🔥<br><br>
 אתה יודע מה? אני אענה לך <em>בלי סוכר</em>, כמו שצריך:<br><br>
 <strong>זה לא כל כך פשוט כמו שזה נשמע</strong>, אבל אם תתעקש - תצליח! 💪<br><br>
 <em>סימן שאלה?</em> 🧐`,
`<strong>שמע, אני אתן לך תשובה אמיתית</strong> ⚡<br><br>
 לא כמו כל הבוטים המפונקים האלה...<br><br>
 <em>האמת היא ש</em> <strong>${userMessage.toUpperCase()}</strong> <em>זה לא מה שחשוב פה</em>!<br><br>
 מה שחשוב זה מה <strong>אתה</strong> חושב! 🧠<br><br>
 <span class="sabra-emoji">🇮🇱</span>`,
`<strong>אה, השאלה הקלאסית הזאת...</strong> 😏<br><br>
 תקשיב, אני אגיד לך משהו <em>שאף אחד לא מעז להגיד</em>:<br><br>
 <strong>זה לא חשוב!</strong> 🎯<br><br>
 מה שחשוב זה איך אתה משתמש במידע הזה! 💡<br><br>
 <em>סימן קריאה!</em> ❗`,
`<strong>יאללה, בוא נדבר גלויות</strong> 🤙<br><br>
 אני לא הולך לסבך לך את החיים עם תשובות מסובכות...<br><br>
 <em>התשובה הפשוטה היא:</em> <strong>כן ולא בו זמנית</strong>! 🤯<br><br>
 <span class="sabra-emoji">😅</span> <span class="sabra-emoji">🤪</span>`
 ];
// Add file response if files were uploaded
 if (files.length > 0) {
 const fileNames = files.map(f => f.name).join(', ');
 return `<strong>וואלה, שלחת לי קבצים!</strong> 📎<br><br>
 <em>${fileNames}</em> - יפה מאוד! 👏<br><br>
 עכשיו, לגבי השאלה שלך:<br><br>
 ${responses[Math.floor(Math.random() * responses.length)]}`;
 }
return responses[Math.floor(Math.random() * responses.length)];
 }
 });
 </script>
</body>
</html>