🎓 UTS CS Club Community

AI Developer Portrait

Generator

Upload your photo and transform yourself into a cinematic K-Drama style developer character.

{!uploadedPhotoUrl ? (

📷

Upload Your Photo

Tap to select a clear face photo

) : (

{ e.currentTarget.style.display = 'none'; }} />

✅ Photo ready

{!isGenerating && (

{ e.stopPropagation(); handleUploadPhoto(); }} style={{ fontSize: 12, fontWeight: 600, color: colors.gold, background: 'rgba(240,192,64,0.15)', padding: '6px 12px', borderRadius: 12, border: '1px solid rgba(240,192,64,0.3)', cursor: 'pointer', }} > Change Photo

)}

{!showResult && ( )} {generationError && (

⚠️ {generationError}

)} {showResult && generatedPortraitUrl && (

✨ Your K-Drama Developer Portrait ✨

{ e.currentTarget.style.display = 'none'; }} />

{typeof saveToPhotos === 'function' && ( )}

)} {isGenerating && (

{loadingText}

)} {(gallery || []).length > 0 && (

{isMultiplayer ? '🏛️ Community Gallery' : '🖼️ My Portraits'}

{(gallery || []).length} portrait{(gallery || []).length !== 1 ? 's' : ''}

{[...gallery].reverse().map((item, idx) => { const authorName = item?._user?.displayName || item?.userName || 'Anonymous'; const authorAvatar = item?._user?.profileImageUrl; const authorHandle = item?._user?.handle; return (

{ e.currentTarget.style.display = 'none'; }} />

authorHandle && typeof openProfile === 'function' && openProfile(authorHandle)} style={{ width: 32, height: 32, borderRadius: '50%', background: authorAvatar ? `url(${authorAvatar}) center/cover` : 'linear-gradient(135deg, #a855f7, #4a9eff)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, flexShrink: 0, cursor: authorHandle ? 'pointer' : 'default', border: '1.5px solid rgba(240,192,64,0.3)', }} > {!authorAvatar && 👤}

{authorName}

{item?.createdAt ? new Date(item.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : ''}

); })}

)} {isMultiplayer && (memberList || []).length > 1 && (

👥 Club Members ({(memberList || []).length})

{(memberList || []).map(m => (

m?.handle && typeof openProfile === 'function' && openProfile(m.handle)} style={{ textAlign: 'center', cursor: m?.handle ? 'pointer' : 'default' }} >

{!m?.avatarUrl && 👤}

))}

)} {typeof share === 'function' && ( )}

Made with ✨ for UTS CS Club

); }