File size: 4,568 Bytes
893c5d9
 
 
 
 
 
 
 
c150a4d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
893c5d9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c150a4d
 
 
 
 
893c5d9
 
 
c150a4d
893c5d9
c150a4d
 
893c5d9
 
 
 
 
 
 
 
 
c150a4d
 
 
 
 
 
 
 
0e3c0ad
c150a4d
 
 
 
 
 
 
 
 
 
 
893c5d9
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
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 and len(question) > 5:
        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()