Initial Gradio app deployment

app.py

@@ -0,0 +1,568 @@
+# -*- coding: utf-8 -*-
+"""Cute EMI Calculator (Gradio)
+
+Automatically generated by Colab.
+
+Original file is located at
+    https://colab.research.google.com/drive/1KqksMVkMVBWDpSyVGdvuakXi4C8b4fB-
+"""
+
+import gradio as gr
+import pandas as pd
+import matplotlib.pyplot as plt
+import io
+import base64
+
+# Define a dictionary of common currencies and their symbols
+currency_symbols = {
+    "United States Dollar ($)": "$",
+    "Euro (€)": "€",
+    "British Pound (£)": "£",
+    "Japanese Yen (¥)": "¥",
+    "Indian Rupee (₹)": "₹",
+    "Canadian Dollar (C$)": "C$",
+    "Australian Dollar (A$)": "A$",
+    "Swiss Franc (CHF)": "CHF",
+    "Chinese Yuan (¥)": "¥", # Note: Yuan uses same symbol as Yen
+    "Singapore Dollar (S$)": "S$",
+    "Hong Kong Dollar (HK$)": "HK$",
+    "New Zealand Dollar (NZ$)": "NZ$",
+    "South Korean Won (₩)": "₩",
+    "Swedish Krona (kr)": "kr",
+    "Norwegian Krone (kr)": "kr",
+    "Danish Krone (kr)": "kr",
+    "Mexican Peso (Mex$)": "Mex$",
+    "Brazilian Real (R$)": "R$",
+    "Russian Ruble (₽)": "₽",
+    "South African Rand (R)": "R",
+    "United Arab Emirates Dirham (د.إ)": "د.إ",
+    "Saudi Riyal (﷼)": "﷼",
+    "Turkish Lira (₺)": "₺",
+    "Argentine Peso ($)": "$", # Note: Some pesos use $
+    "Egyptian Pound (E£)": "E£",
+    "Philippine Peso (₱)": "₱",
+    "Thai Baht (฿)": "฿",
+    "Malaysian Ringgit (RM)": "RM",
+    "Indonesian Rupiah (Rp)": "Rp",
+    "Vietnamese Dong (₫)": "₫",
+    "Pakistani Rupee (₨)": "₨",
+    "Bangladeshi Taka (৳)": "৳",
+    "Sri Lankan Rupee (Rs)": "Rs",
+    "Nigerian Naira (₦)": "₦",
+    "Kenyan Shilling (KSh)": "KSh",
+    "Ghanaian Cedi (₵)": "₵",
+    "Chilean Peso (CLP$)": "CLP$",
+    "Colombian Peso (COL$)": "COL$",
+    "Peruvian Sol (S/.)": "S/.",
+    "Czech Koruna (Kč)": "Kč",
+    "Polish Złoty (zł)": "zł",
+    "Hungarian Forint (Ft)": "Ft",
+    "Romanian Leu (lei)": "lei",
+}
+
+# --- IMPORTANT: Placeholder for real-time exchange rates ---
+# In a real application, you would fetch these from a reliable API.
+# These are sample rates relative to USD as the base currency.
+# 1 USD = X of the listed currency.
+exchange_rates = {
+    "United States Dollar ($)": 1.0,
+    "Euro (€)": 0.85,
+    "British Pound (£)": 0.73,
+    "Japanese Yen (¥)": 144.51,
+    "Indian Rupee (₹)": 85.50,
+    "Canadian Dollar (C$)": 1.36,
+    "Australian Dollar (A$)": 1.53,
+    "Swiss Franc (CHF)": 0.79,
+    "Chinese Yuan (¥)": 7.17,
+    "Singapore Dollar (S$)": 1.27,
+    "Hong Kong Dollar (HK$)": 7.85,
+    "New Zealand Dollar (NZ$)": 1.65,
+    "South Korean Won (₩)": 1362.33,
+    "Swedish Krona (kr)": 9.56,
+    "Norwegian Krone (kr)": 10.09,
+    "Danish Krone (kr)": 6.33,
+    "Mexican Peso (Mex$)": 18.63,
+    "Brazilian Real (R$)": 5.42,
+    "Russian Ruble (₽)": 78.61,
+    "South African Rand (R)": 17.61,
+    "United Arab Emirates Dirham (د.إ)": 3.67,
+    "Saudi Riyal (﷼)": 3.75,
+    "Turkish Lira (₺)": 39.87,
+    "Argentine Peso ($)": 900.00,
+    "Egyptian Pound (E£)": 49.26,
+    "Philippine Peso (₱)": 56.51,
+    "Thai Baht (฿)": 32.39,
+    "Malaysian Ringgit (RM)": 4.22,
+    "Indonesian Rupiah (Rp)": 16129.03,
+    "Vietnamese Dong (₫)": 26180.00,
+    "Pakistani Rupee (₨)": 283.78,
+    "Bangladeshi Taka (৳)": 121.95,
+    "Sri Lankan Rupee (Rs)": 299.94,
+    "Nigerian Naira (₦)": 1529.68,
+    "Kenyan Shilling (KSh)": 129.15,
+    "Ghanaian Cedi (₵)": 10.35,
+    "Chilean Peso (CLP$)": 929.99,
+    "Colombian Peso (COL$)": 4100.00,
+    "Peruvian Sol (S/.)": 3.54,
+    "Czech Koruna (Kč)": 20.92,
+    "Polish Złoty (zł)": 3.60,
+    "Hungarian Forint (Ft)": 338.90,
+    "Romanian Leu (lei)": 4.29,
+}
+
+BASE_CURRENCY = "United States Dollar ($)"
+
+def convert_currency(amount, from_currency_display, to_currency_display):
+    """
+    Converts an amount from one currency to another using predefined exchange rates.
+    """
+    if from_currency_display == to_currency_display:
+        return amount
+
+    from_rate = exchange_rates.get(from_currency_display)
+    to_rate = exchange_rates.get(to_currency_display)
+
+    if from_rate is None or to_rate is None:
+        raise ValueError(f"Exchange rate not found for {from_currency_display} or {to_currency_display}")
+
+    amount_in_base = amount / from_rate
+    converted_amount = amount_in_base * to_rate
+    return converted_amount
+
+def calculate_emi(principal, annual_interest_rate, tenure_years, input_currency_display, output_currency_display):
+    if principal <= 0 or annual_interest_rate < 0 or tenure_years <= 0:
+        # Return gr.update(visible=False) for all outputs in case of an error
+        return (
+            gr.update(value="Please enter valid positive numbers! 😅", visible=True),
+            gr.update(value="", visible=False),
+            gr.update(value="", visible=False),
+            gr.update(value=pd.DataFrame(), visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(visible=False), # Explanation separator
+            gr.update(visible=False), # Explanation accordion
+            gr.update(visible=False) # Footer markdown
+        )
+
+    monthly_interest_rate = annual_interest_rate / (12 * 100)
+    tenure_months = tenure_years * 12
+
+    if monthly_interest_rate == 0:
+        emi = principal / tenure_months
+    else:
+        emi = principal * monthly_interest_rate * ((1 + monthly_interest_rate) ** tenure_months) / \
+              (((1 + monthly_interest_rate) ** tenure_months) - 1)
+
+    total_payment = emi * tenure_months
+    total_interest = total_payment - principal
+
+    # Convert currency
+    try:
+        emi_converted = convert_currency(emi, input_currency_display, output_currency_display)
+        total_payable_converted = convert_currency(total_payment, input_currency_display, output_currency_display)
+        total_interest_converted = convert_currency(total_interest, input_currency_display, output_currency_display)
+    except ValueError as e:
+        return (
+            gr.update(value=f"Currency conversion error: {e}", visible=True),
+            gr.update(value="", visible=False),
+            gr.update(value="", visible=False),
+            gr.update(value=pd.DataFrame(), visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(visible=False), # Explanation separator
+            gr.update(visible=False), # Explanation accordion
+            gr.update(visible=False) # Footer markdown
+        )
+
+    output_symbol = currency_symbols.get(output_currency_display, "$")
+
+    # --- Generate Amortization Table ---
+    balance = principal
+    schedule = []
+    for month in range(1, tenure_months + 1):
+        interest_payment = balance * monthly_interest_rate
+        principal_payment = emi - interest_payment
+        ending_balance = balance - principal_payment
+
+        # Convert each amount
+        bal = convert_currency(balance, input_currency_display, output_currency_display)
+        prin = convert_currency(principal_payment, input_currency_display, output_currency_display)
+        intr = convert_currency(interest_payment, input_currency_display, output_currency_display)
+        end_bal = convert_currency(ending_balance, input_currency_display, output_currency_display)
+
+        schedule.append([
+            month,
+            f"{output_symbol} {bal:,.2f}",
+            f"{output_symbol} {emi_converted:,.2f}",
+            f"{output_symbol} {prin:,.2f}",
+            f"{output_symbol} {intr:,.2f}",
+            f"{output_symbol} {end_bal:,.2f}"
+        ])
+        balance = ending_balance
+
+    df = pd.DataFrame(schedule, columns=[
+        "Month", "Beginning Balance", "EMI", "Principal Paid", "Interest Paid", "Outstanding Balance"
+    ])
+
+    # --- Plot Chart ---
+    chart_df = pd.DataFrame({
+        "Month": range(1, tenure_months + 1),
+        "Principal": [float(r[3].replace(output_symbol, "").replace(",", "").strip()) for r in schedule],
+        "Interest": [float(r[4].replace(output_symbol, "").replace(",", "").strip()) for r in schedule],
+    })
+    chart_df["EMI"] = emi_converted
+
+    fig, ax = plt.subplots(figsize=(10, 4))
+    ax.plot(chart_df["Month"], chart_df["Principal"], label="Principal Paid", color="#6a5acd")
+    ax.plot(chart_df["Month"], chart_df["Interest"], label="Interest Paid", color="#db7093")
+    ax.plot(chart_df["Month"], chart_df["EMI"], label="Monthly EMI", color="orange", linestyle='--')
+
+    ax.set_xlabel("Month")
+    ax.set_ylabel(f"Amount ({output_symbol})")
+    ax.set_title("EMI Breakdown Over Time")
+    ax.legend()
+    plt.tight_layout()
+
+    # Return gr.update for each output to control visibility
+    return (
+        gr.update(value=f"💖 Your Monthly EMI: {output_symbol} {emi_converted:,.2f}", visible=True),
+        gr.update(value=f"💰 Total Interest Payable: {output_symbol} {total_interest_converted:,.2f}", visible=True),
+        gr.update(value=f"✨ Total Amount Payable: {output_symbol} {total_payable_converted:,.2f}", visible=True),
+        gr.update(value=df, visible=True),
+        gr.update(value=fig, visible=True),
+        gr.update(visible=True), # Explanation separator
+        gr.update(visible=True), # Explanation accordion
+        gr.update(visible=True) # Footer markdown
+    )
+
+
+# --- NEW: Function to provide explanations ---
+def explain_calculation(choice):
+    """
+    Returns a markdown-formatted explanation based on the user's choice.
+    """
+    explanations = {
+        "How is the Monthly EMI calculated?": """
+        ### Monthly EMI (Equated Monthly Installment)
+        The EMI is the fixed amount you pay each month. It's calculated using this formula:
+        `EMI = P * r * (1+r)^n / ((1+r)^n - 1)`
+        Where:
+        - **P** is the Principal Loan Amount.
+        - **r** is the monthly interest rate (your annual rate divided by 12 and then by 100).
+        - **n** is the loan tenure in months (your term in years multiplied by 12).
+        """,
+        "How is the Total Interest calculated?": """
+        ### Total Interest Payable
+        This is the total cost of borrowing the money. It's the difference between the total amount you pay back and the original loan amount.
+        `Total Interest = (EMI * n) - P`
+        Where:
+        - **EMI** is the monthly payment we calculated.
+        - **n** is the loan tenure in months.
+        - **P** is the original Principal Loan Amount.
+        """,
+        "How does currency conversion work?": """
+        ### Currency Conversion
+        The calculation is first performed in your **Input Currency**. Then, the final results (EMI, Total Interest, and Total Payable) are converted to your chosen **Output Currency**.
+        1.  **Convert to Base Currency (USD):** We take the calculated amount in the input currency and convert it to our base currency (US Dollars) using our stored exchange rates.
+        `Amount in USD = Amount in Input Currency / Rate of Input Currency`
+        2.  **Convert to Output Currency:** We then take the USD amount and convert it to your desired output currency.
+        `Final Amount = Amount in USD * Rate of Output Currency`
+        **Note:** The exchange rates used here are static placeholders from July 5, 2025, and are not real-time.
+        """
+    }
+    return explanations.get(choice, "Please select a question to see the explanation! 😊")
+
+
+# Custom CSS remains the same
+custom_css = """
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&family=Special+Elite&display=swap');
+
+/* Define Lavender/Lilac Color Palette */
+:root {
+    --lavender-light: #E6E6FA; /* Very light lavender for background */
+    --lilac-medium: #C8A2C8; /* A nice medium lilac for accents */
+    --lavender-dark: #9370DB; /* Darker lavender for highlights/buttons */
+    --text-color-dark: #4B0082; /* Indigo for darker text */
+    --text-color-light: #8A2BE2; /* Blue violet for lighter text */
+    --button-hover-color: #AF8EE2; /* Lighter purple for button hover */
+    --border-color: #DDA0DD; /* Plum for borders */
+    --header-bg: #D8BFD8; /* Thistle for header background */
+    --header-border: #BA55D3; /* MediumOrchid for header border */
+}
+
+/* Apply Emily's Candy to headings */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Special Elite', cursive !important;
+    color: var(--text-color-dark) !important; /* Apply dark text color to headings */
+}
+
+/* Apply Special Elite to the rest of the text */
+body, p, div, span, label, input, textarea, select, button {
+    font-family: 'Special Elite', cursive !important;
+    color: var(--text-color-dark) !important; /* Apply dark text color to general text */
+}
+
+/* Overall container background and borders */
+.gradio-container {
+    background-color: var(--lavender-light) !important; /* Light lavender background */
+    border: 2px solid var(--border-color) !important;
+    border-radius: 15px !important;
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Input fields (sliders, dropdowns, text) */
+.gradio-input {
+    background-color: white !important;
+    border: 1px solid var(--lilac-medium) !important;
+    border-radius: 8px !important;
+    color: var(--text-color-dark) !important;
+}
+
+/* Labels for inputs */
+.gradio-label {
+    color: var(--text-color-light) !important; /* Lighter text color for labels */
+    font-weight: bold !important;
+}
+
+/* Buttons */
+.gradio-button {
+    background-color: var(--lilac-medium) !important; /* Lilac for buttons */
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 10px 20px !important;
+    font-size: 1.1em !important;
+    cursor: pointer !important;
+    transition: background-color 0.3s ease !important;
+}
+
+.gradio-button:hover {
+    background-color: var(--button-hover-color) !important; /* Lighter purple on hover */
+}
+
+/* Markdown components (for results and footer) */
+.gradio-markdown {
+    background-color: var(--lavender-light) !important; /* Match container background */
+    color: var(--text-color-dark) !important;
+    border-radius: 10px !important;
+    padding: 10px !important;
+    margin-top: 10px !important;
+}
+
+/* Specific styling for the main heading within markdown */
+.gradio-markdown h1 {
+    color: var(--lavender-dark) !important; /* Darker lavender for the main title */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for headings */
+}
+
+/* Ensure the output markdown text also uses Special Elite and appropriate color */
+.gradio-markdown p,
+.gradio-markdown div {
+    font-family: 'Special Elite', cursive !important;
+    color: var(--text-color-dark) !important;
+}
+
+/* Style for the horizontal rule */
+hr {
+    border-top: 2px dashed var(--lilac-medium) !important; /* Dashed lilac line */
+    margin: 20px 0 !important;
+}
+
+/* Style for the footer text for consistency */
+.gradio-container div[style*="text-align: center;"] b {
+    color: var(--text-color-dark) !important;
+    font-family: 'Special Elite', cursive !important;
+}
+
+/* NEW: Styling for the header group (formerly header box) */
+
+.gradio-container {
+    border: none !important;
+    background-color: var(--lavender-light) !important;
+    box-shadow: none !important;
+}
+
+/* Wipe out Gradio's default internal section border (usually applies to first few blocks) */
+.gradio-container .gr-block:first-child {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.heading-group h1 {
+    color: white !important; /* White color for the heading inside the group */
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) !important;
+}
+.heading-group p {
+    color: var(--text-color-dark) !important; /* Dark text for the paragraph in the group */
+    font-size: 1.1em !important;
+}
+#heading-button-style {
+    width: 100%;
+    background-color: var(--lavender-dark);
+    color: white !important;
+    font-family: 'Special Elite', cursive !important;
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
+    margin-bottom: 20px;
+    transition: background-color 0.3s ease;
+}
+
+#heading-button-style:hover {
+    background-color: var(--button-hover-color);
+    cursor: default;
+}
+
+.gradio-container {
+    border: none !important;
+    background-color: var(--lavender-light) !important;
+    box-shadow: none !important;
+}
+
+.gradio-container .gr-block:first-child {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+#cute_emi_button {
+    color: white !important;
+    background-color: var(--lavender-dark) !important;
+}
+
+"""
+
+# Create Gradio Interface
+with gr.Blocks(theme=gr.themes.Soft(), title="Cute EMI Calculator", css=custom_css) as demo:
+    gr.HTML(
+      """
+      <div id="heading-button-style">
+          Ctrl+Loan EMI Calculator!
+      </div>
+      """
+  )
+
+    with gr.Row():
+        principal_input = gr.Slider(
+            minimum=100,
+            maximum=10000000,
+            step=100,
+            value=500000,
+            label="🏠 Loan Amount (Principal)",
+            info="How much are you borrowing?"
+        )
+        input_currency_dropdown = gr.Dropdown(
+            choices=list(currency_symbols.keys()),
+            value="United States Dollar ($)",
+            label="Input Currency 💲",
+            info="The currency of your loan amount."
+        )
+
+    with gr.Row():
+        interest_input = gr.Slider(
+            minimum=0.1,
+            maximum=20.0,
+            step=0.1,
+            value=8.5,
+            label="📈 Annual Interest Rate (%)",
+            info="What's the yearly interest rate?"
+        )
+        tenure_input = gr.Slider(
+            minimum=1,
+            maximum=30,
+            step=1,
+            value=10,
+            label="⏳ Loan Tenure (Years)",
+            info="How many years to repay the loan?"
+        )
+
+    with gr.Row():
+        output_currency_dropdown = gr.Dropdown(
+            choices=list(currency_symbols.keys()),
+            value="Indian Rupee (₹)",
+            label="Display Results In 💸",
+            info="Choose the currency for the results."
+        )
+
+    calculate_button = gr.Button("Calculate My EMI!", variant="primary", elem_id="cute_emi_button")
+
+    # The horizontal rule
+    explanation_separator = gr.Markdown("---", visible=False)
+
+    # Set initial visibility to False for all output components
+    emi_output = gr.Markdown("💖 Your Monthly EMI:", visible=False)
+    interest_output = gr.Markdown("💰 Total Interest Payable:", visible=False)
+    total_output = gr.Markdown("✨ Total Amount Payable:", visible=False)
+
+    amortization_table = gr.Dataframe(
+        label="Amortization Schedule",
+        headers=["Month", "Beginning Balance", "EMI", "Principal Paid", "Interest Paid", "Outstanding Balance"],
+        wrap=True,
+        interactive=False,
+        visible=False # Set initial visibility to False
+    )
+    emi_chart = gr.Plot(label="EMI Breakdown Chart", visible=False) # Set initial visibility to False
+
+    # --- NEW: "Chatbot" section using an Accordion ---
+    with gr.Accordion("🤔 How was this calculated? (Click to expand!)", open=False, visible=False) as explanation_accordion:
+        explanation_choice = gr.Radio(
+            choices=[
+                "How is the Monthly EMI calculated?",
+                "How is the Total Interest calculated?",
+                "How does currency conversion work?"
+            ],
+            label="Choose a question to learn more!",
+            # value="How is the Monthly EMI calculated?" # Default selection
+        )
+        explanation_output = gr.Markdown()
+        explanation_choice.change(
+            fn=explain_calculation,
+            inputs=explanation_choice,
+            outputs=explanation_output
+        )
+
+    # Footer markdown
+    footer_markdown = gr.Markdown(
+        """
+        <div style="text-align: center;">
+        <br>
+        <b>Calculations are approximate and for illustrative purposes only. Exchange rates are static placeholders and may not reflect real-time values. Always consult with your financial advisor!</b>
+        <br>
+        <b>Rates are as per 05.07.2025</b>
+        </div>
+        """,
+        visible=False # Set initial visibility to False
+    )
+
+
+    calculate_button.click(
+        fn=calculate_emi,
+        inputs=[
+            principal_input,
+            interest_input,
+            tenure_input,
+            input_currency_dropdown,
+            output_currency_dropdown
+        ],
+        outputs=[
+            emi_output,
+            interest_output,
+            total_output,
+            amortization_table,
+            emi_chart,
+            explanation_separator, # Add separator to outputs
+            explanation_accordion, # Add accordion to outputs
+            footer_markdown # Add footer markdown to outputs
+        ]
+    )
+
+# Launch the Gradio app
+if __name__ == "__main__":
+    demo.launch(share=True)

requirements.txt.txt

@@ -0,0 +1,3 @@
+gradio
+pandas
+matplotlib