notebooks/color-picker.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from chatlab import Chat, models, system\n",
    "from chatlab.tools.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_1106_PREVIEW,\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "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": [
                "{\"colors\":[\"#1A1A1A\",\"#333333\",\"#4F5D75\",\"#EF8354\",\"#2D3142\"]}"
               ],
               "tagName": "div"
              }
             ],
             "tagName": "div"
            },
            {
             "attributes": {},
             "children": [],
             "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\">{&quot;colors&quot;:[&quot;#1A1A1A&quot;,&quot;#333333&quot;,&quot;#4F5D75&quot;,&quot;#EF8354&quot;,&quot;#2D3142&quot;]}</div></div><div></div></div></details></div>"
      ],
      "text/plain": [
       "<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\">{&quot;colors&quot;:[&quot;#1A1A1A&quot;,&quot;#333333&quot;,&quot;#4F5D75&quot;,&quot;#EF8354&quot;,&quot;#2D3142&quot;]}</div></div><div></div></div></details></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div><div style=\"background-color:#1A1A1A; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#333333; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#4F5D75; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#EF8354; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#2D3142; width:50px; height:50px; display:inline-block;\"></div></div>"
      ],
      "text/plain": [
       "Palette(['#1A1A1A', '#333333', '#4F5D75', '#EF8354', '#2D3142'], None)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/markdown": [
       "For your portfolio site with a dark theme, I've created a color palette that balances dark tones with accent colors to provide visual interest and highlight key elements. Here's the palette:\n",
       "\n",
       "1. **Background Color**: `#1A1A1A` - A deep, dark gray that will serve as a sleek and professional background for your portfolio.\n",
       "2. **Secondary Background Color**: `#333333` - A slightly lighter shade of dark gray to create subtle contrasts for elements like sidebars or footer.\n",
       "3. **Accent Color**: `#EF8354` - A vibrant, warm coral tone that can be used for call-to-action buttons, links, or to highlight important content.\n",
       "4. **Primary Text Color**: `#FFFFFF` (not shown) - A clean white for the main text, ensuring readability against the dark background.\n",
       "5. **Secondary Text/Element Color**: `#4F5D75` - A muted blue-gray that complements the dark theme and can be used for secondary text or less prominent elements.\n",
       "6. **Highlight Color**: `#2D3142` - A dark blue-gray that can be used to highlight sections of the site or for hover states on interactive elements.\n",
       "\n",
       "This palette provides a modern and sophisticated look, with enough contrast to ensure that content is easily readable and interactive elements are noticeable. Remember to maintain accessibility by ensuring sufficient contrast ratios between text and background colors."
      ],
      "text/plain": [
       "AssistantMessageView(display_id='38c55ab5-bd90-410d-9a4e-4bf2e46f73b4', content=\"For your portfolio site with a dark theme, I've created a color palette that balances dark tones with accent colors to provide visual interest and highlight key elements. Here's the palette:\\n\\n1. **Background Color**: `#1A1A1A` - A deep, dark gray that will serve as a sleek and professional background for your portfolio.\\n2. **Secondary Background Color**: `#333333` - A slightly lighter shade of dark gray to create subtle contrasts for elements like sidebars or footer.\\n3. **Accent Color**: `#EF8354` - A vibrant, warm coral tone that can be used for call-to-action buttons, links, or to highlight important content.\\n4. **Primary Text Color**: `#FFFFFF` (not shown) - A clean white for the main text, ensuring readability against the dark background.\\n5. **Secondary Text/Element Color**: `#4F5D75` - A muted blue-gray that complements the dark theme and can be used for secondary text or less prominent elements.\\n6. **Highlight Color**: `#2D3142` - A dark blue-gray that can be used to highlight sections of the site or for hover states on interactive elements.\\n\\nThis palette provides a modern and sophisticated look, with enough contrast to ensure that content is easily readable and interactive elements are noticeable. Remember to maintain accessibility by ensuring sufficient contrast ratios between text and background colors.\", finished=False, has_displayed=True)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "await chat(\"Create a palette for a portfolio site with a dark theme.\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "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": [
                "{\"colors\":[\"#0F0F0F\",\"#212121\",\"#08F7FE\",\"#FE53BB\",\"#F5D300\"]}"
               ],
               "tagName": "div"
              }
             ],
             "tagName": "div"
            },
            {
             "attributes": {},
             "children": [],
             "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\">{&quot;colors&quot;:[&quot;#0F0F0F&quot;,&quot;#212121&quot;,&quot;#08F7FE&quot;,&quot;#FE53BB&quot;,&quot;#F5D300&quot;]}</div></div><div></div></div></details></div>"
      ],
      "text/plain": [
       "<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\">{&quot;colors&quot;:[&quot;#0F0F0F&quot;,&quot;#212121&quot;,&quot;#08F7FE&quot;,&quot;#FE53BB&quot;,&quot;#F5D300&quot;]}</div></div><div></div></div></details></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div><div style=\"background-color:#0F0F0F; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#212121; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#08F7FE; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#FE53BB; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#F5D300; width:50px; height:50px; display:inline-block;\"></div></div>"
      ],
      "text/plain": [
       "Palette(['#0F0F0F', '#212121', '#08F7FE', '#FE53BB', '#F5D300'], None)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/markdown": [
       "For a neon-themed portfolio site, I've selected a palette that combines dark backgrounds with bright, neon colors to create a striking and energetic visual experience. Here's the neon palette:\n",
       "\n",
       "1. **Background Color**: `#0F0F0F` - A very dark gray, almost black, to allow the neon colors to pop and create a high contrast.\n",
       "2. **Secondary Background Color**: `#212121` - A slightly lighter dark gray to differentiate sections or elements without detracting from the neon effect.\n",
       "3. **Neon Accent Color 1**: `#08F7FE` - A bright neon cyan for a futuristic feel, perfect for highlighting important elements like buttons and icons.\n",
       "4. **Neon Accent Color 2**: `#FE53BB` - A vivid neon pink to add a playful and dynamic touch, suitable for calls to action and active navigation items.\n",
       "5. **Neon Highlight Color**: `#F5D300` - A neon yellow that stands out against the dark background, great for alerts, badges, or key information.\n",
       "\n",
       "This neon palette will give your portfolio a bold and modern edge, ensuring it captures attention. The dark backgrounds will enhance the glow of the neon colors, making your site memorable. As with any design, be mindful of the usage of these bright colors to maintain readability and avoid visual fatigue for your site visitors."
      ],
      "text/plain": [
       "AssistantMessageView(display_id='169dd512-6948-4c22-a8c2-0ac3c1cc57eb', content=\"For a neon-themed portfolio site, I've selected a palette that combines dark backgrounds with bright, neon colors to create a striking and energetic visual experience. Here's the neon palette:\\n\\n1. **Background Color**: `#0F0F0F` - A very dark gray, almost black, to allow the neon colors to pop and create a high contrast.\\n2. **Secondary Background Color**: `#212121` - A slightly lighter dark gray to differentiate sections or elements without detracting from the neon effect.\\n3. **Neon Accent Color 1**: `#08F7FE` - A bright neon cyan for a futuristic feel, perfect for highlighting important elements like buttons and icons.\\n4. **Neon Accent Color 2**: `#FE53BB` - A vivid neon pink to add a playful and dynamic touch, suitable for calls to action and active navigation items.\\n5. **Neon Highlight Color**: `#F5D300` - A neon yellow that stands out against the dark background, great for alerts, badges, or key information.\\n\\nThis neon palette will give your portfolio a bold and modern edge, ensuring it captures attention. The dark backgrounds will enhance the glow of the neon colors, making your site memorable. As with any design, be mindful of the usage of these bright colors to maintain readability and avoid visual fatigue for your site visitors.\", finished=False, has_displayed=True)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "await chat(\"Can you make a neon version now?\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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
}