Skip to content

Commit

Permalink
Merge pull request #98 from rgbkrk/colors
Browse files Browse the repository at this point in the history 
include color palette view tool
  • Loading branch information
@rgbkrk
rgbkrk authored Oct 18, 2023
2 parents c6bae13 + b1f6810 commit f0285d2
Show file tree
Hide file tree
Showing 2 changed files with 384 additions and 0 deletions.
58 changes: 58 additions & 0 deletions chatlab/builtins/colors.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
"""Color hacking in the notebook.
This module exposes a function that will store """
import hashlib
from typing import Dict, List, Optional

from IPython.display import display


class Palette:
"""A palette of colors for the user to see."""

def __init__(self, colors: List[str], name: Optional[str]):
"""Creates a palette of colors for the user to see."""
self.colors = colors
self.name = name

@property
def colors(self):
"""Returns the colors in the palette."""
return self._colors

@colors.setter
def colors(self, colors: List[str]):
self._colors = colors
self.html = '<div>'
for color in colors:
self.html += f'<div style="background-color:{color}; width:50px; height:50px; display:inline-block;"></div>'
self.html += '</div>'

def _repr_html_(self):
return self.html

def __repr__(self):
"""Returns a string representation of the palette."""
return f'Palette({self.colors}, {self.name})'


palettes: Dict[str, Palette] = {}


def _generate_palette_name(colors: List[str]) -> str:
hash_object = hashlib.sha1(''.join(colors).encode())
return f"palette-{hash_object.hexdigest()}"


def show_colors(colors: List[str], store_as: Optional[str]):
"""Shows a list of CSS colors for the user in their notebook."""
global palettes

if store_as is None:
store_as = _generate_palette_name(colors)

palette = Palette(colors, store_as)
palettes[store_as] = palette

display(palette)
return f"Displayed colors for user and stored as `palettes['{store_as}']`."
326 changes: 326 additions & 0 deletions notebooks/color-picker.ipynb
View file
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 f0285d2

Please sign in to comment.