Spaces:

euychrue
/

anycoder-9de79744

Running

App Files Files Community

euychrue commited on Dec 21, 2025

Commit

915327a

verified ·

1 Parent(s): ce433c1

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +588 -19

index.html CHANGED Viewed

@@ -1,19 +1,588 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>