HEADER_MD = """# Inference-time Alignment with Nudging.
[📑 Paper](https://arxiv.org/abs/2410.09300) | [🛜 Website](https://fywalter.github.io/nudging/) | [💻 GitHub](https://github.com/fywalter/nudging) | [🐦 X](https://x.com/Walter_Fei/status/1848538273917898753) | 📮 Contact: [Yu Fei](https://fywalter.github.io/)

**By injecting a few nudging tokens at inference time, we can make base models able to follow user instructions helpfully and safely.** 
- Our demo is powered by the [Together AI API](https://api.together.ai/). However, since only three base models are currently still available in the serverless API, we only choose three base models and nudging models for demonstration.
"""

js_code_label = """
function addApiKeyLink() {
    // Select the div with id 'api_key'
    const apiKeyDiv = document.getElementById('api_key');
    // Find the span within that div with data-testid 'block-info'
    const blockInfoSpan = apiKeyDiv.querySelector('span[data-testid="block-info"]');
    // Create the new link element
    const newLink = document.createElement('a');
    newLink.href = 'https://api.together.ai/settings/api-keys';
    newLink.textContent = ' View your keys here.';
    newLink.target = '_blank'; // Open link in new tab
    newLink.style = 'color: #007bff; text-decoration: underline;';
    // Create the additional text
    const additionalText = document.createTextNode(' (new account will have free credits to use.)');
    // Append the link and additional text to the span
    if (blockInfoSpan) {
        // add a br 
        apiKeyDiv.appendChild(document.createElement('br'));
        apiKeyDiv.appendChild(newLink);
        apiKeyDiv.appendChild(additionalText);
    } else {
        console.error('Span with data-testid "block-info" not found');
    }
}
"""

BASE_MODELS = [
    "Llama-2-70B",
    "Mistral-7B-v0.1",
    "Mixtral-8x7B-v0.1",
]

NUDGING_MODELS = [
    'Llama-2-13B-chat',
    'Gemma-2-2B-it',
    'Mistral-7B-v0.1-Instruct',
]


my_css = """
/* CSS for a link color that is visible on both black and white backgrounds */
a {
    color: #1E90FF; /* DodgerBlue */
    text-decoration: none; /* Optional: remove underline */
}
a:hover {
    color: #104E8B; /* Slightly darker blue for hover effect */
    text-decoration: underline; /* Optional: add underline on hover */
}
"""
# import json 
# with open("together_model_ids.json", "r") as f:
#     TOGETHER_MODEL_IDS = json.load(f)

# for _, model_id in MODEL_MAPPING.items():
#     if model_id not in TOGETHER_MODEL_IDS + HYPERBOLIC_MODELS:
#         print(model_id)

# Custom CSS for highlighting nudging words in the Chatbot
custom_css = """
.chatbot mark {
    background-color: yellow;
    color: orange;
    font-style: italic;
    font-weight: bold;
}
"""