Using Images
Learn how to upload, analyze, and work with images in Assembly for various development tasks
Factory provides powerful capabilities for working with images in your development workflow. This guide will walk you through the process of uploading images, analyzing them with AI, and utilizing them in various development contexts.
Uploading Images
1
Access the Image Upload Feature
In your Factory session, locate the image upload button, found in the chat panel input.
2
Select Your Image
Click the upload button and choose the image file from your local system. Factory supports common image formats like PNG, JPEG, and SVG.
3
Confirm Upload
Once selected, the image will upload automatically. You’ll see a preview in the chat or media panel.
For optimal performance, try to keep image file sizes under 5MB. Larger images may take longer to process.
Analyzing Images with AI
After uploading an image, you can ask Factory to analyze it:1
Request Analysis
In the chat, ask Factory to analyze the image. For example:
“Can you describe the contents of this image?”
2
Review AI Description
Factory will provide a detailed description of the image contents, including objects, colors, text, and layout.
3
Ask Follow-up Questions
You can ask more specific questions about the image, such as:
“What colors are predominant in this image?”
“Is there any text visible in the image?”
Using Images in Development Tasks
UI Development
Images can be invaluable in UI development tasks:Generating Components from Designs
Generating Components from Designs
- Upload a screenshot or mockup of a UI design.
- Ask Factory to generate a React component based on the image.
- Refine the generated code through further instructions.
Extracting Color Palettes
Extracting Color Palettes
- Upload a reference image or brand guide.
- Ask Factory to extract the color palette.
- Use the extracted colors in your CSS or design tokens.
Documentation
Leverage images to enhance your documentation:Generating Diagrams
Generating Diagrams
- Upload a rough sketch or describe a system architecture.
- Ask Factory to create a polished diagram.
- Refine the diagram through iterative prompts.
Annotating Screenshots
Annotating Screenshots
- Upload a screenshot of your application.
- Ask Factory to annotate key features or explain the UI elements.
- Use the annotated image in your user documentation.
Image Processing Tasks
Factory can assist with various image processing tasks:- Suggesting cropping or resizing dimensions
- Recommending image optimization techniques
- Generating image metadata or alt text for accessibility
Best Practices
- Use Clear, High-Quality Images: The clearer the image, the better Factory can analyze and work with it.
- Be Specific in Your Requests: When asking Factory to work with an image, be as specific as possible about what you want.
- Iterate and Refine: Don’t hesitate to ask for modifications or clarifications on image-related tasks.
- Respect Copyright: Ensure you have the right to use and modify any images you upload.
Limitations
- Factory cannot generate, edit, or manipulate images directly. It can only analyze existing images and provide text-based responses or code.
- Image analysis may not be 100% accurate, especially for complex or ambiguous images.
- Factory’s image capabilities are designed to assist in development tasks, not for general-purpose image editing or creation.
Conclusion
Incorporating images into your Factory workflow can significantly enhance your development process, from UI design to documentation. By leveraging Factory’s AI capabilities, you can extract valuable insights and automate various image-related tasks.Explore UI Development
Learn more about how Factory can assist in UI development tasks, including working with design images.