app.py

import gradio as gr
from huggingface_hub import InferenceClient

"""
For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
"""
client = InferenceClient("Trinoid/Data_Management")


def respond(
    message,
    history: list[tuple[str, str]],
    system_message,
    max_tokens,
    temperature,
    top_p,
):
    messages = [{"role": "system", "content": system_message}]

    for val in history:
        if val[0]:
            messages.append({"role": "user", "content": val[0]})
        if val[1]:
            messages.append({"role": "assistant", "content": val[1]})

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

    response = ""
    thinking_process = []
    
    # Use chat completion instead of text generation
    for message in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        token = message.choices[0].delta.content
        if token:
            response += token
            # Store intermediate responses in thinking process
            if len(response) % 100 == 0:  # Increased to 100 characters to reduce frequency
                thinking_process.append(response)
            yield f"{response}<thinking>{','.join(thinking_process)}</thinking>"


# Custom CSS for Plant Wisdom.AI styling
custom_css = """
.gradio-container {
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #ffffff;
}

.contain {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 20px;
}

.message {
    padding: 16px 20px;
    border-radius: 12px;
    margin: 12px 0;
    font-size: 16px;
    line-height: 1.5;
}

.message.user {
    background-color: #f5f7fa;
    margin-left: 15%;
    border: 1px solid #e8eef7;
}

.message.assistant {
    background-color: #f0f7f0;
    margin-right: 15%;
    border: 1px solid #e0ede0;
    color: #2c3338;
}

.submit-btn {
    background-color: #2e7d32 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.submit-btn:hover {
    background-color: #1b5e20 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.submit-btn:active {
    transform: translateY(0) !important;
}

.slider-container {
    background-color: #f8faf8;
    padding: 20px;
    border-radius: 12px;
    margin: 12px 0;
    border: 1px solid #e0ede0;
}

.textbox {
    border: 2px solid #e0ede0 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    background-color: #ffffff !important;
}

.textbox:focus {
    border-color: #2e7d32 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.1) !important;
}

.title {
    color: #2c3338 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

.description {
    color: #505a62 !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

.additional-inputs {
    background-color: #f8faf8;
    border: 1px solid #e0ede0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
}

.chatbot {
    height: 600px !important;
    border: 1px solid #e0ede0;
    border-radius: 12px;
    background-color: #ffffff;
}

.message thinking {
    display: none;
}

.message.show-thinking thinking {
    display: block;
    margin-top: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    border: 1px solid #e0ede0;
}

.toggle-thinking-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #2e7d32;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.toggle-thinking-btn:hover {
    opacity: 1;
    background: rgba(46,125,50,0.1);
}
"""

"""
For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
"""
demo = gr.ChatInterface(
    respond,
    title="AI Data Management Expert",
    description="Hello! I am your Data Management Expert, specialized in Microsoft 365. I'm here to help you with guidance on Data Management procedures. How can I assist you today?",
    theme=gr.themes.Base(
        primary_hue=gr.themes.Color(
            c50="#f3f7f3",
            c100="#e0ede0",
            c200="#b5d4b5",
            c300="#8abb8a",
            c400="#5fa25f",
            c500="#2e7d32",
            c600="#1b5e20",
            c700="#154a19",
            c800="#0e3511",
            c900="#082108",
            c950="#041104"
        ),
        secondary_hue=gr.themes.Color(
            c50="#f3f7f3",
            c100="#e0ede0",
            c200="#b5d4b5",
            c300="#8abb8a",
            c400="#5fa25f",
            c500="#2e7d32",
            c600="#1b5e20",
            c700="#154a19",
            c800="#0e3511",
            c900="#082108",
            c950="#041104"
        ),
        neutral_hue="slate",
        spacing_size="lg",
        radius_size="lg",
        font=["Source Sans Pro", "Helvetica Neue", "Arial", "sans-serif"],
    ),
    css=custom_css,
    js="""
    function addThinkingButtons() {
        document.querySelectorAll('.message.assistant').forEach(msg => {
            // Only add button if message has thinking content and doesn't already have a button
            const thinking = msg.querySelector('thinking');
            if (thinking && !msg.querySelector('.toggle-thinking-btn')) {
                const btn = document.createElement('button');
                btn.className = 'toggle-thinking-btn';
                btn.textContent = 'Show thinking process';
                btn.onclick = function(e) {
                    e.preventDefault();
                    msg.classList.toggle('show-thinking');
                    btn.textContent = msg.classList.contains('show-thinking') 
                        ? 'Hide thinking process' 
                        : 'Show thinking process';
                };
                msg.appendChild(btn);
            }
        });
    }

    // Add buttons when new messages appear
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length) {
                addThinkingButtons();
            }
        });
    });

    // Start observing after the page loads
    document.addEventListener('DOMContentLoaded', () => {
        observer.observe(document.body, { 
            childList: true, 
            subtree: true 
        });
        addThinkingButtons();
    });
    """,
    additional_inputs=[
        gr.Textbox(
            value="""You are a specialized AI assistant made by Plant Wisdom.AI with deep knowledge of Microsoft 365 services—including SharePoint Online, OneDrive, Teams, Exchange, and the Microsoft Purview (Compliance) ecosystem—as well as general records management and data governance best practices.

Your primary objectives are:

Provide accurate, detailed, and practical answers about:

Microsoft 365's features, capabilities, and architecture.

Document and records management (e.g., retention labels, policies, disposition reviews).

Compliance and information governance (e.g., data loss prevention, eDiscovery, retention schedules).

SharePoint Online configuration, site management, and usage best practices.

Integration points across Microsoft 365 (Teams, Outlook, Power Platform, etc.).

Address user questions in a clear, direct manner without simply directing them to official documentation. Instead, share concise explanations and relevant examples.

When applicable, highlight best practices, common pitfalls, and recommended solutions based on real-world usage.

If you are not certain about an answer or lack enough context, say so clearly rather than guess.

Tone and Style:

Strive for clarity and helpfulness; avoid excessive jargon.

Avoid generic references like "refer to the documentation." Instead, explain or paraphrase relevant information whenever possible.

Cite Microsoft's recommended or well-known practices when beneficial, but do so in your own words.

Keep responses concise yet sufficiently detailed.

Additional Guidelines:

Where necessary, provide step-by-step instructions for configurations or troubleshooting.

Distinguish between official Microsoft 365 functionalities and custom solutions or third-party tools.

If the user's request includes advanced or niche scenarios, do your best to provide an overview, while acknowledging any areas that may require deeper research.

Maintain professionalism in all responses; be polite, solution-focused, and proactive.

Follow any privacy or ethical guidelines, and do not disclose personally identifiable information about real people.

IMPORTANT: If a question has been asked before in the conversation, acknowledge this and either refer back to the previous answer or provide additional context. Do not simply repeat the same answer verbatim.""",
            label="System message"
        ),
        gr.Slider(minimum=1, maximum=2048, value=1200, step=1, label="Max new tokens"),
        gr.Slider(minimum=0.1, maximum=2.0, value=0.4, step=0.1, label="Temperature"),
        gr.Slider(
            minimum=0.1,
            maximum=1.0,
            value=0.7,
            step=0.05,
            label="Top-p (nucleus sampling)",
        ),
    ],
)


if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0")