Improve image display by intelligently focusing on subjects

Implement server-side AI analysis to detect focal points in images, ensuring faces and key subjects are not cut off.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c1dc1745-dcd7-4247-a1e3-8dd414e4592b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true

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<Record<string, { x: number; y: number }>>({
+    queryKey: ["/api/focal-points"],
+    staleTime: Infinity,
+  });
+  return data || {};
+}
+
+function SmartImage({ src, alt, className = "", focalPoints }: { src: string; alt: string; className?: string; focalPoints?: Record<string, { x: number; y: number }> }) {
   const imgRef = useRef<HTMLImageElement>(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 (
       <div className="absolute inset-0 overflow-hidden">
@@ -38,7 +51,7 @@ function SmartImage({ src, alt, className = "" }: { src: string; alt: string; cl
   }
 
   return (
-    <img ref={imgRef} src={src} alt={alt} className={`w-full h-full object-cover absolute inset-0 ${className}`} style={{ objectPosition: "center 40%" }} />
+    <img ref={imgRef} src={src} alt={alt} className={`w-full h-full object-cover absolute inset-0 ${className}`} style={posStyle} />
   );
 }
 
@@ -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<string, { x: number; y: number }> }) {
   const isVideo = article.category === "Video";
   return (
     <Link href={`/article/${article.slug}`}>
       <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-hero-${article.id}`}>
         <div className="relative h-full min-h-[280px]">
-          <SmartImage src={article.coverImage || "/images/article-1.png"} alt={article.title} className="transition-transform duration-700 group-hover:scale-105" />
+          <SmartImage src={article.coverImage || "/images/article-1.png"} alt={article.title} className="transition-transform duration-700 group-hover:scale-105" focalPoints={focalPoints} />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center z-10">
               <div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">
@@ -131,7 +144,7 @@ function MediumCard({ article }: { article: Article }) {
       <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border flex flex-col" data-testid={`card-medium-${article.id}`}>
         <div className="relative flex-shrink-0">
           <div className="overflow-hidden">
-            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover object-center transition-transform duration-500 group-hover:scale-105" loading="lazy" />
+            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 20%" }} loading="lazy" />
           </div>
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">
@@ -165,7 +178,7 @@ function SideCard({ article }: { article: Article }) {
       <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-side-${article.id}`}>
         <div className="relative flex-shrink-0 flex-1 min-h-0">
           <div className="overflow-hidden h-full">
-            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105" loading="lazy" />
+            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 20%" }} loading="lazy" />
           </div>
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">
@@ -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<string, { x: number; y: number }> }) {
   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 ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
-            <HeroCard article={hero} />
+            <HeroCard article={hero} focalPoints={focalPoints} />
           ) : null}
         </div>
         <div className="lg:col-span-3 grid grid-cols-1 gap-3 grid-rows-2 lg:h-[420px]">
@@ -323,6 +336,8 @@ export default function Home() {
     queryKey: ["/api/gallery"],
   });
 
+  const focalPoints = useFocalPoints();
+
   if (isLoading || !articles) {
     return (
       <div className="min-h-screen bg-background">
@@ -343,7 +358,7 @@ export default function Home() {
       <Header />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
 
-        <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
+        <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           {row2Left.map((a) => (