Adding Language Toggle Options

Welcome to the second lesson of "Creating a User-Friendly Interface with Gradio"! In our previous session, you built the foundation for your code translator interface, setting up the basic input and output components with a mock translation function. Now, we’re ready to make our tool much more practical by adding language selection options. This step will transform your prototype into a flexible translator that can handle a variety of programming languages, making it far more useful in real-world scenarios.

To make language selection possible, we first need to decide which languages our translator will support. For prototyping purposes, we’ll create a list that we can use throughout our interface:

# List of languages our translator will support (for prototyping only)
SUPPORTED_LANGUAGES = [
    'python',
    'c',
    'cpp',
    'javascript',
    'typescript',
    'shell',
    'r'
]

By keeping all supported languages in a single list, we make it easy to update our options in the future. This approach also ensures consistency between the source and target language dropdowns, so users always see the same set of choices.

Note: In a real application, the list of supported languages should not be hardcoded in the frontend. Instead, it will be provided dynamically by the backend. We’ll cover how to fetch and use the actual list of supported languages from the backend in the next lesson.

Now, let’s add dropdown menus to our interface so users can pick their source and target languages. We’ll use Gradio’s layout components to keep things organized and user-friendly:

with gr.Row():
    # Code input editor on the left
    code_input = gr.Code(
        label="Input Code",
        language="python",  # Default syntax highlighting
        lines=10
    )
    # Language selection controls on the right
    with gr.Column():
        source_language = gr.Dropdown(
            choices=SUPPORTED_LANGUAGES,
            value="python",  # Default source language
            label="Source Language"
        )
        target_language = gr.Dropdown(
            choices=SUPPORTED_LANGUAGES,
            value="javascript",  # Default target language
            label="Target Language"
        )

In this code, we introduce a couple new Gradio component:

• gr.Row: This component arranges its children horizontally in a single row. It’s useful for placing related elements side by side, such as the code editor and the language controls.
• gr.Column: This component arranges its children vertically in a column. By nesting it inside a gr.Row, we can group the source and target language dropdowns together on the right side of the interface, stacked one above the other.
• gr.Dropdown: This component creates a dropdown menu that lets users select from a list of options. Here, we use it for both the source and target language selectors, setting their choices to the SUPPORTED_LANGUAGES list and providing default values.

This layout places the code editor on the left and the language controls on the right, creating a clear and logical flow. Users can easily enter their code and select the languages they want to work with, all in one place.

A great user experience means the interface responds to user choices in real time. One way to do this is by updating the syntax highlighting in the code editors based on the selected languages. Here’s how you can achieve that:

# Update output code editor's language when target language changes
def update_output_language(selected_lang):
    return gr.update(language=selected_lang.lower())

# Update input code editor's language when source language changes
def update_input_language(selected_lang):
    return gr.update(language=selected_lang.lower())

# Connect dropdown changes to the editors
target_language.change(
    update_output_language,
    inputs=target_language,
    outputs=translated_code
)
source_language.change(
    update_input_language,
    inputs=source_language,
    outputs=code_input
)

In this snippet:

• The update_output_language and update_input_language functions each take the selected language from their respective dropdowns and return a gr.update object. The gr.update function is a special Gradio utility that allows you to update properties of a component after it has been created. Here, we use it to set the language property of the code editor, which controls the syntax highlighting. By returning gr.update(language=selected_lang.lower()), we ensure that the code editor updates its syntax highlighting to match the newly selected language.

• The .change() method is used to set up an event listener on the dropdown components. When the value of the dropdown changes (i.e., when the user selects a different language), the specified function is called. The .change() method takes three main arguments:

  • The function to call when the value changes (e.g., update_output_language).
  • The input(s) to pass to the function (e.g., inputs=target_language).
  • The output(s) to update with the function’s return value (e.g., outputs=translated_code).

• For example, target_language.change(update_output_language, inputs=target_language, outputs=translated_code) means: whenever the user selects a new target language, call update_output_language with the new value, and update the translated_code editor’s language property accordingly.

• Similarly, source_language.change(update_input_language, inputs=source_language, outputs=code_input) ensures that the input code editor’s syntax highlighting updates when the source language changes.

This setup ensures that the syntax highlighting in both code editors always matches the user's language selections, making the interface more intuitive and reducing the chance of confusion or errors.

Now that users can select their target language, our translation function should reflect their choice. Let’s update the mock translation function to use the selected language:

def mock_translate(code, target_language):
    # If no code is entered, prompt the user
    if not code.strip():
        return "", "Please enter some code to translate."
    # Simulate translation by including the target language in the output
    return (
        f"// Translated to {target_language}\nconsole.log('Hello World!');",
        f"This is a simulated translation to {target_language}."
    )

And when connecting the button, make sure both the code and the selected target language are passed in:

translate_btn.click(
    mock_translate,
    inputs=[code_input, target_language],
    outputs=[translated_code, explanation]
)

This ensures that the output always matches the user’s selection, making the interface feel responsive and reliable.

You’ve just made your code translator interface much more versatile by adding language selection controls and dynamic syntax highlighting. These improvements not only make the tool more useful but also create a smoother, more engaging experience for your users.

In the next part of the course, you’ll continue to refine your interface by exploring advanced features and preparing to connect with your real translation backend. You'll also get the change to try out in practice everything you've learned in this lesson. Keep experimenting and thinking about how each new feature can make your application even more user-friendly!