Color palettes generate with AI (#248)

* basic UX with bottom tabs

* improve UI little more

* integration with backend

network/color_palette.js

@@ -6,3 +6,9 @@ export const generate = async (lockedColors, numColors) => {
     num_colors: numColors
   });
 };
+
+export const generateUsingColor = async (hexColor) => {
+  return axiosInstance.post('color_palettes/generate_using_color', {
+    base_color: hexColor
+  });
+};

package.json

@@ -15,12 +15,13 @@
     "@react-native-async-storage/async-storage": "^1.15.9",
     "@react-native-clipboard/clipboard": "^1.14.0",
     "@react-native-google-signin/google-signin": "^9.0.2",
+    "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/elements": "^1.2.1",
     "@react-navigation/native": "^6.0.8",
     "@react-navigation/native-stack": "^6.2.5",
     "@react-navigation/stack": "^6.2.0",
-    "expo-permissions": "^13.0.3",
     "axios": "^1.3.4",
+    "expo-permissions": "^13.0.3",
     "i18next": "^22.0.4",
     "moment": "^2.30.1",
     "node-libs-react-native": "^1.2.1",

screens/PalettesScreen.js

@@ -1,17 +1,20 @@
-import React, { useEffect, useLayoutEffect } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Icon from 'react-native-vector-icons/Ionicons';
 import Color from 'pigment/full';
 import { PalettePreviewCard } from '../components/PalettePreviewCard';
 import { logEvent } from '../libs/Helpers';
 import useApplicationStore from '../hooks/useApplicationStore';
-export default function PalettesScreen({ navigation }) {
-  const { detailedColor } = useApplicationStore();
+import { useNavigation } from '@react-navigation/native';
+import Colors from '../constants/Styles';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { generateUsingColor } from '../network/color_palette';
 
-  useLayoutEffect(() => {
-    navigation.setOptions({ title: detailedColor });
-  }, [detailedColor]);
+function PalettesScreen() {
+  const { detailedColor } = useApplicationStore();
+  const navigation = useNavigation();
 
-  // Convert camelCase to sentence
   const parseCamelCase = (text) => {
     if (typeof text !== 'string') {
       return '';
@@ -21,6 +24,7 @@ export default function PalettesScreen({ navigation }) {
       .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3')
       .replace(/^./, (str) => str.toUpperCase());
   };
+
   const fullColor = new Color(detailedColor);
   let items = [];
   for (const i in fullColor) {
@@ -52,9 +56,122 @@ export default function PalettesScreen({ navigation }) {
   );
 }
 
+function PalettesScreenAI() {
+  const { detailedColor } = useApplicationStore();
+  const [loading, setLoading] = useState(true);
+  const [palettes, setPalettes] = useState([]);
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    const fetchPalettes = async () => {
+      try {
+        const response = await generateUsingColor(detailedColor);
+        const generatedPalettes = response.data.palettes;
+        setPalettes(generatedPalettes);
+      } catch (error) {
+        console.error('Error fetching AI palettes:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPalettes();
+    logEvent('palettes_screen_ai');
+  }, [detailedColor]);
+
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      {loading ? (
+        <ActivityIndicator size="large" color="#0000ff" />
+      ) : (
+        palettes.map((palette, index) => {
+          const colors = palette.colors.map((color) => ({ color: color.hex }));
+          return (
+            <PalettePreviewCard
+              onPress={() => {
+                navigation.navigate('ColorList', { suggestedName: palette.name, colors });
+              }}
+              key={index.toString()}
+              colors={colors}
+              name={palette.name}
+            />
+          );
+        })
+      )}
+    </ScrollView>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     paddingLeft: 12,
     paddingRight: 12
   }
 });
+
+const Tab = createBottomTabNavigator();
+
+export default function PalettesTabNavigator() {
+  const { detailedColor } = useApplicationStore();
+  const navigation = useNavigation();
+  useLayoutEffect(() => {
+    navigation.setOptions({ title: detailedColor });
+  }, [detailedColor, navigation]);
+
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarIcon: ({ focused, color, size }) => {
+          if (route.name === 'Color Theory') {
+            return (
+              <Icon
+                name="color-palette"
+                size={size}
+                color={focused ? Colors.primary : color} // Highlight the selected tab
+                style={{
+                  shadowColor: focused ? Colors.primary : '#000',
+                  shadowOpacity: 0.2,
+                  shadowRadius: 10
+                }}
+              />
+            );
+          } else if (route.name === 'AI') {
+            return (
+              <FontAwesome
+                name="magic"
+                size={size}
+                color={focused ? Colors.primary : color} // Highlight the selected tab
+                style={{
+                  shadowColor: focused ? Colors.primary : '#000',
+                  shadowOpacity: 0.2,
+                  shadowRadius: 10
+                }}
+              />
+            );
+          }
+        },
+        tabBarStyle: {
+          backgroundColor: '#ffffff',
+          borderTopWidth: 0,
+          elevation: 10,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 5 },
+          shadowOpacity: 0.1,
+          shadowRadius: 10,
+          paddingBottom: 10,
+          paddingTop: 10,
+          height: 60
+        },
+        tabBarActiveTintColor: Colors.primary,
+        tabBarInactiveTintColor: Colors.gray,
+        tabBarLabelStyle: {
+          fontSize: 12, // Slightly larger font size for better readability
+          fontWeight: '600' // Bold text for the labels
+        }
+      })}>
+      <Tab.Screen name="Color Theory" component={PalettesScreen} />
+      <Tab.Screen name="AI" component={PalettesScreenAI} />
+    </Tab.Navigator>
+  );
+}

