Dash App — LLM Model Competition — Part1
Introduction
Model Competition is a fun application designed to evaluate and compare LLM (Large Language Model) models. LLM models have gained significant attention in recent years for their remarkable ability to generate human-like text and perform various language-related tasks. However, with the growing number of LLM models available, it becomes crucial to identify the most efficient and accurate model for specific tasks. This is where Model Competition comes into play, offering a dynamic and interactive platform for users to engage in friendly competitions and determine the top-performing LLM model.
Application Construct
The Model Competition application is structured to facilitate a timely assessment of LLM models. The following is an overview of the critical components and workflow of the application:
- Selection of Competitors: Users can begin by selecting the number of LLM models participating in the competition. This can range from two to 5 models, depending on the desired scope of the evaluation.
- Provide API Key: Users have to provide the API Key for the corresponding LLM model. So, if the user has selected model — got-3.5-turbo, then have to provide the API key of Openai.
- Competition Commences: With the tasks or questions users provide, the models compete against each other to provide the quickest response time. The application records the time taken by each model to generate a response for each task.
- Performance Evaluation: As the competition progresses, the application monitors and records the response times of each model for every task. It calculates the winner based on the lowest response time and upgrades the score of the model.
Part 1 will cover creating the initial landing page. We will use dash interval and CSS to create an animated heading and clientside callback to hide the heading after.
Part 2 will cover creating Competitor selecting Page and Api Key Register Page. We will use dash-mantine-components and plenty of callbacks.
Part 3 will focus on creating the Competition page. Again will use dash-mantine-components and plenty of callbacks.
Let’s Build
Step 1 - Import all the required Library:-
- Dash, which provides a powerful framework for building web applications in Python.
- Dash-Mantine-Component, which offers a variety of components from Mantine React Library.
- Dash Iconify, offers a variety of icons that can be added to the navbar.
- Jupyterdash, which allows us to create a dash app directly from a jupyter notebook.
import dash
from dash import Output, Input, State, html
import dash_mantine_components as dmc
from jupyter_dash import JupyterDash
from dash_iconify import DashIconifyStep 2 - Before creating an app layout, it’s important to first create a skeleton app using the Dash framework. This involves initializing the app, creating the layout, and running the server.
app = JupyterDash(__name__)
app.layout = html.Div(
style={'backgroundColor':'#fff'},
children=[
# will add corresponding layout here.
]
)
app.run_server(port=8050)Step 3 Create the layout that will contain all components required for the app. We will create a dmc.Containerwith Max width lg and Max Height 100vh . So that for the larger screen, it will not take the whole width but can take the whole height.
Will use dmc.Stackto stack(as the name suggest) components vertically one below another and should be horizontally centred so align = “center” .
dmc.Container(
id='conpetition-setup-p8',
style={'backgroundColor':'whitesmoke', 'minHeight':'100vh'},
px=0,
size='lg',
children=[
dmc.Stack(
id='hero',
align='center',
children=[
# will add corresponding layout here.
]
)
]
)Step 4 Will create a header to add details regarding the App name and Creator details. Can use dmc.Header but instead of that, used dmc.Paper . The main reason is the shadow effect which one can get easily in the paper component.
dmc.Paper(
px=20,
p=10,
mt=0,
w='100%',
shadow="sm",
mx=-2,
style={"backgroundColor": '#f1faee'},
children=[
dmc.Group(
position='apart',
children=[
dmc.Text( id='header-text-p8', align='center', color='', weight=700),
dmc.Group(
spacing='xs',
position='right',
children=[
dmc.Text(
align='center',
color="#033546",
weight=700,
children=['Created By ',
dmc.Anchor("Abhinav Kumar",href="http://www.linkedin.com/in/abhinavk910",
target="_blank", style={'textDecoration': 'none', 'color':"#457b9d"})
],
),
html.A(dmc.Avatar(src='/assets/header.jpg',size="xs",radius="lg"),
href="https://abhinavk910.github.io/portfolio/",target="_blank",
),
html.A(dmc.Avatar(DashIconify(icon="mdi:linkedin", width=15, color="#a8dadc"),
size="xs",radius="xs"), href="http://www.linkedin.com/in/abhinavk910", target="_blank",
),
html.A(dmc.Avatar(DashIconify(icon="mdi:github", width=15, color="#a8dadc"),#'#24292f'
size="xs",radius="xs"), href="https://github.com/Abhinavk910/Data-Visualization/tree/main/apps/Makeover_Mondays",
target="_blank",
)
]
)
]
),
]
),
In the above dmc.Text component with id header-text-p8 is kept blank, which will be populated using a callback.
Step 5 Next will create a header for the application name and Producer/director name. Will also add animation to this header by adding CSS code separately.
html.Div(
hidden=False,
id='html-div-to-hide',
children=[
html.H1(
style={'fontSize':'4rem'},
children=[
'Model Competition',
html.Span(className='start'),
html.Span(className='reverse')
],
),
html.H1(
style={'fontSize':'.9rem', 'margin':'0px'},
children=[
'Director and Producer : Abhinav Kumar',
html.Span(className='start'),
html.Span(className='reverse')
],
)
]
),
#hero h1 {
display: block;
width: fit-content;
position: relative;
color: transparent;
animation: text_reveal 1s ease forwards;
animation-delay: 1s;
}
#hero h1:nth-child(1) {
animation-delay: 1s;
}
#hero h1:nth-child(2) {
animation-delay: 2s;
}
#hero h1 .start {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #a8dadc;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
#hero h1:nth-child(1) .start{
animation-delay: .5s;
}
#hero h1:nth-child(2) .start{
animation-delay: 1.5s;
}
#hero h1 .reverse {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #a8dadc;
animation: text_reveal_box 1s ease;
animation-delay: 5s;
}
#hero h1:nth-child(1) .reverse {
animation-delay: 6s;
}
#hero h1:nth-child(2) .reverse {
animation-delay: 7s;
}
/* Keyframes */
@keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
@keyframes text_reveal {
100% {
color: #457b9d;
}
}
@keyframes text_reveal_name {
100% {
color: transparent;
}
}
/* End Keyframes */
Step 6 Now after this animation we want to hide the header and populate the dmc.Text in dmc.Paper with the app name. For this, we will use dcc.Interval that will trigger after the ending of the amination. We will use clientside callback for this so that will it work smoothly.
#will add this dcc.Interval under dmc.Stack children
dcc.Interval(id='interval1-p8',
interval=9*1000,
n_intervals=0,
max_intervals=1,
disabled=False),
#CB 0: Handling interval and animation
dash.clientside_callback(
"""
function update(n) {
if (n == 1) {
return [true, "Model Competition"]
}
}
""",
Output("html-div-to-hide", "hidden"),
Output('header-text-p8', 'children'),
Input("interval1-p8", "n_intervals"),
prevent_initial_call=True,
)
Well, that’s all with part 1, we have started with initializing the app layout, creating a header, adding some animation and ending with a callback.
Conclusion
Model Competition is a fun application that evaluates and compares LLM models. By enabling users to engage in friendly competitions and assess the speed and accuracy of different models, it empowers them to make informed decisions and select the most suitable LLM model for their specific tasks.
Stay tuned for the next episode where we’ll add a competitor and competition layout.
One can view the above final visualization by visiting the following link and GitHub code here. I hope you’ve found this guide informative and helpful in creating a visually appealing dashboard with Dash.
Please feel free to leave a comment below. Any suggestions or questions will help us improve future content and better serve your needs. Thank you for reading and a clap will not hurt, isn’t it?
