Upload 10 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+generated-icon.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,103 @@
+import os
+import logging
+from flask import Flask, render_template, request, jsonify
+import g4f
+from g4f.client import Client
+import os
+import logging
+from flask import Flask, render_template, request, jsonify
+import g4f
+from g4f.client import Client
+
+
+# Configure logging
+
+# Configure logging
+logging.basicConfig(level=logging.DEBUG)
+logger = logging.getLogger(__name__)
+
+# Create Flask app
+app = Flask(__name__)
+app.secret_key = os.environ.get("SESSION_SECRET", "default_secret_key")
+
+# Initialize g4f client
+client = Client()
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    try:
+        data = request.json
+        messages = data.get('messages', [])
+        model = data.get('model', 'gpt-4o-mini')
+
+        # Add system prompt
+        system_prompt = {
+            "role":
+            "system",
+            "content":
+            "You are orion helpful AI assistant. You provide accurate, informative, and friendly responses while keeping them concise and relevant and you are make by Abdullah ali who is 13 years old "
+        }
+
+        # Insert system prompt at the beginning if not already present
+        if not messages or messages[0].get('role') != 'system':
+            messages.insert(0, system_prompt)
+
+        logger.debug(
+            f"Sending request to g4f with model: {model} and messages: {messages}"
+        )
+
+        # Call the g4f API
+        response = client.chat.completions.create(model=model,
+                                                  messages=messages,
+                                                  web_search=False)
+
+        ai_response = response.choices[0].message.content
+        logger.debug(f"Received response from g4f: {ai_response}")
+
+        return jsonify({'status': 'success', 'message': ai_response})
+    except Exception as e:
+        logger.error(f"Error in chat endpoint: {str(e)}")
+        return jsonify({
+            'status': 'error',
+            'message': f"An error occurred: {str(e)}"
+        }), 500
+
+
+
+@app.route('/api/conversations/<conversation_id>', methods=['DELETE'])
+def delete_conversation(conversation_id):
+    try:
+        return jsonify({'status': 'success', 'message': f'Conversation {conversation_id} deleted'})
+    except Exception as e:
+        logger.error(f"Error deleting conversation: {str(e)}")
+        return jsonify({
+            'status': 'error',
+            'message': f"An error occurred: {str(e)}"
+        }), 500
+
+@app.route('/api/models', methods=['GET'])
+def get_models():
+    try:
+        # Return a list of available models
+        # You can customize this list based on what g4f supports
+        models = [{
+            "id": "gpt-4o-mini",
+            "name": "GPT-4o"
+        }]
+        return jsonify({'status': 'success', 'models': models})
+    except Exception as e:
+        logger.error(f"Error in models endpoint: {str(e)}")
+        return jsonify({
+            'status': 'error',
+            'message': f"An error occurred: {str(e)}"
+        }), 500
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)

main.py

@@ -0,0 +1,4 @@
+from app import app
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)

pyproject.toml

@@ -0,0 +1,13 @@
+[project]
+name = "repl-nix-workspace"
+version = "0.1.0"
+description = "Add your description here"
+requires-python = ">=3.11"
+dependencies = [
+    "email-validator>=2.2.0",
+    "flask>=3.1.0",
+    "flask-sqlalchemy>=3.1.1",
+    "g4f>=0.4.8.6",
+    "gunicorn>=23.0.0",
+    "psycopg2-binary>=2.9.10",
+]

requirements.txt

@@ -0,0 +1,6 @@
+email-validator>=2.2.0
+flask>=3.1.0
+flask-sqlalchemy>=3.1.1
+g4f>=0.4.8.6
+gunicorn>=23.0.0
+psycopg2-binary>=2.9.10

static/css/style.css

