Upload 4 files

Dockerfile

@@ -0,0 +1,45 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1 \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy the requirements file
+COPY requirements.txt requirements.txt
+
+# Install Python packages with timeout increase
+RUN pip install --no-cache-dir --timeout=1000 -r requirements.txt
+
+# Copy application code
+COPY . /app
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+
+# Change ownership
+RUN chown -R user:user /app
+
+# Switch to the non-root user
+USER user
+
+# Expose the port
+EXPOSE 7860
+
+# Set environment variables
+ENV FLASK_HOST=0.0.0.0
+ENV FLASK_PORT=7860
+ENV FLASK_DEBUG=False
+
+# CRITICAL: Set HF-specific env vars
+ENV TRANSFORMERS_CACHE=/tmp/transformers_cache
+ENV HF_HOME=/tmp/hf_home
+ENV TORCH_HOME=/tmp/torch_home
+
+# Command to run the app
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,116 @@
+from flask import Flask, render_template, request, jsonify
+import requests
+
+app = Flask(__name__)
+
+# Configuration - Your n8n webhook URL
+N8N_WEBHOOK_URL = "https://n53dnorth.app.n8n.cloud/webhook/lead-intake"
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/submit', methods=['POST'])
+def submit_form():
+    """
+    Receives form data and forwards it to n8n workflow
+    Maps form fields to the exact structure expected by n8n
+    """
+    try:
+        # 1. Get data from the web form
+        data = request.json
+        
+        # 2. Prepare payload matching EXACTLY what n8n workflow expects
+        # Based on the sample: { first_name, last_name, email, city, source, budget }
+        payload = {
+            "first_name": data.get('first_name', '').strip(),
+            "last_name": data.get('last_name', '').strip(),
+            "email": data.get('email', '').strip(),
+            "city": data.get('city', '').strip(),
+            "source": data.get('source', 'Web Form').strip(),
+            "budget": int(data.get('budget', 5000)),  # Convert to integer
+            
+            # Optional fields (can be included for reference)
+            "company": data.get('company', '').strip() if data.get('company') else None,
+            "position": data.get('position', '').strip() if data.get('position') else None,
+            "phone": data.get('phone', '').strip() if data.get('phone') else None,
+            "address": data.get('address', '').strip() if data.get('address') else None,
+            "zip_code": data.get('zip_code', '').strip() if data.get('zip_code') else None,
+        }
+        
+        # Remove None values to keep payload clean
+        payload = {k: v for k, v in payload.items() if v is not None}
+        
+        print(f"Sending to n8n: {payload}")  # Debug log
+        
+        # 3. Send to n8n webhook
+        response = requests.post(
+            N8N_WEBHOOK_URL, 
+            json=payload,
+            timeout=10  # 10 second timeout
+        )
+        
+        print(f"n8n Response Status: {response.status_code}")  # Debug log
+        print(f"n8n Response Body: {response.text}")  # Debug log
+        
+        # 4. Handle n8n's response
+        if response.status_code == 200:
+            # Success response from n8n
+            result = response.json()
+            return jsonify({
+                "status": "success",
+                "message": result.get("message", "Lead submitted successfully!"),
+                "data": result.get("data"),
+                "timestamp": result.get("timestamp")
+            }), 200
+            
+        elif response.status_code == 400:
+            # Validation error from n8n
+            result = response.json()
+            return jsonify({
+                "status": "error",
+                "message": result.get("message", "Validation failed"),
+                "error": result.get("error")
+            }), 400
+            
+        else:
+            # Unexpected response
+            return jsonify({
+                "status": "error",
+                "message": f"Unexpected response from server (Status: {response.status_code})"
+            }), 500
+            
+    except requests.exceptions.Timeout:
+        return jsonify({
+            "status": "error",
+            "message": "Request timed out. Please try again."
+        }), 504
+        
+    except requests.exceptions.ConnectionError:
+        return jsonify({
+            "status": "error",
+            "message": "Could not connect to the registration service. Please check your connection."
+        }), 503
+        
+    except ValueError as e:
+        # JSON parsing error
+        return jsonify({
+            "status": "error",
+            "message": f"Invalid data format: {str(e)}"
+        }), 400
+        
+    except Exception as e:
+        # Catch-all for any other errors
+        print(f"Unexpected error: {str(e)}")  # Debug log
+        return jsonify({
+            "status": "error",
+            "message": "An unexpected error occurred. Please try again."
+        }), 500
+
+@app.route('/health', methods=['GET'])
+def health_check():
+    """Health check endpoint"""
+    return jsonify({"status": "healthy", "service": "Lead Registration API"}), 200
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)

requirements.txt

@@ -0,0 +1,3 @@
+customtkinter==5.2.2
+Flask==3.1.2
+Requests==2.32.5

templates/index.html

