app.py

import os
from threading import Thread


import gradio as gr
from gradio.themes import Base
from gradio.themes.utils import colors

from transformers import pipeline, TextIteratorStreamer, AutoModelForCausalLM, AutoTokenizer

SYSTEM_PROMPT = "You are a compliance assistant. Use the provided risk data to answer user questions. If a single risk object is given, provide a direct answer. If a list of risks is provided, summarize, compare, or analyze the collection as needed. Always base your response on the data provided."
hf_token = os.environ["HF_TOKEN"]

class HfModelWrapper:
    def __init__(
        self,
        model_path="casperhansen/llama-3.3-70b-instruct-awq",
        sys_prompt=SYSTEM_PROMPT,
        adapter_path="artemisiaai/fine-tuned-adapter",
    ):

        self.model = AutoModelForCausalLM.from_pretrained(
            model_path, device_map="auto"
        )
        self.tokenizer = AutoTokenizer.from_pretrained(model_path)
        self.sys_prompt = sys_prompt
        self.adapter_path = adapter_path
        self.model.load_adapter(self.adapter_path, token=hf_token)
        self.model.enable_adapters()

    def build_prompt(self, user_msg, history):

        inppt = []
        inppt.append({"role": "system", "content": self.sys_prompt})
        inppt += history
        inppt.append({"role": "user", "content": user_msg})

        prompt = self.tokenizer.apply_chat_template(
            inppt,
            tokenize=False,
        )
        return prompt

    def generate(self, user_input, history):
        input_text = self.build_prompt(user_input, history)
        input_ids = self.tokenizer.encode(input_text, return_tensors="pt").to("cuda")

        streamer = TextIteratorStreamer(self.tokenizer, skip_prompt=True)

        gen_kwargs = {
            "inputs": input_ids,
            "streamer": streamer,
            "pad_token_id": self.tokenizer.eos_token_id,
            "max_length": 8192,
            "temperature": 0.1,
            "top_p": 0.8,
            "repetition_penalty": 1.25,
        }

        thread = Thread(target=self.model.generate, kwargs=gen_kwargs)
        thread.start()

        return streamer

# Custom theme colors based on brand standards
class ArtemisiaTheme(Base):
    def __init__(self, **kwargs):
 
        
        # Configure Gradio's theme system with our colors
        super().__init__(
            font=["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"],
            primary_hue=colors.indigo,
            neutral_hue=colors.gray,
            **kwargs
        )
        
        # Background settings
        self.body_background_fill = "#4f008c"
        self.background_fill_primary = self.neutral_800
        self.block_background_fill = "transparent"
        self.block_label_background_fill = self.neutral_700
        
        # Components
        self.button_primary_background_fill = self.primary_900
        self.button_primary_background_fill_hover = self.primary_700
        
        # Input fields
        self.input_background_fill = "#000000"
        self.input_border_color = "transparent"
        
        # Text colors
        self.text_color = "#ffffff"
        self.error_text_color = "#ff5252"

