Spaces:

euychrue
/

anycoder-ef8ef693

Running

App Files Files Community

euychrue commited on Dec 21, 2025

Commit

d1f45a6

verified ·

1 Parent(s): ebf5502

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +542 -19

index.html CHANGED Viewed

@@ -1,19 +1,542 @@
-<!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-color: #0056b3;
+            --secondary-color: #ffd700;
+            --accent-color: #d40000;
+            --bg-color: #f5f5f5;
+            --chat-bg: #ffffff;
+            --text-color: #333;
+            --user-bubble: #e3f2fd;
+            --ai-bubble: #f1f1f1;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            direction: rtl;
+        }
+        .header {
+            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+            color: white;
+            padding: 1rem;
+            text-align: center;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            position: relative;
+        }
+        .header h1 {
+            font-size: 1.8rem;
+            margin-bottom: 0.5rem;
+            font-weight: bold;
+        }
+        .header p {
+            font-size: 0.9rem;
+            opacity: 0.9;
+        }
+        .header a {
+            position: absolute;
+            left: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: white;
+            text-decoration: none;
+            font-size: 0.8rem;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 1rem;
+        }
+        .chat-container {
+            background-color: var(--chat-bg);
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            height: 70vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .chat-messages {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .message {
+            max-width: 80%;
+            padding: 0.8rem 1rem;
+            border-radius: 15px;
+            line-height: 1.4;
+            position: relative;
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .user-message {
+            align-self: flex-end;
+            background-color: var(--user-bubble);
+            border-bottom-right-radius: 5px;
+            color: #000;
+            font-weight: 500;
+        }
+        .ai-message {
+            align-self: flex-start;
+            background-color: var(--ai-bubble);
+            border-bottom-left-radius: 5px;
+            color: #000;
+            font-weight: bold;
+        }
+        .ai-message::before {
+            content: "🤖";
+            margin-left: 5px;
+        }
+        .user-message::before {
+            content: "👤";
+            margin-right: 5px;
+        }
+        .input-area {
+            display: flex;
+            padding: 1rem;
+            background-color: #fff;
+            border-top: 1px solid #eee;
+            gap: 0.5rem;
+        }
+        .input-area input {
+            flex: 1;
+            padding: 0.8rem 1rem;
+            border: 1px solid #ddd;
+            border-radius: 25px;
+            font-size: 1rem;
+            outline: none;
+            transition: border 0.3s;
+        }
+        .input-area input:focus {
+            border-color: var(--primary-color);
+        }
+        .input-area button {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 25px;
+            padding: 0 1.5rem;
+            cursor: pointer;
+            font-weight: bold;
+            transition: background 0.3s;
+        }
+        .input-area button:hover {
+            background-color: #003d82;
+        }
+        .file-upload {
+            position: relative;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background-color: var(--secondary-color);
+            color: #333;
+            cursor: pointer;
+        }
+        .file-upload input {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+        }
+        .typing-indicator {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            padding: 0.5rem 1rem;
+            background-color: var(--ai-bubble);
+            border-radius: 15px;
+            align-self: flex-start;
+            margin-bottom: 0.5rem;
+            display: none;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background-color: #666;
+            border-radius: 50%;
+            animation: typingAnimation 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 typingAnimation {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-5px); }
+        }
+        .uploaded-file {
+            display: inline-block;
+            margin-top: 0.5rem;
+            padding: 0.5rem;
+            background-color: rgba(0, 0, 0, 0.05);
+            border-radius: 5px;
+            font-size: 0.8rem;
+        }
+        .uploaded-file i {
+            margin-left: 5px;
+        }
+        .uploaded-image {
+            max-width: 200px;
+            max-height: 200px;
+            border-radius: 10px;
+            margin-top: 0.5rem;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        .uploaded-image:hover {
+            transform: scale(1.05);
+        }
+        @media (max-width: 768px) {
+            .chat-container {
+                height: 80vh;
+            }
+            .message {
+                max-width: 90%;
+            }
+            .input-area {
+                flex-direction: row;
+                align-items: center;
+            }
+            .file-upload {
+                width: 35px;
+                height: 35px;
+            }
+        }
+        /* Israeli style additions */
+        .ai-message {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-weight: bold;
+        }
+        .bold-text {
+            font-weight: bold;
+        }
+        .punctuation {
+            color: var(--accent-color);
+            font-weight: bold;
+        }
+        .israeli-slang {
+            color: var(--primary-color);
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+        <h1>צ'אט בינה מלאכותית ב בסגנון צברי! 🤖💬</h1>
+        <p>ששאל כל שאלה ו וקבל תשובה ב בסגנון ישראלי נוועז!</p>
+    </div>
+    <div class="container">
+        <div class="chat-container">
+            <div class="chat-messages" id="chat-messages">
+                <div class="ai-message">
+                    <span class="bold-text">היי חבר!  👋</span> <span class="punctuation">!</span><br>
+                    אני הבוט הצברי שלך, מו מוכן לע לעזור עם כל מה שא שאתה צריך <span class="israeli-slang">(גם אם זה קצת משוגע...)</span>.<br>
+                    <span class="punctuation">??</span> <span class="bold-text">מה הבררנז'ה</span>
+                </div>
+            </div>
+            <div class="typing-indicator" id="typing-indicator">
+                <div class="typing-dot"></div>
+                <div class="typing-dot"></div>
+                <div class="typing-dot"></div>
+            </div>
+            <div class="input-area">
+                <div class="file-upload" title="העלאת קובובץ או תמונה">
+                    <i class="fas fa-paperclip"></i>
+                    <input type="file" id="file-input" accept=".txt,.pdf,.doc,.docx,.jpg,.jpeg,.png,.gif">
+                </div>
+                <input type="text" id="user-input" placeholder="כתוב כאן את ההודעה של שלך..." autocomplete="off">
+                <button id="send-button"><i class="fas fa-paper-plane"></i> של שלח</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatMessages = document.getElementById('chat-messages');
+            const userInput = document.getElementById('user-input');
+            const sendButton = document.getElementById('send-button');
+            const fileInput = document.getElementById('file-input');
+            const typingIndicator = document.getElementById('typing-indicator');
+            // Sample Israeli-style responses
+            const israeliResponses = [
+                "וואי אחי, איזה שאלה!  😎 ה הנה הת התשובה שלי:",
+                "תשמע, זה לא פ פשוט אבל א אנסה להסביר:",
+                "יאללה בוא נ נדבר על זה...",
+                "חחח, איזה כיף ש ששאלת! אז כ ככה:",
+                "וואו, שאלה מטורפת! ה הנה מה שאני חושב:",
+                "תראה, אני א אגיד לך את הא האמת...",
+                "בום! ה הנה הת התשובה של שלך:",
+                "נו טוב, בוא נ נטפל ב בזה...",
+                "סבבה, אני על זה! ה הנה מה שמ שמצאתי:",
+                "אוקיי, בוא ניגש לע לעניין..."
+            ];
+            // Sample Israeli slang words to sprinkle in responses
+            const israeliSlang = [
+                "אאחי", "סבבה", "יאללה", "חחח", "וואי", "נו", "תראה", "ברנז'ה",
+                "ממטורף", "כיף", "פצצה", "אש", "סתם", "חמוד", "מגניב", "פאדיחה"
+            ];
+            // Function to add punctuation for Israeli style
+            function addPunctuation(text) {
+                const punctuations = ["!", "?", "...", "!!", "??"];
+                // 30% chance to add punctuation at end
+                if (Math.random() < 0.3) {
+                    return text + punctuations[Math.floor(Math.random() * punctuations.length)];
+                }
+                return text;
+            }
+            // Function to add bold text randomly
+            function addBold(text) {
+                const words = text.split(' ');
+                // 20% chance to make a word bold
+                return words.map(word =>
+                    Math.random() < 0.2 ? `<span class="bold-text">${word}</span>` : word
+                ).join(' ');
+            }
+            // Function to add slang randomly
+            function addSlang(text) {
+                // 15% chance to add slang
+                if (Math.random() < 0.15) {
+                    const slang = israeliSlang[Math.floor(Math.random() * israeliSlang.length)];
+                    const positions = [
+                        ` ${slang}, `,
+                        ` ${slang}... `,
+                        ` (${slang}) `,
+                        ` - ${slang} - `
+                    ];
+                    const position = positions[Math.floor(Math.random() * positions.length)];
+                    const insertAt = Math.floor(Math.random() * text.length);
+                    return text.slice(0, insertAt) + position + text.slice(insertAt);
+                }
+                return text;
+            }
+            // Function to generate AI response
+            function generateAIResponse(userMessage, fileContent = null) {
+                let response = israeliResponses[Math.floor(Math.random() * israeliResponses.length)];
+                if (fileContent) {
+                    response += `<br><span class="punctuation">!!</span> ראיתי את הקובובץ שה שהעלת <span class="israeli-slang">(ממגניב)</span>`;
+                }
+                // Generate some "intelligent" response based on user input
+                const inputWords = userMessage.split(' ');
+                if (inputWords.length > 3) {
+                    response += `<br>לגבי "${inputWords.slice(0, 3).join(' ')}...", אני חושב ש`;
+                    const opinions = [
+                        "זה מ ממש מע מעניין!",
+                        "צריך לחשוב על זה יותר לעומומק.",
+                        "יש לי כמה ר רעיונות לגבי זה.",
+                        "זה נושא חשוב ש שצריך ל לבדוק.",
+                        "אני מס מסכים איתך לגמרי!",
+                        "יש לי נקודת מב מבט קצת שונה...",
+                        "זה משהו שכולם צריכים לדעת.",
+                        "אאני לא בטוח שאני מסכים עם זה.",
+                        "וואו, מעולם לא חשבתי על זה כ ככה!",
+                        "זה נושא ש שדורש עוד מחקר."
+                    ];
+                    response += opinions[Math.floor(Math.random() * opinions.length)];
+                } else {
+                    response += "<br>" + [
+                        "אייזה כיף שא שאתה פה!",
+                        "מה עוד מע מעניין אותך לדעת?",
+                        "יש ל לך עוד שאלות בש בשבילי?",
+                        "אאני פה לכל מה שא שאתה צריך!",
+                        "ממשהו נוס נוסף שברצונונך ל לשאול?",
+                        "אאני אוהב את הש השאלות שלך!",
+                        "בוא נ נמשיך את השיחה המ המעניינת הזו!",
+                        "יש לי כל כך הרבה מה להגיד על זה!",
+                        "אתה מעלה נקודות מע מעניינות!",
+                        "בוא נדבר עוד על הנושא הזה!"
+                    ][Math.floor(Math.random() * 10)];
+                }
+                // Add some random facts
+                if (Math.random() < 0.4) {
+                    const facts = [
+                        "<br><br>דרך א אגב, ידעת ש-90% מהישראלים אוהבים חומווס?",
+                        "<br><br>אאגב, מ מחקר חדש מר מראה ש...",
+                        "<br><br>קצת טריוויה: התל אביבי המ הממוצע שותה 3 ק קפה ביום!",
+                        "<br><br>חשבת פעם על זה ש...",
+                        "<br><br>משהו מע מעניין: רוב הא האנשים לא יודעים ש..."
+                    ];
+                    response += facts[Math.floor(Math.random() * facts.length)];
+                }
+                // Process the text with Israeli style
+                response = addPunctuation(response);
+                response = addBold(response);
+                response = addSlang(response);
+                return response;
+            }
+            // Function to add message to chat
+            function addMessage(content, isUser = false) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
+                if (typeof content === 'string') {
+                    messageDiv.innerHTML = content;
+                } else {
+                    // Handle file content
+                    if (content.type.startsWith('image/')) {
+                        const reader = new FileReader();
+                        reader.onload = function(e) {
+                            messageDiv.innerHTML = `<div>${isUser ? 'אתה העלית ת תמונה:' : 'הנה הת התמונה של שלך:'}</div>
+                            <img src="${e.target.result}" class="uploaded-image" alt="Uploaded image">`;
+                        };
+                        reader.readAsDataURL(content);
+                    } else {
+                        messageDiv.innerHTML = `<div class="uploaded-file">
+                            <i class="fas fa-file-alt"></i> ${isUser ? 'העלית קובובץ:' : 'הנה הקובץ שלך:'} ${content.name}
+                        </div>`;
+                    }
+                }
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            // Function to simulate AI typing
+            function simulateTyping(callback) {
+                typingIndicator.style.display = 'flex';
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                // Random typing duration between 1-3 seconds
+                const duration = 1000 + Math.random() * 2000;
+                setTimeout(() => {
+                    typingIndicator.style.display = 'none';
+                    callback();
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                }, duration);
+            }
+            // Handle send button click
+            sendButton.addEventListener('click', sendMessage);
+            // Handle Enter key press
+            userInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            // Handle file upload
+            fileInput.addEventListener('change', function(e) {
+                if (fileInput.files.length > 0) {
+                    const file = fileInput.files[0];
+                    addMessage(file, true);
+                    // In a real app, you would process the file here
+                    // For demo, we'll just show a response
+                    simulateTyping(() => {
+                        addMessage(generateAIResponse("קובץ שהועלה", true));
+                    });
+                    // Reset file input
+                    fileInput.value = '';
+                }
+            });
+            // Function to send message
+            function sendMessage() {
+                const message = userInput.value.trim();
+                if (message) {
+                    addMessage(message, true);
+                    userInput.value = '';
+                    simulateTyping(() => {
+                        addMessage(generateAIResponse(message));
+                    });
+                }
+            }
+            // Initial demo messages
+            setTimeout(() => {
+                simulateTyping(() => {
+                    addMessage("אאני פה כדי לעזור לך עם כל מה שא שאתה צריך, <span class='bold-text'>בלי בעיות!</span> <span class='punctuation'>!!</span>");
+                });
+            }, 1500);
+        });
+    </script>
+</body>
+</html>