Implement complete AI Photo Edit tool with mask-scoped regeneration
This commit implements a full-stack AI photo editing application that allows users to regenerate only selected areas of images using AI. Features implemented: - Frontend (React + Fabric.js): * Interactive canvas with selection tools (rectangle, ellipse, lasso) * Real-time selection preview and editing * Mode toggle (A: patch only, B: patch + context) * Feather slider for edge blending (0-50px) * Prompt input for AI instructions * Edit history viewer with revert capability * Responsive UI with dark theme - Backend (FastAPI): * RESTful API for projects and edits * SQLite database for metadata storage * Image processing pipeline with PIL/OpenCV * AI provider interface (pluggable) * Support for OpenAI, Stability AI, and mock providers * Feathered alpha blending for smooth compositing * Complete edit history tracking * File-based storage for images and edits - Image Processing: * Patch extraction from bounding boxes * Mask generation for all selection types * Feathered edge blending * Patch compositing back to full image * No pixels modified outside selection * All edits reversible - Infrastructure: * Docker Compose orchestration * Production and development configurations * Nginx reverse proxy for frontend * Hot-reload support for development * Volume persistence for data Architecture follows specification exactly: - Only selected regions are regenerated - Full image pixels preserved outside mask - Two-mode operation (cost vs quality) - Complete edit history and reversibility - Self-hosted with external AI API calls All components are fully functional and ready for deployment.
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
export const projectsApi = {
|
||||
// Create a new project
|
||||
create: async (name) => {
|
||||
const response = await api.post('/projects/', { name });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// List all projects
|
||||
list: async () => {
|
||||
const response = await api.get('/projects/');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Get a specific project
|
||||
get: async (projectId) => {
|
||||
const response = await api.get(`/projects/${projectId}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Delete a project
|
||||
delete: async (projectId) => {
|
||||
const response = await api.delete(`/projects/${projectId}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Upload image to project
|
||||
uploadImage: async (projectId, file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await api.post(`/projects/${projectId}/upload`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Get edits for a project
|
||||
getEdits: async (projectId) => {
|
||||
const response = await api.get(`/projects/${projectId}/edits`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Get image URLs
|
||||
getOriginalImageUrl: (projectId) => `${API_BASE_URL}/projects/${projectId}/original`,
|
||||
getCurrentImageUrl: (projectId) => `${API_BASE_URL}/projects/${projectId}/current`,
|
||||
getEditResultUrl: (projectId, editId) => `${API_BASE_URL}/projects/${projectId}/history/${editId}/result`,
|
||||
};
|
||||
|
||||
export const editsApi = {
|
||||
// Create a new edit (Fix button)
|
||||
create: async (projectId, editData) => {
|
||||
const response = await api.post(`/edits/projects/${projectId}/fix`, editData);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Get edit status
|
||||
get: async (editId) => {
|
||||
const response = await api.get(`/edits/${editId}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Revert to a specific edit
|
||||
revert: async (projectId, editId) => {
|
||||
const response = await api.post(`/edits/projects/${projectId}/revert/${editId}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Reset to original
|
||||
reset: async (projectId) => {
|
||||
const response = await api.post(`/edits/projects/${projectId}/reset`);
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
export default api;
|
||||
Reference in New Issue
Block a user