# Custom CSS for exact layout and styling
custom_css = """
body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #4f008c;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.gradio-container {
    background-color: #4f008c !important;
}

header {
    background-color: #4a0082;
    padding: 10px 20px;
    display: flex;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
}

.logo-container {
    display: flex;
    gap: 0px;
    flex-direction: row;
    width: fit-content !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.nav-divider {
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 10px;
}

.dashboard-title {
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
    white-space: nowrap;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stc-logo svg {
    width: 66px;
    height: 32px;
}

/* Explicitly ensure STC logo is white */
.stc-logo svg path {
    fill: #ffffff !important;
}

.about-section {
    padding: 12px 20px;
    background-color: #000;
    border-bottom: 1px solid #333;
}

.about-section h2 {
    color: #ff5252;
    margin-bottom: 6px;
    font-size: 1rem;
    font-weight: 600;
}

.about-section p {
    font-size: 0.875rem;
    line-height: 1.6;
}

.main-content {
    display: flex;
    padding: 0;
    background-color: #4f008c;
    gap: 8px;
    justify-content: space-between;
}

.chat-container, .results-container {
    flex: 1;
    background-color: transparent;
    border-radius: 15px;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 550px;
    max-height: 550px;
    height: 550px;
    overflow: hidden;
    margin: 0;
    gap: 0 !important;
}

.section-header {
    gap: 0;
    background-color: #120428;
    border-radius: 15px 15px 0 0;
    padding: 12px;
    margin-bottom: 0;
}

.section-header h2 {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.section-header p {
    margin: 0;
    padding: 4px 0 0 0;
    color: #ccc;
    font-size: 0.75rem;
}

.chat-content {
    flex: 1;
    background-color: #0a0013;
    border-radius: 0 0 15px 15px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    background: #120428 !important;
    padding: 10px !important;
    margin: 0 !important;
    max-width: 100%;
    border: none;
    overflow-y: auto;
}

.results-content {
    flex: 1;
    background-color: #0a0013;
    border-radius: 0 0 15px 15px;
    padding: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.placeholder-text {
    color: #aaa;
    font-size: 0.75rem;
    max-width: 400px;
    line-height: 1.6;
}

/* Updated styles to match the image reference */
.gradio-container {
    max-width: 100% !important;
    padding: 0 !important;
}

.chat-container {
    padding: 0;
    margin: 0;
}

.results-container {
    padding: 0;
    margin: 0;
    min-width: min(50%, 100%) !important;
}

#component-0 > .gr-form > div:not(.about-section):not(.header) {
    background-color: #4f008c;
}

/* Chat messages container adjustments */
.chat-messages {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Remove any gaps between elements, but exclude section headers */
.chat-container > div:not(.section-header), 
.results-container > div:not(.section-header) {
    margin: 0 !important;
    padding: 0 !important;
}

/* Override flex-grow for section headers */
#component-27, 
.column.section-header,
div[id^="component"][class*="column section-header"] {
    flex-grow: 0 !important;
}

/* Add more forceful display for chatbot component */
.gradio-chatbot {
    height: auto !important;
    min-height: 400px !important;
    display: block !important;
    width: 100% !important;
    overflow-y: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Also target the container of the chatbot */
.message-wrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Target the messages themselves */
.message {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure chat bubbles have proper max-width */
.bubble-wrap {
    background: #0A0013;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 100%;
    border: none !important;
}

/* Target the chat bubble containers */
.gradio-chatbot .messages-wrapper > div > div {
    max-width: 70% !important; /* Allow bubbles to be a bit wider */
    width: auto !important; /* Let content determine width, up to max-width */
    min-width: 30% !important; /* Ensure a minimum width */
}

/* Style the individual message bubbles */
.gradio-chatbot .messages-wrapper > div > div > div {
    width: 100% !important; /* Text fills the bubble */
    padding: 10px 15px !important; /* Add more padding for better readability */
    border-radius: 12px !important; /* Rounded corners */
}

/* Focus on the text content inside bubbles */
.gradio-chatbot .bubble {
    width: 100% !important; /* Fill the bubble width */
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important; /* Ensure it takes full width */
    white-space: normal !important; /* Allow proper wrapping */
}

/* Target the actual text paragraphs inside bubbles */
.gradio-chatbot .bubble p,
.gradio-chatbot .bubble span,
.gradio-chatbot .bubble div {
    width: 100% !important;
    display: inline-block !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-align: left !important;
}

/* Target the first lines of text specifically to ensure they fill the width */
.gradio-chatbot .bubble p:first-child,
.gradio-chatbot .bubble span:first-child {
    width: 100% !important;
    display: block !important;
}

/* Specific gradio selector */
.chat-messages [data-testid="chatbot"] .message-wrap > div {
    max-width: 50% !important;
}

.chat-input-container {
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;
    background-color: #000000;
    display: flex;
    gap: 0 !important;
}

.chat-input {
    flex-grow: 1;
    padding: 0px;
    background-color: #000000;
    border: none;
    border-radius: 8px 0 0 8px;
    color: #fff;
    font-size: 0.875rem;
    width: 100%;
    margin: 0 !important;
}

.send-button {
    width: 50px !important;
    min-width: 40px !important;
    max-width: 50px !important;
    height: 100%;
    background-color: #993333;
    border: none !important;
    border-radius: 0 8px 8px 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin: 0 !important;
}

.send-button:hover {
    background-color: #b33c3c;
}

.container.show_textbox_border {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.input-container {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.input-container textarea {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: min(80%, 100%) !important;
}

span[data-testid="block-info"] {
    display: none !important;
}

.chat-input::placeholder {
    color: #aaa;
    background-color: #000000;
    padding: 0px;
}

/* Paper plane icon styling for the send button */
.send-icon {
    width: 20px;
    height: 20px;
}

.send-button svg {
    width: 20px;
    height: 20px;
    display: block;
    margin: auto;
}

.bot, .user {
    max-width: 70% !important;
    width: fit-content !important;
}
"""