@@ -0,0 +1,354 @@
+/* Global styles */
+body {
+    overflow: hidden;
+    font-family: 'Inter', sans-serif;
+    background-color: #ffffff;
+    color: #212529;
+}
+
+:root {
+    --sidebar-bg: #f8f9fa;
+    --main-bg: #ffffff;
+    --border-color: #e9ecef;
+    --chat-bg: #f8f9fa;
+    --user-message-bg: #0d6efd;
+    --bot-message-bg: #f0f0f0;
+}
+
+/* Sidebar styles */
+.sidebar {
+    height: 100vh;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sidebar-bg);
+    border-right: 1px solid var(--border-color);
+}
+
+.chat-history-list {
+    max-height: calc(100vh - 250px);
+    overflow-y: auto;
+    scrollbar-width: none;
+    padding: 10px 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.chat-history-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-history-list::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+}
+
+.chat-history-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+}
+
+.chat-history-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.history-item {
+    cursor: pointer;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+/* Chat container styles */
+.main-content {
+    height: 100vh;
+    background-color: var(--main-bg);
+}
+
+.chat-header {
+    background-color: var(--sidebar-bg);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.messages-container {
+    overflow-y: auto;
+    padding-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Message styles */
+.message {
+    margin-bottom: 20px;
+    max-width: 85%;
+    display: inline-block;
+}
+
+.user-message {
+    margin-left: auto;
+    background-color: var(--user-message-bg);
+    color: white;
+    border-radius: 18px 18px 0 18px;
+    padding: 10px 14px;
+    float: right;
+    clear: both;
+    max-width: fit-content;
+}
+
+.ai-message {
+    margin-right: auto;
+    background-color: var(--bot-message-bg);
+    color: #212529;
+    border-radius: 18px 18px 18px 0;
+    padding: 10px 14px;
+    float: left;
+    clear: both;
+    max-width: fit-content;
+}
+
+.ai-message pre {
+    background-color: #1e1e1e;
+    border-radius: 8px;
+    padding: 12px;
+    overflow-x: auto;
+    position: relative;
+    margin: 10px 0;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.ai-message pre code {
+    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.ai-message pre::before {
+    content: attr(data-language);
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 4px 8px;
+    font-size: 12px;
+    color: #999;
+    background: #2d2d2d;
+    border-radius: 0 8px 0 8px;
+}
+
+.ai-message pre .copy-btn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    padding: 4px 8px;
+    background: transparent;
+    border: none;
+    color: #999;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.ai-message pre:hover .copy-btn {
+    opacity: 1;
+}
+
+.ai-message pre .copy-btn:hover {
+    color: #fff;
+}
+
+.ai-message img {
+    max-width: 100%;
+    border-radius: 5px;
+}
+
+.system-message {
+    color: var(--bs-secondary);
+    text-align: center;
+}
+
+/* Loading animation */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+}
+
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    margin: 0 2px;
+    background-color: var(--bs-secondary);
+    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);
+    }
+}
+
+/* Input area styling */
+.input-area {
+    background-color: var(--sidebar-bg);
+    border-top: 1px solid var(--border-color);
+}
+
+.model-badge {
+    font-size: 0.7rem;
+    padding: 0.2rem 0.6rem;
+    border-radius: 12px;
+    font-weight: 500;
+    background-color: rgba(13, 110, 253, 0.1);
+    color: #0d6efd;
+}
+
+#message-input {
+    resize: none;
+    overflow-y: auto;
+    max-height: 120px;
+}
+
+/* Chat history styling */
+.chat-history-list {
+    margin-top: 10px;
+}
+
+.chat-history-list .history-item {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    margin: 0;
+    padding: 8px 12px;
+    font-size: 0.85em;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: background 0.2s ease;
+    min-height: 40px;
+}
+
+.chat-history-list .history-item:hover {
+    background: rgba(13, 110, 253, 0.05);
+}
+
+.chat-history-list .history-item.active {
+    background: rgba(var(--bs-primary-rgb), 0.2);
+    border-color: var(--bs-primary);
+}
+
+.chat-history-list .btn-danger {
+    padding: 4px 8px;
+    font-size: 14px;
+    background-color: transparent;
+    border: none;
+    color: #dc3545;
+    opacity: 0.7;
+    transition: all 0.2s ease;
+}
+
+.chat-history-list .btn-danger:hover {
+    background-color: transparent;
+    color: #dc3545;
+    opacity: 1;
+}
+
+.chat-history-list .delete-button:hover {
+    opacity: 1;
+    color: #dc3545;
+}
+
+.chat-history-list .history-item:hover .delete-btn {
+    opacity: 0.7;
+}
+
+.chat-history-list .delete-btn:hover {
+    opacity: 1 !important;
+    color: #dc3545;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: -100%;
+        width: 75%;
+        z-index: 1000;
+        transition: all 0.3s ease;
+    }
+
+    .sidebar.active {
+        left: 0;
+    }
+
+    .mobile-toggle {
+        display: block;
+    }
+}
+
+/* Code block styling */
+pre code {
+    border-radius: 5px;
+    font-family: monospace;
+}
+
+/* Markdown content styling */
+.markdown-content h1, 
+.markdown-content h2, 
+.markdown-content h3, 
+.markdown-content h4, 
+.markdown-content h5, 
+.markdown-content h6 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.markdown-content p {
+    margin-bottom: 1rem;
+}
+
+.markdown-content ul, 
+.markdown-content ol {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+}
+
+.markdown-content blockquote {
+    border-left: 3px solid var(--bs-primary);
+    padding-left: 1rem;
+    margin-left: 0;
+    color: var(--bs-secondary);
+}
+
+.markdown-content table {
+    width: 100%;
+    margin-bottom: 1rem;
+    border-collapse: collapse;
+}
+
+.markdown-content table th,
+.markdown-content table td {
+    padding: 0.5rem;
+    border: 1px solid var(--bs-secondary);
+}
+
+.markdown-content table th {
+    background-color: rgba(var(--bs-secondary-rgb), 0.2);
+}