@@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lead Registration</title>
+    <style>
+        /* CSS Reset & Base */
+        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+        body {
+            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        /* Card Container */
+        .card {
+            display: flex;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            overflow: hidden;
+            width: 1000px;
+            max-width: 100%;
+            min-height: 600px;
+        }
+
+        /* Left Panel (White) */
+        .left-panel {
+            flex: 1;
+            padding: 50px;
+            background: #fff;
+        }
+
+        /* Right Panel (Blue) */
+        .right-panel {
+            flex: 1;
+            padding: 50px;
+            background: #4d4dff;
+            color: white;
+        }
+
+        /* Headings */
+        h2 { margin-bottom: 30px; font-weight: 600; font-size: 1.5rem; }
+        .left-panel h2 { color: #3b4d81; }
+        .right-panel h2 { color: white; }
+
+        /* Form Grid System */
+        .form-row {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 25px;
+        }
+        .form-group { 
+            flex: 1;
+            position: relative;
+        }
+        
+        /* Inputs - General Styling */
+        input, select {
+            width: 100%;
+            padding: 12px 0 8px 0;
+            border: none;
+            outline: none;
+            font-size: 0.95rem;
+            transition: 0.3s;
+            background: transparent;
+        }
+
+        /* Left Panel Input Styling (Light) */
+        .left-panel input, .left-panel select {
+            border-bottom: 2px solid #ddd;
+            color: #333;
+        }
+        .left-panel input::placeholder { 
+            color: #999;
+            opacity: 1;
+        }
+        .left-panel input:focus, .left-panel select:focus { 
+            border-bottom-color: #4d4dff; 
+        }
+        .left-panel select {
+            cursor: pointer;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right center;
+        }
+        .left-panel select option {
+            color: #333;
+            background: white;
+        }
+
+        /* Right Panel Input Styling (Dark/Blue) */
+        .right-panel input, .right-panel select {
+            border-bottom: 2px solid rgba(255,255,255,0.4);
+            color: white;
+        }
+        .right-panel input::placeholder { 
+            color: rgba(255,255,255,0.7);
+            opacity: 1;
+        }
+        .right-panel select {
+            cursor: pointer;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right center;
+        }
+        .right-panel select option {
+            color: #333;
+            background: #4d4dff;
+        }
+        .right-panel input:focus, .right-panel select:focus { 
+            border-bottom-color: white; 
+        }
+
+        /* Checkbox */
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            font-size: 0.85rem;
+            margin-top: 20px;
+            margin-bottom: 30px;
+            color: rgba(255,255,255,0.9);
+        }
+        .checkbox-group input { 
+            width: auto; 
+            margin-right: 10px;
+            cursor: pointer;
+        }
+        .checkbox-group label {
+            cursor: pointer;
+        }
+
+        /* Button */
+        .btn-submit {
+            background: white;
+            color: #4d4dff;
+            border: none;
+            padding: 12px 30px;
+            border-radius: 25px;
+            font-weight: bold;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: all 0.2s;
+        }
+        .btn-submit:hover { 
+            transform: scale(1.05);
+            box-shadow: 0 4px 15px rgba(255,255,255,0.3);
+        }
+        .btn-submit:disabled { 
+            opacity: 0.6; 
+            cursor: not-allowed;
+            transform: scale(1);
+        }
+
+        /* Alert Messages */
+        .alert {
+            padding: 15px 20px;
+            margin-bottom: 25px;
+            border-radius: 8px;
+            display: none;
+            font-size: 0.9rem;
+            animation: slideIn 0.3s ease-out;
+        }
+        .alert.success { 
+            background: #d4edda; 
+            color: #155724; 
+            border-left: 4px solid #28a745;
+        }
+        .alert.error { 
+            background: #f8d7da; 
+            color: #721c24; 
+            border-left: 4px solid #dc3545;
+        }
+        .alert.show { display: block; }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Responsive Mobile */
+        @media (max-width: 768px) {
+            .card { flex-direction: column; }
+            .left-panel, .right-panel { padding: 30px; }
+            .form-row { flex-direction: column; gap: 15px; }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="card">
+        <!-- Left Side: General Info -->
+        <div class="left-panel">
+            <h2>General Information</h2>
+            
+            <div id="alertBox" class="alert"></div>
+            
+            <form id="leadForm">
+                <div class="form-row">
+                    <div class="form-group">
+                        <input type="text" name="first_name" placeholder="First Name *" required>
+                    </div>
+                    <div class="form-group">
+                        <input type="text" name="last_name" placeholder="Last Name *" required>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <input type="email" name="email" placeholder="Email Address *" required>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <select name="source" required>
+                            <option value="" disabled selected>How did you hear about us? *</option>
+                            <option value="Google Ads">Google Ads</option>
+                            <option value="Facebook">Facebook</option>
+                            <option value="LinkedIn">LinkedIn</option>
+                            <option value="Twitter">Twitter</option>
+                            <option value="Referral">Referral</option>
+                            <option value="Direct">Direct</option>
+                            <option value="Other">Other</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <input type="text" name="company" placeholder="Company Name (Optional)">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <select name="position">
+                            <option value="" disabled selected>Position (Optional)</option>
+                            <option value="Developer">Developer</option>
+                            <option value="Manager">Manager</option>
+                            <option value="Director">Director</option>
+                            <option value="Executive">Executive</option>
+                            <option value="Other">Other</option>
+                        </select>
+                    </div>
+                </div>
+        </div>
+
+        <!-- Right Side: Contact Details -->
+        <div class="right-panel">
+            <h2>Additional Information</h2>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <select name="city" required>
+                            <option value="" disabled selected>City *</option>
+                            <option value="Dhaka">Dhaka</option>
+                            <option value="Chittagong">Chittagong</option>
+                            <option value="Winnipeg">Winnipeg</option>
+                            <option value="Toronto">Toronto</option>
+                            <option value="Vancouver">Vancouver</option>
+                            <option value="Montreal">Montreal</option>
+                            <option value="Calgary">Calgary</option>
+                            <option value="New York">New York</option>
+                            <option value="Los Angeles">Los Angeles</option>
+                            <option value="Chicago">Chicago</option>
+                            <option value="Other">Other</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <select name="budget" required>
+                            <option value="" disabled selected>Budget Range *</option>
+                            <option value="1000">Under $1,000</option>
+                            <option value="5000">$1,000 - $5,000</option>
+                            <option value="10000">$5,000 - $10,000</option>
+                            <option value="25000">$10,000 - $25,000</option>
+                            <option value="50000">$25,000 - $50,000</option>
+                            <option value="100000">$50,000+</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <input type="tel" name="phone" placeholder="Phone Number (Optional)">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <input type="text" name="address" placeholder="Street Address (Optional)">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <input type="text" name="zip_code" placeholder="Zip/Postal Code (Optional)">
+                    </div>
+                </div>
+
+                <div class="checkbox-group">
+                    <input type="checkbox" id="terms" required>
+                    <label for="terms">I accept the Terms and Conditions *</label>
+                </div>
+
+                <button type="button" class="btn-submit" onclick="submitData()">Submit Lead</button>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        async function submitData() {
+            const form = document.getElementById('leadForm');
+            const alertBox = document.getElementById('alertBox');
+            
+            // Reset alert
+            alertBox.className = 'alert';
+            alertBox.style.display = 'none';
+            
+            // Validate form
+            if (!form.checkValidity()) {
+                showAlert("Please fill in all required fields marked with *", "error");
+                form.reportValidity();
+                return;
+            }
+
+            // Gather form data
+            const formData = new FormData(form);
+            const data = Object.fromEntries(formData.entries());
+
+            // UI feedback
+            const btn = document.querySelector('.btn-submit');
+            const originalText = btn.innerText;
+            btn.innerText = "Submitting...";
+            btn.disabled = true;
+
+            try {
+                console.log("Sending data:", data); // Debug
+                
+                const response = await fetch('/submit', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(data)
+                });
+
+                console.log("Response status:", response.status); // Debug
+                
+                const result = await response.json();
+                console.log("Response data:", result); // Debug
+
+                if (response.ok) {
+                    // Success!
+                    const successMsg = result.message || "✅ Lead submitted successfully! We'll be in touch soon.";
+                    showAlert(successMsg, "success");
+                    
+                    // Reset form after success
+                    setTimeout(() => {
+                        form.reset();
+                    }, 500);
+                    
+                    // Log for debugging
+                    if (result.data) {
+                        console.log("Lead ID:", result.data.meta?.lead_id);
+                        console.log("Full Response:", result);
+                    }
+                } else {
+                    // Error response
+                    const errorMsg = result.error?.reason || result.message || "❌ Failed to submit lead";
+                    showAlert(`Error: ${errorMsg}`, "error");
+                    console.error("Error Response:", result);
+                }
+            } catch (error) {
+                // Network/connection error
+                showAlert(`❌ Connection error: ${error.message}. Please check your connection and try again.`, "error");
+                console.error("Network Error:", error);
+            } finally {
+                // Always reset button
+                btn.innerText = originalText;
+                btn.disabled = false;
+            }
+        }
+
+        function showAlert(message, type) {
+            const alertBox = document.getElementById('alertBox');
+            alertBox.textContent = message;
+            alertBox.className = `alert ${type} show`;
+            
+            // Scroll to alert if not visible
+            alertBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            
+            // Auto-hide success messages after 7 seconds
+            if (type === 'success') {
+                setTimeout(() => {
+                    alertBox.className = 'alert';
+                }, 7000);
+            }
+        }
+
+        // Add enter key support
+        document.getElementById('leadForm').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
+                e.preventDefault();
+                submitData();
+            }
+        });
+    </script>
+</body>
+</html>