# SVG icons
stc_logo_svg = """<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M31.625 6.80851L31.6213 0.00567279L24.7511 0L24.75 6.79666L31.625 6.80851ZM5.88232 23.0513L0 24.2653C0.424529 29.3706 6.18066 32.1214 11.3441 31.9959C14.2329 31.9257 16.8607 30.9901 18.5472 29.6392C22.4356 26.5245 22.4103 20.0758 17.2744 17.3711C15.3452 16.3551 13.2453 15.9901 11.4475 15.6777C9.10574 15.2707 7.27666 14.9528 7.00534 13.4013C6.4686 10.332 12.5096 9.46738 14.5772 12.2286C14.8637 12.6112 14.954 12.903 15.0505 13.2152L15.0505 13.2152C15.114 13.4203 15.1801 13.6342 15.3064 13.8884L20.889 12.6335C20.9094 12.6247 20.9455 12.6077 20.9725 12.5925C20.6349 7.68784 14.5151 5.00625 9.32399 5.5062C-0.27525 6.43076 -2.55039 16.9042 5.58028 20.2095C6.79516 20.7033 8.15129 20.9902 9.48385 21.2722C10.7248 21.5347 11.9453 21.793 13.0123 22.21C15.9184 23.3457 15.0929 26.4741 11.6771 26.7789C8.56398 27.0567 6.23313 25.7203 5.88232 23.0513ZM66 23.5042L59.9776 21.5819C59.8074 21.8761 59.6967 22.1399 59.5911 22.3913C59.4397 22.7522 59.2989 23.0876 59.0079 23.451C58.5671 24.0016 58.1301 24.4609 57.4746 24.8733C56.2011 25.6745 54.3913 26.0052 52.5943 25.6296C49.5135 24.9858 47.5738 22.504 47.4893 18.9828C47.4011 15.3106 49.2053 12.6962 52.1919 11.9434C56.004 10.9825 58.8882 12.9476 59.6362 15.8925L65.8508 13.9081C65.2461 10.9173 62.8376 8.44026 60.8112 7.24677C52.9767 2.63234 40.5366 7.03787 40.5625 18.7666C40.5881 30.3289 53.233 34.8158 60.8587 30.2249C62.1039 29.4752 63.2247 28.4579 64.0145 27.4692C64.723 26.5823 65.7798 24.9372 66 23.5042ZM24.8097 12.9397L31.6484 12.9362C31.6463 13.2625 31.6421 13.7315 31.6371 14.2928L31.637 14.3022L31.637 14.3033L31.637 14.3036L31.637 14.304C31.6122 17.0787 31.5674 22.0894 31.6626 23.2768C31.7957 24.9371 32.571 25.7899 34.2386 26.0043C35.9984 26.2305 36.9321 25.8072 38.115 25.2708L38.1151 25.2708C38.2402 25.2141 38.3681 25.1561 38.5 25.0975L38.4566 30.5261C35.605 32.6136 28.5618 32.8937 25.8963 28.6417C24.7526 26.8176 24.7717 24.551 24.7916 22.1906L24.7916 22.19C24.7942 21.8817 24.7968 21.5719 24.7968 21.2612C24.7969 20.3989 24.7853 19.5126 24.7737 18.6184V18.6183V18.6183V18.6182V18.6182C24.7489 16.7095 24.7236 14.7647 24.8097 12.9397ZM38.5 12.9362L31.625 12.935L31.6257 6.12766L38.4997 6.13078L38.5 12.9362Z" fill="#ffffff"></path></svg>"""
artemsia_logo_svg = """ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/></defs><g fill="#000000" fill-opacity="1"><g transform="translate(52.720972, 116.834422)"><g><path d="M 22.9375 1.421875 C 18.78125 1.421875 15.332031 0.289062 12.59375 -1.96875 C 9.863281 -4.238281 7.859375 -7.332031 6.578125 -11.25 C 5.304688 -15.164062 4.671875 -19.578125 4.671875 -24.484375 C 4.671875 -28.921875 5.257812 -33.566406 6.4375 -38.421875 C 7.613281 -43.285156 9.378906 -48.003906 11.734375 -52.578125 C 14.097656 -57.160156 16.976562 -61.316406 20.375 -65.046875 C 23.78125 -68.773438 27.695312 -71.75 32.125 -73.96875 C 36.5625 -76.1875 41.472656 -77.296875 C 50.722656 -77.296875 53.785156 -76.75 56.046875 -75.65625 C 58.316406 -74.570312 60.347656 -73.179688 62.140625 -71.484375 L 69.65625 -75.734375 L 74.171875 -75.734375 L 64.546875 -30.4375 C 64.359375 -29.394531 64.078125 -27.882812 63.703125 -25.90625 C 63.328125 -23.925781 63.019531 -21.894531 62.78125 -19.8125 C 62.539062 -17.738281 62.421875 -16.039062 62.421875 -14.71875 C 62.421875 -7.164062 64.359375 -3.390625 68.234375 -3.390625 C 69.742188 -3.390625 71.394531 -3.816406 73.1875 -4.671875 C 74.976562 -5.523438 76.910156 -6.703125 78.984375 -8.203125 L 79.84375 -7.078125 C 78.519531 -5.847656 76.722656 -4.570312 74.453125 -3.25 C 72.191406 -1.9375 69.785156 -0.832031 67.234375 0.0625 C 64.691406 0.96875 62.238281 1.421875 59.875 1.421875 C 56.476562 1.421875 53.789062 0.382812 51.8125 -1.6875 C 49.832031 -3.769531 48.84375 -6.648438 48.84375 -10.328125 C 48.84375 -12.222656 48.9375 -13.945312 49.125 -15.5 C 49.3125 -17.0625 49.59375 -19.019531 49.96875 -21.375 L 49.828125 -21.375 C 46.523438 -14.101562 42.628906 -8.484375 38.140625 -4.515625 C 33.660156 -0.554688 28.59375 1.421875 22.9375 1.421875 Z M 29.015625 -2.40625 C 31.566406 -2.40625 34.019531 -3.347656 36.375 -5.234375 C 38.738281 -7.117188 40.929688 -9.5 42.953125 -12.375 C 44.984375 -15.257812 46.679688 -18.234375 48.046875 -21.296875 C 49.421875 -24.367188 50.347656 -27.035156 50.828125 -29.296875 L 59.3125 -70.640625 C 58.269531 -72.335938 56.757812 -73.609375 54.78125 -74.453125 C 52.800781 -75.304688 50.726562 -75.734375 48.5625 -75.734375 C 44.6875 -75.734375 41.210938 -74.550781 38.140625 -72.1875 C 35.078125 -69.832031 32.34375 -66.742188 29.9375 -62.921875 C 27.53125 -59.097656 25.523438 -54.875 23.921875 -50.25 C 22.316406 -45.625 21.113281 -41.023438 20.3125 -36.453125 C 19.507812 -31.878906 19.109375 -27.703125 19.109375 -23.921875 C 19.109375 -16.179688 20.050781 -10.660156 21.9375 -7.359375 C 23.820312 -4.054688 26.179688 -2.40625 29.015625 -2.40625 Z M 29.015625 -2.40625 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(134.827233, 116.834422)"><g><path d="M 7.921875 0 L 20.8125 -61.4375 C 21.09375 -62.757812 21.300781 -64.03125 21.4375 -65.25 C 21.582031 -66.476562 21.65625 -67.332031 21.65625 -67.8125 C 21.65625 -70.644531 20.453125 -72.460938 18.046875 -73.265625 C 15.640625 -74.066406 13.066406 -74.46875 10.328125 -74.46875 L 9.203125 -74.46875 L 9.484375 -75.875 L 35.390625 -75.875 L 32.140625 -55.5 L 32.421875 -55.5 C 34.210938 -59.363281 36.191406 -62.945312 38.359375 -66.25 C 40.535156 -69.550781 43.082031 -72.21875 46 -74.25 C 48.925781 -76.28125 52.609375 -77.296875 57.046875 -77.296875 C 61.015625 -77.296875 63.941406 -76.375 65.828125 -74.53125 C 67.710938 -72.6875 68.65625 -70.351562 68.65625 -67.53125 C 68.65625 -64.226562 67.6875 -61.609375 65.75 -59.671875 C 63.820312 -57.734375 60.78125 -56.765625 56.625 -56.765625 C 56.71875 -57.523438 56.765625 -58.253906 56.765625 -58.953125 C 56.765625 -59.660156 56.765625 -60.347656 56.765625 -61.015625 C 56.765625 -64.503906 56.269531 -67.285156 55.28125 -69.359375 C 54.289062 -71.441406 52.425781 -72.484375 49.6875 -72.484375 C 47.707031 -72.484375 45.722656 -71.609375 43.734375 -69.859375 C 41.753906 -68.109375 39.890625 -65.910156 38.140625 -63.265625 C 36.398438 -60.628906 34.941406 -57.921875 33.765625 -55.140625 C 32.585938 -52.359375 31.757812 -49.925781 31.28125 -47.84375 L 21.09375 0 Z M 7.921875 0 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(202.494117, 116.834422)"><g><path d="M 25.90625 1.421875 C 15.613281 1.421875 10.46875 -4.097656 10.46875 -15.140625 C 10.46875 -16.835938 10.609375 -18.796875 10.890625 -21.015625 C 11.179688 -23.234375 11.515625 -25.238281 11.890625 -27.03125 L 21.9375 -74.46875 L 11.1875 -74.46875 L 11.46875 -75.875 C 16.65625 -75.875 20.851562 -76.441406 24.0625 -77.578125 C 27.269531 -78.710938 29.910156 -80.550781 31.984375 -83.09375 C 34.066406 -85.644531 36.003906 -89.046875 37.796875 -93.296875 L 39.21875 -93.296875 L 35.53125 -75.875 L 52.65625 -75.875 L 52.375 -74.46875 L 35.25 -74.46875 L 25.203125 -27.46875 C 24.722656 -25.101562 24.316406 -22.859375 23.984375 -20.734375 C 23.660156 -18.609375 23.5 -16.789062 23.5 -15.28125 C 23.5 -11.039062 24.347656 -8 26.046875 -6.15625 C 27.742188 -4.3125 30.148438 -3.390625 33.265625 -3.390625 C 35.054688 -3.390625 36.96875 -3.695312 39 -4.3125 C 41.03125 -4.925781 42.800781 -5.707031 44.3125 -6.65625 L 45.015625 -5.375 C 42.179688 -3.394531 39.160156 -1.765625 35.953125 -0.484375 C 32.742188 0.785156 29.394531 1.421875 25.90625 1.421875 Z M 25.90625 1.421875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(254.447567, 116.834422)"><g><path d="M 32.984375 1.421875 C 27.984375 1.421875 23.378906 0.335938 19.171875 -1.828125 C 14.972656 -4.003906 11.625 -7.238281 9.125 -11.53125 C 6.625 -15.832031 5.375 -21.285156 5.375 -27.890625 C 5.375 -33.078125 6.269531 -38.546875 8.0625 -44.296875 C 9.863281 -50.054688 12.554688 -55.4375 16.140625 -60.4375 C 19.722656 -65.445312 24.132812 -69.507812 29.375 -72.625 C 34.613281 -75.738281 40.675781 -77.296875 47.5625 -77.296875 C 53.507812 -77.296875 58.132812 -75.851562 61.4375 -72.96875 C 64.738281 -70.09375 66.390625 -66.109375 66.390625 -61.015625 C 66.390625 -56.484375 64.617188 -52.257812 61.078125 -48.34375 C 57.546875 -44.425781 52.710938 -41.238281 46.578125 -38.78125 C 40.441406 -36.332031 33.503906 -35.109375 25.765625 -35.109375 L 20.8125 -35.109375 C 20.34375 -32.273438 20.109375 -29.488281 20.109375 -26.75 C 20.109375 -18.257812 21.3125 -11.675781 23.71875 -7 C 26.125 -2.332031 29.640625 0 34.265625 0 C 39.640625 0 43.929688 -1.648438 47.140625 -4.953125 C 50.347656 -8.253906 52.800781 -12.5 54.5 -17.6875 C 56.476562 -17.125 57.46875 -15.710938 57.46875 -13.453125 C 57.46875 -11.660156 56.59375 -9.582031 54.84375 -7.21875 C 53.101562 -4.863281 50.441406 -2.832031 46.859375 -1.125 C 43.273438 0.570312 38.648438 1.421875 32.984375 1.421875 Z M 21.09375 -36.515625 L 24.921875 -36.515625 C 33.222656 -36.515625 39.78125 -38.828125 44.59375 -43.453125 C 49.40625 -48.078125 51.8125 -54.257812 51.8125 -62 C 51.8125 -71.15625 49.265625 -75.734375 44.171875 -75.734375 C 41.335938 -75.734375 38.691406 -74.578125 36.234375 -72.265625 C 33.785156 -69.953125 31.566406 -66.859375 29.578125 -62.984375 C 27.597656 -59.117188 25.898438 -54.875 24.484375 -50.25 C 23.066406 -45.625 21.9375 -41.046875 21.09375 -36.515625 Z M 21.09375 -36.515625 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(69.713159, 230.834414)"><g><path d="M 107.453125 1.421875 C 103.296875 1.421875 100.109375 0.0976562 97.890625 -2.546875 C 95.671875 -5.191406 94.5625 -8.585938 94.5625 -12.734375 C 94.5625 -17.078125 95.457031 -23.445312 97.25 -31.84375 L 99.65625 -42.890625 C 100.03125 -44.773438 100.617188 -47.488281 101.421875 -51.03125 C 102.222656 -54.570312 102.625 -57.851562 102.625 -60.875 C 102.625 -62.382812 102.503906 -64.035156 102.265625 -65.828125 C 102.035156 -67.617188 101.304688 -69.175781 100.078125 -70.5 C 98.859375 -71.820312 96.832031 -72.484375 94 -72.484375 C 91.539062 -72.484375 89.203125 -71.726562 86.984375 -70.21875 C 84.765625 -68.707031 82.734375 -66.890625 80.890625 -64.765625 C 79.054688 -62.640625 77.5 -60.5625 76.21875 -58.53125 C 74.945312 -56.507812 74.03125 -54.976562 73.46875 -53.9375 L 67.953125 -29.15625 C 67.671875 -27.84375 67.289062 -25.816406 66.8125 -23.078125 C 66.34375 -20.335938 65.894531 -17.382812 65.46875 -14.21875 C 65.039062 -11.0625 64.660156 -8.160156 64.328125 -5.515625 C 64.003906 -2.878906 63.84375 -1.039062 63.84375 0 L 50.390625 0 C 50.390625 -1.132812 50.554688 -3 50.890625 -5.59375 C 51.222656 -8.1875 51.625 -11.109375 52.09375 -14.359375 C 52.5625 -17.617188 53.078125 -20.804688 53.640625 -23.921875 C 54.210938 -27.035156 54.734375 -29.675781 55.203125 -31.84375 L 57.609375 -42.890625 C 58.085938 -44.773438 58.703125 -47.488281 59.453125 -51.03125 C 60.210938 -54.570312 60.59375 -57.851562 60.59375 -60.875 C 60.59375 -62.757812 60.351562 -64.597656 59.875 -66.390625 C 59.40625 -68.179688 58.53125 -69.644531 57.25 -70.78125 C 55.976562 -71.914062 54.070312 -72.484375 51.53125 -72.484375 C 48.976562 -72.484375 46.519531 -71.609375 44.15625 -69.859375 C 41.800781 -68.109375 39.632812 -66.003906 37.65625 -63.546875 C 35.675781 -61.097656 34.070312 -58.738281 32.84375 -56.46875 C 31.613281 -54.207031 30.90625 -52.5625 30.71875 -51.53125 L 19.671875 0 L 6.515625 0 L 19.390625 -61.4375 C 19.671875 -62.757812 19.882812 -64.03125 20.03125 -65.25 C 20.175781 -66.476562 20.25 -67.332031 20.25 -67.8125 C 20.25 -70.644531 19.28125 -72.460938 17.34375 -73.265625 C 15.40625 -74.066406 13.066406 -74.46875 10.328125 -74.46875 L 9.203125 -74.46875 L 9.484375 -75.875 L 35.671875 -75.875 L 31.84375 -58.046875 L 32.140625 -58.046875 C 36.097656 -64.273438 40.175781 -69.015625 44.375 -72.265625 C 48.570312 -75.523438 53.457031 -77.15625 59.03125 -77.15625 C 64.601562 -77.15625 68.519531 -75.570312 70.78125 -72.40625 C 73.039062 -69.25 74.171875 -65.59375 74.171875 -61.4375 C 74.171875 -60.875 74.144531 -60.304688 74.09375 -59.734375 C 74.050781 -59.171875 73.984375 -58.609375 73.890625 -58.046875 L 74.171875 -58.046875 C 78.140625 -64.273438 82.242188 -69.015625 86.484375 -72.265625 C 90.734375 -75.523438 95.597656 -77.15625 101.078125 -77.15625 C 106.640625 -77.15625 110.550781 -75.570312 112.8125 -72.40625 C 115.082031 -69.25 116.21875 -65.59375 116.21875 -61.4375 C 116.21875 -59.082031 115.910156 -56.507812 115.296875 -53.71875 C 114.679688 -50.9375 114.140625 -48.316406 113.671875 -45.859375 L 110 -29.15625 C 109.425781 -26.519531 108.972656 -23.925781 108.640625 -21.375 C 108.316406 -18.820312 108.15625 -16.460938 108.15625 -14.296875 C 108.15625 -10.992188 108.695312 -8.445312 109.78125 -6.65625 C 110.863281 -4.863281 112.539062 -3.96875 114.8125 -3.96875 C 117.738281 -3.96875 120.804688 -5.238281 124.015625 -7.78125 L 124.71875 -6.65625 C 122.445312 -4.769531 119.921875 -2.953125 117.140625 -1.203125 C 114.359375 0.546875 111.128906 1.421875 107.453125 1.421875 Z M 107.453125 1.421875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(196.836298, 230.834414)"><g><path d="M 31.140625 -90.03125 C 29.253906 -90.03125 27.695312 -90.570312 26.46875 -91.65625 C 25.238281 -92.75 24.625 -94.566406 24.625 -97.109375 C 24.625 -100.222656 25.285156 -102.535156 26.609375 -104.046875 C 27.929688 -105.554688 29.628906 -106.3125 31.703125 -106.3125 C 33.597656 -106.3125 35.15625 -105.816406 36.375 -104.828125 C 37.601562 -103.835938 38.21875 -101.972656 38.21875 -99.234375 C 38.21875 -95.648438 37.460938 -93.21875 35.953125 -91.9375 C 34.441406 -90.664062 32.835938 -90.03125 31.140625 -90.03125 Z M 21.375 1.421875 C 17.601562 1.421875 14.703125 0.0507812 12.671875 -2.6875 C 10.640625 -5.425781 9.625 -8.921875 9.625 -13.171875 C 9.625 -15.148438 9.8125 -17.4375 10.1875 -20.03125 C 10.570312 -22.625 11 -25.171875 11.46875 -27.671875 C 11.9375 -30.171875 12.359375 -32.367188 12.734375 -34.265625 L 19.25 -64.828125 C 19.53125 -66.242188 19.671875 -67.472656 19.671875 -68.515625 C 19.671875 -71.066406 18.890625 -72.695312 17.328125 -73.40625 C 15.773438 -74.113281 13.679688 -74.46875 11.046875 -74.46875 L 9.203125 -74.46875 L 9.484375 -75.875 L 34.828125 -75.875 L 25.203125 -30.4375 C 25.015625 -29.394531 24.726562 -27.882812 24.34375 -25.90625 C 23.96875 -23.925781 23.660156 -21.894531 23.421875 -19.8125 C 23.191406 -17.738281 23.078125 -16.039062 23.078125 -14.71875 C 23.078125 -7.832031 25.101562 -4.390625 29.15625 -4.390625 C 31.238281 -4.390625 33.082031 -4.742188 34.6875 -5.453125 C 36.289062 -6.160156 37.941406 -7.078125 39.640625 -8.203125 L 40.484375 -7.078125 C 38.410156 -5.191406 35.578125 -3.300781 31.984375 -1.40625 C 28.398438 0.476562 24.863281 1.421875 21.375 1.421875 Z M 21.375 1.421875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(239.588171, 230.834414)"><g><path d="M 26.890625 1.421875 C 19.816406 1.421875 14.15625 0.00390625 10.90625 -2.828125 C 6.757812 -5.660156 4.625 -9.578125 4.625 -14.578125 C 4.625 -17.128906 5.210938 -19.0625 6.390625 -20.375 C 7.578125 -21.695312 8.925781 -22.617188 10.4375 -23.140625 C 11.945312 -23.660156 13.269531 -23.921875 14.40625 -23.921875 C 14.3125 -23.171875 14.238281 -22.394531 14.1875 -21.59375 C 14.144531 -20.789062 14.125 -20.054688 14.125 -19.390625 C 14.125 -14.015625 15.253906 -9.4375 17.515625 -5.65625 C 19.773438 -1.882812 23.457031 0 28.5625 0 C 33.5625 0 37.546875 -1.460938 40.515625 -4.390625 C 43.492188 -7.316406 44.984375 -11.328125 44.984375 -16.421875 C 44.984375 -20.765625 43.894531 -24.207031 41.71875 -26.75 C 39.550781 -29.300781 35.875 -31.753906 30.6875 -34.109375 C 25.488281 -36.566406 21.332031 -39.421875 18.21875 -42.671875 C 15.101562 -45.929688 13.546875 -50.394531 13.546875 -56.0625 C 13.546875 -62.101562 16 -67.128906 20.90625 -71.140625 C 25.8125 -75.148438 32.46875 -77.15625 40.875 -77.15625 C 46.0625 -77.15625 50.257812 -75.570312 53.46875 -71.882812 C 57.757812 -68.195312 59.90625 -61.875 59.90625 -52.890625 L 59.90625 -10.5625 C 59.90625 -7.164062 60.566406 -4.804688 61.890625 -3.484375 C 63.210938 -2.171875 65.476562 -1.515625 68.6875 -1.515625 L 69.109375 -1.515625 L 69.109375 0 L 47.734375 0 L 47.734375 -14.859375 L 47.453125 -14.859375 C 45.941406 -9.203125 43.273438 -5.070312 39.453125 -2.46875 C 35.628906 0.125 31.125 1.421875 26.890625 1.421875 Z M 29.71875 -0.5625 C 33.207031 -0.5625 36.296875 -1.457031 38.984375 -3.25 C 41.679688 -5.050781 43.785156 -7.457031 45.296875 -10.46875 C 46.804688 -13.488281 47.5625 -16.75 47.5625 -20.25 L 47.5625 -40.625 L 38.5 -40.203125 C 30.476562 -39.828125 24.929688 -37.988281 21.859375 -34.6875 C 18.796875 -31.382812 17.265625 -25.816406 17.265625 -17.984375 C 17.265625 -6.367188 21.414062 -0.5625 29.71875 -0.5625 Z M 29.71875 -0.5625 "/></g></g></g></svg> """
# Paper plane SVG icon for send button
paper_plane_svg = """<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 2L11 13"/>
  <path d="M22 2L15 22L11 13L2 9L22 2Z"/>
</svg>"""

