app.py

from omegaconf import OmegaConf
from query import VectaraQuery
import os
import requests

import streamlit as st
from PIL import Image

def inject_custom_css():
    st.markdown(
        """
        <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        body {
            padding-top: 0px;
        }
        .stApp {
            padding-top: 10px;
        }
        .stButton>button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 24px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }
        .stButton>button:hover {
            background-color: #45a049;
        }
        .stTextInput>div>input {
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-size: 16px;
        }
        .stTextInput>div>input:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }
        .centered {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .sidebar .stImage {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .css-1lcbmhc.e1fqkh3o3 { /* This targets the sidebar */
            background-color: #ffffff !important;
            color: #333 !important;
        }
        .css-1d391kg { /* This targets the sidebar headings */
            color: #333 !important;
        }
        .form-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .form-container .stTextInput {
            flex: 1;
        }
        .form-container .stButton {
            margin-left: 10px;
        }
        </style>
        """,
        unsafe_allow_html=True
    )    

def launch_bot():
    
    if 'cfg' not in st.session_state:
        cfg = OmegaConf.create({
            'customer_id': str(os.environ['VECTARA_CUSTOMER_ID']),
            'corpus_id': str(os.environ['VECTARA_CORPUS_ID']),
            'api_key': str(os.environ['VECTARA_API_KEY']),
            'streaming': False
        })
        st.session_state.cfg = cfg
        st.session_state.vq = VectaraQuery(cfg.api_key, cfg.customer_id, [cfg.corpus_id], 
                                           "vectara-summary-ext-24-05-large")

    cfg = st.session_state.cfg
    vq = st.session_state.vq
    st.set_page_config(page_title="Media Demo", layout="wide")
    inject_custom_css()

    header_image = Image.open('header-image-2.png')
    cropped_image = header_image.crop((0, 0, header_image.width, 200))
    st.image(cropped_image, use_column_width=True)

    # left side content
    with st.sidebar:
        image = Image.open('vectara-logo.png')
        st.markdown("## Welcome to Media Demo\n\n"
                    "This demo uses Vectara to find the movie where a quote is from\n\n"
                    "Covers movies from this [playlist](https://www.youtube.com/playlist?list=PLHPTxTxtC0ibVZrT2_WKWUl2SAxsKuKwx) of free movies")

        st.markdown("---")
        st.markdown(
            "## How this works?\n"
            "This app was built with [Vectara](https://vectara.com).\n"
        )
        st.markdown("---")
        st.image(image, width=250)

    st.markdown("<center> <h3>\"Find that movie\" demo</h3> </center>", unsafe_allow_html=True)

    st.markdown('<div class="form-container">', unsafe_allow_html=True)
    with st.form(key='my_form'):
        question = st.text_input("Enter your movie quote:")
        submit_button = st.form_submit_button(label='Find the Match')
    st.markdown('</div>', unsafe_allow_html=True)

    if submit_button:
        movie_name, match_url, score = vq.submit_query(question)
        if score < 0.7:
            st.write("Sorry, I couldn't find a match for that quote. Please try another one.")
        else:
            video_url, start_time = match_url.split('&t=')
            start_time = start_time[:-1]   # remove the trailing 's'

            col1, col2, col3 = st.columns([1, 2, 1])
            with col2:
                st.write(f"Here's a useful video for you: {movie_name}")
                st.video(video_url, start_time=int(float(start_time)))

if __name__ == "__main__":
    launch_bot()