ui/gradio_interface.py

import gradio as gr
from agents.chat import chat_with_gemini
from agents.compare import compare_selected_cards
from data import all_card_names,all_card_lookup
from recommender.recommender import recommend_cards_gradio

# Interface with Tabs
with gr.Blocks() as demo:
    gr.Markdown("# Credit Card Recommender")
    gr.Markdown("Get personalized credit card suggestions based on your lifestyle and eligibility.")

    with gr.Tabs():
        
        with gr.Tab(" Get Recommendations"):
            with gr.Row():
                user_query = gr.Textbox(
                    label="Enter your query",
                    info="E.g., 'Best cards for international travel' or 'I want cashback cards with lounge access'"
                )
                preferences = gr.CheckboxGroup(
                    choices=["Cashback", "Travel", "Fuel", "Airport Lounge access",
                            "Railways", "Dining", "Online Spends", "Grocery"],
                    label="Credit card categories:",
                    info="Select the features or benefits you want from your credit card"
                )

            with gr.Accordion("Eligibility filters menu", open=False):
                with gr.Row():
                    income = gr.Slider(
                        minimum=1, maximum=60, step=1,
                        label="Annual Income (LPA) Minimum requirement is 2.5",
                        info="Helps filter cards based on your income eligibility (in Lakhs Per Annum)"
                    )
                    cibil = gr.Slider(
                        minimum=300, maximum=900, step=10,
                        label="CIBIL Score",
                        info="Most of the cards requires a credit score of 700+"
                    )
                    age = gr.Slider(
                        minimum=18, maximum=75, step=1,
                        label="Age",
                        info="Some cards have minimum and maximum age eligibility"
                    )

                with gr.Row():
                    min_joining_fee = gr.Number(
                        label="Min Joining Fee (₹)", value=0,
                        info="Minimum one-time fee to get the card"
                    )
                    max_joining_fee = gr.Number(
                        label="Max Joining Fee (₹)", value=150000,
                        info="Maximum one-time fee to get the card"
                    )

                with gr.Row():
                    min_annual_fee = gr.Number(
                        label="Min Annual Fee (₹)", value=0,
                        info="Minimum yearly fee to be paid"
                    )
                    max_annual_fee = gr.Number(
                        label="Max Annual Fee (₹)", value=150000,
                        info="Maximum yearly fee to be paid"
                    )

            with gr.Row():
                use_eligibility = gr.Checkbox(
                    label="Apply Eligibility Filter", value=False,
                    info="Enable this to get recommendations of the cards only for which you are eligible for"
                )
            submit_btn = gr.Button("Recommend Cards", variant='primary')

            top_card_html = gr.HTML()
            card_df = gr.Dataframe(headers=["Card Name", "Matched Features", "Description"])
            card_file = gr.File(label="Download Full Recommendations (CSV)")

        with gr.Tab(" Compare Cards"):
            gr.Markdown("### Compare Recommended Cards")
            compare_checkboxes = gr.CheckboxGroup(
                choices=[], label="Select 2 or more cards to compare",
                info="Pick 2+ cards from the recommended list to see a comparison"
            )
            compare_output = gr.HTML(value="<div style='min-height:100px'></div>", visible=True)
            compare_btn = gr.Button("Compare Selected Cards", variant='primary')
            

            gr.Markdown("### Compare Any Cards from Full List")
            full_compare_dropdown = gr.Dropdown(
                choices=all_card_names, multiselect=True, label="Select any 2+ cards",
                info="Manually compare any cards from the full database"
            )
            full_compare_btn = gr.Button("Compare Selected Cards", variant='primary')
            full_compare_output = gr.HTML(value="<div style='min-height:100px'></div>", visible=True)

        with gr.Tab(" Ask Follow-up Questions"):
            gr.Markdown("### Ask any follow-up question ")
            chatbot = gr.Chatbot(type='messages')
            user_query_for_chat = gr.Textbox(
                label="Enter your question",
                info="Ask follow-ups like 'Which card has better travel insurance?' or 'Which card has less annual fee'",
            )
            submit_query_btn = gr.Button("Submit Query", variant='primary')

    card_names_state = gr.State()
    card_lookup_state = gr.State()
    chat_history = gr.State([]) 
    query = gr.State([])

    def wrapped_recommend_cards(user_query, preferences, income, cibil, age, min_joining_fee, max_joining_fee,
                        min_annual_fee, max_annual_fee, use_eligibility):
        top_html, df, file, card_names, card_lookup, direct_query = recommend_cards_gradio(
            user_query, preferences, income, cibil, age, min_joining_fee, max_joining_fee,
            min_annual_fee, max_annual_fee, use_eligibility
        )
        df_label = f"Found {len(card_names)} cards"
        return top_html, gr.update(value=df, label=df_label), file, card_names, card_lookup, gr.update(choices=card_names, value=[]), direct_query

    submit_btn.click(
        fn=wrapped_recommend_cards,
        inputs=[user_query, preferences, income, cibil, age, min_joining_fee, max_joining_fee,
                min_annual_fee, max_annual_fee, use_eligibility],
        outputs=[top_card_html, card_df, card_file, card_names_state, card_lookup_state, compare_checkboxes,query]
    )

    compare_btn.click(
        fn=compare_selected_cards,
        inputs=[compare_checkboxes, card_lookup_state],
        outputs=compare_output,
        show_progress=True
    )
    full_compare_btn.click(
        fn=lambda selected: compare_selected_cards(selected, all_card_lookup),
        inputs=[full_compare_dropdown],
        outputs=full_compare_output
    )

    submit_query_btn.click(
        fn=chat_with_gemini, 
        inputs=[query,user_query_for_chat, chat_history, card_lookup_state],
        outputs=[chatbot, chat_history]
    ).then(
        lambda: gr.update(value=""),
        inputs=[],
        outputs=[user_query_for_chat]
    )
  
    #for submitting using enter button
    user_query_for_chat.submit(
        fn=chat_with_gemini,
        inputs=[query, user_query_for_chat, chat_history, card_lookup_state],
        outputs=[chatbot, chat_history],
        show_progress=True
    ).then(
        lambda: gr.update(value=""),
        inputs=[],
        outputs=[user_query_for_chat]
    )