Deploy MemoryAI to memoryotherone

.gitignore

@@ -0,0 +1,18 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Environment
+.env
+.venv
+venv/
+
+# Data
+data/
+models/
+
+# IDE
+.idea/
+.vscode/
+*.swp

README.md

@@ -1,14 +1,27 @@
----
-title: Memoryotherone
-emoji: 🐨
-colorFrom: indigo
-colorTo: gray
-sdk: gradio
-sdk_version: 6.3.0
-app_file: app.py
-pinned: false
-license: mit
-short_description: other memory test
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🤖 MemoryAI - Conversational AI with Memory
+
+MemoryAI is a conversational AI that remembers your past conversations and uses that context to provide better responses.
+
+## Features
+
+✅ **Memory System**: Remembers past conversations
+✅ **Context-Aware**: Uses conversation history for better responses
+✅ **Multiple Models**: Supports different AI models
+✅ **Web Interface**: Beautiful chat interface
+✅ **Persistent**: Saves memories between sessions
+
+## How to Use
+
+1. Type your message in the input box
+2. Press Enter or click Send
+3. View memories with the 📚 button
+4. Clear memories with 🗑️ button
+5. Save manually with 💾 button
+
+## Configuration
+
+The app uses `microsoft/DialoGPT-small` by default, which is optimized for conversation.
+
+## About
+
+This Space demonstrates how to build a conversational AI with memory capabilities using Hugging Face models.

app.py

@@ -0,0 +1,82 @@
+#!/usr/bin/env python3
+"""
+Hugging Face Spaces compatible app for MemoryAI.
+This is the main entry point for the Spaces deployment.
+"""
+
+import os
+from dotenv import load_dotenv
+from flask import Flask, render_template, request, jsonify
+from src.main import MemoryAI
+
+# Load environment variables
+load_dotenv()
+
+# Initialize Flask app
+app = Flask(__name__)
+
+# Initialize MemoryAI with better default model for Spaces
+if not os.getenv("MODEL_NAME"):
+    os.environ["MODEL_NAME"] = "microsoft/DialoGPT-small"
+
+# Global MemoryAI instance
+ai = MemoryAI()
+ai.load_memories()
+
+@app.route('/')
+def home():
+    """Render the main chat interface."""
+    return render_template('spaces_chat.html')
+
+@app.route('/api/memories', methods=['GET'])
+def get_memories():
+    """Get recent memories as JSON."""
+    recent_memories = ai.get_recent_memories(10)
+    return jsonify({
+        'memories': recent_memories,
+        'total_memories': len(ai.memories)
+    })
+
+@app.route('/api/clear', methods=['POST'])
+def clear_memories():
+    """Clear all memories."""
+    ai.clear_memories()
+    return jsonify({'status': 'success', 'message': 'All memories cleared'})
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    """Get AI response to user input."""
+    data = request.json
+    user_input = data.get('message', '')
+    
+    if not user_input.strip():
+        return jsonify({'error': 'Empty message'}), 400
+    
+    # Add user input to memories
+    ai.add_memory(f"User: {user_input}")
+    
+    # Get recent memories for context
+    recent_context = "\n".join(ai.get_recent_memories(3))
+    full_prompt = f"{recent_context}\n\nUser: {user_input}\nAI:"
+    
+    # Generate AI response
+    response = ai.generate_response(full_prompt)
+    
+    # Add AI response to memories
+    ai.add_memory(f"AI: {response}")
+    
+    return jsonify({
+        'response': response,
+        'memory_count': len(ai.memories)
+    })
+
+@app.route('/api/save', methods=['POST'])
+def save_memories():
+    """Save memories to file."""
+    ai.save_memories()
+    return jsonify({'status': 'success', 'message': 'Memories saved'})
+
+if __name__ == '__main__':
+    # Hugging Face Spaces will run this with their own server
+    # For local testing, you can use:
+    app.run(debug=True, host='0.0.0.0', port=int(os.environ.get('PORT', 7860)))

spaces_requirements.txt

@@ -0,0 +1,12 @@
+# Hugging Face Spaces requirements
+# This file contains the dependencies needed for deployment
+
+transformers==4.40.0
+torch==2.2.0
+flask==3.1.2
+python-dotenv==1.0.1
+datasets==4.4.2
+accelerate==1.12.0
+blinker==1.9.0
+itsdangerous==2.2.0
+werkzeug==3.1.5

src/main.py

