Fix blog post preview image

docs/blog.html

@@ -164,9 +164,9 @@ <h1 class="title">Blog</h1>
 
 <div class="quarto-listing quarto-listing-container-default" id="listing-listing">
 <div class="list quarto-listing-default">
-<div class="quarto-post image-right" data-index="0" data-listing-date-sort="1701270000000" data-listing-file-modified-sort="1701233293159" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="6">
+<div class="quarto-post image-right" data-index="0" data-listing-date-sort="1701270000000" data-listing-file-modified-sort="1701233759035" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="6">
 <div class="thumbnail">
-<p><a href="./posts/kt-villa-overview/index.html"> <p class="card-img-top"><img src="posts/kt-villa-overview/meiji-chocolate-stickers.png" title="Look at those cute little stickers! Mind you I'm not the best photographer" class="thumbnail-image card-img"/></p> </a></p>
+<p><a href="./posts/kt-villa-overview/index.html"> <p class="card-img-top"><img src="posts/kt-villa-overview/kt-villa-booking.png" title="Not gonna lie, this date range selector was the biggest time sync due to wanting to make sure timezones were handled right. Its always timezones" class="thumbnail-image card-img"/></p> </a></p>
 </div>
 <div class="body">
 <a href="./posts/kt-villa-overview/index.html">

docs/index.html

@@ -192,9 +192,9 @@ <h1 class="title">Open Source Musings &amp; Snow Time</h1>
 <h2 class="anchored" data-anchor-id="recent-posts">Recent Posts</h2>
 <div id="listing-blog-highlights" class="quarto-listing quarto-listing-container-default">
 <div class="list quarto-listing-default">
-<div class="quarto-post image-right" data-index="0" data-listing-date-sort="1701270000000" data-listing-file-modified-sort="1701233293159" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="6">
+<div class="quarto-post image-right" data-index="0" data-listing-date-sort="1701270000000" data-listing-file-modified-sort="1701233759035" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="6">
 <div class="thumbnail">
-<p><a href="./posts/kt-villa-overview/index.html"> <p class="card-img-top"><img src="posts/kt-villa-overview/meiji-chocolate-stickers.png" title="Look at those cute little stickers! Mind you I'm not the best photographer" class="thumbnail-image card-img"/></p> </a></p>
+<p><a href="./posts/kt-villa-overview/index.html"> <p class="card-img-top"><img src="posts/kt-villa-overview/kt-villa-booking.png" title="Not gonna lie, this date range selector was the biggest time sync due to wanting to make sure timezones were handled right. Its always timezones" class="thumbnail-image card-img"/></p> </a></p>
 </div>
 <div class="body">
 <a href="./posts/kt-villa-overview/index.html">

docs/posts/kt-villa-overview/index.html

@@ -62,15 +62,15 @@
 <link rel="stylesheet" href="../../styles.css">
 <meta property="og:title" content="Fozzie The Beat - KT Villa Overview">
 <meta property="og:description" content="How I ended up building a booking website with too much Generative AI">
-<meta property="og:image" content="https://fozziethebeat.com/posts/kt-villa-overview/meiji-chocolate-stickers.png">
+<meta property="og:image" content="https://fozziethebeat.com/posts/kt-villa-overview/kt-villa-booking.png">
 <meta property="og:site-name" content="Fozzie The Beat">
-<meta property="og:image:height" content="640">
-<meta property="og:image:width" content="480">
+<meta property="og:image:height" content="1216">
+<meta property="og:image:width" content="1014">
 <meta name="twitter:title" content="Fozzie The Beat - KT Villa Overview">
 <meta name="twitter:description" content="How I ended up building a booking website with too much Generative AI">
-<meta name="twitter:image" content="https://fozziethebeat.com/posts/kt-villa-overview/meiji-chocolate-stickers.png">
-<meta name="twitter:image-height" content="640">
-<meta name="twitter:image-width" content="480">
+<meta name="twitter:image" content="https://fozziethebeat.com/posts/kt-villa-overview/kt-villa-booking.png">
+<meta name="twitter:image-height" content="1216">
+<meta name="twitter:image-width" content="1014">
 <meta name="twitter:card" content="summary_large_image">
 </head>
 
