Welcome to the Dash Club newsletter. Dash Club brings essays and updates about Plotly and Dash to your inbox every 8 weeks. Feedback, questions? Respond to this email.
Chris (@chriddyp) & Adam (@adamschroeder)
Prefer to view this on Medium? Check out the article.
In Dispatch #10
- Version Check
- Chris’ Reflections
- Dash-ChatGPT App Challenge
- Component of the Month
- Coming Soon in Dash
- App of the Month
- Example Apps Challenge Winners & June 7 Plotly Community Showcase
- Dash & Hiring & Writing
- Things Happen
—
Version Check
- Dash Enterprise Platform 5.1
- Dash Open Source Framework 2.10.2 (changelog)
- Plotly.py 5.14.1 (changelog)
- Plotly.js 2.23.2 (changelog)
Chris’ Reflections -
We’ve been having a ton of fun with ChatGPT and Dash lately.
ICYMI, check out Adam’s 9 min run down on creating a Dash app entirely from ChatGPT prompts.
ChatGPT was trained on tens of thousands of Plotly and Dash examples that we’ve written over a decade and it does a pretty damn good job. It still feels a bit bizarre having the machine tell you what you (indirectly) taught it. And to do so with such confidence!
For me personally it’s opening up new areas of programming that I’m excited to explore but wouldn’t otherwise have the time for. Things I’m familiar with but not an expert in. The AST library in the Python standard library, AWS Terraform templates, the VSCode keybindings syntax. And it’s been fun watching the others expand their horizons too, like Simon Wilson and ChatGPT digging into the obscure AppleScript language.
A few years ago I gave a Dash Workspace in NYC and a Dash Enterprise customer new to programming told me “I understand the code but I just struggle with the syntax.” That stuck with me. ChatGPT largely solves that problem. It’s going to open up Python, SQL, and data analysis to a vast new audience.
And that’s just on the development side of things. Dash integrates so easily with APIs and so it’s a perfect pair for ChatGPT. What will AI-enabled data apps look like? We’ve seen Object Detection for Self-Driving Cars, AI Speech Recognition, and AV Video Detection, and Dash GPT-3 Chatbot (GitHub code), apps that upload and summarize documents, augmented image analysis, auto-generated insights, and more.
This month’s community challenge is all about envisioning the future of AI-enabled apps. I’m excited to see what you (and your new AI assistants) come up with 
Dash-ChatGPT App Challenge
We challenge the community to build a Dash app that integrates the ChatGPT API into your app.
The winning apps will be judged according to the following categories:
- Depth of integration of ChatGPT API into the Dash app
- App UI/UX Design
- Data exploration and data analysis routines (e.g. numerical methods, machine learning, prediction, classification, optimization)
Please submit your app as a new post in the following forum topic. Please include a link to the app, code on GitHub, and a short description of the app.
Submission deadline is the end of the day, July 10.
For any questions, please email Adam at adam@plotly.com.
Tips:
- Create a ChatGPT API Key
- Live data usage stats of your API key
- Built-in examples of API model usage
- Explore models’ playground (click the green submit button, then click the “view code” button at the top right corner of the page
- Token and requests limitations of free API trials
- Avoid rate limit errors
- Keep security in mind, including prompt injection attacks
- Ideas for a few apps you can build:
- Dash app that summarizes data insights automatically
- Dash app that summarizes documents (upload a file with content and bot will summarize it)
- Dash app that incorporates a helper bot to write emails
- Dash app that has a translation bot (from uploaded files)
- Dash app that supports others to prepare for job interviews.
Dash-ChatGPT minimal app example:
import os
import openai # pip install openai
from dash import Dash,dcc, html, Input, Output, State # pip install dash
# Set up OpenAI API credentials
# Create .env file and insert your api key like so:
# OPENAI_API_KEY="your-key-goes-here"
openai.api_key = os.getenv("OPENAI_API_KEY") # pip install python-dotenv
# Initialize the ChatGPT model
model_engine = 'text-davinci-003'
# Instantiate the Dash app
app = Dash(__name__)
app.layout = html.Div([
html.H1("Dash-ChatGPT Example"),
dcc.Input(id='input-text', type='text', placeholder='Type your message here', style={'width':500}),
html.Button('Send', id='submit-button', n_clicks=0),
dcc.Loading(
children=[
html.Div(id='output-text')
],
type="circle",
)
])
# Define the callback function
@app.callback(
Output('output-text', 'children'),
Input('submit-button', 'n_clicks'),
State('input-text', 'value')
)
def update_output(n_clicks, input_text):
if n_clicks >0:
# Get the response from ChatGPT
response = openai.Completion.create(
engine=model_engine,
prompt=f"{input_text}\n",
max_tokens=4000,
n=1,
stop=None,
temperature=0.7,
)
# Extract the generated text from the response
generated_text = response.choices[0].text
# Return the generated text as the output
return generated_text
if __name__ == '__main__':
app.run_server(debug=True)
Dash-ChatGPT app example with streaming text:
- dash-streaming-GPT-app GitHub repo
- For this app to work after you clone it, make sure to create a .env file and insert your OpenAi API key.
Component of the Month
The dash-local-react-components library built by Tomasz makes it way easier to develop custom Dash components in React locally.
Our official custom component system (Dash Component Boilerplate) involves a build step to compile the React and JavaScript code. That step takes a few seconds, involves a dozen or so files, and is best developed in a separate folder from your Dash app.
Dash-local-react-components removes the boilerplate enabling you to add a custom React component to your Dash app with just a single file and an import step. No build step! The development is a lot faster and easier to incorporate into an existing app.
The implementation is a bit of a hack (I’m not sure I’d recommend it for production) but it’s great for development. I’ve been using it for my latest project and really enjoying the flow.
Thank you Tomasz for creating this library and sharing it with the Dash community.
Visit our community components index to see more components made by the community! And join our component-builder community by creating and sharing your own Community Components.
Coming Soon in Dash - JupyterDash in Dash, Shape formulas, Shape legends, and WebGL
If you want to work on Dash apps inside Jupyter, or Jupyter-derived environments like Google Colab, we currently make this possible via the separate package jupyter-dash.
In the next Dash release we’re planning to integrate this functionality directly into Dash. The app.run() will automatically detect that you’re in a notebook and display the app in the output cell, with options to change the cell size or display it elsewhere, such as a separate browser tab or jupyterlab tab. This will be both easier to use - no extra package to install, no new syntax unless you want to change its behavior - and easier for us to keep up-to-date with the rapidly-changing ecosystem of notebook environments.
In the Plotly graphing library, there are three new features on the way:
- Live formulas in shapes and annotations: Custom formulas in shapes update as you resize or drag the interactive line shapes. How awesome is this demo?!
There are a ton of awesome use cases for this feature: measuring the distances between defects in silicon wafers, technical analysis in financial trading, comparing the rate of change of growth. It’s built into the shapes, so you don’t need to write any custom callbacks and it’s super fast.
Our customer at Volkswagen’s Center of Excellence for Battery Systems sponsored this feature. Many thanks, VW!
-
Shapes in legends: if you use layout.shapes to add features to your graphs - highlight a region of interest, mark specific points in time or data values for example - you’ll soon be able to include these shapes in the legend, meaning they get a description as well as the ability to hide and show the shape with just a click.
-
Unlimited WebGL graphs: Many of Plotly’s high-performance or 3D graphs are drawn with WebGL, but browsers only allow a certain number of WebGL contexts to be drawn, which limits you to typically 4 or 5 WebGL graphs on a Dash app. We’re working on a way around this limit by automatically converting some WebGL graphs to static images, then bringing them back again when you next interact with them.
App of the Month
This Swiss Quality Coffee Equipment app created by Matteo is a great example of the flexibility of Dash.
It is styled as a report but with built-in tabs and interactive calculators. We loved the feature where we could calculate the carbon footprint of our individual machine usage.
Thank you Matteo for creating this app and submitting it to the Example Apps Challenge.
See more Dash apps or share your own in the Community Forum’s Show and Tell tag. If you would like your app to be considered for the next edition of the Dash Club newsletter, please message Adam on the Forum.
Example Apps Challenge Winners
Thank you all for participating in the Plotly Dash Example Apps Challenge. 25 apps were submitted by the community. And they are absolutely amazing!
Over the last couple of weeks, a group of Plotly staff judges reviewed each app and voted for the top three app winners. And the winners are…
Clinical Trial Risk Dash App, created by Thomas.
Funded by the Gates Foundation, this app implements Natural Language Processing and uses the spaCy and scikit-learn libraries to calculate the risk of a clinical trial failing.
Thomas’s app covers a unique topic not present in other apps with real-world impact.
SARIMA Tuner Dash App, created by Gabriele, with the following code.
Gabriele’s app is an interactive guide for working with time series data and fitting sARIMA models to make predictions. The app uses the Scikit-Learn, statsmodels, Pmdarima and the Cython libraries.
We love the app’s future wave design, its deep-dive into numerical methods, nicely designed visualizations, and the useful analytics that you don’t see every day. The app offers a friendly interactivity experience, and the home page is detailed and helpful in understanding how to interact with the app. Bonus points for adding the prediction page and publishing an accompanying Medium post.
Product Environmental Report Dash App, created by Matteo.
An exquisite usage of open source Dash to show the environmental impact of Thermoplan’s coffee machines in full transparency. The professional interface and report style are the main reason we also chose to highlight this app as Dash Club’s app of the month.
As an honorable mention, we would like to highlight Agah and Nadia and their Dash app that explores data submitted for global magnetic resonance imaging (MRI). Big thanks for open-sourcing the app’s code.
The winning community members will receive a package of this season’s Plotly swag as well as the financial awards.
Join us on June 7 to see these winning apps in action. This is a great opportunity to see just how much is possible with open source Dash.
Dash Writing & Hiring
We’re expanding our team at Plotly, and we love to hire experts from the community. We are currently looking for Software Engineers and Technical Product Managers to design, prototype, and build the next new features for Dash Open Source and Dash Enterprise, and Customer Success Engineers who work to deliver seamless product onboarding and support to our growing customer base.
Check out the job postings and send us a note if you found out about the position from Dash Club.
Customer Success Engineer (Solutions)
Customer Success Engineer (Infrastructure)
If you’re not looking for a full-time role, we are also looking for community authors for our blog. Please contact adam@plotly.com if you are interested in this opportunity (it’s paid!).
Things Happen
The latest stable version of Dash AG Grid 2.0.0 was just released.
Check out our newly written Dash AG Grid docs. These docs are amazing. There are over 180 examples across 80 pages. Thank you to Liam, Ann Marie, and Bryan for making this happen.
Dash Bootstrap Components just passed the 10 million downloads mark. Congratulations Tom!
Community member, Martin, just shared a demo on how to use the new styles prop of the Dash Mantine Select component.
Alex Johnson, Justin Boll, Sushen Dang, and Mingo Sanchez represented Plotly at ODSC East in Boston.
Plotly in Germany: Adam and Mathias had the pleasure of telling hundreds of people about Plotly at PyData Berlin.
Community member, Bruno, created the inspiring Plotly Calplot package. Check out the Forum post to learn more.
Ever wanted your tooltips to smoothly glide across your plots? Community member, Adam, shares the code.
Job postings from around the world looking for Dash skills.
Check out our recent video tutorial on Building a Python Dashboard with ChatGPT.
Plotly’s latest blog posts on transitioning from Excel to Python data apps.
Another noteworthy Dash App, by David, submitted to the Example Apps Challenge: Explore the DAO world.
Another noteworthy Dash App, by Ashwaghosh, submitted to the Example Apps Challenge: Monitoring the performance of a wholesale trader.
Community member and core community developer of Dash AG-Grid, Bryan, shared a tips-and-tricks post on Grouped Rows Rendering Selection Boxes to Leaf Nodes.
Celebrating our top contributing community members in April.
—
Have a great weekend –
Chris & Adam