From 59d32f9cb4ac82549a4cdd28c6b06d4c0fb99301 Mon Sep 17 00:00:00 2001 From: Andrey Shakirov Date: Mon, 23 Sep 2024 11:19:21 -0400 Subject: [PATCH] Feature/image diff cli tutorial (#51) * image diff tutorial * updated prompt for image diff command --- devai-cli/src/devai/commands/review.py | 9 +-- .../image-diff-cli/image-diff-cli.md | 59 +++++++++++++++++++ 2 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 docs/tutorials/image-diff-cli/image-diff-cli.md diff --git a/devai-cli/src/devai/commands/review.py b/devai-cli/src/devai/commands/review.py index b6339a1..b5d41f0 100644 --- a/devai-cli/src/devai/commands/review.py +++ b/devai-cli/src/devai/commands/review.py @@ -779,11 +779,11 @@ def imgdiff(current, target): """ before_state=''' - BEFORE UPGRADE STATE: + IMAGE 1: ''' after_state=''' - AFTER UPGRADE STATE: + IMAGE 2: ''' qry = get_prompt('review_query') @@ -791,8 +791,9 @@ def imgdiff(current, target): if qry is None: qry=''' INSTRUCTIONS: - Analyze images of the Web page and write the report about what UI elements are missing between the two images. - Explain how you reached this decision. + Meticulously examine the two provided images. Generate a comprehensive report detailing the specific + elements absent from each image in comparison to the other. Clearly articulate the reasoning and + methodology employed to arrive at your conclusions. ''' contents = [qry, after_state, load_image_from_path(current), diff --git a/docs/tutorials/image-diff-cli/image-diff-cli.md b/docs/tutorials/image-diff-cli/image-diff-cli.md new file mode 100644 index 0000000..e797525 --- /dev/null +++ b/docs/tutorials/image-diff-cli/image-diff-cli.md @@ -0,0 +1,59 @@ +## DEVAI CLI - Image analysis + +This example demonstrates ways to integrate LLM models into a custom command line utility for use by developers both locally and part of CICD pipeline to automate image analisys. + +### CLI Setup steps + +Follow this tutorial to setup DEVAI CLI - [setup-cli](../setup-cli.md). + + +### Image analysis command: + +Update the path to the images in the cloned repository: +``` +devai review imgdiff \ + -c ~/genai-for-developers/images/devai-api.png \ + -t ~/genai-for-developers/images/devai-api-slack.png +``` + +### Sample output: +--- +## Comprehensive Comparison of Image 1 and Image 2 + +These images illustrate different use cases for integrating Gemini with other platforms like GitLab, Jira, and potentially Slack. While sharing core components, distinct elements set them apart: + +**Elements Absent in Image 2 (Compared to Image 1):** + +1. **Slack Integration:** + * **Reasoning:** Image 1 prominently features Slack ("Team channel," "Send message to GenAI Agent"), entirely absent in Image 2. + * **Methodology:** Direct visual comparison; Image 2 lacks any Slack icon or related text. +2. **Storage Bucket (with PDFs):** + * **Reasoning:** Image 1 connects "Vertex AI Agents" to a "Storage Bucket" containing "PDFs." This element, crucial for the "Q&A over docs" aspect, is missing from Image 2. + * **Methodology:** Visual inspection confirms Image 2 focuses on code-related actions ("Cloud Workstation," "Deploy CR app," etc.) without referencing document storage. +3. **GenAI Agent Role as "Assistant":** + * **Reasoning:** Image 1 explicitly states "GenAI Assistant" in the use case description, implying user interaction and assistance. Image 2 lacks this, focusing on "JIRA user story implementation." + * **Methodology:** Textual analysis of use case titles highlights the different roles envisioned for GenAI in each scenario. +4. **Direct JIRA Issue Creation:** + * **Reasoning:** Image 1 depicts a flow where actions can directly "Open JIRA issue." Image 2 connects to Jira for "Story description" and "Add comments" but not explicit issue creation. + * **Methodology:** Examination of process flow arrows reveals this difference in how JIRA is utilized. + +**Elements Absent in Image 1 (Compared to Image 2):** + +1. **Cloud Workstation:** + * **Reasoning:** Image 2 showcases a "Cloud Workstation" used to "Deploy CR app," suggesting a hands-on development environment absent in Image 1's more automated flow. + * **Methodology:** Image 1 lacks any visual or textual reference to a dedicated development workstation within the process. +2. **"Happy GCP Users" interacting with Code:** + * **Reasoning:** Image 2 connects "Happy GCP Users" to "Open code in Cloud Workstations (inspirational)." Image 1 solely focuses on user interaction with the GenAI agent via Slack. + * **Methodology:** Arrow direction in Image 2 implies users engaging with code directly, not just the agent as in Image 1. + +**Conclusion:** + +These images are NOT merely variations of the same system. They represent distinct use cases leveraging overlapping technology. Image 1 showcases a GenAI **assistant** for Q&A and task automation, relying heavily on Slack and document access. In contrast, Image 2 illustrates a GenAI-powered workflow for **JIRA user story implementation,** emphasizing code deployment and cloud workstations. + +--- + +### Image 1: +![Slack - JIRA - Gemini Integration](../../../images/devai-api.png "Slack - JIRA - Gemini Integration") + +### Image 2: +![Slack - JIRA - Gemini Integration](../../../images/devai-api-slack.png "Slack - JIRA - Gemini Integration")