Demo Upload - First Commit

README.md

@@ -7,7 +7,11 @@ sdk: gradio
 sdk_version: 4.38.1
 app_file: app.py
 pinned: false
-license: cc-by-nc-sa-4.0
+license: other
 ---
 
+All rights reserved to Traceflow Ltd.
+Visit https://blankstate.ai
+Contact us contact@blankstate.ai
+
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -1,7 +1,372 @@
 import gradio as gr
+import time
+import random
+import os
+import base64
+import json
+import requests
+import redis
 
-def greet(name):
-    return "Hello " + name + "!!"
+#from huggingface_hub import login
 
-demo = gr.Interface(fn=greet, inputs="text", outputs="text")
-demo.launch()
+# Global variables
+picked_blueprint_js = None
+protocol_scores = {}
+protocol_markdown = None
+DEFAULT_BLUEPRINT_INDEX = 0
+DEFAULT_CONVERSATION_TYPE = "Banking"
+
+HF_TOKEN = os.environ.get('PRIVATE_TOKEN')
+
+COGN_API_URL = os.environ.get('BLANK_API_ENDPOINT')
+
+headers = {
+    "Authorization": f"Bearer {HF_TOKEN}",
+    "Content-Type": "application/json",
+}
+
+R_PWD = os.environ['REDIS_CRED']
+R_HOST = os.environ['REDIS_HOST']
+r = redis.Redis(
+  host=R_HOST,
+  port=13508,
+  password=R_PWD)
+
+# Predefined conversation examples
+conversations = {
+    "Banking": [
+        ("Banker", "Hello, welcome to our bank. How may I assist you today?"),
+        ("Client", "Good afternoon, I am looking to apply for a personal loan to cover some unexpected expenses."),
+        ("Banker", "Certainly, can you please provide us with some details about your income, expenses, and the amount you are looking to borrow?"),
+        ("Client", "Yes, my monthly income is around $4,500, and my expenses are roughly $3,500. I'm looking to borrow $5,000 for a period of 2 years."),
+        ("Banker", "Based on your income and expenses, we can offer you a loan with an interest rate of 5.5% per annum, with monthly repayments of $272. Would that be acceptable to you?"),
+        ("Client", "Yes, that's reasonable. Can you please provide me with the necessary paperwork to complete the application process?"),
+        ("Banker", "Absolutely, I will have a loan application form for you to fill out, as well as some documents to verify your income and identity. Once we have all the required information, we can process your loan application and get back to you as soon as possible."),
+        ("Client", "Thank you very much, I appreciate your help. I look forward to doing business with your bank."),
+        ("Banker", "It's been my pleasure, and we're confident that we can provide you with the financial solutions you need. Don't hesitate to reach out if you have any further questions or concerns."),
+        ("Client", "Thank you, I'll be in touch. Goodbye for now."),
+        ("Banker", "Goodbye, have a great day!")
+    ],
+    "Unhappy Customer": [
+        ("Customer Service", "Thank you for contacting customer service. I understand you're having an issue. Could you please explain what's wrong?"),
+        ("Customer", "I'm very unhappy with the service I received. My order arrived damaged and the support I received was not helpful."),
+        ("Customer Service", "I'm really sorry to hear that. Could you provide me with your order number so I can look into this for you?"),
+        ("Customer", "Sure, it's 12345."),
+        ("Customer Service", "Thank you. I'll check the details and see what we can do to resolve this issue for you."),
+        ("Customer", "Thank you."),
+        ("Customer Service", "I've checked your order and see the issue. We'll send you a replacement immediately and offer a discount on your next purchase."),
+        ("Customer", "I appreciate that. Thank you for your help."),
+        ("Customer Service", "You're welcome. Is there anything else I can assist you with?"),
+        ("Customer", "No, that's all. Thank you."),
+        ("Customer Service", "Have a great day!")
+    ],
+    "Internal": [
+        ("Employee 1", "Hey colleague, do you have a minute to discuss the new project?"),
+        ("Employee 2", "Sure, what's up?"),
+        ("Employee 1", "I think we need to re-evaluate our timeline. The client has requested some changes that will impact our deadlines."),
+        ("Employee 2", "I agree. Let's set up a meeting with the team to discuss the adjustments and update our schedule."),
+        ("Employee 1", "Sounds good. I'll send out a meeting invite for tomorrow."),
+        ("Employee 2", "Great, thanks for coordinating this."),
+        ("Employee 1", "No problem. See you at the meeting."),
+        ("Employee 2", "See you!")
+    ]
+}
+
+# Load blueprints and protocols
+def load_blueprints_and_protocols():
+    try:
+        data = r.json().get("bp_patterns_seeker") 
+    except redis.exceptions.ResponseError as e:
+        return ("Error:", e)
+    
+    
+    
+    blueprints = [blueprint["name"] for blueprint in data["blueprints"]]
+    protocols = {blueprint["name"]: {ptype: [] for ptype in ["CT", "GS", "GP", "P", "M"]} for blueprint in data["blueprints"]}
+    default_protocols = {}
+
+    for blueprint in data["blueprints"]:
+        for metamarker in blueprint["metamarkers"]:
+            protocol_type = metamarker.get("Type")
+            if protocol_type in protocols[blueprint["name"]]:
+                protocol_name = list(metamarker.keys())[0]
+                protocols[blueprint["name"]][protocol_type].append(protocol_name)
+                
+                if blueprints.index(blueprint["name"]) == DEFAULT_BLUEPRINT_INDEX:
+                    if protocol_type not in default_protocols:
+                        default_protocols[protocol_type] = []
+                    default_protocols[protocol_type].append(protocol_name)
+
+    return blueprints, protocols, data, default_protocols 
+
+blueprints, protocols, data, default_protocols = load_blueprints_and_protocols()
+
+# Initialize protocol_scores
+def initialize_scores():
+    global protocol_scores
+    protocol_scores = {protocol: 0 for blueprint in protocols 
+                       for category in protocols[blueprint] 
+                       for protocol in protocols[blueprint][category]}
+
+initialize_scores()
+
+# Initialize picked_blueprint_js with the default blueprint
+picked_blueprint_js = data["blueprints"][DEFAULT_BLUEPRINT_INDEX]
+
+def update_scores(message):
+    global protocol_scores, picked_blueprint_js
+
+    details = True
+    local = True
+
+    blueprint = picked_blueprint_js
+    print(f"Blueprint to API:", blueprint)
+
+    payload = {
+        "inputs": message,
+        "blueprint": [blueprint, 'BlueprintScore'],
+        "parameters": [{"details": details}, {"local": local}]
+    }
+
+    try:
+        response = requests.post(COGN_API_URL, headers=headers, json=payload)
+        
+        if response.status_code == 200:
+            api_data = response.json()
+            
+            if 'mw_score' in api_data[1]:
+                for protocol, score in api_data[1]['mw_score'].items():
+                    if protocol in protocol_scores:
+                        protocol_scores[protocol] = int(score * 100)
+                    else:
+                        print(f"Protocol '{protocol}' not found in protocol_scores")
+        else:
+            print(f"API request failed with status code {response.status_code}")
+            return {"error": "API request failed"}
+
+    except Exception as e:
+        print(f"API request failed: {str(e)}")
+        return {"error": "API request failed"}
+
+    return {"success": "Protocol scores updated successfully"}
+
+def update_protocols(blueprint_name):
+    global protocol_scores, picked_blueprint_js
+    
+    # Find the correct blueprint object
+    for blueprint in data["blueprints"]:
+        if blueprint["name"] == blueprint_name:
+            picked_blueprint_js = blueprint
+            break
+    
+    if blueprint_name not in protocols:
+        return gr.update(value="")
+    
+    css = """
+    <style>
+    .protocol-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        width: 100%;
+    }
+    .protocol-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+        flex-shrink: 0;
+    }
+    .protocol-details {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        margin-right: 20px;
+    }
+    .protocol-name {
+        font-weight: bold;
+        margin-right: 10px;
+    }
+    .protocol-score {
+        font-size: 0.9em;
+        color: #666;
+    }
+    .progress-container {
+        width: 40px;
+        height: 40px;
+        position: relative;
+        flex-shrink: 0;
+    }
+    .progress-bar {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: conic-gradient(#0014FF calc(var(--value) * 3.6deg), #ddd 0deg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .progress-bar::before {
+        content: "";
+        position: absolute;
+        inset: 5px;
+        background: white;
+        border-radius: 50%;
+    }
+    .progress-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 12px;
+        color: #333;
+    }
+    </style>
+    """
+    html_output = css
+    for title, categories in [("Advice", ["CT", "GP", "GS"]), ("Compliance", ["P"]), ("Insight", ["M"])]:
+        all_protocols = [(category, protocol) for category in categories for protocol in protocols[blueprint_name].get(category, [])]
+        if all_protocols:
+            html_output += f"<h3>{title}</h3>"
+            for category, protocol in all_protocols:
+                score = protocol_scores[protocol]
+                icon = load_svg_icon(category)
+                html_output += f'''
+                <div class="protocol-item">
+                    <img src="{icon}" alt="{category}" class="protocol-icon" />
+                    <div class="protocol-details">
+                        <span class="protocol-name">{protocol}</span>
+                    </div>
+                    <div class="progress-container">
+                        <div class="progress-bar" style="--value:{score};"></div>
+                        <div class="progress-text">{score}</div>
+                    </div>
+                </div>
+                '''
+    return gr.update(value=html_output)
+
+def load_svg_icon(icon_type):
+    icon_cache = {}
+    if icon_type in icon_cache:
+        return icon_cache[icon_type]
+    icon_path = os.path.join("icons", f"{icon_type}.svg")
+    if os.path.exists(icon_path):
+        with open(icon_path, "rb") as f:
+            svg_content = f.read()
+            base64_icon = base64.b64encode(svg_content).decode("utf-8")
+            icon_cache[icon_type] = f'data:image/svg+xml;base64,{base64_icon}'
+            return icon_cache[icon_type]
+    return ""
+
+def create_app():
+    global protocol_markdown, picked_blueprint_js
+    blueprints, protocols, data, default_protocols = load_blueprints_and_protocols()
+    initialize_scores()
+    picked_blueprint_js = data["blueprints"][DEFAULT_BLUEPRINT_INDEX]
+
+    is_running = False
+    history = []
+    conversation = []
+    message_index = 0
+
+    with gr.Blocks(theme=gr.themes.Base(), css="style.css") as app:
+
+        with gr.Row():
+            with gr.Column(scale=3):
+                blueprint_radio = gr.Radio(label="", choices=blueprints, type="index", value=DEFAULT_BLUEPRINT_INDEX, elem_classes="gr-radio-row")
+                protocol_markdown = gr.HTML(label="Associated Protocols:", value="")
+            with gr.Column(scale=0.1):
+                gr.HTML("")
+            with gr.Column(scale=3):
+                conversation_type = gr.Radio(choices=list(conversations.keys()), label="", value=DEFAULT_CONVERSATION_TYPE, elem_classes="gr-radio-row")
+                chat_display = gr.HTML()
+                with gr.Row():
+                    start_button = gr.Button("▶")
+                    pause_button = gr.Button("Pause")
+                    resume_button = gr.Button("Resume")
+                    stop_button = gr.Button("Stop")
+                num_messages = gr.Slider(minimum=2, maximum=20, value=10, step=1, label="Number of messages", visible=False)
+
+        # Helper functions to update chat and protocols 
+        def conversation_type_change_handler(conversation_type):
+            stop_conversation()
+            return ""
+
+        def blueprint_change_handler(selected_index):
+            global picked_blueprint_js
+            blueprint_name = blueprints[selected_index]
+            return update_protocols(blueprint_name)
+
+        # Logic to handle the conversation loop
+        def run_conversation(conversation_type, num_messages):
+            nonlocal is_running, history, conversation, message_index
+
+            is_running = True  # Start running the conversation
+            history = []
+            conversation = conversations[conversation_type][:num_messages]
+            message_index = 0
+
+            while is_running and message_index < len(conversation):
+                speaker, message = conversation[message_index]
+                history.append((speaker, message))
+                update_scores(message)
+                updated_protocols = update_protocols(picked_blueprint_js["name"])
+                message_index += 1
+                yield generate_chat_html(), updated_protocols
+                time.sleep(0.5)  # Introduce a slight delay between messages
+
+            is_running = False  # Reset after conversation completes
+
+        def generate_chat_html():
+            nonlocal history
+            chat_html = "<div class='chat-container'>"
+            for speaker, message in history:
+                chat_html += f"<div class='message {speaker.lower().replace(' ', '-')}'>"
+                chat_html += f"<strong>{speaker}:</strong> {message}"
+                chat_html += "</div>"
+            chat_html += "</div>"
+            return chat_html
+
+        def pause_conversation():
+            nonlocal is_running
+            is_running = False
+            return generate_chat_html(), protocol_markdown.value
+
+        def resume_conversation():
+            nonlocal is_running
+            if not is_running:
+                is_running = True
+                return generate_chat_html(), protocol_markdown.value
+
+        def stop_conversation():
+            nonlocal is_running, history
+            is_running = False
+            history = []
+            return "", protocol_markdown.value
+ 
+        # Gradio elements and events
+        blueprint_radio.change(
+            blueprint_change_handler,
+            inputs=[blueprint_radio],
+            outputs=[protocol_markdown]
+        )
+        conversation_type.change(
+            conversation_type_change_handler,
+            inputs=[conversation_type],
+            outputs=[chat_display]
+        )
+
+        start_button.click(
+            run_conversation, 
+            inputs=[conversation_type, num_messages],
+            outputs=[chat_display, protocol_markdown]
+        )
+
+        pause_button.click(pause_conversation, outputs=[chat_display, protocol_markdown])
+        resume_button.click(resume_conversation, outputs=[chat_display, protocol_markdown])
+        stop_button.click(stop_conversation, outputs=[chat_display, protocol_markdown])
+
+    return app
+
+if __name__ == "__main__":
+    app = create_app()
+    app.launch()

