Skip to content

Commit 0a855bb

Browse files
Update Panel (#28)
* add HoloViz Panel * move picture to top * simplify * simplify * fix bug * update Panel * fix header * add * simplify * small improvements * fix misspelling
1 parent 37e426b commit 0a855bb

File tree

3 files changed

+56
-26
lines changed

3 files changed

+56
-26
lines changed

README.md

Lines changed: 56 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -245,9 +245,9 @@ app = App(app_ui, server, debug=True)
245245

246246
### Panel
247247

248-
![HoloViz Panel Transformers App](docs/images/Panel.png)
248+
With [HoloViz Panel](https://panel.holoviz.org) you develop your app on your laptop and convert it to [Pyodide](https://pyodide.org/en/stable/) or [PyScript](https://pyscript.net/) by running [`panel convert`](https://panel.holoviz.org/how_to/wasm/convert.html).
249249

250-
With [HoloViz Panel](https://panel.holoviz.org) you develop your app on your laptop and use [`panel convert`](https://panel.holoviz.org/how_to/wasm/convert.html) to convert it to [Pyodide](https://pyodide.org/en/stable/) or [PyScript](https://pyscript.net/).
250+
![HoloViz Panel Transformers App](docs/images/Panel.png)
251251

252252
Install the requirements
253253

@@ -260,51 +260,81 @@ Create the **app.py** file in your favorite editor or IDE.
260260
```python
261261
import panel as pn
262262

263-
MODEL = "sentiment-analysis"
263+
pn.extension(sizing_mode="stretch_width", design="material")
264264

265-
pn.extension(design="material")
265+
@pn.cache
266+
async def _get_pipeline(model="sentiment-analysis"):
267+
from transformers_js import import_transformers_js
268+
transformers = await import_transformers_js()
269+
return await transformers.pipeline(model)
270+
271+
272+
text_input = pn.widgets.TextInput(placeholder="Send a message", name="Message")
273+
button = pn.widgets.Button(name="Send", icon="send", align="end", button_type="primary")
274+
275+
@pn.depends(text_input, button)
276+
async def _response(text, event):
277+
if not text:
278+
return {}
279+
pipe = await _get_pipeline()
280+
return await pipe(text)
281+
282+
pn.Column(
283+
text_input, button, pn.pane.JSON(_response, depth=2)
284+
).servable()
285+
```
286+
287+
Convert the app to [Pyodide](https://pyodide.org/en/stable/). For more options like *hot reload* check out the [Panel Convert](https://panel.holoviz.org/how_to/wasm/convert.html) guide.
288+
289+
```bash
290+
panel convert app.py --to pyodide-worker --out pyodide --requirements transformers_js_py
291+
```
266292

293+
Now serve the app
294+
295+
```bash
296+
python -m http.server -d pyodide
297+
```
298+
299+
Finally you can try out the app by opening [localhost:8000/app.html](http://localhost:8000/app.html)
300+
301+
<details>
302+
<summary><h4>Panel Chat App Example</h4></summary>
303+
304+
You can also use `transformers_js_py` with [Panels Chat Components](https://panel.holoviz.org/reference/index.html#chat).
305+
306+
![HoloViz Panel Transformers App](docs/images/PanelChat.png)
307+
308+
```python
309+
import panel as pn
310+
311+
MODEL = "sentiment-analysis"
267312
pn.chat.ChatMessage.default_avatars["hugging face"] = "🤗"
268313

314+
pn.extension(design="material")
315+
269316
@pn.cache
270317
async def _get_pipeline(model):
271318
from transformers_js import import_transformers_js
272-
273319
transformers = await import_transformers_js()
274-
pipeline = transformers.pipeline
275-
return await pipeline(model)
276-
320+
return await transformers.pipeline(model)
277321

278322
async def callback(contents: str, user: str, instance: pn.chat.ChatInterface):
279323
pipe = await _get_pipeline(MODEL)
280324
response = await pipe(contents)
281325
label, score = response[0]["label"], round(response[0]["score"], 2)
282326
return f"""I feel a {label} vibe here (score: {score})"""
283327

284-
285328
welcome_message = pn.chat.ChatMessage(
286329
f"I'm a Hugging Face Transformers `{MODEL}` model.\n\nPlease *send a message*!",
287330
user="Hugging Face",
288331
)
289332

290333
pn.chat.ChatInterface(
291-
welcome_message,
292-
callback=callback,
293-
callback_user="Hugging Face",
294-
placeholder_text="Loading the model ...",
334+
welcome_message, placeholder_text="Loading the model ...",
335+
callback=callback, callback_user="Hugging Face",
295336
).servable()
296337
```
297338

298-
Convert the app to [Pyodide](https://pyodide.org/en/stable/). For more options like *hot reload* check out the [Panel Convert](https://panel.holoviz.org/how_to/wasm/convert.html) guide.
299-
300-
```bash
301-
panel convert app.py --to pyodide-worker --out pyodide --requirements transformers_js_py
302-
```
303-
304-
Now Serve the app
305-
306-
```bash
307-
python -m http.server -d pyodide
308-
```
309-
310-
Finally you can try out the app by opening [localhost:8000/app.html](http://localhost:8000/app.html)
339+
For more chat examples see [Panel Chat Examples](https://holoviz-topics.github.io/panel-chat-examples/).
340+
</details>

docs/images/Panel.png

-26.8 KB
Loading

docs/images/PanelChat.png

42.9 KB
Loading

0 commit comments

Comments
 (0)