Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,22 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+venv/
+env/
+.env
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application
+COPY . .
+
+# Create non-root user
+RUN useradd -m -u 1000 appuser && chown -R appuser:appuser /app
+USER appuser
+
+EXPOSE 7860
+
+# Run with gunicorn for production
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--threads", "4", "app:app"]

README.md

@@ -1,10 +1,38 @@
 ---
-title: Chatbot About Hereandnowai
-emoji: 📈
+title: HERE AND NOW AI Chatbot
+emoji: 🤖
 colorFrom: yellow
-colorTo: blue
+colorTo: green
 sdk: docker
-pinned: false
+pinned: true
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# HERE AND NOW AI Chatbot
+
+A beautiful, hand-drawn style AI chatbot powered by Gemma-3-27b, built with a unique wax crayon design aesthetic.
+
+## Features
+
+- 🎨 **Wax Crayon Design** - Beautiful hand-drawn aesthetic with notebook paper effects
+- 💬 **Conversational AI** - Powered by Google's Gemma-3-27b model
+- 🐕 **Meet Caramel** - Our friendly AI assistant avatar
+- 📱 **Responsive** - Works beautifully on all devices
+
+## About HERE AND NOW AI
+
+We believe **AI is Good**. Visit us at [hereandnowai.com](https://hereandnowai.com)
+
+## Tech Stack
+
+- **Frontend**: HTML, CSS (Wax Crayon Theme), JavaScript
+- **Backend**: Python Flask
+- **AI Model**: Gemma-3-27b via Google Gemini API
+- **Fonts**: Caveat, Patrick Hand (Google Fonts)
+
+## Contact
+
+- Email: info@hereandnowai.com
+- Phone: +91 996 296 1000
+
+© 2025 HERE AND NOW AI. All rights reserved.

app.py

@@ -0,0 +1,94 @@
+"""
+HERE AND NOW AI Chatbot
+Wax Crayon Design - Powered by Gemma-3-27b via Google Gemini API
+"""
+
+import os
+import json
+from flask import Flask, render_template, request, jsonify, send_from_directory
+
+# Check environment
+IS_HF_SPACE = os.environ.get("SPACE_ID") is not None
+
+if IS_HF_SPACE:
+    import google.generativeai as genai
+    GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY")
+    genai.configure(api_key=GEMINI_API_KEY)
+    model = genai.GenerativeModel("gemma-3-27b-it")
+
+app = Flask(__name__, static_folder='static', template_folder='templates')
+
+# Load branding
+with open('branding.json', 'r') as f:
+    branding = json.load(f)['brand']
+
+# System prompt
+SYSTEM_PROMPT = f"""You are Caramel, a friendly AI assistant for {branding['organizationName']}. 
+You're warm, helpful, and knowledgeable about AI, technology, and how AI can help businesses.
+{branding['slogan']} - this is our philosophy. We believe AI should empower people.
+Keep responses concise but friendly. Use emojis occasionally to be personable.
+Website: {branding['website']}"""
+
+# Store conversation history in memory (for demo purposes)
+conversations = {}
+
+@app.route('/')
+def index():
+    return render_template('index.html', branding=branding)
+
+@app.route('/static/<path:filename>')
+def serve_static(filename):
+    return send_from_directory('static', filename)
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    data = request.json
+    message = data.get('message', '')
+    session_id = data.get('session_id', 'default')
+    
+    if not message:
+        return jsonify({'error': 'No message provided'}), 400
+    
+    # Get or create conversation history
+    if session_id not in conversations:
+        conversations[session_id] = []
+    
+    history = conversations[session_id]
+    
+    try:
+        if IS_HF_SPACE:
+            # Use Gemini API
+            chat_history = []
+            for msg in history:
+                chat_history.append({"role": msg['role'], "parts": [msg['content']]})
+            
+            chat_session = model.start_chat(history=chat_history)
+            
+            # Add system prompt for first message
+            if not history:
+                full_message = f"{SYSTEM_PROMPT}\n\nUser: {message}"
+            else:
+                full_message = message
+            
+            response = chat_session.send_message(full_message)
+            assistant_message = response.text
+        else:
+            # For local testing, return a placeholder
+            assistant_message = f"👋 Hello! I'm Caramel, your AI assistant from HERE AND NOW AI. I received your message: '{message}'. (This is a demo response - connect to Gemini API for real responses!)"
+        
+        # Store in history
+        history.append({"role": "user", "content": message})
+        history.append({"role": "model", "content": assistant_message})
+        conversations[session_id] = history[-20:]  # Keep last 20 messages
+        
+        return jsonify({'response': assistant_message})
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/branding')
+def get_branding():
+    return jsonify(branding)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

branding.json

@@ -0,0 +1,29 @@
+{
+    "brand": {
+        "organizationName": "HERE AND NOW AI",
+        "website": "https://hereandnowai.com",
+        "email": "info@hereandnowai.com",
+        "mobile": "+91 996 296 1000",
+        "slogan": "AI is Good",
+        "colors": {
+            "primary": "#FFDF00",
+            "secondary": "#004040"
+        },
+        "logo": {
+            "title": "https://raw.githubusercontent.com/hereandnowai/images/refs/heads/main/logos/logo-of-here-and-now-ai.png",
+            "favicon": "https://raw.githubusercontent.com/hereandnowai/images/refs/heads/main/logos/favicon-logo-with-name.png"
+        },
+        "chatbot": {
+            "avatar": "https://raw.githubusercontent.com/hereandnowai/images/refs/heads/main/logos/caramel.jpeg",
+            "face": "https://raw.githubusercontent.com/hereandnowai/images/refs/heads/main/logos/caramel-face.jpeg"
+        },
+        "socialMedia": {
+            "blog": "https://hereandnowai.com/blog",
+            "linkedin": "https://www.linkedin.com/company/hereandnowai/",
+            "instagram": "https://instagram.com/hereandnow_ai",
+            "github": "https://github.com/hereandnowai",
+            "x": "https://x.com/hereandnow_ai",
+            "youtube": "https://youtube.com/@hereandnow_ai"
+        }
+    }
+}

requirements.txt

@@ -0,0 +1,3 @@
+flask>=3.0.0
+google-generativeai>=0.8.0
+gunicorn>=21.0.0

static/css/style.css

@@ -0,0 +1,505 @@
+/* ===========================================
+   HERE AND NOW AI Chatbot - Wax Crayon Theme
+   =========================================== */
+
+:root {
+  --primary: #ffdf00;
+  --secondary: #004040;
+  --bg-cream: #fff8e7;
+  --bg-paper: #fffef5;
+  --text-dark: #2d2d2d;
+  --text-light: #666;
+  --shadow: rgba(0, 64, 64, 0.15);
+  --crayon-stroke: 3px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Patrick Hand", cursive;
+  background: var(--bg-cream);
+  min-height: 100vh;
+  color: var(--text-dark);
+  overflow-x: hidden;
+}
+
+/* Crayon texture background */
+.crayon-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(255, 223, 0, 0.03) 2px,
+      rgba(255, 223, 0, 0.03) 4px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 2px,
+      rgba(0, 64, 64, 0.02) 2px,
+      rgba(0, 64, 64, 0.02) 4px
+    );
+  pointer-events: none;
+  z-index: -1;
+}
+
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===========================================
+   Header - Hand-drawn style
+   =========================================== */
+.header {
+  text-align: center;
+  padding: 20px 0;
+  margin-bottom: 20px;
+}
+
+.logo-container {
+  display: inline-block;
+  padding: 15px 25px;
+  background: var(--primary);
+  border: var(--crayon-stroke) solid var(--secondary);
+  border-radius: 20px 5px 20px 5px;
+  box-shadow:
+    4px 4px 0 var(--secondary),
+    8px 8px 15px var(--shadow);
+  transform: rotate(-1deg);
+  transition: transform 0.3s ease;
+}
+
+.logo-container:hover {
+  transform: rotate(0deg) scale(1.02);
+}
+
+.logo {
+  height: 50px;
+  width: auto;
+}
+
+.slogan {
+  font-family: "Caveat", cursive;
+  font-size: 1.8rem;
+  color: var(--secondary);
+  margin-top: 15px;
+  font-weight: 600;
+  text-shadow: 2px 2px 0 var(--primary);
+}
+
+/* ===========================================
+   Chat Container - Notebook paper style
+   =========================================== */
+.chat-container {
+  flex: 1;
+  background: var(--bg-paper);
+  border: var(--crayon-stroke) solid var(--secondary);
+  border-radius: 15px 30px 15px 30px;
+  box-shadow:
+    6px 6px 0 var(--primary),
+    12px 12px 0 var(--secondary),
+    15px 15px 30px var(--shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Notebook lines effect */
+.chat-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    transparent,
+    transparent 30px,
+    rgba(0, 64, 64, 0.05) 30px,
+    rgba(0, 64, 64, 0.05) 31px
+  );
+  pointer-events: none;
+}
+
+/* Red margin line */
+.chat-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 60px;
+  width: 2px;
+  height: 100%;
+  background: rgba(255, 100, 100, 0.3);
+  pointer-events: none;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 20px 25px;
+  background: linear-gradient(135deg, var(--primary) 0%, #ffe94d 100%);
+  border-bottom: var(--crayon-stroke) solid var(--secondary);
+  position: relative;
+  z-index: 1;
+}
+
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 3px solid var(--secondary);
+  box-shadow: 3px 3px 0 var(--secondary);
+  object-fit: cover;
+}
+
+.chat-header-info h2 {
+  font-family: "Caveat", cursive;
+  font-size: 1.8rem;
+  color: var(--secondary);
+  margin-bottom: 2px;
+}
+
+.status {
+  font-size: 0.9rem;
+  color: var(--text-light);
+}
+
+/* ===========================================
+   Messages - Speech bubbles with crayon feel
+   =========================================== */
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.message {
+  display: flex;
+  gap: 12px;
+  max-width: 85%;
+  animation: messageSlide 0.3s ease-out;
+}
+
+@keyframes messageSlide {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message.user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid var(--secondary);
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+.message-content {
+  padding: 15px 20px;
+  border-radius: 20px 20px 20px 5px;
+  position: relative;
+  line-height: 1.5;
+  font-size: 1.1rem;
+}
+
+.message.bot .message-content {
+  background: white;
+  border: 2px solid var(--secondary);
+  box-shadow: 3px 3px 0 var(--primary);
+}
+
+.message.user .message-content {
+  background: var(--primary);
+  border: 2px solid var(--secondary);
+  border-radius: 20px 20px 5px 20px;
+  box-shadow: 3px 3px 0 var(--secondary);
+}
+
+/* ===========================================
+   Input Area - Torn paper effect
+   =========================================== */
+.chat-input-container {
+  padding: 20px 25px;
+  background: linear-gradient(to top, var(--bg-cream), var(--bg-paper));
+  border-top: 3px dashed var(--secondary);
+  position: relative;
+  z-index: 1;
+}
+
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.suggestion-btn {
+  font-family: "Patrick Hand", cursive;
+  font-size: 0.95rem;
+  padding: 8px 16px;
+  background: white;
+  border: 2px solid var(--secondary);
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--text-dark);
+}
+
+.suggestion-btn:hover {
+  background: var(--primary);
+  transform: translateY(-2px);
+  box-shadow: 2px 2px 0 var(--secondary);
+}
+
+.chat-form {
+  display: flex;
+  gap: 12px;
+}
+
+#messageInput {
+  flex: 1;
+  font-family: "Patrick Hand", cursive;
+  font-size: 1.1rem;
+  padding: 15px 20px;
+  border: 3px solid var(--secondary);
+  border-radius: 25px;
+  background: white;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+#messageInput:focus {
+  box-shadow: 0 0 0 3px var(--primary);
+}
+
+#messageInput::placeholder {
+  color: var(--text-light);
+}
+
+#sendBtn {
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  border: 3px solid var(--secondary);
+  background: var(--primary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  color: var(--secondary);
+}
+
+#sendBtn:hover {
+  transform: scale(1.1) rotate(10deg);
+  box-shadow: 3px 3px 0 var(--secondary);
+}
+
+#sendBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* ===========================================
+   Footer - Sketchy style
+   =========================================== */
+.footer {
+  text-align: center;
+  padding: 25px 0;
+  margin-top: 20px;
+}
+
+.social-links {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.social-links a {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary);
+  border: 2px solid var(--secondary);
+  border-radius: 50%;
+  color: var(--secondary);
+  transition: all 0.2s ease;
+}
+
+.social-links a:hover {
+  transform: translateY(-3px) rotate(5deg);
+  box-shadow: 2px 2px 0 var(--secondary);
+}
+
+.copyright {
+  font-size: 0.9rem;
+  color: var(--text-light);
+  margin-bottom: 5px;
+}
+
+.contact {
+  font-size: 0.85rem;
+}
+
+.contact a {
+  color: var(--secondary);
+  text-decoration: none;
+}
+
+.contact a:hover {
+  text-decoration: underline;
+}
+
+/* ===========================================
+   Typing indicator
+   =========================================== */
+.typing-indicator {
+  display: flex;
+  gap: 5px;
+  padding: 15px 20px;
+}
+
+.typing-indicator span {
+  width: 10px;
+  height: 10px;
+  background: var(--secondary);
+  border-radius: 50%;
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(1) {
+  animation-delay: 0s;
+}
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-10px);
+    opacity: 1;
+  }
+}
+
+/* ===========================================
+   Mobile Responsive
+   =========================================== */
+@media (max-width: 768px) {
+  .container {
+    padding: 10px;
+  }
+
+  .logo {
+    height: 40px;
+  }
+
+  .slogan {
+    font-size: 1.4rem;
+  }
+
+  .chat-container::after {
+    display: none;
+  }
+
+  .chat-header {
+    padding: 15px 20px;
+  }
+
+  .avatar {
+    width: 50px;
+    height: 50px;
+  }
+
+  .chat-header-info h2 {
+    font-size: 1.4rem;
+  }
+
+  .message {
+    max-width: 90%;
+  }
+
+  .suggestions {
+    gap: 8px;
+  }
+
+  .suggestion-btn {
+    font-size: 0.85rem;
+    padding: 6px 12px;
+  }
+
+  #messageInput {
+    padding: 12px 15px;
+  }
+
+  #sendBtn {
+    width: 48px;
+    height: 48px;
+  }
+}
+
+/* ===========================================
+   Scrollbar styling
+   =========================================== */
+.chat-messages::-webkit-scrollbar {
+  width: 8px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 4px;
+  border: 1px solid var(--secondary);
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+  background: #ffe94d;
+}

