src/ui/interface.py

#
# SPDX-FileCopyrightText: Hadad <[email protected]>
# SPDX-License-Identifier: Apache-2.0
#

import gradio as gr  # Import the Gradio library to build interactive web interfaces for machine learning applications
from src.core.parameter import parameters  # Import the 'parameters' function from the core parameter module, which returns model parameter settings based on reasoning mode
from src.client.chat_handler import respond  # Import the 'respond' function from the chat handler module, responsible for generating AI assistant responses
from config import model, meta_tags  # Import 'model' dictionary containing available model precision options and their details, and 'meta_tags' containing HTML meta tag data

# Gradio
def ui():
    """
    Constructs the Gradio user interface for the J.A.R.V.I.S. AI assistant application.

    This function sets up a web app with a sidebar for configuring model parameters and a main chat interface
    for user interaction. It returns the Gradio Blocks object representing the entire app.
    """
    # Create a Gradio Blocks container that fills the entire available height and width of the browser window
    with gr.Blocks(fill_height=True, fill_width=True, head=meta_tags) as app:
        # Create a sidebar panel on the left side, initially closed, to hold model configuration controls
        with gr.Sidebar(open=False):
            # Dropdown menu for selecting the model precision from the keys of the 'model' dictionary
            model_precision = gr.Dropdown(
                choices=list(model.keys()),  # List of available model precision options, e.g., "F16", "F32"
                label="Model Precision",  # Label displayed above the dropdown menu
                info=(
                    # Tooltip explaining the tradeoff between speed and accuracy based on precision choice
                    "The smaller the value, the faster the response but less accurate. "
                    "Conversely, the larger the value, the response is slower but more accurate."
                ),
                value="F16"  # Default selected precision value
            )

            # Checkbox to enable or disable reasoning mode, which toggles the AI's "thinking" capability
            reasoning = gr.Checkbox(
                label="Reasoning",  # Label shown next to the checkbox
                info="Switching between thinking and non-thinking mode.",  # Tooltip describing the feature
                value=True  # Default state is enabled (checked)
            )

            # Slider controlling the 'Temperature' parameter, affecting randomness in AI responses, initially non-interactive
            temperature = gr.Slider(
                minimum=0.0,  # Minimum slider value
                maximum=2.0,  # Maximum slider value
                step=0.01,  # Increment step size
                label="Temperature",  # Label for the slider
                interactive=False  # User cannot directly adjust this slider, updated dynamically
            )

            # Slider controlling the 'Top K' parameter, which limits the number of highest probability tokens considered, non-interactive initially
            top_k = gr.Slider(
                minimum=0,
                maximum=100,
                step=1,
                label="Top K",
                interactive=False
            )

            # Slider for 'Min P' parameter, representing minimum cumulative probability threshold, non-interactive initially
            min_p = gr.Slider(
                minimum=0.0,
                maximum=1.0,
                step=0.01,
                label="Min P",
                interactive=False
            )

            # Slider for 'Top P' parameter, controlling nucleus sampling probability, non-interactive initially
            top_p = gr.Slider(
                minimum=0.0,
                maximum=1.0,
                step=0.01,
                label="Top P",
                interactive=False
            )

            # Slider for 'Repetition Penalty' parameter to reduce repetitive text generation, non-interactive initially
            repetition_penalty = gr.Slider(
                minimum=0.1,
                maximum=2.0,
                step=0.01,
                label="Repetition Penalty",
                interactive=False
            )

            # Define a function to update the model parameter sliders based on the reasoning checkbox state
            def update_parameters(switching):
                """
                Retrieve updated model parameter values based on reasoning mode.

                Args:
                    switching (bool): Current state of the reasoning checkbox.

                Returns:
                    tuple: Updated values for temperature, top_k, min_p, top_p, and repetition_penalty sliders.
                """
                # Call the 'parameters' function passing the reasoning state to get new parameter values
                return parameters(switching)

            # Set up an event listener to update parameter sliders when the reasoning checkbox state changes
            reasoning.change(
                fn=update_parameters,  # Function to call on checkbox state change
                inputs=[reasoning],  # Input is the reasoning checkbox's current value
                outputs=[temperature, top_k, min_p, top_p, repetition_penalty]  # Update these sliders with new values
            )

            # Initialize the parameter sliders with values corresponding to the default reasoning checkbox state
            values = parameters(reasoning.value)
            temperature.value, top_k.value, min_p.value, top_p.value, repetition_penalty.value = values

            # Checkbox to enable or disable the image generation feature in the chat interface
            image_generation = gr.Checkbox(
                label="Image Generation",  # Label displayed next to the checkbox
                info=(
                    # Tooltip explaining how to trigger image generation via chat commands
                    "Type <i><b>/image</b></i> followed by the instructions to start generating an image."
                ),
                value=True  # Enabled by default
            )

            # Checkbox to enable or disable the audio generation feature in the chat interface
            audio_generation = gr.Checkbox(
                label="Audio Generation",
                info=(
                    "Type <i><b>/audio</b></i> followed by the instructions to start generating audio."
                ),
                value=True
            )

            # Checkbox to enable or disable the deep web search feature in the chat interface
            search_generation = gr.Checkbox(
                label="Deep Search",
                info=(
                    "Type <i><b>/dp</b></i> followed by the instructions to search the web."
                ),
                value=True
            )

        # Create the main chat interface where users interact with the AI assistant
        gr.ChatInterface(
            fn=respond,  # Function called to generate responses to user inputs
            additional_inputs=[
                # Pass the current states of all configuration controls as additional inputs to the respond function
                model_precision,
                temperature,
                top_k,
                min_p,
                top_p,
                repetition_penalty,
                reasoning,
                image_generation,
                audio_generation,
                search_generation
            ],
            type='tuples', #  The format of the messages
            chatbot=gr.Chatbot(
                label="J.A.R.V.I.S.",   # Title label displayed above the chat window
                show_copy_button=True,  # Show a button allowing users to copy chat messages
                scale=1,  # Scale factor for the chatbot UI size
                type='tuples' # Duplicate form Chat Interface to Chatbot
            ),
            examples=[
                # Predefined example inputs to help users quickly test the assistant's features
                ["Please introduce yourself."],
                ["/audio Could you explain what Artificial Intelligence (AI) is?"],
                ["/audio What is Hugging Face?"],
                ["/dp Please search for the J.A.R.V.I.S. AI model on Hugging Face."],
                ["/dp What is the capital city of Indonesia?"],
                ["/image Create an image of a futuristic city."],
                ["/image Create a cartoon-style image of a man."],
                ["What day is it today, what's the date, and what time is it?"],
                ['/audio Say "I am J.A.R.V.I.S.".'],
                ["Please generate a highly complex code snippet on any topic."],
                ["Explain about quantum computers."]
            ],
            cache_examples=False,  # Disable caching of example outputs to always generate fresh responses
            multimodal=False,      # Disable support for multimodal inputs such as images or audio files
            fill_height=True,      # Duplicate from Blocks to Chat Interface
            fill_width=True,       # Duplicate from Blocks to Chat Interface
            head=meta_tags         # Duplicate from Blocks to Chat Interface
        )
    # Return the complete Gradio app object for launching or embedding
    return app