app.py

import gradio as gr
from huggingface_hub import InferenceClient

# Import the existing planner and task interfaces
from planner import create_planner
from tasks import create_tasks


# ---------------------------------------------------------
# SHARED AI MODEL
# ---------------------------------------------------------

client = InferenceClient("Qwen/Qwen2.5-7B-Instruct")


# ---------------------------------------------------------
# STEM CHATBOT
# This uses the same response code as original app.py
# ---------------------------------------------------------

def stem_respond(message, history):
    messages = [{
        "role": "system",
        "content": """
You are a chatbot tutor made to give students science, technology,
engineering, or math practice problems and assist them with questions
they have.

IMPORTANT:
- Do NOT use Markdown.
- Do NOT use LaTeX.
- Do NOT use \\frac, \\sqrt, \\text, \\quad, or other LaTeX commands.
- Write everything in plain English using normal text.
- Write equations like:
  x = (-b ± √(b² - 4ac)) / (2a)
"""
    }]

    if history:
        messages.extend(history)

    messages.append({
        "role": "user",
        "content": message
    })

    response = client.chat_completion(
        messages,
        max_tokens=None,
        temperature=0.8
    )

    return response.choices[0].message.content.strip()


# ---------------------------------------------------------
# HUMANITIES CHATBOT
# This uses the same response code as humanities.py
# The function has a different name so it does not replace
# the STEM chatbot function
# ---------------------------------------------------------

def humanities_respond(message, history):
    messages = [{
        "role": "system",
        "content": """
You are a chatbot tutor made to give students humanities, history,
or English practice problems and assist them with questions they have.
"""
    }]

    if history:
        messages.extend(history)

    messages.append({
        "role": "user",
        "content": message
    })

    response = client.chat_completion(
        messages,
        max_tokens=None,
        temperature=1.0
    )

    return response.choices[0].message.content.strip()


# ---------------------------------------------------------
# PAGE NAVIGATION
# ---------------------------------------------------------

def show_calendar():
    return (
        gr.update(visible=True),
        gr.update(visible=False),
        gr.update(visible=False),
        gr.update(visible=False)
    )


def show_tasks():
    return (
        gr.update(visible=False),
        gr.update(visible=True),
        gr.update(visible=False),
        gr.update(visible=False)
    )


def show_stem():
    return (
        gr.update(visible=False),
        gr.update(visible=False),
        gr.update(visible=True),
        gr.update(visible=False)
    )


def show_humanities():
    return (
        gr.update(visible=False),
        gr.update(visible=False),
        gr.update(visible=False),
        gr.update(visible=True)
    )


# ---------------------------------------------------------
# WEBSITE STYLING
# ---------------------------------------------------------

css = """
body {
    background-color: #f7f7f7;
    font-family: Arial, sans-serif;
}

.gradio-container {
    max-width: 1200px !important;
    margin: auto !important;
    background-color: #f7f7f7 !important;
}

/* Main website title */
.website-title {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 8px;
}

.website-title h1 {
    font-size: 42px;
    color: #3f3b64;
    margin-bottom: 4px;
}

.website-title p {
    font-size: 17px;
    color: #68647e;
}

/* Navigation bar */
.navigation {
    background-color: white;
    border: 2px solid #606060;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 18px;
}

.navigation button {
    background-color: #ded8ff !important;
    color: #393456 !important;
    border: 1px solid #6d6789 !important;
    border-radius: 2px !important;
    min-height: 42px !important;
    font-weight: bold !important;
}

.navigation button:hover {
    background-color: #c9c0ff !important;
}

/* Shared page layout */
.page-card {
    border: 2px solid #666666;
    border-radius: 3px;
    padding: 20px;
    min-height: 650px;
}

/* Calendar page */
.calendar-page {
    background-color: #ffc4c8;
}

/* To-do list page */
.tasks-page {
    background-color: #ffc4c8;
}

/* STEM chatbot page */
.stem-page {
    background-color: #bdd5fa;
}

/* Humanities chatbot page */
.humanities-page {
    background-color: #fff2ad;
}

/* White content area inside each page */
.content-box {
    background-color: white;
    border: 1px solid #666666;
    border-radius: 3px;
    padding: 18px;
}

/* Page headings */
.page-heading {
    text-align: center;
    color: #393456;
}

.page-heading h2 {
    font-size: 32px;
    margin-bottom: 4px;
}

.page-heading p {
    color: #625e75;
    margin-top: 0;
}

/* Chat styling */
.chatbot {
    background-color: white !important;
    border: 1px solid #777777 !important;
}

.message {
    border-radius: 10px !important;
}

textarea {
    background-color: white !important;
    color: #333333 !important;
    border: 1px solid #777777 !important;
    border-radius: 8px !important;
}

button.primary {
    background-color: #ded8ff !important;
    color: #393456 !important;
    border: 1px solid #6d6789 !important;
}

/* Planner and task buttons */
.page-card button {
    border-radius: 6px !important;
}


footer {
    display: none !important;
}

.gradio-container*{
    color: #000000
}
"""