static/js/chat.js

@@ -0,0 +1,150 @@
+/**
+ * HERE AND NOW AI Chatbot - Chat functionality
+ */
+
+// Generate a unique session ID
+const sessionId = 'session_' + Math.random().toString(36).substr(2, 9);
+
+// DOM elements
+const chatMessages = document.getElementById('chatMessages');
+const chatForm = document.getElementById('chatForm');
+const messageInput = document.getElementById('messageInput');
+const sendBtn = document.getElementById('sendBtn');
+
+// User avatar (default)
+const userAvatar = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23004040"/><circle cx="50" cy="40" r="18" fill="%23FFDF00"/><ellipse cx="50" cy="75" rx="28" ry="20" fill="%23FFDF00"/></svg>';
+
+// Bot avatar
+let botAvatar = '';
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    // Get bot avatar from the first message
+    const firstBotMessage = document.querySelector('.message.bot .message-avatar');
+    if (firstBotMessage) {
+        botAvatar = firstBotMessage.src;
+    }
+    
+    // Focus input
+    messageInput.focus();
+});
+
+// Handle form submission
+chatForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const message = messageInput.value.trim();
+    if (!message) return;
+    
+    // Clear input
+    messageInput.value = '';
+    
+    // Add user message
+    addMessage(message, 'user');
+    
+    // Show typing indicator
+    showTyping();
+    
+    // Send to API
+    try {
+        const response = await fetch('/api/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                message: message,
+                session_id: sessionId
+            })
+        });
+        
+        const data = await response.json();
+        
+        // Remove typing indicator
+        hideTyping();
+        
+        if (data.error) {
+            addMessage('Oops! Something went wrong. Please try again. 😅', 'bot');
+        } else {
+            addMessage(data.response, 'bot');
+        }
+    } catch (error) {
+        hideTyping();
+        addMessage('Connection error. Please check your internet and try again. 🔌', 'bot');
+    }
+});
+
+// Add message to chat
+function addMessage(text, type) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${type}`;
+    
+    const avatar = type === 'user' ? userAvatar : botAvatar;
+    
+    messageDiv.innerHTML = `
+        <img src="${avatar}" alt="${type === 'user' ? 'You' : 'Caramel'}" class="message-avatar">
+        <div class="message-content">
+            <p>${formatMessage(text)}</p>
+        </div>
+    `;
+    
+    chatMessages.appendChild(messageDiv);
+    scrollToBottom();
+}
+
+// Format message (handle line breaks and basic formatting)
+function formatMessage(text) {
+    return text
+        .replace(/\n/g, '<br>')
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.*?)\*/g, '<em>$1</em>');
+}
+
+// Show typing indicator
+function showTyping() {
+    const typingDiv = document.createElement('div');
+    typingDiv.className = 'message bot typing-message';
+    typingDiv.innerHTML = `
+        <img src="${botAvatar}" alt="Caramel" class="message-avatar">
+        <div class="message-content">
+            <div class="typing-indicator">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    `;
+    chatMessages.appendChild(typingDiv);
+    scrollToBottom();
+    
+    // Disable send button
+    sendBtn.disabled = true;
+}
+
+// Hide typing indicator
+function hideTyping() {
+    const typingMessage = document.querySelector('.typing-message');
+    if (typingMessage) {
+        typingMessage.remove();
+    }
+    sendBtn.disabled = false;
+}
+
+// Scroll to bottom
+function scrollToBottom() {
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+// Send suggestion
+function sendSuggestion(text) {
+    messageInput.value = text;
+    chatForm.dispatchEvent(new Event('submit'));
+}
+
+// Handle Enter key (Shift+Enter for new line)
+messageInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        chatForm.dispatchEvent(new Event('submit'));
+    }
+});

templates/index.html

@@ -0,0 +1,162 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ branding.organizationName }} - AI Chatbot</title>
+    <link rel="icon" type="image/png" href="{{ branding.logo.favicon }}" />
+    <link rel="stylesheet" href="/static/css/style.css" />
+    <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=Caveat:wght@400;500;600;700&family=Patrick+Hand&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="crayon-bg"></div>
+
+    <div class="container">
+      <!-- Header -->
+      <header class="header">
+        <div class="logo-container">
+          <img
+            src="{{ branding.logo.title }}"
+            alt="{{ branding.organizationName }}"
+            class="logo"
+          />
+        </div>
+        <p class="slogan">{{ branding.slogan }}</p>
+      </header>
+
+      <!-- Chat Container -->
+      <main class="chat-container">
+        <div class="chat-header">
+          <img src="{{ branding.chatbot.face }}" alt="Caramel" class="avatar" />
+          <div class="chat-header-info">
+            <h2>Chat with Caramel</h2>
+            <span class="status">🟢 Online</span>
+          </div>
+        </div>
+
+        <div class="chat-messages" id="chatMessages">
+          <div class="message bot">
+            <img
+              src="{{ branding.chatbot.face }}"
+              alt="Caramel"
+              class="message-avatar"
+            />
+            <div class="message-content">
+              <p>
+                Hey there! 👋 I'm Caramel, your friendly AI assistant from HERE
+                AND NOW AI. How can I help you today?
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="chat-input-container">
+          <div class="suggestions">
+            <button
+              class="suggestion-btn"
+              onclick="sendSuggestion('What does HERE AND NOW AI do?')"
+            >
+              What does HERE AND NOW AI do?
+            </button>
+            <button
+              class="suggestion-btn"
+              onclick="sendSuggestion('How can AI help my business?')"
+            >
+              How can AI help my business?
+            </button>
+            <button
+              class="suggestion-btn"
+              onclick="sendSuggestion('Tell me about your services')"
+            >
+              Tell me about your services
+            </button>
+          </div>
+          <form class="chat-form" id="chatForm">
+            <input
+              type="text"
+              id="messageInput"
+              placeholder="Type your message here..."
+              autocomplete="off"
+            />
+            <button type="submit" id="sendBtn">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+              </svg>
+            </button>
+          </form>
+        </div>
+      </main>
+
+      <!-- Footer -->
+      <footer class="footer">
+        <div class="social-links">
+          <a
+            href="{{ branding.socialMedia.linkedin }}"
+            target="_blank"
+            title="LinkedIn"
+          >
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+              <path
+                d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+              />
+            </svg>
+          </a>
+          <a
+            href="{{ branding.socialMedia.instagram }}"
+            target="_blank"
+            title="Instagram"
+          >
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+              <path
+                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
+              />
+            </svg>
+          </a>
+          <a
+            href="{{ branding.socialMedia.youtube }}"
+            target="_blank"
+            title="YouTube"
+          >
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+              <path
+                d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+              />
+            </svg>
+          </a>
+          <a
+            href="{{ branding.socialMedia.github }}"
+            target="_blank"
+            title="GitHub"
+          >
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+              <path
+                d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+              />
+            </svg>
+          </a>
+        </div>
+        <p class="copyright">
+          © 2025 {{ branding.organizationName }}. All rights reserved.
+        </p>
+        <p class="contact">
+          <a href="mailto:{{ branding.email }}">{{ branding.email }}</a> |
+          <a href="tel:{{ branding.mobile }}">{{ branding.mobile }}</a>
+        </p>
+      </footer>
+    </div>
+
+    <script src="/static/js/chat.js"></script>
+  </body>
+</html>