Spaces:

Really-amin
/

Mypersonalassistant

Starting

App Files Files Community

Really-amin commited on 5 days ago

Commit

027e9c6

•

1 Parent(s): 654965e

Upload 2 files

Browse files

Files changed (2) hide show

templates/index.html +979 -0
templates/massage.mp3 +0 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,979 @@

+<!DOCTYPE html>
+<html dir="rtl" lang="fa">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="description" content="دستیار هوش مصنوعی پیشرفته با قابلیت چت و پاسخگویی هوشمند">
+    <meta name="keywords" content="هوش مصنوعی, چت بات, دستیار هوشمند, پردازش زبان طبیعی">
+    <meta name="theme-color" content="#0088cc">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <title>دستیار هوش مصنوعی پیشرفته</title>
+    <!-- فونت و استایل‌های خارجی -->
+    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --bg-color: #f0f2f5;
+            --chat-bg: white;
+            --text-color: #333;
+            --border-color: #ddd;
+            --primary-color: #0088cc;
+            --hover-color: #006699;
+            --user-message-bg: #e3f2fd;
+            --bot-message-bg: #f5f5f5;
+            --shadow-color: rgba(0, 0, 0, 0.1);
+            --header-gradient-start: #0088cc;
+            --header-gradient-end: #005580;
+            --input-bg: #ffffff;
+            --placeholder-color: #95a5a6;
+            --message-time-color: #7f8c8d;
+            --system-message-bg: #fff3cd;
+            --system-message-color: #856404;
+            --maintenance-bg: #f8d7da;
+            --maintenance-color: #721c24;
+            --header-text: #ffffff;
+            --header-height: 120px;
+            --border-radius: 20px;
+            --control-button-bg: #0088cc;
+            --status-bar-bg: rgba(255, 255, 255, 0.95);
+            --typing-indicator-color: #606060;
+            --disabled-bg: #f8f9fa;
+        }
+        .dark-theme {
+            --bg-color: #1a1a1a;
+            --chat-bg: #2d2d2d;
+            --text-color: #ecf0f1;
+            --border-color: #444444;
+            --primary-color: #0099ff;
+            --hover-color: #0077cc;
+            --user-message-bg: #1e3a5f;
+            --bot-message-bg: #3d3d3d;
+            --shadow-color: rgba(0, 0, 0, 0.3);
+            --header-gradient-start: #004466;
+            --header-gradient-end: #002233;
+            --input-bg: #383838;
+            --placeholder-color: #95a5a6;
+            --message-time-color: #95a5a6;
+            --system-message-bg: #3d2c00;
+            --system-message-color: #ffd970;
+            --maintenance-bg: #442226;
+            --maintenance-color: #ff8c95;
+            --status-bar-bg: rgba(45, 45, 45, 0.95);
+            --typing-indicator-color: #b0b0b0;
+            --disabled-bg: #2a2a2a;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+        body {
+            font-family: 'Vazir', Tahoma, Arial, sans-serif;
+            background: var(--bg-color);
+            color: var(--text-color);
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px;
+            line-height: 1.6;
+        }
+        .app-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: var(--chat-bg);
+            border-radius: var(--border-radius);
+            box-shadow: 0 5px 25px var(--shadow-color);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            height: calc(100vh - 40px);
+            position: relative;
+        }
+        .header {
+            background: linear-gradient(135deg,
+                        var(--header-gradient-start),
+                        var(--header-gradient-end));
+            padding: 20px;
+            height: var(--header-height);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            z-index: 2;
+        }
+        .header-content {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            animation: fadeInDown 0.5s ease-out;
+        }
+        .header h1 {
+            color: var(--header-text);
+            margin: 0;
+            font-size: 2.2rem;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+        }
+        .brain-icon {
+            width: 80px;
+            height: 80px;
+            filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-8px); }
+        }
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            overflow: hidden;
+            padding: 20px;
+            gap: 20px;
+        }
+        .status-bar {
+            background: var(--status-bar-bg);
+            padding: 15px;
+            border-bottom: 1px solid var(--border-color);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        }
+        .status-info {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+            text-align: center;
+        }
+        .messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+            scroll-behavior: smooth;
+        }
+        .messages::-webkit-scrollbar {
+            width: 8px;
+        }
+        .messages::-webkit-scrollbar-track {
+            background: var(--chat-bg);
+            border-radius: 4px;
+        }
+        .messages::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 4px;
+        }
+        .message {
+            margin: 12px 0;
+            padding: 15px;
+            border-radius: 15px;
+            max-width: 80%;
+            position: relative;
+            animation: messageAppear 0.3s ease;
+            line-height: 1.6;
+            font-size: 1rem;
+            box-shadow: 0 2px 5px var(--shadow-color);
+        }
+        @keyframes messageAppear {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .user-message {
+            background: var(--user-message-bg);
+            margin-right: auto !important;
+            margin-left: 20px !important;
+            border-radius: 15px 15px 0 15px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
+                        0 1px 3px rgba(0, 0, 0, 0.12);
+        }
+        .bot-message {
+            background: var(--bot-message-bg);
+            margin-left: auto !important;
+            margin-right: 20px !important;
+            border-radius: 15px 15px 15px 0;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
+                        0 1px 3px rgba(0, 0, 0, 0.12);
+        }
+        .message:hover {
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
+                      0 2px 4px rgba(0, 0, 0, 0.08);
+        }
+        .message-time {
+            font-size: 0.75rem;
+            color: var(--message-time-color);
+            position: absolute;
+            bottom: 5px;
+            left: 10px;
+            opacity: 0.8;
+        }
+        .typing-indicator {
+            padding: 10px 20px;
+            background: var(--chat-bg);
+            border-radius: 15px;
+            display: none;
+            color: var(--typing-indicator-color);
+            font-size: 0.9em;
+            margin: 5px 15px;
+            border: 1px solid var(--border-color);
+            animation: pulse 1.5s infinite;
+        }
+        .typing-indicator.active {
+            display: inline-block;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .input-area {
+            background: var(--chat-bg);
+            padding: 20px;
+            border-top: 1px solid var(--border-color);
+            position: relative;
+        }
+        .input-container {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            gap: 15px;
+            align-items: center;
+            background: var(--input-bg);
+            border-radius: 25px;
+            padding: 5px;
+            box-shadow: 0 2px 10px var(--shadow-color);
+        }
+        .message-input {
+            padding: 12px 20px;
+            border: 2px solid var(--border-color);
+            border-radius: 25px;
+            font-size: 1rem;
+            background: var(--input-bg);
+            color: var(--text-color);
+            width: 100%;
+            transition: all 0.3s ease;
+        }
+        .message-input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
+            background: var(--input-bg);
+        }
+        .message-input::placeholder {
+            color: var(--border-color);
+        }
+        .send-button {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: none;
+            background: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
+        .send-button:hover:not(:disabled) {
+            transform: translateY(-2px);
+            background: var(--hover-color);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        .dark-theme .message {
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2),
+                      0 1px 3px rgba(0, 0, 0, 0.3);
+        }
+        .dark-theme .message:hover {
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
+                      0 2px 4px rgba(0, 0, 0, 0.15);
+        }
+        .dark-theme .message-input {
+            background: var(--input-bg);
+            color: var(--text-color);
+            border-color: var(--border-color);
+        }
+        .system-message {
+            background: var(--system-message-bg);
+            color: var(--system-message-color);
+            padding: 12px 15px;
+            border-radius: 10px;
+            margin: 10px 15px;
+            border: 1px solid var(--border-color);
+            animation: slideIn 0.3s ease;
+        }
+        .maintenance-mode {
+            background: var(--maintenance-bg);
+            color: var(--maintenance-color);
+            padding: 12px 15px;
+            border-radius: 10px;
+            margin: 10px 15px;
+            border: 1px solid var(--border-color);
+            animation: slideIn 0.3s ease;
+        }
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            :root {
+                --header-height: 100px;
+                --border-radius: 15px;
+            }
+            .header h1 {
+                font-size: 1.5rem;
+            }
+            .brain-icon {
+                width: 50px;
+                height: 50px;
+            }
+            .message {
+                max-width: 90%;
+                padding: 12px;
+                font-size: 0.95rem;
+            }
+            .controls {
+                display: none;
+            }
+            .input-container {
+                grid-template-columns: 1fr auto;
+                gap: 10px;
+            }
+            .status-info {
+                grid-template-columns: 1fr;
+                gap: 10px;
+            }
+            .send-button {
+                width: 45px;
+                height: 45px;
+            }
+            .message-input {
+                padding: 10px 15px;
+                font-size: 0.95rem;
+            }
+        }
+        @keyframes ripple {
+            0% {
+                transform: scale(0.8);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(2);
+                opacity: 0;
+            }
+        }
+        .ripple {
+            position: relative;
+            overflow: hidden;
+        }
+        .ripple:after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            transform: scale(0);
+            animation: ripple 0.6s linear;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+<div class="app-container">
+<header class="header">
+<div class="header-content">
+    <h1>دستیار هوش مصنوعی</h1>
+    <svg class="brain-icon" viewBox="0 0 100 100">
+        <defs>
+            <radialGradient id="glass" cx="50%" cy="50%" r="50%">
+                <stop offset="0%" stop-color="rgba(255, 255, 255, 0.9)"/>
+                <stop offset="100%" stop-color="rgba(255, 255, 255, 0.3)"/>
+            </radialGradient>
+            <linearGradient id="brainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="#ff9eb3"/>
+                <stop offset="50%" stop-color="#ff85a3"/>
+                <stop offset="100%" stop-color="#ff6293"/>
+            </linearGradient>
+            <filter id="shadow">
+                <feDropShadow dx="2" dy="2" stdDeviation="2" flood-opacity="0.3"/>
+            </filter>
+        </defs>
+        <g transform="translate(20, 25)" filter="url(#shadow)">
+            <path d="M30,10 C45,0 60,15 55,35 C65,40 60,55 45,50 C35,60 15,50 20,35 C10,30 15,15 30,10"
+                  fill="url(#brainGradient)"
+                  stroke="#d4357d"
+                  stroke-width="2">
+                <animate attributeName="d"
+                         dur="3s"
+                         repeatCount="indefinite"
+                         values="M30,10 C45,0 60,15 55,35 C65,40 60,55 45,50 C35,60 15,50 20,35 C10,30 15,15 30,10;
+                                 M30,12 C45,2 58,17 53,37 C63,42 58,57 43,52 C33,62 17,52 22,37 C12,32 17,17 30,12;
+                                 M30,10 C45,0 60,15 55,35 C65,40 60,55 45,50 C35,60 15,50 20,35 C10,30 15,15 30,10"/>
+            </path>
+            <path d="M25,15 C35,10 45,20 40,30"
+                  fill="none"
+                  stroke="#d4357d"
+                  stroke-width="1.5">
+                <animate attributeName="d"
+                         dur="3s"
+                         repeatCount="indefinite"
+                         values="M25,15 C35,10 45,20 40,30;
+                                 M25,17 C35,12 45,22 40,32;
+                                 M25,15 C35,10 45,20 40,30"/>
+            </path>
+            <path d="M35,25 C45,20 50,30 45,40"
+                  fill="none"
+                  stroke="#d4357d"
+                  stroke-width="1.5">
+                <animate attributeName="d"
+                         dur="3s"
+                         repeatCount="indefinite"
+                         values="M35,25 C45,20 50,30 45,40;
+                                 M35,27 C45,22 50,32 45,42;
+                                 M35,25 C45,20 50,30 45,40"/>
+            </path>
+            <path d="M25,30 C35,25 40,35 35,45"
+                  fill="none"
+                  stroke="#d4357d"
+                  stroke-width="1.5">
+                <animate attributeName="d"
+                         dur="3s"
+                         repeatCount="indefinite"
+                         values="M25,30 C35,25 40,35 35,45;
+                                 M25,32 C35,27 40,37 35,47;
+                                 M25,30 C35,25 40,35 35,45"/>
+            </path>
+        </g>
+        <circle cx="50" cy="50" r="45"
+                fill="url(#glass)"
+                stroke="#ffffff"
+                stroke-width="2">
+            <animate attributeName="r"
+                     dur="3s"
+                     repeatCount="indefinite"
+                     values="45;43;45"/>
+        </circle>
+        <ellipse cx="35" cy="35"
+                 rx="15" ry="10"
+                 fill="rgba(255, 255, 255, 0.4)"
+                 transform="rotate(-30, 35, 35)">
+            <animate attributeName="ry"
+                     dur="3s"
+                     repeatCount="indefinite"
+                     values="10;9;10"/>
+        </ellipse>
+    </svg>
+</div>
+</header>
+<div class="status-bar">
+<div class="status-info">
+    <div>
+        <strong>وضعیت مدل:</strong>
+        <span id="model-status" class="badge bg-warning">در حال بررسی...</span>
+    </div>
+    <div>
+        <strong>وضعیت اتصال:</strong>
+        <span id="connection-status" class="badge bg-warning">در حال بررسی...</span>
+    </div>
+    <div>
+        <strong>زمان سیستم:</strong>
+        <span id="system-time" class="badge bg-info">-</span>
+    </div>
+</div>
+</div>
+<main class="chat-container">
+<div class="messages" id="chat-messages">
+    <div class="message bot-message">
+        سلام! من یک دستیار هوش مصنوعی هستم. چطور می‌توانم کمکتان کنم؟
+        <span class="message-time">12:00</span>
+    </div>
+</div>
+<div class="typing-indicator" id="typingIndicator">
+    <span>در حال تایپ</span>
+    <span class="dots">...</span>
+</div>
+<div class="input-area">
+    <div class="input-container" id="inputContainer">
+        <div class="controls">
+            <button class="control-button ripple" onclick="toggleTheme()" id="themeToggle" title="تغییر تم">🌙</button>
+            <button class="control-button ripple" onclick="toggleSound()" id="soundToggle" title="صدا">🔊</button>
+            <button class="control-button ripple" onclick="clearChat()" title="پاک کردن تاریخچه">🗑️</button>
+            <button class="control-button ripple" onclick="downloadChat()" title="دانلود تاریخچه">💾</button>
+        </div>
+        <input type="text"
+               class="message-input"
+               id="messageInput"
+               placeholder="پیام خود را بنویسید..."
+               autocomplete="off"
+               disabled>
+        <button class="send-button ripple" id="sendButton" onclick="sendMessage()" disabled>
+            <svg viewBox="0 0 24 24" width="24" height="24">
+                <path fill="currentColor" d="M2,21L23,12L2,3V10L17,12L2,14V21Z"/>
+            </svg>
+        </button>
+    </div>
+</div>
+</main>
+</div>
+<script>
+let ws;
+let soundEnabled = true;
+let reconnectAttempts = 0;
+const maxReconnectAttempts = 5;
+const messageSound = new Audio('/static/message.mp3');
+let chatEnabled = false;
+let isTyping = false;
+let typingTimeout;
+// تابع اتصال به WebSocket
+// تغییر در // تغییر در تابع connectWebSocket
+function connectWebSocket() {
+    const clientId = Math.random().toString(36).substring(7);
+    ws = new WebSocket(
+        (window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
+        window.location.host + '/ws/' + clientId
+    );
+    ws.onmessage = handleWebSocketMessage;
+    ws.onopen = handleWebSocketOpen;
+    ws.onclose = handleWebSocketClose;
+    ws.onerror = handleWebSocketError;
+}
+// تغییر در تابع sendMessage
+function sendMessage() {
+    const input = document.getElementById('messageInput');
+    const message = input.value.trim();
+    if (message && chatEnabled) {
+        if (ws.readyState === WebSocket.OPEN) {
+            try {
+                addMessage(message, 'user');
+                ws.send(message);  // تغییر این خط - فقط متن پیام رو ارسال می‌کنیم
+                input.value = '';
+                handleTypingStatus(true);
+                const sendButton = document.getElementById('sendButton');
+                sendButton.classList.add('active');
+                setTimeout(() => sendButton.classList.remove('active'), 200);
+            } catch (e) {
+                handleError("خطا در ارسال پیام");
+            }
+        } else {
+            handleError("اتصال به سرور برقرار نیست");
+            connectWebSocket();
+        }
+    }
+}
+// مدیریت پیام‌های دریافتی
+function handleWebSocketMessage(event) {
+    try {
+        const data = JSON.parse(event.data);
+        switch(data.type) {
+            case 'typing':
+                handleTypingStatus(data.status);
+                break;
+            case 'message':
+                handleBotMessage(data.message);
+                break;
+            case 'error':
+                handleError(data.message);
+                break;
+            default:
+                handleBotMessage(data.message || event.data);
+        }
+    } catch (e) {
+        console.error("خطا در پردازش پیام:", e);
+        handleBotMessage(event.data);
+    }
+}
+// مدیریت باز شدن اتصال
+function handleWebSocketOpen() {
+    updateConnectionStatus(true);
+    enableChat();
+    reconnectAttempts = 0;
+    updateStatus();
+    const successMessage = document.createElement('div');
+    successMessage.className = 'system-message';
+    successMessage.textContent = "✅ اتصال با موفقیت برقرار شد";
+    document.getElementById('chat-messages').appendChild(successMessage);
+    setTimeout(() => successMessage.remove(), 3000);
+}
+// مدیریت بسته شدن اتصال
+function handleWebSocketClose() {
+    updateConnectionStatus(false);
+    disableChat();
+    if (reconnectAttempts < maxReconnectAttempts) {
+        reconnectAttempts++;
+        const delay = 5000 * reconnectAttempts;
+        handleError(`تلاش مجدد برای اتصال در ${delay/1000} ثانیه دیگر...`);
+        setTimeout(connectWebSocket, delay);
+    } else {
+        handleError("اتصال به سرور برقرار نیست. لطفاً صفحه را مجدداً بارگذاری کنید.");
+    }
+}
+// مدیریت خطاهای اتصال
+function handleWebSocketError(error) {
+    console.error("خطای WebSocket:", error);
+    handleError("خطا در ارتباط با سرور");
+}
+// به‌روزرسانی وضعیت اتصال
+function updateConnectionStatus(connected) {
+    const statusElement = document.getElementById('connection-status');
+    if (connected) {
+        statusElement.className = 'badge bg-success';
+        statusElement.textContent = 'متصل';
+    } else {
+        statusElement.className = 'badge bg-danger';
+        statusElement.textContent = 'قطع شده';
+    }
+}
+// فعال‌سازی چت
+function enableChat() {
+    chatEnabled = true;
+}
+// غیرفعال‌سازی چت
+function disableChat() {
+    chatEnabled = false;
+    document.getElementById('messageInput').disabled = true;
+    document.getElementById('sendButton').disabled = true;
+}
+// مدیریت وضعیت تایپ
+function handleTypingStatus(status) {
+    clearTimeout(typingTimeout);
+    const indicator = document.getElementById('typingIndicator');
+    if (status) {
+        indicator.classList.add('active');
+        isTyping = true;
+        typingTimeout = setTimeout(() => {
+            indicator.classList.remove('active');
+            isTyping = false;
+        }, 10000);
+    } else {
+        indicator.classList.remove('active');
+        isTyping = false;
+    }
+}
+// مدیریت پیام‌های دریافتی از بات
+function handleBotMessage(message) {
+    handleTypingStatus(false);
+    addMessage(message, 'bot');
+    if (soundEnabled) playMessageSound();
+}
+// مدیریت خطاها
+function handleError(message) {
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'system-message';
+    errorDiv.innerHTML = `⚠️ ${message}`;
+    document.getElementById('chat-messages').appendChild(errorDiv);
+}
+// ارسال پیام
+// ��غییر در تابع connectWebSocket
+function connectWebSocket() {
+    const clientId = Math.random().toString(36).substring(7);
+    ws = new WebSocket(
+        (window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
+        window.location.host + '/ws/' + clientId
+    );
+    ws.onmessage = handleWebSocketMessage;
+    ws.onopen = handleWebSocketOpen;
+    ws.onclose = handleWebSocketClose;
+    ws.onerror = handleWebSocketError;
+}
+async function updateStatus() {
+    try {
+        const response = await fetch('/status');
+        const status = await response.json();
+        const modelStatus = document.getElementById('model-status');
+        modelStatus.className = `badge ${status.model_loaded ? 'bg-success' : 'bg-danger'}`;
+        modelStatus.textContent = status.model_loaded ? 'فعال' : 'غیرفعال';
+        if (status.maintenance_mode) {
+            disableChat();
+            if (!document.querySelector('.maintenance-mode')) {
+                const maintenanceDiv = document.createElement('div');
+                maintenanceDiv.className = 'maintenance-mode';
+                maintenanceDiv.innerHTML = "🔧 سیستم در حال تعمیر است. لطفاً بعداً مراجعه کنید.";
+                document.getElementById('chat-messages').appendChild(maintenanceDiv);
+            }
+        } else if (!chatEnabled && status.model_loaded) {
+            enableChat();
+        }
+    } catch (e) {
+        console.error("خطا در به‌روزرسانی وضعیت:", e);
+        handleError("خطا در دریافت وضعیت سیستم");
+    }
+}
+// تغییر تم
+function toggleTheme() {
+    document.body.classList.toggle('dark-theme');
+    const themeBtn = document.getElementById('themeToggle');
+    themeBtn.textContent = document.body.classList.contains('dark-theme') ? '☀️' : '🌙';
+    localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light');
+    themeBtn.classList.add('ripple');
+    setTimeout(() => themeBtn.classList.remove('ripple'), 600);
+}
+// تغییر وضعیت صدا
+function toggleSound() {
+    soundEnabled = !soundEnabled;
+    const soundBtn = document.getElementById('soundToggle');
+    soundBtn.textContent = soundEnabled ? '🔊' : '🔇';
+    localStorage.setItem('sound', soundEnabled.toString());
+    soundBtn.classList.add('ripple');
+    setTimeout(() => soundBtn.classList.remove('ripple'), 600);
+}
+// پخش صدای پیام
+async function playMessageSound() {
+    try {
+        await messageSound.play();
+    } catch (e) {
+        console.log('خطا در پخش صدا:', e);
+    }
+}
+// اضافه کردن پیام به چت
+function addMessage(message, type) {
+    const messagesDiv = document.getElementById('chat-messages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${type}-message`;
+    const sanitizedMessage = message.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const time = new Date().toLocaleTimeString('fa-IR', {
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+    messageDiv.innerHTML = `
+        <div class="message-content">${sanitizedMessage}</div>
+        <span class="message-time">${time}</span>
+    `;
+    messagesDiv.appendChild(messageDiv);
+    requestAnimationFrame(() => {
+        messageDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    });
+}
+// دانلود تاریخچه چت
+function downloadChat() {
+    const messages = document.getElementById('chat-messages');
+    const text = Array.from(messages.children)
+        .map(msg => {
+            const content = msg.querySelector('.message-content')?.textContent || msg.textContent;
+            const time = msg.querySelector('.message-time')?.textContent || '';
+            let type = 'سیستم';
+            if (msg.classList.contains('user-message')) type = 'شما';
+            else if (msg.classList.contains('bot-message')) type = 'دستیار';
+            return `[${time}] ${type}: ${content}`;
+        })
+        .join('\n');
+    const now = new Date().toLocaleDateString('fa-IR');
+    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `chat-${now}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    handleError("✅ تاریخچه چت با موفقیت دانلود شد");
+}
+// پاک کردن تاریخچه چت
+function clearChat() {
+    if (confirm('آیا مطمئن هستید که می‌خواهید تاریخچه چت را پاک کنید؟')) {
+        const messages = document.getElementById('chat-messages');
+        const currentTime = new Date().toLocaleTimeString('fa-IR', {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+        messages.innerHTML = `
+            <div class="message bot-message">
+                سلام! من یک دستیار هوش مصنوعی هستم. چطور می‌توانم کمکتان کنم؟
+                <span class="message-time">${currentTime}</span>
+            </div>
+        `;
+        handleError("✅ تاریخچه چت با موفقیت پاک شد");
+    }
+}
+// به‌روزرسانی زمان سیستم
+function updateSystemTime() {
+    const systemTime = document.getElementById('system-time');
+    systemTime.textContent = new Date().toLocaleString('fa-IR');
+}
+// مدیریت کلید Enter
+function handleEnterKey(event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        sendMessage();
+    }
+}
+// فعال کردن ورودی زمانی که موس وارد باکس ورودی می‌شود
+function enableChatInput() {
+    if (!chatEnabled) return;
+    const messageInput = document.getElementById('messageInput');
+    const sendButton = document.getElementById('sendButton');
+    messageInput.disabled = false;
+    sendButton.disabled = false;
+    messageInput.focus();
+}
+// مقداردهی اولیه
+function initialize() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        document.body.classList.add('dark-theme');
+        document.getElementById('themeToggle').textContent = '☀️';
+    }
+    const savedSound = localStorage.getItem('sound');
+    if (savedSound === 'false') {
+        soundEnabled = false;
+        document.getElementById('soundToggle').textContent = '🔇';
+    }
+    connectWebSocket();
+    setInterval(updateStatus, 30000);
+    setInterval(updateSystemTime, 1000);
+    updateSystemTime();
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        && !localStorage.getItem('theme')) {
+        document.body.classList.add('dark-theme');
+        document.getElementById('themeToggle').textContent = '☀️';
+    }
+    document.getElementById('messageInput').addEventListener('keypress', handleEnterKey);
+    // اینجا رویداد ماوس رو اضافه می‌کنیم
+    const inputContainer = document.getElementById('inputContainer');
+    inputContainer.addEventListener('mouseover', enableChatInput);
+}
+window.addEventListener('load', initialize);
+</script>
+</body>
+</html>

templates/massage.mp3 ADDED Viewed

Binary file (68.5 kB). View file