added frontend files

Dockerfile

@@ -2,4 +2,8 @@ FROM python:3.9-slim
 WORKDIR /app
 COPY requirements.txt ./
 RUN pip install --no-cache-dir -r requirements.txt
-RUN echo "Installed required Python packages."
+RUN echo "Installed required Python packages."
+
+COPY frontend/ ./frontend
+EXPOSE 7860
+CMD ["python", "frontend/flask_app.py"]

frontend/app.py

@@ -0,0 +1,170 @@
+import os
+import json
+import requests
+from datetime import datetime
+import streamlit as st
+import pandas as pd
+
+# API configuration
+API_URL = "http://localhost:8000/api"
+
+# Set page config
+st.set_page_config(
+    page_title="BuffaloRAG - UB International Student Assistant",
+    page_icon="🦬",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Styling
+st.markdown("""
+<style>
+    .main {
+        background-color: #f0f2f6;
+    }
+    .sidebar .sidebar-content {
+        background-color: #2d51a3;
+        color: white;
+    }
+    .stButton>button {
+        background-color: #2d51a3;
+        color: white;
+    }
+    .source-card {
+        background-color: white;
+        padding: 10px;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        border-left: 4px solid #2d51a3;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# App title
+st.title("🦬 BuffaloRAG - UB International Student Assistant")
+st.markdown("Ask questions about resources, policies, and procedures for international students at the University at Buffalo.")
+
+# Initialize session state
+if 'messages' not in st.session_state:
+    st.session_state.messages = []
+
+if 'sources' not in st.session_state:
+    st.session_state.sources = []
+
+# Sidebar content
+with st.sidebar:
+    st.image("https://www.buffalo.edu/content/www/brand/identity/university-logo/_jcr_content/bottompar/image.img.1280.high.jpg/1629127701437.jpg", width=200)
+    st.header("Useful Links")
+    
+    # Common categories
+    categories = {
+        "Immigration": [
+            ("I-20 Information", "https://www.buffalo.edu/international-student-services/immigration/maintainingVisaStatus/i-20.html"),
+            ("SEVIS Transfer", "https://www.buffalo.edu/international-student-services/immigration/sevis-transfer.html"),
+            ("Visa Information", "https://www.buffalo.edu/international-student-services/immigration/visa.html")
+        ],
+        "Employment": [
+            ("OPT Information", "https://www.buffalo.edu/international-student-services/immigration/f1-student/employment/opt.html"),
+            ("CPT Information", "https://www.buffalo.edu/international-student-services/immigration/f1-student/employment/cpt.html"),
+            ("On-Campus Employment", "https://www.buffalo.edu/international-student-services/immigration/f1-student/employment/on-campus.html")
+        ],
+        "Student Life": [
+            ("Housing", "https://www.buffalo.edu/campusliving.html"),
+            ("Dining", "https://www.buffalo.edu/campusdining.html"),
+            ("Student Clubs", "https://www.buffalo.edu/studentlife/life-on-campus/clubs.html")
+        ],
+        "Academics": [
+            ("Academic Calendar", "https://registrar.buffalo.edu/calendars/academic/"),
+            ("Course Registration", "https://registrar.buffalo.edu/registration/"),
+            ("Library", "https://library.buffalo.edu/")
+        ]
+    }
+    
+    # Display links by category
+    for category, links in categories.items():
+        st.subheader(category)
+        for name, url in links:
+            st.markdown(f"[{name}]({url})")
+    
+    # Admin section (hidden in collapsed section)
+    with st.expander("Admin Tools"):
+        if st.button("Scrape New Content"):
+            with st.spinner("Starting scraper..."):
+                response = requests.post(f"{API_URL}/scrape", json={
+                    "seed_url": "https://www.buffalo.edu/international-student-services.html",
+                    "max_pages": 100
+                })
+                if response.status_code == 200:
+                    st.success("Scraping started successfully!")
+                else:
+                    st.error(f"Error starting scraper: {response.text}")
+        
+        if st.button("Refresh Index"):
+            with st.spinner("Refreshing index..."):
+                response = requests.post(f"{API_URL}/refresh-index")
+                if response.status_code == 200:
+                    st.success("Index refresh started successfully!")
+                else:
+                    st.error(f"Error refreshing index: {response.text}")
+
+# Main content area - Chat interface
+col1, col2 = st.columns([2, 1])
+
+with col1:
+    # Display chat messages
+    for message in st.session_state.messages:
+        with st.chat_message(message["role"]):
+            st.markdown(message["content"])
+    
+    # Input box for new questions
+    if prompt := st.chat_input("Ask a question about UB international student services..."):
+        # Add user message to chat history
+        st.session_state.messages.append({"role": "user", "content": prompt})
+        
+        # Display user message
+        with st.chat_message("user"):
+            st.markdown(prompt)
+        
+        # Call API to get response
+        with st.spinner("Thinking..."):
+            try:
+                response = requests.post(f"{API_URL}/ask", json={"query": prompt})
+                
+                if response.status_code == 200:
+                    result = response.json()
+                    answer = result["response"]
+                    sources = result["sources"]
+                    
+                    # Store sources in session state
+                    st.session_state.sources = sources
+                    
+                    # Add assistant message to chat history
+                    st.session_state.messages.append({"role": "assistant", "content": answer})
+                    
+                    # Display assistant message
+                    with st.chat_message("assistant"):
+                        st.markdown(answer)
+                else:
+                    st.error(f"Error: {response.text}")
+            except Exception as e:
+                st.error(f"Error: {str(e)}")
+
+with col2:
+    # Display sources for the latest response
+    st.subheader("Sources")
+    
+    if st.session_state.sources:
+        for i, source in enumerate(st.session_state.sources):
+            st.markdown(f"""
+            <div class="source-card">
+                <h4>{source['title']}</h4>
+                <p><a href="{source['url']}" target="_blank">View source</a></p>
+                <small>Relevance: {source['score']:.2f}</small>
+            </div>
+            """, unsafe_allow_html=True)
+    else:
+        st.info("Ask a question to see relevant sources.")
+
+# Footer
+st.markdown("---")
+st.markdown("Built with BuffaloRAG - AI Assistant for International Students at UB") 

frontend/flask_app.py

@@ -0,0 +1,38 @@
+from flask import Flask, render_template, request, jsonify
+import requests
+import os
+import json
+from datetime import datetime
+
+app = Flask(__name__)
+
+# API configuration
+API_URL = "http://localhost:8000/api"
+
+@app.route('/')
+def index():
+    """Render the main page."""
+    return render_template('index.html')
+
+@app.route('/api/ask', methods=['POST'])
+def ask():
+    """Proxy API call to the FastAPI backend."""
+    data = request.json
+    response = requests.post(f"{API_URL}/ask", json=data)
+    return jsonify(response.json())
+
+@app.route('/api/scrape', methods=['POST'])
+def scrape():
+    """Proxy API call to trigger web scraping."""
+    data = request.json
+    response = requests.post(f"{API_URL}/scrape", json=data)
+    return jsonify(response.json())
+
+@app.route('/api/refresh-index', methods=['POST'])
+def refresh_index():
+    """Proxy API call to refresh the vector index."""
+    response = requests.post(f"{API_URL}/refresh-index")
+    return jsonify(response.json())
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000) 

frontend/static/css/styles.css

@@ -0,0 +1,393 @@
+
+    /* Variables */
+    :root {
+        --primary-color: #005bbb;
+        --primary-dark: #004798;
+        --secondary-color: #e87722;
+        --background-color: #f5f7fa;
+        --sidebar-color: #f0f5ff;
+        --right-panel-color: #f8fafd;
+        --border-color: #e1e5eb;
+        --text-color: #333333;
+        --text-secondary: #666666;
+        --card-color: #ffffff;
+        --hover-color: #f8f9fa;
+        --disabled-color: #cccccc;
+    }
+
+    /* Global Styles */
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        font-family: 'Inter', sans-serif;
+        background-color: var(--background-color);
+        color: var(--text-color);
+        line-height: 1.5;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: 600;
+    }
+
+    /* App Container */
+    .app-container {
+        display: grid;
+        grid-template-columns: 280px 1fr 300px;
+        height: 100vh;
+        overflow: hidden;
+    }
+
+    /* Sidebar */
+    .sidebar {
+        background-color: var(--sidebar-color);
+        padding: 1.5rem;
+        overflow-y: auto;
+        border-right: 1px solid var(--border-color);
+    }
+
+    .logo {
+        display: flex;
+        align-items: center;
+        margin-bottom: 2rem;
+    }
+
+    .logo img {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+    }
+
+    .logo h1 {
+        font-size: 1.2rem;
+        color: var(--primary-color);
+        margin: 0;
+    }
+
+    .search-box {
+        display: flex;
+        margin-bottom: 1.5rem;
+    }
+
+    .search-box input {
+        flex: 1;
+        padding: 0.75rem;
+        border: 1px solid var(--border-color);
+        border-radius: 8px 0 0 8px;
+        font-size: 0.9rem;
+        outline: none;
+    }
+
+    .search-box input:focus {
+        border-color: var(--primary-color);
+    }
+
+    .search-box button {
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: 0 8px 8px 0;
+        padding: 0 1rem;
+        cursor: pointer;
+    }
+
+    .search-box button:hover {
+        background-color: var(--primary-dark);
+    }
+
+    .category {
+        margin-bottom: 1.5rem;
+    }
+
+    .category h3 {
+        background-color: var(--primary-color);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: 6px;
+        font-size: 1rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .link-card {
+        display: block;
+        padding: 0.75rem;
+        background-color: white;
+        border-left: 3px solid var(--secondary-color);
+        border-radius: 4px;
+        margin-bottom: 0.5rem;
+        text-decoration: none;
+        color: var(--text-color);
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .link-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        background-color: var(--hover-color);
+    }
+
+    .link-card h4 {
+        font-size: 0.9rem;
+        margin: 0 0 0.25rem 0;
+        color: var(--primary-color);
+    }
+
+    .link-card p {
+        font-size: 0.8rem;
+        margin: 0;
+        color: var(--text-secondary);
+    }
+
+    /* Main Content */
+    .main-content {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+
+    header {
+        padding: 1rem 1.5rem;
+        background-color: white;
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    header h1 {
+        font-size: 1.25rem;
+        display: flex;
+        align-items: center;
+    }
+
+    header h1 i {
+        margin-right: 0.5rem;
+        color: var(--primary-color);
+    }
+
+    .chat-container {
+        flex: 1;
+        padding: 1.5rem;
+        overflow-y: auto;
+        scroll-behavior: smooth;
+    }
+
+    .empty-chat {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 2rem;
+        text-align: center;
+    }
+
+    .empty-chat h2 {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+        color: var(--primary-color);
+    }
+
+    .empty-chat p {
+        color: var(--text-secondary);
+        margin-bottom: 2rem;
+        max-width: 500px;
+    }
+
+    .quick-questions {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.5rem;
+    }
+
+    .quick-question {
+        background-color: rgba(232, 119, 34, 0.1);
+        color: var(--secondary-color);
+        border: 1px solid rgba(232, 119, 34, 0.3);
+        border-radius: 8px;
+        padding: 0.5rem 1rem;
+        font-size: 0.85rem;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .quick-question:hover {
+        background-color: rgba(232, 119, 34, 0.2);
+    }
+
+    .messages {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .message {
+        margin-bottom: 1rem;
+        max-width: 85%;
+        animation: fadeIn 0.3s ease-in-out;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+    .message.user {
+        margin-left: auto;
+    }
+
+    .message.assistant {
+        margin-right: auto;
+    }
+
+    .bubble {
+        padding: 1rem;
+        border-radius: 1.2rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    }
+
+    .message.user .bubble {
+        background-color: var(--primary-color);
+        color: white;
+        border-bottom-right-radius: 0.25rem;
+    }
+
+    .message.assistant .bubble {
+        background-color: white;
+        border: 1px solid var(--border-color);
+        border-bottom-left-radius: 0.25rem;
+    }
+
+    .meta {
+        font-size: 0.75rem;
+        margin-top: 0.25rem;
+        color: var(--text-secondary);
+    }
+
+    .message.user .meta {
+        text-align: right;
+    }
+
+    .message.assistant .meta {
+        text-align: left;
+    }
+
+    .input-container {
+        border-top: 1px solid var(--border-color);
+        padding: 1rem 1.5rem;
+        background-color: white;
+    }
+
+    .message-input {
+        display: flex;
+        background-color: white;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid var(--border-color);
+    }
+
+    .message-input input {
+        flex: 1;
+        padding: 1rem;
+        border: none;
+        outline: none;
+        font-size: 0.95rem;
+    }
+
+    .message-input button {
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        padding: 0 1.25rem;
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+
+    .message-input button:hover {
+        background-color: var(--primary-dark);
+    }
+
+    .message-input button:disabled {
+        background-color: var(--disabled-color);
+        cursor: not-allowed;
+    }
+
+    /* Right Panel */
+    .right-panel {
+        background-color: var(--right-panel-color);
+        padding: 1.5rem;
+        overflow-y: auto;
+        border-left: 1px solid var(--border-color);
+    }
+
+    .right-panel h3 {
+        margin-bottom: 1rem;
+        font-size: 1.1rem;
+    }
+
+    .source-card {
+        background-color: white;
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    }
+
+    .source-card h4 {
+        font-size: 0.95rem;
+        margin: 0 0 0.5rem 0;
+        color: var(--primary-color);
+    }
+
+    .source-card .link {
+        display: flex;
+        align-items: center;
+        font-size: 0.8rem;
+        color: var(--secondary-color);
+        text-decoration: none;
+        margin-bottom: 0.25rem;
+    }
+
+    .source-card .link i {
+        margin-left: 0.25rem;
+    }
+
+    .source-card .score {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .admin-tools {
+        margin-top: 2rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--border-color);
+    }
+
+    .admin-btn {
+        display: block;
+        width: 100%;
+        padding: 0.75rem;
+        margin-bottom: 0.75rem;
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+
+    .admin-btn:hover {
+        background-color: var(--primary-dark);
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+        .app-container {
+            grid-template-columns: 0px 1fr 0px;
+        }
+        
+        .sidebar, .right-panel {
+            display: none;
+        }
+    }
+    

frontend/static/js/app.js

@@ -0,0 +1,254 @@
+
+    // DOM Elements
+    const messagesContainer = document.getElementById('messages');
+    const messageInput = document.getElementById('message-input');
+    const sendButton = document.getElementById('send-button');
+    const emptyChat = document.getElementById('empty-chat');
+    const chatContainer = document.getElementById('chat-container');
+    const sourcesContainer = document.getElementById('sources-container');
+    const noSources = document.getElementById('no-sources');
+    const scrapeBtn = document.getElementById('scrape-btn');
+    const refreshBtn = document.getElementById('refresh-btn');
+
+    // State
+    let messages = [];
+    let sources = [];
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+        // Enable/disable send button based on input
+        messageInput.addEventListener('input', () => {
+            sendButton.disabled = !messageInput.value.trim();
+        });
+        
+        // Send message on button click
+        sendButton.addEventListener('click', sendMessage);
+        
+        // Send message on Enter key
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        
+        // Admin buttons
+        scrapeBtn.addEventListener('click', triggerScrape);
+        refreshBtn.addEventListener('click', triggerRefreshIndex);
+    });
+
+    // Format date
+    function formatDate() {
+        return new Date().toLocaleString();
+    }
+
+    // Create message element
+    function createMessageElement(message) {
+        const messageEl = document.createElement('div');
+        messageEl.className = `message ${message.role}`;
+        
+        const bubble = document.createElement('div');
+        bubble.className = 'bubble';
+        bubble.textContent = message.content;
+        
+        const meta = document.createElement('div');
+        meta.className = 'meta';
+        meta.textContent = formatDate();
+        
+        messageEl.appendChild(bubble);
+        messageEl.appendChild(meta);
+        
+        return messageEl;
+    }
+
+    // Update sources panel
+    function updateSources(sources) {
+        sourcesContainer.innerHTML = '';
+        
+        if (sources.length === 0) {
+            sourcesContainer.appendChild(noSources);
+            return;
+        }
+        
+        sources.forEach(source => {
+            const card = document.createElement('div');
+            card.className = 'source-card';
+            
+            const title = document.createElement('h4');
+            title.textContent = source.title;
+            
+            const link = document.createElement('a');
+            link.className = 'link';
+            link.href = source.url;
+            link.target = '_blank';
+            link.innerHTML = `View source <i class="fas fa-external-link-alt"></i>`;
+            
+            const score = document.createElement('div');
+            score.className = 'score';
+            score.textContent = `Relevance: ${source.score.toFixed(2)}`;
+            
+            card.appendChild(title);
+            card.appendChild(link);
+            card.appendChild(score);
+            
+            sourcesContainer.appendChild(card);
+        });
+    }
+
+    // Send message
+    async function sendMessage() {
+        const content = messageInput.value.trim();
+        if (!content) return;
+        
+        // Hide empty chat if visible
+        if (emptyChat.style.display !== 'none') {
+            emptyChat.style.display = 'none';
+        }
+        
+        // Add user message
+        const userMessage = { role: 'user', content };
+        messages.push(userMessage);
+        messagesContainer.appendChild(createMessageElement(userMessage));
+        
+        // Clear input
+        messageInput.value = '';
+        sendButton.disabled = true;
+        
+        // Show thinking message
+        const thinkingEl = document.createElement('div');
+        thinkingEl.className = 'message assistant';
+        
+        const thinkingBubble = document.createElement('div');
+        thinkingBubble.className = 'bubble';
+        thinkingBubble.textContent = 'Thinking...';
+        
+        thinkingEl.appendChild(thinkingBubble);
+        messagesContainer.appendChild(thinkingEl);
+        
+        // Scroll to bottom
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+        
+        try {
+            // Call API
+            const response = await fetch('/api/ask', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    query: content,
+                    k: 5
+                }),
+            });
+            
+            if (!response.ok) {
+                throw new Error('API request failed');
+            }
+            
+            const data = await response.json();
+            
+            // Remove thinking message
+            messagesContainer.removeChild(thinkingEl);
+            
+            // Add assistant message
+            const assistantMessage = { role: 'assistant', content: data.response };
+            messages.push(assistantMessage);
+            messagesContainer.appendChild(createMessageElement(assistantMessage));
+            
+            // Update sources
+            sources = data.sources;
+            updateSources(sources);
+            
+            // Scroll to bottom
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            
+        } catch (error) {
+            console.error('Error:', error);
+            
+            // Remove thinking message
+            messagesContainer.removeChild(thinkingEl);
+            
+            // Add error message
+            const errorMessage = { 
+                role: 'assistant', 
+                content: "I'm sorry, I encountered an error. Please try again later or contact UB International Student Services directly."
+            };
+            messages.push(errorMessage);
+            messagesContainer.appendChild(createMessageElement(errorMessage));
+            
+            // Scroll to bottom
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    }
+
+    // Quick questions
+    async function askQuickQuestion(question) {
+        // Set the question in the input field
+        messageInput.value = question;
+        
+        // Send the message
+        await sendMessage();
+    }
+
+    // Admin functions
+    async function triggerScrape() {
+        scrapeBtn.disabled = true;
+        scrapeBtn.textContent = 'Scraping...';
+        
+        try {
+            const response = await fetch('/api/scrape', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    seed_url: 'https://www.buffalo.edu/international-student-services.html',
+                    max_pages: 100
+                }),
+            });
+            
+            if (!response.ok) {
+                throw new Error('API request failed');
+            }
+            
+            const data = await response.json();
+            alert(`${data.message}`);
+            
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Error starting scraper. Please check console for details.');
+            
+        } finally {
+            scrapeBtn.disabled = false;
+            scrapeBtn.textContent = 'Scrape New Content';
+        }
+    }
+
+    async function triggerRefreshIndex() {
+        refreshBtn.disabled = true;
+        refreshBtn.textContent = 'Refreshing...';
+        
+        try {
+            const response = await fetch('/api/refresh-index', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            
+            if (!response.ok) {
+                throw new Error('API request failed');
+            }
+            
+            const data = await response.json();
+            alert(`${data.message}`);
+            
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Error refreshing index. Please check console for details.');
+            
+        } finally {
+            refreshBtn.disabled = false;
+            refreshBtn.textContent = 'Refresh Index';
+        }
+    }
+    

frontend/templates/index.html

@@ -0,0 +1,150 @@
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>BuffaloRAG - UB International Student Assistant</title>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    </head>
+    <body>
+        <div class="app-container">
+            <!-- Left Sidebar -->
+            <div class="sidebar">
+                <div class="logo">
+                    <img src="{{ url_for('static', filename='img/ub-logo.png') }}" alt="UB Logo">
+                    <h1>BuffaloRAG</h1>
+                </div>
+                
+                <div class="search-box">
+                    <input type="text" id="resource-search" placeholder="Search resources...">
+                    <button id="search-btn"><i class="fas fa-search"></i></button>
+                </div>
+                
+                <!-- Categories -->
+                <div class="categories">
+                    <div class="category">
+                        <h3>Immigration</h3>
+                        <div class="links">
+                            <a href="https://www.buffalo.edu/international-student-services/immigration/visa.html" target="_blank" class="link-card">
+                                <h4>Visa Requirements</h4>
+                                <p>Information about F-1 and J-1 visas</p>
+                            </a>
+                            <a href="https://www.buffalo.edu/international-student-services/immigration/maintainingVisaStatus/i-20.html" target="_blank" class="link-card">
+                                <h4>I-20 Documents</h4>
+                                <p>Understanding your I-20 form</p>
+                            </a>
+                            <a href="https://www.buffalo.edu/international-student-services/immigration/sevis-transfer.html" target="_blank" class="link-card">
+                                <h4>SEVIS Transfers</h4>
+                                <p>Transferring your SEVIS record</p>
+                            </a>
+                        </div>
+                    </div>
+                    
+                    <div class="category">
+                        <h3>Employment</h3>
+                        <div class="links">
+                            <a href="https://www.buffalo.edu/international-student-services/immigration/f1-student/employment/opt.html" target="_blank" class="link-card">
+                                <h4>OPT Guidelines</h4>
+                                <p>Optional Practical Training information</p>
+                            </a>
+                            <a href="https://www.buffalo.edu/international-student-services/immigration/f1-student/employment/cpt.html" target="_blank" class="link-card">
+                                <h4>CPT Information</h4>
+                                <p>Curricular Practical Training details</p>
+                            </a>
+                            <a href="https://www.buffalo.edu/international-student-services/immigration/f1-student/employment/on-campus.html" target="_blank" class="link-card">
+                                <h4>On-Campus Jobs</h4>
+                                <p>Working on UB campus</p>
+                            </a>
+                        </div>
+                    </div>
+                    
+                    <div class="category">
+                        <h3>Student Life</h3>
+                        <div class="links">
+                            <a href="https://www.buffalo.edu/campusliving.html" target="_blank" class="link-card">
+                                <h4>Housing Options</h4>
+                                <p>On and off-campus housing</p>
+                            </a>
+                            <a href="https://www.buffalo.edu/international-student-services/life-in-buffalo/health-insurance.html" target="_blank" class="link-card">
+                                <h4>Health Insurance</h4>
+                                <p>Insurance requirements and options</p>
+                            </a>
+                            <a href="https://www.buffalo.edu/studentlife.html" target="_blank" class="link-card">
+                                <h4>Student Services</h4>
+                                <p>Campus resources and services</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Main Content -->
+            <div class="main-content">
+                <header>
+                    <h1><i class="fas fa-university"></i> BuffaloRAG - UB International Student Assistant</h1>
+                </header>
+                
+                <div class="chat-container" id="chat-container">
+                    <div class="empty-chat" id="empty-chat">
+                        <h2>Welcome to BuffaloRAG</h2>
+                        <p>
+                            I'm here to help answer your questions about resources, policies, and procedures 
+                            for international students at the University at Buffalo.
+                        </p>
+                        <div class="quick-questions">
+                            <button class="quick-question" onclick="askQuickQuestion('How do I apply for OPT?')">How do I apply for OPT?</button>
+                            <button class="quick-question" onclick="askQuickQuestion('What documents do I need for my I-20?')">What documents do I need for my I-20?</button>
+                            <button class="quick-question" onclick="askQuickQuestion('What are the working hour limits for international students?')">What are the working hour limits for international students?</button>
+                            <button class="quick-question" onclick="askQuickQuestion('How can I extend my student visa?')">How can I extend my student visa?</button>
+                            <button class="quick-question" onclick="askQuickQuestion('Where can I find housing as an international student?')">Where can I find housing as an international student?</button>
+                            <button class="quick-question" onclick="askQuickQuestion('What health insurance options are available?')">What health insurance options are available?</button>
+                        </div>
+                    </div>
+                    
+                    <div class="messages" id="messages"></div>
+                </div>
+                
+                <div class="input-container">
+                    <div class="message-input">
+                        <input type="text" id="message-input" placeholder="Ask a question...">
+                        <button id="send-button" disabled><i class="fas fa-paper-plane"></i></button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Right Panel -->
+            <div class="right-panel">
+                <h3>Sources & References</h3>
+                <div id="sources-container">
+                    <p id="no-sources">Ask a question to see relevant sources.</p>
+                </div>
+                
+                <h3>Important Resources</h3>
+                <div class="source-card">
+                    <h4>UB International Student Services</h4>
+                    <a class="link" href="https://www.buffalo.edu/international-student-services.html" target="_blank">
+                        Visit website <i class="fas fa-external-link-alt"></i>
+                    </a>
+                </div>
+                <div class="source-card">
+                    <h4>Immigration Forms & Documents</h4>
+                    <a class="link" href="https://www.buffalo.edu/international-student-services/immigration/forms.html" target="_blank">
+                        View forms <i class="fas fa-external-link-alt"></i>
+                    </a>
+                </div>
+                
+                <div class="admin-tools">
+                    <h3>Admin Tools</h3>
+                    <button id="scrape-btn" class="admin-btn">Scrape New Content</button>
+                    <button id="refresh-btn" class="admin-btn">Refresh Index</button>
+                </div>
+            </div>
+        </div>
+        
+        <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+        <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+    </body>
+    </html>
+    

requirements.txt

@@ -1,4 +1,9 @@
 torch
 transformers
 sentence-transformers
-faiss-cpu
+faiss-cpu
+
+flask
+fastapi
+requests
+json