wrapper = HfModelWrapper()


# Mock data function for chatbot
def send_message(message, history):
    #if not message:
    #    return history
    history.append({"role": "user", "content": message})
    #history.append({"role": "assistant", "content": f"This is a response about: {message}"})
    #return history
    response_generator = wrapper.generate(message, history)
    partial = ""
    for t in response_generator:
        partial += t
        yield history + [{"role": "assistant", "content": partial}]    
    

# Create the dashboard
with gr.Blocks(theme=ArtemisiaTheme(), css=custom_css) as demo:
        # Header
    with gr.Row(elem_classes="header"):
        with gr.Row(elem_classes="logo-container"):
            gr.HTML(stc_logo_svg, elem_classes="stc-logo")
            gr.HTML('<div class="nav-divider"></div>', elem_classes="divider")
            gr.HTML(artemsia_logo_svg, elem_classes="stc-logo")
        gr.Markdown("# Risk Insights Dashboard", elem_classes="dashboard-title")



    # Main content area
    with gr.Row(elem_classes="main-content"):
        # Chat column
        with gr.Column(scale=1, elem_classes="chat-container"):
            with gr.Column(elem_classes="section-header"):
                gr.Markdown("## Chat Interface")
                gr.Markdown("Query your Archer risk data here or ask questions for valuable insights.")
            with gr.Column(elem_classes="chat-content"):
                chatbot = gr.Chatbot(value=[
                    {"role": "assistant", "content": "Welcome to Risk Insights. How can I help you analyze your risk data today?"}
                ], 
                type='messages',
                elem_classes="chat-messages",
                layout="bubble",            
                bubble_full_width=False)     
                with gr.Row(elem_classes="chat-input-container"):
                    chat_input = gr.Textbox(placeholder="Ask about stc Group's risk data", elem_classes="chat-input", label="", scale=1)
                    send_button = gr.Button(value="→", elem_classes="send-button", scale=0)

        # Results column
        with gr.Column(scale=1, elem_classes="results-container"):
            with gr.Column(elem_classes="section-header"):
                gr.Markdown("## Results & Insights")
                gr.Markdown("Visualizations and data from your queries")
            with gr.Column(elem_classes="results-content"):
                results_placeholder = gr.Markdown("Ask a question in the chat to analyze risk data and see insights here", elem_classes="placeholder-text")

    # Wire up the chat functionality
    send_button.click(
        fn=send_message,
        inputs=[chat_input, chatbot],
        outputs=[chatbot]
    ).then(lambda: "", None, chat_input)
    
    chat_input.submit(
        fn=send_message,
        inputs=[chat_input, chatbot],
        outputs=[chatbot]
    ).then(lambda: "", None, chat_input)

    # JavaScript for UI enhancements
    gr.HTML("""
    <script>
    // Replace the send button text with SVG icon
    document.addEventListener('DOMContentLoaded', function() {
        function updateSendButton() {
            const sendButtons = document.querySelectorAll('.send-button');
            if (sendButtons && sendButtons.length > 0) {
                sendButtons.forEach(button => {
                    button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"></path><path d="M22 2L15 22L11 13L2 9L22 2Z"></path></svg>`;
                });
                return true;
            }
            return false;
        }
        
        // Try immediately and then retry a few times to handle Gradio's dynamic loading
        let attempts = 0;
        const maxAttempts = 10;
        const checkInterval = setInterval(function() {
            if (updateSendButton() || attempts >= maxAttempts) {
                clearInterval(checkInterval);
            }
            attempts++;
        }, 500);
    });
    </script>
    """)

# Launch the app
#demo.launch(share=True)
if __name__ == "__main__":
    demo.launch()