static/js/chat.js

@@ -0,0 +1,410 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const chatForm = document.getElementById('chat-form');
+    const messageInput = document.getElementById('message-input');
+    const messagesContainer = document.getElementById('messages-container');
+    const newChatBtn = document.getElementById('new-chat-btn');
+    const modelSelect = document.getElementById('model-select');
+    const currentModelLabel = document.getElementById('current-model-label');
+    const historyList = document.getElementById('history-list');
+
+    // State variables
+    let chatHistory = [];
+    let conversations = loadConversations();
+    let currentConversationId = null;
+
+    // Load available models
+    loadModels();
+
+    // Start a new conversation
+    startNewConversation();
+
+    // Event listeners
+    chatForm.addEventListener('submit', handleChatSubmit);
+    newChatBtn.addEventListener('click', startNewConversation);
+    modelSelect.addEventListener('change', handleModelChange);
+    messageInput.addEventListener('keydown', handleInputKeydown);
+
+    // Auto-resize textarea as user types
+    messageInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = (this.scrollHeight) + 'px';
+        // Cap the height
+        if (parseInt(this.style.height) > 120) {
+            this.style.height = '120px';
+        }
+    });
+
+    // Load available models from the backend
+    function loadModels() {
+        fetch('/api/models')
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    modelSelect.innerHTML = '';
+                    data.models.forEach(model => {
+                        const option = document.createElement('option');
+                        option.value = model.id;
+                        option.textContent = model.name;
+                        modelSelect.appendChild(option);
+                    });
+                }
+            })
+            .catch(error => {
+                console.error('Error loading models:', error);
+            });
+    }
+
+    // Handle model change
+    function handleModelChange() {
+        const selectedModel = modelSelect.value;
+        const selectedModelName = modelSelect.options[modelSelect.selectedIndex].text;
+        currentModelLabel.textContent = selectedModelName;
+
+        // Update current conversation model
+        if (currentConversationId) {
+            conversations[currentConversationId].model = selectedModel;
+            saveConversations();
+        }
+    }
+
+    // Handle chat submission
+    function handleChatSubmit(e) {
+        e.preventDefault();
+        const message = messageInput.value.trim();
+
+        if (!message) return;
+
+        // Add user message to UI
+        addMessageToUI('user', message);
+
+        // Add to chat history
+        chatHistory.push({
+            role: 'user',
+            content: message
+        });
+
+        // Update conversation title if it's the first message
+        if (chatHistory.length === 1) {
+            const title = message.substring(0, 30) + (message.length > 30 ? '...' : '');
+            conversations[currentConversationId].title = title;
+            updateConversationsList();
+        }
+
+        // Save to local storage
+        conversations[currentConversationId].messages = chatHistory;
+        saveConversations();
+
+        // Clear input
+        messageInput.value = '';
+        messageInput.style.height = 'auto';
+
+        // Show typing indicator
+        showTypingIndicator();
+
+        // Send to backend
+        const selectedModel = modelSelect.value;
+
+        fetch('/api/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                messages: chatHistory,
+                model: selectedModel
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            // Remove typing indicator
+            hideTypingIndicator();
+
+            if (data.status === 'success') {
+                // Add AI response to UI
+                addMessageToUI('ai', data.message);
+
+                // Add to chat history
+                chatHistory.push({
+                    role: 'assistant',
+                    content: data.message
+                });
+
+                // Save to local storage
+                conversations[currentConversationId].messages = chatHistory;
+                saveConversations();
+
+                // Scroll to bottom
+                scrollToBottom();
+            } else {
+                // Show error
+                addMessageToUI('system', `Error: ${data.message}`);
+            }
+        })
+        .catch(error => {
+            hideTypingIndicator();
+            console.error('Error:', error);
+            addMessageToUI('system', `Error: ${error.message || 'Failed to send message'}`);
+        });
+
+        // Scroll to bottom
+        scrollToBottom();
+    }
+
+    // Handle input keydown (for Enter key submission with Shift+Enter for new line)
+    function handleInputKeydown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            chatForm.dispatchEvent(new Event('submit'));
+        }
+    }
+
+    // Add message to UI
+    function addMessageToUI(sender, content) {
+        // Create a wrapper for each message group
+        let messageWrapper;
+        if (sender === 'system') {
+            messageWrapper = document.createElement('div');
+            messageWrapper.className = 'w-100 d-flex justify-content-center my-3';
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'system-message text-center';
+            messageDiv.innerHTML = `<p>${content}</p>`;
+            messageWrapper.appendChild(messageDiv);
+        } else {
+            messageWrapper = document.createElement('div');
+            messageWrapper.className = 'w-100 d-flex ' + 
+                (sender === 'user' ? 'justify-content-end' : 'justify-content-start');
+
+            const messageDiv = renderMessage(content, sender === 'user');
+            messageWrapper.appendChild(messageDiv);
+        }
+
+        messagesContainer.appendChild(messageWrapper);
+        scrollToBottom();
+    }
+
+    // Show typing indicator
+    function showTypingIndicator() {
+        const typingWrapper = document.createElement('div');
+        typingWrapper.className = 'w-100 d-flex justify-content-start';
+        typingWrapper.id = 'typing-indicator-wrapper';
+
+        const typingDiv = document.createElement('div');
+        typingDiv.className = 'typing-indicator ai-message';
+        typingDiv.id = 'typing-indicator';
+        typingDiv.innerHTML = `
+            <div class="typing-dot"></div>
+            <div class="typing-dot"></div>
+            <div class="typing-dot"></div>
+        `;
+
+        typingWrapper.appendChild(typingDiv);
+        messagesContainer.appendChild(typingWrapper);
+        scrollToBottom();
+    }
+
+    // Hide typing indicator
+    function hideTypingIndicator() {
+        const typingWrapper = document.getElementById('typing-indicator-wrapper');
+        if (typingWrapper) {
+            typingWrapper.remove();
+        }
+    }
+
+    // Scroll to bottom of messages container
+    function scrollToBottom() {
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+
+    // Start a new conversation
+    function startNewConversation() {
+        // Clear chat history
+        chatHistory = [];
+
+        // Clear messages container
+        messagesContainer.innerHTML = `
+            <div class="system-message text-center my-5">
+                <h3>Welcome to AI Chat</h3>
+                <p class="text-muted">Ask me anything! I'm powered by g4f and ready to help.</p>
+            </div>
+        `;
+
+        // Create a new conversation ID
+        currentConversationId = Date.now().toString();
+
+        // Add to conversations object
+        conversations[currentConversationId] = {
+            id: currentConversationId,
+            title: 'New Conversation',
+            model: modelSelect.value,
+            messages: []
+        };
+
+        // Save to local storage
+        saveConversations();
+
+        // Update UI
+        updateConversationsList();
+    }
+
+    // Load conversation by ID
+    function loadConversation(id) {
+        if (!conversations[id]) return;
+
+        // Set current conversation ID
+        currentConversationId = id;
+
+        // Load chat history
+        chatHistory = conversations[id].messages || [];
+
+        // Set model
+        if (conversations[id].model) {
+            modelSelect.value = conversations[id].model;
+            const selectedModelName = modelSelect.options[modelSelect.selectedIndex].text;
+            currentModelLabel.textContent = selectedModelName;
+        }
+
+        // Clear messages container
+        messagesContainer.innerHTML = '';
+
+        // Add messages to UI
+        if (chatHistory.length === 0) {
+            messagesContainer.innerHTML = `
+                <div class="system-message text-center my-5">
+                    <h3>Welcome to AI Chat</h3>
+                    <p class="text-muted">Ask me anything! I'm powered by g4f and ready to help.</p>
+                </div>
+            `;
+        } else {
+            chatHistory.forEach(msg => {
+                if (msg.role === 'user') {
+                    addMessageToUI('user', msg.content);
+                } else if (msg.role === 'assistant') {
+                    addMessageToUI('ai', msg.content);
+                } else if (msg.role === 'system') {
+                    addMessageToUI('system', msg.content);
+                }
+            });
+        }
+
+        // Update UI
+        updateConversationsList();
+    }
+
+    // Update conversations list in sidebar
+    function updateConversationsList() {
+        historyList.innerHTML = '';
+
+        // Sort conversations by ID (newest first)
+        const sortedIds = Object.keys(conversations).sort((a, b) => b - a);
+
+        sortedIds.forEach(id => {
+            const conv = conversations[id];
+            const item = document.createElement('li');
+            item.className = `list-group-item history-item d-flex justify-content-between align-items-center ${id === currentConversationId ? 'active' : ''}`;
+
+            const titleSpan = document.createElement('span');
+            titleSpan.textContent = conv.title;
+            titleSpan.style.cursor = 'pointer';
+            titleSpan.addEventListener('click', () => {
+                loadConversation(id);
+            });
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'btn btn-sm btn-danger';
+            deleteBtn.innerHTML = '<i class="fas fa-trash"></i>';
+            deleteBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                deleteConversation(id);
+            });
+
+            item.appendChild(titleSpan);
+            item.appendChild(deleteBtn);
+            item.dataset.id = id;
+
+            historyList.appendChild(item);
+        });
+    }
+
+    // Load conversations from local storage
+    function loadConversations() {
+        try {
+            const saved = localStorage.getItem('g4f_conversations');
+            return saved ? JSON.parse(saved) : {};
+        } catch (error) {
+            console.error('Error loading conversations:', error);
+            return {};
+        }
+    }
+
+    // Save conversations to local storage
+    function saveConversations() {
+        try {
+            localStorage.setItem('g4f_conversations', JSON.stringify(conversations));
+        } catch (error) {
+            console.error('Error saving conversations:', error);
+        }
+    }
+
+    // Delete specific conversation
+    function deleteConversation(id) {
+        if (confirm('Are you sure you want to delete this conversation? This cannot be undone.')) {
+            fetch(`/api/conversations/${id}`, {
+                method: 'DELETE',
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    delete conversations[id];
+
+                    // If current conversation was deleted, start a new one
+                    if (id === currentConversationId) {
+                        startNewConversation();
+                    }
+
+                    saveConversations();
+                    updateConversationsList();
+                    addMessageToUI('system', 'Conversation deleted');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                addMessageToUI('system', 'Failed to delete conversation');
+            });
+        }
+    }
+
+    function renderMessage(content, isUser = false) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
+
+        if (!isUser) {
+            const formattedContent = marked.parse(content);
+            messageDiv.innerHTML = formattedContent;
+
+            // Add copy buttons and language labels to code blocks
+            messageDiv.querySelectorAll('pre code').forEach((block) => {
+                hljs.highlightElement(block);
+                const pre = block.parentElement;
+                const language = block.className.split('-')[1] || 'plaintext';
+                pre.setAttribute('data-language', language);
+
+                const copyBtn = document.createElement('button');
+                copyBtn.className = 'copy-btn';
+                copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
+                copyBtn.onclick = async () => {
+                    await navigator.clipboard.writeText(block.textContent);
+                    copyBtn.innerHTML = '<i class="fas fa-check"></i>';
+                    setTimeout(() => {
+                        copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
+                    }, 2000);
+                };
+                pre.appendChild(copyBtn);
+            });
+        } else {
+            messageDiv.textContent = content;
+        }
+
+        return messageDiv;
+    }
+});

