Initial commit with basic features.

[saravatpt]

No description provided.

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[gemini-code-assist]

Summary of Changes

Hello @saravatpt, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly expands the application's image manipulation capabilities by integrating comprehensive photo editing and image composition features. It introduces intuitive control panels for users to fine-tune their images and manage their creative output through an organized history system. The addition of a full-screen image preview modal also improves the overall user experience when interacting with visual content.

Highlights

• Image Editing and Composition Controls: Introduced dedicated UI controls for advanced photo editing (brightness, contrast, warmth, background manipulation, object removal, enhancements, styles) and image composition (blend, collage, style transfer, subject placement, character consistency, lighting harmonization, text integration).
• Image History with Folder Organization: Implemented a new history panel that automatically saves generated images, allowing users to browse past creations. This history can be organized into custom folders, with options to create new folders and move images between them.
• Full-Screen Image Preview: Added a global image preview modal that allows users to view uploaded or generated images in full-screen, enhancing the visual inspection experience.
• Dynamic Prompt Generation: The new photo editor and image composer controls dynamically generate detailed prompts based on user selections, which are then used for image manipulation via AI models.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces several new features, including image history with folder organization, an image preview modal, and dedicated controls for photo editing and image composition. The code is well-structured, particularly with the addition of new components and the use of a React context for the image preview. I've identified a few areas for improvement, mainly in app/page.tsx:

• Replacing the window.prompt() for a better user experience.
• Using a more robust method for generating unique IDs.
• Refactoring duplicated code into a helper function.
• Moving type definitions out of the component body.

These changes will enhance the code's maintainability, robustness, and user experience. Overall, this is a great addition of features.

[gemini-code-assist]

The use of window.prompt() for assigning an image to a folder is not recommended. It provides a poor user experience, is a blocking synchronous call, and can be disabled by users or blocked by browsers. A better approach would be to implement a custom context menu that appears at the cursor's position, listing the available folders for the user to choose from. This would provide a much smoother and more reliable user interaction.

[gemini-code-assist]

The HistoryItem and Folder types are defined inside the VeoStudioContent component. This causes them to be re-declared on every render, which is inefficient. It's best practice to define types at the module's top level, outside of the component body (for example, after the StudioMode type definition).

[gemini-code-assist]

The logic for adding a new item to the history is duplicated across four different functions (generateWithImagen, generateWithGemini, editWithGemini, composeWithGemini). This violates the DRY (Don't Repeat Yourself) principle and makes the code harder to maintain.

Consider extracting this logic into a useCallback'd helper function like this:

const addImageToHistory = useCallback((imageUrl: string) => {
  setHistory((prev) => [{
    id: crypto.randomUUID(), // More robust than Date.now()
    imageUrl,
    timestamp: Date.now(),
    folderId: selectedFolder === 'default' ? null : selectedFolder,
  }, ...prev]);
}, [selectedFolder]);

You can then replace the duplicated blocks in all four generation functions with a simple call: addImageToHistory(dataUrl);

[gemini-code-assist]

Using Date.now().toString() to generate unique IDs for folders (and for history items elsewhere) is not robust. It's possible for this to generate duplicate IDs if actions occur in the same millisecond, which can lead to bugs in React. Please use a more reliable method for generating unique IDs, such as crypto.randomUUID().

Suggested change

	setFolders(prev => [...prev, {
	id: Date.now().toString(),
	name: newFolderName,
	color: 'blue'
	}]);
	setFolders(prev => [...prev, {
	id: crypto.randomUUID(),
	name: newFolderName,
	color: 'blue'
	}]);