Below is an example of a complete codebase for a simple café website that integrates AI technology (an AI chatbot) to answer visitor questions. In this demonstration, the frontend is built with HTML, CSS, and JavaScript, and a Node.js backend (using Express) simulates an AI response. In a production system, you would replace the simulated response with calls to an actual AI service (for example, the OpenAI API).
File Structure
Assume you have the following structure:my-cafe-website/ ├── public/ │ ├── index.html │ ├── style.css │ └── script.js ├── server.js └── .env
1. Frontend Code
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Cafe AI</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Welcome to Cafe AI</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <section id="home"> <h2>Home</h2> <p>Enjoy the best coffee and pastries in town with a touch of AI innovation!</p> </section> <section id="menu"> <h2>Menu</h2> <ul> <li>Espresso</li> <li>Cappuccino</li> <li>Latte</li> <li>Fresh Pastries</li> <li>Sandwiches</li> </ul> </section> <section id="about"> <h2>About Us</h2> <p>Cafe AI is where tradition meets technology. Our AI chatbot is here to help answer your questions and guide you through our menu and services.</p> </section> <section id="contact"> <h2>Contact</h2> <p>Email: info@cafai.com</p> <p>Phone: +1 234 567 890</p> </section> <section id="chatbot"> <h2>Chat with our AI Assistant</h2> <div id="chatbox"> <div id="chatlog"></div> <textarea id="chatInput" placeholder="Ask me anything about our cafe..."></textarea> <button id="sendBtn">Send</button> </div> </section> <footer> <p>© 2025 Cafe AI. All rights reserved.</p> </footer> http://script.js </body> </html>
style.css
body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 1em; } header h1 { margin: 0; } nav ul { list-style-type: none; padding: 0; margin: 0; display: flex; } nav li { margin-right: 1em; } nav a { color: #fff; text-decoration: none; } section { padding: 2em; } #chatbot { background-color: #f9f9f9; border-top: 1px solid #ccc; } #chatbox { max-width: 600px; margin: 0 auto; } #chatlog { border: 1px solid #ccc; height: 300px; overflow-y: auto; padding: 1em; background-color: #fff; } #chatInput { width: 100%; height: 50px; padding: 1em; margin-top: 1em; } #sendBtn { padding: 0.5em 1em; margin-top: 0.5em; } footer { text-align: center; background-color: #333; color: #fff; padding: 1em; }
script.js
document.getElementById('sendBtn').addEventListener('click', sendMessage); function sendMessage() { const input = document.getElementById('chatInput'); const message = input.value.trim(); if (!message) return; appendMessage('User', message); input.value = ''; // Send the user's message to the backend API fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: message }) }) .then(response => response.json()) .then(data => { appendMessage('AI', data.response); }) .catch(error => { console.error('Error:', error); appendMessage('AI', "Sorry, something went wrong."); }); } function appendMessage(sender, message) { const chatlog = document.getElementById('chatlog'); const messageElem = document.createElement('p'); messageElem.innerHTML = `<strong>${sender}:</strong> ${message}`; chatlog.appendChild(messageElem); chatlog.scrollTop = chatlog.scrollHeight; }
2. Backend Code
server.js
This Node.js server uses Express to serve the static files from the public folder and to create an API endpoint for the chat functionality. For demonstration, a static AI response is returned. In a real-world scenario, you would replace the static response with a call to an AI service (e.g., OpenAI’s API).const express = require('express'); const bodyParser = require('body-parser'); const fetch = require('node-fetch'); // Ensure node-fetch is installed require('dotenv').config(); const app = express(); const PORT = process.env.PORT || 3000; // Serve static files from the public directory app.use(express.static('public')); app.use(bodyParser.json()); app.post('/api/chat', async (req, res) => { const userMessage = req.body.message; // Example: Replace with an actual AI service call. // Uncomment and configure the following block to integrate OpenAI's API. /* const apiKey = process.env.OPENAI_API_KEY; try { const apiResponse = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [{ role: "user", content: userMessage }], max_tokens: 150 }) }); const data = await apiResponse.json(); const aiResponse = data.choices[0].message.content; res.json({ response: aiResponse }); } catch (error) { console.error(error); res.json({ response: "Error calling AI service." }); } */ // For demonstration purposes, use a static response: const aiResponse = "Welcome to Cafe AI! We offer a variety of coffees, teas, and fresh pastries. How can I assist you today?"; res.json({ response: aiResponse }); }); app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); });
.env
Create a .env file in the root directory to store environment variables securely (for example, your OpenAI API key):OPENAI_API_KEY=your_openai_api_key_here
Remember: Never expose your API keys in client-side code.
3. Running the Website
- Install Dependencies:
In the project directory, run:npm install express body-parser node-fetch dotenv - Start the Server:
Run the command:node server.jsYour website will be available at http://localhost:3000. - Test the Chatbot:
Open your browser, navigate to your café website, and try out the AI chatbot at the bottom of the page.
Explanation
- Frontend (HTML/CSS/JS):
The HTML file defines the structure of the website, including the header, sections (Home, Menu, About, Contact), and an AI chatbot section. The CSS file styles the website, while the JavaScript file handles sending user messages to the backend and appending both user and AI responses to the chat log. - Backend (Node.js/Express):
The Node.js server serves static files and provides an API endpoint (/api/chat) that accepts POST requests with a user message. In a production system, this endpoint would securely call an AI service (like OpenAI) to generate responses. - AI Integration:
The AI part is simulated with a static response in this demo. To integrate with an actual AI service, you would uncomment the provided block inserver.js, configure your API key in the.envfile, and make sure your server securely handles the request.
This codebase gives you a starting point to build a café website enhanced by AI technology. You can expand the functionality, improve the design, and integrate more advanced AI features as needed.
This is the very useful website for business man
No Responses