import panel as pn

from panel.widgets import SpeechToText, GrammarList

pn.extension()

speech_to_text_basic = SpeechToText(button_type="light")

pn.Row(speech_to_text_basic.controls(['value'], jslink=False), speech_to_text_basic)

speech_to_text_basic.value

speech_to_text_basic.results

grammar_list = GrammarList()

src = "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;"
grammar_list.add_from_string(src, 1)

speech_to_text = SpeechToText(button_type="light", grammars=grammar_list, height=50)

controls = speech_to_text.controls(jslink=False)

def results(results):
    return pn.pane.HTML(speech_to_text.results_as_html, width=100, margin=(0, 15, 0, 15))

app = pn.Row(controls, speech_to_text, pn.bind(results, speech_to_text))
app.servable()