app.py

import gradio as gr

# Define some pre-written templates for Tab 1
templates = {
    "Friendly Chatbot": "You are a helpful, friendly chatbot that engages in light-hearted conversations.",
    "Technical Assistant": "You are a technical assistant specialized in answering questions related to Python programming.",
    "Nutrition Advisor": "You provide evidence-based advice on nutrition and healthy eating habits.",
}

# Define some agentic workflows for Tab 2
agentic_workflows = {
    "Blog Post Generator": "This agent is designed to help generate a blog post based on user input.",
    "Document Summarizer": "This agent summarizes long documents by extracting key points.",
    "Task Manager": "This agent helps you organize tasks and provides step-by-step guidance."
}

# Chatbot logic for custom instructions or pre-written templates
def chatbot_response(system_instructions, user_query):
    if "friendly" in system_instructions.lower():
        return f"Friendly Chatbot says: Hi there! 😊 How can I assist you today?"
    elif "technical" in system_instructions.lower():
        return f"Technical Assistant says: Sure! Here's some information on Python: {user_query}"
    elif "nutrition" in system_instructions.lower():
        return f"Nutrition Advisor says: Here's some advice about healthy eating: {user_query}"
    else:
        return f"Custom Chatbot says: {user_query}"

# Chatbot conversation function
def chatbot_conversation(system_instructions, chat_history, user_query):
    response = chatbot_response(system_instructions, user_query)
    chat_history.append((user_query, response))
    return chat_history, ""

# Chatbot conversation for predefined agentic workflows
def agentic_chatbot_conversation(workflow_instructions, chat_history, user_query):
    response = f"Agent Workflow ({workflow_instructions}) says: {user_query}"
    chat_history.append((user_query, response))
    return chat_history, ""

# Function to update the interface when a selection is made from the dropdown (Tab 1)
def update_interface(template_name, custom_instructions):
    if template_name == "Custom Instructions":
        return gr.update(visible=True), gr.update(visible=False)
    else:
        template_content = templates.get(template_name, "")
        return gr.update(visible=False), gr.update(visible=True, value=template_content)

# Build the Gradio interface with Tabs
with gr.Blocks(css=".gradio-container {background-color: #F0F0F0;} .gr-button {background-color: #1E3A8A; color: white;} .gr-textbox textarea {font-size: 16px;} .gr-markdown {font-size: 18px; color: #1E3A8A;}") as demo:
    
    # Add Tabs
    with gr.Tabs():
        
        # Tab 1: Custom Instructions or Pre-Written Templates
        with gr.Tab("Custom Instructions Chatbot"):
            gr.Markdown("""
            <div style='background-color:#E0E0E0; padding: 20px; border-radius: 10px;'>
                <h1 style='text-align: center; color: #1E3A8A;'>SRF Innovation Labs - AI Chatbot Use Case Explorer</h1>
                <p style='font-size: 18px; text-align: center; color: #1E3A8A;'>
                    This tool allows you to experiment with different system prompts, 
                    giving you control over how the chatbot behaves. You can either use pre-defined templates 
                    or write your own custom instructions.
                </p>
            </div>
            """)

            # Section to select system instructions from dropdown
            gr.Markdown("<h2 style='color: #1E3A8A;'>Chatbot Setup</h2>")
            template_name = gr.Dropdown(choices=["Custom Instructions"] + list(templates.keys()), label="Choose Instructions", value="Friendly Chatbot")
            custom_instructions = gr.Textbox(label="Custom Instructions", visible=False, placeholder="Write your own instructions here...")
            template_display = gr.Textbox(label="Template Content", interactive=False, visible=True)

            # Chatbot interface
            gr.Markdown("<h2 style='color: #1E3A8A;'>Chatbot Interaction</h2>")
            chatbot = gr.Chatbot(label="Chatbot Conversation", height=300, show_label=False)
            user_query = gr.Textbox(label="Your Query", placeholder="Ask a question or say something to the chatbot...")
            submit_button = gr.Button("Send", elem_classes=["gr-button"])

            # Update logic for Tab 1
            template_name.change(fn=update_interface, inputs=[template_name, custom_instructions], outputs=[custom_instructions, template_display])
            submit_button.click(fn=chatbot_conversation, inputs=[custom_instructions if template_name == "Custom Instructions" else template_display, chatbot, user_query], outputs=[chatbot, user_query])

        # Tab 2: Predefined Agentic Workflows
        with gr.Tab("Agentic Workflow Chatbots"):
            gr.Markdown("""
            <div style='background-color:#E0E0E0; padding: 20px; border-radius: 10px;'>
                <h1 style='text-align: center; color: #1E3A8A;'>Agentic Workflow Explorer</h1>
                <p style='font-size: 18px; text-align: center; color: #1E3A8A;'>
                    Explore predefined agentic workflows that execute specific tasks, such as generating blog posts, 
                    summarizing documents, or managing tasks.
                </p>
            </div>
            """)

            # Dropdown for selecting agentic workflows
            workflow_name = gr.Dropdown(choices=list(agentic_workflows.keys()), label="Choose Agent Workflow", value="Blog Post Generator")
            workflow_display = gr.Textbox(label="Workflow Description", interactive=False, visible=True)
            workflow_chatbot = gr.Chatbot(label="Agent Workflow Conversation", height=300, show_label=False)
            workflow_user_query = gr.Textbox(label="Your Query", placeholder="Ask the agent to perform a task...")
            workflow_submit_button = gr.Button("Send", elem_classes=["gr-button"])

            # Chatbot interaction for agentic workflows
            workflow_submit_button.click(fn=agentic_chatbot_conversation, inputs=[workflow_name, workflow_chatbot, workflow_user_query], outputs=[workflow_chatbot, workflow_user_query])

# Launch the app
demo.launch()