Add ai_liedar post

app/page.tsx

@@ -20,6 +20,7 @@ import sotopiaTown from '../public/island_only.svg'
 import agentvsstory from '../public/projects/agent_vs_storyteller.jpg'
 import sotopiaPi from '../public/projects/sotopia_pi.jpg'
 import sotopia from '../public/projects/sotopia.jpg'
+import ai_liedar from '../public/projects/ai_liedar/intro_conversation.png'
 import { ModeToggle } from "@/components/ui/model-toggle";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -281,6 +282,18 @@ export default function Home() {
 
         <SectionContent id='latest_research'>
           <SectionTitle>Latest Research</SectionTitle>
+            <div className="col-span-12 lg:col-span-4">
+              <Link href="/projects/ai_liedar">
+              <ImageWithTextOverlay
+              src={ai_liedar}
+              alt="a picture of green colors"
+              title={<p>AI-LieDar: Examine the Trade-off Between Utility and Truthfulness in LLM Agents</p>}
+              />
+              <p className="prose mt-4 text-lg  text-black dark:text-gray-200 font-space italic hover:underline">
+              TL;DR: AI-LieDar presents LLMs with carefully crafted scenarios to see how they handle these truth-vs-helpfulness dilemmas.
+              </p>
+              </Link>
+            </div>
             <div className="col-span-12 lg:col-span-4">
             <Link href="/projects/agent_vs_script">
               <ImageWithTextOverlay

app/projects/sotopia-pi/page.tsx

@@ -23,19 +23,6 @@ import { Abhaya_Libre } from "next/font/google";
 import { Detail } from "@/components/ListDetail/Detail";
 import React from "react";
 
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
-
-
 function SectionContent(props: React.JSX.IntrinsicAttributes & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>) {
   return <div className="w-full gap-8 grid grid-cols-12 font-inter py-10 px-6 sm:px-12" {...props} />
 }

components/navigation.tsx

@@ -57,6 +57,11 @@ const project_constants = [
     href: "/projects/agent_vs_script",
     description: "Realistic social simulations require information asymmetry.",
   },
+  {
+    title: "AI-Liedar",
+    href: "/projects/ai_liedar",
+    description: "To be truthful or to be helpful?",
+  },
 ]
 
 import Link, { LinkProps } from "next/link"

components/ui/image-text-overlay.tsx

@@ -10,11 +10,13 @@ interface ImageWithTextOverlayProps {
 
 const ImageWithTextOverlay: React.FC<ImageWithTextOverlayProps> = ({ src, alt, title }) => {
   return (
-    <div style={{ position: "relative" }}>
+    <div style={{ position: "relative", width: "100%", height: "0", paddingBottom: "100%" }}> {/* 9:16 Aspect Ratio */}
       <Image
         src={src}
         quality={100}
         alt={alt}
+        layout="fill"
+        objectFit="cover"
       />
       <div
         className="prose mt-4 text-lg text-black font-space"