Sd image and inference panels

packages/components/src/api/BucketConfig.ts

@@ -25,7 +25,7 @@ class BucketConfig {
   getCdnUrl(
     bucketRelativePath: string,
     width?: number,
-    height?: number
+    quality?: number
   ): string {
     const basePath = this.isLocalDev
       ? "https://dev-cdn.fakeyou.com"
@@ -34,13 +34,13 @@ class BucketConfig {
       ? bucketRelativePath
       : "/" + bucketRelativePath;
     let resizeParams = "";
-    if (width || height) {
+    if (width || quality) {
       resizeParams = "cdn-cgi/image/";
       if (width) {
         resizeParams += `width=${width},`;
       }
-      if (height) {
-        resizeParams += `height=${height},`;
+      if (quality) {
+        resizeParams += `quality=${quality},`;
       }
       resizeParams = resizeParams.slice(0, -1);
     }

packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx

@@ -40,6 +40,8 @@ import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
 import moment from "moment";
 import WeightCoverImage from "components/common/WeightCoverImage";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import SdInferencePanel from "./inference_panels/SdInferencePanel";
+import SdCoverImagePanel from "./cover_image_panels/SdCoverImagePanel";
 
 interface WeightProps {
   sessionWrapper: SessionWrapper;
@@ -74,6 +76,8 @@ export default function WeightPage({
 
   const bookmarks = useBookmarks();
 
+  const bucketConfig = new BucketConfig();
+
   const weightTypeInfo = useWeightTypeInfo(
     weight?.weights_type || WeightType.NONE
   );
@@ -134,12 +138,19 @@ export default function WeightPage({
           />
         );
       case WeightCategory.SD:
+        let sdCoverImage = "/images/avatars/default-pfp.png";
+        if (weight.maybe_cover_image_public_bucket_path !== null) {
+          sdCoverImage = bucketConfig.getCdnUrl(
+            weight.maybe_cover_image_public_bucket_path,
+            100,
+            100
+          );
+        }
+
         return (
           <div className="d-flex flex-column gap-3">
-            <Panel padding={true}>
-              Stable Diffusion preview/cover image(s)
-            </Panel>
-            <Panel padding={true}>Generation inference panel here</Panel>
+            <SdCoverImagePanel src={sdCoverImage} />
+            <SdInferencePanel />
           </div>
         );
       default:
@@ -343,7 +354,6 @@ export default function WeightPage({
     // datasets.refresh();
   };
 
-  const bucketConfig = new BucketConfig();
   let audioWeightCoverImage = "/images/avatars/default-pfp.png";
   if (weight.maybe_cover_image_public_bucket_path !== null) {
     audioWeightCoverImage = bucketConfig.getCdnUrl(
@@ -358,7 +368,8 @@ export default function WeightPage({
       <Container type="panel" className="mb-5">
         <Panel clear={true} className="py-4">
           <div className="d-flex flex-column flex-lg-row gap-3 gap-lg-2">
-            {weight.weights_category === WeightCategory.VC && (
+            {(weight.weights_category === WeightCategory.VC ||
+              weight.weights_category === WeightCategory.TTS) && (
               <WeightCoverImage src={audioWeightCoverImage} />
             )}
             <div>

packages/fakeyou.com/src/v2/view/pages/weight/cover_image_panels/SdCoverImagePanel.scss

@@ -0,0 +1,16 @@
+.sd-cover-img-container {
+  height: 600px;
+  overflow: hidden;
+
+  img {
+    border-radius: 0.5rem;
+    max-height: 100%;
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 992px) {
+  .sd-cover-img-container {
+    height: 100%;
+  }
+}

packages/fakeyou.com/src/v2/view/pages/weight/cover_image_panels/SdCoverImagePanel.tsx

@@ -0,0 +1,21 @@
+import { Panel } from "components/common";
+import React from "react";
+import "./SdCoverImagePanel.scss";
+
+interface SdCoverImagePanelProps {
+  src: string;
+  alt?: string;
+}
+
+export default function SdCoverImagePanel({
+  src,
+  alt,
+}: SdCoverImagePanelProps) {
+  return (
+    <Panel>
+      <div className="sd-cover-img-container d-flex align-items-center justify-content-center px-3 py-3">
+        <img src={src} alt={alt} />
+      </div>
+    </Panel>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx

@@ -0,0 +1,8 @@
+import { Panel } from "components/common";
+import React from "react";
+
+interface SdInferencePanelProps {}
+
+export default function SdInferencePanel(props: SdInferencePanelProps) {
+  return <Panel padding={true}>Generation inference here</Panel>;
+}