setShowMagnifier(false)}
onClick={() => {
const input = document.getElementById("fileInput");
if (input) {
@@ -80,6 +117,24 @@ const ImageUpload = ({
}
}}
/>
+ {letMagnifier && showMagnifier && (
+
+ )}
= ({
setIsGenerativeContext,
generative_context,
}) => {
+ const BASE_URL_2 = process.env.REACT_APP_API_HOST_2;
+ const { post, response, loading } = useFetch();
+ const dispatch = useDispatch();
+ const { updateModelInputs } = useContext(CreateInterfaceContext);
+ const country = useSelector((state: RootState) => state.wonders.country);
+ const language = useSelector((state: RootState) => state.wonders.language);
+ const selectedCategory = useSelector(
+ (state: RootState) => state.wonders.selectedCategory
+ );
+ const selectedConcept = useSelector(
+ (state: RootState) => state.wonders.selectedConcept
+ );
+
const [filterContext, setFilterContext] = useState
();
const [image, setImage] = useState(
- "https://w7.pngwing.com/pngs/527/625/png-transparent-scalable-graphics-computer-icons-upload-uploading-cdr-angle-text-thumbnail.png",
+ "https://w7.pngwing.com/pngs/527/625/png-transparent-scalable-graphics-computer-icons-upload-uploading-cdr-angle-text-thumbnail.png"
);
const [description, setDescription] = useState("");
- const [selectedCategory, setSelectedCategory] = useState(
- localStorage.getItem("selectedCategory")
- ? JSON.parse(localStorage.getItem("selectedCategory") || "")
- : null,
- );
- const [selectedConcept, setSelectedConcept] = useState(
- localStorage.getItem("selectedConcept")
- ? JSON.parse(localStorage.getItem("selectedConcept") || "")
- : null,
- );
const [showExample, setShowExample] = useState(false);
- const { post, response, loading } = useFetch();
const [countries, setCountries] = useState([]);
- const [country, setCountry] = useState(
- localStorage.getItem("country") || "",
- );
const [languages, setLanguages] = useState([]);
- const [language, setLanguage] = useState(
- localStorage.getItem("language") || "",
- );
const [file, setFile] = useState();
- const BASE_URL_2 = process.env.REACT_APP_API_HOST_2;
- const { modelInputs, updateModelInputs, removeItem } = useContext(CreateInterfaceContext);
- const handleGetLanguages = async (e: any) => {
- if (!e.value) return;
- setCountry(e.value);
+ const handleGetLanguages = async (country: string) => {
// @ts-ignore
const extractedLanguages = generative_context.artifacts.options.reduce(
(acc: string[], item: any) => {
- if (item.primary === e.value) acc.push(...item.secondary);
+ if (item.primary === country) acc.push(...item.secondary);
return acc;
},
- [] as string[],
+ [] as string[]
);
- setLanguage("");
+ dispatch(resetAllButCountry());
setLanguages(extractedLanguages);
setFilterContext(null);
updateModelInputs({
- origin_primary: e.value,
+ origin_primary: country,
origin_secondary: extractedLanguages[0],
});
};
+ const handleCountryChange = (e: any) => {
+ if (!e.value) return;
+ dispatch(updateCountry(e.value));
+ handleGetLanguages(e.value);
+ dispatch(resetCategoryAndConcept());
+ };
+
const handleLanguageChange = (e: any) => {
- setLanguage(e.value);
+ dispatch(updatelanguage(e.value));
updateModelInputs({ origin_primary: country, origin_secondary: e.value });
};
@@ -190,14 +244,20 @@ const DescribeImage: FC = ({
};
const handleSaveData = async () => {
- if (description.length < 20) {
- alert("Please enter a description with at least 20 characters.");
+ if (!selectedCategory) {
+ alert("Please pick a category.");
return;
}
- if (!file || !description || !selectedCategory || !selectedConcept) {
- alert(
- "Please choose an image, describe it, and pick a category and concept.",
- );
+ if (!selectedConcept) {
+ alert("Please pick a concept.");
+ return;
+ }
+ if (!file) {
+ alert("Please choose an image.");
+ return;
+ }
+ if (description.length < 20) {
+ alert("Please enter a description with at least 20 characters.");
return;
}
const formData = new FormData();
@@ -228,50 +288,28 @@ const DescribeImage: FC = ({
// @ts-ignore
const extractedCountries = generative_context.artifacts.options.map(
// @ts-ignore
- (item) => item.primary,
+ (item) => item.primary
);
setCountries(extractedCountries);
}
}, [generative_context]);
useEffect(() => {
+ if (country && !language) {
+ handleGetLanguages(country);
+ }
if (country && language) {
handleGetCategories();
}
- }, [country, language]);
-
- useEffect(() => {
- localStorage.setItem("language", language);
- localStorage.setItem("country", country);
- localStorage.removeItem("selectedCategory");
- localStorage.removeItem("selectedConcept");
- removeItem("category");
- removeItem("concept");
- setSelectedCategory(null);
- setSelectedConcept(null);
}, [language, country]);
useEffect(() => {
- if (localStorage.getItem("language") && localStorage.getItem("country")) {
- updateModelInputs({
- origin_primary: localStorage.getItem("country"),
- origin_secondary: localStorage.getItem("language"),
- });
- }
- if (localStorage.getItem("selectedCategory")) {
- updateModelInputs({ category: selectedCategory.value });
- }
- if (localStorage.getItem("selectedConcept")) {
- updateModelInputs({ concept: selectedConcept.value });
- }
- }, [localStorage]);
+ selectedCategory && updateModelInputs({ category: selectedCategory.value });
+ }, [selectedCategory]);
useEffect(() => {
- // If language and country are already selected then fetch the context
- if (localStorage.getItem("language") && localStorage.getItem("country")) {
- handleGetCategories();
- }
- }, [localStorage.getItem("language")]);
+ selectedConcept && updateModelInputs({ concept: selectedConcept.value });
+ }, [selectedConcept]);
return (
<>
@@ -307,21 +345,22 @@ const DescribeImage: FC = ({