Set the API key environment variable
WRITER_API_KEY
. Here’s how you can set this variable in your terminal session:Create the application
product-description-app
with your desired project name and pdg-tutorial
with the template you wish to use:product-description-app
in the specified directory using a template designed for this tutorial.Edit your project
localhost:4005
. If that port is in use, you can specify a different port. Open this address in your browser to view your default application setup.main.py
, you’ll see that the template already imported the Writer Framework, the AI module, and the product description prompts that you’ll use throughout this tutorial.
prompts.py
. You are welcome to open this project in the IDE of your choice and modify the prompts however you wish. However, you don’t need to make any changes to this file to follow this tutorial.
You’ll also see the state initialization:
Add a private helper method
_generate_product_description
, accepts a base prompt and the product information from a form on the page. The underscore at the beginning of its name indicates that it’s a private method not exposed to the UI.Initialize additional state elements
wf.init_state()
to include a product_description
dictionary with visibility control and outlets for descriptions:visible
to control whether product description tabs are shown or hidden, and an empty dictionary outlets
for storing descriptions.Add a button click handler
_generate_product_description
to handle button clicks and generate descriptions:Add and configure the Repeater component
@{product_descriptions.outlets}
as the Repeater object to be used for repeating the child components. Replace the default “Key variable name” with itemId
. You can leave “Value variable name” as item
.Add and configure the Tab component
@{itemId}
to the Name property to display the outlet name on the tab.Add and configure the Text component
@{item}
. You may also choose to set “Use Markdown” to “yes.”Control the visibility of the Tab container
product_descriptions.visible
to the Visibility value input.Wire up the form with the Generate button
handle_click
for the wf-click
event.Preview and test the application
_generate_product_description
helper method:
prompts.py
. It then sends the formatted prompt to the Palmyra LLM using the complete
method. The prompt not only analyzes the descriptions for SEO keywords, but also outputs a Plotly.js schema object that you can use directly with a Plotly graph component.
With the helper method in place, you can now update the click handler for the button. On line 27, add the following code before the product description visibility is set:
seo_analysis
as the visibility value.
@{seo_analysis}
to pass the LLM-generated graph specification to the component.
Click preview, add some data to the form, and click generate. You should see a new SEO analysis tab appear with a nicely formatted and labeled chart.
laps
or another Material Symbols ID to the Icon input if you wish.
wf.init_state()
. Add the following to the state dictionary:
outlet_form
state elements will bind to the form elements.
Next, add the click handler for the new button. Copy and paste this handle_add_outlet
method into the code under the handle_click
method:
user_prompt
and adds the formatted prompt to the base_prompts
dictionary. It then generates the product description for the new food outlet, updates the SEO analysis, and clears the status message.
Bind text inputs to state elements
outlet_form.name
.outlet_form.character_max
.Assign click handler to button
handle_add_outlet
for the wf-click
event.Configure form visibility
product_descriptions.visible
as the “Visibility value.”user_prompt
in the prompts.py
file using your favorite editor.