Simple Frontend Dashboard

Zack had stitched his assistant into a backend service. He could run a Flask server, call endpoints, and get responses for:

• Summarizing emails
• Drafting replies
• Transcribing meetings
• Summarizing transcripts into notes and action items

It worked, but it wasn’t fun. Every test involved typing curl commands or using Postman. Every result came as JSON.

“This is powerful,” Zack thought, “but it doesn’t feel like an assistant. It feels like plumbing.”

What Zack wanted was simple: a dashboard. A page where he could:

• See his daily inbox digest at a glance
• Click to view reply drafts
• Paste or upload a meeting transcript
• Approve or reject AI suggestions with buttons

No more JSON. No more command-line. Just a clean interface. That’s when he discovered Streamlit.

Step 1: Why Streamlit is perfect for beginners

Streamlit is an open-source Python library for building data apps. Unlike frameworks such as React or Angular, you don’t need to know JavaScript, CSS, or HTML. You just write Python, and Streamlit turns it into a web app.

For example, this simple code:

1
2
3
4
import streamlit as st

st.title("Hello, Assistant")
st.write("This is my first dashboard")

When you run:

1
streamlit run app.py

You’ll get a webpage with a big title and some text. That’s why Zack chose Streamlit:

• Beginner-friendly, just Python.
• Instant refresh, changes show up as soon as you save.
• Built-in widgets, buttons, checkboxes, file uploaders.
• Good for prototypes, perfect for Zack’s assistant dashboard.

Step 2: setting up Streamlit

Zack created a new folder called frontend and a file dashboard.py.

He installed Streamlit with:

1
pip install streamlit

To test it, he added this to dashboard.py:

1
2
3
4
import streamlit as st

st.title("AI Email & Meeting Assistant")
st.write("Welcome, Zack! This is your dashboard.")

Then ran:

1
streamlit run dashboard.py

A browser window opened at http://localhost:8501 showing the title. Zack grinned.

“Finally, something I can click on.”

Step 3: Connecting backend and frontend

Zack already had his Flask backend running on port 5000 (Lesson 8). Now Streamlit needed to talk to it.

He used Python’s requests library:

1
pip install requests

Then added a helper in dashboard.py:

1
2
3
4
5
6
7
import requests

BACKEND_URL = "http://127.0.0.1:5000"

def summarize_email(email_text):
    res = requests.post(f"{BACKEND_URL}/summarize_email", json={"email": email_text})
    return res.json().get("summary", "")

This way, whenever Zack typed in an email, Streamlit would send it to the backend and display the result.

Step 4: Building the inbox summaries section

Zack wanted the first part of the dashboard to show his inbox digest. In dashboard.py:

1
2
3
4
5
6
7
8
9
10
import streamlit as st

st.title("AI Email & Meeting Assistant")

st.header("📧 Inbox Summaries")

email_text = st.text_area("Paste an email to summarize")
if st.button("Summarize Email"):
    summary = summarize_email(email_text)
    st.success(summary)

Now Zack could paste an email body, click the button, and see a summary. It wasn’t pulling directly from Gmail yet, but it was enough to test the flow.

Step 5: Add reply drafts

Next, Zack wanted to see AI-suggested replies for an incoming email. He updated the backend endpoint /draft_reply (Lesson 8). Then added this in Streamlit:

1
2
3
4
5
6
7
8
9
10
st.header("✍️ Reply Drafts")

reply_input = st.text_area("Paste an email to draft a reply")
if st.button("Generate Reply Drafts"):
    res = requests.post(f"{BACKEND_URL}/draft_reply", json={"email": reply_input})
    drafts = res.json().get("drafts", [])
    for i, draft in enumerate(drafts, 1):
        st.write(f"**Option {i}:** {draft}")
        st.button(f"Approve Option {i}", key=f"approve_{i}")
        st.button(f"Reject Option {i}", key=f"reject_{i}")

Now Zack could:

1. Paste an email
2. See three drafts
3. Approve or reject each one

For now, approve/reject just printed buttons. Later, Zack planned to log approvals to a file.

Step 6: Add meeting transcription and notes

Zack wanted a section for meetings:

1. Upload audio file
2. Backend transcribes
3. Backend summarizes into notes + tasks

In Streamlit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
st.header("🎙️ Meeting Notes")

audio_file = st.file_uploader("Upload meeting audio", type=["mp3", "wav", "m4a"])
if st.button("Transcribe & Summarize Meeting") and audio_file:
    files = {"audio": audio_file.getvalue()}
    res = requests.post(f"{BACKEND_URL}/transcribe_meeting", files={"audio": audio_file})
    transcript = res.json().get("transcript", "")
    st.subheader("Transcript")
    st.text_area("Transcript", transcript, height=200)

    res2 = requests.post(f"{BACKEND_URL}/summarize_meeting", json={"transcript": transcript})
    meeting_output = res2.json().get("output", "")
    st.subheader("Meeting Summary & Action Items")
    st.write(meeting_output)

Now Zack could upload a recording, see the transcript, and get a summary with action items.

Step 7: Making it interactive (approve/reject)

Zack knew human-in-the-loop was essential. He didn’t want AI drafts or meeting notes to go unchecked.

So he added approve/reject buttons that saved results to a simple file:

1
2
3
4
5
import json

def save_decision(decision_type, content):
    with open("decisions.json", "a") as f:
        f.write(json.dumps({"decision": decision_type, "content": content}) + "\n")

When rendering drafts:

1
2
3
4
5
6
7
8
for i, draft in enumerate(drafts, 1):
    st.write(f"**Option {i}:** {draft}")
    if st.button(f"Approve Option {i}", key=f"approve_{i}"):
        save_decision("approve", draft)
        st.success("Approved")
    if st.button(f"Reject Option {i}", key=f"reject_{i}"):
        save_decision("reject", draft)
        st.warning("Rejected")

This way, Zack could track what the assistant got right or wrong.

Step 8: Polishing the dashboard layout

To make the dashboard user-friendly, Zack added:

• Sidebar navigation:

1
page = st.sidebar.selectbox("Choose Section", ["Inbox", "Replies", "Meetings"])

• Icons and headers for clarity.
• Success/warning messages for feedback.

Now the app felt less like a prototype and more like a real assistant.

Step 9: mini-exercise for you

Your challenge:

• Install Streamlit (pip install streamlit).
• Create dashboard.py.
• Add three sections: Inbox, Reply Drafts, Meeting Notes.
• For Inbox: paste text, summarize via backend.
• For Replies: show 3 drafts, approve/reject with buttons.
• For Meetings: upload audio, transcribe and summarize.

Run:

1
streamlit run dashboard.py

Expected:

• A one-page app with three sections.
• Clickable buttons for approval.
• Results displayed cleanly inside the browser.

Zack’s feedback

When Zack opened his Streamlit dashboard, he finally felt it:

“This is my assistant.”

No more terminal commands. No more raw JSON. Just a clean page where:

• His inbox summaries showed up neatly
• Reply drafts came with buttons to approve or reject
• Meeting transcripts turned into usable notes

It wasn’t perfect yet, but it was usable — and shareable. His colleagues could open the app in their browsers and try it.

Conclusion

In this lesson, Zack gave his assistant a face:

• He learned why Streamlit is the easiest frontend for beginners
• He set up sections for inbox, replies, and meetings
• He added approve/reject buttons for human oversight
• He built a one-page dashboard in Python

Now the assistant wasn’t just code. It was a real app.