From 1622b68c64eca71cfcea19f2b0ec1f74ac770051 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 8 Apr 2026 01:48:50 -0400 Subject: [PATCH] reenable frontend --- .../apps/artcraft-website/src/app/app.tsx | 8 +-- .../src/components/navbar/navbar.tsx | 4 +- frontend/apps/artcraft-website/src/main.tsx | 19 +++---- .../src/pages/library/library.tsx | 53 +++++++++---------- frontend/libs/api/src/lib/ApiManager.ts | 4 +- .../src/lib/config/StorytellerApiHostStore.ts | 5 +- .../src/lib/GalleryDraggableItem.tsx | 6 +-- .../libs/components/promptbox/tsconfig.json | 33 +++++++----- .../components/promptbox/tsconfig.lib.json | 33 +++++++----- 9 files changed, 92 insertions(+), 73 deletions(-) diff --git a/frontend/apps/artcraft-website/src/app/app.tsx b/frontend/apps/artcraft-website/src/app/app.tsx index 06a097545c..d8c362e21f 100644 --- a/frontend/apps/artcraft-website/src/app/app.tsx +++ b/frontend/apps/artcraft-website/src/app/app.tsx @@ -4,8 +4,8 @@ import Media from "../pages/media"; import PressKit from "../pages/press-kit"; import Navbar from "../components/navbar"; import { ToastContainer } from "../components/toast/toast"; -// import CreateImage from "../pages/create-image"; -// import CreateVideo from "../pages/create-video"; +import CreateImage from "../pages/create-image"; +import CreateVideo from "../pages/create-video"; import Landing2 from "../pages/landing2"; import LandingSD2 from "../pages/landing-sd2"; import TutorialsPage from "../pages/tutorials"; @@ -30,8 +30,8 @@ export function App() { } /> - {/* } /> - } /> */} + } /> + } /> } /> } /> } /> diff --git a/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx b/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx index bd80e51434..88494cccae 100644 --- a/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx +++ b/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx @@ -17,8 +17,8 @@ import { TaskQueue } from "./task-queue"; const NAV_ITEMS = [ { name: "Home", href: "/" }, - // { name: "Image", href: "/create-image" }, - // { name: "Video", href: "/create-video" }, + { name: "Image", href: "/create-image" }, + { name: "Video", href: "/create-video" }, { name: "Tutorials", href: "/tutorials" }, { name: "News", href: "/news" }, { name: "FAQ", href: "/faq" }, diff --git a/frontend/apps/artcraft-website/src/main.tsx b/frontend/apps/artcraft-website/src/main.tsx index d966684c4b..16ce81572b 100644 --- a/frontend/apps/artcraft-website/src/main.tsx +++ b/frontend/apps/artcraft-website/src/main.tsx @@ -11,15 +11,16 @@ const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement, ); -// In development, route API through the Vite dev server origin to avoid CORS -if (import.meta.env.DEV) { - try { - const origin = window.location.origin; - StorytellerApiHostStore.getInstance().setApiSchemeAndHost(origin); - } catch (e) { - console.warn("Failed to set dev API host override", e); - } -} +// In development, route API through the Vite dev server proxy to avoid CORS, +// unless VITE_API_HOST is explicitly set (eg. for an unsafe browser that ignores CORS). +//if (import.meta.env.DEV && !import.meta.env.VITE_API_HOST) { +// try { +// const origin = window.location.origin; +// StorytellerApiHostStore.getInstance().setApiSchemeAndHost(origin); +// } catch (e) { +// console.warn("Failed to set dev API host override", e); +// } +//} // Cache the referrer immediately — it can change or disappear on navigation. // Only set once so subsequent in-site navigations don't overwrite the original. diff --git a/frontend/apps/artcraft-website/src/pages/library/library.tsx b/frontend/apps/artcraft-website/src/pages/library/library.tsx index 9b8d2c59c1..b82fb69f54 100644 --- a/frontend/apps/artcraft-website/src/pages/library/library.tsx +++ b/frontend/apps/artcraft-website/src/pages/library/library.tsx @@ -50,9 +50,7 @@ const ROUTE_TO_FILTER: Record = { meshes: "meshes", }; -const getFilterMediaClass = ( - filter: string, -): FilterMediaClasses[] | undefined => { +const getFilterMediaClass = (filter: string): FilterMediaClasses[] | undefined => { switch (filter) { case "image": return [FilterMediaClasses.IMAGE]; @@ -61,11 +59,7 @@ const getFilterMediaClass = ( case "meshes": return [FilterMediaClasses.DIMENSIONAL]; default: - return [ - FilterMediaClasses.IMAGE, - FilterMediaClasses.VIDEO, - FilterMediaClasses.DIMENSIONAL, - ]; + return [FilterMediaClasses.IMAGE, FilterMediaClasses.VIDEO, FilterMediaClasses.DIMENSIONAL]; } }; @@ -97,9 +91,7 @@ const getLabel = (item: any) => { export default function Library() { const { filter: filterParam } = useParams<{ filter?: string }>(); const navigate = useNavigate(); - const activeFilter = filterParam - ? (ROUTE_TO_FILTER[filterParam] ?? "all") - : "all"; + const activeFilter = filterParam ? (ROUTE_TO_FILTER[filterParam] ?? "all") : "all"; const [username, setUsername] = useState(null); const [isLoggedIn, setIsLoggedIn] = useState(null); @@ -121,7 +113,11 @@ export default function Library() { const checkSession = async () => { const usersApi = new UsersApi(); const response = await usersApi.GetSession(); - if (response.success && response.data?.loggedIn && response.data.user) { + if ( + response.success && + response.data?.loggedIn && + response.data.user + ) { setUsername(response.data.user.username); setIsLoggedIn(true); } else { @@ -139,8 +135,8 @@ export default function Library() { const thumbnail = isDimensional ? null : getMediaThumbnail(item.media_links, item.media_class, { - size: THUMBNAIL_SIZES.MEDIUM, - }); + size: THUMBNAIL_SIZES.MEDIUM, + }); return { id: item.token, @@ -173,9 +169,7 @@ export default function Library() { if (response.success && response.data) { const newItems = response.data - .filter( - (item: any) => item.media_type !== FilterMediaType.SCENE_JSON, - ) + .filter((item: any) => item.media_type !== FilterMediaType.SCENE_JSON) .map(mapApiItem); if (reset) { @@ -256,17 +250,17 @@ export default function Library() { const navigatePrev = currentIndex > 0 ? () => { - const prev = flatItems[currentIndex - 1]; - setLightboxItem(prev); - } + const prev = flatItems[currentIndex - 1]; + setLightboxItem(prev); + } : undefined; const navigateNext = currentIndex >= 0 && currentIndex < flatItems.length - 1 ? () => { - const next = flatItems[currentIndex + 1]; - setLightboxItem(next); - } + const next = flatItems[currentIndex + 1]; + setLightboxItem(next); + } : undefined; const handleItemDeleted = useCallback((id: string) => { @@ -347,11 +341,10 @@ export default function Library() { - */} + ) : (
diff --git a/frontend/libs/api/src/lib/ApiManager.ts b/frontend/libs/api/src/lib/ApiManager.ts index ae8c9d7a59..98f38580fe 100644 --- a/frontend/libs/api/src/lib/ApiManager.ts +++ b/frontend/libs/api/src/lib/ApiManager.ts @@ -60,7 +60,9 @@ export class ApiManager { } protected getApiSchemeAndHost(): string { - return StorytellerApiHostStore.getInstance().getApiSchemeAndHost(); + const host = StorytellerApiHostStore.getInstance().getApiSchemeAndHost(); + console.log('getSchemaAndHost()', host); + return host; } public async fetch( diff --git a/frontend/libs/api/src/lib/config/StorytellerApiHostStore.ts b/frontend/libs/api/src/lib/config/StorytellerApiHostStore.ts index c90da8cb2f..e8100e73ed 100644 --- a/frontend/libs/api/src/lib/config/StorytellerApiHostStore.ts +++ b/frontend/libs/api/src/lib/config/StorytellerApiHostStore.ts @@ -1,5 +1,8 @@ // Artcraft / Storyteller API backend -const DEFAULT_API_HOST = "https://api.storyteller.ai"; +// Set VITE_API_HOST=http://localhost:12345 for local dev, or leave unset for production. +//const DEFAULT_API_HOST = (import.meta as any).env?.VITE_API_HOST || "https://api.storyteller.ai"; + +const DEFAULT_API_HOST = "http://localhost:12345"; // NB(bt,2025-09-25): 'nx' is creating multiple copies of the library with name // mangling, so the singleton pattern fails to resolve to a single instance. diff --git a/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx b/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx index 97c9f3a94a..bc56811de0 100644 --- a/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx +++ b/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx @@ -137,7 +137,7 @@ export const GalleryDraggableItem: React.FC = ({ tabIndex={-1} className={twMerge( "w-full group relative overflow-visible rounded-md border-[3px] transition-all focus:outline-none", - item.mediaClass === "video" ? "aspect-video" : "aspect-square", + "aspect-square", selected || bulkSelected ? "border-primary" : disableTooltipAndBadge @@ -171,7 +171,7 @@ export const GalleryDraggableItem: React.FC = ({ alt={item.label} className={twMerge( "h-full w-full bg-black/30", - item.mediaClass === "video" || imageFit === "contain" ? "object-contain" : "object-cover", + imageFit === "contain" ? "object-contain" : "object-cover", )} draggable={false} onError={onImageError} @@ -187,7 +187,7 @@ export const GalleryDraggableItem: React.FC = ({ ); return ( -
+
{/* dropdown menu */} {mode !== "select" && (