User Interface

Gradio interface for the chat application.

Create the class for the User interface

A class that creates and manages a Gradio-based chat interface.

This class provides a web-based user interface for interacting with chat models. It handles the display of messages, streaming of responses, and various UI elements like buttons for sending messages, clearing chat history, and exporting conversations.

Attributes:

• app (BaseChatApp): The underlying chat application that handles message processing. It accepts an instance of the class BaseChatApp which is defined in the module app.py.
• interface (gr.Blocks, optional): The Gradio interface object once built.

The interface is built within this class with the build_interface method.

Import statement

from gradiochat.ui import *

---

GradioChat

 GradioChat (app:gradiochat.app.BaseChatApp)

Gradio interface for the chat application

Build the interface for the GradioChat class

Build and return the Gradio interface.

This method constructs the complete Gradio UI with all components including: - App title and logo - Chat display area - Message input field - Control buttons (Send, Clear) - Export functionality - System information display

The interface is configured according to the settings in the app’s config.

Returns: gr.Blocks: The constructed Gradio interface object.

Learned: @patch

This is a decorator used in nbdev to make it possible to spread the methods and properties of a class over multiple notebook cells. By using @patch and setting self:<classname> the nbdev style written code ‘knows’ to which class the method or property belongs.

---

GradioChat.build_interface

 GradioChat.build_interface ()

Build and return the Gradio interface

Method to launch the app that is instantiated from the class GradioChat

---

GradioChat.launch

 GradioChat.launch (**kwargs)

Launch the Gradio interface

Create chat app from the class GradioChat

Launch the Gradio interface.

This method builds the interface if it hasn’t been built yet and then launches the Gradio web server to make the interface accessible.

---

create_chat_app

 create_chat_app (config:gradiochat.config.ChatAppConfig)

Create a complete chat application from a configuration

	Type	Details
config	ChatAppConfig	Instance from the config.ChatAppConfig module
Returns	GradioChat

Example

Below is an example to create a simple chat UI wich follows more or less the styling confentions from Waterschap Drents Overijsselse Delta.

# Eval is false to prevent testing when nbdev_test or nbdev_prepare is run. The api_key is stored in a .env file and that is not accessible at test time.
themeWDODelta = gr.themes.Base(
    primary_hue=gr.themes.Color(c100="#ffedd5", c200="#ffddb3", c300="#fdba74", c400="#f29100", c50="#fff7ed", c500="#f97316", c600="#ea580c", c700="#c2410c", c800="#9a3412", c900="#7c2d12", c950="#6c2e12"),
    neutral_hue="slate",
    radius_size="sm",
    font=['VivalaSansRound', 'ui-sans-serif', 'system-ui', 'sans-serif'],
).set(
    embed_radius='*radius_xs',
    border_color_accent='*primary_400',
    border_color_accent_dark='*secondary_700',
    border_color_primary='*secondary_700',
    border_color_primary_dark='*secondary_700',
    color_accent='*primary_400',
    shadow_drop='*shadow_drop_lg',
    button_primary_background_fill='*primary_400',
    button_primary_background_fill_dark='*primary_400',
    button_primary_background_fill_hover='*secondary_700',
    button_primary_background_fill_hover_dark='*secondary_700',
    button_primary_border_color='*secondary_700',
    button_primary_border_color_dark='*secondary_700'
)

# Create a test configuration
test_config = ChatAppConfig(
    app_name="Job Description Assistant",
    description="Chat with an AI to create better job descriptions",
    system_prompt="You are an assistant that helps users create professional job descriptions. Ask questions to gather information about the position and responsibilities.",
    starter_prompt="Hello! I'm your job description assistant. Tell me about the position you'd like to create a description for.",
    model=ModelConfig(
        provider="togetherai",
        model_name="mistralai/Mistral-7B-Instruct-v0.3",
        api_key_env_var="TG_API_KEY"
    ),
    theme=themeWDODelta,
    logo_path=Path("../data/wdod_logo.svg")
)

# Create and launch the app
app = create_chat_app(test_config)
app.launch(share=False, # Set share=False if you don't want a public URL
        pwa=True # Set pwa=False if you don't want a progressive web app.
        )

---------------------------------------------------------------------------
NameError                                 Traceback (most recent call last)
Cell In[8], line 41
     39 # Create and launch the app
     40 app = create_chat_app(test_config)
---> 41 app.launch(share=False, # Set share=False if you don't want a public URL
     42         pwa=True # Set pwa=False if you don't want a progressive web app.
     43         )

Cell In[6], line 6, in launch(self, **kwargs)
      4 """Launch the Gradio interface"""
      5 if self.interface is None:
----> 6     self.build_interface()
      8 return self.interface.launch(**kwargs)

Cell In[5], line 67, in build_interface(self)
     62     with gr.Row():
     63         copy_btn = gr.Button("Copy to Clipboard")
     64         download_btn = gr.Button(
     65             "Download as Markdown",
     66             value="conversation.md",
---> 67             variant=secondary)
     69     file_output = gr.File(label="Download", visible=False)
     71 # System prompt and context viewer (collapsible)

NameError: name 'secondary' is not defined

Close all Gradio clients and ports

#gr.close_all()