Skip to content

Commit b1f6810

Browse files
rgbkrkrgbkrk
committed
include notebook
1 parent d84abbc commit b1f6810

File tree

1 file changed

+326
-0
lines changed

1 file changed

+326
-0
lines changed

‎notebooks/color-picker.ipynb

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "code",
5+
"execution_count": 9,
6+
"metadata": {},
7+
"outputs": [],
8+
"source": [
9+
"from chatlab import Chat, models, system\n",
10+
"from chatlab.builtins.colors import show_colors\n",
11+
"\n",
12+
"chat = Chat(\n",
13+
" system(\"Format responses in markdown,. You are a skilled designer.\"),\n",
14+
" chat_functions=[show_colors],\n",
15+
" model=models.GPT_4_0613,\n",
16+
")"
17+
]
18+
},
19+
{
20+
"cell_type": "code",
21+
"execution_count": 7,
22+
"metadata": {},
23+
"outputs": [
24+
{
25+
"data": {
26+
"application/vdom.v1+json": {
27+
"attributes": {},
28+
"children": [
29+
{
30+
"attributes": {},
31+
"children": [
32+
".chatlab-chat-details summary > * { display: inline; color: #27374D; }"
33+
],
34+
"tagName": "style"
35+
},
36+
{
37+
"attributes": {
38+
"className": "chatlab-chat-details",
39+
"style": {
40+
"background": "#DDE6ED",
41+
"borderRadius": "5px",
42+
"padding": ".5rem 1rem"
43+
}
44+
},
45+
"children": [
46+
{
47+
"attributes": {
48+
"style": {
49+
"color": "#27374D",
50+
"cursor": "pointer"
51+
}
52+
},
53+
"children": [
54+
{
55+
"attributes": {
56+
"style": {
57+
"color": "#9DB2BF",
58+
"paddingLeft": "5px",
59+
"paddingRight": "5px"
60+
}
61+
},
62+
"children": [
63+
"𝑓"
64+
],
65+
"tagName": "span"
66+
},
67+
{
68+
"attributes": {
69+
"style": {
70+
"color": "#27374D",
71+
"paddingLeft": "5px",
72+
"paddingRight": "5px"
73+
}
74+
},
75+
"children": [
76+
"Ran"
77+
],
78+
"tagName": "span"
79+
},
80+
{
81+
"attributes": {
82+
"style": {
83+
"fontFamily": "monospace",
84+
"unicodeBidi": "embed",
85+
"whiteSpace": "pre"
86+
}
87+
},
88+
"children": [
89+
"show_colors"
90+
],
91+
"tagName": "span"
92+
},
93+
{
94+
"attributes": {
95+
"style": {
96+
"fontFamily": "monospace",
97+
"unicodeBidi": "embed",
98+
"whiteSpace": "pre"
99+
}
100+
},
101+
"children": [
102+
""
103+
],
104+
"tagName": "span"
105+
}
106+
],
107+
"tagName": "summary"
108+
},
109+
{
110+
"attributes": {
111+
"style": {
112+
"marginLeft": "10px",
113+
"marginTop": "10px"
114+
}
115+
},
116+
"children": [
117+
{
118+
"attributes": {},
119+
"children": [
120+
{
121+
"attributes": {
122+
"style": {
123+
"color": "#27374D",
124+
"fontWeight": "500",
125+
"marginBottom": "5px"
126+
}
127+
},
128+
"children": [
129+
"Input:"
130+
],
131+
"tagName": "div"
132+
},
133+
{
134+
"attributes": {
135+
"style": {
136+
"background": "#F7F9FA",
137+
"color": "#27374D",
138+
"fontFamily": "monospace",
139+
"marginBottom": "10px",
140+
"overflowX": "auto",
141+
"padding": "10px",
142+
"unicodeBidi": "embed",
143+
"whiteSpace": "pre"
144+
}
145+
},
146+
"children": [
147+
"{\n \"colors\": [\"#0D1117\", \"#161B22\", \"#C9D1D9\", \"#58A6FF\", \"#F97316\"],\n \"store_as\": \"Dark Theme Portfolio Palette\"\n}"
148+
],
149+
"tagName": "div"
150+
}
151+
],
152+
"tagName": "div"
153+
},
154+
{
155+
"attributes": {},
156+
"children": [
157+
{
158+
"attributes": {
159+
"style": {
160+
"color": "#27374D",
161+
"fontWeight": "500",
162+
"marginBottom": "5px"
163+
}
164+
},
165+
"children": [
166+
"Output:"
167+
],
168+
"tagName": "div"
169+
},
170+
{
171+
"attributes": {
172+
"style": {
173+
"background": "#F7F9FA",
174+
"color": "#27374D",
175+
"fontFamily": "monospace",
176+
"marginBottom": "10px",
177+
"overflowX": "auto",
178+
"padding": "10px",
179+
"unicodeBidi": "embed",
180+
"whiteSpace": "pre"
181+
}
182+
},
183+
"children": [
184+
"Displayed colors for user and stored as `palettes['Dark Theme Portfolio Palette']`."
185+
],
186+
"tagName": "div"
187+
}
188+
],
189+
"tagName": "div"
190+
}
191+
],
192+
"tagName": "div"
193+
}
194+
],
195+
"tagName": "details"
196+
}
197+
],
198+
"tagName": "div"
199+
},
200+
"text/html": [
201+
"<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",
202+
" &quot;colors&quot;: [&quot;#0D1117&quot;, &quot;#161B22&quot;, &quot;#C9D1D9&quot;, &quot;#58A6FF&quot;, &quot;#F97316&quot;],\n",
203+
" &quot;store_as&quot;: &quot;Dark Theme Portfolio Palette&quot;\n",
204+
"}</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>"
205+
],
206+
"text/plain": [
207+
"<chatlab.display.ChatFunctionCall at 0x12ebdced0>"
208+
]
209+
},
210+
"metadata": {},
211+
"output_type": "display_data"
212+
},
213+
{
214+
"data": {
215+
"text/html": [
216+
"<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>"
217+
],
218+
"text/plain": [
219+
"Palette(['#0D1117', '#161B22', '#C9D1D9', '#58A6FF', '#F97316'], Dark Theme Portfolio Palette)"
220+
]
221+
},
222+
"metadata": {},
223+
"output_type": "display_data"
224+
},
225+
{
226+
"data": {
227+
"text/markdown": [
228+
"Here is your dark theme portfolio color palette:\n",
229+
"\n",
230+
"1. `#0D1117` - A very dark blue, almost black, for the main background color.\n",
231+
"2. `#161B22` - A slightly lighter dark blue for secondary background elements.\n",
232+
"3. `#C9D1D9` - A light gray for primary text, ensuring good readability against the dark background.\n",
233+
"4. `#58A6FF` - A bright blue for links and highlights, adding a pop of color.\n",
234+
"5. `#F97316` - A bold orange for call-to-action elements, drawing attention.\n",
235+
"\n",
236+
"This palette has been stored as `Dark Theme Portfolio Palette`."
237+
],
238+
"text/plain": [
239+
"Here is your dark theme portfolio color palette:\n",
240+
"\n",
241+
"1. `#0D1117` - A very dark blue, almost black, for the main background color.\n",
242+
"2. `#161B22` - A slightly lighter dark blue for secondary background elements.\n",
243+
"3. `#C9D1D9` - A light gray for primary text, ensuring good readability against the dark background.\n",
244+
"4. `#58A6FF` - A bright blue for links and highlights, adding a pop of color.\n",
245+
"5. `#F97316` - A bold orange for call-to-action elements, drawing attention.\n",
246+
"\n",
247+
"This palette has been stored as `Dark Theme Portfolio Palette`."
248+
]
249+
},
250+
"metadata": {
251+
"text/markdown": {
252+
"chatlab": {
253+
"default": true
254+
}
255+
}
256+
},
257+
"output_type": "display_data"
258+
}
259+
],
260+
"source": [
261+
"await chat(\"Create a palette for a portfolio site with a dark theme.\")"
262+
]
263+
},
264+
{
265+
"cell_type": "code",
266+
"execution_count": 8,
267+
"metadata": {},
268+
"outputs": [
269+
{
270+
"data": {
271+
"text/markdown": [
272+
"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",
273+
"\n",
274+
"- `#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",
275+
"\n",
276+
"- `#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",
277+
"\n",
278+
"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."
279+
],
280+
"text/plain": [
281+
"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",
282+
"\n",
283+
"- `#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",
284+
"\n",
285+
"- `#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",
286+
"\n",
287+
"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."
288+
]
289+
},
290+
"metadata": {
291+
"text/markdown": {
292+
"chatlab": {
293+
"default": true
294+
}
295+
}
296+
},
297+
"output_type": "display_data"
298+
}
299+
],
300+
"source": [
301+
"await chat(\"The first two colors are so close on my screen. How should I use these?\")"
302+
]
303+
}
304+
],
305+
"metadata": {
306+
"kernelspec": {
307+
"display_name": "chatlab-3kMKfU-i-py3.11",
308+
"language": "python",
309+
"name": "python3"
310+
},
311+
"language_info": {
312+
"codemirror_mode": {
313+
"name": "ipython",
314+
"version": 3
315+
},
316+
"file_extension": ".py",
317+
"mimetype": "text/x-python",
318+
"name": "python",
319+
"nbconvert_exporter": "python",
320+
"pygments_lexer": "ipython3",
321+
"version": "3.11.1"
322+
}
323+
},
324+
"nbformat": 4,
325+
"nbformat_minor": 2
326+
}

0 commit comments

Comments
 (0)