Spaces:

euychrue
/

anycoder-ef8ef693

Running

File size: 20,682 Bytes

<!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;
      position: relative;
    }

    .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);
    }

    /* Preview message styling */
    .preview-message {
      position: absolute;
      bottom: 100%;
      right: 1rem;
      background-color: var(--user-bubble);
      padding: 0.8rem 1rem;
      border-radius: 15px;
      border-bottom-right-radius: 5px;
      max-width: 80%;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.3s ease;
      pointer-events: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .preview-message.visible {
      opacity: 0.8;
      transform: translateY(0);
    }

    .preview-message::before {
      content: "👤";
      margin-right: 5px;
    }

    @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;
      }
      
      .preview-message {
        max-width: 70%;
      }
    }

    /* 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 class="preview-message" id="preview-message"></div>
      </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');
            const previewMessage = document.getElementById('preview-message');

            // 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 = '';
                    previewMessage.textContent = '';
                    previewMessage.classList.remove('visible');
                    
                    simulateTyping(() => {
                        addMessage(generateAIResponse(message));
                    });
                }
            }

            // Show preview of message while typing
            userInput.addEventListener('input', function() {
                if (userInput.value.trim()) {
                    previewMessage.textContent = userInput.value;
                    previewMessage.classList.add('visible');
                } else {
                    previewMessage.classList.remove('visible');
                }
            });

            // Hide preview when input loses focus
            userInput.addEventListener('blur', function() {
                setTimeout(() => {
                    previewMessage.classList.remove('visible');
                }, 200);
            });

            // Show preview when input gains focus (if there's text)
            userInput.addEventListener('focus', function() {
                if (userInput.value.trim()) {
                    previewMessage.textContent = userInput.value;
                    previewMessage.classList.add('visible');
                }
            });

            // Initial demo messages
            setTimeout(() => {
                simulateTyping(() => {
                    addMessage("אאני פה כדי לעזור לך עם כל מה שא שאתה צריך, <span class='bold-text'>בלי בעיות!</span> <span class='punctuation'>!!</span>");
                });
            }, 1500);
        });
  </script>
</body>

</html>