Added the feature to chat with image

Author: Infinite-Null

AiApi.js

@@ -51,4 +51,26 @@ async function GetGeminiProResponse(historyData, message) {
     return response.text().length>0 ? response.text(): "Hmm.. I didn't get that.";
 }
 
-export {GetGeminiProResponse}
+async function GetImageResponse(image,message) {
+    function fileToGenerativePart(img, mimeType) {
+        return {
+            inlineData: {
+                data: img,
+                mimeType
+            },
+        };
+    }
+
+    const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });
+
+    const prompt = message;
+
+    const imageParts = image.map((img) => fileToGenerativePart(img.base64, img.type));
+
+    const result = await model.generateContent([prompt, ...imageParts]);
+    const response = await result.response;
+    return response.text().length>0 ? response.text(): "Hmm.. I didn't get that.";
+
+}
+
+export {GetGeminiProResponse, GetImageResponse}

App.tsx

@@ -11,6 +11,8 @@ import {OnboardingScreen} from './Screens/OnboardingScreen';
 import {Initial} from './Screens/Initial';
 import {EsseyPage} from './Screens/EsseyPage';
 import {PlagiarismPage} from './Screens/Plagiarism';
+import Features from "./Screens/Features";
+import ImageChat from "./Screens/ImageChat";
 
 function App(): JSX.Element {
   const Stack = createNativeStackNavigator();
@@ -47,6 +49,20 @@ function App(): JSX.Element {
                 headerShown: false,
               }}
             />
+              <Stack.Screen
+                  name={'ImageChat'}
+                  component={ImageChat}
+                  options={{
+                      headerShown: false,
+                  }}
+              />
+              <Stack.Screen
+                  name={'FeaturesPage'}
+                  component={Features}
+                  options={{
+                      headerShown: false,
+                  }}
+              />
             <Stack.Screen
               name={'MailPage'}
               component={MailPage}

Assets/Image.png

@@ -4,7 +4,7 @@ import {Dimensions, Text, TouchableOpacity, View} from 'react-native';
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
 import {faArrowLeft} from '@fortawesome/free-solid-svg-icons';
 
-export const TopHeader = ({navigation, text}) => {
+export const TopHeader = ({navigation, text, righticon}) => {
   const width = Dimensions.get('window').width;
   return (
     <View
@@ -34,7 +34,10 @@ export const TopHeader = ({navigation, text}) => {
         }}>
         {text}
       </Text>
-      <View></View>
+        {righticon && righticon}
+        {!righticon && <View style={{
+            width:width * 0.07,
+        }}/>}
     </View>
   );
 };

Components/Global/TopHeader.js

@@ -0,0 +1,29 @@
+import {Button, Image, Modal, Text} from "react-native";
+import Dialog from "react-native-dialog";
+import {memo} from "react";
+
+function ImageView({visible, setvisible,image}) {
+    return <Dialog.Container contentStyle={{
+        backgroundColor:'#1e1b38',
+    }} onBackdropPress={()=>{
+        setvisible(false)
+    }} visible={visible} style={{
+        backgroundColor:'#1e1b38',
+        padding:0,
+        margin:0
+    }}>
+        {image.length !== 0 && <Image source={{
+            uri:image[0]?.uri??''
+        }} style={{
+            height:300,
+            width:300,
+        }}/>}
+        {image.length === 0 && <Text style={{
+            color:'white',
+            textAlign:'center',
+            paddingBottom:10
+        }}>No image selected</Text>}
+        <Button title={'Close'} onPress={()=>{setvisible(false)}}/>
+    </Dialog.Container>
+}
+export default memo(ImageView)

Components/ImageView/ImageView.js

@@ -26,7 +26,7 @@ export const ChatPage = ({navigation,route}) => {
     const [VoiceRecording,setVoiceRecording] = useState(false);
     const [value,setvalue] = useState('');
     const [chat,setchat] = useState([]);
-    async function OnPressSend(val) {
+    async function OnPressSend(val,images) {
         const historyData = [...chat]
         setchat((history)=>[...history,
             {role:'user',

Screens/ChatPage.js

@@ -0,0 +1,106 @@
+import {Dimensions, ScrollView, Text, View} from "react-native";
+import React from "react";
+import {EachCard} from "./HomePage";
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+export default function Features({navigation}) {
+    return <ScrollView
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        style={{
+            height: windowHeight,
+            backgroundColor: '#1e1b38',
+            paddingHorizontal: windowWidth * 0.045,
+            paddingTop: 10,
+        }}
+        contentContainerStyle={{
+            paddingBottom: 100,
+        }}>
+        <Text
+            style={{
+                color: 'white',
+                fontSize: windowWidth * 0.07,
+                fontWeight: 'bold',
+                alignSelf: 'flex-start',
+                marginTop: 10,
+                marginBottom:10
+            }}>
+            All Features
+        </Text>
+        <View
+            style={{
+                flexDirection: 'row',
+                gap: 20,
+            }}>
+            <EachCard
+                delay={0}
+                title={'MAIL'}
+                discreption={'Generate professional mail in one tap.'}
+                image={require('../Assets/mail.png')}
+                color={'rgba(33, 64, 133, 0.30)'}
+                navigation={navigation}
+                route={'MailPage'}
+            />
+            <EachCard
+                delay={150}
+                title={'CODE'}
+                discreption={'Generate error free code in one tap.'}
+                image={require('../Assets/webpage.png')}
+                color={'rgba(146, 97, 32, 0.25)'}
+                navigation={navigation}
+                route={'CodePage'}
+            />
+        </View>
+        <View
+            style={{
+                flexDirection: 'row',
+                gap: 20,
+                marginTop: 20,
+            }}>
+            <EachCard
+                delay={250}
+                title={'Image'}
+                discreption={'Chat with image in one tap.'}
+                image={require('../Assets/Image.png')}
+                color={'rgba(48,136,99,0.18)'}
+                navigation={navigation}
+                route={'ImageChat'}
+            />
+            <EachCard
+                delay={350}
+                title={'PLAGIARISM'}
+                discreption={'Remove plagiarism in one tap.'}
+                image={require('../Assets/ai.png')}
+                color={'#2c2250'}
+                route={'PlagiarismPage'}
+                navigation={navigation}
+            />
+        </View>
+        <View
+            style={{
+                flexDirection: 'row',
+                gap: 20,
+                marginTop: 20,
+            }}>
+        <EachCard
+            delay={450}
+            title={'ESSAY'}
+            discreption={'Generate essay on any topic in one tap.'}
+            image={require('../Assets/Essey.png')}
+            color={'rgba(136, 48, 48, 0.18)'}
+            navigation={navigation}
+            route={'EsseyPage'}
+        />
+          <View style={{
+              flex: 1,
+              borderRadius: 10,
+              alignContent: 'center',
+              justifyContent: 'center',
+              alignItems: 'center',
+              paddingBottom: 20,
+          }}>
+          </View>
+        </View>
+    </ScrollView>
+}