Update app.py

app.py

@@ -4,36 +4,112 @@ from all_rag_fns import do_rag
 import gradio as gr
 
 
-def gr_ch_if(user_input: str, history):
+def create_video_html(video_info: list) -> str:
+    html = """
+    <style>
+        .video-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+        }
+        .video-item {
+            width: 30%;
+            min-width: 300px;
+            margin-bottom: 20px;
+        }
+        @media (max-width: 1200px) {
+            .video-item {
+                width: 45%;
+            }
+        }
+        @media (max-width: 768px) {
+            .video-item {
+                width: 100%;
+            }
+        }
+    </style>
+    <div class="video-container">
+    """
+
+    for vid_info in video_info:
+        yt_id = vid_info["VideoURL"].split("/")[-1].split("=")[-1]
+        yt_url = f"https://www.youtube.com/embed/{yt_id}"
+        html += f"""
+        <div class="video-item">
+            <h3>{vid_info["Title"]}</h3>
+            <p><em>{vid_info["Speaker"]}</em></p>
+            <p>Year: {vid_info["Year"]}</p>
+            <p>Similarity Score: {100 * vid_info["score"]:.0f}/100</p>
+            <iframe width="100%" height="215" src="{yt_url}" frameborder="0" allowfullscreen></iframe>
+            <details>
+                <summary>Transcript</summary>
+                <p>{vid_info["transcript"]}</p>
+            </details>
+        </div>
+        """
+    html += "</div>"
+    return html
+
+
+def gr_ch_if(user_input: str, model_radio: str):
+    model_name = "gpt-4o-mini" if model_radio == "Cheaper" else "gpt-4o"
     oai_api_key = os.getenv("OPENAI_API_KEY")
-    response, _ = do_rag(
+    response, retrieved_docs = do_rag(
         user_input,
         stream=False,
         n_results=3,
-        model_name="gpt-4o-mini",
         oai_api_key=oai_api_key,
+        model_name=model_name,
     )
-    return response
+    video_html = create_video_html(retrieved_docs)
+
+    return response, video_html
+
 
+# Create Gradio interface with single column layout
+with gr.Blocks() as iface:
+    gr.Markdown("# RAG on R/Gov Talks")
+    gr.Markdown("Use Gradio to Run RAG on the previous R/Gov Talks")
 
-with gr.Blocks() as demo:
-    gr.ChatInterface(
+    with gr.Row():
+        with gr.Column(scale=1):
+            model_radio = gr.Radio(
+                choices=["Cheaper", "More Accurate"],
+                value=0,
+                label="Model",
+                info="Choose the model to use",
+                type="value",
+                interactive=True,
+            )
+
+        with gr.Column(scale=3):
+            query_input = gr.Textbox(label="Enter your question:")
+
+    response_output = gr.Textbox(label="Response", interactive=False)
+    video_output = gr.HTML(label="Relevant Videos")
+
+    query_input.submit(
         fn=gr_ch_if,
-        title="Use Gradio to Run RAG on the previous R/Gov Talks - Chat Interface 1",
+        inputs=[query_input, model_radio],
+        outputs=[response_output, video_output],
     )
 
     # Add the static markdown at the bottom
-    gr.Markdown(
-        """This Gradio app was created for Alan Feder's [talk at the 2024 R/Gov Conference](https://rstats.ai/gov.html). \n\n The Github repository that houses all the code is [here](https://github.com/AlanFeder/rgov-2024) -- feel free to fork it and use it on your own!"""
+    gr.Markdown("""This Gradio app was created for Alan Feder's [talk at the 2024 R/Gov Conference](https://rstats.ai/gov.html). \n\n The Github repository that houses all the code is [here](https://github.com/AlanFeder/rgov-2024) -- feel free to fork it and use it on your own!"""
     )
     gr.Markdown("***")
     gr.Markdown("### Contact me!")
-    gr.Image("https://github.com/AlanFeder/rgov-2024/blob/main/AJF_Headshot.jpg?raw=true", width=40, show_share_button=False, show_fullscreen_button=False, show_download_button=False, show_label=False)
+    gr.Image("https://raw.githubusercontent.com/AlanFeder/rgov-2024/refs/heads/main/AJF_Headshot.jpg", width=60)
     gr.Markdown(
-        """[Email](mailto:[email protected]) | [Website](https://www.alanfeder.com/) | [LinkedIn](https://www.linkedin.com/in/alanfeder/) | [GitHub](https://github.com/AlanFeder)"""
+        """
+        [Email](mailto:[email protected]) | [Website](https://www.alanfeder.com/) | [LinkedIn](https://www.linkedin.com/in/alanfeder/) | [GitHub](https://github.com/AlanFeder)
+        """
     )
 
+
+# Launch the app
 if __name__ == "__main__":
-    demo.launch(
-        favicon_path="https://raw.githubusercontent.com/AlanFeder/rgov-2024/refs/heads/main/favicon_io/favicon.ico",
+    iface.launch(
+        share=True,
+        favicon_path="favicon_io/favicon.ico",
     )