# Import necessary libraries
import gradio as gr  # Gradio is used to create web interfaces for Python scripts.
from transformers import AutoConfig  # AutoConfig is from the Hugging Face Transformers library, used to create configuration for various models.import gradio as gr
import AutoTokenizer, AutoModelForCausalLM, AutoModel

# A list of model names to start with. These are names of popular models from the Hugging Face library.
model_list = ["bert-base-uncased", "google/switch-c-2048", "gpt2","mosaicml/mpt-30b", "distilbert-base-uncased,",""]

# Function to add a new model to the list.
def add_model_to_list(new_model):
    # Check if the new model is not already in the list and is not an empty string.
    if new_model and new_model not in model_list:
        model_list.append(new_model)  # Add the new model to the list.
    return model_list

# Function to create a configuration for the selected model.
def create_config(model_name, num_labels, use_cache):
    if isinstance(model_name, list):
        model_name = model_name[0]  # Take the first model name from the list if it's a list

    # Ensure num_labels is an integer
    num_labels = int(num_labels)

    # If the selected model is not in the list, add it (this is a safety check).
    if model_name not in model_list:
        model_list.append(model_name)

    # Create a configuration for the selected model using AutoConfig.
    config = AutoConfig.from_pretrained(model_name, num_labels=num_labels, use_cache='true')
    return str(config)  # Return the configuration as a string.

# Start building the Gradio interface
with gr.Group(elem_id="UI-conf"):
    custom_css = """
.gradio-container {
    background-color: #f0f0f0; /* Light grey background */
    font-family: Arial, sans-serif;
}
.gradio-textbox {
    border: 2px solid #4CAF50; /* Green border for textboxes */
    border-radius: 5px;
}
.gradio-button {
    background-color: #4CAF50; /* Green background for buttons */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.gradio-button:hover {
    background-color: #45a049; /* Darker green on hover */
}
"""

with gr.Blocks(css=custom_css) as demo:        
    gr.Markdown("## Config Class - Transformers")  # Display a title for the web interface.
    with gr.Row():  # Create a row in the interface to organize elements horizontally.
        # Dropdown menu to select a model.
        model_dropdown = gr.Dropdown(label="Select a Model", choices=model_list, value=model_list[0], allow_custom_value=True)
        # Textbox for users to input a new model name.
        new_model_input = gr.Textbox(label="Add a New Model", placeholder="Enter model name")
        # Button to add the new model to the dropdown list.
        add_model_button = gr.Button("Add Model")
    # Numeric input for the number of labels (used in the model configuration).
    num_labels_input = gr.Number(label="Number of Labels", value=2)
    # Checkbox for users to decide whether to use caching.
    use_cache_input = gr.Checkbox(label="Use Cache", value='true')
    # Textbox to display the generated configuration.
    output_area = gr.Textbox(label="Config Output",)
    # Button to create the configuration.
    submit_button = gr.Button("Create Config")

    # When the "Add Model" button is clicked, call `add_model_to_list` function.
    add_model_button.click(fn=add_model_to_list, inputs=new_model_input, outputs=model_dropdown)
    # When the "Create Config" button is clicked, call `create_config` function.
    submit_button.click(fn=create_config, inputs=[model_dropdown, num_labels_input, use_cache_input], outputs=output_area)

# Launch the Gradio interface.
    demo.launch()