Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"next_button_title": null
}
-->
<p>In this course, you will create an AI agent. It will be very simple, performing just one task - drying the objects in your pictures. Yes, yes, this is a mock application to figure out how things work here.</p>
<p>Your application will be accessible through a browser, it will have a chat window where you can specify how best to dry the objects in the picture, a form for uploading the image and a result window. All of this will generate a Cursor for you.</p>
<p>In this course, you will create an AI agent. It will be very simple, performing just one task - changing the style of the image to watercolor.</p>
<p>Your application will be accessible through a browser, it will have a chat window where you can specify how best to change the style of the image, a form for uploading the image and a result window. All of this will generate a Cursor for you.</p>
<p>First, a bit of theory and at the same time familiarization with Cursor functions</p>
<p>Ask Cursor a question in chat and he will answer you, because he knows very well what an AI agent is.</p>
<p><checkable-item title="Run this prompt in chat"><callout type="chat">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,72 +12,72 @@
<warning>When the chat finishes creating or editing files, you should accept the changes by pressing the "Accept" or "Accept All" button.</warning>

<callout type="composer">
Create a file named project-rules.txt in the root of my project. Add the following content to it:
1. Application Architecture:
1.1. Use Gradio to create a web-based chatbot interface with:
- Text input for user messages
- Image upload capability
- Chat history display
- Image output display for processed images
1.2. Implement state management to maintain chat history
1.3. Use LangChain framework for agent implementation

2. Core Components:
2.1. Image Dryer (image_dryer.py):
- Use StableDiffusionImg2ImgPipeline from diffusers package
- Use "runwayml/stable-diffusion-v1-5" model

2.2. Chat Model (chat_model.py):
- Use OpenRouter API by passing base url and API key to Langchain's implementation
- Use model "google/gemini-2.0-flash-lite-preview-02-05:free"

2.3. Drying Agent (drying_agent.py):
- Implement dry_item tool
- Store current image and result in agent state
- Use system prompt focused on drying items
- Handle both text-only and image+text interactions

2.4. Main Application (app.py):
- Handle message processing
- Manage chat history
- Return both text responses and processed images

3. Testing:
3.1. Implement automated tests:
- Test chat without image
- Test chat with image
- Test image processing
- Save test results to test_results directory
3.2. Test the application by yourself running test scripts
3.3. Make sure the application processes uploaded images

4. Authentication:
4.1. Use OpenRouter API with provided credentials:
- API Key:
- API Host: https://openrouter.ai/api/v1
- Use default entities from Langchain - just pass provided base url and key. DO NOT EXTEND LANGCHAIN'S CLASSES

5. Dependencies:
5.1. Required packages:
- langchain
- gradio
- diffusers

6. Environment:
6.1. Use Python virtual environment
6.2. No fixed package versions required

7. User Experience:
7.1. Assistant should:
- Ask for item description if not provided
- Only process drying-related requests
- Maintain conversation context
- Show both chat history and processed images

8. Image Processing Guidelines:
8.1. Output images:
- Focus on dried appearance
- Use photorealistic style
Create a file named project-rules.txt in the root of my project. Add the following content to it:
Comment thread
RodinIvan marked this conversation as resolved.
Outdated
1. Application Architecture:
1.1. Use Gradio to create a web-based chatbot interface with:
- Text input for user messages
- Image upload capability
- Chat history display
- Image output display for processed images
1.2. Implement state management to maintain chat history
1.3. Use LangChain framework for agent implementation
2. Core Components:
2.1. Watercolor Painter (image_painter.py):
- Use StableDiffusionImg2ImgPipeline from diffusers package
- Use "stabilityai/stable-diffusion-2-1" model
2.2. Chat Model (chat_model.py):
- Use OpenRouter API by passing base url and API key to Langchain's implementation
- Use model "google/gemini-2.0-flash-lite-preview-02-05:free"
2.3. Watercolor Agent (watercolor_agent.py):
- Implement paint_watercolor tool
- Store current image and result in agent state
- Use system prompt focused on watercolor painting
- Handle both text-only and image+text interactions
2.4. Main Application (app.py):
- Handle message processing
- Manage chat history
- Return both text responses and processed images
3. Testing:
3.1. Implement automated tests:
- Test chat without image
- Test chat with image
- Test image processing
- Save test results to test_results directory
3.2. Test the application by yourself running test scripts
3.3. Make sure the application processes uploaded images
4. Authentication:
4.1. Use OpenRouter API with provided credentials:
- API Key:
- API Host: https://openrouter.ai/api/v1
- Use default entities from Langchain - just pass provided base url and key. DO NOT EXTEND LANGCHAIN'S CLASSES
5. Dependencies:
5.1. Required packages:
- langchain
- gradio
- diffusers
6. Environment:
6.1. Use Python virtual environment
6.2. No fixed package versions required
7. User Experience:
7.1. Assistant should:
- Ask for item description if not provided
- Only process watercolor painting-related requests
- Maintain conversation context
- Show both chat history and processed images
8. Image Processing Guidelines:
8.1. Output images:
- Focus on watercolor painting style
- Use artistic watercolor appearance
</callout>
</checkable-item>
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</callout>
</checkable-item>
</p>
<p>We hope the chat prompted you correctly. You need an API key that will allow you to access the LLM model and dry images.</p>
<p>We hope the chat prompted you correctly. You need an API key that will allow you to access the LLM model and watercolor paint images.</p>
<ol>
<li>To get it, sign up and sign in to the <a href="https://openrouter.ai/" target="_blank">OpenRouter website</a></li>
Comment thread
RodinIvan marked this conversation as resolved.
<li>Click on your profile icon in the top right corner</li>
Expand Down
14 changes: 10 additions & 4 deletions project_19_agent_all_dry/6_138_enjoy_the_result_and_test_it.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,24 @@
"next_button_title": null
}
-->
<p>When the app is generated, you can upload any image to it and ask the chat to dry it with additional instructions. Here are some examples for you to try and enjoy:</p>
<p>When the app is generated, you can upload any image to it and ask the chat to waterpaint it with additional instructions. Here are some examples for you to try and enjoy:</p>

