AI Photo Editor — Chỉnh sửa ảnh bằng AI

\n {/* Info banner */}\n

\n 💡\n \n Tải ảnh lên, điền thông tin cần thay đổi hoặc mô tả chỉnh sửa bằng văn bản — AI sẽ giữ nguyên bố cục gốc và chỉ thay đổi đúng giá trị bạn chỉ định.\n \n

\n\n

\n {/* Left: Upload + Form + Prompt */}\n

\n \n\n {uploadData && (\n

\n {/* Structured fields toggle */}\n

\n setShowFields(!showFields)}\n class=\"w-full flex items-center justify-between text-sm font-medium text-gray-300 cursor-pointer\"\n >\n \n 📝\n Điền thông tin cần thay đổi\n {hasFilledFields && (\n \n {Object.values(fields).filter((v) => v?.trim()).length} trường\n \n )}\n \n \n ▼\n \n \n\n {showFields && (\n

\n {/* Standard fields */}\n

\n {STANDARD_FIELDS.map((field) => (\n \n \n {field.label}\n \n updateField(field.key, e.currentTarget.value)}\n placeholder={field.placeholder}\n class=\"w-full rounded-lg bg-gray-800 border border-gray-700 px-3 py-2 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-all\"\n />\n

\n ))}\n

\n\n {/* Divider */}\n

Trường tùy chỉnh (tên trường + giá trị):

\n {Array.from({ length: CUSTOM_FIELD_SLOTS }, (_, i) => {\n const idx = i + 1;\n return (\n

\n updateField(`customField${idx}`, e.currentTarget.value)}\n placeholder={`Tên trường ${idx}`}\n class=\"rounded-lg bg-gray-800 border border-gray-700 px-3 py-2 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500/50\"\n />\n updateField(`customValue${idx}`, e.currentTarget.value)}\n placeholder={`Giá trị ${idx}`}\n class=\"rounded-lg bg-gray-800 border border-gray-700 px-3 py-2 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500/50\"\n />\n

\n );\n })}\n

\n\n {/* Clear fields button */}\n {hasFilledFields && (\n setFields({})}\n class=\"text-xs text-gray-500 hover:text-red-400 transition-colors cursor-pointer\"\n >\n ✕ Xóa tất cả trường\n \n )}\n

\n )}\n

\n\n {/* Freeform prompt */}\n

\n \n Mô tả chỉnh sửa thêm (tùy chọn)\n \n setPrompt(e.currentTarget.value)}\n placeholder=\"VD: Làm bầu trời xanh hơn, xóa người trong nền, thêm hiệu ứng cổ điển...\"\n rows={3}\n class=\"w-full rounded-lg bg-gray-800 border border-gray-700 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 resize-none\"\n />\n\n {/* Example prompts */}\n

\n {EXAMPLE_PROMPTS.map((ex) => (\n handleExampleClick(ex)}\n class=\"text-xs px-3 py-1.5 rounded-full bg-gray-800 hover:bg-purple-900/50 border border-gray-700 hover:border-purple-700 text-gray-400 hover:text-purple-300 transition-all cursor-pointer\"\n >\n {ex}\n \n ))}\n

\n\n {/* Action buttons */}\n

\n \n {loading ? (\n <>\n \n Đang chỉnh sửa...\n \n ) : (\n <>\n ✨\n Chỉnh sửa ảnh\n \n )}\n \n \n Xóa\n \n

\n )}\n\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n

\n\n {/* Right: Result */}\n

\n \n

Code