Merge pull request #446 from bettersg/336-add-tag-for-generated-image

336 add tag for generated image

Dockerfile

@@ -30,14 +30,13 @@ RUN mkdir $NVM_DIR && \
     bash $NVM_DIR/nvm.sh ${NODE_VERSION}
 
 # Install firebase-tools and emulators \
-RUN npm i -g firebase-tools@13.3.0 && \
+RUN npm i -g firebase-tools && \
     firebase setup:emulators:database && \
     firebase setup:emulators:firestore && \
     firebase setup:emulators:pubsub && \
     firebase setup:emulators:storage && \
     firebase setup:emulators:ui && \
     firebase experiments:enable webframeworks
-#note: Query breaks in [email protected] with error 500
 
 
 # Preserve firebase emulators cache

checkers-app/package.json

@@ -26,6 +26,7 @@
     "react-dom": "^18.2.0",
     "react-phone-number-input": "^3.3.9",
     "react-router-dom": "^6.17.0",
+    "react-select": "^5.8.0",
     "recharts": "^2.12.3"
   },
   "devDependencies": {

checkers-app/src/components/vote/VoteCategories.tsx

@@ -1,7 +1,6 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { ShieldExclamationIcon } from "@heroicons/react/24/solid";
 import { FaceFrownIcon } from "@heroicons/react/24/solid";
-import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { HandThumbUpIcon } from "@heroicons/react/20/solid";
 import { NewspaperIcon } from "@heroicons/react/20/solid";
@@ -13,7 +12,8 @@ import { Button } from "@material-tailwind/react";
 import { patchVote } from "../../services/api";
 import { useUser } from "../../providers/UserContext";
 import { TooltipWithHelperIcon } from "../common/ToolTip";
-
+import { Typography } from "@material-tailwind/react";
+import VoteTags from "./VoteTags";
 import InfoOptions from "./InfoOptions";
 import NVCOptions from "./NvcOptions";
 
@@ -25,10 +25,10 @@ interface PropType {
   currentTags: string[] | null;
 }
 
-function getSelectedCategory(primaryCategory: string | null, tags: string[]) {
+function getSelectedCategory(primaryCategory: string | null) {
   switch (primaryCategory) {
-    case "irrelevant": //INCORRECT USAGE
-      return tags.includes("incorrect") ? "incorrect" : "nvc";
+    case "irrelevant":
+      return "nvc";
     case "legitimate":
       return "nvc";
     default:
@@ -77,13 +77,6 @@ const CATEGORIES = [
     description:
       "Content that isn't capable of being checked using publicly-available information due to its nature",
   },
-  {
-    name: "incorrect",
-    icon: <CheckCircleIcon className="h-7 w-7" />,
-    display: "Incorrect Usage",
-    description:
-      "User trying to chat, addressing CheckMate, or sending in queries",
-  },
   {
     name: "unsure",
     icon: <QuestionMarkCircleIcon className="h-7 w-7" />,
@@ -109,7 +102,7 @@ export default function VoteCategories(Prop: PropType) {
   const messageId = Prop.messageId;
   const voteRequestId = Prop.voteRequestId;
   const [selectedCategory, setSelectedCategory] = useState<string | null>(
-    getSelectedCategory(currentCategory, currentTags)
+    getSelectedCategory(currentCategory)
   );
   const [voteCategory, setVoteCategory] = useState<string | null>(
     currentCategory
@@ -118,7 +111,7 @@ export default function VoteCategories(Prop: PropType) {
   const [truthScore, setTruthScore] = useState<number | null>(
     currentTruthScore
   );
-  const [tags, setTags] = useState<string[] | null>(currentTags);
+  const [tags, setTags] = useState<string[]>(currentTags);
 
   const handleTruthScoreChange = (
     event: React.ChangeEvent<HTMLInputElement>
@@ -132,13 +125,8 @@ export default function VoteCategories(Prop: PropType) {
 
   const handleVoteCategoryChange = (category: string) => {
     switch (category) {
-      case "incorrect":
-        setVoteCategory("irrelevant");
-        setTags(["incorrect"]);
-        break;
       default:
         setVoteCategory(category);
-        setTags([]);
         break;
     }
   };
@@ -150,9 +138,6 @@ export default function VoteCategories(Prop: PropType) {
       case "nvc":
         setVoteCategory("nvc");
         break;
-      case "incorrect":
-        handleVoteCategoryChange("incorrect");
-        break;
       default:
         handleVoteCategoryChange(categoryName);
         break;
@@ -187,8 +172,16 @@ export default function VoteCategories(Prop: PropType) {
     }
   };
 
+  const onSelectTagOption = (tags: string[]) => {
+    setTags(tags);
+    console.log(tags);
+  };
+
   return (
     <div className="grid grid-flow-row gap-y-4 items-center">
+      <Typography variant="h4" className="text-primary-color3 dark:text-white">
+        Select category:
+      </Typography>
       {CATEGORIES.map((cat, index) => (
         <>
           <Button
@@ -217,15 +210,15 @@ export default function VoteCategories(Prop: PropType) {
           )}
           {selectedCategory === "nvc" && cat.name === "nvc" && (
             <NVCOptions
-              selectedCategory={
-                (tags ?? []).includes("incorrect") ? null : voteCategory
-              }
+              selectedCategory={voteCategory}
               onChange={handleL2VoteChange}
             />
           )}
         </>
       ))}
 
+      <VoteTags tags={tags} onSelectTag={onSelectTagOption} />
+
       {voteCategory ? (
         <div className="place-self-center grid grid-flow-row gap-y-4 w-full">
           <Button

checkers-app/src/components/vote/VoteResult.tsx

@@ -39,14 +39,8 @@ export default function VoteResult(Prop: PropType) {
         catIcon = <MegaphoneIcon className="h-7 w-7" />;
         break;
       case "irrelevant":
-        if (Prop.tags?.includes("incorrect")) {
-          //INCORRECT USAGE
-          catName = "Incorrect Usage";
-          catIcon = <ChatBubbleOvalLeftEllipsisIcon className="h-7 w-7" />;
-        } else {
-          catName = "NVC-Can't Tell";
-          catIcon = <NoSymbolIcon className="h-7 w-7" />;
-        }
+        catName = "NVC-Can't Tell";
+        catIcon = <NoSymbolIcon className="h-7 w-7" />;
         break;
       case "legitimate":
         catName = "NVC-Credible";

checkers-app/src/components/vote/VoteTags.tsx

@@ -0,0 +1,46 @@
+import { Typography } from "@material-tailwind/react";
+import { MultiValue } from "react-select";
+import Select from "react-select";
+
+const options = [
+  { value: "generated", label: "🤖 AI Generated" },
+  { value: "incorrect", label: "❌ Incorrect" },
+];
+
+interface VoteTagsProps {
+  tags: string[];
+  onSelectTag: (tag: string[]) => void;
+}
+
+const VoteTags: React.FC<VoteTagsProps> = ({ tags, onSelectTag }) => {
+  const selectedOptions = tags
+    .map((tag) => options.find((option) => option.value === tag))
+    .filter(
+      (option): option is { value: string; label: string } =>
+        option !== undefined
+    );
+
+  const handleSelectionTag = (
+    tagOption: MultiValue<{ value: string; label: string }> | null
+  ) => {
+    const newTags = tagOption ? tagOption.map((tag) => tag.value) : [];
+    onSelectTag(newTags);
+  };
+
+  return (
+    <div className="grid grid-flow-row gap-y-4 items-center">
+      <Typography variant="h4" className="text-primary-color3 dark:text-white">
+        Select tags:
+      </Typography>
+      <Select
+        className="mb-3"
+        value={selectedOptions}
+        onChange={handleSelectionTag}
+        options={options}
+        isMulti
+      />
+    </div>
+  );
+};
+
+export default VoteTags;

checkers-app/src/components/vote/VotingChart.tsx

@@ -36,7 +36,6 @@ export default function VotingChart(Props: VotingChartProps) {
         };
 
   const irrelevantCount = assessedInfo.irrelevantCount;
-  const incorrectCount = assessedInfo.tagCounts.incorrect ?? 0; //INCORRECT USAGE
 
   const data = [
     {
@@ -59,11 +58,7 @@ export default function VotingChart(Props: VotingChartProps) {
     {
       name: "NVC",
       credible: assessedInfo.legitimateCount,
-      notsure: irrelevantCount - incorrectCount,
-    },
-    {
-      name: "Incorrect",
-      count: incorrectCount,
+      canttell: irrelevantCount,
     },
     {
       name: "Unsure",
@@ -95,7 +90,7 @@ export default function VotingChart(Props: VotingChartProps) {
         <Bar dataKey="4" stackId="a" fill="#8B6914" />
         <Bar dataKey="5" stackId="a" fill="#806517" />
         <Bar dataKey="credible" stackId="a" fill="#82ca9d" />
-        <Bar dataKey="notsure" stackId="a" fill="#808080" />
+        <Bar dataKey="canttell" stackId="a" fill="#808080" />
       </BarChart>
     </ResponsiveContainer>
   );

checkers-app/src/components/vote/index.tsx

@@ -12,18 +12,21 @@ import VoteResult from "./VoteResult";
 import VotingChart from "./VotingChart";
 import CustomReply from "./CustomReply";
 
+
 export default function VotePage() {
   const { checkerDetails } = useUser();
   const { messageId, voteRequestId } = useParams();
   const [isLoading, setIsLoading] = useState(false);
   const [vote, setVote] = useState<Vote | null>(null);
+  const [selectedTag, setSelectedTag] = useState<string[]>([])
 
   useEffect(() => {
     setIsLoading(true);
     const fetchVote = async () => {
       if (messageId && voteRequestId) {
         const vote = await getVote(messageId, voteRequestId);
         setVote(vote);
+        setSelectedTag(vote.tags)
       }
       setIsLoading(false);
     };
@@ -41,6 +44,8 @@ export default function VotePage() {
     return null;
   }
 
+
+
   return (
     <>
       <div className="grid grid-flow-row items-center gap-2 pb-2 left-right-padding">
@@ -62,18 +67,12 @@ export default function VotePage() {
         vote.category === "pass" ||
         !vote.isAssessed ? (
           <>
-            <Typography
-              variant="h4"
-              className="text-primary-color3 dark:text-white"
-            >
-              Select category:
-            </Typography>
             <VoteCategories
               messageId={messageId ?? null}
               voteRequestId={voteRequestId ?? null}
               currentCategory={vote.category}
               currentTruthScore={vote.truthScore}
-              currentTags={vote.tags}
+              currentTags={selectedTag}
             />
           </>
         ) : (

firebase.json

@@ -7,6 +7,7 @@
     {
       "source": "functions",
       "codebase": "whatsapp-bot",
+      "runtime": "nodejs18",
       "ignore": [
         "node_modules",
         ".git",