<ul>
<li>
<a href="https://unsplash.com/photos/red-tomato-on-gray-concrete-surface-OlXUUQedQyM" target="_blank">This is a free to use tomato image</a>. Try to dry it in your app with the prompt: <code>This is a whole medium-sized red tomato. Make it sun-dried on a medium level.</code>
<a href="https://images.unsplash.com/photo-1467226632440-65f0b4957563" target="_blank">This is a free to use city view image</a>. Try to watercolor paint it in your app with the prompt: <code>Make a watercolor painting of this image on a sunset.</code>
</li>
<li>
<a href="https://unsplash.com/photos/white-and-brown-long-fur-cat-ZCHj_2lJP00" target="_blank">This is also a free kitten image</a>. Just for fun, try drying it in your app with the prompt: <code>This is a tiny kitten. Please dry it and make it completely dehydrated.</code>
<a href="https://unsplash.com/photos/white-and-brown-long-fur-cat-ZCHj_2lJP00" target="_blank"> This is also a free kitten image</a>. Let's try to watercolor paint it with the prompt: <code>Make a watercolor painting of this kitten with a warm color pallette</code>
</li>
</ul>

<p>Feel free to dry any of your own images. Experiment and enjoy. Keep in mind that image processing usually takes time. Be patient.</p>
<p>Feel free to watercolorpaint any of your own images. Experiment and enjoy. Keep in mind that image processing usually takes time. Be patient.</p>

<p>If you don't like the result, you can ask chat to explain the code in the <code>image_painter.py</code> file and fix it. You can also ask it to change the prompt to get a different result.</p>

<callout type="chat" include-file="image_painter.py">
Explain the code in the @image_painter.py file, and propose the meaningful changes to improve the image generation results.
</callout>

