Uploaded UI Code

app.py

@@ -0,0 +1,526 @@
+import os
+import json
+import re
+import streamlit as st
+import plotly.graph_objects as go
+from google.cloud import storage
+from google.auth import credentials
+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 = credentials.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,
+                #1e3a8a 0%,
+                #2563eb 50%,
+                #1e3a8a 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%; }
+        }
+
+        /* 3D Title */
+        h1 {
+            color: #ffffff;
+            font-size: 3.5rem;
+            font-weight: 900;
+            text-align: center;
+            text-shadow: 
+                2px 2px 4px rgba(0, 0, 0, 0.4),
+                4px 4px 8px rgba(0, 0, 0, 0.3),
+                8px 8px 16px rgba(0, 0, 0, 0.2);
+            margin-bottom: 3rem;
+            letter-spacing: 2px;
+        }
+
+        /* Form Container */
+        .css-1y4p8pa {
+            max-width: 500px;
+            margin: 0 auto;
+            padding: 2.5rem;
+            background: linear-gradient(
+                135deg,
+                rgba(255, 255, 255, 0.1) 0%,
+                rgba(255, 255, 255, 0.2) 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);
+            transform: perspective(1000px) rotateX(2deg);
+        }
+
+        /* Selectbox and Date Input Styling */
+        .stSelectbox label, .stDateInput label {
+            color: white !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: white;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 12px;
+            color: grey;
+            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);
+        }
+
+        /* Button Styling */
+        .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")
+    css = '''
+    <style>
+    [data-testid="stExpander"] div:has(>.streamlit-expanderContent) {
+        max-height: 400px;
+        overflow-y: scroll;
+    }
+
+    [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, #f4f9fb, #dce5f5);
+    }
+
+    .keypoints-box {
+        background: linear-gradient(145deg, #f4f9fb, #dce5f5);
+    }
+
+    .action-items-box {
+        background: linear-gradient(145deg, #f4f9fb, #dce5f5);
+    }
+
+    .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 {
+        background-color: #007bff;
+        color: black;
+        padding: 10px 20px;
+        border-radius: 5px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
+
+    .stFormSubmitButton:hover {
+        background-color: #0056b3;
+    }
+</style>
+
+    '''
+    st.markdown(css, unsafe_allow_html=True)
+    client_name = st.session_state.client_name
+    date = st.session_state.date
+
+    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\n", summary_content, re.DOTALL).group(1).strip()
+    key_points = re.findall(r"- (.*?)\n", re.search(r"\*\*Key Points\*\*\n(.*?)\n\n", summary_content, re.DOTALL).group(1))
+    action_items = re.findall(r"- (.*?)\n", re.search(r"\*\*Action Items\*\*\n(.*)", 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"•&nbsp;{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"•&nbsp;{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 = ""  
+
+
+    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)

requirements.txt

@@ -0,0 +1,6 @@
+Flask
+pydub
+google-cloud-storage
+Flask-Cors
+plotly
+googl-auth