templates/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chat</title>
+    
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="container-fluid px-0">
+        <div class="row g-0 vh-100">
+            <!-- Sidebar -->
+            <div class="col-md-3 col-lg-2 sidebar p-3 border-end">
+                <!-- Logo and Title -->
+                <div class="d-flex align-items-center mb-4">
+                    <i class="fas fa-robot me-2 fs-4"></i>
+                    <h5 class="mb-0 fw-bold">AI Chat</h5>
+                </div>
+                
+                <!-- New Chat Button -->
+                <div class="mb-4">
+                    <button id="new-chat-btn" class="btn btn-outline-primary w-100 d-flex align-items-center">
+                        <i class="fas fa-plus me-2"></i> New Chat
+                    </button>
+                </div>
+                
+                <!-- Model Selection -->
+                <div class="mb-4">
+                    <label for="model-select" class="form-label small text-muted">Model</label>
+                    <select id="model-select" class="form-select">
+                        <option value="gpt-4o" selected>GPT-4o</option>
+                        <!-- Other models will be loaded dynamically -->
+                    </select>
+                </div>
+                
+                <!-- Chat History -->
+                <div class="chat-history mb-3">
+                    <label class="form-label small text-muted mb-2">Chat History</label>
+                    <ul id="history-list" class="list-group chat-history-list mb-0">
+                        <!-- Chat history items will appear here -->
+                    </ul>
+                </div>
+                
+                <!-- App Info -->
+                <div class="mt-auto text-center text-secondary small pt-5">
+                    <p class="mb-1">Powered by Abdullah ali</p>
+                    <p>© 2025 AI Chat. All rights reserved.</p>
+                </div>
+            </div>
+            
+            <!-- Main Chat Area -->
+            <div class="col-md-9 col-lg-10 main-content d-flex flex-column p-0">
+                <!-- Chat Header -->
+                <div class="chat-header p-3 border-bottom d-flex align-items-center">
+                    <h6 class="mb-0">Chat with AI</h6>
+                    <span class="model-badge ms-2">GPT-4o</span>
+                </div>
+                
+                <!-- Messages Container -->
+                <div id="messages-container" class="messages-container flex-grow-1 p-4">
+                    <!-- Welcome message -->
+                    <div class="system-message text-center my-5">
+                        <h2 class="fw-bold">Welcome to AI Chat</h2>
+                        <p class="text-muted">Ask me anything! I'm powered by Abdullah Ali and ready .to help.</p>
+                    </div>
+                    
+                    <!-- Messages will appear here -->
+                </div>
+                
+                <!-- Input Area -->
+                <div class="input-area p-3 border-top">
+                    <form id="chat-form" class="d-flex">
+                        <input 
+                            id="message-input" 
+                            class="form-control me-2" 
+                            placeholder="Type a message..." 
+                            required>
+                        <button type="submit" id="send-button" class="btn btn-primary rounded-circle">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Marked.js for Markdown Support -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    
+    <!-- Highlight.js for Code Syntax Highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
+</body>
+</html>

vercel.json

@@ -0,0 +1,28 @@
+{
+    "version": 2,
+    "builds": [
+      {
+        "src": "app.py",
+        "use": "@vercel/python",
+        "config": { "runtime": "3.11" }
+      }
+    ],
+    "routes": [
+      {
+        "src": "/(.*)",
+        "dest": "app.py"
+      }
+    ],
+    "env": {
+      "PYTHON_VERSION": "3.11"
+    },
+    
+
+ {
+  "functions": {
+    "app/api/**/route.ts": {
+      "maxDuration": 60
+    }
+  
+
+  }