Building a Simple Chat Interface with Python and Gradio

Simple Chat Interface with Python and Gradio

Introduction

This blog shows how to create a beginner-friendly chat interface that answers questions about your background using a PDF (e.g., your LinkedIn profile) and a short text summary. You’ll learn how to:

• Read text from PDF and TXT files

• Set up “system” and “user” prompts for a language model

• Build a chat function that remembers conversation history

• Launch a web chat UI with Gradio

This guide is for anyone who knows basic Python and wants to build a simple chatbot for their personal website or portfolio.

Step-by-Step Explanation

Step 1: Install Required Libraries

Before writing code, install these packages:

pip install PyPDF2 gradio openai

• PyPDF2 reads PDF files

• Gradio creates web interfaces

• openai connects to OpenAI’s API

Think of installing libraries like stocking your toolbox before fixing something.

Step 2: Import Libraries and Load Files

Create a Python script and start by importing packages and loading your files:

import PyPDF2
import openai
import gradio as gr

# Load PDF (e.g., LinkedIn profile)
with open("linkedin.pdf", "rb") as pdf_file:
    reader = PyPDF2.PdfReader(pdf_file)
    linkedin_text = ""
    for page in reader.pages:
        linkedin_text += page.extract_text()

# Load summary text
with open("summary.txt") as txt_file:
    summary_text = txt_file.read().strip()

# Set your name
name = "Your Name"

• PdfReader reads each page.

• extract_text() pulls out all words.

• We store everything in variables for later use.

Analogy: Imagine copying text from a printed resume into one long paragraph.

Step 3: Create System and User Prompts

To guide the chatbot’s behavior, split instructions into:

system_prompt = f"""
You are {name}. You answer professional questions about background, skills, and experience.
Use the following summary and profile as context. If you don’t know an answer, say so.

### Summary
{summary_text}

### Profile
{linkedin_text}

Please respond professionally and concisely.
"""

user_instruction = "Please chat with the user about my career background."

• System prompt sets the overall rules and context

• User instruction is the actual question to send each time

Real-world comparison: Like giving a friend background notes before they answer an interview question.

Step 4: Write the Chat Function

Define a function that Gradio will call every time someone sends a message:

def chat(user_message, history):
    # Build message list for OpenAI
    messages = [{"role": "system", "content": system_prompt}]
    # Add past conversation
    for role, msg in history:
        messages.append({"role": role, "content": msg})
    # Add the new user message
    messages.append({"role": "user", "content": user_message})

    # Call the OpenAI API
    response = openai.ChatCompletion.create(
        model="gpt-4o-mini",
        messages=messages
    )
    answer = response.choices[0].message.content

    # Update history
    history.append(("user", user_message))
    history.append(("assistant", answer))
    return history, history

• history is a list of (role, text) tuples

• We prepend the system prompt once each call

• The function returns updated history so Gradio displays the full chat

Step analogy: Each chat turn is like adding pages to a diary—what happened before stays recorded.

Step 5: Launch the Gradio Interface

With the chat function ready, create and launch the web UI:

interface = gr.ChatInterface(fn=chat, title="Career Chatbot")
interface.launch()

• ChatInterface sets up a chat box in your browser

• launch() runs a local web server

Everyday example: It’s like opening a chat window on a website.

Example Interaction

1. User types: “What is your greatest accomplishment?”

2. Bot replies: “My greatest accomplishment is co-founding Nebula, where we use AI to improve talent sourcing.”

This back-and-forth continues, with the bot drawing on your PDF and summary.

Flowchart

[Start]
   ↓
[Load PDF & TXT files]
   ↓
[Build system_prompt & user_instruction]
   ↓
[User sends message] → [chat() called]
   ↓                     ↓
[Compile messages list]  ←
   ↓
[Call OpenAI API]
   ↓
[Receive response]
   ↓
[Update history]
   ↓
[Display in chat UI]
   ↓
[Wait for next user message]
   ↓
[End]

Summary

You’ve built a simple chatbot that:

• Reads your profile from files

• Uses system and user prompts to guide answers

• Keeps conversation history

• Runs in the browser with Gradio

What’s next?

• Add authentication or logging

• Customize the UI theme in Gradio

• Explore more advanced prompt engineering and error handling

With these basics, you can create an engaging chat interface for any kind of personal or project information!