yarn.lock

@@ -2186,6 +2186,15 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
+"@react-navigation/bottom-tabs@^6.6.1":
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.6.1.tgz#589edc9c8fbf652c485b3c37d344faafe3cd4cc4"
+  integrity sha512-9oD4cypEBjPuaMiu9tevWGiQ4w/d6l3HNhcJ1IjXZ24xvYDSs0mqjUcdt8SWUolCvRrYc/DmNBLlT83bk0bHTw==
+  dependencies:
+    "@react-navigation/elements" "^1.3.31"
+    color "^4.2.3"
+    warn-once "^0.1.0"
+
 "@react-navigation/core@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.0.tgz#c44d33a8d8ef010a102c7f831fc8add772678509"
@@ -2203,6 +2212,11 @@
   resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.2.1.tgz#86f19781c6f34a5c9dd25dca99915e0306f477d1"
   integrity sha512-EnmAbKMsptrliRKf95rdgS6BhMjML+mIns06+G1Vdih6BrEo7/0iytThUv3WBf99AI76dyEq/cqLUwHPiFzXWg==
 
+"@react-navigation/elements@^1.3.31":
+  version "1.3.31"
+  resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.31.tgz#28dd802a0787bb03fc0e5be296daf1804dbebbcf"
+  integrity sha512-bUzP4Awlljx5RKEExw8WYtif8EuQni2glDaieYROKTnaxsu9kEIA515sXQgUDZU4Ob12VoL7+z70uO3qrlfXcQ==
+
 "@react-navigation/elements@^1.3.6":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.6.tgz#fa700318528db93f05144b1be4b691b9c1dd1abe"
@@ -4273,14 +4287,6 @@ expo-file-system@~11.1.3:
     expo-modules-core "~0.2.0"
     uuid "^3.4.0"
 
-expo-font@^10.0.3:
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/expo-font/-/expo-font-10.0.3.tgz#655817f3e62f39bc906adda4c3a2fec052ef040a"
-  integrity sha512-xM5oqIduGvJ+qbsZHjMNNt+3hhjOMTunHUtOx5rAmW/D1ZVdfLwjDwOyWBVkH8ChoBRAZy9gsC2cRs7naw8NIw==
-  dependencies:
-    expo-modules-core "~0.4.4"
-    fontfaceobserver "^2.1.0"
-
 expo-image-loader@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/expo-image-loader/-/expo-image-loader-2.2.0.tgz#b5d49ec65e576c033823050b223ef462c5ec5711"
@@ -4498,11 +4504,6 @@ follow-redirects@^1.15.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
-fontfaceobserver@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
-  integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"