Skip to content

Commit 1e1313c

Browse files
johnowhitakerjohnowhitaker
committed
Tweaks, link chatbot example
1 parent 3c23d17 commit 1e1313c

File tree

1 file changed

+27
-25
lines changed

1 file changed

+27
-25
lines changed

‎nbs/05_by_example.ipynb‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
"name": "stdout",
8484
"output_type": "stream",
8585
"text": [
86-
"<!doctype html>\n",
86+
"<!doctype html></!doctype>\n",
8787
"\n",
8888
"<html>\n",
8989
" <head>\n",
@@ -117,7 +117,7 @@
117117
{
118118
"data": {
119119
"text/html": [
120-
"<!doctype html>\n",
120+
"<!doctype html></!doctype>\n",
121121
"\n",
122122
"<html>\n",
123123
" <head>\n",
@@ -191,7 +191,7 @@
191191
{
192192
"data": {
193193
"text/plain": [
194-
"'<!doctype html>\\n\\n<html>\\n <head>\\n <title>FastHTML page</title>\\n <script src=\"https://unpkg.com/htmx.org@1.9.12\" crossorigin=\"anonymous\" integrity=\"sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2\"></script>\\n </head>\\n <body>\\n <div>\\n <h1>Hello, World</h1>\\n <p>Some text</p>\\n <p>Some more text</p>\\n </div>\\n </body>\\n</html>\\n'"
194+
"'<!doctype html></!doctype>\\n\\n<html>\\n <head>\\n <title>FastHTML page</title>\\n <meta charset=\"utf-8\"></meta>\\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"></meta>\\n <script src=\"https://unpkg.com/htmx.org@next/dist/htmx.min.js\"></script>\\n <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/[email protected]/surreal.js\"></script>\\n <script src=\"https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js\"></script>\\n </head>\\n <body>\\n<div>\\n <h1>Hello, World</h1>\\n <p>Some text</p>\\n <p>Some more text</p>\\n</div>\\n </body>\\n</html>\\n'"
195195
]
196196
},
197197
"execution_count": null,
@@ -224,12 +224,16 @@
224224
"name": "stdout",
225225
"output_type": "stream",
226226
"text": [
227-
"<!doctype html>\n",
227+
"<!doctype html></!doctype>\n",
228228
"\n",
229229
"<html>\n",
230230
" <head>\n",
231231
" <title>Page Demo</title>\n",
232-
" <script src=\"https://unpkg.com/[email protected]\" crossorigin=\"anonymous\" integrity=\"sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2\"></script>\n",
232+
" <meta charset=\"utf-8\"></meta>\n",
233+
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"></meta>\n",
234+
" <script src=\"https://unpkg.com/htmx.org@next/dist/htmx.min.js\"></script>\n",
235+
" <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/[email protected]/surreal.js\"></script>\n",
236+
" <script src=\"https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js\"></script>\n",
233237
" </head>\n",
234238
" <body>\n",
235239
"<div>\n",
@@ -415,9 +419,7 @@
415419
"cell_type": "markdown",
416420
"metadata": {},
417421
"source": [
418-
"You can check out the pico [examples](https://picocss.com/examples) page to see how different elements will look. If everything is working, the page should now render nice text with our custom font, and it should respect the user's light/dark mode preferences too:\n",
419-
"\n",
420-
"TODO screenshot"
422+
"You can check out the pico [examples](https://picocss.com/examples) page to see how different elements will look. If everything is working, the page should now render nice text with our custom font, and it should respect the user's light/dark mode preferences too."
421423
]
422424
},
423425
{
@@ -581,7 +583,7 @@
581583
"```python\n",
582584
"# Main page\n",
583585
"@app.get(\"/\")\n",
584-
"async def get():\n",
586+
"def get():\n",
585587
" inp = Input(id=\"new-prompt\", name=\"prompt\", placeholder=\"Enter a prompt\")\n",
586588
" add = Form(Group(inp, Button(\"Generate\")), hx_post=\"/\", target_id='gen-list', hx_swap=\"afterbegin\")\n",
587589
" gen_list = Div(id='gen-list')\n",
@@ -600,10 +602,10 @@
600602
" hx_trigger='every 1s', hx_swap='outerHTML')\n",
601603
" \n",
602604
"@app.post(\"/generations/{id}\")\n",
603-
"async def get(id:int): return generation_preview(id)\n",
605+
"def get(id:int): return generation_preview(id)\n",
604606
"\n",
605607
"@app.post(\"/\")\n",
606-
"async def post(prompt:str):\n",
608+
"def post(prompt:str):\n",
607609
" id = len(generations)\n",
608610
" generate_and_save(prompt, id)\n",
609611
" generations.append(prompt)\n",
@@ -741,7 +743,7 @@
741743
"\n",
742744
"# Main page\n",
743745
"@app.get(\"/\")\n",
744-
"async def get():\n",
746+
"def get():\n",
745747
" inp = Input(id=\"new-prompt\", name=\"prompt\", placeholder=\"Enter a prompt\")\n",
746748
" add = Form(Group(inp, Button(\"Generate\")), hx_post=\"/\", target_id='gen-list', hx_swap=\"afterbegin\")\n",
747749
" gen_containers = [generation_preview(g) for g in gens(limit=10)] # Start with last 10\n",
@@ -767,7 +769,7 @@
767769
"cell_type": "markdown",
768770
"metadata": {},
769771
"source": [
770-
"You can see the final result in [main.py](https://github.com/AnswerDotAI/fasthtml-example/blob/main/image_app_simple/main.py) in the `image_app_simple` example directory, along with info on deploying it (tl;dr don't!). We've also deployed a version that only shows *your* generations (tied to browser session) and has a credit system to save our bank accounts. You can access that [here](https://image-gen-public-credit-pool.replit.app/). A tutorial on payment processing with Stripe may be added eventually. For now, how do we keep track of different users?"
772+
"You can see the final result in [main.py](https://github.com/AnswerDotAI/fasthtml-example/blob/main/image_app_simple/main.py) in the `image_app_simple` example directory, along with info on deploying it (tl;dr don't!). We've also deployed a version that only shows *your* generations (tied to browser session) and has a credit system to save our bank accounts. You can access that [here](https://image-gen-public-credit-pool.replit.app/). Now for the next question: how do we keep track of different users?"
771773
]
772774
},
773775
{
@@ -780,7 +782,7 @@
780782
"\n",
781783
"```python\n",
782784
"@app.get(\"/\")\n",
783-
"async def get(session):\n",
785+
"def get(session):\n",
784786
" if 'session_id' not in session: session['session_id'] = str(uuid.uuid4())\n",
785787
" return H1(f\"Session ID: {session['session_id']}\")\n",
786788
"```\n",
@@ -790,7 +792,7 @@
790792
"In the image app example, we can add a `session_id` column to our database, and modify our homepage like so:\n",
791793
"```python\n",
792794
"@app.get(\"/\")\n",
793-
"async def get(session):\n",
795+
"def get(session):\n",
794796
" if 'session_id' not in session: session['session_id'] = str(uuid.uuid4())\n",
795797
" inp = Input(id=\"new-prompt\", name=\"prompt\", placeholder=\"Enter a prompt\")\n",
796798
" add = Form(Group(inp, Button(\"Generate\")), hx_post=\"/\", target_id='gen-list', hx_swap=\"afterbegin\")\n",
@@ -975,7 +977,7 @@
975977
],
976978
"source": [
977979
"@app.get(\"/files/{path}\")\n",
978-
"async def txt(path: Path): return path.with_suffix('.txt')\n",
980+
"def txt(path: Path): return path.with_suffix('.txt')\n",
979981
"\n",
980982
"print(cli.get('/files/foo').text)"
981983
]
@@ -1129,7 +1131,7 @@
11291131
" a:int;b:str\n",
11301132
"\n",
11311133
"@app.route(\"/bodie/{nm}\")\n",
1132-
"async def post(nm:str, data:Bodie):\n",
1134+
"def post(nm:str, data:Bodie):\n",
11331135
" res = asdict(data)\n",
11341136
" res['nm'] = nm\n",
11351137
" return res\n",
@@ -1154,7 +1156,7 @@
11541156
{
11551157
"data": {
11561158
"text/plain": [
1157-
"'Set to 2024-06-14 18:48:07.942677'"
1159+
"'Set to 2024-07-17 08:58:08.810594'"
11581160
]
11591161
},
11601162
"execution_count": null,
@@ -1166,7 +1168,7 @@
11661168
"from datetime import datetime\n",
11671169
"\n",
11681170
"@app.get(\"/setcookie\")\n",
1169-
"async def setc(req):\n",
1171+
"def setc(req):\n",
11701172
" now = datetime.now()\n",
11711173
" res = Response(f'Set to {now}')\n",
11721174
" res.set_cookie('now', str(now))\n",
@@ -1183,7 +1185,7 @@
11831185
{
11841186
"data": {
11851187
"text/plain": [
1186-
"'Cookie was set at time 18:48:07.942677'"
1188+
"'Cookie was set at time 08:58:08.810594'"
11871189
]
11881190
},
11891191
"execution_count": null,
@@ -1193,7 +1195,7 @@
11931195
],
11941196
"source": [
11951197
"@app.get(\"/getcookie\")\n",
1196-
"async def getc(now:date): return f'Cookie was set at time {now.time()}'\n",
1198+
"def getc(now:date): return f'Cookie was set at time {now.time()}'\n",
11971199
"\n",
11981200
"cli.get('/getcookie').text"
11991201
]
@@ -1281,7 +1283,7 @@
12811283
"\n",
12821284
"```python\n",
12831285
"@app.get(\"/redirect\")\n",
1284-
"async def redirect():\n",
1286+
"def redirect():\n",
12851287
" return RedirectResponse(url=\"/\")\n",
12861288
"```\n",
12871289
"\n",
@@ -1299,7 +1301,7 @@
12991301
"```python\n",
13001302
"# For images, CSS, etc.\n",
13011303
"@app.get(\"/{fname:path}.{ext:static}\")\n",
1302-
"async def static(fname: str, ext: str):\n",
1304+
"def static(fname: str, ext: str):\n",
13031305
" return FileResponse(f'{fname}.{ext}')\n",
13041306
"```\n",
13051307
"\n",
@@ -1364,7 +1366,7 @@
13641366
"cell_type": "markdown",
13651367
"metadata": {},
13661368
"source": [
1367-
"## Full Example #3 - Chatbot Example with DaisyUI Components (WIP)\n",
1369+
"## Full Example #3 - Chatbot Example with DaisyUI Components\n",
13681370
"\n",
13691371
"Let's go back to the topic of adding components or styling beyond the simple PicoCSS examples so far. How might we adopt a component or framework? In this example, let's build a chatbot UI leveraging the [DaisyUI chat bubble](https://daisyui.com/components/chat/). The final result will look like this:"
13701372
]
@@ -1502,7 +1504,7 @@
15021504
"cell_type": "markdown",
15031505
"metadata": {},
15041506
"source": [
1505-
"The actual chat functionality of the app is based on our *cosette* library, a version of [claudette](https://claudette.answer.ai/) for OpenAI models. As with the image example, we face a potential hiccup in that getting a response from an LLM is slow. We need a way to have the user message added to the UI immadiately, and then have the response added once it's available. We could do something similar to the image generation example above, or dive into WebSockets or Server-Sent Events. The example TODO link includes both (websockets TODO)."
1507+
"The actual chat functionality of the app is based on our *cosette* library, a version of [claudette](https://claudette.answer.ai/) for OpenAI models. As with the image example, we face a potential hiccup in that getting a response from an LLM is slow. We need a way to have the user message added to the UI immadiately, and then have the response added once it's available. We could do something similar to the image generation example above, or use websockets. Check out the [full example](https://github.com/AnswerDotAI/fasthtml-example/tree/main/02_chatbot) for implementations of both, along with further details."
15061508
]
15071509
},
15081510
{

0 commit comments

Comments
 (0)