diff --git a/attached_assets/image_1772312230976.png b/attached_assets/image_1772312230976.png new file mode 100644 index 0000000..3cca4eb Binary files /dev/null and b/attached_assets/image_1772312230976.png differ diff --git a/attached_assets/image_1772312351187.png b/attached_assets/image_1772312351187.png new file mode 100644 index 0000000..a34e9a3 Binary files /dev/null and b/attached_assets/image_1772312351187.png differ diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx index 14aa546..07db5c4 100644 --- a/client/src/pages/home.tsx +++ b/client/src/pages/home.tsx @@ -14,12 +14,20 @@ import { RecipeWidget } from "@/components/recipe-widget"; import { NewsWidget } from "@/components/news-widget"; import { useState, useEffect, useCallback, useRef } from "react"; -function SmartImage({ src, alt, className = "" }: { src: string; alt: string; className?: string }) { +function useFocalPoints() { + const { data } = useQuery>({ + queryKey: ["/api/focal-points"], + staleTime: Infinity, + }); + return data || {}; +} + +function SmartImage({ src, alt, className = "", focalPoints }: { src: string; alt: string; className?: string; focalPoints?: Record }) { const imgRef = useRef(null); const [isPortrait, setIsPortrait] = useState(false); useEffect(() => { - const img = new Image(); + const img = new window.Image(); img.onload = () => { if (img.naturalHeight > img.naturalWidth * 1.2) { setIsPortrait(true); @@ -28,6 +36,11 @@ function SmartImage({ src, alt, className = "" }: { src: string; alt: string; cl img.src = src; }, [src]); + const fp = focalPoints?.[src]; + const posStyle = fp + ? { objectPosition: `${fp.x}% ${fp.y}%` } + : { objectPosition: "center 20%" }; + if (isPortrait) { return (
@@ -38,7 +51,7 @@ function SmartImage({ src, alt, className = "" }: { src: string; alt: string; cl } return ( - {alt} + {alt} ); } @@ -66,13 +79,13 @@ function timeAgo(date: Date): string { return format(date, "d. MMM yyyy", { locale: de }); } -function HeroCard({ article }: { article: Article }) { +function HeroCard({ article, focalPoints }: { article: Article; focalPoints?: Record }) { const isVideo = article.category === "Video"; return (
- + {isVideo && (
@@ -131,7 +144,7 @@ function MediumCard({ article }: { article: Article }) {
- {article.title} + {article.title}
{isVideo && (
@@ -165,7 +178,7 @@ function SideCard({ article }: { article: Article }) {
- {article.title} + {article.title}
{isVideo && (
@@ -229,7 +242,7 @@ function TopStoriesList({ articles }: { articles: Article[] }) { ); } -function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[] }) { +function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record }) { const hasGallery = galleryImages && galleryImages.length > 0; const articlePages = Math.min(5, Math.max(1, articles.length)); const total = articlePages + (hasGallery ? 1 : 0); @@ -271,7 +284,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti {isGalleryPage && galleryImages ? ( ) : hero ? ( - + ) : null}
@@ -323,6 +336,8 @@ export default function Home() { queryKey: ["/api/gallery"], }); + const focalPoints = useFocalPoints(); + if (isLoading || !articles) { return (
@@ -343,7 +358,7 @@ export default function Home() {
- +
{row2Left.map((a) => ( diff --git a/server/focal-point.ts b/server/focal-point.ts new file mode 100644 index 0000000..fbdb5d1 --- /dev/null +++ b/server/focal-point.ts @@ -0,0 +1,120 @@ +import OpenAI from "openai"; +import fs from "fs"; +import path from "path"; + +const openai = new OpenAI({ + apiKey: process.env.AI_INTEGRATIONS_OPENAI_API_KEY, + baseURL: process.env.AI_INTEGRATIONS_OPENAI_BASE_URL, +}); + +const cache = new Map(); + +export async function analyzeFocalPoint(imagePath: string): Promise<{ x: number; y: number }> { + const originalPath = imagePath; + if (cache.has(originalPath)) { + return cache.get(originalPath)!; + } + + try { + let imageData: string; + let mimeType = "image/webp"; + + if (imagePath.startsWith("/uploads/")) { + const localPath = path.join(process.cwd(), "client/public", imagePath); + if (!fs.existsSync(localPath)) { + throw new Error(`File not found: ${localPath}`); + } + const buffer = fs.readFileSync(localPath); + imageData = buffer.toString("base64"); + if (localPath.endsWith(".jpg") || localPath.endsWith(".jpeg")) mimeType = "image/jpeg"; + else if (localPath.endsWith(".png")) mimeType = "image/png"; + } else if (imagePath.startsWith("http")) { + const response = await openai.chat.completions.create({ + model: "gpt-4o-mini", + messages: [ + { + role: "system", + content: "You analyze images to find the main subject (person's face or group center). Return ONLY a JSON object with x and y as percentages (0-100). x=50 means horizontal center, y=20 means near top. Example: {\"x\":50,\"y\":30}" + }, + { + role: "user", + content: [ + { type: "text", text: "Where is the main subject (face/person) in this image? Return only JSON." }, + { type: "image_url", image_url: { url: imagePath, detail: "low" } } + ] + } + ], + max_tokens: 50, + }); + const text = response.choices[0]?.message?.content?.trim() || ""; + const match = text.match(/\{[^}]+\}/); + if (match) { + const parsed = JSON.parse(match[0]); + const point = { + x: Math.max(0, Math.min(100, Number(parsed.x) || 50)), + y: Math.max(0, Math.min(100, Number(parsed.y) || 30)), + }; + cache.set(originalPath, point); + return point; + } + throw new Error("Could not parse response"); + } else { + throw new Error(`Unsupported path: ${imagePath}`); + } + + const dataUrl = `data:${mimeType};base64,${imageData}`; + + const response = await openai.chat.completions.create({ + model: "gpt-4o-mini", + messages: [ + { + role: "system", + content: "You analyze images to find the main subject (person's face or group center). Return ONLY a JSON object with x and y as percentages (0-100) indicating where the main subject/face is located. x=50 means horizontal center, y=20 means near the top. Example: {\"x\":45,\"y\":30}" + }, + { + role: "user", + content: [ + { type: "text", text: "Where is the main subject (face/person) in this image? Return only JSON with x,y percentages." }, + { type: "image_url", image_url: { url: dataUrl, detail: "low" } } + ] + } + ], + max_tokens: 50, + }); + + const text = response.choices[0]?.message?.content?.trim() || ""; + console.log(`[focal-point] ${imagePath}: AI response = ${text}`); + const match = text.match(/\{[^}]+\}/); + if (match) { + const parsed = JSON.parse(match[0]); + const point = { + x: Math.max(0, Math.min(100, Number(parsed.x) || 50)), + y: Math.max(0, Math.min(100, Number(parsed.y) || 30)), + }; + cache.set(originalPath, point); + return point; + } + } catch (e) { + console.log("[focal-point] AI analysis failed for", imagePath, ":", (e as Error).message); + } + + const fallback = { x: 50, y: 30 }; + cache.set(originalPath, fallback); + return fallback; +} + +export async function analyzeAllArticleImages(articles: Array<{ coverImage: string | null }>) { + for (const article of articles) { + if (!article.coverImage) continue; + await analyzeFocalPoint(article.coverImage); + } + console.log("[focal-point] Analyzed", cache.size, "images"); +} + +export function getCachedFocalPoints(): Record { + const result: Record = {}; + for (const [key, value] of cache.entries()) { + result[key] = value; + } + return result; +} diff --git a/server/routes.ts b/server/routes.ts index 40fbdd2..5633e00 100644 --- a/server/routes.ts +++ b/server/routes.ts @@ -4,6 +4,7 @@ import { storage } from "./storage"; import { insertArticleSchema } from "@shared/schema"; import { seedDatabase } from "./seed"; import { generateDailyHoroscopes, getHoroscopesForToday, getOrGenerateHoroscope } from "./horoscope-generator"; +import { analyzeAllArticleImages, getCachedFocalPoints } from "./focal-point"; import multer from "multer"; import path from "path"; import fs from "fs"; @@ -42,6 +43,16 @@ export async function registerRoutes( console.error("Background horoscope generation failed:", err.message) ); + storage.getArticles().then((articles) => { + analyzeAllArticleImages(articles).catch(err => + console.log("[focal-point] Analysis skipped:", err.message) + ); + }); + + app.get("/api/focal-points", (_req, res) => { + res.json(getCachedFocalPoints()); + }); + app.get("/api/articles", async (_req, res) => { const articles = await storage.getArticles(); res.json(articles);