Lesson 4: Build the Chatbot UI (Flask + HTML)
Step A — Flask App with Template
Create folder app/templates/ and add chat.html below. Replace your app/main.py with this:
import os
from dotenv import load_dotenv
from flask import Flask, render_template, request
from google.cloud import aiplatform
load_dotenv()
project_id = os.getenv("GCP_PROJECT_ID")
location = os.getenv("GCP_LOCATION", "us-central1")
aiplatform.init(project=project_id, location=location)
model = aiplatform.TextGenerationModel.from_pretrained("text-bison")
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"])
def chat():
response_text = ""
user_input = ""
if request.method == "POST":
user_input = request.form.get("user_input", "")
# Call Vertex AI with the prompt
response = model.predict(user_input, max_output_tokens=256, temperature=0.3)
response_text = response.text
return render_template("chat.html", response=response_text, user_input=user_input)
if __name__ == "__main__":
app.run(debug=True, port=5000)
Step B — Template: app/templates/chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Vertex AI Chatbot</title>
<style>
body{font-family:Segoe UI,Tahoma,Arial,sans-serif;background:#f7f9fb;margin:0}
.wrap{max-width:900px;margin:0 auto;padding:24px}
h2{color:#2c3e50;border-bottom:3px solid #e67e22;padding-bottom:8px}
.chatbox{background:#fff;border-radius:14px;box-shadow:0 6px 18px rgb(0 0 0 / 8%);padding:20px}
.bubble{padding:10px;border-radius:12px;margin:6px 0}
.user{background:#eef3ff}
.bot{background:#fff5e5}
textarea{width:100%;min-height:100px;padding:10px;border:1px solid #ddd;border-radius:10px}
button{background:#e67e22;color:#fff;border:none;border-radius:10px;padding:10px 16px;cursor:pointer}
</style>
</head>
<body>
<div class="wrap">
<h2>My Vertex AI Chatbot</h2>
<div class="chatbox">
<form method="POST">
<label>Your question:</label><br/>
<textarea name="user_input" placeholder="Type here...">{{ user_input }}</textarea><br/><br/>
<button type="submit">Ask</button>
</form>
{% if user_input %}
<div class="bubble user"><b>You:</b> {{ user_input }}</div>
{% endif %}
{% if response %}
<div class="bubble bot"><b>Bot:</b> {{ response }}</div>
{% endif %}
</div>
</div>
</body>
</html>
Step C — Run Locally
# From project root (activate venv first) python app/main.py # Open http://127.0.0.1:5000/
You now have a working chat UI backed by Vertex AI 🎉