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

feat: Add HQ image preview modal in SparkPlug and improve Meshy 3D model quality via topology parameters
Build and Deploy / build-and-push (push) Successful in 57s
Details

Browse Source
This commit is contained in:
AI Bot
2026-09-03 15:38:26 +05:30
parent b73315791c
commit a4853e73e0
2 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/SparkPlug.tsx
+37 -7
View File
@@ -35,6 +35,9 @@ export default function SparkPlug() {
// Step 4: 3D Model
const [modelProgress, setModelProgress] = useState(0);
const [generatedGlbUrl, setGeneratedGlbUrl] = useState<string | null>(null);
// HQ Image Preview
const [previewImage, setPreviewImage] = useState<string | null>(null);
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files[0]) {
@@ -338,14 +341,17 @@ export default function SparkPlug() {
<div className="flex-1 bg-zinc-950 border border-zinc-800 rounded-xl p-4">
{generatedImages.length > 0 ? (
<div className="grid grid-cols-2 gap-4 h-full">
{generatedImages.map((img, idx) => (
<div key={idx} className="relative bg-zinc-900 rounded-lg overflow-hidden border border-zinc-800 flex items-center justify-center">
<img src={img} alt={`View ${idx + 1}`} className="max-w-full max-h-[150px] object-contain" />
<div className="absolute top-2 left-2 bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-[10px] font-bold text-zinc-300 uppercase">
{idx === 0 ? 'FRONT' : idx === 1 ? 'BACK' : idx === 2 ? 'LEFT' : 'RIGHT'}
{generatedImages.map((img, idx) => (
<div key={idx} className="relative bg-zinc-900 rounded-lg overflow-hidden border border-zinc-800 flex items-center justify-center group cursor-pointer" onClick={() => setPreviewImage(img)}>
<img src={img} alt={`View ${idx + 1}`} className="max-w-full max-h-[150px] object-contain transition-transform duration-300 group-hover:scale-110" />
<div className="absolute top-2 left-2 bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-[10px] font-bold text-zinc-300 uppercase">
{idx === 0 ? 'FRONT' : idx === 1 ? 'BACK' : idx === 2 ? 'LEFT' : 'RIGHT'}
</div>
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<span className="opacity-0 group-hover:opacity-100 text-white font-bold bg-black/50 px-3 py-1 rounded backdrop-blur-sm transition-opacity">Preview HQ</span>
</div>
</div>
</div>
))}
))}
</div>
) : (
<div className="flex h-full items-center justify-center">
@@ -428,6 +434,30 @@ export default function SparkPlug() {
</div>
</main>
{/* HQ Image Preview Modal */}
{previewImage && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-8 cursor-zoom-out"
onClick={() => setPreviewImage(null)}
>
<button
className="absolute top-6 right-6 text-white hover:text-red-500 transition-colors z-50"
onClick={(e) => {
e.stopPropagation();
setPreviewImage(null);
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
<img
src={previewImage}
alt="HQ Preview"
className="max-w-full max-h-full object-contain rounded-lg shadow-2xl cursor-default"
onClick={(e) => e.stopPropagation()}
/>
</div>
)}
</div>
);
}