@@ -0,0 +1,233 @@
+#!/usr/bin/env python3
+"""
+Main application for the Hugging Face Memory Project.
+Handles conversation interface and memory management.
+"""
+
+import os
+from dotenv import load_dotenv
+from transformers import AutoModelForCausalLM, AutoTokenizer
+import torch
+
+# Load environment variables
+load_dotenv()
+
+class MemoryAI:
+    def __init__(self):
+        """Initialize the AI model and memory system."""
+        self.model_name = os.getenv("MODEL_NAME", "gpt2")
+        self.max_memory = int(os.getenv("MAX_MEMORY_ENTRIES", 100))
+        self.data_dir = os.getenv("DATA_DIR", "data")
+        self.models_dir = os.getenv("MODELS_DIR", "models")
+        
+        # Load generation parameters from environment
+        self.temperature = float(os.getenv("TEMPERATURE", 0.7))
+        self.max_new_tokens = int(os.getenv("MAX_NEW_TOKENS", 80))
+        self.top_p = float(os.getenv("TOP_P", 0.9))
+        self.repetition_penalty = float(os.getenv("REPETITION_PENALTY", 1.2))
+        
+        # Initialize memory storage
+        self.memories = []
+        
+        # Load model and tokenizer
+        print(f"Loading {self.model_name} model...")
+        self.tokenizer = AutoTokenizer.from_pretrained(self.model_name)
+        self.model = AutoModelForCausalLM.from_pretrained(self.model_name)
+        
+        # Move model to GPU if available
+        if torch.cuda.is_available():
+            self.model = self.model.to('cuda')
+            print("Using CUDA (GPU acceleration)")
+        else:
+            print("Using CPU")
+        
+        print(f"Initialized {self.model_name} model")
+        print(f"Memory capacity: {self.max_memory} entries")
+        print(f"Generation params - Temp: {self.temperature}, Max tokens: {self.max_new_tokens}")
+    
+    def add_memory(self, memory_text):
+        """Add a memory entry to the system."""
+        if len(self.memories) >= self.max_memory:
+            self.memories.pop(0)  # Remove oldest memory
+        
+        self.memories.append(memory_text)
+        print(f"Memory added. Total memories: {len(self.memories)}")
+    
+    def generate_response(self, prompt, max_new_tokens=80):
+        """Generate a response using the AI model with improved quality."""
+        # Improved prompt engineering for conversational AI
+        if "microsoft/DialoGPT" in self.model_name:
+            # DialoGPT uses a different format
+            improved_prompt = prompt
+        else:
+            # For other models, use better prompt engineering
+            improved_prompt = f"{prompt}\n\nAssistant:"
+        
+        inputs = self.tokenizer(improved_prompt, return_tensors="pt")
+        
+        # Move inputs to same device as model
+        if next(self.model.parameters()).is_cuda:
+            inputs = {k: v.to('cuda') for k, v in inputs.items()}
+        
+        # Generate with better parameters
+        outputs = self.model.generate(
+            **inputs,
+            max_new_tokens=self.max_new_tokens,
+            temperature=self.temperature,
+            top_p=self.top_p,
+            do_sample=True,  # Enable sampling
+            repetition_penalty=self.repetition_penalty,
+            no_repeat_ngram_size=2,  # Prevent exact repeats
+            pad_token_id=self.tokenizer.eos_token_id,
+            eos_token_id=self.tokenizer.eos_token_id
+        )
+        
+        response = self.tokenizer.decode(outputs[0], skip_special_tokens=True)
+        
+        # Extract only the new part of the response
+        response = response[len(improved_prompt):].strip()
+        
+        # Clean up response
+        response = self._clean_response(response)
+        
+        # Fallback for poor responses
+        if not response or len(response.split()) < 2 or response.startswith("I'm"):
+            response = self._generate_fallback_response(prompt)
+        
+        return response
+    
+    def _generate_fallback_response(self, prompt):
+        """Generate a fallback response when the model produces poor output."""
+        # Simple rule-based responses for common questions
+        prompt_lower = prompt.lower()
+        
+        if "hello" in prompt_lower or "hi" in prompt_lower or "hey" in prompt_lower:
+            return "Hello! I'm MemoryAI, your conversational assistant. How can I help you today?"
+        elif "how are you" in prompt_lower:
+            return "I'm doing well, thank you for asking! As an AI, I'm always ready to chat. How about you?"
+        elif "your name" in prompt_lower:
+            return "I'm MemoryAI! I'm designed to remember our conversations and provide helpful responses."
+        elif "memory" in prompt_lower and ("work" in prompt_lower or "how" in prompt_lower):
+            return "I remember our past conversations and use that context to provide better, more relevant responses. It's like having a conversation with someone who remembers what you've talked about before!"
+        elif "thank" in prompt_lower or "thanks" in prompt_lower:
+            return "You're welcome! I'm happy to help. Is there anything else you'd like to talk about?"
+        elif "joke" in prompt_lower:
+            return "Why don't scientists trust atoms? Because they make up everything!"
+        elif "weather" in prompt_lower:
+            return "I can't check real-time weather, but I hope it's nice where you are! What city are you in?"
+        else:
+            # Generic fallback
+            return "That's an interesting question! As an AI with memory, I can tell you that we've talked about various topics. What would you like to discuss?"
+    
+    def _clean_response(self, response):
+        """Clean up the AI response for better quality."""
+        # Remove incomplete sentences at the end
+        if response.endswith(('...', '..', '.')) and len(response.split()) < 3:
+            # If it's a very short response ending with dots, keep it
+            pass
+        else:
+            # Remove trailing incomplete words
+            response = response.rstrip('.,;:!?')
+            
+        # Remove excessive repetition
+        words = response.split()
+        if len(words) > 1:
+            # Check for repeated phrases
+            for i in range(min(3, len(words) // 2)):
+                phrase = ' '.join(words[-i-1:-1])
+                if response.endswith(f" {phrase} {phrase}"):
+                    response = response[:-len(f" {phrase}")].rstrip()
+                    break
+        
+        # Capitalize first letter if it's a complete sentence
+        if len(response) > 0 and response[0].islower():
+            response = response[0].upper() + response[1:]
+            
+        # Add punctuation if missing
+        if len(response) > 0 and response[-1] not in ('.', '!', '?'):
+            response += '.'
+            
+        return response
+    
+    def converse(self):
+        """Start a conversation loop with the AI."""
+        print("Starting conversation... Type 'quit' to exit.")
+        print("Type '!memories' to see recent memories, '!clear' to clear memories")
+        
+        while True:
+            user_input = input("You: ")
+            
+            if user_input.lower() == 'quit':
+                break
+            
+            # Handle special commands
+            if user_input.lower() == '!memories':
+                recent_memories = self.get_recent_memories()
+                print("Recent memories:")
+                for i, memory in enumerate(recent_memories, 1):
+                    print(f"  {i}. {memory}")
+                continue
+            
+            if user_input.lower() == '!clear':
+                self.clear_memories()
+                continue
+            
+            # Add user input to memories
+            self.add_memory(f"User: {user_input}")
+            
+            # Get recent memories for context
+            recent_context = "\n".join(self.get_recent_memories(3))
+            full_prompt = f"{recent_context}\n\nUser: {user_input}\nAI:"
+            
+            # Generate AI response
+            response = self.generate_response(full_prompt)
+            print(f"AI: {response}")
+            
+            # Add AI response to memories
+            self.add_memory(f"AI: {response}")
+    
+    def get_available_models(self):
+        """Get a list of commonly available models."""
+        return [
+            "gpt2",
+            "distilgpt2",
+            "gpt2-medium",
+            "gpt2-large",
+            "EleutherAI/gpt-neo-125M",
+            "facebook/opt-125m",
+            "microsoft/DialoGPT-small",
+            "microsoft/DialoGPT-medium"
+        ]
+    
+    def save_memories(self):
+        """Save memories to a file."""
+        memory_file = os.path.join(self.data_dir, "memories.txt")
+        with open(memory_file, 'w') as f:
+            for memory in self.memories:
+                f.write(memory + "\n")
+        print(f"Memories saved to {memory_file}")
+    
+    def load_memories(self):
+        """Load memories from a file."""
+        memory_file = os.path.join(self.data_dir, "memories.txt")
+        if os.path.exists(memory_file):
+            with open(memory_file, 'r') as f:
+                self.memories = [line.strip() for line in f.readlines() if line.strip()]
+            print(f"Loaded {len(self.memories)} memories from {memory_file}")
+        else:
+            print("No existing memories found.")
+    
+    def get_recent_memories(self, count=5):
+        """Get the most recent memories."""
+        return self.memories[-count:] if self.memories else []
+    
+    def clear_memories(self):
+        """Clear all memories."""
+        self.memories = []
+        print("All memories cleared.")
+
+if __name__ == "__main__":
+    ai = MemoryAI()
+    ai.load_memories()  # Load existing memories
+    ai.converse()
+    ai.save_memories()

templates/spaces_chat.html

@@ -0,0 +1,596 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MemoryAI - Conversational AI with Memory</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        }
+        
+        body {
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+        
+        header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 24px;
+            text-align: center;
+        }
+        
+        h1 {
+            font-size: 1.8rem;
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+        
+        .subtitle {
+            font-size: 0.9rem;
+            opacity: 0.95;
+            font-weight: 300;
+        }
+        
+        .chat-container {
+            height: 500px;
+            overflow-y: auto;
+            padding: 20px;
+            background-color: #f8f9fa;
+        }
+        
+        .chat-message {
+            margin-bottom: 16px;
+            padding: 12px 16px;
+            border-radius: 18px;
+            max-width: 85%;
+            word-wrap: break-word;
+            position: relative;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+        
+        .user-message {
+            background-color: #e3f2fd;
+            margin-left: auto;
+            color: #1976d2;
+            border-bottom-right-radius: 4px;
+        }
+        
+        .ai-message {
+            background-color: #ffffff;
+            margin-right: auto;
+            color: #424242;
+            border-bottom-left-radius: 4px;
+        }
+        
+        .message-header {
+            font-weight: 600;
+            margin-bottom: 4px;
+            font-size: 0.85rem;
+            color: #666;
+        }
+        
+        .message-content {
+            font-size: 0.95rem;
+            line-height: 1.5;
+        }
+        
+        .input-area {
+            display: flex;
+            padding: 16px;
+            background-color: #ffffff;
+            border-top: 1px solid #eaeaea;
+            gap: 12px;
+        }
+        
+        #message-input {
+            flex: 1;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 24px;
+            font-size: 0.95rem;
+            outline: none;
+            transition: all 0.2s;
+            background-color: #f8f9fa;
+        }
+        
+        #message-input:focus {
+            border-color: #667eea;
+            background-color: white;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        
+        #send-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 24px;
+            cursor: pointer;
+            font-size: 0.95rem;
+            font-weight: 600;
+            transition: all 0.2s;
+            white-space: nowrap;
+        }
+        
+        #send-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+        }
+        
+        #send-button:disabled {
+            background: #cccccc;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        
+        .controls {
+            display: flex;
+            padding: 12px 16px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #eaeaea;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+        
+        .control-button {
+            padding: 8px 12px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.8rem;
+            font-weight: 500;
+            transition: all 0.2s;
+            background-color: white;
+            color: #666;
+            border: 1px solid #e0e0e0;
+        }
+        
+        .control-button:hover {
+            background-color: #f0f0f0;
+            transform: translateY(-1px);
+        }
+        
+        .typing-indicator {
+            display: none;
+            align-items: center;
+            gap: 6px;
+            padding: 8px 16px;
+            font-style: italic;
+            color: #666;
+            font-size: 0.85rem;
+        }
+        
+        .typing-indicator.show {
+            display: flex;
+        }
+        
+        .dot-typing {
+            display: flex;
+            gap: 2px;
+        }
+        
+        .dot-typing span {
+            width: 6px;
+            height: 6px;
+            background-color: #667eea;
+            border-radius: 50%;
+            display: inline-block;
+            animation: bounce 1.4s infinite ease-in-out;
+        }
+        
+        .dot-typing span:nth-child(1) {
+            animation-delay: -0.32s;
+        }
+        
+        .dot-typing span:nth-child(2) {
+            animation-delay: -0.16s;
+        }
+        
+        @keyframes bounce {
+            0%, 80%, 100% {
+                transform: scale(0);
+            }
+            40% {
+                transform: scale(1);
+            }
+        }
+        
+        .status-bar {
+            padding: 8px 16px;
+            background-color: #e8eaf6;
+            font-size: 0.8rem;
+            color: #555;
+            border-bottom: 1px solid #eaeaea;
+        }
+        
+        .memory-panel {
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 300px;
+            height: 100%;
+            background-color: white;
+            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+            overflow-y: auto;
+            padding: 20px;
+        }
+        
+        .memory-panel.show {
+            transform: translateX(0);
+        }
+        
+        .memory-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eaeaea;
+        }
+        
+        .memory-count {
+            font-weight: 600;
+            color: #667eea;
+        }
+        
+        .close-memory-panel {
+            background: none;
+            border: none;
+            color: #999;
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0;
+        }
+        
+        .memory-item {
+            padding: 8px 12px;
+            margin: 6px 0;
+            background-color: #f8f9fa;
+            border-left: 3px solid #667eea;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            line-height: 1.4;
+        }
+        
+        .memory-item:nth-child(even) {
+            background-color: #f0f0f0;
+        }
+        
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.3);
+            z-index: 999;
+            display: none;
+        }
+        
+        .overlay.show {
+            display: block;
+        }
+        
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            
+            .container {
+                border-radius: 8px;
+            }
+            
+            .input-area {
+                flex-direction: column;
+                gap: 8px;
+            }
+            
+            #send-button {
+                padding: 12px;
+            }
+            
+            .memory-panel {
+                width: 100%;
+                height: 80%;
+                top: auto;
+                bottom: 0;
+                transform: translateY(100%);
+            }
+            
+            .memory-panel.show {
+                transform: translateY(0);
+            }
+        }
+        
+        /* Hugging Face Spaces specific styles */
+        .spaces-header {
+            display: none !important;
+        }
+    </style>
+</head>
+<body>
+    <div class="overlay" id="overlay"></div>
+    
+    <div class="container">
+        <header>
+            <h1>🤖 MemoryAI</h1>
+            <p class="subtitle">Conversational AI with Memory - Hugging Face Spaces</p>
+        </header>
+        
+        <div class="status-bar">
+            <span id="status-text">Ready to chat! Type your message below.</span>
+        </div>
+        
+        <div class="controls">
+            <button class="control-button" id="show-memories-btn">📚 Memories</button>
+            <button class="control-button" id="clear-memories-btn">🗑️ Clear</button>
+            <button class="control-button" id="save-memories-btn">💾 Save</button>
+        </div>
+        
+        <div class="memory-panel" id="memory-panel">
+            <div class="memory-header">
+                <span class="memory-count">Memories (<span id="memory-count">0</span>)</span>
+                <button class="close-memory-panel" id="close-memory-panel">×</button>
+            </div>
+            <div class="memory-list" id="memory-list">
+                <p>No memories yet. Start a conversation!</p>
+            </div>
+        </div>
+        
+        <div class="chat-container" id="chat-container">
+            <div class="chat-message ai-message">
+                <div class="message-header">MemoryAI:</div>
+                <div class="message-content">
+                    Hello! I'm MemoryAI running on Hugging Face Spaces. 🚀
+                    I can remember our conversations and provide context-aware responses.
+                    Try asking me anything!
+                </div>
+            </div>
+        </div>
+        
+        <div class="typing-indicator" id="typing-indicator">
+            <span>MemoryAI is thinking</span>
+            <div class="dot-typing">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+        
+        <div class="input-area">
+            <input type="text" id="message-input" placeholder="Type your message here..." autocomplete="off">
+            <button id="send-button">Send</button>
+        </div>
+    </div>
+    
+    <script>
+        // DOM elements
+        const chatContainer = document.getElementById('chat-container');
+        const messageInput = document.getElementById('message-input');
+        const sendButton = document.getElementById('send-button');
+        const typingIndicator = document.getElementById('typing-indicator');
+        const statusText = document.getElementById('status-text');
+        const memoryPanel = document.getElementById('memory-panel');
+        const memoryList = document.getElementById('memory-list');
+        const memoryCount = document.getElementById('memory-count');
+        const showMemoriesBtn = document.getElementById('show-memories-btn');
+        const closeMemoryPanel = document.getElementById('close-memory-panel');
+        const clearMemoriesBtn = document.getElementById('clear-memories-btn');
+        const saveMemoriesBtn = document.getElementById('save-memories-btn');
+        const overlay = document.getElementById('overlay');
+        
+        // Scroll to bottom of chat
+        function scrollToBottom() {
+            setTimeout(() => {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }, 50);
+        }
+        
+        // Add message to chat
+        function addMessage(sender, message) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `chat-message ${sender}-message`;
+            
+            messageDiv.innerHTML = `
+                <div class="message-header">${sender}:</div>
+                <div class="message-content">${message}</div>
+            `;
+            
+            chatContainer.appendChild(messageDiv);
+            scrollToBottom();
+        }
+        
+        // Show typing indicator
+        function showTyping() {
+            typingIndicator.classList.add('show');
+            scrollToBottom();
+        }
+        
+        // Hide typing indicator
+        function hideTyping() {
+            typingIndicator.classList.remove('show');
+        }
+        
+        // Update status
+        function updateStatus(text) {
+            statusText.textContent = text;
+        }
+        
+        // Toggle memory panel
+        function toggleMemoryPanel(show) {
+            if (show) {
+                memoryPanel.classList.add('show');
+                overlay.classList.add('show');
+                loadMemories();
+            } else {
+                memoryPanel.classList.remove('show');
+                overlay.classList.remove('show');
+            }
+        }
+        
+        // Load and display memories
+        async function loadMemories() {
+            try {
+                const response = await fetch('/api/memories');
+                const data = await response.json();
+                
+                memoryList.innerHTML = '';
+                memoryCount.textContent = data.total_memories;
+                
+                if (data.memories.length === 0) {
+                    memoryList.innerHTML = '<p>No memories yet. Start a conversation!</p>';
+                } else {
+                    data.memories.forEach((memory, index) => {
+                        const memoryItem = document.createElement('div');
+                        memoryItem.className = 'memory-item';
+                        memoryItem.textContent = memory;
+                        memoryList.appendChild(memoryItem);
+                    });
+                }
+            } catch (error) {
+                console.error('Error loading memories:', error);
+                memoryList.innerHTML = '<p>Error loading memories</p>';
+            }
+        }
+        
+        // Clear memories
+        async function clearMemories() {
+            if (confirm('Clear all memories? This cannot be undone.')) {
+                try {
+                    const response = await fetch('/api/clear', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    });
+                    
+                    const data = await response.json();
+                    updateStatus(data.message);
+                    
+                    // Clear chat except for initial message
+                    chatContainer.innerHTML = `
+                        <div class="chat-message ai-message">
+                            <div class="message-header">MemoryAI:</div>
+                            <div class="message-content">
+                                Memory cleared! Hello again! I'm MemoryAI running on Hugging Face Spaces. 🚀
+                                Fresh start - ask me anything!
+                            </div>
+                        </div>
+                    `;
+                    
+                    // Close memory panel if open
+                    toggleMemoryPanel(false);
+                } catch (error) {
+                    console.error('Error clearing memories:', error);
+                    updateStatus('Error clearing memories');
+                }
+            }
+        }
+        
+        // Save memories
+        async function saveMemories() {
+            try {
+                const response = await fetch('/api/save', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+                
+                const data = await response.json();
+                updateStatus(data.message);
+            } catch (error) {
+                console.error('Error saving memories:', error);
+                updateStatus('Error saving memories');
+            }
+        }
+        
+        // Send message to AI
+        async function sendMessage() {
+            const message = messageInput.value.trim();
+            
+            if (!message) return;
+            
+            // Add user message to chat
+            addMessage('User', message);
+            messageInput.value = '';
+            
+            // Show typing indicator
+            showTyping();
+            updateStatus('MemoryAI is thinking...');
+            
+            try {
+                const response = await fetch('/api/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ message: message })
+                });
+                
+                const data = await response.json();
+                
+                if (data.error) {
+                    addMessage('AI', `Error: ${data.error}`);
+                    updateStatus('Error getting response');
+                } else {
+                    addMessage('AI', data.response);
+                    updateStatus(`MemoryAI responded (${data.memory_count} memories)`);
+                }
+            } catch (error) {
+                console.error('Error getting AI response:', error);
+                addMessage('AI', 'Sorry, I encountered an error. Please try again.');
+                updateStatus('Error connecting to AI');
+            } finally {
+                hideTyping();
+            }
+        }
+        
+        // Event listeners
+        sendButton.addEventListener('click', sendMessage);
+        
+        messageInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        
+        showMemoriesBtn.addEventListener('click', () => toggleMemoryPanel(true));
+        closeMemoryPanel.addEventListener('click', () => toggleMemoryPanel(false));
+        overlay.addEventListener('click', () => toggleMemoryPanel(false));
+        
+        clearMemoriesBtn.addEventListener('click', clearMemories);
+        saveMemoriesBtn.addEventListener('click', saveMemories);
+        
+        // Initialize
+        scrollToBottom();
+        updateStatus('Ready to chat on Hugging Face Spaces! 🎉');
+        
+        // Auto-save memories every minute
+        setInterval(saveMemories, 60000);
+        
+        // Welcome message for Spaces
+        console.log('MemoryAI running on Hugging Face Spaces! 🚀');
+    </script>
+</body>
+</html>