Spaces:

nruto
/

web_desire

Configuration error

App Files Files Community

nruto commited on Dec 20, 2024

Commit

1a47215

verified ·

1 Parent(s): 1837321

Upload 5 files

Browse files

Files changed (5) hide show

Index.html +30 -0
Style.css +191 -0
app.py +84 -0
requirements.txt +6 -0
script.js +156 -0

Index.html ADDED Viewed

	@@ -0,0 +1,30 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chatbot</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <div class="chat-container">
+            <div class="chat-header">
+                <h1>AI Assistant</h1>
+            </div>
+            <div id="connection-status" style="text-align: center; padding: 10px; display: none;">
+                <p style="color: red;">⚠️ Not connected to server</p>
+            </div>
+            <div class="chat-messages" id="chat-messages">
+                <!-- Messages will be added here dynamically -->
+            </div>
+            <div class="chat-input">
+                <textarea id="user-input" placeholder="Type your message here..."></textarea>
+                <button id="send-button">Send</button>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

Style.css ADDED Viewed

	@@ -0,0 +1,191 @@

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f2f5;
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    height: 100vh;
+}
+.chat-container {
+    background-color: #343541;
+    color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+}
+.chat-header {
+    padding: 20px;
+    border-bottom: 1px solid #e0e0e0;
+    background-color: #202123;
+}
+.chat-header h1 {
+    color: #fff;
+    font-size: 24px;
+}
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+.message {
+    margin-bottom: 20px;
+    max-width: 70%;
+}
+.user-message {
+    margin-left: auto;
+    background-color: #343541;
+    color: #fff;
+    padding: 10px 15px;
+    border-radius: 15px;
+    border: 1px solid #565869;
+}
+.bot-message {
+    background-color: #444654;
+    color: #fff;
+    padding: 10px 15px;
+    border-radius: 15px;
+    animation: fadeIn 0.3s ease-in;
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.chat-input {
+    padding: 20px;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    gap: 10px;
+}
+#user-input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #565869;
+    border-radius: 5px;
+    resize: none;
+    height: 50px;
+    background-color: #40414f;
+    color: #fff;
+}
+#user-input::placeholder {
+    color: #8e8ea0;
+}
+#send-button {
+    padding: 10px 20px;
+    background-color: #19c37d;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+#send-button:hover {
+    background-color: #1a8870;
+}
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+}
+.typing-indicator span {
+    height: 8px;
+    width: 8px;
+    background: #fff;
+    border-radius: 50%;
+    margin: 0 2px;
+    display: inline-block;
+    animation: bounce 1.3s linear infinite;
+}
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.15s;
+}
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.3s;
+}
+@keyframes bounce {
+    0%, 60%, 100% {
+        transform: translateY(0);
+    }
+    30% {
+        transform: translateY(-4px);
+    }
+}
+.code-block-container {
+    position: relative;
+    background-color: #1e1e1e;
+    border-radius: 8px;
+    margin: 10px 0;
+    padding: 10px;
+}
+.code-block-container pre {
+    margin: 0;
+    padding: 10px;
+    overflow-x: auto;
+    color: #d4d4d4;
+    font-family: 'Consolas', 'Monaco', monospace;
+}
+.code-block-container code {
+    display: block;
+    white-space: pre-wrap;
+}
+.copy-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 5px 10px;
+    background-color: #19c37d;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: background-color 0.3s;
+}
+.copy-btn:hover {
+    background-color: #1a8870;
+}
+/* Add syntax highlighting colors */
+.code-block-container .keyword { color: #569cd6; }
+.code-block-container .string { color: #ce9178; }
+.code-block-container .comment { color: #6a9955; }
+.code-block-container .function { color: #dcdcaa; }

app.py ADDED Viewed

	@@ -0,0 +1,84 @@

+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+from mistralai import Mistral
+import os
+app = Flask(__name__, static_folder='.')
+CORS(app, resources={
+    r"/chat": {
+        "origins": ["https://your-netlify-url.netlify.app"],
+        "methods": ["POST", "OPTIONS"],
+        "allow_headers": ["Content-Type", "Authorization"]
+    }
+})
+# Mistral API configuration
+API_KEY = "SNCMZQyb5CvFLiQdLQAjki4NNrohYClY"
+MODEL = "mistral-large-latest"
+client = Mistral(api_key=API_KEY)
+@app.route('/')
+def serve_index():
+    return send_from_directory('.', 'index.html')
+@app.route('/<path:path>')
+def serve_static(path):
+    return send_from_directory('.', path)
+@app.route('/chat', methods=['POST'])
+def chat():
+    try:
+        data = request.json
+        if not data:
+            return jsonify({"error": "No request data received"}), 400
+        message = data.get('message', '')
+        history = data.get('history', [])
+        if not message:
+            return jsonify({"error": "No message provided"}), 400
+        # Prepare messages with system prompt
+        messages = [{
+            "role": "system",
+            "content": """You are a professional and friendly conversation partner. Follow these guidelines:
+            - Use a warm, professional tone while staying conversational
+            - Write naturally as if having a face-to-face conversation
+            - Use simple language and avoid technical jargon unless specifically asked
+            - Keep responses concise and informative
+            - No special formatting, markdown, asterisks, or special characters
+            - Use only basic punctuation and natural paragraph breaks
+            - Keep responses to 2-3 short paragraphs maximum"""
+        }]
+        # Add conversation history and current message
+        messages.extend(history)
+        messages.append({"role": "user", "content": message})
+        print("Sending request to Mistral API...")
+        try:
+            chat_response = client.chat.complete(
+                model=MODEL,
+                messages=messages
+            )
+            bot_response = chat_response.choices[0].message.content
+            print(f"Bot response: {bot_response[:50]}...")
+            return jsonify({
+                "response": bot_response
+            })
+        except Exception as e:
+            error_message = f"Mistral API Error: {str(e)}"
+            print(error_message)
+            return jsonify({"error": error_message}), 500
+    except Exception as e:
+        error_message = f"Server error: {str(e)}"
+        print(error_message)
+        return jsonify({"error": error_message}), 500
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', port=5001, debug=False)

requirements.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+Flask==2.0.1
+Flask-CORS==3.0.10
+mistralai==0.0.7
+gunicorn==21.2.0
+requests==2.26.0
+python-dotenv==1.0.0

script.js ADDED Viewed

	@@ -0,0 +1,156 @@

+const chatMessages = document.getElementById('chat-messages');
+const userInput = document.getElementById('user-input');
+const sendButton = document.getElementById('send-button');
+let conversationHistory = [];
+let isProcessing = false;
+async function checkServerConnection() {
+    const statusDiv = document.getElementById('connection-status');
+    try {
+        const response = await fetch('http://localhost:5001/');
+        if (response.ok) {
+            statusDiv.style.display = 'none';
+            return true;
+        }
+    } catch (error) {
+        console.error('Server connection error:', error);
+        statusDiv.style.display = 'block';
+        return false;
+    }
+}
+document.addEventListener('DOMContentLoaded', () => {
+    checkServerConnection();
+    setInterval(checkServerConnection, 5000);
+});
+function addMessage(content, isUser = false) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
+    if (!isUser) {
+        const hasCodeBlock = content.includes('```');
+        if (hasCodeBlock) {
+            const blocks = content.split('```');
+            blocks.forEach((block, index) => {
+                if (index % 2 === 0) {
+                    if (block.trim()) {
+                        const textDiv = document.createElement('p');
+                        textDiv.textContent = block.trim();
+                        messageDiv.appendChild(textDiv);
+                    }
+                } else {
+                    const codeContainer = document.createElement('div');
+                    codeContainer.className = 'code-block-container';
+                    const preBlock = document.createElement('pre');
+                    const codeBlock = document.createElement('code');
+                    const codeText = block.trim();
+                    codeBlock.textContent = codeText;
+                    preBlock.appendChild(codeBlock);
+                    const copyButton = document.createElement('button');
+                    copyButton.className = 'copy-btn';
+                    copyButton.textContent = 'Copy';
+                    copyButton.addEventListener('click', async () => {
+                        try {
+                            await navigator.clipboard.writeText(codeText);
+                            copyButton.textContent = 'Copied!';
+                            setTimeout(() => {
+                                copyButton.textContent = 'Copy';
+                            }, 2000);
+                        } catch (err) {
+                            console.error('Failed to copy:', err);
+                            // Fallback for older browsers
+                            const textarea = document.createElement('textarea');
+                            textarea.value = codeText;
+                            document.body.appendChild(textarea);
+                            textarea.select();
+                            document.execCommand('copy');
+                            document.body.removeChild(textarea);
+                            copyButton.textContent = 'Copied!';
+                            setTimeout(() => {
+                                copyButton.textContent = 'Copy';
+                            }, 2000);
+                        }
+                    });
+                    codeContainer.appendChild(preBlock);
+                    codeContainer.appendChild(copyButton);
+                    messageDiv.appendChild(codeContainer);
+                }
+            });
+        } else {
+            messageDiv.textContent = content;
+        }
+    } else {
+        messageDiv.textContent = content;
+    }
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+async function sendMessage() {
+    if (isProcessing) return;
+    const message = userInput.value.trim();
+    if (!message) return;
+    isProcessing = true;
+    sendButton.disabled = true;
+    addMessage(message, true);
+    userInput.value = '';
+    conversationHistory.push({"role": "user", "content": message});
+    try {
+        const response = await fetch('http://your-docker-ip:5001/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                message: message,
+                history: conversationHistory
+            })
+        });
+        const data = await response.json();
+        if (data.error) {
+            console.error('API Error:', data.error);
+            addMessage('Error: ' + data.error);
+            return;
+        }
+        if (!data.response) {
+            throw new Error('No response from API');
+        }
+        addMessage(data.response);
+        conversationHistory.push({"role": "assistant", "content": data.response});
+    } catch (error) {
+        console.error('Error:', error);
+        addMessage('Error: ' + error.message);
+    } finally {
+        isProcessing = false;
+        sendButton.disabled = false;
+    }
+}
+// Event listeners
+sendButton.addEventListener('click', sendMessage);
+userInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+    }
+});
+// Focus input on load
+userInput.focus();