# ---------------------------------------------------------
# BUILD THE WEBSITE
# ---------------------------------------------------------

with gr.Blocks(
    theme=gr.themes.Soft(),
    css=css,
    title="Student Learning Center"
) as demo:

    # Website title
    gr.HTML("""
    <div class="website-title">
        <h1>Student Learning Center</h1>
        <p>Plan your work, organize your assignments, and get tutoring help.</p>
    </div>
    """)

    # Navigation bar
    with gr.Row(elem_classes=["navigation"]):
        calendar_button = gr.Button("Calendar")
        tasks_button = gr.Button("To-Do List")
        stem_button = gr.Button("STEM Chatbot")
        humanities_button = gr.Button("Humanities Chatbot")

    # -----------------------------------------------------
    # CALENDAR PAGE
    # -----------------------------------------------------

    with gr.Column(
        visible=True,
        elem_classes=["page-card", "calendar-page"]
    ) as calendar_page:

        gr.HTML("""
        <div class="page-heading">
            <h2>Calendar</h2>
            <p>Record important assignments, events, and deadlines.</p>
        </div>
        """)

        with gr.Column(elem_classes=["content-box"]):
            create_planner()

    # -----------------------------------------------------
    # TO-DO LIST PAGE
    # -----------------------------------------------------

    with gr.Column(
        visible=False,
        elem_classes=["page-card", "tasks-page"]
    ) as tasks_page:

        gr.HTML("""
        <div class="page-heading">
            <h2>To-Do List</h2>
            <p>Add tasks and mark them as completed.</p>
        </div>
        """)

        with gr.Column(elem_classes=["content-box"]):
            create_tasks()

    # -----------------------------------------------------
    # STEM CHATBOT PAGE
    # -----------------------------------------------------

    with gr.Column(
        visible=False,
        elem_classes=["page-card", "stem-page"]
    ) as stem_page:

        gr.HTML("""
        <div class="page-heading">
            <h2>STEMbot</h2>
            <p>Ask questions about science, technology, engineering, and math.</p>
        </div>
        """)

        with gr.Column(elem_classes=["content-box"]):
            gr.ChatInterface(
                fn=stem_respond,
                examples=[
                    "Explain tangents to me.",
                    "What is photosynthesis?",
                    "Test me on basic kinetic energy concepts."
                ]
            )

    # -----------------------------------------------------
    # HUMANITIES CHATBOT PAGE
    # -----------------------------------------------------

    with gr.Column(
        visible=False,
        elem_classes=["page-card", "humanities-page"]
    ) as humanities_page:

        gr.HTML("""
        <div class="page-heading">
            <h2>HUMANITIESbot</h2>
            <p>Ask questions about English, history, writing, and humanities.</p>
        </div>
        """)

        with gr.Column(elem_classes=["content-box"]):
            gr.ChatInterface(
                fn=humanities_respond,
                examples=[
                    "When was the American Revolution?",
                    "How do I cite a source using MLA format?",
                    "Help me analyze the theme of a novel."
                ]
            )

    # List of all page components.
    pages = [
        calendar_page,
        tasks_page,
        stem_page,
        humanities_page
    ]

    # Connect each navigation button to its page.
    calendar_button.click(
        fn=show_calendar,
        inputs=None,
        outputs=pages
    )

    tasks_button.click(
        fn=show_tasks,
        inputs=None,
        outputs=pages
    )

    stem_button.click(
        fn=show_stem,
        inputs=None,
        outputs=pages
    )

    humanities_button.click(
        fn=show_humanities,
        inputs=None,
        outputs=pages
    )


# There should only be one launch command in the entire app.
if __name__ == "__main__":
    demo.launch()