Update app.py from anycoder

app.py

@@ -0,0 +1,469 @@
+import gradio as gr
+import random
+import time
+from datetime import datetime
+from typing import List, Dict, Tuple
+
+# Данные друзей и чатов
+friends_data = {
+    "AlexGamer": {"status": "online", "avatar": "🎮", "last_seen": "Сейчас"},
+    "ProPlayer": {"status": "online", "avatar": "🏆", "last_seen": "Сейчас"},
+    "BuilderMaster": {"status": "away", "avatar": "🏗️", "last_seen": "5 мин назад"},
+    "SpeedRunner": {"status": "offline", "avatar": "⚡", "last_seen": "1 час назад"},
+    "CreativeMind": {"status": "online", "avatar": "🎨", "last_seen": "Сейчас"},
+    "TeamLeader": {"status": "online", "avatar": "👑", "last_seen": "Сейчас"},
+    "NinjaWarrior": {"status": "offline", "avatar": "🥷", "last_seen": "2 часа назад"},
+    "MysteryPlayer": {"status": "away", "avatar": "🎭", "last_seen": "15 мин назад"}
+}
+
+# История чатов
+chat_history = {
+    "AlexGamer": [
+        {"role": "user", "content": "Привет! Как игра?", "time": "14:30"},
+        {"role": "friend", "content": "Привет! Отлично, новый рекорд поставил!", "time": "14:31"},
+        {"role": "user", "content": "Круто! В какую играл?", "time": "14:32"},
+        {"role": "friend", "content": "Tower of Hell, дошел до 15 уровня", "time": "14:33"}
+    ],
+    "ProPlayer": [
+        {"role": "friend", "content": "Готов к турниру сегодня?", "time": "13:45"},
+        {"role": "user", "content": "Да, жду не дождусь!", "time": "13:50"},
+        {"role": "friend", "content": "Встречаемся в 7 по серверу", "time": "13:52"}
+    ],
+    "BuilderMaster": [
+        {"role": "friend", "content": "Посмотри мой новый мир!", "time": "12:00"},
+        {"role": "user", "content": "Вау, это потрясающе!", "time": "12:15"}
+    ]
+}
+
+def get_status_color(status: str) -> str:
+    colors = {
+        "online": "#00ff00",
+        "away": "#ffaa00", 
+        "offline": "#666666"
+    }
+    return colors.get(status, "#666666")
+
+def format_chat_history(history: List[Dict]) -> List[Tuple[str, str]]:
+    formatted = []
+    for msg in history:
+        if msg["role"] == "user":
+            formatted.append((msg["content"], None))
+        else:
+            formatted.append((None, msg["content"]))
+    return formatted
+
+def send_message(message: str, current_friend: str, history: List[Tuple[str, str]]) -> Tuple[List[Tuple[str, str]], str]:
+    if not message.strip():
+        return history, ""
+    
+    current_time = datetime.now().strftime("%H:%M")
+    
+    # Добавляем сообщение в историю
+    if current_friend not in chat_history:
+        chat_history[current_friend] = []
+    
+    chat_history[current_friend].append({
+        "role": "user", 
+        "content": message,
+        "time": current_time
+    })
+    
+    # Форматируем для отображения
+    new_history = format_chat_history(chat_history[current_friend])
+    
+    # Симулируем ответ друга
+    time.sleep(1)
+    responses = [
+        "Отлично! 👍",
+        "Понял, согласен!",
+        "Круто, давай так!",
+        "😄 Отличная идея!",
+        "Обязательно попробую!",
+        "Спасибо за информацию!",
+        "Погнали! 🚀",
+        "Это просто эпик!"
+    ]
+    
+    bot_response = random.choice(responses)
+    chat_history[current_friend].append({
+        "role": "friend",
+        "content": bot_response,
+        "time": current_time
+    })
+    
+    final_history = format_chat_history(chat_history[current_friend])
+    return final_history, ""
+
+def select_friend(friend_name: str) -> Tuple[List[Tuple[str, str]], str]:
+    if friend_name in chat_history:
+        return format_chat_history(chat_history[friend_name]), f"Чат с {friend_name}"
+    return [], f"Начните чат с {friend_name}"
+
+def get_friends_list() -> List[Dict]:
+    friends_list = []
+    for name, info in friends_data.items():
+        status_color = get_status_color(info["status"])
+        friends_list.append({
+            "name": name,
+            "status": info["status"],
+            "avatar": info["avatar"],
+            "last_seen": info["last_seen"],
+            "status_color": status_color
+        })
+    return friends_list
+
+def create_friends_html() -> str:
+    friends_html = ""
+    for name, info in friends_data.items():
+        status_color = get_status_color(info["status"])
+        status_icon = "🟢" if info["status"] == "online" else "🟡" if info["status"] == "away" else "🔴"
+        
+        friends_html += f"""
+        <div class="friend-item" onclick="selectFriend('{name}')" style="cursor: pointer; padding: 12px; margin: 5px 0; border-radius: 10px; background: rgba(255, 255, 255, 0.05); transition: all 0.3s ease;">
+            <div style="display: flex; align-items: center; gap: 10px;">
+                <span style="font-size: 24px;">{info['avatar']}</span>
+                <div style="flex: 1;">
+                    <div style="display: flex; align-items: center; gap: 5px;">
+                        <span style="color: white; font-weight: bold;">{name}</span>
+                        <span style="color: {status_color}; font-size: 12px;">{status_icon}</span>
+                    </div>
+                    <div style="color: #888; font-size: 12px;">{info['last_seen']}</div>
+                </div>
+            </div>
+        </div>
+        """
+    return friends_html
+
+# CSS для стилизации в стиле Roblox Aero
+custom_css = """
+/* Основные стили в стиле Roblox Aero */
+.gradio-container {
+    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+    color: #ffffff;
+    font-family: 'Kalam', cursive;
+    min-height: 100vh;
+}
+
+/* Glass эффект для компонентов */
+.glass-effect {
+    background: rgba(20, 20, 20, 0.7) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* Стили для чата */
+.message-user {
+    background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
+    color: #000000 !important;
+    border-radius: 18px 18px 4px 18px !important;
+    margin-left: auto !important;
+    font-weight: bold;
+}
+
+.message-friend {
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #ffffff !important;
+    border-radius: 18px 18px 18px 4px !important;
+    border: 1px solid rgba(255, 215, 0, 0.3);
+}
+
+/* Стили для кнопок */
+.btn-primary {
+    background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
+    color: #000000 !important;
+    border: none !important;
+    border-radius: 20px !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease !important;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 30px rgba(255, 215, 0, 0.5) !important;
+}
+
+/* Стили для друзей */
+.friend-item:hover {
+    background: rgba(255, 215, 0, 0.1) !important;
+    border: 1px solid rgba(255, 215, 0, 0.3) !important;
+    transform: translateX(5px);
+}
+
+/* Заголовки */
+.chat-header {
+    background: rgba(20, 20, 20, 0.9) !important;
+    border-bottom: 2px solid #ffd700 !important;
+    color: #ffd700 !important;
+    font-weight: bold !important;
+}
+
+/* Анимации */
+@keyframes glow {
+    from { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5)); }
+    to { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
+}
+
+.glow-text {
+    animation: glow 2s ease-in-out infinite alternate;
+}
+
+/* Поле ввода */
+.input-message {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border: 1px solid rgba(255, 215, 0, 0.3) !important;
+    border-radius: 20px !important;
+    color: #ffffff !important;
+}
+
+.input-message::placeholder {
+    color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Табы */
+.tab-nav {
+    background: rgba(20, 20, 20, 0.8) !important;
+    border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
+}
+
+.tab-nav button {
+    color: #ffffff !important;
+    border: none !important;
+    background: transparent !important;
+}
+
+.tab-nav button.selected {
+    color: #ffd700 !important;
+    border-bottom: 2px solid #ffd700 !important;
+}
+"""
+
+# JavaScript для интерактивности
+custom_js = """
+function selectFriend(friendName) {
+    // Находим и кликаем на соответствующего друга в интерфейсе
+    const friendButtons = document.querySelectorAll('[data-testid="radio"]');
+    friendButtons.forEach(btn => {
+        if(btn.textContent.includes(friendName)) {
+            btn.click();
+        }
+    });
+}
+
+// Добавляем анимацию для новых сообщений
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+            const newMessages = mutation.addedNodes;
+            newMessages.forEach(node => {
+                if(node.classList && node.classList.contains('message-user')) {
+                    node.style.animation = 'slideInRight 0.3s ease';
+                } else if(node.classList && node.classList.contains('message-friend')) {
+                    node.style.animation = 'slideInLeft 0.3s ease';
+                }
+            });
+        }
+    });
+});
+
+// Наблюдаем за изменениями в чате
+const chatContainer = document.querySelector('[data-testid="chatbot"]');
+if(chatContainer) {
+    observer.observe(chatContainer, { childList: true, subtree: true });
+}
+
+// Добавляем CSS анимации
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideInRight {
+        from { transform: translateX(100%); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes slideInLeft {
+        from { transform: translateX(-100%); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+`;
+document.head.appendChild(style);
+"""
+
+with gr.Blocks() as demo:
+    gr.HTML("""
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Caveat:wght@400;700&display=swap');
+    </style>
+    """)
+    
+    gr.HTML("""
+    <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, rgba(20,20,20,0.9), rgba(10,10,10,0.9));
+                border-bottom: 2px solid #ffd700; margin-bottom: 20px; border-radius: 15px;">
+        <h1 style="color: #ffd700; font-family: 'Caveat', cursive; font-size: 48px; margin: 0; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);">
+            💬 Чат с друзьями
+        </h1>
+        <p style="color: #b0b0b0; font-family: 'Kalam', cursive; margin: 10px 0 0 0;">
+            Общайся с друзьями в реальном времени
+        </p>
+        <p style="margin-top: 10px;">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" 
+               style="color: #ffd700; text-decoration: none; font-size: 14px;">
+                Built with anycoder
+            </a>
+        </p>
+    </div>
+    """)
+    
+    with gr.Row(equal_height=True):
+        # Список друзей
+        with gr.Column(scale=1):
+            gr.HTML('<h3 style="color: #ffd700; margin-bottom: 15px;">👥 Друзья</h3>')
+            with gr.Group(elem_classes=["glass-effect"]):
+                friends_html = gr.HTML(create_friends_html())
+                
+                # Статистика
+                gr.HTML(f"""
+                <div style="margin-top: 20px; padding: 15px; background: rgba(255,215,0,0.1); border-radius: 10px;">
+                    <div style="color: #ffd700; font-weight: bold; margin-bottom: 10px;">📊 Статистика</div>
+                    <div style="color: #ffffff; font-size: 14px;">
+                        <div>🟢 Онлайн: {sum(1 for f in friends_data.values() if f['status'] == 'online')}</div>
+                        <div>🟡 Отошли: {sum(1 for f in friends_data.values() if f['status'] == 'away')}</div>
+                        <div>🔴 Офлайн: {sum(1 for f in friends_data.values() if f['status'] == 'offline')}</div>
+                        <div>📝 Всего друзей: {len(friends_data)}</div>
+                    </div>
+                </div>
+                """)
+        
+        # Основная область чата
+        with gr.Column(scale=2):
+            with gr.Row():
+                # Выбор друга
+                friend_choice = gr.Radio(
+                    choices=list(friends_data.keys()),
+                    value="AlexGamer",
+                    label="Выберите друга для чата",
+                    elem_classes=["glass-effect"],
+                    interactive=True
+                )
+            
+            # История чата
+            chatbot = gr.Chatbot(
+                value=format_chat_history(chat_history.get("AlexGamer", [])),
+                height=400,
+                show_copy_button=True,
+                bubble_full_width=False,
+                elem_classes=["glass-effect"],
+                avatar_images=(None, None)
+            )
+            
+            # Поле ввода сообщения
+            with gr.Row():
+                msg_input = gr.Textbox(
+                    placeholder="Введите сообщение...",
+                    label="Сообщение",
+                    elem_classes=["input-message"],
+                    scale=4,
+                    container=False
+                )
+                send_btn = gr.Button(
+                    "➤",
+                    elem_classes=["btn-primary"],
+                    scale=1,
+                    size="lg"
+                )
+            
+            # Кнопки действий
+            with gr.Row():
+                emoji_btn = gr.Button("😊 Эмодзи", elem_classes=["btn-primary"], scale=1)
+                voice_btn = gr.Button("🎤 Голос", elem_classes=["btn-primary"], scale=1)
+                photo_btn = gr.Button("📷 Фото", elem_classes=["btn-primary"], scale=1)
+                clear_btn = gr.Button("🗑️ Очистить", elem_classes=["btn-primary"], scale=1)
+    
+    # Обработчики событий
+    def handle_friend_change(friend_name):
+        return format_chat_history(chat_history.get(friend_name, []))
+    
+    friend_choice.change(
+        handle_friend_change,
+        inputs=[friend_choice],
+        outputs=[chatbot]
+    )
+    
+    def handle_send(message, friend, history):
+        if message.strip():
+            return send_message(message, friend, history)
+        return history, ""
+    
+    send_btn.click(
+        handle_send,
+        inputs=[msg_input, friend_choice, chatbot],
+        outputs=[chatbot, msg_input]
+    )
+    
+    msg_input.submit(
+        handle_send,
+        inputs=[msg_input, friend_choice, chatbot],
+        outputs=[chatbot, msg_input]
+    )
+    
+    # Обработка кнопок эмодзи
+    def add_emoji(emoji_type):
+        emojis = {
+            "😊": "😊 😂 🤣 😍 😎 🤔 🤗 😴 🥳 🎉",
+            "🎮": "🎮 🎯 🎪 🎨 🎭 🎪 🎯 🎲",
+            "❤️": "❤️ 💛 💚 💙 💜 🖤 💔"
+        }
+        return emojis.get(emoji_type, "😊")
+    
+    emoji_btn.click(
+        lambda: gr.Info("Выберите эмодзи: 😊 😂 🤣 😍 😎 🤔 🤗 😴 🥳 🎉"),
+        inputs=[],
+        outputs=[]
+    )
+    
+    voice_btn.click(
+        lambda: gr.Info("🎤 Голосовые сообщения в разработке"),
+        inputs=[],
+        outputs=[]
+    )
+    
+    photo_btn.click(
+        lambda: gr.Info("📷 Загрузка изображений в разработке"),
+        inputs=[],
+        outputs=[]
+    )
+    
+    clear_btn.click(
+        lambda: ([], ""),
+        outputs=[chatbot, msg_input]
+    )
+
+demo.launch(
+    theme=gr.themes.Soft(
+        primary_hue="yellow",
+        secondary_hue="orange", 
+        neutral_hue="slate",
+        font=gr.themes.GoogleFont("Kalam"),
+        text_size="lg",
+        spacing_size="lg",
+        radius_size="md"
+    ).set(
+        body_background_fill="*primary_950",
+        block_background_fill="*neutral_950",
+        block_border_width="1px",
+        block_border_color="*neutral_800",
+        block_radius="15px",
+        button_primary_background_fill="linear-gradient(135deg, *primary_600, *primary_400)",
+        button_primary_background_fill_hover="linear-gradient(135deg, *primary_500, *primary_300)",
+        button_primary_text_color="*neutral_950",
+        chatbot_background_fill="*neutral_950",
+        chatbot_message_user_background_fill="linear-gradient(135deg, *primary_600, *primary_400)",
+        chatbot_message_user_text_color="*neutral_950",
+        chatbot_message_assistant_background_fill="*neutral_800",
+        chatbot_message_assistant_text_color="*neutral_100"
+    ),
+    css=custom_css,
+    js=custom_js,
+    footer_links=[
+        {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
+    ]
+)