@@ -174,7 +174,7 @@ <h2 class="anchored" data-anchor-id="the-origins-for-kt-villa">The origins for K
 </figure>
 </div>
 <p>I do however have an empty winter lodge in Hakuba Japan, a prime place to enjoy the snow. And I have many friends who wish to stay there on the regular. So instead of generated images and character cards for soap purchases, I did the same thing for trips to my winter lodge. And bam, that’s how we get KT Villa. As a fun aside, the Villa part comes from a previous name for our house, Chill Villa, when it was on AirBnB and the KT part comes from nicknames for my wife and myself, Koala and Tree. Cute right?</p>
-<p><img src="kt-villa-booking.png" title="Not gonna lie, this date range selector was the biggest time sync due to wanting to make sure timezones were handled right. Its always timezones" class="img-fluid"></p>
+<p><img src="kt-villa-booking.png" title="Not gonna lie, this date range selector was the biggest time sync due to wanting to make sure timezones were handled right. Its always timezones" class="preview-image img-fluid"></p>
 <p>Pretty much all the hard part of the site is just your regular old booking website challenges. Managing users, managing booking details, making sure two trips don’t overlap, making sure timezones are all done right. Making it look visually okay. It’s an entirely normal website except when you make a booking, you get a SDXL (Stable Diffusion XL from Stability AI) generated image. To boot, I setup SDXL to run a different themed LoRA adapter every two weeks so with a bit of prompt magic and adapter swapping, every trip will generate a fairly unique image.</p>
 <p><img src="kt-villa-image-gen-cards.png" title="Pretty cute right? I randomly swap out a few key words with a prompt that worked reasonably well for multiple adapters and multiple key terms. Not always 100% but usually solid" class="img-fluid"></p>
 <p>But I wanted something <em>even</em> sillier. Since I’ve been contracting with a team focusing on themed chatbots, I wanted to take it to the extreme. For every generated imaged, I let users create a character profile card using a multi-modal LLM. That gives us a pretty unpredictable chatbot profile and when paired with a decent small chat trained LLM, users can try chatting with their booking image and see what silliness entails. With time I also plan to somehow cram in Retrieval Augmented Generation somewhere using <a href="https://python.langchain.com/">LangChain</a>.</p>

docs/sitemap.xml

@@ -2,18 +2,18 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://fozziethebeat.com/blog.html</loc>
-    <lastmod>2023-11-29T04:49:20.878Z</lastmod>
+    <lastmod>2023-11-29T04:56:13.322Z</lastmod>
   </url>
   <url>
     <loc>https://fozziethebeat.com/index.html</loc>
-    <lastmod>2023-11-29T04:49:20.400Z</lastmod>
+    <lastmod>2023-11-29T04:56:12.846Z</lastmod>
   </url>
   <url>
     <loc>https://fozziethebeat.com/posts/kt-villa-overview/index.html</loc>
-    <lastmod>2023-11-29T04:49:20.059Z</lastmod>
+    <lastmod>2023-11-29T04:56:12.520Z</lastmod>
   </url>
   <url>
     <loc>https://fozziethebeat.com/about.html</loc>
-    <lastmod>2023-11-29T04:49:20.647Z</lastmod>
+    <lastmod>2023-11-29T04:56:13.076Z</lastmod>
   </url>
 </urlset>

posts/kt-villa-overview/index.qmd

@@ -33,7 +33,7 @@ and myself, Koala and Tree.  Cute right?
 
 ![](kt-villa-booking.png "Not gonna lie, this date range selector was the
 biggest time sync due to wanting to make sure timezones were handled right.
-Its always timezones")
+Its always timezones"){.preview-image}
 
 Pretty much all the hard part of the site is just your regular old booking
 website challenges.  Managing users, managing booking details, making sure two