Media Library

Visual media is a crucial component of modern web applications. Frontend provides robust tools for managing and integrating images and videos into your projects, making it easy to create visually compelling experiences.

Media Library

Frontend includes a built-in Media Library that serves as a central repository for all your project’s visual assets. With the Media Library, you can:

• Upload Files: Add images and videos directly from your computer
• Organize Content: Categorize and tag media for easy retrieval
• Version Control: Maintain different versions of your media assets
• Optimize Files: Automatically optimize media for web performance
• Secure Storage: Safely store your media in the cloud

The Media Library provides a seamless way to manage all the visual content used across your application, ensuring assets are properly organized and readily available when needed.

AI Image Generation

Frontend includes powerful AI image generation capabilities that allow you to create custom visuals directly within your workflow using simple text prompts.

Creating Images with AI

You can generate images using natural language prompts. Simply describe what you need:

• “Create an image for a modern tech startup homepage”
• “Create an image for a coffee shop landing page with warm tones”
• “Create an image for a fitness app hero section showing active people”

The AI will generate a custom image based on your description, which you can then use immediately in your project or save to your Media Library.

Editing Images with AI

Frontend also allows you to modify and refine images through an intuitive editing workflow:

1. Select an Image: Choose an image from your Media Library or directly from within the chat
2. Add to Prompt: Click the “Add to Prompt” button to include the image in your current prompt
3. Describe Changes: Modify your prompt to specify the changes you want, such as:
   • “Generate an identical image but replace the background with a mountain landscape”
   • “Generate an identical image but modify the color scheme to use blues and greens”
   • “Generate an identical image but add a sunset in the background”

This iterative approach allows you to refine images until they perfectly match your vision, giving you complete creative control over your visual assets.

Adding Images to Your Project

Incorporating images into your Frontend project is straightforward and can be done through the AI-assisted workflow.

Using the Media Modal

1. Look for the media button located near the prompt input in the interface
2. Click to open the Media Modal, which gives you access to both your Media Library and Unsplash
3. Select an image from either source
4. The image is now ready to be used in your project

Directing the AI to Use Selected Images

Once you’ve selected an image, you can simply tell the AI how to incorporate it into your project using natural language instructions:

• “Add this image as the background of the homepage hero section”
• “Use this image in the about us section with a rounded border”
• “Create a gallery that includes this image along with the other product photos”
• “Set this image as the banner for the blog post”
• “Use this image as the thumbnail for the featured video”

The AI will understand your instructions and apply the selected image accordingly, handling all the necessary code implementation.