Spaces:

euychrue
/

anycoder-ef8ef693

Running

App Files Files Community

euychrue commited on Dec 21, 2025

Commit

eb6f430

verified ·

1 Parent(s): 591dd24

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +426 -346

index.html CHANGED Viewed

@@ -1,352 +1,404 @@
 <!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
@@ -391,7 +443,7 @@
                 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
@@ -400,40 +452,40 @@
                     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>משהו מע מעניין: רוב הא האנשים לא יודעים ש..."
                     ];
@@ -460,13 +512,13 @@
                     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>`;
                     }
                 }
@@ -523,6 +575,8 @@
                 if (message) {
                     addMessage(message, true);
                     userInput.value = '';
                     simulateTyping(() => {
                         addMessage(generateAIResponse(message));
@@ -530,6 +584,31 @@
                 }
             }
             // Initial demo messages
             setTimeout(() => {
                 simulateTyping(() => {
@@ -537,6 +616,7 @@
                 });
             }, 1500);
         });
-    </script>
 </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;
+      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
                 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
                     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>משהו מע מעניין: רוב הא האנשים לא יודעים ש..."
                     ];
                     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>`;
                     }
                 }
                 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(() => {
                 });
             }, 1500);
         });
+  </script>
 </body>
 </html>