Copilot image capabilities on GitHub.com [Public Preview] (#54934)

Co-authored-by: Ellie Bennett <[email protected]>
Co-authored-by: Sunbrye Ly <[email protected]>

Author: 3 people

content/copilot/managing-copilot/managing-github-copilot-in-your-organization/managing-policies-for-copilot-in-your-organization.md

@@ -29,7 +29,7 @@ Organization owners can set policies to govern how {% data variables.product.pro
 * {% data variables.product.prodname_copilot_short %} in {% data variables.product.prodname_dotcom_the_website %}
 * {% data variables.product.prodname_copilot_chat_short %} in the IDE
 * Editor preview features, such as:
-  * Vision (available in {% data variables.product.prodname_vscode_shortname %} and {% data variables.product.prodname_vs %})
+  * Using images in {% data variables.product.prodname_copilot_chat_short %} (available in {% data variables.product.prodname_vscode_shortname %} and {% data variables.product.prodname_vs %})
   * {% data variables.copilot.next_edit_suggestions_caps %} (available in {% data variables.product.prodname_vscode_shortname %})
   * GPT-4o {% data variables.product.prodname_copilot_short %} code completion (available in {% data variables.product.prodname_vscode_shortname %} and JetBrains IDEs)
   * {% data variables.product.prodname_copilot_short %} Edits agent mode (available in {% data variables.product.prodname_vscode_shortname %})

content/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-github.md

@@ -325,6 +325,28 @@ You can ask {% data variables.product.prodname_copilot_short %} to explain the c
 
 {% data reusables.copilot.stop-response-generation %}
 
+## Using images in {% data variables.product.prodname_copilot_chat_short %}
+
+> [!NOTE]
+> * Attaching images to chat prompts is currently in {% data variables.release-phases.public_preview %} and is subject to change.
+> * You can only attach an image in the immersive view of {% data variables.product.prodname_copilot_chat_short %} ([https://github.com/copilot](https://github.com/copilot)), not in the chat panel.
+
+You can attach an image to {% data variables.product.prodname_copilot_short %} and then ask about the image. For example, you can attach:
+
+{% data reusables.copilot.image-questions-and-file-types %}
+
+### Attaching an image to your chat prompt
+
+1. Go to the immersive view of {% data variables.product.prodname_copilot_chat_short %} ([https://github.com/copilot](https://github.com/copilot)).
+1. Make sure you have **GPT-4o** selected in the AI model picker at the top of the page.
+1. Do one of the following:
+
+   * Copy an image and paste it into the prompt box at the bottom of the page.
+   * Click {% octicon "paperclip" aria-label="Add attachment" %} in the prompt box, then click **Image**. Browse to the image file you want to attach, select it and click **Open**.
+   * Drag and drop an image file from your operating system's file explorer into the prompt box.
+
+{% data reusables.copilot.type-prompt-for-image %}
+
 ## Accessing {% data variables.product.prodname_copilot_chat_short %} from the search bar
 
 You can ask {% data variables.product.prodname_copilot_short %} a question about an entire repository by typing your question in the main search box of the repository.

content/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide.md

@@ -131,15 +131,21 @@ For more detailed instructions, see [{% data variables.product.prodname_copilot_
 
 For more information, see [{% data variables.product.prodname_copilot_edits_short %}](https://aka.ms/vscode-copilot-agent) in the {% data variables.product.prodname_vscode %} documentation.
 
-## Vision
+## Using images in {% data variables.product.prodname_copilot_chat_short %}
 
-> [!NOTE] Vision is currently in {% data variables.release-phases.public_preview %} and is subject to change.
+{% data reusables.copilot.using-images-in-chat %}
 
-Vision requires that you use the GPT-4o model and upload one of the following file types: JPEG (`.jpg`, `.jpeg`), PNG (`.png`), GIF (`.gif`), or WEBP (`.webp`).
+### Attaching images to your chat prompt
 
-You can attach images to your chat prompts to help {% data variables.product.prodname_copilot_short %} understand your question. For example, you can attach a screenshot of a code snippet to ask {% data variables.product.prodname_copilot_short %} to explain the code, or share mockups of new designs to ask {% data variables.product.prodname_copilot_short %} to generate code.
+1. Make sure GPT-4o is selected in the model picker at the bottom right of the chat view.
 
-You can drag and drop images into the chat window, or attach them through the {% data variables.product.prodname_vscode_shortname %} UI.
+1. Do one of the following:
+
+   * Copy an image and paste it into the chat view.
+   * Drag and drop one or more image file from your operating system's file explorer—or from the Explorer in {% data variables.product.prodname_vscode_shortname %}—into the chat view.
+   * Right-click an image file in the {% data variables.product.prodname_vscode_shortname %} Explorer and click **{% data variables.product.prodname_copilot_short %}** then **Add File to Chat**.
+
+{% data reusables.copilot.type-prompt-for-image %}
 
 ## Sharing feedback
 
@@ -245,15 +251,22 @@ In addition to submitting prompts through the chat window, you can submit prompt
 
 See [Ask questions in the inline chat view](https://learn.microsoft.com/visualstudio/ide/visual-studio-github-copilot-chat#ask-questions-in-the-inline-chat-view) in the {% data variables.product.prodname_vs %} documentation for more details.
 
-## Vision
+## Using images in {% data variables.product.prodname_copilot_chat_short %}
+
+{% data reusables.copilot.using-images-in-chat %}
+
+### Attaching images to your chat prompt
+
+1. Make sure GPT-4o is selected in the model picker at the bottom right of the chat view.
 
-> [!NOTE] Vision is currently in {% data variables.release-phases.public_preview %} and is subject to change.
+1. Do one of the following:
 
-Vision requires that you use the GPT-4o model and upload one of the following file types: JPEG (`.jpg`, `.jpeg`), PNG (`.png`), GIF (`.gif`), or WEBP (`.webp`).
+   * Copy an image and paste it into the chat view.
+   * Click the paperclip icon at the bottom right of the chat view, click **Upload Image**, browse to the image file you want to attach, select it and click **Open**.
 
-You can attach images to your chat prompts to help {% data variables.product.prodname_copilot_short %} understand your question. For example, you can attach a screenshot of a code snippet to ask {% data variables.product.prodname_copilot_short %} to explain the code, or share mockups of new designs to ask {% data variables.product.prodname_copilot_short %} to generate code.
+   You can add multiple images if required.
 
-You can drag and drop images into the chat window, or attach them through the {% data variables.product.prodname_vs %} UI.
+1. Type your prompt into the chat view to accompany the image. For example, `explain this image`, or `describe each of these images in detail`.
 
 ## Sharing feedback
 

data/reusables/copilot/image-questions-and-file-types.md

@@ -0,0 +1,7 @@
+* A screenshot of a code snippet and ask {% data variables.product.prodname_copilot_short %} to explain the code.
+* A mockup of the user interface for an application and ask {% data variables.product.prodname_copilot_short %} to generate the code.
+* A flowchart and ask {% data variables.product.prodname_copilot_short %} to describe the processes shown in the image.
+* A screenshot of a web page and ask {% data variables.product.prodname_copilot_short %} to generate HTML for a similar page.
+
+> [!NOTE]
+> The following types of image file are supported: JPEG (`.jpg`, `.jpeg`), PNG (`.png`), GIF (`.gif`), or WEBP (`.webp`).

data/reusables/copilot/type-prompt-for-image.md

@@ -0,0 +1 @@
+1. Type your prompt into the chat view to accompany the image. For example, `explain this diagram`, `describe each of these images in detail`, `what does this error message mean`.

data/reusables/copilot/using-images-in-chat.md

@@ -0,0 +1,7 @@
+> [!NOTE]
+> * Attaching images to chat prompts is currently in {% data variables.release-phases.public_preview %} and is subject to change.
+> * {% data reusables.copilot.editor-preview-settings %}
+
+You can attach images to your chat prompts and then ask {% data variables.product.prodname_copilot_short %} about the images. For example, you can attach:
+
+{% data reusables.copilot.image-questions-and-file-types %}