<p>Now you're a little more familiar with Cursor. You can move on to more complex applications and learn new features. We can help you with that! Bye!</p>
<p>Want to build even more engaging AI projects with guidance from senior engineers? Join our <a href="https://go.hyperskill.org/ai-engineer-bootcamp">AI Engineer Bootcamp</a>.</p>
Expand Down
8 changes: 4 additions & 4 deletions project_19_agent_all_dry/project.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"id": 19,
"description": "A web-based chatbot application that helps users dry various items using AI image processing and natural language capabilities.",
"description": "A web-based chatbot application that helps users watercolor paint various items using AI image processing and natural language capabilities.",
"title": "Agent \"All Dry\"",
"categories": "AI, RAG, Langchain",
"categories": "AI, Langchain, Image Generation",
"cover_url": "https://pdqqywctjlfcaeeaykvj.supabase.co/storage/v1/object/public/aidl-bucket//output_4-2.png",
"readme": "# Item Drying Assistant\n\nA web-based chatbot application that helps users dry various items using AI image processing and natural language capabilities.\n\n[Link to project](https://enlightby.ai/#/projects/19) \n[Install Enlighter extention](https://marketplace.visualstudio.com/items?itemName=ai-dl.enlighter) \n[Join Discord Server](https://discord.gg/VfAzUvUxRM)\n\n## Features\n\n- Chat interface for discussing drying methods\n- Image upload capability for processing wet items\n- AI-powered image transformation to make items appear dry\n- Specialized assistant focused on drying-related advice\n\n## Architecture\n\nThis application uses:\n- **Gradio**: For the web interface\n- **LangChain**: For the agent implementation\n- **Stable Diffusion**: For image processing\n- **OpenRouter API**: For accessing Gemini model\n\n## Components\n\n1. **Image Dryer**: Uses Stable Diffusion to transform images\n2. **Chat Model**: Connects to OpenRouter API to access Gemini model\n3. **Drying Agent**: Integrates chat and image processing\n4. **Main Application**: Provides the Gradio web interface\n\n## Setup\n\n1. Clone this repository\n2. Create a virtual environment:\n ```\n python -m venv venv\n source venv/bin/activate # On Windows: venv\\Scripts\\activate\n ```\n3. Install dependencies:\n ```\n pip install -r requirements.txt\n ```\n4. Set your OpenRouter API key (optional, default key is provided):\n ```\n export OPENROUTER_API_KEY=your_api_key_here\n ```\n\n## Running the Application\n\nRun the application with:\n```\npython app.py\n```\n\nThe application will start a local web server and provide a URL to access the interface.\n\n## Testing\n\nRun the tests with:\n```\npython test_app.py\n```\n\nThis will test all components of the application and save test results in the `test_results` directory.\n\n## Usage\n\n1. Type a message about an item you want to dry\n2. Optionally upload an image of a wet item\n3. The assistant will provide advice and process the image to show how it would look when dry\n4. Continue the conversation to get more specific advice\n\n## Example Prompts\n\n- \"How do I dry a wet book?\"\n- \"Can you help me dry this wet painting?\" (with image upload)\n- \"What's the best way to dry a wet phone?\"\n- \"I spilled water on my laptop, how can I dry it?\"\n \n \n \n ",
"short_description": "Use RAG to keep your images dry \u2014 experiment with AI agents for image handling",
"readme": "# Item Watercolor Painting Assistant\n\nA web-based chatbot application that helps users watercolor paint various items using AI image processing and natural language capabilities.\n\n[Link to project](https://enlightby.ai/#/projects/19) \n[Install Enlighter extention](https://marketplace.visualstudio.com/items?itemName=ai-dl.enlighter) \n[Join Discord Server](https://discord.gg/VfAzUvUxRM)\n\n## Features\n\n- Chat interface for discussing watercolor painting methods\n- Image upload capability for processing items\n- AI-powered image transformation to make items appear as watercolor paintings\n- Specialized assistant focused on watercolor painting advice\n\n## Architecture\n\nThis application uses:\n- **Gradio**: For the web interface\n- **LangChain**: For the agent implementation\n- **Stable Diffusion**: For image processing\n- **OpenRouter API**: For accessing Gemini model\n\n## Components\n\n1. **Image Watercolor Painter**: Uses Stable Diffusion to transform images\n2. **Chat Model**: Connects to OpenRouter API to access Gemini model\n3. **Watercolor Painting Agent**: Integrates chat and image processing\n4. **Main Application**: Provides the Gradio web interface\n\n## Setup\n\n1. Clone this repository\n2. Create a virtual environment:\n ```\n python -m venv venv\n source venv/bin/activate # On Windows: venv\\Scripts\\activate\n ```\n3. Install dependencies:\n ```\n pip install -r requirements.txt\n ```\n4. Set your OpenRouter API key (optional, default key is provided):\n ```\n export OPENROUTER_API_KEY=your_api_key_here\n ```\n\n## Running the Application\n\nRun the application with:\n```\npython app.py\n```\n\nThe application will start a local web server and provide a URL to access the interface.\n\n## Testing\n\nRun the tests with:\n```\npython test_app.py\n```\n\nThis will test all components of the application and save test results in the `test_results` directory.\n\n## Usage\n\n1. Type a message about an item you want to watercolor paint\n2. Optionally upload an image of an item\n3. The assistant will provide advice and process the image to show how it would look as a watercolor painting\n4. Continue the conversation to get more specific advice\n\n## Example Prompts\n\n- \"How do I watercolor paint a book?\"\n- \"Can you help me watercolor paint this painting?\" (with image upload)\n- \"What's the best way to watercolor paint a phone?\"\n- \"I want to watercolor paint my laptop, how can I do it?\"\n \n \n \n ",
"short_description": "Use RAG to watercolor paint your images experiment with AI agents for image handling",
"ides": "cursor"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!-- Enlighter Metainfo
{
"id": 2015,
"title": "What are you going to build?",
"next_button_title": null
}
-->
<p>In this course, you will create an AI agent. It will be very simple, performing just one task - changing the style of the image to watercolor.</p>
<p>Your application will be accessible through a browser, it will have a chat window where you can specify how best to change the style of the image, a form for uploading the image and a result window. All of this will generate a Cursor for you.</p>
<p>First, a bit of theory and at the same time familiarization with Junie functions</p>
<p>Ask Cursor a question in chat and he will answer you, because he knows very well what an AI agent is.</p>
Comment thread
RodinIvan marked this conversation as resolved.
Outdated
<p><checkable-item title="Run this prompt in chat"><callout type="chat">
Explain to me, as if I am 14 years old and don't know much about computers, what an AI agent is. Give me examples and metaphors to help me understand.
</callout></checkable-item></p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!-- Enlighter Metainfo
{
"id": 134,
"title": "Set up your Junie Chat Assistant",
"next_button_title": null
}
-->
<content-template name="junie_install"></content-template>
Loading