Skip to content

Instantly share code, notes, and snippets.

@rgbkrk

rgbkrk/color-chat.ipynb

Last active October 15, 2023 17:54
Show Gist options
  • Save rgbkrk/2572ef37f6426208f2ec6f6cef8bb5db to your computer and use it in GitHub Desktop.
Save rgbkrk/2572ef37f6426208f2ec6f6cef8bb5db to your computer and use it in GitHub Desktop.
Download ZIP
Generating colors with Chatlab via GPT-3.5
Display the source blob
Display the rendered blob
Raw
color-chat.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 10,
"metadata": {},
"outputs": [],
"source": [
"import hashlib\n",
"from typing import List, Optional\n",
"from IPython.core.display import HTML\n",
"\n",
"palettes = {}\n",
"\n",
"\n",
"class Palette:\n",
" def __init__(self, colors: List[str], name: Optional[str]):\n",
" self.colors = colors\n",
" self.name = name\n",
"\n",
" @property\n",
" def colors(self):\n",
" return self._colors\n",
"\n",
" @colors.setter\n",
" def colors(self, colors: List[str]):\n",
" self._colors = colors\n",
" self.html = '<div>'\n",
" for color in colors:\n",
" self.html += f'<div style=\"background-color:{color}; width:50px; height:50px; display:inline-block;\"></div>'\n",
" self.html += '</div>'\n",
"\n",
" def _repr_html_(self):\n",
" return self.html\n",
"\n",
" def __repr__(self):\n",
" return f'Palette({self.colors}, {self.name})'\n",
"\n",
"\n",
"def generate_palette_name(colors: List[str]) -> str:\n",
" hash_object = hashlib.sha1(''.join(colors).encode())\n",
" return f\"palette-{hash_object.hexdigest()}\"\n",
"\n",
"\n",
"def show_colors(colors: List[str], store_as: Optional[str]):\n",
" '''Shows a list of CSS colors for the user in their notebook.'''\n",
" global palettes\n",
"\n",
" if store_as is None:\n",
" store_as = generate_palette_name(colors)\n",
"\n",
" palette = Palette(colors, store_as)\n",
" palettes[store_as] = palette\n",
"\n",
" display(palette)\n",
" return f\"Displayed colors for user and stored as `palettes['{store_as}']`.\""
]
},
{
"cell_type": "code",
"execution_count": 11,
"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\": [\"#FADBD8\", \"#FCE4EC\", \"#F8E5F2\", \"#F3E5F5\", \"#EDE7F6\"],\n \"store_as\": \"soft_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['soft_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;#FADBD8&quot;, &quot;#FCE4EC&quot;, &quot;#F8E5F2&quot;, &quot;#F3E5F5&quot;, &quot;#EDE7F6&quot;],\n",
" &quot;store_as&quot;: &quot;soft_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;soft_palette&#x27;]`.</div></div></div></details></div>"
],
"text/plain": [
"<chatlab.display.ChatFunctionCall at 0x11a18a7d0>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"<div><div style=\"background-color:#FADBD8; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#FCE4EC; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#F8E5F2; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#F3E5F5; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#EDE7F6; width:50px; height:50px; display:inline-block;\"></div></div>"
],
"text/plain": [
"Palette(['#FADBD8', '#FCE4EC', '#F8E5F2', '#F3E5F5', '#EDE7F6'], soft_palette)"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/markdown": [
"Here is a soft palette for a nice Sunday afternoon:\n",
"\n",
"1. #FADBD8\n",
"2. #FCE4EC\n",
"3. #F8E5F2\n",
"4. #F3E5F5\n",
"5. #EDE7F6\n",
"\n",
"You can use these colors to create a relaxing and soothing atmosphere. Enjoy your Sunday afternoon!"
],
"text/plain": [
"Here is a soft palette for a nice Sunday afternoon:\n",
"\n",
"1. #FADBD8\n",
"2. #FCE4EC\n",
"3. #F8E5F2\n",
"4. #F3E5F5\n",
"5. #EDE7F6\n",
"\n",
"You can use these colors to create a relaxing and soothing atmosphere. Enjoy your Sunday afternoon!"
]
},
"metadata": {
"text/markdown": {
"chatlab": {
"default": true
}
}
},
"output_type": "display_data"
}
],
"source": [
"from chatlab import Chat\n",
"\n",
"chat = Chat(chat_functions=[show_colors])\n",
"\n",
"await chat(\"Please make me a soft palette for a nice sunday afternoon\")"
]
},
{
"cell_type": "code",
"execution_count": 12,
"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\": [\"#FF5733\", \"#FF8A33\", \"#FFC433\", \"#FF5733\", \"#FF5733\"],\n \"store_as\": \"fiery_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['fiery_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;#FF5733&quot;, &quot;#FF8A33&quot;, &quot;#FFC433&quot;, &quot;#FF5733&quot;, &quot;#FF5733&quot;],\n",
" &quot;store_as&quot;: &quot;fiery_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;fiery_palette&#x27;]`.</div></div></div></details></div>"
],
"text/plain": [
"<chatlab.display.ChatFunctionCall at 0x119fb59d0>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"<div><div style=\"background-color:#FF5733; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#FF8A33; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#FFC433; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#FF5733; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#FF5733; width:50px; height:50px; display:inline-block;\"></div></div>"
],
"text/plain": [
"Palette(['#FF5733', '#FF8A33', '#FFC433', '#FF5733', '#FF5733'], fiery_palette)"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/markdown": [
"Here is a fiery palette for a vibrant and energetic atmosphere:\n",
"\n",
"1. #FF5733\n",
"2. #FF8A33\n",
"3. #FFC433\n",
"4. #FF5733\n",
"5. #FF5733\n",
"\n",
"These colors will add a fiery touch to your surroundings. Enjoy the energy!"
],
"text/plain": [
"Here is a fiery palette for a vibrant and energetic atmosphere:\n",
"\n",
"1. #FF5733\n",
"2. #FF8A33\n",
"3. #FFC433\n",
"4. #FF5733\n",
"5. #FF5733\n",
"\n",
"These colors will add a fiery touch to your surroundings. Enjoy the energy!"
]
},
"metadata": {
"text/markdown": {
"chatlab": {
"default": true
}
}
},
"output_type": "display_data"
}
],
"source": [
"await chat(\"Ok now make me a fiery palette\")"
]
},
{
"cell_type": "code",
"execution_count": 13,
"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\": [\"#FF5733\", \"#FF8A33\", \"#FFC433\", \"#808080\", \"#333333\"],\n \"store_as\": \"fiery_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['fiery_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;#FF5733&quot;, &quot;#FF8A33&quot;, &quot;#FFC433&quot;, &quot;#808080&quot;, &quot;#333333&quot;],\n",
" &quot;store_as&quot;: &quot;fiery_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;fiery_palette&#x27;]`.</div></div></div></details></div>"
],
"text/plain": [
"<chatlab.display.ChatFunctionCall at 0x119fd4090>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"<div><div style=\"background-color:#FF5733; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#FF8A33; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#FFC433; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#808080; width:50px; height:50px; display:inline-block;\"></div><div style=\"background-color:#333333; width:50px; height:50px; display:inline-block;\"></div></div>"
],
"text/plain": [
"Palette(['#FF5733', '#FF8A33', '#FFC433', '#808080', '#333333'], fiery_palette)"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/markdown": [
"Here is an updated fiery palette with added greys for a smoky effect:\n",
"\n",
"1. #FF5733\n",
"2. #FF8A33\n",
"3. #FFC433\n",
"4. #808080\n",
"5. #333333\n",
"\n",
"These colors will provide more contrast and variance, creating a dynamic and fiery atmosphere with a touch of smoke. Enjoy the vibrant energy!"
],
"text/plain": [
"Here is an updated fiery palette with added greys for a smoky effect:\n",
"\n",
"1. #FF5733\n",
"2. #FF8A33\n",
"3. #FFC433\n",
"4. #808080\n",
"5. #333333\n",
"\n",
"These colors will provide more contrast and variance, creating a dynamic and fiery atmosphere with a touch of smoke. Enjoy the vibrant energy!"
]
},
"metadata": {
"text/markdown": {
"chatlab": {
"default": true
}
}
},
"output_type": "display_data"
}
],
"source": [
"await chat(\"That doesn't have enough contrast and variance. Maybe include some greys for the smoke?\")"
]
}
],
"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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment