diff --git a/docs/source/_static/chat-ask-command.png b/docs/source/_static/chat-ask-command.png index 48ee7dd89..7ae3c0e7f 100644 Binary files a/docs/source/_static/chat-ask-command.png and b/docs/source/_static/chat-ask-command.png differ diff --git a/docs/source/_static/chat-explain-code-output.png b/docs/source/_static/chat-explain-code-output.png index 0a25252d0..eccc7308e 100644 Binary files a/docs/source/_static/chat-explain-code-output.png and b/docs/source/_static/chat-explain-code-output.png differ diff --git a/docs/source/_static/chat-generate-command-response.png b/docs/source/_static/chat-generate-command-response.png index 45ab63f34..418c8676b 100644 Binary files a/docs/source/_static/chat-generate-command-response.png and b/docs/source/_static/chat-generate-command-response.png differ diff --git a/docs/source/_static/chat-generate-file.png b/docs/source/_static/chat-generate-file.png index 70d7796b2..9be9b0bd0 100644 Binary files a/docs/source/_static/chat-generate-file.png and b/docs/source/_static/chat-generate-file.png differ diff --git a/docs/source/_static/chat-generate-input.png b/docs/source/_static/chat-generate-input.png index d9547512e..4f6d571e5 100644 Binary files a/docs/source/_static/chat-generate-input.png and b/docs/source/_static/chat-generate-input.png differ diff --git a/docs/source/_static/chat-hello-world.png b/docs/source/_static/chat-hello-world.png index 033621cf0..1ca8fa4a3 100644 Binary files a/docs/source/_static/chat-hello-world.png and b/docs/source/_static/chat-hello-world.png differ diff --git a/docs/source/_static/chat-icon-left-tab-bar.png b/docs/source/_static/chat-icon-left-tab-bar.png index 78ef3dfa9..12c691a65 100644 Binary files a/docs/source/_static/chat-icon-left-tab-bar.png and b/docs/source/_static/chat-icon-left-tab-bar.png differ diff --git a/docs/source/_static/chat-learn-delete.png b/docs/source/_static/chat-learn-delete.png index 0ec5a7462..3889cd7ad 100644 Binary files a/docs/source/_static/chat-learn-delete.png and b/docs/source/_static/chat-learn-delete.png differ diff --git a/docs/source/_static/chat-learn-docs.png b/docs/source/_static/chat-learn-docs.png index 74f5a70c5..942313b22 100644 Binary files a/docs/source/_static/chat-learn-docs.png and b/docs/source/_static/chat-learn-docs.png differ diff --git a/docs/source/_static/css/custom.css b/docs/source/_static/css/custom.css new file mode 100644 index 000000000..1858f4fee --- /dev/null +++ b/docs/source/_static/css/custom.css @@ -0,0 +1,5 @@ +img.screenshot { + /* Copied from div.admonition */ + box-shadow: 0 .2rem .5rem var(--pst-color-shadow),0 0 .0625rem var(--pst-color-shadow); + border-color: var(--pst-color-info); +} \ No newline at end of file diff --git a/docs/source/conf.py b/docs/source/conf.py index b2d22b155..8edc80417 100644 --- a/docs/source/conf.py +++ b/docs/source/conf.py @@ -25,6 +25,10 @@ html_theme = "pydata_sphinx_theme" html_static_path = ['_static'] +html_css_files = [ + 'css/custom.css', +] + # -- Jupyter theming ------------------------------------------------- html_logo = "_static/jupyter_logo.png" diff --git a/docs/source/users/index.md b/docs/source/users/index.md index a29b51f83..1fe42f912 100644 --- a/docs/source/users/index.md +++ b/docs/source/users/index.md @@ -131,11 +131,15 @@ The chat interface sends data to generative AI models hosted by third parties. P Once you have started JupyterLab, click the new "chat" icon in the left side panel to open the chat interface. You can right-click on the panel icon and move it to the other side, if you prefer. -![Screen shot of the initial, blank, chat interface.](../_static/chat-icon-left-tab-bar.png) +Screen shot of the initial, blank, chat interface. To compose a message, type it in the text box at the bottom of the chat interface and press SHIFT+ENTER to send. You can press ENTER to add a new line. Once you have sent a message, you should see a response from Jupyter AI. -![Screen shot of an example "Hello world" message sent to Jupyter AI, who responds with "Hello! Is there anything you would like to discuss or ask me?"](../_static/chat-hello-world.png) +Screen shot of an example "Hello world" message sent to Jupyter AI, who responds with "Hello! Is there anything you would like to discuss or ask me?" ### Asking about something in your notebook @@ -150,11 +154,15 @@ Review your model provider's cost policy before making large requests. After highlighting a portion of your notebook, check "Include selection" in the chat panel, type your message, and press SHIFT+ENTER to send your message. Your outgoing message will include your selection. -![Screen shot of JupyterLab with Jupyter AI's chat panel active. A Python function is selected, the user has "What does this code do?" as their prompt, and the user has chosen to include the selection with their message.](../_static/chat-interface-selection.png) +Screen shot of JupyterLab with Jupyter AI's chat panel active. A Python function is selected, the user has "What does this code do?" as their prompt, and the user has chosen to include the selection with their message. Below your message, you will see Jupyter AI's response. -![Screen shot of Jupyter AI's chat panel, showing an answer to the question asked above.](../_static/chat-explain-code-output.png) +Screen shot of Jupyter AI's chat panel, showing an answer to the question asked above. You can copy Jupyter AI's response to the clipboard so that you can paste it into your notebook, or into any other application. You can also choose to replace the selection with Jupyter AI's response by clicking "Replace selection" before you send your message. @@ -165,23 +173,31 @@ sends its response to your message. Review any generated code carefully before you run it. ::: -![Screen shot of Jupyter AI with a Python function selected, the user having typed "Rewrite this function to be iterative, not recursive" as their prompt, and with the user having chosen to include the selection with their message and to replace the selection with the response.](../_static/chat-replace-selection-input.png) +Screen shot of Jupyter AI with a Python function selected, the user having typed "Rewrite this function to be iterative, not recursive" as their prompt, and with the user having chosen to include the selection with their message and to replace the selection with the response. After Jupyter AI sends a response, your notebook will be updated immediately with the response replacing the selection. You can also see the response in the chat panel. -![Screen shot of Jupyter AI displaying a response in the chat panel and in the notebook.](../_static/chat-replace-selection-output.png) +Screen shot of Jupyter AI displaying a response in the chat panel and in the notebook. ### Generating a new notebook You can use Jupyter AI to generate an entire notebook from a text prompt. To get started, open the chat panel, and send it a message starting with `/generate`. -![Screen shot of a prompt reading "/generate A demonstration of how to use Matplotlib" in Jupyter AI](../_static/chat-generate-input.png) +Screen shot of a prompt reading "/generate A demonstration of how to use Matplotlib" in Jupyter AI Generating a notebook can take a substantial amount of time, so Jupyter AI will respond to your message immediately while it works. You can continue to ask it other questions in the meantime. -![Screen shot of Jupyter AI responding to a generate message with a message that it is working on a notebook.](../_static/chat-generate-command-response.png) +Screen shot of Jupyter AI responding to a generate message with a message that it is working on a notebook. -:::{info} +:::{note} :name: generate-progress Especially if your prompt is detailed, it may take several minutes to generate your notebook. During this time, you can still use JupyterLab and Jupyter AI @@ -191,7 +207,9 @@ Jupyter AI is working. When Jupyter AI is done generating your notebook, it will send you another message with the filename that it generated. -![Screen shot of Jupyter AI response indicating the file name that it wrote.](../_static/chat-generate-file.png) +Screen shot of Jupyter AI response indicating the file name that it wrote. You can then open this file using the file browser. @@ -202,7 +220,9 @@ you run the code contained in them. Please review all generated code carefully before you run it. ::: -![Screen shot of generated notebook built using Jupyter AI](../_static/chat-generate-notebook-opened.png) +Screen shot of generated notebook built using Jupyter AI ### Learning about local data @@ -210,15 +230,21 @@ Using the `/learn` command, you can teach Jupyter AI about local data so that it To teach Jupyter AI about a folder full of documentation, for example, run `/learn docs/`. You will receive a response when Jupyter AI has indexed this documentation in a local vector database. -![Screen shot of "/learn docs/" command and a response.](../_static/chat-learn-docs.png) +Screen shot of "/learn docs/" command and a response. You can then use `/ask` to ask a question specifically about the data that you taught Jupyter AI with `/learn`. -![Screen shot of an "/ask" command and a response.](../_static/chat-ask-command.png) +Screen shot of an "/ask" command and a response. To clear the local vector database, you can run `/learn -d` and Jupyter AI will forget all information that it learned from your `/learn` commands. -![Screen shot of a "/learn -d" command and a response.](../_static/chat-learn-delete.png) +Screen shot of a "/learn -d" command and a response. ### Additional chat commands