requierements.txt

@@ -0,0 +1,2 @@
+#huggingface_hub==0.22.2
+redis==4.5.4

styles.css

@@ -0,0 +1,199 @@
+/* Import Poppins font */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+/* Apply Poppins font to all elements */
+* {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+/* Button Styles */
+button.svelte-cmf5ev {
+    background-color: #356EFF !important;
+    border-radius: 25px !important;
+    color: white !important;    
+}
+
+button.svelte-cmf5ev:hover {
+    background-color: #0010CC !important;
+}
+
+/* Radio Button Styles */
+.gr-radio-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 10px !important;
+}
+
+.gr-radio-row input[type="radio"] {
+    display: none !important;
+}
+
+.gr-radio-row label {
+    display: inline-block !important;
+    padding: 10px 20px !important;
+    background-color: #ffffff !important;
+    border: 2px solid #0010CC !important;
+    border-radius: 25px !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+}
+
+/* Hover State */
+.gr-radio-row label:hover {
+    background-color: #0010CC !important;
+    color: white !important;
+}
+
+.gr-radio-row input[type="radio"]:checked + label {
+    background-color: #0010CC !important;
+    border-color: #356EFF !important;
+    color: white !important; 
+}
+
+/* Existing styles */
+.gradio-group {
+    margin-bottom: 15px;
+}
+
+.gradio-slider {
+    width: 200px;
+}
+
+/* Protocol Display */
+div.protocol-item {
+    display: inline-flex !important;
+    align-items: center;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.protocol-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+    flex-shrink: 0;
+}
+
+.protocol-details {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    margin-right: 20px;
+}
+
+.protocol-name {
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.protocol-score {
+    font-size: 0.8em;
+    color: #666;
+}
+
+/* Circular Progress Bar */
+.progress-container {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: conic-gradient(#0014FF calc(var(--value) * 3.6deg), #ddd 0deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.progress-bar::before {
+    content: "";
+    position: absolute;
+    inset: 5px;
+    background: white;
+    border-radius: 50%;
+}
+
+.progress-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: #333;
+}
+
+/* Chat Container Styles */
+.chat-container {
+    height: 400px;
+    overflow-y: auto;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 15px;
+    margin-bottom: 20px;
+    background-color: #f9f9f9;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Ensure the chat section has an initial size */
+#chat_display {
+    min-height: 400px;
+    width: 100%;
+    display: block !important;
+}
+
+/* Message Styles */
+.message {
+    margin-bottom: 15px;
+    padding: 10px 15px;
+    border-radius: 18px;
+    max-width: 80%;
+    position: relative;
+    clear: both;
+}
+
+.banker, .customer-service, .employee-1 {
+    background-color: #E3F2FD;
+    color: #1565C0;
+    float: left;
+    border-bottom-left-radius: 5px;
+}
+
+.client, .customer, .employee-2 {
+    background-color: #E8EAF6;
+    color: #3F51B5;
+    float: right;
+    border-bottom-right-radius: 5px;
+}
+
+/* Add a subtle shadow to messages for depth */
+.message::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+}
+
+.banker::after, .customer-service::after, .employee-1::after {
+    left: -8px;
+    border-right-color: #E3F2FD;
+    border-bottom-color: #E3F2FD;
+}
+
+.client::after, .customer::after, .employee-2::after {
+    right: -8px;
+    border-left-color: #E8EAF6;
+    border-bottom-color: #E8EAF6;
+}
+
+/* Style for the sender's name */
+.message strong {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+}