import os
import json
import re
import html
import streamlit as st
import plotly.graph_objects as go
from google.cloud import storage
from google.oauth2 import service_account
from vaderSentiment.vaderSentiment import SentimentIntensityAnalyzer
from scipy.ndimage import gaussian_filter1d
from datetime import timedelta, datetime
gcp_credentials = os.getenv('GCP_CREDENTIALS')
credentials_dict = json.loads(gcp_credentials)
creds = service_account.Credentials.from_service_account_info(credentials_dict)
client = storage.Client(credentials=creds)
bucket_name = "kapnotes"
bucket = client.bucket(bucket_name)
def get_client_names():
blobs = list(bucket.list_blobs(prefix=""))
client_names = set()
for blob in blobs:
client_name = blob.name.split("/")[0]
client_names.add(client_name)
return sorted(client_names)
def login():
st.markdown("""
<style>
.stApp {
background: linear-gradient(
125deg,
#F0F4F8 0%,
#D9E4F5 50%,
#E5EFF8 100%
);
background-size: 200% 200%;
animation: gradientMove 10s ease infinite;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
h1 {
color: #4A4A4A;
font-size: 3.5rem;
font-weight: 900;
text-align: center;
margin-bottom: 3rem;
letter-spacing: 2px;
}
.login-form-container {
width: 400px;
margin: 0 auto;
padding: 2rem;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.15) 100%
);
backdrop-filter: blur(15px);
border-radius: 24px;
box-shadow:
0 8px 32px rgba(31, 38, 135, 0.37),
inset -4px -4px 8px rgba(255, 255, 255, 0.1),
inset 4px 4px 8px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.stSelectbox label, .stDateInput label {
color: #333333 !important;
font-weight: bold;
font-size: 1rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.stSelectbox > div > div, .stDateInput > div > div {
background: #2E3A47;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
color: #FFFFFF;
font-weight: bold;
box-shadow:
inset 2px 2px 5px rgba(0, 0, 0, 0.3),
inset -2px -2px 5px rgba(255, 255, 255, 0.2);
}
.stButton > button {
width: 100%;
background: linear-gradient(
45deg,
#2563eb 0%,
#3b82f6 100%
);
color: white;
border: none;
border-radius: 16px;
padding: 1rem 1.5rem;
font-size: 1.3rem;
font-weight: bold;
cursor: pointer;
margin-top: 2rem;
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.4),
inset 0 -4px 8px rgba(0, 0, 0, 0.2),
inset 0 4px 8px rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.stButton > button:hover {
transform: translateY(-3px) scale(1.03);
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.5),
inset 0 -4px 8px rgba(0, 0, 0, 0.2),
inset 0 4px 8px rgba(255, 255, 255, 0.2);
background: linear-gradient(
45deg,
#1d4ed8 0%,
#2563eb 100%
);
}
</style>
""", unsafe_allow_html=True)
st.markdown("<h1>KAP NOTES</h1>", unsafe_allow_html=True)
client_names = get_client_names()
with st.form(key="login_form"):
client_name = st.selectbox("Select Client", client_names)
min_date = datetime(2000, 1, 1)
date_input = st.date_input("Enter the Date", min_value=min_date, max_value=datetime.today())
submit_button = st.form_submit_button("Sign In")
if submit_button:
date_str = date_input.strftime("%d-%m-%Y")
date_str = date_str.replace("-", "_")
st.session_state.client_name = client_name
st.session_state.date = date_str
st.session_state.logged_in = True
st.rerun()
if 'logged_in' not in st.session_state:
st.session_state.logged_in = False
if not st.session_state.logged_in:
login()
else:
st.set_page_config(page_title="Kap Notes", layout="wide")
client_name = st.session_state.client_name
date = st.session_state.date
st.sidebar.markdown(f'''
<div class="client-name-container">
<div class="client-name">{client_name}</div>
</div>
''', unsafe_allow_html=True)
css = '''
<style>
[data-testid="stExpander"] div:has(>.streamlit-expanderContent) {
max-height: 400px;
overflow-y: scroll;
}
[data-testid="stSidebar"] {
min-width: 400px;
}
[data-testid="stSidebar"] > div:first-child {
padding-top: 10px;
}
.main {
margin-top: 0 !important;
}
.summary-box, .keypoints-box, .action-items-box {
padding: 20px;
border-radius: 15px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2), 0px 6px 15px rgba(0, 0, 0, 0.15);
margin-top: 20px;
margin-bottom: 30px;
line-height: 1.8;
font-size: 16px;
color: #333;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.summary-box:hover, .keypoints-box:hover, .action-items-box:hover {
transform: translateY(-1px) scale(1.05);
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.25), 0px 18px 35px rgba(0, 0, 0, 0.2);
}
.summary-box {
background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
}
.keypoints-box {
background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
}
.action-items-box {
background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
}
.summary-box, .keypoints-box, .action-items-box {
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.15);
}
.summary-box {
background-color: #FFF8DC;
}
button:hover {
background-color: white;
color: black;
border-color: black;
}
br {
margin-top: 8px;
}
.audio-player-container {
background: linear-gradient(135deg, #FF91A4, #FF4E00);
padding: 25px;
border-radius: 20px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2), 0px 6px 25px rgba(0, 0, 0, 0.15);
margin-top: 30px;
margin-bottom: 40px;
text-align: center;
font-size: 18px;
transition: all 0.7s ease-in-out, transform 0.3s ease;
}
.audio-player-container:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.3), 0px 12px 35px rgba(0, 0, 0, 0.25);
}
.audio-player {
width: 80%;
height: 50px;
border-radius: 15px;
background-color: #FFF8DC;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease, transform 0.3s ease;
}
.audio-player:hover {
background-color: #FF7F50;
transform: scale(1.1);
}
.audio-player-container h4 {
color: #333;
font-weight: 700;
margin-bottom: 15px;
font-size: 22px;
}
.audio-player-container .play-button {
background-color: #FF4E00;
border: none;
padding: 10px 20px;
color: white;
font-weight: 600;
border-radius: 30px;
cursor: pointer;
transition: all 0.5s ease;
}
.audio-player-container .play-button:hover {
background-color: #FF91A4;
box-shadow: 0px 4px 20px rgba(255, 145, 164, 0.5);
}
.audio-player-container .play-button:focus {
outline: none;
}
.comment-box {
background: linear-gradient(145deg, #f4f9fb, #dce5f5);
border: 1px solid #cfd9e6;
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1), -2px -2px 12px rgba(255, 255, 255, 0.8);
font-family: 'Arial', sans-serif;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.comment-box:hover {
transform: scale(1.02) translateY(-2px);
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2), -4px -4px 20px rgba(255, 255, 255, 0.4);
}
.comment-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-weight: bold;
color: #3e3e3e;
}
.comment-text {
color: #555;
font-size: 14px;
line-height: 1.6;
}
.comment-header span {
color: #007bff;
font-size: 12px;
}
.form-container {
margin-bottom: 30px;
}
.stTextInput, .stTextArea {
border-radius: 5px;
border: 1px solid #ccc;
padding: 10px;
font-size: 14px;
margin-bottom: 15px;
width: 100%;
}
.stFormSubmitButton {
color: black;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
.client-name-container {
padding: 20px;
border-radius: 10px;
background: linear-gradient(145deg, #ff7e5f, #feb47b);
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), -5px -5px 15px rgba(255, 255, 255, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.client-name-container:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.15), -8px -8px 20px rgba(255, 255, 255, 0.4);
}
.client-name {
font-size: 2.5rem;
font-weight: 700;
color: #fff;
text-align: center;
margin: 0;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
}
.stButton>button {
background-color: black;
color: white;
width: 150px;
height: 40px;
border: none;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}
.stButton>button:hover {
background-color: white;
color: black;
}
</style>
'''
st.markdown(css, unsafe_allow_html=True)
summary_blob_name = f"{client_name}/{date.replace('_', '-')}/summary.txt"
transcription_blob_name = f"{client_name}/{date.replace('_', '-')}/transcription.txt"
audio_blob_name = f"{client_name}/{date.replace('_', '-')}/audio/audio.wav"
bucket = client.bucket(bucket_name)
summary_blob = bucket.blob(summary_blob_name)
summary_content = summary_blob.download_as_text()
audio_blob = bucket.blob(audio_blob_name)
audio_url = audio_blob.generate_signed_url(expiration=timedelta(hours=1), method='GET')
summary = re.search(r"Summary(.*?)\n\n", summary_content, re.DOTALL).group(1).strip()
key_points = re.findall(r"- (.*?)\n", re.search(r"Key Points(.*?)\n\n", summary_content, re.DOTALL).group(1))
action_items = re.findall(r"- (.*?)\n", re.search(r"Action Items(.*)", summary_content, re.DOTALL).group(1))
transcription_blob = bucket.blob(transcription_blob_name)
with transcription_blob.open("r") as file:
meeting_data = json.load(file)
speaker_data = {}
total_talktime = 0
for entry in meeting_data:
speaker = entry["speaker"]
duration = entry["end"] - entry["start"]
text = entry["text"]
total_talktime += duration
if speaker not in speaker_data:
speaker_data[speaker] = {"talktime": 0, "text": "", "words": 0}
speaker_data[speaker]["talktime"] += duration
speaker_data[speaker]["text"] += " " + text
speaker_data[speaker]["words"] += len(text.split())
for speaker, data in speaker_data.items():
data["word_per_minute"] = round((data["words"] / data["talktime"] * 60), 2)
data["talktime_percentage"] = round((data["talktime"] / total_talktime * 100), 2)
combined_text = " ".join(data["text"] for data in speaker_data.values())
analyzer = SentimentIntensityAnalyzer()
sentences = combined_text.split('.')
sentiment_polarity = [analyzer.polarity_scores(sentence)["compound"] for sentence in sentences if sentence.strip()]
smoothed_polarity = gaussian_filter1d(sentiment_polarity, sigma=2)
st.title("Kap Notes - Unveiling the story behind your meeting")
st.markdown(f"### Summary\n<div class='summary-box'>{summary}</div>", unsafe_allow_html=True)
st.markdown("### Meeting Highlights")
st.markdown(
f"<div class='keypoints-box'>" + "<br>".join(f"• {point}" for point in key_points) + "</div>",
unsafe_allow_html=True
)
st.markdown("### Actionable Items")
st.markdown(
f"<div class='action-items-box'>" + "<br>".join(f"• {item}" for item in action_items) + "</div>",
unsafe_allow_html=True
)
st.markdown("### Comments")
if 'comments' not in st.session_state:
st.session_state.comments = []
def add_comment(comment):
st.session_state.comments.append({"name": "", "comment": comment, "date": datetime.now().strftime("%d, %b %Y")})
if 'name' not in st.session_state:
st.session_state.name = ""
if 'comment' not in st.session_state:
st.session_state.comment = ""
for comment in st.session_state.comments:
st.markdown(
f"""
<div class="comment-box">
<div class="comment-header">
<span>Admin</span>
<span>{comment['date']}</span>
</div>
<div class="comment-text">
{comment['comment']}
</div>
</div>
""", unsafe_allow_html=True)
with st.form(key="comment_form"):
st.markdown('<div class="form-container">', unsafe_allow_html=True)
comment_input = st.text_area("Your Comment", height=100, value=st.session_state.comment)
submit_button = st.form_submit_button("Submit")
st.markdown('</div>', unsafe_allow_html=True)
if submit_button:
if not comment_input:
st.error("Enter your comment")
else:
add_comment(comment_input)
st.session_state.comment = ""
st.rerun()
with st.sidebar:
speaker_names = list(speaker_data.keys())
talk_time_percentages = [data["talktime_percentage"] for data in speaker_data.values()]
color_palette = ["#A3BFF1", "#F4A7B9", "#C4F1D2", "#D6A7F2", "#FFD5A6", "#9BE1E6", "#F4A3C0", "#C1E7B4", "#F1D0FF", "#F9E9A6"]
speaker_colors = {speaker: color_palette[i % len(color_palette)] for i, speaker in enumerate(speaker_names)}
st.markdown(f"""
<div class="audio-player-container">
<h4>Listen to the Meeting Audio</h4>
<audio class="audio-player" controls>
<source src="{audio_url}" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
""", unsafe_allow_html=True)
st.title("Chat Conversation")
with st.expander("Click to view the chat conversation", expanded=False):
chat_conversation = ""
for index, entry in enumerate(meeting_data):
speaker = entry["speaker"]
text = entry["text"]
talk_time = entry["end"] - entry["start"]
speaker_color = speaker_colors[speaker]
chat_conversation += f"""
<div style="margin-bottom: 20px; background-color: {speaker_color}; padding: 15px;
border-radius: 10px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<b style="color: black;">{speaker}</b>
<span style="color: black;">{talk_time:.2f} mins</span>
</div>
<div style="margin-top: 10px; text-align: justify; line-height: 1.6; color: black;">
{text}
</div>
</div>
"""
st.markdown(chat_conversation, unsafe_allow_html=True)
fig = go.Figure(data=[go.Pie(labels=speaker_names, values=talk_time_percentages, marker=dict(colors=list(speaker_colors.values())), hole=0.3)])
fig.update_layout(
title="Speaker Analytics",
showlegend=True,
legend=dict(
orientation="h",
yanchor="top",
y=-0.2,
xanchor="center",
x=0.5
)
)
st.plotly_chart(fig)
st.markdown("### Sentiment Analysis of the Meeting")
fig = go.Figure()
fig.add_trace(go.Scatter(x=list(range(len(smoothed_polarity))), y=smoothed_polarity, mode='lines', name='Sentiment', line=dict(color='blue')))
fig.update_layout(
xaxis=dict(title="Time (in seconds)"),
yaxis=dict(title="Sentiment Score", range=[-1, 1]),
)
st.plotly_chart(fig)