diff --git a/notebooks/cooking.ipynb b/notebooks/cooking.ipynb new file mode 100644 index 0000000..9499db1 --- /dev/null +++ b/notebooks/cooking.ipynb @@ -0,0 +1,563 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "metadata": {}, + "outputs": [ + { + "data": { + "application/vdom.v1+json": { + "attributes": { + "style": { + "alignItems": "center", + "display": "flex", + "flexDirection": "column", + "fontFamily": "'Arial', sans-serif", + "gap": "20px", + "margin": "20px" + } + }, + "children": [ + { + "attributes": { + "style": { + "color": "#333", + "fontSize": "24px" + } + }, + "children": [ + "British Baked Potato" + ], + "tagName": "h1" + }, + { + "attributes": { + "style": { + "backgroundColor": "white", + "borderRadius": "8px", + "boxShadow": "0 4px 6px rgba(0,0,0,0.1)", + "marginBottom": "20px", + "maxWidth": "500px", + "padding": "20px", + "width": "80%" + } + }, + "children": [ + { + "attributes": { + "style": { + "color": "#333", + "fontSize": "24px" + } + }, + "children": [ + "Ingredients" + ], + "tagName": "h1" + }, + { + "attributes": { + "style": { + "listStyle": "none", + "padding": "0" + } + }, + "children": [ + { + "attributes": { + "style": { + "fontSize": "16px", + "marginBottom": "10px" + } + }, + "children": [ + "4 of Large potatoes" + ], + "tagName": "li" + }, + { + "attributes": { + "style": { + "fontSize": "16px", + "marginBottom": "10px" + } + }, + "children": [ + "2 tablespoons of Olive oil" + ], + "tagName": "li" + }, + { + "attributes": { + "style": { + "fontSize": "16px", + "marginBottom": "10px" + } + }, + "children": [ + "to taste of Sea salt" + ], + "tagName": "li" + } + ], + "tagName": "ul" + } + ], + "tagName": "div" + }, + { + "attributes": { + "style": { + "backgroundColor": "white", + "borderRadius": "8px", + "boxShadow": "0 4px 6px rgba(0,0,0,0.1)", + "marginBottom": "20px", + "maxWidth": "500px", + "padding": "20px", + "width": "80%" + } + }, + "children": [ + { + "attributes": { + "style": { + "color": "#333", + "fontSize": "24px" + } + }, + "children": [ + "Steps" + ], + "tagName": "h1" + }, + { + "attributes": {}, + "children": [ + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Preheat your oven to 220°C (430°F)." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Wash the potatoes thoroughly and pat them dry with a kitchen towel." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Prick the potatoes all over with a fork. This allows steam to escape during the cooking process." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Rub the potatoes with olive oil. This helps to crisp the skin." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Sprinkle sea salt over the potatoes. The salt not only seasons the potatoes but also helps to crisp up the skin." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Place the potatoes directly on the middle shelf of the oven. This ensures even cooking." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Bake for about 20 minutes, then reduce the oven temperature to 190°C (375°F) and continue baking for another 60-90 minutes, or until the potatoes are cooked through and the skin is crispy." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Remove the potatoes from the oven and let them cool for a few minutes." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Slice open the top of each potato, being careful not to cut all the way through. Fluff up the inside with a fork." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + }, + { + "attributes": {}, + "children": [ + { + "attributes": { + "style": { + "lineHeight": "1.5", + "margin": "5px 0" + } + }, + "children": [ + "Serve hot, with your choice of fillings or toppings. Popular options include butter, cheese, baked beans, and coleslaw." + ], + "tagName": "p" + }, + { + "attributes": {}, + "children": [], + "tagName": "span" + } + ], + "tagName": "div" + } + ], + "tagName": "div" + } + ], + "tagName": "div" + } + ], + "tagName": "div" + }, + "text/html": [ + "

British Baked Potato

Ingredients

Steps

Preheat your oven to 220°C (430°F).

Wash the potatoes thoroughly and pat them dry with a kitchen towel.

Prick the potatoes all over with a fork. This allows steam to escape during the cooking process.

Rub the potatoes with olive oil. This helps to crisp the skin.

Sprinkle sea salt over the potatoes. The salt not only seasons the potatoes but also helps to crisp up the skin.

Place the potatoes directly on the middle shelf of the oven. This ensures even cooking.

Bake for about 20 minutes, then reduce the oven temperature to 190°C (375°F) and continue baking for another 60-90 minutes, or until the potatoes are cooked through and the skin is crispy.

Remove the potatoes from the oven and let them cool for a few minutes.

Slice open the top of each potato, being careful not to cut all the way through. Fluff up the inside with a fork.

Serve hot, with your choice of fillings or toppings. Popular options include butter, cheese, baked beans, and coleslaw.

" + ], + "text/plain": [ + "

British Baked Potato

Ingredients

Steps

Preheat your oven to 220°C (430°F).

Wash the potatoes thoroughly and pat them dry with a kitchen towel.

Prick the potatoes all over with a fork. This allows steam to escape during the cooking process.

Rub the potatoes with olive oil. This helps to crisp the skin.

Sprinkle sea salt over the potatoes. The salt not only seasons the potatoes but also helps to crisp up the skin.

Place the potatoes directly on the middle shelf of the oven. This ensures even cooking.

Bake for about 20 minutes, then reduce the oven temperature to 190°C (375°F) and continue baking for another 60-90 minutes, or until the potatoes are cooked through and the skin is crispy.

Remove the potatoes from the oven and let them cool for a few minutes.

Slice open the top of each potato, being careful not to cut all the way through. Fluff up the inside with a fork.

Serve hot, with your choice of fillings or toppings. Popular options include butter, cheese, baked beans, and coleslaw.

" + ] + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "text/markdown": [ + "I've stored the recipe for a classic British Baked Potato for you. Here's how to make it:\n", + "\n", + "### British Baked Potato\n", + "\n", + "#### Ingredients:\n", + "- 4 Large potatoes\n", + "- 2 tablespoons Olive oil\n", + "- Sea salt, to taste\n", + "\n", + "#### Steps:\n", + "1. **Preheat your oven** to 220°C (430°F).\n", + "2. **Wash the potatoes** thoroughly and pat them dry with a kitchen towel.\n", + "3. **Prick the potatoes** all over with a fork. This allows steam to escape during the cooking process.\n", + "4. **Rub the potatoes** with olive oil. This helps to crisp the skin.\n", + "5. **Sprinkle sea salt** over the potatoes. The salt not only seasons the potatoes but also helps to crisp up the skin.\n", + "6. **Place the potatoes** directly on the middle shelf of the oven. This ensures even cooking.\n", + "7. **Bake for about 20 minutes**, then reduce the oven temperature to 190°C (375°F) and continue baking for another 60-90 minutes, or until the potatoes are cooked through and the skin is crispy.\n", + "8. **Remove the potatoes** from the oven and let them cool for a few minutes.\n", + "9. **Slice open the top** of each potato, being careful not to cut all the way through. Fluff up the inside with a fork.\n", + "10. **Serve hot**, with your choice of fillings or toppings. Popular options include butter, cheese, baked beans, and coleslaw.\n", + "\n", + "Enjoy your delicious British Baked Potato!" + ], + "text/plain": [ + "AssistantMessageView(display_id='ffde1008-79b2-4a67-8dde-825246b9291a', content=\"I've stored the recipe for a classic British Baked Potato for you. Here's how to make it:\\n\\n### British Baked Potato\\n\\n#### Ingredients:\\n- 4 Large potatoes\\n- 2 tablespoons Olive oil\\n- Sea salt, to taste\\n\\n#### Steps:\\n1. **Preheat your oven** to 220°C (430°F).\\n2. **Wash the potatoes** thoroughly and pat them dry with a kitchen towel.\\n3. **Prick the potatoes** all over with a fork. This allows steam to escape during the cooking process.\\n4. **Rub the potatoes** with olive oil. This helps to crisp the skin.\\n5. **Sprinkle sea salt** over the potatoes. The salt not only seasons the potatoes but also helps to crisp up the skin.\\n6. **Place the potatoes** directly on the middle shelf of the oven. This ensures even cooking.\\n7. **Bake for about 20 minutes**, then reduce the oven temperature to 190°C (375°F) and continue baking for another 60-90 minutes, or until the potatoes are cooked through and the skin is crispy.\\n8. **Remove the potatoes** from the oven and let them cool for a few minutes.\\n9. **Slice open the top** of each potato, being careful not to cut all the way through. Fluff up the inside with a fork.\\n10. **Serve hot**, with your choice of fillings or toppings. Popular options include butter, cheese, baked beans, and coleslaw.\\n\\nEnjoy your delicious British Baked Potato!\", finished=False, has_displayed=True)" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "from pydantic import BaseModel\n", + "from typing import List, Optional\n", + "from vdom.helpers import div, h1, p, ul, li, span\n", + "\n", + "from chatlab import Chat, system\n", + "from chatlab.decorators import incremental_display\n", + "\n", + "\n", + "class Ingredient(BaseModel):\n", + " name: str\n", + " quantity: str # Simplified to a string for flexibility\n", + "\n", + "\n", + "class CookingStep(BaseModel):\n", + " description: str\n", + " difficulty: Optional[str] = None\n", + "\n", + "\n", + "class Recipe(BaseModel):\n", + " title: str\n", + " ingredients: List[Ingredient] = []\n", + " steps: List[CookingStep] = []\n", + "\n", + "\n", + "def render_recipe_with_inline_style(recipe: Recipe):\n", + " \"\"\"Render the recipe with enhanced inline CSS styling using VDOM.\"\"\"\n", + " if recipe is None:\n", + " return\n", + "\n", + " container_style = {\n", + " \"display\": \"flex\",\n", + " \"flexDirection\": \"column\",\n", + " \"alignItems\": \"center\",\n", + " \"gap\": \"20px\",\n", + " \"margin\": \"20px\",\n", + " \"fontFamily\": \"'Arial', sans-serif\",\n", + " }\n", + "\n", + " section_style = {\n", + " \"backgroundColor\": \"white\",\n", + " \"borderRadius\": \"8px\",\n", + " \"boxShadow\": \"0 4px 6px rgba(0,0,0,0.1)\",\n", + " \"padding\": \"20px\",\n", + " \"width\": \"80%\",\n", + " \"maxWidth\": \"500px\",\n", + " \"marginBottom\": \"20px\",\n", + " }\n", + "\n", + " title_style = {\n", + " \"color\": \"#333\",\n", + " \"fontSize\": \"24px\",\n", + " }\n", + "\n", + " list_style = {\n", + " \"listStyle\": \"none\",\n", + " \"padding\": \"0\",\n", + " }\n", + "\n", + " list_item_style = {\n", + " \"marginBottom\": \"10px\",\n", + " \"fontSize\": \"16px\",\n", + " }\n", + "\n", + " step_paragraph_style = {\n", + " \"margin\": \"5px 0\",\n", + " \"lineHeight\": \"1.5\",\n", + " }\n", + "\n", + " highlight_style = {\n", + " \"color\": \"#d9534f\", # Bootstrap's `btn-danger` color for emphasis\n", + " \"fontWeight\": \"bold\",\n", + " }\n", + "\n", + " return div(\n", + " h1(recipe.title, style=title_style),\n", + " div(\n", + " h1(\"Ingredients\", style=title_style),\n", + " ul(\n", + " children=[\n", + " li(f\"{ingredient.quantity} of {ingredient.name}\", style=list_item_style)\n", + " for ingredient in recipe.ingredients\n", + " ],\n", + " style=list_style,\n", + " ),\n", + " style=section_style,\n", + " ),\n", + " div(\n", + " h1(\"Steps\", style=title_style),\n", + " div(\n", + " children=[\n", + " div(\n", + " p(step.description, style=step_paragraph_style),\n", + " p(f\"Note: {step.difficulty}\", style=highlight_style) if step.difficulty else span(),\n", + " )\n", + " for step in recipe.steps\n", + " ]\n", + " ),\n", + " style=section_style,\n", + " ),\n", + " style=container_style,\n", + " )\n", + "\n", + "\n", + "@incremental_display(render_recipe_with_inline_style)\n", + "def store_recipe(recipe: Recipe):\n", + " \"\"\"Store the recipe in a database and show a nice visual representation.\"\"\"\n", + " return \"Stored recipe and showed the steps visually to the user.\"\n", + "\n", + "\n", + "chat = Chat(\n", + " system(\n", + " \"When the user asks for a recipe, make sure to store it in the database and show a nice visual representation.\"\n", + " ),\n", + " chat_functions=[store_recipe],\n", + " model=\"gpt-4-turbo-preview\",\n", + ")\n", + "\n", + "await chat(\"Let's make a baked potato like they would in Britain.\")" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": "chatlab-0EWIBOuo-py3.11", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.11.7" + } + }, + "nbformat": 4, + "nbformat_minor": 2 +}