Skip to content

Commit

Permalink
include notebook
Browse files Browse the repository at this point in the history
rgbkrk committed Oct 16, 2023
1 parent d84abbc commit b1f6810
Showing 1 changed file with 326 additions and 0 deletions.
326 changes: 326 additions & 0 deletions notebooks/color-picker.ipynb
Original file line number Diff line number Diff line change
@@ -0,0 +1,326 @@
{
"cells": [
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [],
"source": [
"from chatlab import Chat, models, system\n",
"from chatlab.builtins.colors import show_colors\n",
"\n",
"chat = Chat(\n",
" system(\"Format responses in markdown,. You are a skilled designer.\"),\n",
" chat_functions=[show_colors],\n",
" model=models.GPT_4_0613,\n",
")"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [
{
"data": {
"application/vdom.v1+json": {
"attributes": {},
"children": [
{
"attributes": {},
"children": [
".chatlab-chat-details summary > * { display: inline; color: #27374D; }"
],
"tagName": "style"
},
{
"attributes": {
"className": "chatlab-chat-details",
"style": {
"background": "#DDE6ED",
"borderRadius": "5px",
"padding": ".5rem 1rem"
}
},
"children": [
{
"attributes": {
"style": {
"color": "#27374D",
"cursor": "pointer"
}
},
"children": [
{
"attributes": {
"style": {
"color": "#9DB2BF",
"paddingLeft": "5px",
"paddingRight": "5px"
}
},
"children": [
"𝑓"
],
"tagName": "span"
},
{
"attributes": {
"style": {
"color": "#27374D",
"paddingLeft": "5px",
"paddingRight": "5px"
}
},
"children": [
"Ran"
],
"tagName": "span"
},
{
"attributes": {
"style": {
"fontFamily": "monospace",
"unicodeBidi": "embed",
"whiteSpace": "pre"
}
},
"children": [
"show_colors"
],
"tagName": "span"
},
{
"attributes": {
"style": {
"fontFamily": "monospace",
"unicodeBidi": "embed",
"whiteSpace": "pre"
}
},
"children": [
""
],
"tagName": "span"
}
],
"tagName": "summary"
},
{
"attributes": {
"style": {
"marginLeft": "10px",
"marginTop": "10px"
}
},
"children": [
{
"attributes": {},
"children": [
{
"attributes": {
"style": {
"color": "#27374D",
"fontWeight": "500",
"marginBottom": "5px"
}
},
"children": [
"Input:"
],
"tagName": "div"
},
{
"attributes": {
"style": {
"background": "#F7F9FA",
"color": "#27374D",
"fontFamily": "monospace",
"marginBottom": "10px",
"overflowX": "auto",
"padding": "10px",
"unicodeBidi": "embed",
"whiteSpace": "pre"
}
},
"children": [
"{\n \"colors\": [\"#0D1117\", \"#161B22\", \"#C9D1D9\", \"#58A6FF\", \"#F97316\"],\n \"store_as\": \"Dark Theme Portfolio Palette\"\n}"
],
"tagName": "div"
}
],
"tagName": "div"
},
{
"attributes": {},
"children": [
{
"attributes": {
"style": {
"color": "#27374D",
"fontWeight": "500",
"marginBottom": "5px"
}
},
"children": [
"Output:"
],
"tagName": "div"
},
{
"attributes": {
"style": {
"background": "#F7F9FA",
"color": "#27374D",
"fontFamily": "monospace",
"marginBottom": "10px",
"overflowX": "auto",
"padding": "10px",
"unicodeBidi": "embed",
"whiteSpace": "pre"
}
},
"children": [
"Displayed colors for user and stored as `palettes['Dark Theme Portfolio Palette']`."
],
"tagName": "div"
}
],
"tagName": "div"
}
],
"tagName": "div"
}
],
"tagName": "details"
}
],
"tagName": "div"
},
"text/html": [
"<div><style>.chatlab-chat-details summary &gt; * { display: inline; color: #27374D; }</style><details style=\"background: #DDE6ED; border-radius: 5px; padding: .5rem 1rem\" className=\"chatlab-chat-details\"><summary style=\"color: #27374D; cursor: pointer\"><span style=\"color: #9DB2BF; padding-left: 5px; padding-right: 5px\">𝑓</span><span style=\"color: #27374D; padding-left: 5px; padding-right: 5px\">Ran</span><span style=\"font-family: monospace; unicode-bidi: embed; white-space: pre\">show_colors</span><span style=\"font-family: monospace; unicode-bidi: embed; white-space: pre\"></span></summary><div style=\"margin-left: 10px; margin-top: 10px\"><div><div style=\"color: #27374D; font-weight: 500; margin-bottom: 5px\">Input:</div><div style=\"background: #F7F9FA; color: #27374D; font-family: monospace; margin-bottom: 10px; overflow-x: auto; padding: 10px; unicode-bidi: embed; white-space: pre\">{\n",
" &quot;colors&quot;: [&quot;#0D1117&quot;, &quot;#161B22&quot;, &quot;#C9D1D9&quot;, &quot;#58A6FF&quot;, &quot;#F97316&quot;],\n",
" &quot;store_as&quot;: &quot;Dark Theme Portfolio Palette&quot;\n",
"}</div></div><div><div style=\"color: #27374D; font-weight: 500; margin-bottom: 5px\">Output:</div><div style=\"background: #F7F9FA; color: #27374D; font-family: monospace; margin-bottom: 10px; overflow-x: auto; padding: 10px; unicode-bidi: embed; white-space: pre\">Displayed colors for user and stored as `palettes[&#x27;Dark Theme Portfolio Palette&#x27;]`.</div></div></div></details></div>"
],
"text/plain": [
"<chatlab.display.ChatFunctionCall at 0x12ebdced0>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"<div><div style=\"background-color:#0D1117; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#161B22; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#C9D1D9; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#58A6FF; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#F97316; width:50px; height:50px; display:inline-block;\"></div></div>"
],
"text/plain": [
"Palette(['#0D1117', '#161B22', '#C9D1D9', '#58A6FF', '#F97316'], Dark Theme Portfolio Palette)"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/markdown": [
"Here is your dark theme portfolio color palette:\n",
"\n",
"1. `#0D1117` - A very dark blue, almost black, for the main background color.\n",
"2. `#161B22` - A slightly lighter dark blue for secondary background elements.\n",
"3. `#C9D1D9` - A light gray for primary text, ensuring good readability against the dark background.\n",
"4. `#58A6FF` - A bright blue for links and highlights, adding a pop of color.\n",
"5. `#F97316` - A bold orange for call-to-action elements, drawing attention.\n",
"\n",
"This palette has been stored as `Dark Theme Portfolio Palette`."
],
"text/plain": [
"Here is your dark theme portfolio color palette:\n",
"\n",
"1. `#0D1117` - A very dark blue, almost black, for the main background color.\n",
"2. `#161B22` - A slightly lighter dark blue for secondary background elements.\n",
"3. `#C9D1D9` - A light gray for primary text, ensuring good readability against the dark background.\n",
"4. `#58A6FF` - A bright blue for links and highlights, adding a pop of color.\n",
"5. `#F97316` - A bold orange for call-to-action elements, drawing attention.\n",
"\n",
"This palette has been stored as `Dark Theme Portfolio Palette`."
]
},
"metadata": {
"text/markdown": {
"chatlab": {
"default": true
}
}
},
"output_type": "display_data"
}
],
"source": [
"await chat(\"Create a palette for a portfolio site with a dark theme.\")"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [
{
"data": {
"text/markdown": [
"The first two colors in the palette, `#0D1117` and `#161B22`, are indeed very close. They are both very dark shades of blue, almost black. Here's how you can use them effectively:\n",
"\n",
"- `#0D1117`: This color can be used as the main background color for your website. It's the darker of the two, so it will provide a deep, rich backdrop for your content.\n",
"\n",
"- `#161B22`: This slightly lighter shade can be used for secondary background elements. For example, you could use it for the background of cards, modals, or sidebars. It will provide a subtle contrast against the main background color, helping to distinguish different sections of the page without a stark contrast.\n",
"\n",
"Remember, the goal with a dark theme is to create a visually relaxing experience for the user, so subtle contrasts are key. The difference between these two colors might be slight, but it can add depth and sophistication to your design."
],
"text/plain": [
"The first two colors in the palette, `#0D1117` and `#161B22`, are indeed very close. They are both very dark shades of blue, almost black. Here's how you can use them effectively:\n",
"\n",
"- `#0D1117`: This color can be used as the main background color for your website. It's the darker of the two, so it will provide a deep, rich backdrop for your content.\n",
"\n",
"- `#161B22`: This slightly lighter shade can be used for secondary background elements. For example, you could use it for the background of cards, modals, or sidebars. It will provide a subtle contrast against the main background color, helping to distinguish different sections of the page without a stark contrast.\n",
"\n",
"Remember, the goal with a dark theme is to create a visually relaxing experience for the user, so subtle contrasts are key. The difference between these two colors might be slight, but it can add depth and sophistication to your design."
]
},
"metadata": {
"text/markdown": {
"chatlab": {
"default": true
}
}
},
"output_type": "display_data"
}
],
"source": [
"await chat(\"The first two colors are so close on my screen. How should I use these?\")"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "chatlab-3kMKfU-i-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.1"
}
},
"nbformat": 4,
"nbformat_minor": 2
}

0 comments on commit b1f6810

Please sign in to comment.