added comments to tts and w2l pages

packages/fakeyou.com/src/v2/view/_common/comments/CommentList.tsx

@@ -95,11 +95,14 @@ function CommentList(props: Props) {
   });
 
   return (
-    <motion.div initial="hidden" animate="visible" variants={container}>
-      <table className="table">
-        <tbody>{rows}</tbody>
-      </table>
-    </motion.div>
+    <motion.table
+      className="table mb-0"
+      initial="hidden"
+      animate="visible"
+      variants={container}
+    >
+      <tbody>{rows}</tbody>
+    </motion.table>
   );
 }
 

packages/fakeyou.com/src/v2/view/pages/tts/tts_model_view/TtsModelViewPage.tsx

@@ -64,6 +64,7 @@ import { Analytics } from "../../../../../common/Analytics";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { RatingButtons } from "../../../_common/ratings/RatingButtons";
 import { RatingStats } from "../../../_common/ratings/RatingStats";
+import { CommentComponent } from "../../../_common/comments/CommentComponent";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -530,11 +531,17 @@ function TtsModelViewPage(props: Props) {
 
                   <tr>
                     <th>Use global m-factor? (default no)</th>
-                    <td>{ttsModel?.maybe_moderator_fields?.use_default_m_factor ? "yes" : "no"}</td>
+                    <td>
+                      {ttsModel?.maybe_moderator_fields?.use_default_m_factor
+                        ? "yes"
+                        : "no"}
+                    </td>
                   </tr>
                   <tr>
                     <th>Custom m-factor (optional)</th>
-                    <td>{ttsModel?.maybe_moderator_fields?.maybe_custom_m_factor}</td>
+                    <td>
+                      {ttsModel?.maybe_moderator_fields?.maybe_custom_m_factor}
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -666,11 +673,11 @@ function TtsModelViewPage(props: Props) {
   let ratingButtons = <></>;
   if (props.sessionWrapper.isLoggedIn()) {
     ratingButtons = (
-      <RatingButtons 
-        entity_type="tts_model" 
-        entity_token={ttsModel?.model_token || ""} 
+      <RatingButtons
+        entity_type="tts_model"
+        entity_token={ttsModel?.model_token || ""}
       />
-    )
+    );
   }
 
   // NB: Investors might not like the in-your-face "over 1 year ago" dates.
@@ -690,10 +697,9 @@ function TtsModelViewPage(props: Props) {
 
             <RatingStats
               positive_votes={ttsModel?.user_ratings?.positive_count || 0}
-              negative_votes={ttsModel?.user_ratings?.negative_count || 0 }
+              negative_votes={ttsModel?.user_ratings?.negative_count || 0}
               total_votes={ttsModel?.user_ratings?.total_count || 0}
             />
-
           </div>
         </div>
         <motion.div className="mb-3 mt-4 pt-2" variants={item}>
@@ -815,6 +821,19 @@ function TtsModelViewPage(props: Props) {
         <BackLink link="/" text="Back to all models" />
       </motion.div>
 
+      <motion.div className="container-panel pt-4 pb-5" variants={item}>
+        <div className="panel p-3 p-lg-4">
+          <h2 className="fw-bold panel-title">Comments</h2>
+          <div className="py-6">
+            <CommentComponent
+              entityType="user"
+              entityToken={ttsModel.model_token}
+              sessionWrapper={props.sessionWrapper}
+            />
+          </div>
+        </div>
+      </motion.div>
+
       <motion.div className="container" variants={item}>
         <h4 className="text-center text-lg-start mb-4">
           <FontAwesomeIcon icon={faBarsStaggered} className="me-3" />

packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx

@@ -40,6 +40,7 @@ import {
 import { BackLink } from "../../../_common/BackLink";
 import { TextExpander } from "../../../_common/TextExpander";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import { CommentComponent } from "../../../_common/comments/CommentComponent";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -595,10 +596,24 @@ function TtsResultViewPage(props: Props) {
         <motion.p className="text-center text-lg-start" variants={item}>
           <ReportDiscordLink />
         </motion.p>
+
         <motion.div className="pt-5" variants={item}>
           <BackLink link="/" text="Back to all models" />
         </motion.div>
       </motion.div>
+
+      <motion.div className="container-panel pt-4 pb-5" variants={item}>
+        <div className="panel p-3 p-lg-4">
+          <h2 className="fw-bold panel-title">Comments</h2>
+          <div className="py-6">
+            <CommentComponent
+              entityType="user"
+              entityToken={ttsInferenceResult.tts_result_token}
+              sessionWrapper={props.sessionWrapper}
+            />
+          </div>
+        </div>
+      </motion.div>
     </motion.div>
   );
 }

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_result_view/W2lResultViewPage.tsx

@@ -20,6 +20,7 @@ import { faDownload, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import { CommentComponent } from "../../../_common/comments/CommentComponent";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -50,9 +51,10 @@ function W2lResultViewPage(props: Props) {
     getInferenceResult(token);
   }, [token, getInferenceResult]); // NB: Empty array dependency sets to run ONLY on mount
 
-  const documentTitle = w2lInferenceResult?.template_title === undefined 
-    ? undefined 
-    : `Deep Fake ${w2lInferenceResult.template_title} Lip Sync Video Result`;
+  const documentTitle =
+    w2lInferenceResult?.template_title === undefined
+      ? undefined
+      : `Deep Fake ${w2lInferenceResult.template_title} Lip Sync Video Result`;
   usePrefixedDocumentTitle(documentTitle);
 
   if (notFoundState) {
@@ -352,6 +354,19 @@ function W2lResultViewPage(props: Props) {
           <ReportDiscordLink />
         </motion.div>
       </motion.div>
+
+      <motion.div className="container-panel pt-4 pb-5" variants={item}>
+        <div className="panel p-3 p-lg-4">
+          <h2 className="fw-bold panel-title">Comments</h2>
+          <div className="py-6">
+            <CommentComponent
+              entityType="user"
+              entityToken={w2lInferenceResult.w2l_result_token}
+              sessionWrapper={props.sessionWrapper}
+            />
+          </div>
+        </div>
+      </motion.div>
     </motion.div>
   );
 }

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_view/W2lTemplateViewPage.tsx

@@ -27,6 +27,7 @@ import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../../data/animation";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import { CommentComponent } from "../../../_common/comments/CommentComponent";
 
 interface EnqueueJobResponsePayload {
   success: boolean;
@@ -58,7 +59,10 @@ function W2lTemplateViewPage(props: Props) {
   const [modApprovedFormValue, setModApprovedFormValue] =
     useState<boolean>(true);
 
-  const documentTitle = w2lTemplate?.title === undefined ? undefined : `Create Deep Fake ${w2lTemplate.title} Lip Sync Video`;
+  const documentTitle =
+    w2lTemplate?.title === undefined
+      ? undefined
+      : `Create Deep Fake ${w2lTemplate.title} Lip Sync Video`;
   usePrefixedDocumentTitle(documentTitle);
 
   const getTemplate = useCallback(
@@ -275,9 +279,7 @@ function W2lTemplateViewPage(props: Props) {
   let creatorLink = <span />;
 
   if (!!w2lTemplate?.creator_display_name) {
-    const creatorUrl = WebUrl.userProfilePage(
-      w2lTemplate?.creator_username
-    );
+    const creatorUrl = WebUrl.userProfilePage(w2lTemplate?.creator_username);
     creatorLink = (
       <span>
         <Gravatar
@@ -415,10 +417,7 @@ function W2lTemplateViewPage(props: Props) {
         </motion.h1>
         <motion.h4 variants={item}>Template: {w2lTemplate?.title}</motion.h4>
         <motion.div className="pt-3" variants={item}>
-          <BackLink
-            link={WebUrl.w2lListPage()}
-            text="Back to all templates"
-          />
+          <BackLink link={WebUrl.w2lListPage()} text="Back to all templates" />
         </motion.div>
       </div>
 
@@ -544,6 +543,19 @@ function W2lTemplateViewPage(props: Props) {
         </div>
       </motion.div>
 
+      <motion.div className="container-panel pt-4 pb-5" variants={item}>
+        <div className="panel p-3 p-lg-4">
+          <h2 className="fw-bold panel-title">Comments</h2>
+          <div className="py-6">
+            <CommentComponent
+              entityType="user"
+              entityToken={w2lTemplate.template_token}
+              sessionWrapper={props.sessionWrapper}
+            />
+          </div>
+        </div>
+      </motion.div>
+
       <SessionW2lInferenceResultList
         w2lInferenceJobs={props.w2lInferenceJobs}
       />