Spaces:

abdullahalioo
/

try

Running

App Files Files Community

abdullahalioo commited on Mar 28

Commit

ce23758

verified ·

1 Parent(s): cab5ea3

Upload 22 files

Browse files

Files changed (23) hide show

.gitattributes +2 -0
.html +11 -0
app.py +103 -0
attached_assets/image_1742498963362.png +0 -0
attached_assets/image_1742500787258.png +0 -0
attached_assets/image_1742500896102.png +0 -0
attached_assets/image_1742501019996.png +0 -0
attached_assets/image_1742501148334.png +0 -0
attached_assets/image_1742501607975.png +0 -0
attached_assets/image_1742501775050.png +0 -0
attached_assets/image_1742501895659.png +0 -0
attached_assets/image_1742504124361.png +0 -0
attached_assets/image_1743188683006.png +3 -0
attached_assets/image_1743190220399.png +0 -0
generated-icon.png +3 -0
main.py +4 -0
pyproject.toml +13 -0
requirements.txt +6 -0
static/css/style.css +354 -0
static/js/chat.js +410 -0
templates/index.html +113 -0
uv.lock +0 -0
vercel.json +19 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ 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

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+attached_assets/image_1743188683006.png filter=lfs diff=lfs merge=lfs -text
+generated-icon.png filter=lfs diff=lfs merge=lfs -text

.html ADDED Viewed

	@@ -0,0 +1,11 @@

+<html>
+<body>
+    <script src="https://js.puter.com/v2/"></script>
+    <script>
+    (async () => {
+        const resp = await puter.ai.chat('good', {model: 'grok-beta', stream: true });
+        for await ( const part of resp ) puter.print(part?.text?.replaceAll('\n', '<br>'));
+    })();
+    </script>
+</body>
+</html>

app.py ADDED Viewed

	@@ -0,0 +1,103 @@

+import os
+import logging
+from flask import Flask, render_template, request, jsonify
+import g4f
+from g4f.client import Client
+# 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."
+        }
+        # 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 Mini"
+        }, {
+            "id": "gpt-3.5-turbo",
+            "name": "GPT-3.5 Turbo"
+        }, {
+            "id": "claude-instant",
+            "name": "Claude Instant"
+        }, {
+            "id": "gemini-pro",
+            "name": "Gemini Pro"
+        }]
+        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)

attached_assets/image_1742498963362.png ADDED Viewed

attached_assets/image_1742500787258.png ADDED Viewed

attached_assets/image_1742500896102.png ADDED Viewed

attached_assets/image_1742501019996.png ADDED Viewed

attached_assets/image_1742501148334.png ADDED Viewed

attached_assets/image_1742501607975.png ADDED Viewed

attached_assets/image_1742501775050.png ADDED Viewed

attached_assets/image_1742501895659.png ADDED Viewed

attached_assets/image_1742504124361.png ADDED Viewed

attached_assets/image_1743188683006.png ADDED Viewed

Git LFS Details

SHA256: 66e4f8c11280d194ee98c2aaf2ee1b69d1c2d183241012337f809b12c3ff48b6
Pointer size: 131 Bytes
Size of remote file: 758 kB

attached_assets/image_1743190220399.png ADDED Viewed

generated-icon.png ADDED Viewed

Git LFS Details

SHA256: c4b5b1b87dd9f81d9a7da7d22bb94050ff95d238126b236b23771dc8843bd502
Pointer size: 131 Bytes
Size of remote file: 451 kB

main.py ADDED Viewed

	@@ -0,0 +1,4 @@

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

pyproject.toml ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 | G4F</title>
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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-mini" selected>GPT-4o Mini</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 g4f</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 Mini</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 g4f 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/[email protected]/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>

uv.lock ADDED Viewed

The diff for this file is too large to render. See raw diff

vercel.json ADDED Viewed

	@@ -0,0 +1,19 @@

+{
+    "version": 2,
+    "builds": [
+      {
+        "src": "app.py",
+        "use": "@vercel/python",
+        "config": { "runtime": "3.11" }
+      }
+    ],
+    "routes": [
+      {
+        "src": "/(.*)",
+        "dest": "app.py"
+      }
+    ],
+    "env": {
+      "PYTHON_VERSION": "3.11"
+    }
+  }