Files
animaltrack/docs/vendor/monsterui/examples/playground.md
Petru Paler c0b939627b feat: initial project setup with implementation plan
- Add PLAN.md with 40-step checklist across 10 phases
- Add CLAUDE.md with project-specific instructions
- Set up nix flake with FastHTML/MonsterUI dependencies
- Create Python package skeleton (src/animaltrack)
- Vendor FastHTML and MonsterUI documentation
- Add Docker build configuration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-27 17:37:16 +00:00

3.0 KiB

"""FrankenUI Playground Example built with MonsterUI (original design by ShadCN)"""

from fasthtml.common import * from monsterui.all import * from fasthtml.svg import *

app, rt = fast_app(hdrs=Theme.blue.headers())

preset_options = ["Grammatical Standard English", "Summarize for a 2nd grader", "Text to command","Q&A","English to other languages","Parse unstructured data", "Classification","Natural language to Python","Explain code","Chat","More examples"]

def playground_navbar(): save_modal = Modal( ModalTitle("Save preset"), P("This will save the current playground state as a preset which you can access later or share with others.",cls=("mt-1.5", TextPresets.muted_sm)), LabelInput("Name", id="name"), LabelInput("Description", id="description"), ModalCloseButton("Save", cls=ButtonT.primary), id="save")

share_dd = Div(cls="space-y-6 p-4")(
    H3("Share preset"),
    P("Anyone who has this link and an OpenAI account will be able to view this.", cls=TextPresets.muted_sm),
    Div(Input(value="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003", readonly=True),
        Button(UkIcon('copy'), cls=(ButtonT.primary, "uk-drop-close",'mt-4'))))

rnav = (
    Select(*Options(*preset_options), name='preset', optgroup_label="Examples",
             placeholder='Load a preset', searchable=True, cls='h-9 w-[200px] lg:w-[300px]'),
    Button("Save",         cls=ButtonT.secondary, data_uk_toggle="#save"),save_modal,
    Button("View Code",    cls=ButtonT.secondary),
    Button("Share",        cls=ButtonT.secondary),DropDownNavContainer(share_dd),
    Button(UkIcon(icon="ellipsis"), cls=ButtonT.secondary),
    DropDownNavContainer(
        Li(A("Content filter preferences")),
        NavDividerLi(),
        Li(A("Delete preset", cls="text-destructive")),
    uk_dropdown="mode: click"))

return NavBar(*rnav, brand=H4('Playground'))

rsidebar = NavContainer( Select( Optgroup(map(Option,("text-davinci-003", "text-curie-001", "text-babbage-001", "text-ada-001")),label='GPT-3'), Optgroup(map(Option,("code-davinci-002", "code-cushman-001")),label='Codex'), label="Model", searchable=True), LabelRange(label='Temperature', value='12'), LabelRange(label='Maximum Length', value='80'), LabelRange(label='Top P', value='40'), cls='space-y-6 mt-8')

@rt def index(): navbar = playground_navbar() main_content = Div( Div(cls="flex-1")( Textarea(cls="uk-textarea h-full p-4", placeholder="Write a tagline for an ice cream shop")), cls="flex h-[700px] p-8 w-4/5")

bottom_buttons = Div(
    Button("Submit", cls=ButtonT.primary),
    Button(UkIcon(icon="history"), cls=ButtonT.secondary),
    cls="flex gap-x-2")

return Title("Playground Example"),Div(navbar, Div(cls="flex w-full")(main_content, rsidebar), bottom_buttons)

serve()