Create a Simple AI Bot for Blogger in Porteus Linux
This is how I set up a fully local AI chatbot and integrated it into my old Blogger template using Porteus Linux as the backend server. The best part is that it’s totally free and runs right on my notebook, only for testing purposes.
Prerequisites
You’ll need a few things already installed in your Porteus system. You can get them through the UsM (Unified Slackware Package Manager):
Ollama: For running the AI model.
Python 3: This comes with a built-in web server.
Step 1: Get the Ultra-Light AI Model
You need an AI model that’s smart enough but won't crash your notebook. I recommend SmollM2 360M. It’s super-fast and works great in Porteus. Open a terminal and type:
The first time, it will automatically download the model (around 240 MB) and then start a chat session. You can now close that terminal window.
Step 2: Create the Local Python Server
Next, you need to create a simple Python script to bridge the gap between your blog and Ollama.
Open your favorite text editor (like Leafpad or Mousepad) in a terminal.
Paste the following code. Don't worry about understanding every line for now; it just tells Python to accept incoming questions and send them to Ollama:
Code: Select all
from http.server import HTTPServer, BaseHTTPRequestHandler
import json
import urllib.request
class ChatHandler(BaseHTTPRequestHandler):
def do_OPTIONS(self):
# Permite la conexión desde el navegador
self.send_response(200)
self.send_header('Access-Control-Allow-Origin', '*')
self.send_header('Access-Control-Allow-Headers', 'Content-Type')
self.end_headers()
def do_POST(self):
length = int(self.headers['Content-Length'])
body = json.loads(self.rfile.read(length))
# Consulta directa a Ollama
ollama_req = urllib.request.Request(
'http://localhost:11434/api/generate',
data=json.dumps({"model": "smollm2:360m", "prompt": body['prompt'], "stream": False}).encode(),
headers={'Content-Type': 'application/json'}
)
with urllib.request.urlopen(ollama_req) as res:
ollama_res = json.loads(res.read().decode())
# Respuesta al navegador
self.send_response(200)
self.send_header('Access-Control-Allow-Origin', '*')
self.send_header('Content-Type', 'application/json')
self.end_headers()
self.wfile.write(json.dumps({"text": ollama_res.get('response', '')}).encode())
print("Servidor activo en http://localhost:5000")
HTTPServer(('0.0.0.0', 5000), ChatHandler).serve_forever()
Save this file as server.py in a new folder (e.g., ~/ai_bot/). (home/guest) for testing
To start the server, open a terminal in that same folder and run:
Step 3: Add the Bot Widget to Your Blog
Now, you just need to add the chatbot's interface to your website.
Log in to your Blogger dashboard and go to Theme (or Plantilla).
Click on Edit HTML.
Add the following HTML/JavaScript code wherever you want the chatbot to appear (a good place is usually near the top of the <body> tag):
Code: Select all
<div style="font-family: sans-serif; max-width: 280px; padding: 10px; border: 1px solid #ccc;">
<div id="log" style="height: 100px; overflow-y: auto; font-size: 13px; margin-bottom: 8px;"></div>
<input type="text" id="msg" style="width: 65%;" placeholder="Escribí un mensaje..." />
<button onclick="bot()">Enviar</button>
</div>
<script>
async function bot() {
let txt = document.getElementById('msg').value;
let log = document.getElementById('log');
if (!txt) return;
log.innerHTML += `<div><b>Vos:</b> ${txt}</div>`;
document.getElementById('msg').value = '';
try {
let res = await fetch('http://localhost:5000', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: txt })
});
let data = await res.json();
log.innerHTML += `<div style="color: blue;"><b>Bot:</b> ${data.text}</div>`;
} catch (e) {
log.innerHTML += `<div style="color: red;">Error de conexión.</div>`;
}
}
</script>
Click Save.
Testing It Out
Open your blog in the same notebook that’s running the server.py and Ollama. You should now see the "Asistente IA" widget. Ask a simple question and you should get a direct response in English or Spanish!
