mohanki/titan3d_react_node_sqllite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve 401 Unauthorized in Gemini editUVLayer by properly passing auth token, update loading UI with grayscale/blur, fix WebGLShadowMap deprecation warnings
Build and Deploy / build-and-push (push) Successful in 28s
Details

Browse Source
This commit is contained in:
AI Bot
2026-09-30 17:15:53 +05:30
parent 86ba3a961c
commit 49a3882441
4 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ImageTo3DModal.tsx
+24 -19
View File
@@ -29,7 +29,7 @@ const ModelPreview = ({ url }: { url: string }) => {
if (!model) return <div className="absolute inset-0 flex items-center justify-center"><Loader2 className="w-8 h-8 animate-spin text-zinc-500" /></div>;
return (
<Canvas shadows camera={{ position: [0, 1.5, 3], fov: 45 }}>
<Canvas shadows={{ type: THREE.PCFShadowMap }} camera={{ position: [0, 1.5, 3], fov: 45 }}>
<Stage environment="studio" intensity={0.5}>
<primitive object={model} />
</Stage>
@@ -39,7 +39,7 @@ const ModelPreview = ({ url }: { url: string }) => {
};
export const ImageTo3DModal: React.FC<ImageTo3DModalProps> = ({ isOpen, onClose, onPushToApp }) => {
const { profile, setProfile, token } = useAuthStore();
const { profile, setProfile } = useAuthStore();
const [meshyApiKey, setMeshyApiKey] = useState('');
// Image states
@@ -97,6 +97,7 @@ export const ImageTo3DModal: React.FC<ImageTo3DModalProps> = ({ isOpen, onClose,
setCleanedImagePreview(null);
try {
const base64 = await fileToDataUrl(fileToClean);
const token = localStorage.getItem('auth_token') || '';
const newUrl = await editUVLayer("Remove the background and make it solid transparent or white. Also carefully remove all text, labels, logos, and stickers, keeping the product as a perfectly clean, plain, unbranded object.", base64, token);
const res = await fetch(newUrl);
@@ -300,10 +301,13 @@ export const ImageTo3DModal: React.FC<ImageTo3DModalProps> = ({ isOpen, onClose,
{/* Cleaned Image */}
<div className="flex-1 relative border-2 border-solid border-zinc-700 rounded-xl overflow-hidden bg-zinc-900/50 flex items-center justify-center group">
{isCleaningImage ? (
<div className="flex flex-col items-center text-zinc-400 gap-3">
<Loader2 size={28} className="animate-spin text-blue-500" />
<span className="text-sm font-medium">AI Cleaning...</span>
</div>
<>
<img src={originalImagePreview} alt="Original Grayscale" className="absolute inset-0 w-full h-full object-contain p-2 opacity-30 grayscale blur-sm" />
<div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-300 gap-3 bg-black/40 z-10">
<Loader2 size={28} className="animate-spin text-blue-500" />
<span className="text-sm font-medium">AI Cleaning Image...</span>
</div>
</>
) : cleanedImagePreview ? (
<>
<img src={cleanedImagePreview} alt="Cleaned" className="w-full h-full object-contain p-2" />
@@ -405,22 +409,23 @@ export const ImageTo3DModal: React.FC<ImageTo3DModalProps> = ({ isOpen, onClose,
<h3 className="text-sm font-bold text-zinc-200">3D Preview</h3>
</div>
<div className="flex-1 relative flex items-center justify-center">
{generatedModelUrl ? (
<div className="flex-1 relative flex items-center justify-center overflow-hidden">
{isGenerating ? (
<>
{cleanedImagePreview || originalImagePreview ? (
<img src={(cleanedImagePreview || originalImagePreview) as string} alt="Generating Base" className="absolute inset-0 w-full h-full object-contain p-8 opacity-20 grayscale blur-md scale-110" />
) : null}
<div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-300 bg-black/60 z-20">
<Loader2 size={36} className="animate-spin text-blue-500 mb-4" />
<p className="text-sm font-medium text-zinc-200">{progressMessage}</p>
</div>
</>
) : generatedModelUrl ? (
<ModelPreview url={generatedModelUrl} />
) : (
<div className="flex flex-col items-center justify-center text-zinc-600 p-6 text-center">
{isGenerating ? (
<>
<Loader2 size={32} className="animate-spin text-blue-500 mb-4" />
<p className="text-sm font-medium text-zinc-300">{progressMessage}</p>
</>
) : (
<>
<Box size={32} className="mb-3 opacity-50" />
<p className="text-sm">Your 3D model will appear here</p>
</>
)}
<Box size={32} className="mb-3 opacity-50" />
<p className="text-sm">Your 3D model will appear here</p>
</div>
)}
</div>